AMD、CMD模块化开发、Sea.js、Require.js

前端开发中最常用是使用匿名函数闭包形式组织代码将对象、属性封装到一个特别的对象中避免暴露的对象、属性太多引起冲突,这种方式一般没有什么问题。
  一种新的方式是在以往的基础上规范模块化开发。Node的出现,这种规范又分为浏览器端与服务端。

浏览器端规范
  AMD(Asynchromous Module Definition) 代表:require.js
  CMD(Common Module Definition) 代表:Sea.js

服务器端规范
  CommonJS 代表:node.js
  umd是AMD和CommonJS的糅合。
还有ECMAScript 2015 (ES6)模块化规范。




Demo http://download.csdn.net/detail/linjiqian/9762298

seajs与requirejs都是可以做到懒加载,其中ionic就使用了requirejs。

1.简单的Sea.jsDemo

使用sea.js需注意加载模块时的路径问题,当前同目录使用./。sea.js是会在一开始就把所有模块加载进来,所以在逻辑判断中才加载某模块这个判断是无效的,因为不管条件是否成立都会被加载(预加载懒执行)。
  sea.js在加载模块时其实也只是动态创建script标签加载脚本代码。

Sea.js http://seajs.org/docs/
Sea.js主要的四个关键字

    define  定义一个模块
    require  加载一个模块
    export  暴露一个模块
    module  模块

AMD、CMD模块化开发、Sea.js、Require.js_第1张图片
Paste_Image.png

子模块seademomodule.js暴露两个函数,分别根据DOM的id改变其color为红色和蓝色:


//子模块

//调用define函数定义一个模块
define(function(require,exports,module){

    //子模块提供函数
    function setColorRedById(id){
        document.getElementById(id).style.color = "red";
    }
    function setColorBlueById(id){
        document.getElementById(id).style.color = "blue";
    }

    //暴露出去的是个对象,将要暴露的函数包装进对象中
    module.exports = {
        setColorRedById:setColorRedById,
        setColorBlueById:setColorBlueById
    };

});

主模块seaMainmodule.js,加载子模块seademomodule.js,使用子模块暴露出来的功能函数:


//sea主模块

define(function(require,exports,module){

    //require 加载子模块
    var seademomodule = require("./seademomodule.js");

    var red = document.getElementById("red");
    var blue = document.getElementById("blue");

    red.onclick = function(){
        seademomodule.setColorRedById("hiht");
    }

    blue.onclick = function(){
        seademomodule.setColorBlueById("hiht");
    }

});


HTML文件seademo.html引入sea.js使用主模块:





    
    sea


    
    

hiht

AMD、CMD模块化开发、Sea.js、Require.js_第2张图片
seajsdemo.gif

sea.js可以把jzepto改造成一个符合cmd规范的模块。在zepto.js中原有的(function(global, factory) { factory(global)前加个判断:


(function(global, factory) {
  if (typeof define === 'function' && define.amd)
    define(function() { return factory(global) })
  else
    factory(global)
}(this, function(window)...






2.require.jsDemo

AMD、CMD模块化开发、Sea.js、Require.js_第3张图片
Paste_Image.png

子模块requireDemomodule.js


//子模块

//调用define函数定义一个模块
define(function(){

    //子模块提供函数
    function setColorRedById(id){
        document.getElementById(id).style.color = "red";
    }
    function setColorBlueById(id){
        document.getElementById(id).style.color = "blue";
    }

    //暴露出去的是个对象,将要暴露的函数包装进对象中 return
    return {
        setColorRedById:setColorRedById,
        setColorBlueById:setColorBlueById
    }
});

主模块requireMainmodule.js


//require主模块

define(['./requireDemomodule'],function(requireDemomodule){

    var red = document.getElementById("red");
    var blue = document.getElementById("blue");

    red.onclick = function(){
        requireDemomodule.setColorRedById("hiht");
    }

    blue.onclick = function(){
        requireDemomodule.setColorBlueById("hiht");
    }

});


静态文件requiredemo.html





    
    requiredemo



    

require hiht

AMD、CMD模块化开发、Sea.js、Require.js_第4张图片
requiredemo.gif






3.相似与不同

sea.js、require.js中每个模块是单独的一个文件。每个模块都是define函数中设置暴露的功能。每个模块都是一个单独的作用域。

Sea.js与Require.js发展方向有差异,Require.JS在发展成浏览器端的模块加载器的同时向 Rhino / Node 等环境的模块加载器发展。Sea.js 专门发展 Web 浏览器端,同时通过 Node 扩展的方式也可以 在Node 环境中使用。








你可能感兴趣的:(AMD、CMD模块化开发、Sea.js、Require.js)