封装私有变量:立即执行函数的写法
使用“立即执行函数”,将相关的属性和方法封装在一个函数作用域里面,可以达到不暴露私有成员的目的。
var model1 = (function () {
var count = 0
var m1 = function () {
console.log('m1')
}
var m2 = function () {
console.log('m2')
}
return {
m1: m1,
m2: m2
}
})()
console.log(model1.count) // undefined
使用上面的写法,外部代码无法读取内部count变量,model1就是Javascript模块的基本写法。下面再对这种写法进行加工。
模块的方法模式
如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用“放大模式”(augmentation)。
var model1 = (function (mod) {
mod.m3 = function () {
console.log('m3')
}
return mod
})(model1)
上面代码为model1模块添加了一个新方法m3(),然后返回新的module1模块。
在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上面的写法,第一个执行的部分有可能加载一个不存在的空对象,这时就要采用“宽放大模式”(Loose augmentation)。
var model1 = (function (mod) {
mod.m4 = function () {
console.log('m4')
}
return mod
})(window.model1 || {})
与“放大模式”相比,“宽放大模式”就是“立即执行函数”的参数可以是空对象。
输入全局变量
独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。
为了在模块内部调用全局变量,必须显式地将其他变量输入模块。
var model1 = (function($,YAHOO){
// ...
})(jQuery, YAHOO)
上面的model1模块需要使用jQuery库和YUI库,就把这两个库(其实是两个模块)当做参数输入model1。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。
立即执行函数还可以起到命名空间的作用。
(function ($, window, document) {
function go(num) {
}
function handleEvents() {
}
function initalize() {
}
function dieCarouselDie() {
}
window.finalCarousel = {
init: initalize,
destroy: dieCarouselDie
}
})(jQuery, window, document)
上面代码中,finalCarousel对象输出到全局,对外暴露init和destroy接口,内部方法go、handleEvents都是外部无法调用的。