标签：arguments each ++ 16px fun 1.0 array for color
让我们看一下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,""); } }); })();
标签：arguments each ++ 16px fun 1.0 array for color
原文地址：http://www.cnblogs.com/huangwl3/p/7898872.html
