zoukankan      html  css  js  c++  java
  • 继续封装jQuery框架的模块功能

    在前两天已经封装了框架的选择器模块的函数了,在这里为了保持代码的完整性,以及体现框架模块的功能。这里用一个h5的方法,简单表示选择器模块。

     1 (function(window){ //传入window全局对象,可以减少作用域的访问深度
     2      //1、选择器模块
     3         var select = (function () {
     4             return function (selector, context) {
     5                 if (context) {
     6                     return context.querySelectorAll(selector);
     7                 } else {
     8                     return document.querySelectorAll(selector);
     9                 }
    10             }
    11         }());
    12      //2、框架的入口函数
    13      function itMei(selector,context){
    14     return new itMei.fn.init(selector,context);
    15      }
    16 
    17    var push = Array.prototype.push;  //将数组的push方法存起来
    18 //3、添加原型属性方法
    19 itMei.fn = itMei.prototype={
    20     constructor:itMei,
    21     splice:Array.prototype.splice, //将数组的splice方法保存为当前对象的属性,方便调用
    22     init:function(selector,context){
    23         if(selector == null) return this;
    24         //借用数组的splice方法,清空原来的元素
    25         this.splice.call(this,0,this.length);
    26         if(typeof selector ==="string"){
    27            if(selector.charAt(0)==="<" && selector.charAt(selector.length-1)===">" && selector.length>=3){
    28                  //表示selector是一个带有标签的字符串的情况
    29                  var div = document.createElement("div");
    30                  //div其实就是作为一个中间量,方便将元素以伪数组形式存储到init对象中
    31                  div.innerHTML = selector;
    32                  push.apply(this,div.childNodes);
    33            }else{
    34                  push.apply(this,select(selector,context);
    35            }    
    36         }else if(selector.nodeType){  //selector是一个dom元素的情况
    37             this[0] = selector;
    38             this.length =1;
    39         }
    40         return this;  //返回当前的init对象,实现链式编程
    41     }
    42 };
    43 
    44 //4、在下面改变init函数的原型对象,使的init的实例对象可以访问到incast.fn中的方法
    45 itMei.fn.init.prototype = itMei.fn;
    46 
    47 //5、封装一个extend方法,用于之后扩展方法
    48 //extend方法的主要功能是完成拷贝,将一个对象中的方法、属性拷贝到另一个对象中
    49 itMei.fn.extend = itMei.extend = function(){
    50     var target;  //目标对象
    51     var sources =[];  //源对象
    52     if(arguments.length===1){
    53         target =this;
    54         sources.push(arguments[0]);
    55     }else{
    56         target = arguments[0];
    57         sources.push.apply(sources,arguments);
    58         sources.splice(0,1);  //去除第一个元素,因为第一个元素是目标对象
    59     }
    60     for(var i=0;i<sources.length;i++){
    61         var source = sources[i];
    62         for(var key in source){
    63             target[key]=source[key];
    64         }
    65     }
    66     return target;  //返回的是拷贝之后的目标对象
    67 }
    68 })(window)

    哎呀!十二点了,今天就写到这吧。

  • 相关阅读:
    纯CSS星级评价
    Enterprise Library启用签名后发生 PublicKeyToken错误,HRESULT:0x80131040解决
    SQL Server
    该如何选择国外VPS
    网站的伪静态化
    kernel FIELD_SIZEOF宏 NULL地址不访问不出错
    Activity的四种加载模式
    Git magic 简短git使用命令集
    为什么包含多句代码的宏要用do while包括起来?
    使用lsof来查看FD和进程的关系
  • 原文地址:https://www.cnblogs.com/amaya-mei/p/6060466.html
Copyright © 2011-2022 走看看