本文共 3121 字,大约阅读时间需要 10 分钟。
定义:具有相同属性和行为的事物的集合
在前端中:将一些属性比较类似和行为比较类似的内容放在同一个js文件里面,把这个js文件称为模块
目的:为了每个js文件只关注与自身有关的事情,让每个js文件各行其职
①模块化:指的就是遵守commonjs规范,解决不同js模块之间相互调用问题
②CommonJS:
require("B.js");
module.exports=B;
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 公共模块声明
⑥模块化的核心价值:模块化最核心的价值在于解决不同文件之间的分工和调用问题,即依赖关系。
gulp + browerify
npm install gulp --save-dev //要安装全局还是本地依赖根据实际情况来
npm install browserify --save--dev
npm install vinyl-source-stream --save-dev
//基本模块引入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
参考
define( 'id', [ 'module1', 'module2' ], function( m1, m2 ) { return { arg1: m1, arg2: m2 } //返回值即是module3的接口 });
bower install requirejs//根据个人习惯选择下载方式,只要保证后续引入的路径正确
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操作 });
define( function( require, exports, module ) {var c = require('./Controller.js'); c(); })
bower install seajs//这里根据个人习惯下载seajs的包,只要引入时路径正确就行
seajs.config({base: './', //模块起始路径})seajs.use('./main');//使用主逻辑入口文件,相当于requirejs中的data-main文件
**requireJS和SeaJS都是在前端实现模块化,相当于一个前端的js模块化加载器,和webpack不一样,webpack是通过nodejs将文件打包的。
体现了一种分层的概念,让每个层面只做自己该做的行为,减少代码耦合和冗余