改變傳統(tǒng)jquery為layui模塊的方法

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

Layui中內(nèi)置了jquery

只有你所使用的模塊有依賴到它，它才會(huì)加載，并且如果你的頁面已經(jīng)script引入了jquery，它并不會(huì)重復(fù)加載。內(nèi)置的jquery模塊去除了全局的$和jQuery。

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

拖拽組件的實(shí)現(xiàn)
假設(shè)siam.js是一個(gè)擴(kuò)展，里面提供了一個(gè)類似這樣的方法

<div id='test'>原始內(nèi)容</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('這是新內(nèi)容');
},800);
</script>
// 延遲執(zhí)行完之后會(huì)把div內(nèi)容變?yōu)?> 這是新內(nèi)容

這就是一些傳統(tǒng)jq擴(kuò)展的實(shí)現(xiàn)原理，對(duì)于你調(diào)用的dom，它會(huì)繼續(xù)處理操作，如本文開始說的，我使用的是拖拽組件，擴(kuò)展會(huì)通過這樣子的對(duì)外接口 將dom處理為可以拖拽的，并且?guī)в衅渌录脑亍?/p>

問題沖突

以上兩點(diǎn)是問題的基礎(chǔ)補(bǔ)充，在layui中，去除了全局的$和Jquery對(duì)象，默認(rèn)擴(kuò)展中有以下代碼

;(function($, window, document, undefined){
    .....擴(kuò)展內(nèi)容
})(window.jQuery || window.Zepto, window, document);

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

傳遞到上面的閉包中
對(duì)應(yīng)$, window, document, undefined（因?yàn)闆]有傳遞 所以也一樣）

所以導(dǎo)致閉包中使用的$是沒有值的，一加載這個(gè)擴(kuò)展就報(bào)錯(cuò)

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

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

layui自定義模塊

這是官網(wǎng)的介紹

layui.code
/**
  擴(kuò)展一個(gè)test模塊
**/

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

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

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

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

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

使用

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

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

上述就是改變傳統(tǒng)jquery為layui模塊方法的詳細(xì)內(nèi)容，詳細(xì)使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過才能領(lǐng)會(huì)。如果想了解更多，歡迎關(guān)注億速云行業(yè)資訊頻道！