摘要：的編寫(xiě)并沒(méi)有想象中的難，下面通過(guò)編寫(xiě)一個(gè)擁有屬性和一些回調(diào)函數(shù)的簡(jiǎn)單插件介紹下如何編寫(xiě)。

在當(dāng)前這個(gè)前端mv**框架盛行的年代，翻譯這樣一篇關(guān)于如何編寫(xiě)jquery插件的文章好像顯得有點(diǎn)多余和那么的不接時(shí)代，不過(guò)還是自私點(diǎn)，努力翻譯一把起碼可以提高自己（<_>）。

jquery非常棒，它兼容性好，入門(mén)簡(jiǎn)單，讓我們?cè)谔幚斫K端交互的時(shí)候來(lái)的輕而易舉，同時(shí)他還有非常龐大的插件庫(kù)，幾乎你能想到的功能都能找到對(duì)應(yīng)的插件。

但是，我們的業(yè)務(wù)需求是千變?nèi)f化的，萬(wàn)一我們需要的功能找不到或者說(shuō)找不到非常合適的插件的時(shí)候，我們?cè)撛趺崔k？或者當(dāng)項(xiàng)目漸漸龐大起來(lái)的時(shí)候，你想把通用的功能封裝起來(lái)的時(shí)候，我們?cè)撛趺崔k（這個(gè)時(shí)候請(qǐng)你假裝忘記：amd，cmd，es6module）？按照jquery的思路，這個(gè)時(shí)候就可以通過(guò)自定義插件來(lái)解決了。

jquery plugin的編寫(xiě)并沒(méi)有想象中的難，下面通過(guò)編寫(xiě)一個(gè)擁有屬性和一些回調(diào)函數(shù)的簡(jiǎn)單插件介紹下如何編寫(xiě)jquery plugin。

# 準(zhǔn)備基本環(huán)境
mkdir jquery-plugin-sample
cd jquery-plugin-sample
mkdir src
cd src
echo "" > index.js
# 文件結(jié)構(gòu)如下
.
├── LICENSE
├── src
│?? └── index.js # 這文件就是用來(lái)編寫(xiě)插件具體內(nèi)容

;(function($){
    $.fn.helloWorld = function(){
        //Future home of "Hello, World!"
    }
})(jQuery)

上面的代碼干了3件事情

代碼被封裝在一個(gè) (function(){}) self-enclosed 中，這樣保證了內(nèi)部變量不會(huì)和全局環(huán)境相互影響

我們將jQuery作為參數(shù)傳遞給了內(nèi)部函數(shù)，這樣做的目的是避免和其他庫(kù)也聲明了 $相互沖突

我們通過(guò)$.fn定義了我們的插件，并且命名為helloWorld

在編寫(xiě)功能之前，先基于webpack構(gòu)建一個(gè)本地調(diào)試環(huán)境 本地環(huán)境構(gòu)建

// src/index.js
;(function($){
    $.fn.helloWorld = function(){
        this.each(function(){ //1
            $(this).text("Hello World")//2
        })
    }
})(jQuery);

上面的代碼需要注意2個(gè)地方

1處的this代表就是jqueryDom 對(duì)象對(duì)象本身，因此不需要 $(this)來(lái)進(jìn)行轉(zhuǎn)換

2處的this由于遍歷時(shí)候的回調(diào)中的this指向dom本身，因此需要$(this)轉(zhuǎn)換為jquery對(duì)象

// 測(cè)試插件功能
// demo/demo.js
import $ from "jquery";
import "../src";

$(document).ready(()=>{
  // 找到頁(yè)面的dom
  $(".demo-wrap li").helloWorld();
})

此時(shí)，對(duì)應(yīng)的瀏覽器頁(yè)面應(yīng)該會(huì)出現(xiàn)如圖一樣的結(jié)果，OK，一個(gè)非常簡(jiǎn)單的插件構(gòu)建完成，該插件的功能就是將選中的dom的text 替換為Hello World, 這個(gè)插件合格嗎？

我們都知道jquery還有一個(gè)非常好的特性，就是api支持鏈?zhǔn)秸{(diào)用$("div").text("hell").addClass("red");那么我們自己寫(xiě)的插件是否滿(mǎn)足這個(gè)特性呢？通過(guò)測(cè)試代碼很明顯，這個(gè)helloWorld插件不滿(mǎn)足這個(gè)特性，因此不是一個(gè)合格的插件，需要稍微處理下才能滿(mǎn)足

// 修改 src/index.js
;(function($){
    $.fn.helloWorld = function(){
        return this.each(function(){
            $(this).text("Hello World")
        })
    }
})(jQuery);

OK，到這里為止，一個(gè)jquery插件才算真正到完成。

;(function($){
    $.fn.helloWorld = function(customText){
        return this.each(function(){
            $(this).text(customText)
        })
    }
})(jQuery);

OK，現(xiàn)在可以將選中到dom到內(nèi)容修改為你傳入到任何東西了

雖然上面我們擴(kuò)展了插件，可以滿(mǎn)足根據(jù)輸入到內(nèi)容修改匹配到dom的內(nèi)容，但是如果需要樣式呢？需要修改字體大小呢？需要添加回調(diào)函數(shù)呢？所以，參數(shù)必須是個(gè)對(duì)象的形式，Ok，立馬修改代碼

;(function($){
    $.fn.helloWorld = function(options){
        var settings = $.extend({
          text:"Hello World",
          color:null,
          fontStyle:null,
          complete:null
        },options)
        return this.each(function(){
            $(this).text(settings.text);
            if(settings.color){
              $(this).css( "color", settings.color );
            }
            if(settings.fontStyle){
              $(this).css( "font-style", settings.fontStyle );
            }
            if ( $.isFunction( settings.complete ) ) {
              settings.complete.call( this );
            }
        })
    }
})(jQuery);

// 測(cè)試代碼 demo/demo.js
import $ from "jquery";
import "../src";
$(document).ready(()=>{
  // 找到頁(yè)面的dom
  $(".demo-wrap li").helloWorld({
    color:"red",
    complete:()=>{
      console.log("sds")
    }
  }).addClass();
})

靈活封裝jquery插件，不但可以抽取公用代碼同時(shí)可以很好的保證全局環(huán)境的干凈。另外，這篇文字雖然是翻譯的文字，不過(guò)demo是自己手寫(xiě)的，有需要的可以去github上下載 jquery-plugin-sample,也可以通過(guò) npm install xxw-jquery-plugin-sample 來(lái)測(cè)試代碼

cd jquery-plugin-sample
npm init -y
yarn add webpack webpack-dev-server babel-core babel babel-preset-env html-webpack-plugin babel-loader -D
mkdir demo
cd demo
echo "" > index.ejs
echo "" > demo.js
# 文件結(jié)構(gòu)如下
.
├── LICENSE
├── demo
│?? ├── demo.js
│?? └── index.ejs
├── package.json
├── readme.md
├── src
│?? └── index.js
└── yarn.lock

// 編寫(xiě)webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const babel_options ={
  presets:[
    ["env",{
      "targets": {
        "browsers": ["last 4 versions", "safari >= 7"]
      }
    }]
  ]
}
module.exports = {
  entry:"./demo/demo.js",
  output:{
    path:path.resolve(__dirname,"./dist"),
    filename:"index.js"
  },
  module:{
    rules:[
      // es6 語(yǔ)法解析
      {
        test:/.js$/,
        exclude: /(node_modules|bower_components)/,
        use:[
          {
            loader:"babel-loader",
            options:babel_options
          }
        ]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:"./demo/index.ejs",
      filename:"index.html"
    })
  ],
  externals: {
    "jquery": "jQuery"
  },
  devServer: {
    host: "127.0.0.1",
    port: 3000
  }
};

// 編寫(xiě)ejs，添加jquery cdn
 

  
    
    
    
  
  

  

# 啟動(dòng)項(xiàng)目
yarn webpack-dev-server
Project is running at http://127.0.0.1:3000/
webpack output is served from /
Hash: 137d7a562cabec2c7996
Version: webpack 3.10.0
Time: 1053ms
     Asset       Size  Chunks                    Chunk Names
  index.js     324 kB       0  [emitted]  [big]  main
index.html  266 bytes          [emitted]

在瀏覽器中輸入 http://127.0.0.1:3000/ 訪問(wèn)測(cè)試頁(yè)面