自分で書いた軽量級javascriptフレームワークの設計モード

      
jQuery
  ，          jQuery        ，                  。  js     ，     js      ，
javascript
   PHP          ，  
javascript
          ，        、    、  ……，           ，  jQuery          。             

自分で書いたフレームも名前が分からず、書き始めたばかりの頃にW(姓ピンイン、前にjQueryポップアッププラグインwBoxと書いたことがあります)を手当たり次第に書きましたが、今この文章を書いて考え直してYQ(名前ピンイン、わかります~)に変えました.
コアコード
フレームワークの設計時にできるだけチェーン式の書き方をサポートして、つまりthisを返して、$(selector)できます.handler1().handler 2()・・・無限書きで、戻り値があるものでなければ続けられます.event,dom,css,そしてfadeIn,fadeOutアニメーション(愛壁[html 5+css 3]版を再構築したため、すべてのついでにこの機能を加えた).sizzleセレクタを合わせるともっとすごい!
以下、フレームワークのコアコードについて説明します.完備したら、新版html 5の愛壁と一緒に放出します.主なコードは以下の通りです.

(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]);
				}
			}
			return this;
		},
		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を拡張するものもある.eachメソッド、YQ.elems.eachは重量級の関数法であり,superElemsの遍歴(自身を返す)をサポートしたり,単純な配列の遍歴をサポートしたりすることができる.
フレームワークでは、YQなどの互換性も処理する.event.fix処理イベント、cssでfloatを処理
基本的にはこれだけですが、今日はコアの部分についてお話ししますが、実はこのコードでこのフレームワークの思想がはっきりと理解できました.その後、力を与えるcodingを続け、拡張を補充します.これまでフレームワークは800行未満で、よく見られるjQueryメソッドが含まれていました.圧縮後9 k未満、gzip 4.5 K~
詳細:
http://www.gwdang.com/app/extension
http://www.gwdang.com