您的位置：首页 > Web前端 > JQuery

解析jQuery的链式编程

2015-10-24 20:34 597 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<script type=text/javascript charset=utf-8 src="../commons/jquery.js" ></script>

</head>

<body>

<input id="inp" type="button" value="点击我" />

<script type=text/javascript charset=utf-8>

// 模拟jquery底层链式编程

/*

// 块级作用域

//特点1 程序启动的时候里面的代码直接执行了

//alert('我执行了');

//特点2 内部的成员变量外部无法去访问（除了不加var修饰的变量）

//a = 10 ;

(function(window , undefined){

// $ 最常用的对象返回给外界大型程序开发一般使用'_'作为私用的对象(规范)

function _$(arguments){

//实现代码...

// 正则表达式匹配id选择器

var idselector = /#\w+/ ;

this.dom ; // 此属性接受所得到的元素

// 如果匹配成功则接受dom元素 arguments[0] = '#inp'

if(idselector.test(arguments[0])){

this.dom = document.getElementById(arguments[0].substring(1));

} else {

throw new Error(' arguments is error !');

}

};

// 在Function类上扩展一个可以实现链式编程的方法

Function.prototype.method = function(methodName , fn){

this.prototype[methodName] = fn ;

return this ; //链式编程的关键

}

// 在_$的原型对象上加一些公共的方法

_$.prototype = {

constructor : _$ ,

addEvent:function(type,fn){

// 给你的得到的元素注册事件

if(window.addEventListener){// FF

this.dom.addEventListener(type , fn);

} else if (window.attachEvent){// IE

this.dom.attachEvent('on'+type , fn);

}

return this ;

},

setStyle:function(prop , val){

this.dom.style[prop] = val ;

return this ;

}

};

// window 上先注册一个全局变量与外界产生关系

window.$ = _$ ;

// 写一个准备的方法

_$.onReady = function(fn){

// 1 实例化出来_$对象真正的注册到window上

window.$ = function(){

return new _$(arguments);

};

// 2 执行传入进来的代码

fn();

// 3 实现链式编程

_$.method('addEvent',function(){

// nothing to do

}).method('setStyle',function(){

// nothing to do

});

};

})(window); // 程序的入口 window传入作用域中

*/

$.onReady(function(){

var inp = $('#inp');

//alert(inp.dom.nodeName);

//alert($('#inp'));

inp.addEvent('click',function(){

alert('我被点击了!');

}).setStyle('backgroundColor' , 'red');

});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航