专栏首页互联网杂技JS模块与命名空间的介绍

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);

为此,导出公共API的方式已经讲完。

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer),作者:json

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-01-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2017年IT界最“吃香”的技

    IT行业的失业率仍然徘徊在历史低点,其中某些岗位(如网络和安全工程师和软件开发商)的失业率在1%左右。 Robert Half Technology最近的一项调...

    前朝楚水
  • React -- 组件间通信

    分为三种类型的通信关系: 1、父组件向子组件通信 2、子组件向父组件通信 3、没有嵌套关系的组件之间的通信 父组件向子组件通信 父组件通过子组件的prop...

    前朝楚水
  • 如何利用动效提升用户体验

    如何利用动效提升用户体验 动画可以讲述故事。不是很长很复杂而是很简单的故事,而像是 "嘿,你现在要看看这个!" 或 "哇,你竞争成功了!"。然而,动效的目的不...

    前朝楚水
  • Python制作十款经典的童年游戏(附源码)

    不知道行友们每年六一是怎么度过的,行哥的童年是在游戏世界里度过。这里行哥分享一下十个python可以制作的经典游戏,看看有没有你的菜,代码链接放在文末

    行哥玩Python
  • C#入门教程(二)–C#常用快捷键、变量、类型转换-打造C#

    C#入门教程(一)–.Net平台技术介绍、C#语言及开发工具介绍-打造C#学习教程

    做全栈攻城狮
  • 「第一部:容器和Docker」(1) 容器和Docker 简介

    容器化是一种软件开发方法,其中应用程序或服务、其依赖项和其配置(抽象为部署清单文件)作为容器映像打包在一起。容器化应用程序可以作为一个单元进行测试,并作为容器映...

    首席架构师智库
  • AI博弈论:DeepMind让智能体在非对称博弈中找纳什均衡

    Root 编译自 DeepMind官方博客 ? 随着人工智能系统在现实世界中扮演越来越重要的角色,理解不同的系统如何相互作用至关重要。 刚刚,DeepMind...

    量子位
  • 经验 | 如何成为一名顶级战斗力的数据分析师?

    翻译 | AI科技大本营(rgznai100) 参与 | reason_W 不知道大家以前听没听说过“10x Developer”这个词,如果你连听都还没听说过...

    AI科技大本营
  • 如何成为一名10x的数据分析师?

    不知道大家以前听没听说过“10x Developer”这个词,如果你连听都还没听说过,那可真是时候考虑放弃自己的程序猿事业了。就像传说一样,一些程序猿的战斗力能...

    挖掘大数据
  • 第212天:15种CSS居中的方式,最全了

    CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉...

    半指温柔乐

扫码关注云+社区

领取腾讯云代金券