Javascript语义分析器,教你如何实现Jquery库

1.实现自定义标签类：

在html中实现一个<test></test>标签：

1.前提：使用数组自定义标签类：test

var d = document; 
var mk = new Array( 
'<test>','<span style="color:red;">', 
'</test>', 
);         

2.使用正则表达式读取标签数组:

var test=new RegExp(mk[i], 'gi');

3.将test映射到html中，即可：

 var t = new String(document.body.innerHTML); 
for(i=0;i<mk.length;i+=2) 

                t = t.replace(new RegExp(mk[i], 'gi'),mk[i+1]); 

d.body.innerHTML = t; 
}

} 

2.实现自定义onclick事件类：

/**

  * @description 包含事件监听、移除和模拟事件触发的事件机制，支持链式调用

  * @author Kayo Lee(kayosite.com)

  * @create 2014-07-24

  *

  */

 

( function ( window, undefined ){

 

var Ev = window.Ev = window.$ = function (element){

 

     return new Ev.fn.init(element);

};

 

// Ev 对象构建

 

Ev.fn = Ev.prototype = {

 

     init: function (element){

 

         this .element = (element && element.nodeType == 1)? element: document;

     },

 

     /**

      * 添加事件监听

      *

      * @param {String} type 监听的事件类型

      * @param {Function} callback 回调函数

      */

 

     add: function (type, callback){

 

         var _that = this ;

         

         if (_that.element.addEventListener){

             

             /**

              * @supported For Modern Browers and IE9+

              */

             

             _that.element.addEventListener(type, callback, false );

             

         } else if (_that.element.attachEvent){

             

             /**

              * @supported For IE5+

              */

 

             // 自定义事件处理

             if ( type.indexOf( 'custom' ) != -1 ){

 

                 if ( isNaN( _that.element[type] ) ){

 

                     _that.element[type] = 0;

 

                 }

 

                 var fnEv = function (event){

 

                     event = event ? event : window.event

                     

                     if ( event.propertyName == type ){

                         callback.call(_that.element);

                     }

                 };

 

                 _that.element.attachEvent( 'onpropertychange' , fnEv);

 

                 // 在元素上存储绑定的 propertychange 的回调，方便移除事件绑定

                 if ( !_that.element[ 'callback' + callback] ){

         

                     _that.element[ 'callback' + callback] = fnEv;

 

                 }

       

             // 标准事件处理

             } else {

       

                 _that.element.attachEvent( 'on' + type, callback);

             }

             

         } else {

             

             /**

              * @supported For Others

              */

             

             _that.element[ 'on' + type] = callback;

 

         }

 

         return _that;

     },

 

     /**

      * 移除事件监听

      *

      * @param {String} type 监听的事件类型

      * @param {Function} callback 回调函数

      */

     

     remove: function (type, callback){

 

         var _that = this ;

         

         if (_that.element.removeEventListener){

             

             /**

              * @supported For Modern Browers and IE9+

              */

             

             _that.element.removeEventListener(type, callback, false );

             

         } else if (_that.element.detachEvent){

             

             /**

              * @supported For IE5+

              */

             

             // 自定义事件处理

             if ( type.indexOf( 'custom' ) != -1 ){

 

                 // 移除对相应的自定义属性的监听

                 _that.element.detachEvent( 'onpropertychange' , _that.element[ 'callback' + callback]);

 

                 // 删除储存在 DOM 上的自定义事件的回调

                 _that.element[ 'callback' + callback] = null ;

           

             // 标准事件的处理

             } else {

           

                 _that.element.detachEvent( 'on' + type, callback);

           

             }

 

         } else {

             

             /**

              * @supported For Others

              */

             

             _that.element[ 'on' + type] = null ;

             

         }

 

         return _that;

 

     },

     

     /**

      * 模拟触发事件

      * @param {String} type 模拟触发事件的事件类型

      * @return {Object} 返回当前的 Kjs 对象

      */

     

     trigger: function (type){

 

         var _that = this ;

         

         try {

                 // 现代浏览器

             if (_that.element.dispatchEvent){

                 // 创建事件

                 var evt = document.createEvent( 'Event' );

                 // 定义事件的类型

                 evt.initEvent(type, true , true );

                 // 触发事件

                 _that.element.dispatchEvent(evt);

             // IE

             } else if (_that.element.fireEvent){

                 

                 if ( type.indexOf( 'custom' ) != -1 ){

 

                     _that.element[type]++;

 

                 } else {

 

                     _that.element.fireEvent( 'on' + type);

                 }

       

             }

 

         } catch (e){

 

         };

 

         return _that;

             

     }

}

 

Ev.fn.init.prototype = Ev.fn;

 

})( window );

3.自定义标签参数：

<input type="text" id="tt" name="mm" value="" outerAttribute="fdfdfdfdf" />

这里的outerAttribute属性是我们自定义的，在javaScript中如何引用这个值呢？可以使用

 注:outerAttribute可以是其他的自定义的属性名称

document.getElementByIdx_x_x("tt").outerAttribute
上面的代码只在IE下有效。要想兼容Firefox则需要使用下面的代码

document.getElementByIdx_x_x("tt").getAttribute("outerAttribute")
一般情况下，自定义属性主要是为了存储一些和当前标签相关联的一些重要的值，在web页面设计中可以考虑。