什么是OMD原创内容,盗版必究。
【作者:唐霜】原创内容,盗版必究。原创内容,盗版必究。在node.js流行起来之前,javas【版权所有】唐霜 www.tangshuang.net【转载请注明来源】cript的开发方式都是函数式的顺序依赖【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。关系,直到node.js火起来,Comm【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。onJS规范被人推崇到一个高度。Comm【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。onJS其实首先提供了一个丰富的可扩展的转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。库,在此基础上提供可应用的API,在这些未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。API的基础上,逐渐形成一套规范,使得j原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。avascript的开发在这些规范的基础原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。上进行。它的重要特征就是运行开发者模块化著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。的开发javascript,就像Java本文作者:唐霜,转载请注明出处。【转载请注明来源】一样,提供一个模块,这个模块对外提供接口本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】,有一个入口去调动所有的模块协同完成不同转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】的功能。node.js就是在此规范上建立本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。起来的服务端框架。
原创内容,盗版必究。【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。node.js可以被认为是应用程序开发的【版权所有】唐霜 www.tangshuang.net【转载请注明来源】一个案例,它是运行在服务器上的javas本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】cript。而是否可以在浏览器上面也遵循【转载请注明来源】【本文首发于唐霜的博客】CommonJS规范呢?为了达到这个目的【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net,require.js火起来,与它对应的著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。是AMD规范。实际上,AMD规范是Com著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。monJS的一个兼容方案,require未经授权,禁止复制转载。【原创内容,转载请注明出处】.js希望建立一个既满足应用程序,又满足未经授权,禁止复制转载。【本文受版权保护】浏览器运行的规范。AMD也逐渐被开发者接【本文受版权保护】【版权所有】唐霜 www.tangshuang.net受,国外大部分的javascript发布【本文受版权保护】转载请注明出处:www.tangshuang.net产品,基本上都遵循或支持amd规范。
原创内容,盗版必究。【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。【本文受版权保护】著作权归作者所有,禁止商业用途转载。sea.js是专注于浏览器的模块化jav转载请注明出处:www.tangshuang.net【未经授权禁止转载】ascript开发框架,和前两者不同的是【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。,它只专注于浏览器端,而且更优雅灵活,这【本文受版权保护】原创内容,盗版必究。一规范被成为CMD规范,其创始人为中国的【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】玉伯。自此,三家分立,各有裨益,java著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。script的模块化开发规范已经被创立完【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】毕,以后就将其逐渐完善,并实现更多的应用本文作者:唐霜,转载请注明出处。【转载请注明来源】。
【版权所有】唐霜 www.tangshuang.net【作者:唐霜】本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。【本文首发于唐霜的博客】在此基础上,有人试图实现兼容。也就是自己【本文首发于唐霜的博客】【本文受版权保护】的代码既能在node.js上运行,也能在【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】符合amd规范的代码环境中运行。于是产生【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net了umd,其实umd并不算规范,而只能算【未经授权禁止转载】【本文受版权保护】一种兼容方案,它可以兼容CommonJS【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】和AMD。但国内更多的其实是使用sea.著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.netjs,包括淘宝、腾讯的部分产品,都是使用本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】sea.js框架,而react等的跑火,【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】有理由相信,未来的前端开发一定是模块化趋【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】势的。
【本文受版权保护】【作者:唐霜】【作者:唐霜】著作权归作者所有,禁止商业用途转载。就目前而言,为了能兼容commonjs 【关注微信公众号:wwwtangshuangnet】【原创内容,转载请注明出处】amd cmd以及原生的javascri本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.netpt,我结合了前人的经验,发布了omd,【版权所有】唐霜 www.tangshuang.net【转载请注明来源】它也不是什么规范,只是一套兼容方案罢了。
【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。omd的目的,就是希望所有的javasc【原创内容,转载请注明出处】【原创不易,请尊重版权】ript代码开发者都能按照这个规则来完成【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。代码,使它在模块化开发环境下,可以作为一未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net个模块来使用,而在非模块环境下,也能够正本文作者:唐霜,转载请注明出处。原创内容,盗版必究。常使用。它就是一套兼容方案【原创内容,转载请注明出处】,目前兼容的有module.export原创内容,盗版必究。原创内容,盗版必究。s、amd、cmd以及原生支持。
未经授权,禁止复制转载。【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.netOMD的源码原创内容,盗版必究。
【本文首发于唐霜的博客】【作者:唐霜】本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。首先,我需要将源码放出来,所有的读者可以原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】先简单的看下它的内容,大致了解它的运行规本文版权归作者所有,未经授权不得转载。【作者:唐霜】则。
著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】转载请注明出处:www.tangshuang.net原创内容,盗版必究。我已经更新了代码,你可以在【转载请注明来源】github【原创不易,请尊重版权】上view到。【版权所有】唐霜 www.tangshuang.net
【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】/** * omd 让你写的javascript代码兼容所有的运行环境,符合amd, cmd, commonjs规范,在原生环境中也能运行
* 例如,你写了一堆代码,在没有模块化加载的时候可以使用,在模块化框架下也可以使用
*/
!function(spacename,dependencies,window,factory){
// 当define被定义的情况下
if(typeof define == 'function' && (define.amd != undefined || define.cmd != undefined)) {
define(dependencies,function() {
return factory(window);
});
}
// 当define没有被定义的情况下
else {
var ex = factory(window);
// CommonJS NodeJS
if(typeof module !== 'undefined' && typeof exports === 'object') {
// 由于exports被定义,函数中的exports已经是全局变量,因此,这里就不进行任何操作
module.exports = ex;
}
// 原生Javascript,接口将被作为一个window的子对象
else {
window[spacename] = ex;
}
}
}('spaceName',['jquery'],window,function(window){
var $ = (window.$ != undefined ? window.$ : null);
// var $ = require('jquery');
/**
* 如何上手呢?
* 1. 修改上面的'spaceName'为当前文件的名称(不要后缀)【在非模块化环境中使用其接口会加载到window中,例如你可以使用类似window.spaceName.function()来调用某个接口函数】
* 2. 修改上面['jquery']的内容为依赖包列表【在模块化环境中可能使用】
* 3. window就是window,有你需要的window属性
* 4. 加载$,如果你的项目中依赖了jQuery或Zepto,则选择上面注释中的一种,使$可用
* 5. 接口,通过return返回接口
*/
});
OMD原理详解【版权所有】唐霜 www.tangshuang.net
转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。在《【原创内容,转载请注明出处】javascript立即执行某个函数:插原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】件中function(){}()再思考》一文中,我详细阐述了【访问 www.tangshuang.net 获取更多精彩内容】!function(fun){}(function($){});,因此这里就不详细阐述了。【未经授权禁止转载】
兼容amd和cmd本文作者:唐霜,转载请注明出处。
原创内容,盗版必究。未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netif(typeof define == 'function' && (define.amd != undefined || define.cmd != undefined) {
define(function() {
return fun($);
});
}
上面这段代码,仅在amd或cmd规范下使本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】用时才执行define。我们这里把范围缩【转载请注明来源】【本文首发于唐霜的博客】小到require.js和sea.js。【本文受版权保护】著作权归作者所有,禁止商业用途转载。对于require.js而言,defin【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。e和define.amd是可见的,因此执未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】行define(function(){}【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。);,同样的道理,sea.js也会执行。【原创不易,请尊重版权】【版权所有,侵权必究】但是作为两种不同的规范,为何可以以相同的【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net代码返回呢?
【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。在require.js中,一个模块如此去【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。定义:
【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】define({});
define(factory);
define(id,dependencies,factor);
define(dependencies,factor)
在sea.js中也差不多,但是也有不同之【转载请注明来源】未经授权,禁止复制转载。处:
【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。define({});
define(factory);
define(id,dependencies,factory);
define(id,factory);
前面三种都是一样的,但是细节上也有所不同未经授权,禁止复制转载。【未经授权禁止转载】,第一种以对象的方式定义并不能解决我们插本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】件中接口传递的目的,因此不考虑。剩下的就本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】只有两种相同的形式,但是就像前文说到的一【作者:唐霜】【作者:唐霜】样,OMD是为了实现兼容,也就是说它必须【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】作为框架被应用,框架的基础代码具有稳定性未经授权,禁止复制转载。【作者:唐霜】,不能让用户改来改去,否则也就失去了规范【原创内容,转载请注明出处】【版权所有,侵权必究】的意义。而在剩下的两种中,define(id,dependencies,factory)的前两个变量,都需要自己去定义,因此,也【作者:唐霜】原创内容,盗版必究。被排除。最终也就只有define(factory)这种形式被我们采用。本文作者:唐霜,转载请注明出处。
define(function(require,exports,module){
var a = require('a');
});
这种代码形式在require.js和se【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】a.js中都可以使用,可是在sea.js【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】中,可以使用exports.xxx = function(){}来提供接口,可是在require.js中未经授权,禁止复制转载。【作者:唐霜】,不得不采用return的形式,幸好,在本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。sea.js中,return也是有效的。本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】所以,最终,我们选择了return的形式本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】向外提供接口:
define(function(){
return {
fun1 : function(a,b) {},
fun2 : function(c,d) {}
}; // return的结果为一个对象
});
在sea.js或require.js中:
【转载请注明来源】【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。define(function(){
var $omd = require('omd');
var fun1 = $omd.fun1(12,34);
});
这样,在omd.js中写的插件所提供的模著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net块接口,就可以被使用了。
【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】【作者:唐霜】转载请注明出处:www.tangshuang.net兼容comomjs【原创不易,请尊重版权】
未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】【本文首发于唐霜的博客】当define没有被定义的时候,说明跟s本文版权归作者所有,未经授权不得转载。【作者:唐霜】ea.js和require.js没有任何【转载请注明来源】【版权所有】唐霜 www.tangshuang.net关系了,这个时候,我们要检查是否支持no著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】de.js。
原创内容,盗版必究。【本文首发于唐霜的博客】【本文首发于唐霜的博客】原创内容,盗版必究。如果是在node.js环境下运行,那么m本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。odule和exports是一个由核心库著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】提供的全局变量。因此,只需要将插件提供的【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。接口赋值给module.exports,本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】就完成了当前文件(模块)所提供的接口了。
原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。【转载请注明来源】【未经授权禁止转载】兼容原生的javascript【版权所有】唐霜 www.tangshuang.net
【原创不易,请尊重版权】【转载请注明来源】【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。当以上情况都不满足的情况下,实际上,你所【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】提供的接口,就是一个函数。你提供了一个f【作者:唐霜】未经授权,禁止复制转载。un1的接口,你就可以在其他javasc【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ript代码中执行fun1()函数。
【转载请注明来源】【版权所有,侵权必究】原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。全局变量$和局部变量$转载请注明出处:www.tangshuang.net
【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。把$作为变量名,最大的好处是兼容jque未经授权,禁止复制转载。未经授权,禁止复制转载。ry和zepto。在第一个functio【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。n(fun){}中,我两次使用到了fun【版权所有,侵权必究】【版权所有,侵权必究】($),在这里,$没有被事先声明过,因此【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】用了一个if(typeof $ === 【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】‘undefinedR未经授权,禁止复制转载。【作者:唐霜】17;)做判断。但是如果当前环境下已经加著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。载了jquery或zepto,$就是一个【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net全局变量,实际上它是window.$。因【本文受版权保护】【版权所有】唐霜 www.tangshuang.net此,在执行fun($)时,实际上是把$作本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。为参数传递给了fun()。
本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】而在前面那篇关于立即执行函数的文章中我已本文作者:唐霜,转载请注明出处。【本文受版权保护】经讲过了,在这里的fun()实际上就是第【作者:唐霜】【原创内容,转载请注明出处】二个我们要真正用来写插件代码的function($){},要理解这一点,你必须读懂上面那篇文章。
在fun($)中,$如果代表jquery著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。或zepto,那么它实际上是一个全局变量【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。。而到了function($),$实际上【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】成为函数的参数,成为一个局部变量。在fu【转载请注明来源】【版权所有】唐霜 www.tangshuang.netnction($){}中,虽然你可以使用【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。$(‘#div1’转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net;)进行选择,但你要知道,这里的$并非全本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。局变量window.$,而是传递而来的。【原创内容,转载请注明出处】【未经授权禁止转载】下文还会提到,要使用 var jQuery = $; 这样诡异的代码来处理某些情况。【未经授权禁止转载】
fun($)返回值问题转载请注明出处:www.tangshuang.net
原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】在第一次使用fun($)时,return【本文受版权保护】【转载请注明来源】 fun($)。第二次时,ex = fu【转载请注明来源】【本文受版权保护】n($)。从值的返回角度讲,fun($)转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】必然存在一个return。具体是什么意义【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】呢?
著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。【本文受版权保护】著作权归作者所有,禁止商业用途转载。【本文受版权保护】fun($)的返回值,其实就是插件提供的【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。对外接口,而实际上,就是一个对象Obje原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.netct。我们可以在第一次return fu著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。n($);的时候,也先执行一次赋值操作:
未经授权,禁止复制转载。【转载请注明来源】【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netdefine(function(){
var ex = fun($);
return ex;
});
前面已经讲过了,amd和cmd在defi本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netne的function中return,实转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net际上是模块对外提供接口的一种方式,而这种【版权所有,侵权必究】【作者:唐霜】方式,必须保证以对象的形式返回。因此,在【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net插件代码中,你可以看到,我首先定义的是一【作者:唐霜】【未经授权禁止转载】个ex = {},然后执行return ex;从而对外提转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。供了接口。
而在node.js环境下,只需要将这个e【本文首发于唐霜的博客】原创内容,盗版必究。x返回值赋予exports即可完成该模块本文版权归作者所有,未经授权不得转载。【转载请注明来源】的接口。在原生的JavaScript环境【未经授权禁止转载】【本文首发于唐霜的博客】下,没有接口这种概念,对外提供的,则是函【原创内容,转载请注明出处】【未经授权禁止转载】数或对象属性,将它赋予window对象,【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。就相当于提供了一个全局函数或全局变量。
原创内容,盗版必究。【转载请注明来源】本文版权归作者所有,未经授权不得转载。OMD开发规则本文版权归作者所有,未经授权不得转载。
未经授权,禁止复制转载。【转载请注明来源】【原创不易,请尊重版权】未经授权,禁止复制转载。【转载请注明来源】利用omd开发兼容各个规范的插件(模块)未经授权,禁止复制转载。【本文首发于唐霜的博客】时,只需要在// 真正的插件代码都在这里 这句注释后面撰写插件代码即可,无需像其【作者:唐霜】本文版权归作者所有,未经授权不得转载。他教程所示一样,写一个(function【转载请注明来源】本文版权归作者所有,未经授权不得转载。($){}(jQuery)),直接写插件著作权归作者所有,禁止商业用途转载。【作者:唐霜】内容即可。如果无需对外提供接口,则写完插【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net件代码就可以完成开发。
关于var jQuery = $本文版权归作者所有,未经授权不得转载。
【本文受版权保护】【本文受版权保护】未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。在插件代码中,一些插件并没有使用$,而是【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】使用jQuery。但是前文已经提到了,在【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。这个函数内部,jQuery是未定义的,$原创内容,盗版必究。未经授权,禁止复制转载。是传递过来的变量,因此,将$赋值给jQu【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】ery,则让jQuery重新有效。
转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】如果需要对外提供接口,则在原创内容,盗版必究。// 接口开始后面使用对象属性的方式,将接口赋值给ex【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。。注意一点,ex返回后,你不可以通过接口【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】改变插件内部的变量,这个接口是对外接口。
利用OMD开发的步骤【本文首发于唐霜的博客】
未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。1.在开始撰写你的任何javascrip未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。t代码文件之前,将omd.js的代码框架本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。拷贝到该文件中;
【本文受版权保护】【原创不易,请尊重版权】【未经授权禁止转载】转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net2.在注释中对应的位置开始撰写你的脚步代【本文首发于唐霜的博客】【原创不易,请尊重版权】码
【作者:唐霜】未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net3.在注释中指出接口输出的位置处,通过【版权所有】唐霜 www.tangshuang.netex.fun = function(){}的方式返回接口【原创内容,转载请注明出处】
4.完成代码写作之后,利用JavaScr【作者:唐霜】【原创不易,请尊重版权】ipt压缩工具,净化和压缩你的Javas【作者:唐霜】未经授权,禁止复制转载。cript代码
【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】【原创内容,转载请注明出处】【作者:唐霜】【版权所有,侵权必究】OMD使用要点【本文首发于唐霜的博客】
【原创内容,转载请注明出处】原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。和sea.js不同,require.js【版权所有,侵权必究】【转载请注明来源】的所有模块都是异步加载,这意味着你不能按【关注微信公众号:wwwtangshuangnet】【本文受版权保护】照以往的方式,通过先加载哪个模块,然后加转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。载另外一个模块来确定它们的依赖关系。不幸本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net的是,所有的jquery插件都要依赖jq【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。uery库。因此,在require中需要【作者:唐霜】本文版权归作者所有,未经授权不得转载。解决好这个依赖问题。依赖的用法只有在de【未经授权禁止转载】转载请注明出处:www.tangshuang.netfine的参数中,前面已经提到了defi【作者:唐霜】【本文受版权保护】ne的几种用法,我们来看下具体的实现方法【未经授权禁止转载】【未经授权禁止转载】:
【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。define(['jquery'],function($){
require(['plugin.omd.js'],function($plugin){
$('#test').plugin();
$plugin.p('#test');
});
});
上面的代码中,define([̵【原创内容,转载请注明出处】【作者:唐霜】6;jquery’])首先确本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。定了这个模块依赖于jquery,并将其返【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net回接口以$作为变量。在这个基础上,再去r【本文首发于唐霜的博客】未经授权,禁止复制转载。equire(omd.js),则可以让o【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。md.js中的对jQuery的依赖可以实【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net现,omd.js中才可以正常使用jque【作者:唐霜】【作者:唐霜】ry。
【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。【原创不易,请尊重版权】不过,从require.js的设计上,模未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net块之间都是异步加载的,如果按照上述方法解【本文受版权保护】著作权归作者所有,禁止商业用途转载。决依赖问题,性能上比sea.js要差很多【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】。
【作者:唐霜】【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.net下面是老版本的代码,可供参考:【转载请注明来源】
【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。;(function(){
function _init() {
console.log('init');
// ……插件功能部分代码……,很多国外插件都加入了amd的兼容,因此,要注意一下
(function($) {
// jQuery代码部分,如果是原生的JS,则不需要这个闭包来进行jquery处理,但是如果用jquery的话,就这样
$.fn.fillText = function(text) {
console.log('jquery plugin');
this.each(function(){
console.log('jquery plugin one element');
$(this).text(text);
});
}
})(jQuery);
}
function _export1(param1,param2) {
console.log('export1');
}
function _export2(param1,param2) {
console.log('export2:' + param1);
}
// CommonJS
if (typeof module !== 'undefined' && typeof exports === 'object') {
_init();
exports.export1 = _export1;
exports.export2 = _export2;
}
// amd & cmd
else if (typeof define === 'function' && (define.amd || define.cmd)) {
define(function() {
_init();
var exports = {};
exports.export1 = _export1;
exports.export2 = _export2;
return exports;
});
}
// javascript
else {
_init();
this.export1 = _export1;
this.export2 = _export2;
}
}).call(function() {
return this || (typeof window !== 'undefined' ? window : global);
});
其中_init()函数会在每一个接口的地本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。方去执行一次,当然,你可以根据你自己的一本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】些情况,增加更多的函数。
【本文首发于唐霜的博客】原创内容,盗版必究。【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net而exports是返回的接口,可以当做对【本文受版权保护】【本文首发于唐霜的博客】象方法来用。
原创内容,盗版必究。【未经授权禁止转载】【本文受版权保护】【原创不易,请尊重版权】我已经将这个代码放到【原创不易,请尊重版权】github【转载请注明来源】上,里面有demo,你可以看下plugi【关注微信公众号:wwwtangshuangnet】【原创内容,转载请注明出处】n.js和main.js,来看看具体的用原创内容,盗版必究。【作者:唐霜】法。
【本文受版权保护】本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。2016-01-20 6504


