JavaScript 部件

 

// 部件( Parts)这个词 和 下面的代码是书中拿来的 // // JavaScript 有两种方式实现面向对象的特性( 封装，继承)，一种是基于 prototype 的； // 另一种是和 Java 面向对象产不多的，基于类的。 // // JavaScript 产生对象有以下几种方法： // 1, {} var obj = { name: 'myhere', getName: function(){ return this.name } }; obj.age = 23; // 2, 调用 函数产生 对象 var func = function( obj){ var pri = {}; // 实现私有成员 obj = obj || {}; obj.name = 'myhere'; obj.getName = function(){ return this.name; }; obj.age = 23; return obj; } var o = func() // 3, new Constructor() function Obj(){ this.name = 'myhere'; this.getName = function(){ return this.name; }; this.age = 23; } var o = new Obj(); // 4, 继承产生对象 function P(){ this.name = 'myhere'; this.getName = function(){ return this.name; } } function O(){ this.age = 23; } O.prototype = new P(); // 修改 类 的原型，并非修改对象的 var o = new O(); // // // 部件 var $ = function( obj){ var pri = { // 实现私有属性 register:{} } obj = obj || {}; // 函数的形参是局部变量，和定义在函数体中的变量相同；赋值运算结合性：从右向左 obj.red = function(){ this.style.backgroundColor = 'red'; return this; // 返回 this，实现 cascade } obj.fire = function( event){ // 出发注册的事件 var type, handlers, func, parameters; i; type = ( typeof event === 'string' ? event : event.type); if( pri.register.hasOwnProperty( type) ){ handlers = pri.register[ type]; for( i = 0; i < handlers.length; i++){ func = handlers[ i].method; parameters = handlers[ i].parameters || event; func.apply( this, parameters); } } return this; } obj.on = function( type, method, parameters){ // 注册事件 var handler = { method: method, parameters: parameters }; if( pri.register.hasOwnProperty( type) ){ pri.register[ type].push( handler); }else{ pri.register[ type] = [ handler]; } return this; } } // JQuery 库的原理应该和这个差不多。:)：）:)  

 

<html> <head><title>JavaScript Parts</title></head> <body> <mce:style><!-- #test{ height: 200px; width:200px; border:solid 1px yellow } --></mce:style><style mce_bogus="1">#test{ height: 200px; width:200px; border:solid 1px yellow }</style> <div id="test"></div> <mce:script type="text/javascript"><!-- $( document.getElementById( 'test') ). red(). on( 'eventA', function(){ document.write( 'register event A' + '<br />') }). on( 'eventB', function(){ document.write( 'register event B' + '<br />') }). fire( 'eventB'). fire( 'eventA'); // --></mce:script> </body> </html>