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 相关文章推荐
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
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+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
csdn 博客的css样式 v3
2009/02/24 Javascript
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
Flask处理Web表单的实现方法
2021/01/31 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
学年自我鉴定范文
2013/10/01 职场文书
中医专业应届生求职信
2013/11/17 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
入股合作协议书
2014/10/12 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
消防安全月活动总结
2015/05/08 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
如何通过cmd 连接阿里云服务器
2022/04/18 Servers