jquery的原型和插件扩展

1.jquery在原型中的体现是怎样的

Jquery的cdn下载地址：www.bootcdn.cn/

Html代码：

<p>这是一个p标签</p>
复制代码

Js代码

  <script src="./my-jquery.js"></script>
  <script>
    $p = $('p') //传入一个参数（选择器），返回对象实例
    $p.css('color', 'red') //在构造函数的原型上添加了css方法
    Console.log($p.html())//在构造函数的原型上添加了html方法
  </script>
复制代码

My-jQuery.js

(function(window) {
    var jQuery = function(selector) {
        // 返回一个构造函数
        return new jQuery.fn.init(selector)
    }
    jQuery.fn = {
        css: function(key, value) {
            //业务逻辑代码
        },
        html: function(value) {
            //业务逻辑代码
        }
    }
    // 定义构造函数
    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 || ''
    }
    // 使用构造函数的原型扩张css和html方法
    init.prototype = jQuery.fn
    window.$ = jQuery
})(window)
复制代码

2.jQuery的插件机制是怎么实现的

jQuery中通过($.fn)实现插件的扩展，第一是因为只有$会暴露在window全局变量；第二是将插件扩展统一到$.fn.xxx这个接口，方便扩展和使用。

  <p>一个简单的扩展插件</p>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script>
    // 扩展插件
    $.fn.ceshi = function () {
      console.log('插件扩展成功')
    }
  </script>
  <script>
    // 验证插件
    var $p = $('p')
    $p.ceshi()
  </script>
复制代码

《今日学习》