改造傳統jquery擴展為layui模組方法介紹

Layui中內建了jquery

#只有你所使用的模組有依賴到它，它才會載入，並且如果你的頁面已經script引入了jquery，它並不會重複載入。內建的jquery模組去除了全局的$和jQuery。

這是layui文件中的描述，它內建了jq，但是去除了全域的$和jQuery對象，也就是在window的全域對外介面被刪除了。

拖曳元件的實作
假設siam.js是一個擴展，裡面提供了一個類似這樣的方法

<div id=&#39;test&#39;>原始内容</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(&#39;这是新内容&#39;);
},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');
});

注意，此篇文章並不是通用方法，只是簡單闡述了我解決這個問題的思路和方案，可以參考學習。

更多layui框架知識請關注

layui框架教程。

以上是改造傳統jquery擴展為layui模組方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！