JS模块与命名空间的介绍


Posted in Javascript onMarch 22, 2013

起因
将代码组织到类中的一个重要原因是让代码更加“模块化”,可以在很多不同的场景中实现代码的重用。但类不是唯一的模块化代码的方式。

一般来讲,模块是一个独立的JS文件。模块文件可以包含一个类定义、一组相关类、一个实用函数库或者一些待执行的代码。

模块化的目标是支持大规模的程序开发,处理分散源中代码的组装,并且能让代码正确运行,哪怕包含了不需要的模块代码,也可以正确执行代码。

理想状态下,所有模块都不应当定义超过一个全局标识。

模块函数
通过把模块定义在某个函数的内部来实现,定义的变量和函数都属于该函数的局部变量,在函数外不可见。实际上,可以将这个函数作用域用做模块的命名空间(模块函数)

一旦将模块代码封装进一个函数中,就需要一些方法导出公用API,以便在模块函数外部调用它们。下面有几种方式导出公用API:

首先创建一个命名空间

// 创建一个全局变量用来存放与学校相关的模块
var school;                // 创建school命名空间
if(!school) school = {};

1. 利用构造函数

// 返回Student构造函数来导出公共API
school.Student = (function() {
    function Student() {    }
    // ...... 定义Student的原型对象和私有属性和方法 ........
    return Student;        // 返回Student构造方法导出公共API
})();

2. 返回命名空间对象

如果模块API包括多个单元,则它可以返回命名空间对象

// 为school添加students模块
school.students = (function() {
    // 这里定义了很多类如课程类/成绩类, 使用局部变量和函数
    function Subject() { /* ... */ }
    function Grade() { /* ... */ }    // 通过返回命名空间对象将API导出
    return {
        Subject: Subject,
        Grade: Grade
    };
})();

3. 通过关键字new调用

另外一种类似类似技术:把模块函数当做构造函数,通过new来调用。把它们(公共API)赋值给this属性来将其导出

school.students = (new function() {
    // ..... 这里省略了代码 ......    // 将API导到this对象中
    this.Subject = Subject;
    this.Grade = Grade;
    // 注意,这里没有返回值
}());    // 括号写在里面。这里是创建新实例,new后面应紧跟构造函数的调用而不是表达式

4. 已定义命名空间对象

作为一种替代方案,如果已经定义了全局命名空间对象,通过模块函数可以直接设置那个对象的属性。

// 如果已经定义了命名空间对象
var school;                // 创建school命名空间
if(!school) school = {};
school.students = {};    // student命名空间已经定义
(function(students) {
    // ..... 这里省略了代码 ......    // 将公共API导到上面定义的命名空间中
    students.Subject = Subject;
    students.Grade = Grade;
    // 这里也不需要返回值
})(school.students);

为此,导出公共API的方式已经讲完。

Javascript 相关文章推荐
用jQuery打造TabPanel效果代码
May 22 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
Bootstrap响应式表格详解
May 23 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
Javascript模拟实现new原理解析
Mar 03 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 #Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 #Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 #Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 #Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 #Javascript
jquery实现网站超链接和图片提示效果
Mar 21 #Javascript
jquery 表格的增行删行实现思路
Mar 21 #Javascript
You might like
php桌面中心(三) 修改数据库
2007/03/11 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
Python中replace方法实例分析
2014/08/20 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
Python hashlib模块加密过程解析
2019/11/05 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
上班打牌检讨书
2014/02/07 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
农村老人去世追悼词
2015/06/23 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
HTTP中的Content-type详解
2022/01/18 HTML / CSS
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python