amd与cmd笔记

//历史

01全局function模式  可以被污染

02命名空间模式

var  personDel={

del(){},

add(){},

mix(){}

}

也可以被修改  被污染

03 iife模式 立即执行函数

（function(window){

let name=1,

function a(){ console.log(a) }

function b(){ console.log(b) }

                window.module={ name,a,b}

})(window);

        window 暴露出去方法 可以被访问到

        04iife 增强模式  依赖注入  现代模块化的基石

                (function(window,$){

var a=1;

function b(){ console.log(b)};

window.module1={a,b};

$('body').css('background','red')

})(window,jquery);

        05 现象：

        <script src="test1.js"></script>

<script src="test2.js"></script>

<script src="test3.js"></script>

<script src="test4.js"></script>

<script src="test5.js"></script>

        问题：

                1.一个页面需要引入多个js

                2. 请求过多，依赖模糊，难以维护

        解决：模块化 规范 （commonJs  Amd  Cmd  es6）

CommonJs

        说明：

                1.每个文件都可当做一个模块

                2.在服务端模块的加载时同步加载的

                3.在客户端模块需要提前编译打包处理

        基本语法

                1.暴露模块 ：module.exports=value     exports.xxx=value  本质：暴露一个对象--exports

                2.引入模块：require(xxxx)  系统模块 与第三方模块

        实现：

                服务端：nodejs

                浏览器端：commonJs的浏览器端打包工具  browserify

Amd

        说明

                1.As Module Denfineiton 异步模块定义

                2.专门用于浏览器端  模块的加载时异步的

        基本语法

                1. 定义暴露模块  1-1 定义有依赖的模块：

                                                        define(['module1','module2],function(m1,m2){    

                                                                 return 模块         

                                                        })

                                          1-2  定义没有依赖的模块

                                                        define(function(){

                                                            return 模块

                                                        })

                2.引入使用模块   

                                        

                                                        require(['module1','module2],function(m1,m2){    

                                                                 使用模块         

                                                        })

         实现：

                 require.js

                 requirejs.config({

                    baseUrl:'js/',去他下面找

                    paths:{

                            module1:'./modules/module1'

                    }

                 })

                requirejs(['module1'],function(modeule1){            modeule1.方法            })

                <script data-main="/js/app.js"   src="require.js"></script>

    CMD