zoukankan      html  css  js  c++  java
  • jQuery 原理的模拟代码 1 核心部分

    最近又看了一下 jQuery 1.4.2, 为了便于理解,将 jQuery 的核心使用比较简单的代码模拟一下。方便学习。

    核心部分实现了两种选择器,使用 id 和标记名,还可以提供 css 的设置,以及 text 的设置。

      1 // # 表示在 jQuery 1.4.2 中对应的行数
      2 
      3 // 定义变量 undefined 方便使用
      4 var undefined = undefined;
      5 
      6 // jQuery 是一个函数,其实调用 jQuery.fn.init 创建对象
      7 var $ = jQuery = window.$ = window.jQuery               // #19
      8             = function (selector, context) {
      9                 return new jQuery.fn.init(selector, context);
     10             },
     11 
     12 // 定义 toString 变量引用 Object 原型的 toString
     13 toString = Object.prototype.toString,
     14 
     15 // 用来检查是否是一个 id
     16 idExpr = /^#([\w-]+)$/;
     17 
     18 // 设置 jQuery 的原型对象, 用于所有 jQuery 对象共享
     19 jQuery.fn = jQuery.prototype = {                        // #74
     20 
     21     length: 0,                                          // #190
     22 
     23     jquery: "1.4.2",                                    // # 187
     24 
     25     // 这是一个示例,仅仅提供两种选择方式:id 和标记名
     26     init: function (selector, context) {                // #75
     27 
     28         // Handle HTML strings
     29         if (typeof selector === "string") {
     30             // Are we dealing with HTML string or an ID?
     31             match = idExpr.exec(selector);
     32 
     33             // Verify a match, and that no context was specified for #id
     34             if (match && match[1]) {
     35                 var elem = document.getElementById(match[1]);
     36                 if (elem) {
     37                     this.length = 1;
     38                     this[0= elem;
     39                 }
     40             }
     41             else {
     42                 // 直接使用标记名
     43                 var nodes = document.getElementsByTagName(selector);
     44                 for (var l = nodes.length, j = 0; j < l; j++) {
     45                     this[j] = nodes[j];
     46                 }
     47                 this.length = nodes.length;
     48             }
     49 
     50             this.context = document;
     51             this.selector = selector;
     52 
     53             return this;
     54         }
     55     },
     56 
     57     // 代表的 DOM 对象的个数
     58     size: function () {                                 // #193
     59         return this.length;
     60     },
     61 
     62     // 用来设置 css 样式
     63     css: function (name, value) {                       // #4564
     64         this.each(
     65                     function (name, value) {
     66                         this.style[name] = value;
     67                     },
     68                     arguments       // 实际的参数以数组的形式传递
     69                     );
     70         return this;
     71     },
     72 
     73     // 用来设置文本内容
     74     text: function (val) {                              // #3995
     75         if (val) {
     76             this.each(function () {
     77                 this.innerHTML = val;
     78             },
     79                     arguments       // 实际的参数以数组的形式传递
     80                     )
     81         }
     82         return this;
     83     },
     84 
     85     // 用来对所有的 DOM 对象进行操作
     86     // callback 自定义的回调函数
     87     // args 自定义的参数
     88     each: function (callback, args) {                   // #244
     89         return jQuery.each(this, callback, args);
     90     }
     91 
     92 }
     93 
     94 // init 函数的原型也就是 jQuery 的原型
     95 jQuery.fn.init.prototype = jQuery.prototype;            // #303
     96 
     97 // 用来遍历 jQuery 对象中包含的元素
     98 jQuery.each = function (object, callback, args) {       // #550
     99 
    100     var i = 0, length = object.length;
    101 
    102     // 没有提供参数
    103     if (args === undefined) {
    104 
    105         for (var value = object[0];
    106                     i < length && callback.call(value, i, value) !== false;
    107                      value = object[++i])
    108         { }
    109     }
    110 
    111     else {
    112         for (; i < length; ) {
    113             if (callback.apply(object[i++], args) === false) {
    114                 break;
    115             }
    116         }
    117     }
    118 }
    119 

    在 jQuery 中, jQuery 对象实际上是一个仿数组的对象,代表通过选择器得到的所有 DOM 对象的集合,它像数组一样有 length 属性,表示代表的 DOM 对象的个数,还可以通过下标进行遍历。

    95 行的 jQuery.each 是 jQuery 中用来遍历这个仿数组,对其中的每个元素进行遍历处理的基本方法,callback 表示处理这个 DOM 对象的函数。通常情况下,我们并不使用这个方法,而是使用 jQuery 对象的 each 方法进行遍历。jQuery 对象的 css 和 text 方法在内部实际上使用 jQuery 对象的 each 方法对所选择的元素进行处理。

    这些函数及对象的关系见:jQuery 原型关系图

    下面的脚本使用这个脚本库。

    1  // 原型操作
    2  $("h1").text("Hello, world.").css("color""green");
    3 

      jQuery 原理的模拟代码 -0 目录

  • 相关阅读:
    chrome中打开 swf下载的问题
    爱对人比爱上人更重要
    ActiveMQ集群
    ActiveMQ相关API
    ActiveMQ持久化
    ActiveMQ处理模式
    ActiveMQ
    JMS与消息队列
    微服务设计、拆分原则
    web常用服务架构
  • 原文地址:https://www.cnblogs.com/haogj/p/1789712.html
Copyright © 2011-2022 走看看