天天看點

JavaScript類的寫法 ( 仿jQuery )

看了        javascript 雜談之哪種寫法你更喜歡?               後很是有收獲,是以總結一下:      

1.js支援“邏輯短路”,所謂邏輯短路是指:

  1. 在”||” 運算中,第一個條件符合就結束判斷。
  2. 在”&&”運算中,第一個條件不符合就結束判斷。

2.匿名函數

(      
function
() {
    })();      
這種寫法作用是聲明并執行一個方法,等同于:
Test() {
    }
    Test();      

3.連續指派

var a = {n:1};    

var b = a;

a.x = a = {n:2};  //相當于a.x=(a={n:2})

console.log("a.x: " + a.x); //傳回值:a.x: undefined

console.log("a.n: " + a.n); //傳回值:a.n: 2

console.log("b.x: " + b.x); //傳回值:b.x: [object Object]

console.log("b.n: " + b.n); //傳回值:b.n: 1

說明:由于js中的連續指派是按引用傳遞的,是以在a.x=a={n:2}後,兩個a已經不是一個對象了,是以現在的a中并沒x這個屬性

4.下邊這段代碼類似與jquery中的寫法

(function (windows) {
	var yQuery = function () {
		//擷取對象本身
		return yQuery.fn.init();
	};
	yQuery.fn = yQuery.prototype = {
		//初始化
		inti: function () {
			return this;
		}
	};
	//這裡定義擴充方法
	yQuery.extend = yQuery.fn.extend = function () {
		var options, src, copy,
            target = arguments[0] || {},
            i = 1,
            length = arguments.length;
		if (length === i) {
			//this=yQuery=$
			target = this;
			--i;
		}

		for (; i < length; i++) {
			if ((options = arguments[i]) != null) {
				for (var name in options) {
					src = target[name];
					copy = options[name];
					//判斷this中是否存在,存在則跳過,執行下一次循環
					if (src === copy) {
						continue;
					}
					//判斷是不是對象,如果是對象則遞歸
					if (typeof copy === "object") {
						yQuery.extend(name, copy);
					}
					if (copy !== undefined) {
						//這裡的target=yQuery=$
						target[name] = copy;
					}
				}
			}
		}
		return target;
	};
	//向window中添加yQuery和$屬性
	windows.yQuery = windows.$ = yQuery;
})(window);      
使用:      

方法一:

$.extend({Name:””,getName:function(){alert($.Name)}});

方法二:

$.ui=$.ui || {}; //如果$.ui存在則把自己指派給自己,反之添加ui并指派為空對象{}

$.extend($.ui,{Name:””,getName:function(){alert($.Name)}});

繼續閱讀