From e4b7bdd441c1c430a22496612c33918c3b98d932 Mon Sep 17 00:00:00 2001 From: wschool Date: Thu, 10 Mar 2016 17:10:22 +0800 Subject: [PATCH] update update moduleManage --- js_moduleManage.md | 90 +++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 81 insertions(+), 9 deletions(-) diff --git a/js_moduleManage.md b/js_moduleManage.md index df93652..fe15dfa 100644 --- a/js_moduleManage.md +++ b/js_moduleManage.md @@ -1,10 +1,10 @@ -#Js模块化 +#Js模块化AMD与CMD -不同于传统的代码开发,作为一名合格的前端开发,不知道AMD或CMD是不合格的,我们有必要对它进行学习。在开始阐述AMD/CMD之前,先得明白什么是模块化。 +不同于传统的代码开发,作为一名前端开发者,不知道AMD或CMD是不合格的,我们有必要对它进行学习。在开始阐述AMD/CMD之前,先得明白什么是模块化。 > 模块化,利用分类思维把复杂的系统分解为结构合理、可拓展、便于管理的多模块,使各模块高内聚、低耦合。 -## AMD异步加载模块 +## AMD ### CommonJs 在学习AMD之前,很有必要了解一下CommonJs,CommonJs是NodeJs的模块系统规范,其使用方式很简单,一个模块即是一个文件,如下: @@ -34,7 +34,7 @@ a.js加载依赖模块b.js: ``` 如上代码,调用b.getName()之前,需先加载依赖模块,并将其返回对象赋值给变量b,必须加载完成后,才调用b.getName()。在服务器环境,由于模块文件都在本地,其加载都是很快的,并不会感觉到阻塞;然后在客户端环境下,模块文件不在本地,加载模块文件需要耗时,则会明显阻塞后续代码,显然CommonJs不适用于浏览器环境。 -### AMD-RequireJs +### AMD > AMD(Asynchronous Module Definition),即异步模块定义,使用异步方式加载模块,加载模块,不阻塞后续代码的执行,依赖此模块的代码都在回调函数中,加载完此模块才运行。 @@ -62,7 +62,7 @@ a.js加载依赖模块b.js: ``` define('b', [c], function(c) { - var name = 'jinghong'; + var name = '惊鸿'; function getName() { return name; } @@ -75,7 +75,7 @@ a.js加载依赖模块b.js: ``` define({ - name: 'jinghong', + name: '惊鸿', getName: function getName() { return this.name; } @@ -96,6 +96,12 @@ CommonJS模块规范自由变量去解析。 exports.getName = function() { return b.getName(); }; + //or + module.export = { + getName: function() { + return b.getName(); + } + }; }); ``` @@ -115,9 +121,19 @@ CommonJS模块规范自由变量去解析。 }); ``` +- define.amd 属性(Object) + + 一个空对象,可用来判定当前页面是否支持AMD模块加载,如: + + ``` + + // 支持AMD模块加载 + if (typeof define === 'function' && define.amd) {} + ``` + ## CMD -CMD(Chronous Module Definition),同步模块定义,与异步加载不同。 +CMD(Common Module Definition),通用模块定义,在 Sea.js 中,所有 JavaScript 模块都遵循CMD模块定义规范。该规范明确了模块的基本书写格式和基本交互规则,在CMD中,一个模块就是一个文件。 - define() @@ -135,7 +151,9 @@ CMD(Chronous Module Definition),同步模块定义,与异步加载不同。 }; //or module.exports = { - getName: function() {b.getName + getName: function() { + return b.getName(); + } }; }); ``` @@ -143,4 +161,58 @@ CMD(Chronous Module Definition),同步模块定义,与异步加载不同。 ``` define("My name is {{name}}"); - ``` \ No newline at end of file + ``` + 对象定义数据: + ``` + + define({name: '惊鸿', tag: 'web developer'}); + ``` + +- require() + + ```require(id);``` + require函数接受一个模块标识参数,该函数返回传入参数对应模块提供的接口,其加载模块为同步加载: + ``` + + var b = require('./b'); + b.getName(); + ``` + ```require.async([ids], callback?);``` + require.async接受一个模块标识列表,一个模块加载完成后的回调函数,其加载模块为异步加载: + ``` + + require(['./a', './b'], function(a, b) { + a.getName(); + b.getName(); + }); + ``` +- exports与module + + 参考AMD中关键变量exports和module + +- define.cmd 属性(Object) + + 一个空对象,可用来判定当前页面是否支持CMD模块加载,如: + + ``` + + // 支持CMD模块加载 + if (typeof define === 'function' && define.cmd) {} + ``` + +## AMD与CMD +初步学习了AMD与CMD,接下来比较一下AMD与CMD: + +- AMD + - 1.RequireJS 在推广过程中对模块定义的规范化产出; + - 2.一个文件中可定义多个模块; + - 3.异步加载模块; + - 4.提前执行,依赖前置;(模块依赖,提前书写) + +- CMD + - 1.SeaJs在推广过程中对模块定义的规范化产出; + - 2.一个模块即是一个文件; + - 3.默认为同步加载模块; + - 4.延迟执行,依赖就近,职责单一;(模块依赖,用时书写) + +若有不足,欢迎指正。 \ No newline at end of file