js库写法
前言:
现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累。而目前版本的 JavaScript 并未提供一种原生的、语言级别的模块化组织模式,而是将模块化的方法交由开发者来实现。因此,出现了很多种 JavaScript 模块化的实现方式,
以 AMD 为例,该规范使用 define 函数来定义模块。
define(factory(){
//模块化
});
模块模式:
模块模式使用了 JavaScript 的一个特性,即闭包(Closures)。现今流行的一些 JS 库中经常见到以下形式的代码:
;(function (参数) {
// 模块代码
// return something;
})(参数);
上面的代码定义了一个匿名函数,并立即调用自己。
也有一些开发者在函数表达式前面加上一个惊叹号(!)或分号(;),而不是用括号包起来。
!function (参数) {
// 代码
// return something
}(参数);
还有些人喜欢用括号将整个 IIFE 围起来,这样就变成了以下的形式:
(function (参数) {
// 代码
// return something
}(参数));
参数输入:
JavaScript 有一个特性叫做隐式全局变量(implied globals),当使用一个变量名时,JavaScript 解释器将反向遍历作用域链来查找变量的声明,如果没有找到,就假定该变量是全局变量。这种特性使得我们可以在闭包里随处引用全局变量,比如 jQuery 或 window。然而,这是一种不好的方式。
考虑模块的独立性和封装,对其它对象的引用应该通过参数来引入。如果模块内需要使用其它全局对象,应该将这些对象作为参数来显式引用它们,而非在模块内直 接引用这些对象的名字。以 jQuery 为例,若在参数中没有输入 jQuery 对象就在模块内直接引用 $ 这个对象,是有出错的可能的。正确的方式大致应该是这样的:
;(function ($, w) {
// $ is jQuery
// w is window
// 局部变量及代码
// 返回
})(jQuery, window);
模块输出(Module Export)
有时我们不只是要使用全局变量,我们也要声明和输出模块中的对象,这可以通过匿名函数的 return 语句来达成,而这也构成了一个完整的模块模式。
var klm= (function () {
var myklm = {},
modeval= 1; function privateMethod() {
// ...
} myklm.moduleProperty = 1;
myklm.moduleMethod = function () {
// ...
}; return myklm ;
}());
这段代码声明了一个变量 MODULE,它带有两个可访问的属性:moduleProperty 和 moduleMethod,其它的代码都封装在闭包中保持着私有状态。参考以前提过的参数输入,我们还可以通过参数引用其它全局变量。
输出简单对象:
使用对象直接量来表达 JavaScript 对象是很常见的。比如:var x = { p1: 1, p2: "2", f: function(){ /*... */ } }
var Module1 = (function () {
var private_variable = 1;
function private_method() { /*...*/ } var my = {
property1: 1,
property2: private_variable,
method1: private_method,
method2: function () {
// ...
}
};
return my;
}());
输出函数:
有时候我们希望返回的并不是一个对象,而是一个函数。有两种需求要求我们返回一个函数,一种情况是我们需要它是一个函数,比如 jQuery,它是一个函数而不是一个简单对象;另一种情况是我们需要的是一个“类”而不是一个直接量,之后我们可以用 "new" 来实例它。目前版本的 JavaScript 并没有专门的“类”定义,但它却可以通过 function 来表达。
var klm= (function () {
// 私有成员及代码 ... return function(name) {
this.name = name;
this.bark = function() { /*...*/ }
};
}()); var com = new klm("蒯灵敏");
com.bark();
前面已经提到一种形式是输出对象直接量(Object Literal Notation),而 Revealing Module Pattern 其实就是这种形式,只是做了一些限定。这种模式要求在私有范围内中定义变量和函数,然后返回一个匿名对象,在该对象中指定要公开的成员。
var klm= (function () {
// 私有变量及函数
var x = 1;
function f1() {}
function f2() {} return {
public_method1: f1,
public_method2: f2
};
}());
扩展:
紧耦合扩展:
有时我们要求在扩展时调用以前已被定义的方法,这也有可能被用于覆盖已有的方法。这时,对模块的定义顺序是有要求的。
var klm = (function (my) {
var old_moduleMethod = my.moduleMethod; my.moduleMethod = function () {
// 方法重载
// 可通过 old_moduleMethod 调用以前的方法...
};
return my;
}(klm));
克隆与继承:
var MODULE_TWO = (function (old) {
var my = {},
key; for (key in old) {
if (old.hasOwnProperty(key)) {
my[key] = old[key];
}
} var super_moduleMethod = old.moduleMethod;
my.moduleMethod = function () {
// override method on the clone, access to super through super_moduleMethod
}; return my;
}(MODULE));
上面代码再精简一下:可以使用 Object.create()
var MODULE_TWO = (function (old) {
var my = Object.create(old); var super_moduleMethod = old.moduleMethod;
my.moduleMethod = function () {
// override method ...
}; return my;
}(MODULE));
与其它模块规范或 JS 库的适配:
模块环境探测:
现今,CommonJS Modules 与 AMD 有着广泛的应用,如果确定 AMD 的 define 是可用的,我们当然可以使用 define 来编写模块化的代码。然而,我们不能假定我们的代码必然运行于 AMD 环境下,有没有办法可以让我们的代码?
其实我们只需要在某个地方加上对 CommonJS Modules 与 AMD 的探测并根据探测结果来“注册”自己就可以了,以上那些模块模式仍然有用。AMD 定义了 define 函数,我们可以使用 typeof 探测该函数是否已定义。若要更严格一点,可以继续判断 define.amd 是否有定义。另外,SeaJS 也使用了 define 函数,但和 AMD 的 define 又不太一样。对于 CommonJS,可以检查 exports 或是 module.exports 是否有定义。
var klm = (function () {
var my = {};
// 代码 ... if (typeof define == 'function') {
define( function(){ return my; } );
}else if (typeof module != 'undefined' && module.exports) {
module.exports = my;
}
return my;
}());
其它一些 JS 库的做法
jquery的检测方式
if ( typeof module === "object" && module && typeof module.exports === "object" ) {
module.exports = jQuery;
} else {
if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function () { return jQuery; } );
}
} if ( typeof window === "object" && typeof window.document === "object" ) {
window.jQuery = window.$ = jQuery;
}
接下来看看多重匿名函数的做法:
(function (root, factory) {
if (typeof exports === "object" && exports) {
factory(exports); // CommonJS
} else {
var mustache = {};
factory(mustache);
if (typeof define === "function" && define.amd) {
define(mustache); // AMD
} else {
root.Mustache = mustache; // <script>
}
}
}(this, function (mustache) {
// 模块主要的代码放在这儿
});
这段代码与前面介绍的方式不太一样,它使用了两个匿名函数。后面那个函数可以看作是模块代码的工厂函数,它是模块的主体部分。前面那个函数对运行环境进行 检测,根据检测的结果对模块的工厂函数进行调用。另外,作为一个通用库,它并没使用 window 对象,而是使用了 this,因为在简单的函数调用中,this 其实就是全局对象。
再看看 doT 的做法
(function() {
"use strict"; var doT = {
version: '1.0.0',
templateSettings: { /*...*/ },
template: undefined, //fn, compile template
compile: undefined //fn, for express
}; if (typeof module !== 'undefined' && module.exports) {
module.exports = doT;
} else if (typeof define === 'function' && define.amd) {
define(function(){return doT;});
} else {
(function(){ return this || (0,eval)('this'); }()).doT = doT;
}
// ...
}());
这段代码里的 (0, eval)('this') 是一个小技巧,这个表达式用来得到 Global 对象,'this' 其实是传递给 eval 的参数,但由于 eval 是经由 (0, eval) 这个表达式间接得到的,因此 eval 将会在全局对象作用域中查找 this,结果得到的是全局对象。若是代码运行于浏览器中,那么得到的其实是 window 对象。
JavaScript 模块化的未来
尚在制定中的 ES 6 会对模块作出语言级别的定义。我们来看一个实例,以下的代码段摘自“ES6:JavaScript中将会有的几个新东西”
module Car {
// 内部变量
var licensePlateNo = '556-343';
// 暴露到外部的变量和函数
export function drive(speed, direction) {
console.log('details:', speed, direction);
}
export module engine{
export function check() { }
}
export var miles = 5000;
export var color = 'silver';
};
在以后自己写js封装的时候上面是我参考的资料,继续激情的前进着。。。
js库写法的更多相关文章
- 如何写JS库,JS库写法
前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方 ...
- 解决jQuery多个版本,与其他js库冲突方法
jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. < ...
- 仿照jquery封装一个自己的js库(二)
本篇为完结篇.主要讲述如何造出轮子的高级特性. 一. css方法的高级操作 先看本文第一部分所讲的dQuery css方法 //css方法 dQuery.prototype.css=function( ...
- 仿照jquery封装一个自己的js库(一)
所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...
- 前端之Vue.js库的使用
vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...
- 在Vue将第三方JS库封装为组件使用
第三方JS库地址:https://github.com/inorganik/CountUp.js 使用NPM进行安装: npm install --save countup 根据官方回答,CountU ...
- 仿照jquery封装一个自己的js库
所谓造轮子的好处就是复习知识点,加深对原版jquery的理解.本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括 ...
- 发布兼容TS的JS库到nexus和npmjs
一. 前言 由于node以及绝大多数前端库都是用JavaScript(以下简称JS)语言实现,而Angular是用TypeScript(以下简称TS)实现,虽然TS是JS的超集,但是由于TS和JS对于 ...
- 【转载】写一个js库需要怎样的知识储备和技术程度?
作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...
随机推荐
- September 20th 2016 Week 39th Tuesday
Failure is not fatal, but failure to change might be. 失败并不致命,但无法改变却可能是致命的. I need change, but it see ...
- 解决springmvc 前台取不到值
查看web.xml 如果为web-app_2_3.xsd spring不支持 修改项目为web-app_2_4.xsd
- Git命令之上传与同步
操作步骤,可参考:http://blog.csdn.net/chenyufeng1991/article/details/47299461. 1.在本地仓库中,即项目目录下创建文件,如: 2.查看当前 ...
- Java Web基础——Action+Service +Dao三层的功能划分
1. Action/Service/DAO简介: Action是管理业务(Service)调度和管理跳转的. Service是管理具体的功能的. Action只负责管理,而Service负责实施. D ...
- JavaScript基础——使用运算符
JavaScript运算符允许你改变一个变量的值.你已经熟悉了用于赋值给变量的=运算符.JavaScript提供了几种不同的运算符,它们可以划分为两大类:算数运算符和赋值运算符. 1.算数运算符 你可 ...
- 数据结构和算法 – 11.高级排序算法(上)
对现实中的排序问题,算法有七把利剑可以助你马道成功. 首先排序分为四种: 交换排序: 包括冒泡排序,快速排序. 选择排序: 包括直接选择排序,堆排序. 插入排序 ...
- Linux性能分析工具的安装和使用
转自:http://blog.chinaunix.net/uid-26488891-id-3118279.html Normal 0 7.8 磅 0 2 false false false EN-US ...
- Validform 学习笔记---代码练习
上一节主要梳理了validform的基础知识,针对这些基础知识,编写代码的时候,也整理的部分知识,先记录以便后期温习. 验证部分的css @charset "utf-8"; /* ...
- mac os x10.10 安装thrift
http://thrift.apache.org/docs/install/ 一:安装最新版(自动安装) 最简单的是用homebrew进行安装 安装homebrew 在终端输入ruby -e &quo ...
- hdu 1404 找sg ***
HDU 1404 Digital Deletions 一串由0~9组成的数字,可以进行两个操作:1.把其中一个数变为比它小的数:2.把其中一个数字0及其右边的所以数字删除. 两人轮流进行操作,最后把 ...