一、原始写法

模块就是实现特定功能的一组方法。 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。   

  1. function m1(){     //...   }   
  2.  
  3. function m2(){     //...   }

上面的函数m1()和m2(),组成一个模块。使用的时候,直接调用就行了。 这种做法的缺点很明显:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。

二、对象写法

为了解决上面的缺点,可以把模块写成一个对象,所有的模块成员都放到这个对象里面。   

  1. var module1 = new Object({     
  2. _count : 0,     
  3. m1 : function (){       //...     },
  4. m2 : function (){       //...     }
  5. });

上面的函数m1()和m2(),都封装在module1对象里。使用的时候,就是调用这个对象的属性。   

module1.m1();

但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写。

比如,外部代码可以直接改变内部计数器的值。   

  1. module1._count = 5;

三、立即执行函数写法

使用"立即执行函数"(Immediately-Invoked Function Expression,IIFE),

可以达到不暴露私有成员的目的。   

  1. var module1 = (function(){     
  2. var _count = 0;     
  3. var m1 = function(){       //...     };   
  4. var m2 = function(){       //...     };   
  5. return {       
  6. m1 : m1,       
  7. m2 : m2     
  8. };  
  9. })();

使用上面的写法,外部代码无法读取内部的_count变量。   

  1. console.info(module1._count); //undefined

module1就是Javascript模块的基本写法。下面,再对这种写法进行加工。

四、放大模式

如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式"(augmentation)。

  1.   var module1 = (function (mod){     
  2. mod.m3 = function () {       //...     };     
  3. return mod;   
    })(module1);

上面的代码为module1模块添加了一个新方法m3(),然后返回新的module1模块。

五、宽放大模式(Loose augmentation)

在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。

如果采用上一节的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大模式"。   

  1. var module1 = ( function (mod){    
     //...     
  2. return mod;   
  3.  
  4. })(window.module1 || {});

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

六、输入全局变量

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

  

  1. var module1 = (function ($, YAHOO) {     //...   })(jQuery, YAHOO);

上面的module1模块需要使用jQuery库和YUI库,就把这两个库(其实是两个模块)当作参数输入module1。这样做除了保证模块的独 立性,还使得模块之间的依赖关系变得明显。这方面更多的讨论,参见Ben Cherry的著名文章《JavaScript Module Pattern: In-Depth》。

感谢部川邱酷提供的原文地址!(我在网上看到一篇不知道被转了多少手的文章然后排的乱七八糟,最后整理了一下-_-//)

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

JS模块化写法(转)的更多相关文章

  1. require.js模块化写法

    模块化 模块就是实现特定功能的一组方法.只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. 下述两种写法等价 exports 对象是当前模块的导出对象,用于导出模块公有方法和属性. ...

  2. JS模块化写法

    /* 模块化写法*/ var Person=function(){ var name='Jone', age='24', sex='male'; function createIdea(){ //{. ...

  3. node.js模块化写法入门

    子模块的写法: function SVN(){ console.log('svn initialized'); return this; } function getInstance() { cons ...

  4. JS模块化开发:使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

  5. 闲聊——浅谈前端js模块化演变

    function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...

  6. js模块化历程

    这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 无模块时代 在ajax还未提出 ...

  7. 探索javascript----浅析js模块化

    引言: 鸭子类型: 面向对象的编程思想里,有一个有趣的概念,叫鸭子类型:“一只鸟走起来像鸭子.游起泳来像鸭子.叫起来也像鸭子,那它就可以被当做鸭子.也就是说,它不关注对象的类型,而是关注对象具有的行为 ...

  8. js 模块化历程

    作者:吕大豹 网址:http://www.cnblogs.com/lvdabao/p/js-modules-develop.html 这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生 ...

  9. 从头开始写框架(一):浅谈JS模块化发展

    博客申请下来已经过去一个月了,一直不知道写点什么,毕竟我的文笔不是很好orz. 不过既然申请下来了,不写点什么总是觉得很可惜.正好最近在自己写框架,就把自己的进程和一些心得体会分享出来吧. 写在前面: ...

随机推荐

  1. 【转】浅谈php://filter的妙用

    php://filter是PHP中独有的协议,利用这个协议可以创造很多“妙用”,本文说几个有意思的点,剩下的大家自己下去体会. XXE中的使用 php://filter之前最常出镜的地方是XXE.由于 ...

  2. Ubuntu16.04+Java8+Mysql5.7+Tomcat8.5服务器环境配置

    本文章使用环境: Ubuntu16.04 Java8 Mysql5.7 Tomcat8.5 Ubuntu 版本16.04, 本文采用SSH远程登录主机 工具:Xshell 默认使用root用户登录 ( ...

  3. LeetCode 617. Merge Two Binary Trees合并二叉树 (C++)

    题目: Given two binary trees and imagine that when you put one of them to cover the other, some nodes ...

  4. M1阶段事后分析

    M1阶段的开发结束了,在周四的课上我们组也进行了alpha阶段的汇报.我们的努力得到了应有的回报,下面我们将针对M1阶段产生的一些问题进行分析和反思. 一.设想和目标 1.我们的app更像是一款针对北 ...

  5. 用IDEA开发简单的Servlet

    最近学习java,主要是servlet相关的内容.IDEA和servlet之前都没有碰过,所以做了一下小实验,走了一些弯路:这里把一个完整的步骤写出来,加深一下印象. IDEA创建项目步骤 1. 在i ...

  6. SDN可靠性相关

    A subtree-based approach to failure detection and protection for multicast in SDN FRONTIERS OF INFOR ...

  7. 小学四则运算APP 第一个冲刺阶段 第四天

    团队成员:陈淑筠.杨家安.陈曦 团队选题:小学四则运算APP 第一次冲刺阶段时间:11.17~11.27 本次发布我们增加了CalculatorsActivity.java.YunsuanActivi ...

  8. 如何向妻子解释OOD

      前言 此文译自CodeProject上<How I explained OOD to my wife>一文,该文章在Top Articles上排名第3,读了之后觉得非常好,就翻译出来, ...

  9. ElasticSearch 2 (17) - 深入搜索系列之部分匹配

    ElasticSearch 2 (17) - 深入搜索系列之部分匹配 摘要 到目前为止,我们介绍的所有查询都是基于完整术语的,为了匹配,最小的单元为单个术语,我们只能查找反向索引中存在的术语. 但是, ...

  10. kvm安装配置

    操作系统版本:CentOS Linux release 7.5.1804 (Core) 内核版本:3.10.0-862.el7.x86_64 1.安装 安装以下软件.yum -y install qe ...