自定义jquery插件

时间 2019-12-04

原文原文链接

在当前这个前端mv**框架盛行的年代，翻译这样一篇关于如何编写jquery插件的文章好像显得有点多余和那么的不接时代，不过仍是自私点，努力翻译一把起码能够提升本身（<_>）。javascript

jquery很是棒，它兼容性好，入门简单，让咱们在处理终端交互的时候来的垂手可得，同时他还有很是庞大的插件库，几乎你能想到的功能都能找到对应的插件。css

可是，咱们的业务需求是变幻无穷的，万一咱们须要的功能找不到或者说找不到很是合适的插件的时候，咱们该怎么办？或者当项目渐渐庞大起来的时候，你想把通用的功能封装起来的时候，咱们该怎么办（这个时候请你伪装忘记：amd，cmd，es6module）？按照jquery的思路，这个时候就能够经过自定义插件来解决了。html

jquery plugin的编写并无想象中的难，下面经过编写一个拥有属性和一些回调函数的简单插件介绍下如何编写jquery plugin。前端

建立文件目录

# 准备基本环境
mkdir jquery-plugin-sample
cd jquery-plugin-sample
mkdir src
cd src
echo '' > index.js
# 文件结构以下
.
├── LICENSE
├── src
│   └── index.js # 这文件就是用来编写插件具体内容

插件的代码结构

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

上面的代码干了3件事情java

代码被封装在一个 (function(){}) self-enclosed 中，这样保证了内部变量不会和全局环境相互影响
咱们将jQuery做为参数传递给了内部函数，这样作的目的是避免和其余库也声明了 $相互冲突
咱们经过$.fn定义了咱们的插件，而且命名为helloWorld

在插件中实线一些功能

在编写功能以前，先基于webpack构建一个本地调试环境本地环境构建node

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

上面的代码须要注意2个地方jquery

1处的this表明就是jqueryDom 对象对象自己，所以不须要 $(this)来进行转换
2处的this因为遍历时候的回调中的this指向dom自己，所以须要$(this)转换为jquery对象

// 测试插件功能
// demo/demo.js
import $ from 'jquery';
import '../src';

$(document).ready(()=>{
  // 找到页面的dom
  $('.demo-wrap li').helloWorld();
})

此时，对应的浏览器页面应该会出现如图同样的结果，OK，一个很是简单的插件构建完成，该插件的功能就是将选中的dom的text 替换为Hello World, 这个插件合格吗？
webpack

完善插件的功能

咱们都知道jquery还有一个很是好的特性，就是api支持链式调用$('div').text('hell').addClass('red');那么咱们本身写的插件是否知足这个特性呢？经过测试代码很明显，这个helloWorld插件不知足这个特性，所以不是一个合格的插件，须要稍微处理下才能知足git

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

OK，到这里为止，一个jquery插件才算真正到完成。es6

扩展插件，让插件能够接收参数

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

OK，如今能够将选中到dom到内容修改成你传入到任何东西了

终极插件

虽然上面咱们扩展了插件，能够知足根据输入到内容修改匹配到dom的内容，可是若是须要样式呢？须要修改字体大小呢？须要添加回调函数呢？因此，参数必须是个对象的形式，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);

// 测试代码 demo/demo.js
import $ from 'jquery';
import '../src';
$(document).ready(()=>{
  // 找到页面的dom
  $('.demo-wrap li').helloWorld({
    color:'red',
    complete:()=>{
      console.log('sds')
    }
  }).addClass();
})

总结

灵活封装jquery插件，不但能够抽取公用代码同时能够很好的保证全局环境的干净。另外，这篇文字虽然是翻译的文字，不过demo是本身手写的，有须要的能够去github上下载 jquery-plugin-sample,也能够经过 npm install xxw-jquery-plugin-sample 来测试代码

本地环境构建

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
# 文件结构以下
.
├── LICENSE
├── demo
│   ├── demo.js
│   └── index.ejs
├── package.json
├── readme.md
├── src
│   └── index.js
└── yarn.lock

// 编写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 语法解析
      {
        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
  }
};

// 编写ejs，添加jquery cdn
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test jquery pllugin</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  </head>
  <body>

  </body>
</html>

# 启动项目
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/ 访问测试页面