浅述编写模块化的 JavaScript

jopen 8年前

 

模块化,就是字面意思的模块化。比如模块化一个表单验证,模块化一个轮播图等。

在平常 JavaScript 代码的编写中,我们一般是保持着这样一个顺序。

1. 无脑式自然编写

function a() {    alert("a")  }    function b() {    alert("b")  }    a()  b()

这样的写法在每个人的学习初级阶段都是存在的,当代码量比较少的时候显然是没有什么问题的。但是当工程量比较大的时候,就会出现一些列的不可控,因为这里出现的变量都是全局变量,处处埋藏着炸弹。

2. 进阶式装 X 编写

在写了稍微多的代码后只要是个正常的人都会意识到这个问题,然后可能就会出现下面的写法。

var A = {}  var B = {}    A.a = function() {    //do  }  A.b = function() {    //do  }    B.a = function() {    //do  }  B.b = function() {    //do  }

在这样子的编写中,我们首先创建了不同的对象,然后在各自的对象里面声明 名字是同样的函数 a 和 b, 所以不会产生冲突。相比较第一种写法,显然在冲突这件事情上会好很多很多。

但是这样的编写还存在一个问题,对象中的函数或者属性对外部是可见的,并且是可修改的。外部不经意或者故意的修改就会让原本的功能瘫痪,显然这样是存在一定的安全隐患的。

3. 稍高层立即执行函数

这个时候可能是多多少少用过一些 jQuery 库之类的东西,可能就会这样

(function() {    // private code      var a = function() {           }        window.a = a;  })();

这样写的话可以有私立的 private 类型变量,然后将局部的函数提升到 windows 下面,可以让其他地方使用。

据说 jQuery 就是使用这种写法让 windows 有了 $ 这个方法。

当然,也可以写一个立即执行函数,然后返回一个对象,让其他模块去调用,比如这样

var A = (function(){    //private code        var a = function() {      //do    }        return {a: a}  })()    A.a()

道理和上面的没有太大的区别

4. 现有高级通用写法

未知。。。。

requeryJs...

AMD...

原文链接: http://life.rccoder.net/webpre/1157.html