改變傳統jquery為layui模塊的方法

今天小編給大家分享的是改變傳統jquery為layui模塊的方法介紹，相信大部分人都還沒學會這個技能，為了讓大家更加了解，給大家總結了以下內容，話不多說，一起往下看吧。

Layui中內置了jquery

只有你所使用的模塊有依賴到它，它才會加載，并且如果你的頁面已經script引入了jquery，它并不會重復加載。內置的jquery模塊去除了全局的$和jQuery。

這是layui文檔中的描述，它內置了jq，但是去除了全局的$和jQuery對象，也就是在window的全局對外接口被刪除了。

拖拽組件的實現
假設siam.js是一個擴展，里面提供了一個類似這樣的方法

<div id='test'>原始內容</div>

<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>
$.fn.siam = function(params){
    var dom = this;
    dom.html(params);
};


setTimeout(function(){
    $("#test").siam('這是新內容');
},800);
</script>
// 延遲執行完之后會把div內容變為 > 這是新內容

這就是一些傳統jq擴展的實現原理，對于你調用的dom，它會繼續處理操作，如本文開始說的，我使用的是拖拽組件，擴展會通過這樣子的對外接口 將dom處理為可以拖拽的，并且帶有其他事件的元素。

問題沖突

以上兩點是問題的基礎補充，在layui中，去除了全局的$和Jquery對象，默認擴展中有以下代碼

;(function($, window, document, undefined){
    .....擴展內容
})(window.jQuery || window.Zepto, window, document);

在最后面，它依賴加載window.Jquery對象,window對象,document對象

傳遞到上面的閉包中
對應$, window, document, undefined（因為沒有傳遞 所以也一樣）

所以導致閉包中使用的$是沒有值的，一加載這個擴展就報錯

$ is not defined
或者
Typeerror Cannot Read Property fn of undefined

測試過單獨引入jq文件也解決不了問題，（我使用的模板加載順序的原因，先加載了layui內置的jq）

layui自定義模塊

這是官網的介紹

layui.code
/**
  擴展一個test模塊
**/

layui.define(function(exports){ //提示：模塊也可以依賴其它模塊，如：layui.define('layer', callback);
  var obj = {
    hello: function(str){
      alert('Hello '+ (str||'mymod'));
    }
  };

  //輸出test接口
  exports('mymod', obj);
});

我們可以使用layui自定義模塊的方法，將layui的其他模塊傳遞進來，使擴展能操作layui中的jq對象

layui.define(["jquery"], function (exports) {
    var $ = layui.jquery;
    // 把第一行的 ;(function($, window, document, undefined){ 換成以上
    ...擴展內容

    // 把最后一行的換成以下
    var obj = {
    };
    exports("自定義模塊名", obj);
});

使用

 layui.use(['form','jquery','自定義模塊名'], function (admin, form) {
     var $ = layui.jquery;
     var obj = layui.自定義模塊名;

     // 正常使用 即可  比如我的
     $("#test").desta('open');
});

上述就是改變傳統jquery為layui模塊方法的詳細內容，詳細使用情況還需要大家自己動手實驗使用過才能領會。如果想了解更多，歡迎關注億速云行業資訊頻道！