JS模块与命名空间的介绍
起因
将代码组织到类中的一个重要原因是让代码更加“模块化”,可以在很多不同的场景中实现代码的重用。但类不是唯一的模块化代码的方式。
一般来讲,模块是一个独立的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);
JS模块与命名空间的介绍的更多相关文章
- JS模块与命名空间的介绍二
区别一:
- js模块,类,继承,命名空间,私有属性等相关概念梳理
js确切的说是一种基于对象的语言,和纯面向对象的语言(比如as)稍微有点区别,js中没有类的概念.虽然有继承但是基于原型的继承.随着前段越来越受重视,jser们利用js的一些特性他们制造出了和纯面向对 ...
- 七、CommonJS规范和Note.js模块概念的介绍
在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多 ...
- 第一课:js命名空间的介绍,js对象的扩展以及js数组化
1.命名空间: js里面的命名空间就是使用对象的属性来扩展的.比如,用户定义一个A对象,A对象下面有B属性和C属性,同时B属性和C属性又是对象.因此A={B:{},C:{}},这时用户就可以在B对象和 ...
- Js模块模式
模块模式 索引 引子 什么是模块模式 命名空间模式 声明依赖 私有和特权成员 即时函数 揭示模块模式 结语 引子 这篇算是对第9篇中内容的发散和补充,当时我只是把模块模式中的一些内容简单的归为函数篇中 ...
- 彻底搞清楚javascript中的require、import和export(js模块加载规范的前世今生)
为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也 ...
- 第三课:sea.js模块加载原理
模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...
- Node.js模块
每一个Node.js都是一个Node.js模块,包括JavaScript文件(.js).JSON文本文件(.json)和二进制模块文件(.node). mymodul.js function Hell ...
- 基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)介绍(二)
基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)介绍(二) 之前文章中给大家说明了下我这个小小的想法,发现还是有不少人的支持和关注.你们的鼓励是对我最大的支持. 我总结了了 ...
随机推荐
- DM8168 新三板系统启动
DM8168从补丁到系统的新董事会开始折腾了20天,最终完成,高校是累的东西,导师只焊接机10一个BGA,其他人则手. 前段时间启动操作系统时,到了Starting Matrix GUI applic ...
- MySql分析算法作品索引(马上,只是说说而已B-tree)
刚开始学习的时候,百度搜索.但我发现很难理解了很多的太复杂,各种物品的整合总结(建议可能看到的文字,我不明白也没关系,再看看操作步骤图,然后结合文,所以,一切都清楚了很多) B-tree.B这是bal ...
- struts.xml在Action配置具体解释
在博客上我已经基本上解释struts.xml基本配置.配置过程最为基本的是action的动态配置. 一.Action的创建方法 1)实现Action接口 2)继承ActionSupport类,覆写当中 ...
- Android.9图片评论(一个)
什么是.9图片 至于什么是.9图片这里就简单提一下,即图片后缀名前有.9的图片,如pic.9.png.pic1.9.jgp,诸如此类的图片就称为.9图片. .9图片的作用 ①.9图片的作用是在图片拉伸 ...
- fastjson经常用法
首先,JSON究竟是什么? JSON就是一串字符串 仅仅只是元素会使用特定的符号标注. {} 双括号表示对象 [] 中括号表示数组 "" 双引號内是属性或值 : 冒号表示后者是前者 ...
- java反思reflect 分析Object物
直接看它的一个例子 </pre><pre name="code" class="java">package reflect; impor ...
- 解决Activity启动黑屏和设置android:windowIsTranslucent不兼容activity切换动画的问题
在该项目中遇到开Activity之后,黑屏问题,解决的办法是在网上通过设置发现theme和style特性,可以实现. http://www.cnblogs.com/sunzn/p/3407078.ht ...
- 设计模式--模板方法 And State模式
1.模板方法 钩子: 在抽象基类已经有默认的定义,子类选择是否覆盖它 在模板方法模式中, 抽象基类中使用 钩子函数(子类视情况是否覆盖) 来达到控制模板方法中 流程控制的 目的 设计原则: ...
- CentOS 7 下安装 LEMP 服务(nginx、MariaDB/MySQL 和 php)
原文 CentOS 7 下安装 LEMP 服务(nginx.MariaDB/MySQL 和 php) LEMP 组合包是一款日益流行的网站服务组合软件包,在许多生产环境中的核心网站服务上起着强有力的作 ...
- Redux基础
Redux 是一个状态容器 Redux 就像是作者自己的介绍,它不会为你提供任何的东西,它不会告诉你如何做路由,它只专注于应用程序状态,是一个 JavasSript 的状态容器,所有的状态的变化都是当 ...