模块化编程(一)

  一.什么是模块化开发?

       在前端开发中,只要在script标签嵌入你功能的代码就可以啦,但是随着前端项目越来越复杂,代码量的增多,script标签中的代码就混乱啦,然而,在es6之前JavaScript都没有类的概念,更不用说模块(module)了,那么什么是模块呢?

       一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。模块开发需要遵循一定的规范,否则就都乱套了。

  二.模块化的过程

       1.函数写法

        

        模块就是实现特定功能的文件,把几个函数摆在一起,就构成了一个模块,需要的时候加载这个文件就可以了

        缺点:这样子会污染全局变量,也可能与其他成员变量发送命名冲突,而且模块成员之前没有什么关系

        2.对象写法

        

        模块写在一个对象中,模块成员就是对象的函数和属性,通过访问对象的属性和函数,就可以访问模块成员

        缺点:向外暴露了成员变量,在外部可以修改模块成员状态

        3.立即执行函数

         

        缺点:显而易见,外部无法访问内部变量

      4.放大模式

        

        如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式"(augmentation)。上面的代码为module模块添加了一个新方法m3(),然后返回新的module模块。

     5.宽放大模式

        

       在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上一节的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大模式"。

       与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象。

    6.输入全局变量

       独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互,为了在模块内部调用全局变量,必须显式地将其他变量输入模块。

       

 二.模块化开发分类

      前端模块规范有三种:CommonJs,AMD和CMD。

      CommonJs用在服务器端,AMD和CMD用在浏览器环境
    AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
      CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
      AMD:提前执行(异步加载:依赖先执行)+延迟执行
      CMD:延迟执行(运行到需加载,根据顺序执行)
 
 参考:   

 Javascript模块化编程 :

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
 详解javascript模块化开发:https://segmentfault.com/a/1190000000733959#articleHeader3
 

 

posted @ 2018-03-19 10:57  yangmanliabcd  阅读(341)  评论(0编辑  收藏  举报