jquery-编程基础-jQuery封装-07

1. 什么是插件/组件:

页面中一块可重用的独立的页面功能区域

2. 为什么:

代码重用

3. 何时:

今后，只要发现页面中一个部分的功能区域，经常被反复使用，就可以定义为组件。然后反复使用组件。

4. 官方提供了一套插件:jquery ui

(1). 官网: jqueryui.com

(2). 下载:

自带文件images与jquery-ui.css必须放在同级位置

(3). 引入页面:

关于jquery的引入，所有的jquery插件或者基于jquery的脚手架等其他第三方工具，在引入的时候都必须将jquery的引入放在第三方文件之前，这是基于依赖关系必须的

<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.11.3.js">

<script src="js/jquery-ui.js">

(4). 使用jquery-ui的插件: 2步:

a. 按插件的要求，编写HTML内容和结构

注意，不需要加任何的class
b. 用jquery查找插件的父元素，调用jqueryui提供的插件函数。

(5). 缺点：

a. 只有pc端，没有移动端

b. 几乎不可维护。因为所有的样式类，都是底层悄悄的自动添加的。程序员不知道。

(6). 将来，被bootstrap代替了。

5. 如何封装自定义jquery插件:

(0). 通常定义组件时，独立的功能区域已经实现了，只不过是和其它的HTML、css和js代码混在一起不便于重用而已。所以，定义插件/组件，其实只是一个提取代码的过程。

(1). 提取css:

a. 新建一个独立的css文件

b. 将插件相关的css代码，剪切到独立的css文件中保存.

(2). 定义插件的函数:

a. 新建一个独立的js文件

 b. 在独立的js文件中，向jquery的原型对象中添加一个原型对象方法。

   1). 添加样式:

   2). 添加事件绑定:因为在页面上已经实现了效果的js代码。所以，直接将页面上的js代码剪切到自定义的函数中即可。

6. 如何使用自己封装的自定义插件：

(1). 在HTML页面中先引入自定义插件的css和js文件

<link rel="stylesheet" href="自定义插件的.css">
<script src="js/jquery.js">
<script src="自定义插件的.js">

(2). 在HTML中按插件的要求编写html代码，也不要加任何class。只不过，为了将来好找，可以给插件的HTML代码父元素添加唯一的id名

(3). 用jquery查找插件HTML的父元素，调用自定义的插件函数

总结：

自定义jquery插件是使用jquery的DOM树的功能，结合父元素，jquery的元素样式的操作方式，将所有的样式添加和动作添加函数添加等全部放到了函数里，只要HTML结构符合函数定义的方式，都可以自动添加样式与动作；关于jquery的函数，使用的是JavaScript的原型链的方式使用prototype来实现

自定义封装的方法创建：

jQuery.prototype.sum=function(){}

jQuery.prototype.sum = function () {
    console.log(`调用我们自己定义的sum()函数`)
    //jq原型对象中的this->将来调用这个函数的.前的一个jq子对象。
    //对任何数组求和的固定套路: 
    var result = 0;
    //         $("ul>li")
    for (var i = 0; i < this.length; i++) {
        result += parseInt(this[i].innerHTML);
        //                <li>  .innerHTML
    }
    return result;
}