zlcjc

原型

本章将结合 jQueryzepto 源码来讲解原型的实际应用。通过 源码来分析 jQuery 和 zepto 是如何使用原型的,以及通过它们的 插件机制,讲解 原型的扩展性

《前端 JS面试技巧》请参考我之前的博客: 前端JS基础面试技巧

关于原型

  • 《前端 JS面试技巧》已经讲解过原型的 基础知识
  • 高级面试题,光会原型基础还不够,还要实际应用
  • zepto jquery 中如何用原型
  • 顺便也算是解读了 zepto 和 jquery 的部分源码

题目

  • 说一个原型的实际应用
  • 原型如何体现它的扩展性

原型的实际应用

原型的实际应用

知识点

  • jquery 和 zepto 的简单使用
  • zepto 如何使用原型
  • jquery 如何使用原型

简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>jquery test 1</p>
<p>jquery test 2</p>
<p>jquery test 3</p>

<div id="div1">
    <p>jquery test in dev</p>
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    var $p = $('p')
    $p.css('font-size', '40px') //css 是原型方法
    alert($p.html())             //html 是原型方法

    var $div1 = $('#div1')      //css 是原型方法
    $div1.css('color', 'blue')  //html 是原型方法
    alert($div1.html())
</script>
</body>
</html>

zepto 如何使用原型

源码中,这里的处理情况比较复杂。但因为本次只针对原型,因此这里就弱化了

(function (window) {
    //空对象
    var zepto = {}

    zepto.init = function (selector) {
        //源码中,这里的处理情况比较复杂。但因为本次只针对原型,因此这里就弱化了
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))
        return zepto.Z(dom, selector)
    }

    // 即使用 zepto 时候的 $
    var $ = function (selector) {
        return zepto.init(selector)
    }

    // 这就是构造函数
    function Z(dom, selector) {
        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) this[i] = dom[i]
        this.length = len
        this.selector = selector
    }

    zepto.Z = function (dom, selector) {
        // 注意,出现了 new 关键字
        return new Z(dom, selector)
    }

    $.fn = {
        constructor: zepto.Z,
        css: function (key, value) {

        },
        html: function (value) {

        }
    }

    zepto.Z.prototype = Z.prototype = $.fn

    window.$ = $
})(window)



jquery 如何使用原型

简化了源码,重在讲解 jquery 如何使用原型

//简化了源码,真实源码分支很多,选取部分代码
(function (window) {

    var jQuery = function (selector) {
        //注意 new 关键字,第一步就找到了 构造函数
        return new jQuery.fn.init(selector)
    }

    //定义构造函数
    var init = jQuery.fn.init = function (selector) {
        var slice = Array.prototype.slice
        var dom = slice.call(document.querySelectorAll(selector))

        var i, len = dom ? dom.length : 0
        for (i = 0; i < len; i++) this[i] = dom[i]
        this.length = len
        this.selector = selector || ''
    }

    init.prototype = jQuery.fn

    //初始化 jQuery.fn
    jQuery.fn = jQuery.prototype = {
        constructor: jQuery,

        //其他函数...
        css: function (key, value) {

        },
        html: function (value) {

        }
    }

    //定义原型
    init.prototype = jQuery.fn
    window.$ = jQuery
})(window)

问题解答

  • 描述一下 jquery 如何使用原型
  • 描述一下 zepto 如何使用原型
  • 再结合自己的项目经验,说一下自己开发的例子

如何体现原型的扩展性

体现原型的扩展性

知识点

  • 总结 zepto 和 jquery 原型的使用
  • 插件机制

总结 zepto 和 jquery 原型的使用

总结 zepto 和 jquery 原型的使用

相关 代码实现 请看上文 :zepto 如何使用原型 和 jquery 如何使用原型

问题一:为何要把原型方法放在 $.fn ?

//初始化 jQuery.fn
jQuery.fn = jQuery.prototype = {
    constructor: jQuery,

    //其他函数...
    css: function (key, value) {

    },
    html: function (value) {

    }
}

//定义原型
init.prototype = jQuery.fn

解答因为要扩展插件 ,做一个简单的插件的例子

// 因为要扩展插件,做一个简单的插件的例子
$.fn.getNodeName =function(){
    return this[0].nodeName
}

好处

  1. 只有 $ 会暴露在window 全局变量
  2. 将插件扩展统一到 $.fn.xxx 这一接口,方便使用

总结

  • 说一个原型的实际应用

    • 描述一下 jquery 如何使用 原型
    • 描述一下 zepto 如何使用 原型
    • 再结合自己的项目经验,说一下自己开发的例子
  • 原型如何体现它的扩展性

    • 说一下 jquery 和 zepto 的 插件机制
    • 结合自己的开发经验,做过的基于原型的插件
精彩评论:
上一页 下一页