事情是这样的,我写了一个基于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