zoukankan      html  css  js  c++  java
  • 模块化规范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

  • 相关阅读:
    Leetcode Reverse Words in a String
    topcoder SRM 619 DIV2 GoodCompanyDivTwo
    topcoder SRM 618 DIV2 MovingRooksDiv2
    topcoder SRM 618 DIV2 WritingWords
    topcoder SRM 618 DIV2 LongWordsDiv2
    Zepto Code Rush 2014 A. Feed with Candy
    Zepto Code Rush 2014 B
    Codeforces Round #245 (Div. 2) B
    Codeforces Round #245 (Div. 2) A
    Codeforces Round #247 (Div. 2) B
  • 原文地址:https://www.cnblogs.com/diligentYe/p/6416329.html
Copyright © 2011-2022 走看看