模块化规范Common.js,AMD,CMD

  随着网站规模的不断扩大,嵌入网页中的javascript代码越来越大,开发过程中存在大量问题,如:协同开发,代码复用,大量文件引入,命名冲突,文件依赖。

  模块化编程称为迫切的需求。

  所谓的模块,就是实现特定功能的一组方法。

  1. 模块的发展

  1)函数封装

1     // 存在问题:污染全局变量,模块成员之间看不出直接关系
2     function add(x, y) {
3         return x + y;
4     }

  2)对象封装

1     // 存在问题:暴露模块中的成员,可以被修改
2     var math = {
3         add: function(x, y) {
4             return x + y;
5         }
6     }

  3)立即执行函数

1     // 没有暴露私有成员,模块化基本写法
2     var math = (function() {
3         var add = function(x, y) {
4             return x + y;
5         }
6         return {
7             add: add;
8         }
9     })();

   我们根据实际情况,可以设置传入参数,为模块添加方法。

1     // 为传入的模块中添加方法,并返回,如果是空对象,创建一个空对象,添加方法返回。
2     var module = (function(module) {
3         module.add = function(x, y) {
4             return x + y;
5         }
6         return module;
7     })(module || {});

  2. 模块化规范

  1)Common.js

  common.js规范是服务器端的模块化规范,它使用的是同步加载的方式,必须模块加载完之后,才可以使用模块中的方法。

1     // 加载模块
2     var math = require('math');
3     // 使用模块中的方法
4     math.add(x, y);

  2) AMD(Asynchronous Module Definition)

  对于浏览器而言,这样会造成页面失去响应。因此Common.js模块定义规范并不适用于浏览器端。因此AMD出现了。

  AMD采用的是异步加载的方式,当模块加载完毕,调用传入的回调函数。在加载的过程中,继续执行之后的代码,不会阻塞页面渲染。

1     // module是要加载模块,回调函数中编写处理逻辑
2     require([module], function (module) {
3         ...
4     });

  AMD解决两个问题:

  1)实现js文件的异步加载,避免网页失去响应

  2)管理模块之间的依赖问题,便于代码的编写和维护

  AMD规范网址:https://github.com/amdjs/amdjs-api/wiki/AMD

  3) CMD(Common Module Definition)

  CMD通用模块定义规范,和AMD都实现浏览器端模块化开发的目的。只是AMD提供了后端发展的方式。

  CMD规范网址:https://github.com/seajs/seajs/issues/242

posted @ 2017-02-19 17:14  勤劳的小叶酱  阅读(418)  评论(0编辑  收藏  举报