最近,读了很多有关js模块化编程方面的文章,自己也有些小小的理解,不过,还是得借助别人的总结,在这个基础上谈一谈自己的理解吧!
参考:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
1、网页js程序为什么要模块化?
;之前做的一些网站,或者说网页,基本上是一html+css实现布局,内容展示为主。至于一些表单的验证逻辑,以及给页面实现一些特效(比如点击之后弹个窗出来,动画啊,等等)之类的,无非就是在对应的页面中写一些js脚本就好了,哪个页面要什么功能,就写一些js脚本到这个页面中就好了。整个网站下来,每个页面都有对应的js文件,感觉不好管理,没有系统化。而且,对于有些页面功能比较多,可能这个页面的js文件就比较多,代码可能就会更加复杂一点了。 再进一步,如果想在一个页面中做更多更多的功能,更多的交互,那显然这个页面的js代码量是非常多的。  要在一个html网页中实现像我们的客户端软件类似的功能,我们的网站,或者说网页就叫做 SPA --singal page application 单页面应用了。
这个时候js代码是非常多的,而且js代码之间免不了互相依赖,先执行与后执行的关系存在。这个时候,就有管理我们的js文件的必要了。
2、所以,出于这样的情况,就出现了js的模块化。

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

一、原始写法
function m1(){
//...
}
function m2(){
//....
}
上面的函数m1()和m2(),组成一个模块,使用的时候,直接调用就行了。
这种做法的缺点很明显,“污染了全局变量”,即很容易导致命名冲突,而且全局变量
一直存在,不会销毁,占用内存,很容易造成内存泄露。而且模块的成员直接看不出
直接的关系。

二、对象写法
为了解决上面的缺点,可以吧模块写成一个对象,所有的模块成员都放在这个对象里面。
var module1 = new Object({
_count: 0,
m1 : function(){
//...
},
m2 : function(){
//...
}
});
上面的函数m1()和m2(), 都封装在module1对象里,使用的时候,就调用这个对象的属性。
module1.m1();
但是,这样的写法会暴露所有的模块成员,内部状态可以被外部改写。比如,外部代码可以
直接改写内部计数器的值,
module1._count = 5;

三、立即执行函数写法

var module1 = (function (){
var _count = 0;
var m1 = function(){
//..
};
var m2 = function(){
//...
};
return {
m1: m1,
m2: m2
}
})();
使用这种写法,外部代码无非读取内部的_count变量的值。
console.info(module._count);//undefined

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

四、放大模式

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

var module1 = (function(mod){
mod.m3 = function(){
//...
};
})(module1);
上面的代码为module1模块添加了一个新方法m3();,然后返回新的module1模块;

五、宽放大模式(Loose augmentation)

在浏览器环境中,模块的各个部分通常都是从网上获取的,又是无法知道哪个会先加载。
如果采用上一节的写法,第一个执行的部分可能加载一个不存在的空对象,这是就要采用
“宽放大模式”
var module1 = (function(mod){
//return mod;
})(window.module1 || {});
与“放大模式”相比,“宽放大模式”就是“立即执行函数的参数”可以是空对象。

六、输入全局变量

独立性是模块的重要特点,模块内部最好不予程序的其他部分直接交互。
为了在模块内部调用全局变量,必须显示地将其他变量输入模块。
var module1 = (function($, YAHOO){
//...
})(jQuery, YAHOO);
上面的module1 模块需要使用jQuery库和YUI 库,就把这两个库(其实是两个模块)当做参数
传入module1,这样做出了保证模块的独立性,还是模块之间的依赖关系变得明显。这方面的讨论
参考Ben cherry 的著名文章《Javascript Module Pattern: In-Depth》.

我也谈 javascript 模块化 -AMD规范的更多相关文章

  1. JavaScript模块化---AMD规范

    JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...

  2. javascript模块化编程规范

    一.javascript模块化编程规范: 二.关于commenjs规范和AMD规范: 根本不同:前者用于服务器端同步加载模块:后者是客户端异步加载模块. 同点:两者都有一个全局函数require(), ...

  3. JavaSript模块化-AMD规范与CMD规范

    JavaScript模块化 在了解AMD,CMD规范前,先来简单地了解下什么是模块化,模块化开发. 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处 ...

  4. Javascript模块化编程-规范[2]

    实现Javascript模块化,固然很重要,但是怎样才能实现国际上都能认可的模块化呢?模块化编程规范随应运而生. 目前Javascript模块化规范主要有两种:CommonJS和AMD. Common ...

  5. Javascript的AMD规范

    Javascript发展到今天,已经从一个小丑语言变成了不可替代的前端利器,已经脱离了低端的玩笑脚步,而转变为有规可依的强大语言. 本文主要讲述下如今被大力推广的AMD规范,为什么要AMD,什么场景是 ...

  6. 该如何理解AMD ,CMD,CommonJS规范--javascript模块化加载学习总结

    是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...

  7. JavaScript模块化 --- Commonjs、AMD、CMD、es6 modules

    随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化. 这篇文章还是希望能给大家一 ...

  8. JavaScript 模块化简述

    JavaScript 模块化简述 前言 关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以 ...

  9. JavaScript 模块化简析

    关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以及 RequireJS.SeaJS 等陌 ...

随机推荐

  1. 照着例子学习protobuf-python

    以下是照着python操作protobuf进行的protobuf-python的学习笔记: 首先是protobuf的下载与安装: 1 由于google被墙,所以去github上面搜索了一下protob ...

  2. 用js动态的改变img标签里面的src属性实现图片的循环切换

    JS:根据循环切换的条件可以用 document.getElementById('').src=''设置, 或者jquery方法: $('#id').attr('src','图片名称’): 具体: i ...

  3. Hive基础学习

    Hive 学习记录Hive介绍:Hive 是起源于Facebook,使得Hadoop进行SQL查询成为可能,进而使得非程序员也可以进进行对其使用:它是一种数据仓库工具,将结构化的数据文件 映射为一张数 ...

  4. ios导航栏又按钮添加图片后使其保持原色

    UIBarButtonItem *rightBarItem = [[UIBarButtonItem alloc] initWithTitle:nil style:UIBarButtonItemStyl ...

  5. C语言_error_MSB8031

    关于Visual Studio 2013 编译 multi-byte character set MFC程序出现 MSB8031 错误的解决办法 Visual Studio 2013 编译旧的 mul ...

  6. php file取重复

    function FetchRepeatMemberInArray($array) { // 获取去掉重复数据的数组 $unique_arr = array_unique ( $array ); // ...

  7. CSS3秘笈:第十一章

    表格和表单的格式化 1.表格的各种标签提供了许多有用的“钩子”,可以再上面挂CSS样式.如果创建了<th>标签样式,那么每一个列的标题——<th>标签——看起来就有可能与其他的 ...

  8. 利用DataImportHandler建索引时一直无法完成

    问题研究 项目中需要利用DataImportHandler从hive中sync数据到solr.发现有时候hive sql已经执行完几个小时了,sync任务还没有完成,貌似哪里卡住了.重启solr后重新 ...

  9. System.Uri类 - 获取Url的各种属性,文件名,参数,域名,端口等等

    System.Uri类用于处理Uri地址信息,常用到它的地方有,相对Uri地址转绝对Uri地址,获取Uri的某部分信息等等,可以说是一个非常有用的类. 一.属性 AbsolutePath 获取 URI ...

  10. CentOS7 PostgreSQL 主从配置( 二)

    同步流复制配置PostgreSql的流复制是异步的,缺点是Standby上的数据落后于主库上的数据,如果使用Hot Standby做读写分离,就会存在数据一致性的问题.PostgreSql9.1版本后 ...