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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
创建一个类Person的简单实例
May 17 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
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中file_exists函数使用详解
2015/05/08 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
canvas绘制多边形
2017/02/24 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
Python中的localtime()方法使用详解
2015/05/22 Python
python爬虫之百度API调用方法
2017/06/11 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
python清理子进程机制剖析
2017/11/23 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
党课心得体会范文
2014/09/09 职场文书
个人创业事迹材料
2014/12/30 职场文书
中班下学期个人总结
2015/02/12 职场文书
领导干部学习心得体会
2016/01/23 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
HAM-2000摩机图
2021/04/22 无线电
python实现图片九宫格分割的示例
2021/04/25 Python
python神经网络ResNet50模型
2022/05/06 Python
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python