<!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>
// 1 简单的函数链式调用
function Dog(){
this.run = function(){
alert(‘dog is run...‘);
return this ;
};
this.eat = function(){
alert(‘dog is eat...‘);
return this ;
};
this.sleep = function(){
alert(‘dog is sleep...‘);
return this ;
}
}
var d1 = new Dog();
d1.run().eat().sleep();
d1.eat();
d1.sleep();
</script>
</head>
</html>
<!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>
// 程序启动的时候 里面的代码直接执行了，var的外部都不能访问，什么都不加的通过window访问，this通过相应对象访问。
(function(window , undefined){//函数形参
// $ 最常用的对象 返回给外界, 大型程序开发 一般使用‘_‘作为私用的对象(规范)
function _$(arguments){
//id选择器
var idselector = /#\w+/ ;
this.dom ;//实例属性，arguments[0] = ‘#inp‘
if(idselector.test(arguments[0])){//正则表达式.test（string）
this.dom = document.getElementById(arguments[0].substring(1));
} else {
throw new Error(‘ arguments is error !‘);
}
};
// 在Function类上扩展一个可以实现链式编程的方法，函数_$也可以用method这个方法
Function.prototype.method = function(methodName , fn){
this.prototype[methodName] = fn ;
return this ; //_$.method，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.$ = _$ ;//函数名表示函数地址
_$.onReady = function(fn){ // 给函数（类）加静态方法,只能通过函数名（类名）访问。onReady是这个匿名函数的名字，fn是函数的参数。
window.$ = function(){//$("#div")返回jquery对象
return new _$(arguments);//有参构造函数，
};
fn();
// 3 实现链式编程
_$.method(‘addEvent‘,function(){
//
}).method(‘setStyle‘,function(){
//
});
};
})(window); // 函数立即执行，传入实参window，
$.onReady( function(){
var inp = $(‘#inp‘);
alert(inp.dom.nodeName);
alert($(‘#inp‘));
inp.addEvent(‘click‘,function(){
alert(‘我被点击了!‘);
}).setStyle(‘backgroundColor‘ , ‘red‘);
});
</script>
</body>
</html>
时间： 2024-10-03 05:09:58