layui packaging module tutorial

layui is a very simple UI framework developed by Chinese people. It uses a modular loading method, so we inevitably need to add our own modules during use. This tutorial will teach you how to encapsulate it. A simple module.

Recommended: layui usage tutorial

In daily use, ajax can be said to be widely used, so here we add a module of our own to encapsulate ajax for easy use.

Note: Module loading requires server environment support, so before reading this tutorial, please set up a local server environment in your local area. This is not within the scope of this tutorial. Please Baidu yourself.

1. Build the project directory

First download the layui package from the layui website and place it in your own project. Here I use a brand new empty project. After adding layui, the directory structure As follows:

2. Write module files

Now I create a new modules folder under the layui folder of plugin to save our own module files , create a new common.js file in this folder to write our first module. The content of the file is as follows:

layui.define(['jquery'], function(exports){ 
    var $ = layui.jquery;
    var obj = {
        ajax: function (url, type, dataType, data, callback) {
            $.ajax({
                url: url,
                type: type,
                dataType: dataType,
                data: data,
                success: callback
            });
        }
    };
    //输出接口
    exports('common', obj);
});

layui.define() method is the define module method of layui. This method receives 2 Parameters, the first parameter is the dependent module, here we see that we depend on jquery; the second callback method, here we define the content of the module, which is to provide those methods. As can be seen from the above, we define an obj object, which The object has an ajax method for calling jquery's ajax to perform our operations. If you are encapsulating other jquery plug-ins, just put the js code of the plug-in in the callback method of layui.define().

exports() is the output interface. This method also has two parameters. The first is the name of the output module, and the second is which object to output.

Now our module has been written. If we need to add methods later, just add methods to the obj object. Now our directory structure is as follows:

3. Set the layui loading component directory module

After the module is written, we need to configure layui so that layui can find it For our module, generally this configuration is completed in our global js. Here I create a new global.js file under assets/js. The content of the file is as follows:

layui.config({
    base: '/assets/plugin/layui/modules/'      //自定义layui组件的目录
}).extend({ //设定组件别名
    common:   'common',
});

layui.config() is the configuration of layui Method, the base parameter represents the saving directory of our module. This directory is calculated from the access root directory of the website. As can be seen from the previous step, my module saving path is /assets/plugin/layui/modules/ folder ; extend defines our actual module name. The common before the colon in the above code represents the name of the module, which is the name we will use when loading the module in the future, and the 'common' after the colon represents the name of our module file, here In fact, it refers to the /assets/plugin/layui/modules/common.js file. We can omit the js suffix, and the suffix will be automatically added when loading.

4. Use the module

After the module is defined, we can use the module. Using the module is actually the same as using layui’s built-in module. Now let’s modify the project’s index.html file , in which I use the ajax method of the module to access an online translation interface. The file code is as follows:

<script src="assets/plugin/layui/layui.js"></script>
<script src="assets/js/global.js"></script>
<script>
    layui.use([&#39;common&#39;], function () {
        var common = layui.common;
        common.ajax(&#39;//route.showapi.com/32-9&#39;, &#39;post&#39;, &#39;json&#39;, {
            &#39;showapi_appid&#39;: 28043,
            &#39;showapi_sign&#39;: &#39;fd5ce066f69441bfa078c0ad16129b15&#39;,
            &#39;q&#39;: &#39;hello&#39;
        }, function (res) {
            alert(JSON.stringify(res));
        });
    });
</script>

Visit index.html and see the return result in the figure below, which proves that the module is successfully encapsulated.

The above is the detailed content of layui packaging module tutorial. For more information, please follow other related articles on the PHP Chinese website!