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的asp.net树实现代码
Nov 30 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 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集成FCK的函数代码
2008/09/27 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
python实现报表自动化详解
2017/11/16 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
法律讲堂观后感
2015/06/11 职场文书
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server