JavaScript中模块“写法”
在JavaScript模块到底是什么
event = function() {
// do more
return {
bind: function() {},
unbind: function() {},
trigger: function() {}
};
}();
这能代表“模块”吗?这就是一个JS对象啊,以为有多么深奥。
是的,JavaScript中模块多数时候被实现为一个对象。这么看来,多数时候我们都写过“模块”(但没有在整个项目中应用模块化思想)。或许每个人写模块的方式(风格)还不同。比如上面的事件模块是一个匿名函数执行,匿名函数中封装了很多代码,最后通过return返回给event变量,这个event就是事件模块的接口。
又如jQuery,它也是一个匿名函数执行,但它并不返回接口对象。而是将自己暴露给window对象。
(function(window){
// ..
// exports
window.jQuery = window.$ = jQuery;
})(window);
再如SeaJS,它一开始就将接口公开了
/**
* Base namespace for the framework.
*/
this.seajs = { _seajs: this.seajs };
后续是很多的匿名函数执行给变量seajs添加很多工具方法。注意,这里的this在浏览器环境指window对象,如果是定位在浏览器中,这个this也可以去掉。就象Ext。
Ext = {
/**
* The version of the framework
* @type String
*/
version : '3.1.0'
};
呃,我们已经看到了四种方式写模块(把jQuery,SeaJS,Ext看成模块,呃很大的模块)。
哪一种更好呢? 哪一种更适合在浏览器端呢?纯从代码风格上说,是萝卜白菜各有所爱。只要我们运用了“模块化”的思想来开发就行了。
但如果有一种统一的语法格式来写模块岂不是更好,就不会出现各用各的风格来写模块而使代码乱糟糟。
这就是目前的现状,开发者强烈需要一种统一的风格来写模块(最好是语言内置了)。这时一些组织出现了,最具代表的如CommonJS,AMD。此外ECMAScript也开始着手模块的标准化写法。
无论它们提供什么样的写法,我们需要的仅仅是
1,将一些零散代码封装成一个有用的单元(encapsulate)
2,导出模块的接口API(exports)
3,方便友好引用其它模块(dependency)
服务器端的JSer是幸运的,它有Node.js,Node.js遵循了一个称为CommonJS的规范。CommonJS其中就有对写模块的标准化。当然模块化只是其中的一部分而已。具体来说Node.js实现了
Modules/1.0
Promises/B (http://github.com/kriskowal/q)
Promises/D (https://github.com/kriskowal/q)
Unit Testing/1.0
模块化方面它实现了Modules/1.0(已经更新到1.1.1)。
以下是node中是写模块的一个示例。
math.js
exports.add = function() {
var sum = 0, i = 0, args = arguments, l = args.length;
while (i < l) {
sum += args[i++];
}
return sum;
};
increment.js
var add = require('math').add;
exports.increment = function(val) {
return add(val, 1);
};
main.js,该文件为入口文件
var inc = require('increment').increment;
var a = 1;
inc(a); // 2
这就写了一个math、increment、main模块。math提供了add方法来实现数字相加。increment模块依赖于math模块,它提供increment方法实现相加。main获取到increment方法,执行相加操作。
以上代码示例可以看到
1,node要求一个js文件对应一个模块。可以把该文件中的代码想象成是包在一个匿名函数中,所有代码都在匿名函数中,其它模块不可访问除exports外的私有变量
2,使用exports导出API
3,使用require加载其它模块
CommonJS module基本要求如下
1,标示符require,为一个函数,它仅有一个参数为字符串,该字符串须遵守Module Identifiers的6点规定
2,require方法返回指定的模块API
3,如果存在依赖的其它模块,那么依次加载
4,require不能返回,则抛异常
5,仅能使用标示符exports导出API
Modules/1.1较1.0仅增加了标示符module,require函数增加了main和paths属性。而仔细比对1.1与1.1.1后发现除了格式调整了下几乎没有变化。
JavaScript中模块“写法”的更多相关文章
- 在浏览器中高效使用JavaScript module(模块)
在浏览器中也可以使用JavaScript modules(模块功能)了.目前支持这一特性的浏览器包括: Safari 10.1. 谷歌浏览器(Canary 60) – 需要在chrome:flags里 ...
- 在JavaScript中创建命名空间的几种写法
在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hel ...
- 转载 javascript中(function($){...})(jQuery)写法是什么意思
javascript中(function($){...})(jQuery)写法是什么意思 这里实际上是匿名函数function(arg){...}这就定义了一个匿名函数,参数为arg 而调用函数 ...
- javascript中面向对象的5种写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript中为什么使用立即执行函数来封装模块?
最近在学习JavaScript基础,在学习到面向对象编程时,学习到在JavaScript中实现模块化的方法,其中一个重要的点是如何封装私有变量. 实现封装私有变量的方法主要是: 使用构造函数 func ...
- 如何开发原生的 JavaScript 插件(知识点+写法)
一.前言 通过 "WWW" 原则我们来了解 JavaScript 插件这个东西 第一个 W "What" -- 是什么?什么是插件,我就不照搬书本上的抽象概念了 ...
- 转:彻底搞清楚javascript中的require、import和export
原文地址:彻底搞清楚javascript中的require.import和export 为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Ja ...
- JavaScript中的异步操作
什么是异步操作? 异步模式并不难理解,比如任务A.B.C,执行A之后执行B,但是B是一个耗时的工作,所以,把B放在任务队列中,去执行C,然后B的一些I/O等返回结果之后,再去执行B,这就是异步操作. ...
- 浅析 JavaScript 中的闭包(-------------------------------------------)
一.前言 对于 JavaScript 来说,闭包是一个非常强大的特征.但对于刚开始接触的初学者来说它又似乎是特别高深的.今天我们一起来揭开闭包的神秘面纱.闭包这一块也有很多的文章介绍过了,今天我就浅谈 ...
随机推荐
- ASP.NET中连接数据库的各种方法
ASP.NET中连接数据库的各种方法 连接SQL数据库的方法:(一).在Web.Config中创建连接字符串:1.<add name="ConnectionString" c ...
- 关于vnc连接闪退问题的设置
设置如下: 依次点Option-->Advanced-->Expert找到ColourLevel,默认值是pal8,修改为rgb222或full.
- 使用zeranoe的自动化脚本mingw-w64-build-3.6.4在ubutun14.04_64bit上交叉编译ffmpeg 2.5
编译期间,碰到的两个大问题,是环境变量设置问题. 先列出执行脚本是碰到的两个问题,后面给出解决方法并记录执行的命令步骤. 问题1: 编译binutils 2.5出错 ----------------- ...
- javascript模式——Flyweight
Flyweight是一种共享数据内存的模式. Flyweight模式是将一些公有属性从个人中剔除,放在共享的对象当中. 下面以一个项目实例,通过不断的改进,以显示Flyweight模式的优点. 现在我 ...
- MVC调试异常--未能将脚本调试器附加到计算机
32位机: 解决办法:以管理员身份打开CMD,运行:regsvr32.exe "%ProgramFiles(x86)%\Common Files\Microsoft Shared\VS7De ...
- 微信SDK导入报错 Undefined symbols for architecture i386:"operator delete[](void*)", referenced from:
异常信息: Undefined symbols for architecture i386: "operator delete[](void*)", referenced fro ...
- Win7如何添加局域网内的网络打印机
win+R或开始找到运行,在运行框中输入打印机所在的局域网内的IP地址. 这时会打开一个界面.如图 右键要选择的打印机.连接.这时会显示正在安装打印机驱动.如图 开始菜单->设备和打印机 找到刚 ...
- MFC 控件初始化的过程
之前为了学习MFC下浏览器的用法,参考博文:http://www.cnblogs.com/firefly_liu/archive/2009/05/18/1459514.html,虽然按照作者的方法实现 ...
- (原+转)Eclipse中Android调用OpenCv
大部分都是参考下面的网址,如果感觉看起来不舒服,可以直接查看原网址.最后遇到了一点问题: Description Resource Path Location Type E:/~\cod ...
- 从汇编看c++的虚拟继承以及其内存布局(一)
先看第一种最简单的情形,所有类中没有任何虚函数的菱形继承. 下面是c++源码: class Top {//虚基类 public: int i; Top(int ii) { i = ii; } }; c ...