伴随着互联网的飞速发展，web中对于前端的要求越来越高，前端的代码的代码量、复杂度与日俱增，带来了诸如前端代码复用率低，难维护等问题。针对这些现有问题，达观科技采用了requirejs框架，用模块化的思想去解决这些问题。(达观数据 施列宇) 一、什么是模块化 模块化是一种将复杂系统拆分成一个个小的可管理的模块的方式。它可以把系统拆分为职责更单一，更独立的模块，也就是我们软件设计中常常提到的高内聚低耦合的模块。一般来说，前端模块化包含javascript，css以及template三个部分。 二、为什么要将前
关于模块和模块化，百度百科有一段引用自《Java应用架构设计：模块化模式与OSGi》一书的解释非常好：
初学Web前端要注意什么？如何学好JS模块化编程？JavaScript是前端三要素之一，也是很多初学Web前端的人遭遇的第一条拦路虎。很多同学表示JavaScript涵盖的知识点太多太复杂、应用也是五花八门完全摸不着头脑。但只要我们一点一点由基础到进阶的学习，就一定能学好JavaScript，接下来小编就给大家分享有关JavaScript模块化编程的知识。
=> 揭示模式 revealing => 上层无需了解底层实现，仅关注抽象 => 框架
技术的诞生是为了解决某个问题，模块化也是。 随着前端的发展，web技术日趋成熟，js功能越来越多，代码量也越来越大。之前一个项目通常各个页面公用一个js，但是js逐渐拆分，项目中引入的js越来越多. 在js模块化诞生之前，开发者面临很多问题:
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/linzhiqiang0316/article/details/80171659
webpack的起步 基本使用 新建目录结构 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
在TS中使用模块化是比较简单的，并且我们在导入的时候是不需要自己写import的，可以利用TS的智能提示，如下：
上一家电商公司烧了半年，有点烧不动了，我就赶紧跑了。 感谢上一家电商公司，让我有机会操刀搞了一次电商交易类网站的架构体验。 这次换了一家公司，做语音媒体的。就是在PC端听语音广播，类似于喜马拉雅的PC版的东西。具名就不提了。 这一次呢，依然是整个网站的前端都由我一个人来负责。我很自然的就想从架构上搞搞好，而不是简单的切页面写功能。 聊之前，还是看下定义。 架构，啥叫架构呢？ 架构，又名软件架构，是有关软件整体结构与组件的抽象描述，用于指导大型软件系统各个方面的设计。 软件架构，前端算是软件吗？ 按过去的眼光
CommonJS API定义很多普通应用程序（主要指非浏览器的应用）使用的API，从而填补了这个空白。 它的终极目标是提供一个类似Python，Ruby和Java标准库。 这样的话，开发者可以使用CommonJS API编写应用程序，然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。
网上找的科普贴，整理了一下发给大家，出处见底部链接。有许多类比的例子不太准确，大家参考下就行。
在webpack中既可以书写commonjs模块也可以书写es模块，而且不用考虑浏览器的兼容性问题，我们来分析一下原理。
这个仓库[1]记录了一些关于javascript UMD模块规范的demo，对我学习UMD规范有了很大帮助，希望也能帮助到你。
ES6初学者，通过阅读本文可对ES6知识点有个大体的概念，强烈建议阅读阮一峰大大的ES6入门。
导读 本人从android开发转前端后，半年的前端开发经历，总结一下前端的学习思路以及后续方向。这个过程虽然也没做什么牛逼的大项目，过程中总结了一些学习的想法，所以分享下前端开发学习相关的东西。当然本文不是教你写代码，只是告诉你大概的一个学习的脚手架。 作者：郑潇乾--腾讯移动端开发工程师 @IMWeb前端社区 1.浏览器内核背景 谈谈前端的学习，就离不开运行所在的环境的发展，下面简单介绍下浏览器的内核的一个结构以及情况，这样可以更好的帮助你了解学前端会遇到哪些问题，如何去解决。 浏览器内核结构： 渲染引擎
戳蓝字“IMWeb前端社区”关注我们哦！ 文/uknowzheng 腾讯MIG事业群——前端开发 工程师 1写在前面 本人从android开发转前端后，半年的前端开发经历，总结一下前端的学习思路以及后续方向。这个过程虽然也没做什么牛逼的大项目，过程中总结了一些学习的想法，所以分享下前端开发学习相关的东西。当然本文不是教你写代码，只是告诉你大概的一个学习的脚手架。 （左右滑动查看代码） 2浏览器内核背景 谈谈前端的学习，就离不开运行所在的环境的发展，下面简单介绍下浏览器的内核的一个结构以及情况，这样可以更好
非模块化方式开发的痛苦 （1）命名冲突 起初，我们定义了一个通用功能的JS文件，例如 utils.js（其中有一个 each 函数），谁需要谁调用即可 但随着项目和团队越来越大，就会出现问题 小杨在自己的 a.js 中也定义了一个 each 函数，这时有人同时引用了 utils.js 和 a.js，冲突就出现了，小杨只好把自己的 each函数名改为别的，再通知别人改名了，之后，不同开发人员之间不断出现这类问题 后来，团队决定引入命名空间，对 utils.js 进行改造 var org = {}; org.C
public/index.html 类似PHP框架的 public/index.php
模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。参见阮一峰老师的文章 module-loader 。
这里建议先复习一下《再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6》
原文：《Using JavaScript modules on the web》 https://developers.google.com/web/fundamentals/primers/modules 译者序 JS modules，即ES6的模块化特性，通过 <scripttype="modules">可以实现不经过打包直接在浏览器中import/export，此玩法确实让人眼前一亮。 先看看 <scripttype="modules">的兼容性。目前只有较新版本的chrome/firefox/saf
相对于其他静态语言，JS最大缺陷就是天生不具有模块化，没有语言层面的命名空间的概念。问题如下：
模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。参见阮一峰老师的文章 module-loader[1] 。
我们知道，Node.js是基于CommonJS规范进行模块化管理的，模块化是面对复杂的业务场景不可或缺的工具，或许你经常使用它，但却从没有系统的了解过，所以今天我们来聊一聊Node.js模块化你所需要知道的一些事儿，一探Node.js模块化的面貌。
exports和module.exports的适用误区
如果我们没有使用配置文件webpack.config.js，那么我们就需要通过命令来打包
原文说的JS modules，实际上指的是ES6的模块化特性，通过<script type="module">可以实现不经过打包直接在浏览器中import/export，此玩法确实让人眼前一亮。
require.js是各种网络APP中非常常见的JS依赖库，它其实不仅仅是个模块加载器那么简单。它背后蕴含了一个非常重要的设计，也就是JS模块化编程。模块化是任何一个编程语言都会支持的设计，通过模块化能够将一个重要的问题拆分成一个个小的问题，并且模块与模块之间不关联（或者弱关联），减小的程序的开发难度。
模块化是将项目中不同的功能拆分成多个独立的模块，通过模块之间的互相组合完成一定功能的操作过程
大前端是指在传统前端开发基础上，结合新的技术和工具，拓展前端开发能力，进一步提升用户体验和页面交互性。大前端开发涉及到多种技术领域，包括前端技术、移动端开发、桌面端开发等，旨在实现跨平台、跨终端的统一开发和用户体验。
type="module" 表示使用模块化, ./module/1.js 中的 ./ 不能省略
AngularJS模块化使用的并不是标准的AMD规范，AngularJS的风格风格大致是这样的：
导语 | 若你对webpack仅仅是处于使用阶段，觉得webpack原理太杂太乱太多，但是觉得大概了解下webpack的大致原理也不错。亦或是想要了解分包优化如何进行配置呢？以及为什么webpack官方分包配置会从 CommmonsChunkPlugin演变成SplitChunksPlugin呢？我按照自己的方式，通过查阅、整理相关文档，梳理一些比较容易让大家纠结的点，让大家通过本篇文章，大概了解webpack是干了什么？ 一、webpack前生今世 （一）前端石器时代----->工业化时代 前端变迁转折
在日益复杂和多元的Web业务背景下，前端工程化这个概念经常被提及。“说说你对Web工程化的理解？” 相信很多初学者在面试时会经常遇到，而大多数人脑子会直接浮现出 Webpack，认为工程化就是 Webpack 做的那些事情儿，当然也不能说不对，准确说 Webpack 只是工程化背景下产生的工具。
在nodejs，exports 是 module.exports的引用，初始化时，它们都指向同一个{}对象。
对外输出东西，需要加给exports,用处控制哪些输出 注意，nodejs中没有全局变量，每个定义的变量只能在模块内使用，除非你exports这个变量。nodejs会自动将模块包裹在：
Node.js是由ECMAScript及Node 环境提供的一些附加API组成的，包括文件、网络、路径等等一 些更加强大的API。
模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。
CommonJs、AMD、CMD、ES6都是用于模块化定义中使用的规范，其为了规范化模块的引入与处理模块之间的依赖关系以及解决命名冲突问题，并使用模块化方案来使复杂系统分解为代码结构更合理，可维护性更高的可管理的模块。
原理： 在window这个全局对象下面，挂载属性，那么全局都可以拿到这个属性的值，原则上一个js文件作为一个模块，就是一个IIFE函数
Layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。
javascript语言实现,ES6规范（使用babel编译器将es6转换为es5，webpack只支持部分es6）：
项目搭建以及webpack打包配置流程 创建文件夹EC（文件夹和文件名根据需求自定义） 在EC文件夹下新建文件夹APP 在APP文件夹下新建入口文件index.js 和运行该入口文件的index.html文件 在APP文件夹下新建两个js文件：a,js b.js （当项目级别如react项目，可以根据需求创建components文件夹等等，用于更好地管理模块化项目） APP/index.html <!DOCTYPE html> <html> <head> <meta charse
从字面意思就可以看出初始化项目过程中，选第一行的话生成的vue项目就是带编译器的，选第二句的话就是不带编译器的，同时它们都是选择的运行时版本。
js模块化规范有：CommonJS、AMD、CMD、ES6的模块系统。本文将依次介绍下每个规范。
上文「前端工程四部曲」模块化的前世今生（上）中我们主要介绍了JS模块化相关的知识，对于JS模块化，相信很多人都不陌生，但说起CSS模块化，可能大家就没有这么清晰了。大部分人都会重点关注JS而忽略CSS，但CSS也是前端三剑客不可或缺的一部分，在编写CSS的时候，绝大多数人都是比较随意的，所以会经常造成一些开发痛点。接下来这篇文章我们就来简单聊一聊 CSS 模块化。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
