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章 - 类和模块

posted @ 2017-10-24 14:37  paulhe  阅读(214)  评论(0编辑  收藏  举报
friendster counter