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代码的4个原则和5个技巧
Apr 24 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
Vue计算属性的使用
Aug 04 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
JavaScript中遍历的十种方法总结
Dec 15 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字符串过滤,转换函数代码
2012/05/01 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
Python实现的双色球生成功能示例
2017/12/18 Python
Python内置函数reversed()用法分析
2018/03/20 Python
pandas带有重复索引操作方法
2018/06/08 Python
python采集微信公众号文章
2018/12/20 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
材料成型专业个人求职信范文
2013/09/25 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
火锅店的活动方案
2014/08/15 职场文书
倡议书格式
2014/08/30 职场文书
物业管理交接协议书
2016/03/24 职场文书