国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

讓你基于jQuery的插件兼容commonjs,amd規范

GeekGhc / 2448人閱讀

摘要:示例小明小明小明小明小花小花姓名價格基于上面的方法我寫了個簡易的基于的自動生成表格的插件,可以合并單元格。對于兼容這些規范,寫法也很多,希望多多指教完整代碼

事情是這樣的,我寫了一個基于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.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("開始生產表格...")
                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: "姓名價格",
    mergeCells: true
}, data)

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82872.html

相關文章

  • OMD: javascript模塊化開發兼容CommonJS, AMD, CMD 以及 原生 JS

    摘要:它就是一套兼容方案,目前兼容的有以及原生支持。返回值問題在第一次使用時,。具體是什么意義呢的返回值,其實就是插件提供的對外接口,而實際上,就是一個對象。而在環境下,只需要將這個返回值賦予即可完成該模塊的接口。 有更新,請到github上看源碼 什么是OMD 在node.js流行起來之前,javascript的開發方式都是函數式的順序依賴關系,直到node火起來。CommonJS其實首先...

    lavor 評論0 收藏0
  • 「JavaScript」如何讓你插件兼容CommonJS, AMD, CMD 和 原生 JS

    摘要:模塊標準有三個全局變量和。模塊中有兩種方式提供對外的接口,一種是,一種是使用進行返回。規范中,函數同樣有一個公有屬性。由于和都可以使用來定義對外接口,故可以合并成一句代碼。 模塊標準 CommonJS CommonJS 有三個全局變量 module、exports 和 require。但是由于 AMD 也有 require 這個全局變量,故不使用這個變量來進行檢測。 如果想要對外提供接...

    ShevaKuilin 評論0 收藏0
  • 也談 webpack 及其開發模式

    摘要:比如通過安裝實例一新建一個然后編輯加入打開瀏覽器,看到屏幕輸出會給每個模塊一個唯一的然后通過存取這些模塊,這些模塊都會被整合到里面。以上設置會輸出一個的文件。 從模塊化談起 近年來,js開發涌現出了諸多模塊化解決方案,例如以在瀏覽器環境之外(服務端)構建 JavaScript 生態系統為目標而產生的CommonJS規范,從CommonJS社區中獨立出來的AMD規范(異步模塊定義),還有...

    huhud 評論0 收藏0
  • JS模塊化編程

    摘要:也就是說,外部模塊輸出值變了,當前模塊的導入值不會發生變化。三規范的出現,使得模塊化在環境中得到了施展機會。模塊化這種加載稱為編譯時加載或者靜態加載??偨Y的模塊化規范經過了模塊模式的演進,利用現在常用的打包工具,非常方便我們編寫模塊化代碼。 前言 什么是模塊化? 模塊就是實現特定功能的一組方法,而模塊化是將模塊的代碼創造自己的作用域,只向外部暴露公開的方法和變量,而這些方法之間高度解耦...

    騫諱護 評論0 收藏0
  • 再談JavaScript模塊化

    摘要:應用日益復雜,模塊化已經成為一個迫切需求。異步模塊加載機制。引用的資源列表太長,懶得回調函數中寫一一對應的相關參數假定這里引用的資源有數十個,回調函數的參數必定非常多這就是傳說中的 簡述 緣起 模塊通常是指編程語言所提供的代碼組織機制,利用此機制可將程序拆解為獨立且通用的代碼單元。 模塊化主要是解決代碼分割、作用域隔離、模塊之間的依賴管理以及發布到生產環境時的自動化打包與處理等多個方面...

    MorePainMoreGain 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<