zoukankan      html  css  js  c++  java
  • 如何实现一个jQuery的框架格式?

    以前一直好奇和膜拜jQuery这样强大的类库它到底是怎样实现的。能让js变得如此方便快捷。

    趁着最近在看《javascript框架设计》也十分想实现一个自己的移动端库,以便于项目运用。于是开始琢磨起了jQuery。

    首先亮杀器!

    首先我们用一个闭包的方式,将我们的代码封闭起来避免过多的全局变量注入。然后在最后将我们的构造函数挂载到window.x暴露出去即可。

    如果你看过jQuery源码的话,应该对它的无new创建对象模式非常的熟悉。

    它的奇妙之处也就在于,kodo构造函数每次被调用的时候都会return 了一个新的对象。

    而这个对象其实就是kodo构造函数原型链上的init方法,为了让init这个对象,也要拥有kodo上的方法以便链式调用。

    所以我们在最后必须让 kodo.prototype.init的prototype 指向 kodo的prototype。

    也就是 kodo.prototype.init.prototype = kodo.prototype  这句代码的作用。接着我们就只需要在kodo构造函数的原型链上挂载各种方法和属性即可。

    然后避免我们的kodo构造函数原型链指向错误,我们要手动将constructor重新指向kodo。

    这基本就是一个大体的框架格式构建。接着我们来观察一下jQuery选择元素之后会有什么样的反馈,了解了后我们才知道$(‘xx’)是如何运作起来的。

    其实通过log我们可以发现,通过选择dom之后会返回一个类数组对象,而正是因为拥有这个类数组对象才能让被选择的jqdom对象能链式调用jq上的方法。

    那这就有个问题如何构造这个类数组对象呢?

    很简单我们只需要在我们的原型上增加2个对象即可

    length的作用就是为了可以循环jqdom对象然后对dom进行一些操作,这个length的设置就是选择了dom的数量。接着让我们完善一下init方法和color来测试测试。

    增加这些代码之后,我们先来看看选择器是否正常运作。

    嗯,看上去还挺不错,一切正常。直接k(‘li’).color(‘red’)也是可以直接调用的。到此为止我们的整体框架结构就算是搭建好了。

    接着又有一个问题那$.ajax 这样的方法又是如何挂载上去调用的呢?仔细想想可以知道,其实我们的构造函数也是一个对象。所以!我们可以直接这样

    同样在控制台只需要k.ajax()即可调用。到这里算是把jq所有的疑惑都解开了。噢吼吼吼

    最后给出完整的demo代码。

    have a nice day

     

    >>>>>原文地址<<<<<

  • 相关阅读:
    1293E. Xenon's Attack on the Gangs (树形DP)
    二分check的妙用
    Educational Codeforces Round 80 (CF
    CodeForces Goodbye2019 E.Divide Points (构造)
    POJ 1061 (拓展欧几里得+求最小正整数解)
    1238D
    关于Mysql用户的相关操作
    JAVA类的符号引用的理解
    关于tomcat的路径等基础问题
    Java 方法中,参数的装配顺序
  • 原文地址:https://www.cnblogs.com/kodo/p/4873841.html
Copyright © 2011-2022 走看看