摘要：示例小明小明小明小明小花小花姓名價(jià)格基于上面的方法我寫了個(gè)簡易的基于的自動(dòng)生成表格的插件，可以合并單元格。對于兼容這些規(guī)范，寫法也很多，希望多多指教完整代碼

事情是這樣的，我寫了一個(gè)基于jQuery的插件，在傳統(tǒng)的開發(fā)模式中，我們需要現(xiàn)在頁面引入jQuery.js，然后在引入我們的插件，我們的插件才能使用。但是隨著webpack的興起，我不在想一步步的寫入script標(biāo)簽，寫著一堆的script標(biāo)簽。但是我們知道這些都有著模塊規(guī)范。比如在node環(huán)境中我們經(jīng)常這樣寫：var example = require("./example.js");那么就讓我們的插件也支持這樣的寫法吧。

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

   plugin.prototype={
    a:function(){

    },
    b:function(){

    }

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

var p = new plugin()

node的模塊規(guī)范是commonjs,這些我們是知道的，網(wǎng)上也有很介紹，在下就不多嗶嗶了。但是問題來了，網(wǎng)上很多只是介紹如何把一個(gè)模塊導(dǎo)出，但是當(dāng)你的模塊依賴某個(gè)模塊時(shí)，這時(shí)該怎么處理？

(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("開始生產(chǎn)表格...")
                that.createTable();
            })
        }
      }
})(window,$)

接著我們嘗試著在閉包函數(shù)中，寫寫兼容模塊，讓函數(shù)能被導(dǎo)出去

 //兼容模塊
    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")時(shí)，經(jīng)過webpack打包，會發(fā)現(xiàn)覽器錯(cuò)誤提示$ is not defined
既然$ is not defined 說明我們并沒把jQuery這個(gè)參數(shù)傳進(jìn)去。

//如果是在node環(huán)境中，通過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.affffdom;
        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("開始生產(chǎn)表格...")
                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中，還是在瀏覽器中都可以引用了。

示例

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",
    affffdom: ".add",
    tableclass: "table table-bordered",
    tableparent: ".tcon",
    theade: "姓名價(jià)格",
    mergeCells: true
}, data)

基于上面的方法我寫了個(gè)簡易的基于jQuery的自動(dòng)生成表格的插件，可以合并單元格。對于兼容commonjs這些規(guī)范，寫法也很多，希望多多指教
完整代碼github:easyTable