一个轻量级javascript框架的设计模式
2013-08-15 18:08
169 查看
公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架。谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可以轻松的实现类继承,不过javascript的类继承方法还是有的,常见的有构建函数、原型扩展、综合……,也有一些专门写类的函数,例如jQuery的作者有个类继承函数。关于类继承写法可以简单看看这篇文章。
我自己写的框架也不知道叫什么名字,刚开始写的时候随手写了个W(姓拼音,之前写过jQuery弹出框插件wBox),现在写这篇文章重新整理了一下思想,换了YQ(名字拼音,你懂的~)。
核心代码
框架设计的时候尽量做到了支持链式写法,也就是返回this,可以$(selector).handler1().handler2()……无限写下去,只要不是有返回值的就可以继续。包括了event,dom,css,还有fadeIn,fadeOut动画(因为再重构爱墙[html5+css3]版,所有顺手加上了这个功能)。如果配合sizzle选择器就更牛了!
下面说说框架的核心代码,等完善了之后跟新版html5爱墙一起放出,主要的代码如下:
简单的分析
代码中的注释还算详细,结合注释就可以看懂,下面我再啰嗦几句,高手飘过,欢迎拍砖……
总得来看是个匿名函数,定义了全局变量$(似乎都喜欢美元,如果有喜欢的人民币的,下次加上),函数里面有个YQ的对象,有很多function,包括一些私有的。
使用$可以作为选择器,如果为空,则返回YQ.elems对象,选择后的DOM根据YQ.elems进行扩展,最后得到的就是注释里面说的superElems(此处创建superElems方法参考了下jRaiser),跟jQuery的superElems类似,绑定了很多方法,可以方便的进行操作,YQ的方法可以通过YQ.elems扩展到选择器选择的对象上去,而选择器主要的函数getElements,可以使用sizzle,这样就方便了dom操作,不过sizzle似乎也是代码太多,此处将来会支持简单的标签,#ID,.class,标签+class选择器。
另外框架中中对一些Array,string进行了扩展,例如上面的Array.each方法,YQ.elems.each是重量级的函数方法,可以支持superElems的遍历(返回本身),还可以支持简单数组的遍历。
框架中还对一些兼容性进行了处理,例如YQ.event.fix处理事件,css中处理float
基本就这些了,今天就先说核心的部分,其实通过这段代码已经很清晰的了解到这个框架的思想了,后续继续给力的coding,补充扩展……
目前为止,框架不到800行代码,包括了常见的jQuery方法,压缩后不到9k,gzip 4.5K~
写在最后
本想写一系列的文章,可是敲了几个字又不知道说啥,今后学习下司徒正美追求短小精悍的博文~呵呵
源文档 <http://js8.in/677.html>
我自己写的框架也不知道叫什么名字,刚开始写的时候随手写了个W(姓拼音,之前写过jQuery弹出框插件wBox),现在写这篇文章重新整理了一下思想,换了YQ(名字拼音,你懂的~)。
核心代码
框架设计的时候尽量做到了支持链式写法,也就是返回this,可以$(selector).handler1().handler2()……无限写下去,只要不是有返回值的就可以继续。包括了event,dom,css,还有fadeIn,fadeOut动画(因为再重构爱墙[html5+css3]版,所有顺手加上了这个功能)。如果配合sizzle选择器就更牛了!
下面说说框架的核心代码,等完善了之后跟新版html5爱墙一起放出,主要的代码如下:
(function(window,document){ var DOC = document,YQ = window.$ =function(selector){ if(!selector){ return YQ.elems } typeof selector ==='string'&&(selector = getElements(selector));//简单的判断是dom对象,还是字符串,字符串则开始选择器 return superElems(selector); } function superElems(elems){ if(elems){ if(elems.nodeType){//判断是否为DOM if(typeof elems.getAttribute!=="unknown"){ var temp = elems; elems =[]; elems[0]= temp;//把本身作为超级对象的第一个,其他方法进行扩展 for(var i in YQ.elems){ //扩展对象,保留已有的方法 typeof elems[i]==="undefined"&&(elems[i]= YQ.elems[i]) } } }else{//如果为对象,则对对象进行扩展 elems = YQ.extend(elems,YQ.elems); } } return elems; } function getElements(selector){ //伟大的选择器,可以使用sizzle var dom = DOC.getElementById(selector);//…… return dom; } YQ.tool={ isFunction:function(obj){//简单的判断是否为函数 return obj &&typeof obj ==="function"; } } //此处为超级对象一些扩展 YQ.elems={ each:function(dom,callback){//强大的each if(YQ.tool.isFunction(dom)){ arguments.callee.call(this,this,dom); }else{ for(var i =0, len = dom.length; i < len; i++){ callback.call(dom, i, dom[i]); } } returnthis; }, find:function(selector){ var doms =[]; this.each(function(i,dom){ doms.push(YQ.DOM.find(selector,dom)); }) return superElems(doms); } } YQ.each= window.Array.prototype.each= YQ.elems.each;//扩展Array YQ.extend=function(subClass,baseClass){ for(var i in baseClass){ subClass[i]= baseClass[i]; } return subClass; } YQ.AJAX={} YQ.CSS={ names:{ 'float':'cssFloat',//区分cssFloat or styleFloat opacity:'opacity' //…… } } YQ.browser={ isIE:'', isFirefox:'', version:'3.6' //…… } YQ.event={ names:{ mousewheel:YQ.browser?"DOMMouseScroll":"mousewheel" }, fix:function(e){ if(e && e.clone)return e;//如果已经处理了,直接返回 e = window.event|| e;//event是全局变量 var fixE ={ clone:true, stop:function(){//冒泡 if(e&&e.stopPropagation){ e.stopPropagation(); }else{ e.cancleBubble=true } }, prevent:function(){//默认动作 if(e && e.preventDefault){ e.preventDefault(); }else{ e.returnValue=false; } }, target:e.target|| e.srcElement, x:e.clientX|| e.pageX, Y:e.clientY|| e.pageY, //鼠标滚轮事件统一处理 wheel:e.wheelDelta/120||-e.detail/3 } return fixE; } } YQ.DOM={ find:function(selector,parentDom){ //do something } } })(window,document);
简单的分析
代码中的注释还算详细,结合注释就可以看懂,下面我再啰嗦几句,高手飘过,欢迎拍砖……
总得来看是个匿名函数,定义了全局变量$(似乎都喜欢美元,如果有喜欢的人民币的,下次加上),函数里面有个YQ的对象,有很多function,包括一些私有的。
使用$可以作为选择器,如果为空,则返回YQ.elems对象,选择后的DOM根据YQ.elems进行扩展,最后得到的就是注释里面说的superElems(此处创建superElems方法参考了下jRaiser),跟jQuery的superElems类似,绑定了很多方法,可以方便的进行操作,YQ的方法可以通过YQ.elems扩展到选择器选择的对象上去,而选择器主要的函数getElements,可以使用sizzle,这样就方便了dom操作,不过sizzle似乎也是代码太多,此处将来会支持简单的标签,#ID,.class,标签+class选择器。
另外框架中中对一些Array,string进行了扩展,例如上面的Array.each方法,YQ.elems.each是重量级的函数方法,可以支持superElems的遍历(返回本身),还可以支持简单数组的遍历。
框架中还对一些兼容性进行了处理,例如YQ.event.fix处理事件,css中处理float
基本就这些了,今天就先说核心的部分,其实通过这段代码已经很清晰的了解到这个框架的思想了,后续继续给力的coding,补充扩展……
目前为止,框架不到800行代码,包括了常见的jQuery方法,压缩后不到9k,gzip 4.5K~
写在最后
本想写一系列的文章,可是敲了几个字又不知道说啥,今后学习下司徒正美追求短小精悍的博文~呵呵
源文档 <http://js8.in/677.html>
相关文章推荐
- 写的一个轻量级javascript框架的设计模式
- 写的一个轻量级javascript框架的设计模式
- 自己写的一个轻量级javascript框架的设计模式
- 由一个简单的客户端间TCP/UDP通信程序引发的关于设计模式的思考
- 剑指offer-02:设计一个单例模式的类
- 根据java的设计原则、设计模式实现了一个信息发送和接收的例子
- 一个插排引发的设计思想 (一) 观察者模式
- 一天一个设计模式---桥接模式
- 使用Adapter设计模式打造一个流式布局FlowLayout
- day19字符流的缓冲区。自己MyBufferReader的readLine方法。装饰设计模式。字节流。自定义一个缓冲区模拟BufferedInputStream。读取键盘
- 一个参考Junit的设计模式ppt
- 每天一个设计模式: 桥模式(Bridge)
- 每天一个设计模式: 抽象工厂模式(AbstractFactory)
- Android设计模式之一个例子让你彻底明白工厂模式(Factory Pattern)
- 一天一个设计模式---组合模式
- 我是如何学习设计模式的九:轻松一下,学习一个简单的:单例模式(最简单,但是也是最有用的)
- 极速理解设计模式系列:14.轻量级模式(Flyweight Pattern)
- 一个小功能让我懂得了设计模式的重要性
- [Unity3d]一个优秀的程序必备的几种设计模式
- [ASP.NET 设计模式] 用Visual Studio2010搭建一个简单的分层结构示例Step by Step —— 03 服务层