一、原始写法

  1. /*
  2. 模块就是实现特定功能的一组方法。
  3. 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。
  4. 上面的函数m1()和m2(),组成一个模块。使用的时候,直接调用就行了。
  5. 这种做法的缺点很明显:"污染"了全局变量,
  6. 无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。
  7. */
  8. var aaa = 'aa';  
  9. function m1() {   
  10. console.log(aaa); 
  11. aaa = 'cc';  
  12. }  
  13. function m2() {    
  14. console.log(aaa);  
  15. }
  16. m1();//aa
  17. m2();//cc

二、对象写法

  1. /*
  2. 为了解决上面的缺点,可以把模块写成一个对象,所有的模块成员都放到这个对象里面。
  3. 上面的函数m1()和m2(),都封装在module1对象里。使用的时候,就是调用这个对象的属性。
  4. 但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部计数器的值。
  5. */
  6.   
  7. var module1 = new Object({    
  8. aaa:'aaa',
  9.     
  10. m1: function() {      
  11. console.log(this.aaa);
  12. },
  13.     
  14. m2: function() {      
  15.  
  16. }  
  17. });
  18. module1.m1();//aaa
  19. module1.aaa='bbb';
  20. module1.m1();//bbb

三、立即执行函数写法

  1. /*
  2. 使用"立即执行函数",可以达到不暴露私有成员的目的。
  3. */
  4.   
  5. var module1 = (function() {    
  6. var aaa = 'aaa';    
  7. var m1 = function() {      
  8. console.log(aaa)
  9. };    
  10. var m2 = function() {      
  11. //...
  12. };    
  13. return {      
  14. m1: m1,
  15. m2: m2
  16. };
  17. })();
  18.  
  19. module1.m1();//aaa
  20. console.log(module1.aaa);//undefined
  1. //立即执行函数
  2. (function(){
  3. //...
  4. }());
  5. //可以拆解为
  6. function a(){
  7. //...
  8. }
  9. a();

四、放大模式

  1. /*
  2. 如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式"(augmentation)。
  3. */
  4.   
  5. var module1 = (function() {    
  6. var aaa = 'aaa';    
  7. var m1 = function() {      
  8. console.log(aaa);
  9. };    
  10. var m2 = function() {      
  11. //...
  12. };    
  13. return {      
  14. m1: m1,
  15. m2: m2
  16. };
  17. })();
  18.  
  19. var module1 = (function(mod) {
  20. mod.m3 = function() {
  21. console.log('m3');
  22. };
  23. return mod;
  24. })(module1);
  25.  
  26. module1.m1();//aaa
  27. module1.m3();//m3 调用不了aaa

五、宽放大模式

  1. /*
  2. 独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。
  3. 为了在模块内部调用全局变量,必须显式地将其他变量输入模块。
  4. */
  5.   
  6. var module1 = (function() {       
  7. var m1 = function() {      
  8. console.log('m1');
  9. };    
  10. var m2 = function() {      
  11. //...
  12. };    
  13. return {      
  14. m1: m1,
  15. m2: m2
  16. };
  17. })();
  18.  
  19. var module2 = (function() {       
  20. var m21 = function() {      
  21. console.log('m21');
  22. };    
  23. var m22 = function() {      
  24. //...
  25. };    
  26. return {      
  27. m21: m21,
  28. m22: m22
  29. };
  30. })();
  31.  
  32. var module3 = (function(module1, module2) {
  33. var m31 = function() {
  34. module1.m1();
  35. };
  36. var m32 = function() {
  37. module2.m21();
  38. };
  39. return {      
  40. m31: m31,
  41. m32: m32
  42. };
  43. })(module1, module2);
  44.  
  45. module3.m31(); //m1
  46. module3.m32(); //m21

JS模块化的更多相关文章

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

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

  2. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  3. ReactJS webpack实现JS模块化使用的坑

    从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...

  4. JS 模块化和打包方案收集

    1.这里想讨论的是拆分规则,不是在问哪个工具怎么使用.2.这里没有在想找正确答案,因为感觉这个问题要结合具体业务场景. 随着项目开发越来越大,一开始代码全打包到一个文件的方式,让文件越来越大,接下来要 ...

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

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

  6. js模块化历程

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

  7. js 模块化的一些理解和es6模块化学习

    模块化 1 IIFE 2 commonjs 3 浏览器中js的模块化 4 简单理解模块加载器的原理  5 es6 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式( ...

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

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

  9. js 模块化历程

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

  10. Ampersand.js - 模块化的 JS 应用程序开发框架

    Ampersand.js 是一个高度模块化,松耦合,用于构建先进的 JavaScript 应用程序的框架.通过良好定义的方法,结合了一系列微小的 CommonJS 模块.条理清晰,没有多余的冗余代码. ...

随机推荐

  1. 【APP设计利器】Sketch 41 Mac中文破解版(含汉化插件)

    Sketch是一款拥有美观界面和强大功能适用于所有设计师的专业矢量绘图工具.它旨在为美术设计师创造出一款更优秀的作品,不是复制品,而是提升品.Sketch简约的设计是基于无限的规模和层次的绘图空间,免 ...

  2. 浅谈JavaScript、ES5、ES6

    // http://es6.ruanyifeng.com/#docs/intro (ES6 文档) 什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来 ...

  3. 深入理解javascript原型和闭包 (转)

    该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分--原型和闭包,当然,肯定少不了原型链和作用域链.帮 ...

  4. 10个最常见的 HTML5 面试题及答案

    这是选择了10个 HTML5 面试问题并给出了答案.这是 Web 开发人员最常见的面试问题,相信你掌握了这些重要的面试问题后一定会觉得你的理解提高了.一起来看看吧. 您可能感兴趣的相关文章 Web 前 ...

  5. TeamViewer 12.0.71503 Patch By.Sound

    TeamViewer - the All-In-One Software for Remote Support and Online Meetings - Remote control any com ...

  6. qlikview 扩展插件制作教程-EchartsGeoMap

    效果图   显示效果和echarts官方demo一样,运行速度尚可. 第一次写博客,排版很渣以后慢慢改进. 基础知识 以EchartsGeoMap为例,讲一下怎么制作一个基础的QlikView Ext ...

  7. ng-repeat 嵌套访问父作用域里的属性

    在一个项目中,需要嵌套循环输出一个二维表的里的数据 数据结构 [ { id:1, list:[ { id:1, name:'li' } ] }, { id:2, list:[ { id:1, name ...

  8. 使用python抓取百度搜索、百度新闻搜索的关键词个数

    由于实验的要求,需要统计一系列的字符串通过百度搜索得到的关键词个数,于是使用python写了一个相关的脚本. 在写这个脚本的过程中遇到了很多的问题,下面会一一道来. ps:我并没有系统地学习过pyth ...

  9. Erlang C1500K长连接推送服务-性能

    Whatsapp已经使用Erlang在生产环境跑到96GB内存单机 3M长连接,参加:WhatsApp的Erlang世界.毕竟业务级别能达到Whatsapp那样极少,现在只有千万级,单机太多挂一台影响 ...

  10. ThinkPHP学习总结

    ThinkPHP学习总结 网站开发使用的thinkPHP5.0在此总结备查 MVC关系功能图 一.Thinkphp开发规范 l 类 类库.函数文件统一以.php为后缀: 类的文件名均以命名空间定义,并 ...