javascript 模块化编程----模块的写法

一、原始写法

模板就是实现特定功能的一组方法

只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。

　　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 model1=(function(){var count=0;var fun1=function (){console.log("this is function1");};var fun2=function (){console.log("this is function2");}return {fun1:fun1,fun2:fun2}})();

使用上面的方法，外部代码无法读取count变量

console.log(model1.count)//undefined

这是JavaScript模板的基本写法。

四、放大模式

如果一个模块很大，必须分成几个部分，或者一个模板需要继承另一个模块，这时就有必要采用‘放大模式’

var model2=(function(mode){mode.fun3=function (){console.log("this is function3");};return mode})(model1);

model2继承model1，并添加方法fun3，输出model2，有fun1 fun2 fun3 三个方法，因为model1中count没有暴露，所以在model2中无法访问model1中的count

model1中也添加新方法fun3

五、宽放大模式

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

var module1 = ( function (mod){//...return mod;})(window.module1 || {});

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

六、输入全局变量

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。

为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

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

上面的module1模块需要使用jQuery库和YUI库，就把这两个库（其实是两个模块）当作参数输入module1。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。

原文出处：http://www.ruanyifeng.com/blog/2012/11/require_js.html

转载于:https://www.cnblogs.com/xiaofenguo/p/6595483.html

javascript 模块化编程----模块的写法相关推荐

(转)Javascript模块化编程（一）：模块的写法
转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...
Javascript模块化编程（一）：模块的写法
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
JavaScript 模块化编程（一）：模块的写法
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等--开发者不得不使 ...
Javascript模块化编程：AMD规范
一.模块的规范先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写 ...
学习阮一峰Javascript模块化编程，requireJS使用
使用背景NOW: 网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式. 项目需要一个团队分工协作.进度管理.单元 ...
JavaScript 模块化编程（二）：AMD规范
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
Javascript模块化编程，requireJs
Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):require.js的用法 (三)require.js 一.r ...
Javascript模块化编程（二）：AMD规范
Javascript模块化编程(二):AMD规范七.模块的规范先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提, ...
Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...

javascript 模块化编程----模块的写法

javascript 模块化编程----模块的写法相关推荐

最新文章

热门文章