前端模块化

1、什么是模块？

定义：具备相同属性和行为的事物的集合
在前端中：将一些属性比较相似和行为比较相似的内容放在同一个js文件里面，把这个js文件称为模块
目的：为了每一个js文件只关注与自身有关的事情，让每一个js文件各行其职

2、什么是模块化？CommonJS是什么？AMD和CMD又是什么？

①模块化：指的就是遵照commonjs规范，解决不一样js模块之间相互调用问题
②CommonJS：

1. A.js文件中调用另外一个B.js文件，必定要在A.js中引入B.js
   require("B.js");
2. 另外一个被调用的js，也就是B.js必定要对外提供接口。
   module.exports=B;
   过程以下：
   B.js

   var b = "Hello,I'm module B."; module.exports = b;//暴露一个接口，与b对接。这个接口既能够是函数，也能够是对象，甚至是数组。

   A.js

   var _b = require("./B.js");//实际过程当中应当是B.js相对于A.js的路径，这比使用绝对路径去获取要规范得多 //此时_b得到了B.js的接口，这个接口指向B.js中的变量b console.log( _b );//"Hello,I'm module B.";

   这就实现了一个简单的模块化工做方式，即：
   模块间相互调用，协同工做，实现某特定功能。

④AMD规范：Async Module Define 异步模块声明
⑤CMD规范：Common Module Define 公共模块声明

⑥模块化的核心价值：模块化最核心的价值在于解决不一样文件之间的分工和调用问题，即依赖关系。

3、模块化的一些工具

• gulp + browerify

  • 构建步骤：
    1. 安装gulp
       npm install gulp --save-dev //要安装全局仍是本地依赖根据实际状况来
    2. 安装browserify --save--dev
       npm install browserify --save--dev
    3. 安装文件输出流工具
       npm install vinyl-source-stream --save-dev
    4. 在gulpfile里编写任务实现模块化
       gulpfile.js

       //基本模块引入 var gulp = require('gulp'); var brow = require('browerify'); var source = require('vinyl-source-stream'); //任务编写 gulp.task('bundle', function() { //将任务交付给browserify //brow读取入口文件后，能自动查找相互之间有依赖的关系的模块 return brow('./entry.js') .bundle()//输出一个文件流变量（gulp的工做机制） .pipe(source('bundle.js'))//将文件流变量输出为文件 .pipe(gulp.dest('js'));//将文件最终输出 }

• webpack
  参考webpack的配置及使用

• requireJS
  • 模块声明规范：AMD
  • 声明模块
    • 参数1：id 是这个模块的名称，它是一个可选参数，默认为require加载此模块时指定的名称，若定义这个参数，那么这个模块名应当为“顶级”的，不容许相对名称。
    • 参数2：数组，为这个模块所依赖的其余模块
    • 匿名函数参数：为依赖模块在这个模块中的接口，它们是一一对应的，所以即使不须要某个模块的接口，但如果须要它后面模块的接口，那也必须给它增长一个用于占位的参数。

      define( 'id', [ 'module1', 'module2' ], function( m1, m2 ) { return { arg1: m1, arg2: m2 } //返回值便是module3的接口 });

  • 使用步骤
    1. 下载requireJS
       bower install requirejs//根据我的习惯选择下载方式，只要保证后续引入的路径正确
    2. 配置config文件和main.js
       config.js

       require.config( { base: '',//引入模块的起始路径 //paths对象为要引入的模块的名称及路径，且不需.js后缀，require默认会为文件添加.js后缀 paths: { 'jquery': './jquery-1.11.0'//这就引入了juery做为一个模块。 PS：jquery本身已经实现了AMD，而且'jquery'是一个顶级模块名。 } } );

       main.js

       require(['jquery'], function( $ ) { $(document).css("background", "#000");//这就实现了引入使用jquery模块，并用它进行dom操做 });

    3. 在页面中引入

       <script data-main="./main.js" src="./bower-components/requirejs/dist/require.js></script> //main便是主逻辑入口文件

• SeaJS
  • 模块声明规范：CMD
  • 声明模块

    define( function( require, exports, module ) { var c = require('./Controller.js'); c(); })

  • 使用步骤
    1. 下载seajs
       bower install seajs//这里根据我的习惯下载seajs的包，只要引入时路径正确就行
    2. 配置seajs.config

       seajs.config({
       base: './', //模块起始路径 }) seajs.use('./main');//使用主逻辑入口文件，至关于requirejs中的data-main文件

**requireJS和SeaJS都是在前端实现模块化，至关于一个前端的js模块化加载器，和webpack不同，webpack是经过nodejs将文件打包的。

4、模块化案例

前端mvc架构

• Vue 组件化&模块化
• React 组件化&模块化
• node.js 每一个文件都是模块

什么是MVC

• 后端开发的一种概念
  即view( html + js + css + img ) + controller( 控制层 ) + model( 数据模型 )
  • 前端演变了一套MVC体系：
    • veiw( html + css + js )
      写静态页面 css、js、img及效果
    • controller( 专一于实现服务和逻辑控制的层面叫作控制器 )
      监听页面中请求和事件，处理请求和事件；向model请求数据，获得数据后绑定到页面
    • model ( 数据变量 || ajax从服务端取回的数据 )
      对外提供一些数据

体现了一种分层的概念，让每一个层面只作本身该作的行为，减小代码耦合和冗余

为何使用MVC？

• 低耦合：
  MVC将业务分为三层，减小了数据与业务的耦合性，加强了各层次功能的独立性，使得在需求改变时可能只须要改变其中一层就能完成服务；
• 复用性高：
  三层业务功能分明，耦合度低，使各模块能够独立完成自身功能，下降了依赖性，具备很高的复用性。
• 利于批量生产和扩展：
  复用性高使得在批量生产的时候能够根据需求进行模块的重用，加快了生产效率。而且模块化使得扩展也很是方便，模块只需根据规范进行编写，经审核后引入即可以实现扩展。
• 利于协做开发：
  扩展性强使协做开发也变得很是方便，每一个人根据本身的分工设计本身的模块，不与他人冲突，引入时也各行其职。
• 推广普及度高：
  因为对协做开发的友好，使得MVC模式大受开发者的欢迎，使用这个模式的产品的推广和普及变得容易得多。

文／Asambojur（简书做者） 原文连接：http://www.jianshu.com/p/9171c5496c8e 著做权归做者全部，转载请联系做者得到受权，并标注“简书做者”。