前端模块化的那些事儿
lifb3808
8年前
<h2><strong>一、什么是模块?</strong></h2> <p>定义:具有相同属性和行为的事物的集合</p> <p>在前端中:将一些属性比较类似和行为比较类似的内容放在同一个js文件里面,把这个js文件称为模块</p> <p>目的:为了每个js文件只关注与自身有关的事情,让每个js文件各行其职</p> <h2><strong>二、什么是模块化?CommonJS是什么?AMD和CMD又是什么?</strong></h2> <p>①模块化:指的就是遵守commonjs规范,解决不同js模块之间相互调用问题</p> <p>②CommonJS:</p> <ol> <li>A.js文件中调用另一个B.js文件,一定要在A.js中引入B.js<br> require("B.js");</li> <li>另一个被调用的js,也就是B.js一定要对外提供接口。<br> module.exports=B;<br> 过程如下:<br> B.js <pre> <code class="language-javascript">var b = "Hello,I'm module B."; module.exports = b;//暴露一个接口,与b对接。这个接口既可以是函数,也可以是对象,甚至是数组。</code></pre> A.js <pre> <code class="language-javascript">var _b = require("./B.js");//实际过程中应当是B.js相对于A.js的路径,这比使用绝对路径去获取要规范得多 //此时_b获得了B.js的接口,这个接口指向B.js中的变量b console.log( _b );//"Hello,I'm module B.";</code></pre> 这就实现了一个简单的模块化工作方式,即:<br> <strong>模块间相互调用,协同工作,实现某特定功能。</strong></li> </ol> <p>④AMD规范:Async Module Define 异步模块声明</p> <p>⑤CMD规范:Common Module Define 公共模块声明</p> <p>⑥模块化的核心价值:模块化最核心的价值在于解决不同文件之间的分工和调用问题,即依赖关系。</p> <h2><strong>三、模块化的一些工具</strong></h2> <ul> <li> <p>gulp + browerify</p> <ul> <li>构建步骤: <ol> <li>安装gulp<br> npm install gulp --save-dev //要安装全局还是本地依赖根据实际情况来</li> <li>安装browserify --save--dev<br> npm install browserify --save--dev</li> <li>安装文件输出流工具<br> npm install vinyl-source-stream --save-dev</li> <li>在gulpfile里编写任务实现模块化<br> gulpfile.js <pre> <code class="language-javascript">//基本模块引入 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'));//将文件最终输出 }</code></pre> </li> </ol> </li> </ul> </li> <li> <p>webpack</p> <p>参考 webpack的配置及使用</p> </li> <li>requireJS <ul> <li>模块声明规范:AMD</li> <li>声明模块 <ul> <li>参数1:id 是这个模块的名称,它是一个可选参数,默认为require加载此模块时指定的名称,若定义这个参数,那么这个模块名应当为“顶级”的,不允许相对名称。</li> <li>参数2:数组,为这个模块所依赖的其他模块</li> <li>匿名函数参数:为依赖模块在这个模块中的接口,它们是一一对应的,因此即便不需要某个模块的接口,但若是需要它后面模块的接口,那也必须给它增加一个用于占位的参数。 <pre> <code class="language-javascript">define( 'id', [ 'module1', 'module2' ], function( m1, m2 ) { return { arg1: m1, arg2: m2 } //返回值即是module3的接口 });</code></pre> </li> </ul> </li> <li>使用步骤 <ol> <li>下载requireJS<br> bower install requirejs//根据个人习惯选择下载方式,只要保证后续引入的路径正确</li> <li>配置config文件和main.js<br> config.js <pre> <code class="language-javascript">require.config( { base: '',//引入模块的起始路径 //paths对象为要引入的模块的名称及路径,且不需.js后缀,require默认会为文件添加.js后缀 paths: { 'jquery': './jquery-1.11.0'//这就引入了juery作为一个模块。 PS:jquery自己已经实现了AMD,并且'jquery'是一个顶级模块名。 } } );</code></pre> main.js <pre> <code class="language-javascript">require(['jquery'], function( $ ) { $(document).css("background", "#000");//这就实现了引入使用jquery模块,并用它进行dom操作 });</code></pre> </li> <li>在页面中引入 <pre> <code class="language-javascript"><script data-main="./main.js" src="./bower-components/requirejs/dist/require.js></script> //main即是主逻辑入口文件</code></pre> </li> </ol> </li> </ul> </li> <li>SeaJS <ul> <li>模块声明规范:CMD</li> <li>声明模块 <pre> <code class="language-javascript">define( function( require, exports, module ) { var c = require('./Controller.js'); c(); })</code></pre> </li> <li>使用步骤 <ol> <li>下载seajs<br> bower install seajs//这里根据个人习惯下载seajs的包,只要引入时路径正确就行</li> <li>配置seajs.config <pre> <code class="language-javascript">seajs.config({ base: './', //模块起始路径 }) seajs.use('./main');//使用主逻辑入口文件,相当于requirejs中的data-main文件</code></pre> </li> </ol> </li> </ul> </li> </ul> <p>**requireJS和SeaJS都是在前端实现模块化,相当于一个前端的js模块化加载器,和webpack不一样,webpack是通过nodejs将文件打包的。</p> <h2><strong>四、模块化案例</strong></h2> <h2><strong>前端mvc架构</strong></h2> <ul> <li><strong>Vue</strong> 组件化&模块化</li> <li><strong>React</strong> 组件化&模块化</li> <li><strong>node.js</strong> 每个文件都是模块</li> </ul> <h2><strong>什么是MVC</strong></h2> <ul> <li> <p>后端开发的一种概念</p> 即view( html + js + css + img ) + controller( 控制层 ) + model( 数据模型 ) <ul> <li>前端演变了一套MVC体系: <ul> <li><strong>veiw</strong> ( html + css + js )<br> 写静态页面 css、js、img及效果</li> <li><strong>controller</strong> ( 专注于实现服务和逻辑控制的层面叫做控制器 )<br> 监听页面中请求和事件,处理请求和事件;向model请求数据,得到数据后绑定到页面</li> <li><strong>model</strong> ( 数据变量 || ajax从服务端取回的数据 )<br> 对外提供一些数据</li> </ul> </li> </ul> </li> </ul> <p>体现了一种分层的概念,让每个层面只做自己该做的行为,减少代码耦合和冗余</p> <h2><strong>为什么使用MVC?</strong></h2> <ul> <li>低耦合:<br> MVC将业务分为三层,减少了数据与业务的耦合性,增强了各层次功能的独立性,使得在需求改变时可能只需要改变其中一层就能完成服务;</li> <li>复用性高:<br> 三层业务功能分明,耦合度低,使各模块可以独立完成自身功能,降低了依赖性,具有很高的复用性。</li> <li>利于批量生产和扩展:<br> 复用性高使得在批量生产的时候可以根据需求进行模块的重用,加快了生产效率。并且模块化使得扩展也非常方便,模块只需根据规范进行编写,经审核后引入便可以实现扩展。</li> <li>利于协作开发:<br> 扩展性强使协作开发也变得非常方便,每个人根据自己的分工设计自己的模块,不与他人冲突,引入时也各行其职。</li> <li>推广普及度高:<br> 由于对协作开发的友好,使得MVC模式大受开发者的欢迎,使用这个模式的产品的推广和普及变得容易得多。</li> </ul> <p> </p> <p>来自:http://www.jianshu.com/p/9171c5496c8e</p> <p> </p>