让我们看一下miniQuery
(function ?() { ???var _$ = window.$; ???var _jQuery = window.jQuery; ???//暴露外部使用的一个接口 ???var jQuery = window.jQuery = window.$ = function(selector){ ???????return new jQuery.fn.init(selector); ???};//处理原型对象 ???jQuery.fn = jQuery.prototype = { ???????init:function(selector){ ???????????var elements = document.querySelectorAll(selector); ???????????Array.prototype.push.apply(this,elements); ???????????return this; ???????????}, ???????jQuery:"1.0.0", ???????length:0, ???????size:function(){ ???????????return this.length; ???????} ???}; ???jQuery.fn.init.prototype = jQuery.fn;//实现继承,并且只处理只有一个参数，也就是插件的扩展 ???jQuery.extend = jQuery.fn.extend = function(){ ???????var o = arguments[0]; ???????for(var p in o){ ???????????this[p] = o[p]; ???????} ???};//添加静态方法 ???jQuery.extend({ ???????trim:function(text){ ???????????return (text||"").replace(/^\s+|\s+$/g,""); ???????}, ???????noConflict:function(){ ???????????window.$ = _$; ???????????window.jQuery = _jQuery; ???????????return jQuery; ???????} ???});//添加实例方法 ???jQuery.fn.extend({ ???????get:function(num){ ???????????return this[num]; ???????}, ???????each:function(fn){ ???????????for(var i = 0 ;i< this.length; i++){ ???????????????fn(i,this[i]); ???????????} ???????????return this; ???????}, ???????css:function(){ ???????????var l = arguments.length; ???????????if(l == 1){ ???????????????return this[0].style[arguments[0]]; ???????????} else { ???????????????var name = arguments[0]; ???????????????var value = arguments[1]; ???????????????this.each(function(index,ele) { ???????????????????ele.style[name] = value; ???????????????}); ???????????} ???????????return this; ???????} ???});})();初步理解：写个myjs
(function(){ ???????var jQuery ?= function(selector){ ???????//return this; ????????//return new jQuery(); ???????//this.eles = [];/// ???????return jQuery.prototype.init(selector); ???????????}; ???jQuery.fn = jQuery.prototype = { ???????version:"1.0", ???????init:function(selector){ ???????????????var elements = document.querySelectorAll(selector); ???????????????Array.prototype.push.apply(this,elements); ???????????????return this; ???????????}, ???????????} ???????jQuery.extend = jQuery.fn.extend ?=function(){ ???????????????var o = arguments[0]; ???????for(var p in o){ ???????????this[p] = o[p]; ???????} ???} ???????jQuery.extend({ ???????ajax:function(){}, ???????get:function(){}, ???????????}); ???????jQuery.fn.extend({ ???????css:function(){}, ???????????}); ???window.$ = jQuery; ???})();jsoop封装
<html><body> ???<script> ???????//java.utils.ArrayList() ???????????????//包（命名空间） ???????/* ???????var java = {}; ???????java.utils = {}; ???????java.utils.ArrayList = "asdfafsd"; ???????????????????????java.utils.ArrayList; ???????*/ ???????????????????????// ???????( ???????function(){ ???????????var a = 5; ???????????var b = 100; ???????????window.c = 200;//把c暴露出去 ???????????d = 300;//这行代码也可以做到公布 ???????} ???????)(); ???????//console.log(c); ???????????????var result = (function(m,n){ ???????????????return m + n;})(10,20); ???????//console.log(result); ???????????????function Person(){ ???????????var age = 1; ???????????this.getAge = function(){ ???????????????return age ; ???????????} ???????????????????????this.setAge = function(val){ ??????????????????age = val; ???????????} ???????????????????????} ???????var p = new Person(); ???????p.setAge(20); ???????console.log(p.getAge()); ???????????????????????//Closure 闭包 ???????????????????</script></body></html>jsoop封闭包
<html><body> ???<script> ???????????//如何写会产生闭包 ???????function P(){ ???????var a = 5; ???????var b = 6; ???????return function C(){ ???????????console.log(100); ???????} ???????????} ???????var result = P(); ???result(); ???????//闭包是什么？ ???????//闭包是个对象，这个对象里面包含一个函数 ???????//以及被此函数捕获的东西（一般是变量） ???????????//闭怎么理解 ???</script></body></html>通过理解，我们可以加深写个jquery
命名为：cj.js
(function(){ ???????????var cj = window.$$ = function(selector){ ???????????????return new cj.fn.init(selector); ???} ???????cj.fn = cj.prototype = { ???????init:function(selector){ ???????????var elements = document.querySelectorAll(selector); ???????????Array.prototype.push.apply(this,elements); ???????????return this; ???????}, ???????????????version:"1.0" ???} ???????cj.fn.init.prototype = cj.fn; ???????cj.extend = cj.fn.extend = function(o){ ???????for(var p in o){ ???????????this[p] = o[p]; ???????} ???????????}; ???????//样式的处理 ???cj.fn.extend({ ???????css:function(propname,propvalue){ ???????????//this[0]得到的是dom对象 ???????????this[0].style[propname] = propvalue; ???????????return this; ???????} ???????????}); ???????//事件的处理 ???cj.fn.extend({ ???????on:function(eventName,callback){ ???????????this[0][eventName] = callback; ???????????????????} ???????????}); ???})();cjtest.html
<html><body> ???<p>111</p> ???<p>222</p> ???????<script src = "cj.js"></script> ???<script src = "cjplugin.js"></script> ???<script> ???????????</script></body></html>
cjplugn.js
(function(){ ???????$$.fn.extend({ ???????size:function(){ ???????????????????????return this.length; ???????} ???????????}); ???????????$$.extend({ ???????trim:function(val){ ???????????????????????return val.replace(/^\s+|\s+$/g,""); ???????????????} ???});})();学会做个jQuery
原文地址：http://www.cnblogs.com/huangwl3/p/7898872.html