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 相关文章推荐
javascript动画浅析
Aug 30 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 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 数组的一个悲剧?
2011/05/11 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
js文字滚动停顿效果代码
2008/06/28 Javascript
javascript div 弹出可拖动窗口
2009/02/26 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
js中null与空字符串""的区别讲解
2019/01/17 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
django实现日志按日期分割
2020/05/21 Python
python语言是免费还是收费的?
2020/06/15 Python
Python grpc超时机制代码示例
2020/09/14 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2015年党员承诺书
2015/01/21 职场文书
助学感谢信范文
2015/01/21 职场文书
业务内勤岗位职责
2015/04/13 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
mysql知识点整理
2021/04/05 MySQL
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android