封装jQuery心得

分享一下学习封装jQuery的感受，当然我们封装肯定没有官网的好，工作中运用还是以官网的为准。虽然jQuery官网有封装好的方法，但是学习封装的方法可以加强我们对其的理解。废话不多说，下面进入正题。
jq整体其实是一个匿名函数自执行，在网页加载时就已经执行。jQuery将jQuery.prototype赋值给jQuery.prototype.init的prototype作为中转站，最终return出了一个jQuery实例。将上述代码写在一个自执行函数内（形成私有作用域，避免命名空间污染），就构成了jQuery的核心框架。

jq其实就是，一种匿名函数自执行

function jQuery(selector) {
		//返回new 一个初始化函数
		return new jQuery.fn.init(selector);
	}

定义jQuery构造函数的显示原型

jQuery.fn = jQuery.prototype = {
		constructor: jQuery,
		jquery: "9.0.0",
		length: 0,
		get(index) {
			return this[index];
		},

初始化写好的函数

	jQuery.fn.init = function(selector) {
		if (typeof selector === "function") {
			if (isReady) {
				selector();
			} else {
				readyList.push(selector)
			}
		} else {
			//获取到选择列表
			var list = document.querySelectorAll(selector);
			//当前对象的长度
			this.length = list.length;
			for (var i = 0; i < list.length; i++) {
				//遍历类别对 this赋值
				this[i] = list[i];
			}
		}
	}

如何让new/init 产生对象拥有jQuery.显示原型上的所有方法呢?

jQuery.fn.init.prototype = jQuery.fn;
//全局对jQuery与$都可以访问
window.$ = window.jQuery = jQuery;

最后我们以jQuery中的extend方法为例

 S.extend = S.fn.extend = function() {
		var e, t, n, r, i, o, a = arguments[0] || {},
			s = 1,
			u = arguments.length,
			l = !1;
		for ("boolean" == typeof a && (l = a, a = arguments[s] || {}, s++), "object" == typeof a || m(a) || (
			a = {}), s === u && (a = this, s--); s < u; s++)
			if (null != (e = arguments[s]))
				for (t in e) r = e[t], "__proto__" !== t && a !== r && (l && r && (S.isPlainObject(r) || (i =
					Array.isArray(r))) ? (n = a[t], o = i && !Array.isArray(n) ? [] : i || S
					.isPlainObject(n) ? n : {}, i = !1, a[t] = S.extend(l, o, r)) : void 0 !== r && (a[
					t] = r));
		return a
	},

S.extend({
		expando: "jQuery" + (f + Math.random()).replace(/\D/g, ""),
		isReady: !0,
		error: function(e) {
			throw new Error(e)
		},
		noop: function() {},
		isPlainObject: function(e) {
			var t, n;
			return !(!e || "[object Object]" !== o.call(e)) && (!(t = r(e)) || "function" == typeof(n =
				y.call(t, "constructor") && t.constructor) && a.call(n) === l)
		},
		isEmptyObject: function(e) {
			var t;
			for (t in e) return !1;
			return !0
		},
		globalEval: function(e, t, n) {
			b(e, {
				nonce: t && t.nonce
			}, n)
		},
		each: function(e, t) {
			var n, r = 0;
			if (p(e)) {
				for (n = e.length; r < n; r++)
					if (!1 === t.call(e[r], r, e[r])) break
			} else
				for (r in e)
					if (!1 === t.call(e[r], r, e[r])) break;
			return e
		},
		makeArray: function(e, t) {
			var n = t || [];
			return null != e && (p(Object(e)) ? S.merge(n, "string" == typeof e ? [e] : e) : u.call(n,
				e)), n
		},
		inArray: function(e, t, n) {
			return null == t ? -1 : i.call(t, e, n)
		},
		merge: function(e, t) {
			for (var n = +t.length, r = 0, i = e.length; r < n; r++) e[i++] = t[r];
			return e.length = i, e
		},
		grep: function(e, t, n) {
			for (var r = [], i = 0, o = e.length, a = !n; i < o; i++) !t(e[i], i) !== a && r.push(e[i]);
			return r
		},
		map: function(e, t, n) {
			var r, i, o = 0,
				a = [];
			if (p(e))
				for (r = e.length; o < r; o++) null != (i = t(e[o], o, n)) && a.push(i);
			else
				for (o in e) null != (i = t(e[o], o, n)) && a.push(i);
			return g(a)
		},
		guid: 1,
		support: v
	})