Introduction to the method of transforming traditional jquery extension into layui module

Layui has built-in jquery

It will only be loaded if the module you are using depends on it. , and if your page has introduced jquery script, it will not be loaded repeatedly. The built-in jquery module removes the global $ and jQuery.

This is the description in the layui document. It has jq built-in, but the global $ and jQuery objects are removed, that is, the global external interface in the window is deleted.

Implementation of drag and drop components
Assume that siam.js is an extension, which provides a method similar to this

<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内容变为 > 这是新内容

This It is the implementation principle of some traditional jq extensions. For the DOM you call, it will continue to process the operation. As mentioned at the beginning of this article, I am using the drag and drop component. The extension will process the DOM to be draggable through such an external interface. of, and with elements of other events.

Problem Conflict

The above two points are the basic supplements to the problem. In layui, the global $ and Jquery objects are removed and expanded by default. There is the following code

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

at the end, which relies on loading window.Jquery object, window object, document object

is passed to the above closure
corresponds to $, window, document , undefined (the same because it is not passed)

Therefore, the $ used in the closure has no value, and an error will be reported as soon as the extension is loaded

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

I have tested introducing the jq file separately and the problem is solved No problem, (because of the template loading order I used, the built-in jq of layui was loaded first)

layui custom module

This It is an introduction from the official website

layui.code
/**
  扩展一个test模块
**/

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

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

We can use the layui custom module method to pass in other modules of layui so that the extension can operate the jq object in layui

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

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

Use

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

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

Note that this article is not a universal method, it just briefly explains my ideas and solutions to solve this problem, you can refer to it for reference.

For more knowledge about layui framework, please pay attention to layui framework tutorial.

The above is the detailed content of Introduction to the method of transforming traditional jquery extension into layui module. For more information, please follow other related articles on the PHP Chinese website!