js模块开发

1.基础写法

//声明
function fun() {
     //to do...
}

 //调用
fun();

说明：

命名容易冲突，看不出模块化。

 

2.对象直接量

　　对象直接量由若干名/值（键值对）组成的映射表，名/值中间用冒号分隔，名/值对之间用逗号分隔，整个映射表用花括号括起来。

//声明
var people = {};                                   　　　//没有任何属性的对象
var people2 = { name: "张三", sex: "男" }; 　　　　　　　　//两个属性 
var people3 = { name: people2.name, sex: people2.sex }; //引用对象的属性 

var people4 = { 
　　//属性名用字符串表示的三种情况 
　　"people name": "张三", 　　 //属性名中有空格 
　　"people-name": "李四", 　　 //属性名有连接符 
　　"for": "循环", 　　　　      //属性名是关键字  
　　women: { 
　　　　name: "妲己", 
　　　　sex: "女" 
　　} 
} 

//调用
people2.name;
people4["people name"];

说明：

达到了模块效果，但内部变量在外部调用时可以被篡改（不存在私有变量）。

对象直接量是一个表达式，每次调用都会创建并初始化一个新对象。

疑问：var people = new Object() {} 和 var people = {} 除了前者使用构造函数以外，还有其他不同之处吗？

 

3. 立即执行函数

var people = (function () {
    name = "张三";    //私有变量
    return {
        peoplename: name
    };
})();

//调用
people.peoplename;

 说明：

保留了私有变量，确保不会在此模块外篡改。

 

4. 构造函数

function People() {
    name = "张三";    //私有变量
    this.peoplename = name;
}

//调用
var people = new People();
people.peoplename;

 说明：

构造函数既是定义类，因此类名首字母需大写；

保留私有变量，网页中多次调用只需创建对应的对象；

this关键字：函数在执行时，根据上下文环境决定this代表哪个对象；

 

5. js命名空间

当存在较多模块时，可以用一个对象来作为命名空间使用。

//a.创建一个命名空间
var people = {};    //用作命名空间的对象
people.man = { name: "张三", sex: "男" };
people.woman = { name: "妲己", sex: "女" };

//b.命名空间嵌套
var world;
if (!world) {       //判断是否存在
    world = {};     //创建顶层命名空间
}
world.country = {}; //创建内部命名空间
peoples.country.china = { name: "中国" };

 

参考：

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

《JavaScript权威指南》第9章 - 类和模块