前端模块化

js模块化提供的三种规范

　　1，commonjs 规范  代表就是nodejs  适合后台开发 因为是同步的 服务器的运行比较快等待时间不长，commonjs不适合用于前端，前端的客户端是浏览器，浏览器追求异步加载，浏览器不能等待太长时间。

　　2，前端模块的规范是Amd规范 代表就是requirejs，他是异步的，很多前端框架都是用的amd规范，比如jquery angular等

 　   3，第三个模块化规范是而es6

模块化操作

　　①，Commonjs的操作

　　　　所有的模块化都是两个方向，暴露模块接口和引入模块。Module.exports={} 暴露的是一个叫exports的对象。Require() 引入一个模块。这是后台的规范，在nodejs环境可以直接运行，但是在客户端不能直接运行，需要对文件打包解析。Webpack  gulp。

　　

　　②，Amd是前端模块化的一种规范，全称async module definition 异步模块加载机制，所以需要按照这个规范去定义模块和使用模块。

　　　　1.require提供了一个全局的方法 叫define() 用来定义模块

　　　　　　定义模块分两种 1 不依赖其他模块 2.依赖其他模块

　　　　　　如何使用这写模块

　　　　　　　　在主文件中分两部分，一部分是配置模块  一部分是使用模块

 

 

随着前端的不断发展，前端已经不仅仅是一个简单依据需求完成网页开发的过程，

如何提高网页开发效率，提高代码复用率，降低块与块之间的耦合性是我们需要思考的问题，

而前端的组件化、模块化让我们能解决这样的问题。

可以根据需要把它放在页面的任意部位，也可以和其他组件一起形成新的组件。一个页面是各个组件的结合，可以根据需要进行组装。

　　而模块化侧重的功能的封装，主要是针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。

模块可以通过传递参数的不同修改这个功能的的相关配置，每个模块都是一个单独的作用域，根据需要调用。

一个模块的实现可以依赖其它模块。

 

不同开发者在开发过程中使用不同的代码风格会直接的提升在之后的开发和维护的成本和难度，对前端开发来说更是尤为突出。这时使用代码规范来约束开发者的编码风格就可以大体解决这些问题。规范的制订应从下面的几个方面来开始考虑：

文件规范

注释规范

命名规范

书写规范

其他规范

文件规范

文件规范又可以从三个方面入手，分类，引入，以及文本本身的内容。

分类（分类可分为通用类和业务类。通用类有第三方的库，团队开发的通用模块或者通用样式。业务类则有不同业务所对应的特定模块。）

引入

CSS （引入文件则需尽少的使用行内样式）

JavaScript （文件名的约束，以及编码设置通常使用utf-9）

注释规范

注释可使用块状，单行注释和行内注释，需要统一缩进等细节要求。

命名规范

例如 CSS 选择器的命名规范

分类命名 （例如g-header来给布局类的样式设置命名空间来防止样式污染，m-header来制定模块类的样式）

命名格式 （大小写的规定，建议使用小写并使用-分隔，也许控制选择器的长度避免过长的样式选择器名称但不可失去选择器语义）

语义化命名 （以内容的语义来给选择器命名）

书写规范

这里使用 CSS 的书写规范来做示例，可以参考下面的约束：

单行与多行（单行与多行的 CSS 书写格式，使用多行！）

空格与分号（使用空格进行缩进并保留最后一个属性的分号）

书写顺序（更具显示的重要性来安排可参照下表）

Hack 方式（三思而后行）

值格式（例如颜色值的格式以及引用中是否使用引号）

 

 

其他规范

这里包括有 HTML 以及图片的规范：

HTML

文档声明

闭合

属性

层级

注释

大小写

图片

文件名称（语言以及长度的规范）

保留源文件

图片合并

模块化

模块化是一系列相关的结果组成的整体，这部分具备独立存在的意义不单纯只是表现。

在开发模块化是需要注意的一些步骤（以 CSS 模块化为例）：

为模块分类命名（m-module-name）

以一个主选择器作为开头（模块跟节点）

使用以主选择器开头的后代选择器（模块子节点）

 

 

 

 

模块化可以利于多人开发，便于扩展，当然也可以提高代码的可读性与可维护性。