讓你基於jQuery的插件兼容commonjs,amd規範

事情是這樣的，我寫了一個基於jQuery的插件，在傳統的開發模式中，咱們須要如今頁面引入jQuery.js，而後在引入咱們的插件，咱們的插件才能使用。可是隨着webpack的興起，我不在想一步步的寫入script標籤，寫着一堆的script標籤。可是咱們知道這些都有着模塊規範。好比在node環境中咱們常常這樣寫：var example = require('./example.js');那麼就讓咱們的插件也支持這樣的寫法吧。

先看傳統式jQuery插件的寫法。(jquery的插件有不少種寫法，這裏就不過多討論)

;(function($,window){
   var plugin=function(){
   }

   plugin.prototype={
    a:function(){

    },
    b:function(){

    }

   }
   window.plugin=plugin;
})($,window)

這樣咱們在頁面中這樣寫：

var p = new plugin()

問題來了，我都是用webpack來打包js文件的，怎麼能夠經過require（'./plugin.js'）的方式來引入個人插件呢？

node的模塊規範是commonjs,這些咱們是知道的，網上也有很介紹，在下就很少嗶嗶了。可是問題來了，網上不少只是介紹如何把一個模塊導出，可是當你的模塊依賴某個模塊時，這時該怎麼處理？

先看一段代碼

(function(window,$){
        var mtable = function (opt, data) {
        this.tableId = opt.tableid;
        this.tableClass = opt.tableclass;
        this.tableParent = opt.tableparent;
        ......
        this.mergeCells = opt.mergeCells || false;
        if (this instanceof mtable) {
            this.init();
            return this;
        } else {
            return new mtable(opt, data).init()
        }
    }
    
      mtable.prototype = {
        constructor: mtable,
        init: function () {
            var that = this;
            that.createTable();
            //合併單元格
            if (this.mergeCells == true) {
                mtable.MergeCell(that.tableId)
            }
            this.addEventDom();
            this.removeEventDom();
         },
            addEventDom: function () {
            var that = this;
            //在這裏咱們使用了jquery
            $(this.addDom).on('click', function () {
                console.log("開始生產表格...")
                that.createTable();
            })
        }
      }
})(window,$)

接着咱們嘗試着在閉包函數中，寫寫兼容模塊，讓函數能被導出去

//兼容模塊
    if(typeof module !=='undefined' && typeof exports ==='object'){
        module.exports=mtable;
    }else if(typeof define ==='function' && (define.amd || define.cmd)){
        define(function(){
            return mtable;
        })
    }else{
        window.mtable=mtable;
    }

可是咱們經過 var mtable = require('mtable')時，通過webpack打包，會發現覽器錯誤提示$ is not defined
既然$ is not defined 說明咱們並沒把jQuery這個參數傳進去。

在換種方式call()函數,對，你沒看錯，這個方法常常被人拿出來介紹。。。

//若是是在node環境中，經過require引入jQuery中，若是是在瀏覽器中，就經過window方式傳遞jQuery
if(typeof module !=='undefined' && typeof exports ==='object'){
    var $=require('jquery');
}else{
    var $=window.$
}
(function(){

    var mtable = function (opt, data) {
        this.tableId = opt.tableid;
        this.tableClass = opt.tableclass;
        this.tableParent = opt.tableparent;
        this.table;
        this.theade = opt.theade;
        this.addDom = opt.adddom;
        this.removeDom = opt.removedom;
        this.data = data;
        this.mergeCells = opt.mergeCells || false;
        if (this instanceof mtable) {
            this.init();
            return this;
        } else {
            return new mtable(opt, data).init()
        }
    }
    mtable.prototype = {
        constructor: mtable,
        init: function () {
            var that = this;
            that.createTable();
            //合併單元格
            if (this.mergeCells == true) {
                mtable.MergeCell(that.tableId)
            }
            this.addEventDom();
            this.removeEventDom();
            return this;
        },
        createTable: function () {
            var that = this;
            var t = createTable({
                id: that.tableId,
                class: that.tableClass
            }, that.data, that.theade);
            if (this.tableParent != null && this.tableParent != '') {
                $(this.tableParent).append(t)
            } else {
                document.body.appendChild(t);
            }
        },
      
        addEventDom: function () {
            var that = this;
            //var tableObj=document.getElementById('m');
            $(this.addDom).on('click', function () {
                console.log("開始生產表格...")
                that.createTable();
            })
        },
        removeEventDom: function () {
            $(this.removeDom).on('click', function () {

            })
        }
    }
   
   
      
        $.each(data, function (index, item) {
            var tr = document.createElement("tr");
            for (var i in item) {
                console.log(item)
                var td = document.createElement("td");
                td.innerHTML = item[i];
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
        });
        vtable.appendChild(tbody);
        return vtable;
    }

    }
    //兼容模塊
    if(typeof module !=='undefined' && typeof exports ==='object'){
        module.exports=mtable;
    }else if(typeof define ==='function' && (define.amd || define.cmd)){
        define(function(){
            return mtable;
        })
    }else{
        window.mtable=mtable;
    }
}).call(function(){
   return (typeof window !=='undefined' ? window : global )
},$)//傳入$

不管是在node中，仍是在瀏覽器中均可以引用了。

示例

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="easyTable.js"></script>

var mtable=require("../lib/easyTable");
var data = [
    { 'a': '小明', 'b': '100' },
    { 'a': '小明', 'b': '250' },
    { 'a': '小明', 'b': '260' },
    { 'a': '小明', 'b': '270' },
    { 'a': '小花', 'b': '90' },
    { 'a': '小花', 'b': '190' }
]
var c = new mtable({
    tableid: 'm',
    adddom: ".add",
    tableclass: 'table table-bordered',
    tableparent: '.tcon',
    theade: '<td>姓名</td><td>價格</td>',
    mergeCells: true
}, data)

基於上面的方法我寫了個簡易的基於jQuery的自動生成表格的插件，能夠合併單元格。對於兼容commonjs這些規範，寫法也不少，但願多多指教
完整代碼github:easyTable