custom module package layui

Transfer: https: //lianghongbo.cn/blog/430585105a35948c

layui is people develop a very simple UI framework, the use of a modular loading, so in the course we will inevitably need to add their own modules, this tutorial will teach you a simple package module.

In normal use, it can be said ajax widely used, so here we add its own module, ajax package will look for ease of use.

Note: The modules are loaded server environment needs support, so look before the tutorial, please build a good local server environment in your local market, this is not within the scope of this tutorial, please Baidu own.

1, set up the project directory

First, from layui website to download layui bag, placed into their own project, where I used a brand new empty project, you have added layui, the directory structure is as follows:

2, write a module file

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 layui definition module, the method receives two parameters, the first parameter is dependent on the module, where we see the dependence and jQuery; second callback method, which we define the content of this module, is to provide those methods, it can be seen from the above, we define an object obj, the object has a method for calling jquery ajax ajax execution of our operations. If you are a callback method other jquery plugin package, then plug into the js code layui.define () is on the line.

Exports () is an output interface, this method has two parameters, one of the first output module name, which is the second output objects.

We just finished this module, if you need to add the follow-up method, give the method of the object obj added on the line. Now our directory structure is as follows:

Now I'm in the plugin 's layui new folder under the modules folder to save our own module files in this folder New common.js file to write our first module, the document reads as follows:

3, the directory module is provided layui loading assembly

After the module is finished, we need to configure layui, let layui can find our module, this configuration is usually done in our global js years, here I am in assets / js New below global.js file, which reads as follows:

layui.config ({ 
    Base: '/ Assets / plugin / layui / modules /'       // directory layui custom component 
.}) Extend ({ // set component alias 
    Common: 'Common' , 
});

layui.config () method for the configuration of layui, base parameter represents the directory where you saved our modules, this directory is accessible from the root directory of the site began to count from the previous step can be seen as a path to save my module / assets / plugin / layui / modules / folder; extend the inside to define our actual module name, the code above common before the colon represents the name of the module, which is later used when loading module of our name, but after the colon 'common 'indicates the name of our module file, here actually refers /assets/plugin/layui/modules/common.js file, we can omit js suffix will automatically add the suffix when loading.

4, using the module

After a good module definition, since we can use the module, using the module and use layui actually comes with modules like now to modify the project's index.html file, in which I am using ajax method of access interface module of an online translator, file code is as follows:

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

Access index.html see FIG return the results demonstrate the successful encapsulation module.

Transfer: https: //lianghongbo.cn/blog/430585105a35948c

In normal use, it can be said ajax widely used, so here we add its own module, ajax package will look for ease of use.

1, set up the project directory

First, from layui website to download layui bag, placed into their own project, where I used a brand new empty project, you have added layui, the directory structure is as follows:

2, write a module file

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()方法为layui的定义模块方法，该方法接收2个参数，第一个参数为依赖模块，这里看到我们依赖与jquery；第二个回调方法，这里面我们定义模块的内容，就是提供那些方法，从上面可以看出我们定义了一个obj对象，该对象有一个ajax方法用于调用jquery的ajax执行我们的操作。如果你是封装其他的jquery插件，那就把插件的js代码放到layui.define()的回调方法里就行了。

exports()为输出接口，这个方法也有两个参数，第一个为输出模块的名字，第二个为输出哪个对象。

到此我们的模块就写完了，如果后续需要添加方法，就给obj对象添加方法就行了。现在我们的目录结构如下：

现在我在 plugin 的 layui 文件夹下新建 modules 文件夹，用以保存我们自己的模块文件，在这个文件夹里新建 common.js 文件，来编写我们第一个模块，该文件内容如下：

3、设置layui加载组件目录模块

模块写完后，我们需要配置layui，让layui能够找到我们的模块，一般这个配置是在我们的全局js里完成，这里我在 assets/js 下面新建 global.js 文件，该文件内容如下：

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

layui.config()为layui的配置方法，base参数表示我们模块的保存目录，这个目录是从网站的访问根目录开始算的，从上一步中可以看出，我的模块保存路径为 /assets/plugin/layui/modules/ 文件夹下；extend里面就来定义我们的实际模块名，上面代码中冒号前的common表示模块的名字，也就是以后我们加载模块时使用的名字，而冒号后的‘common’表示我们模块文件的名字，这里其实是指 /assets/plugin/layui/modules/common.js 文件，我们可以省略js后缀，加载时会自动添加后缀。

4、使用模块

模块定义好后，我们就可以来使用模块了，使用模块其实和使用layui的自带模块一样，现在来修改项目的 index.html 文件，在里面我使用模块的ajax方法访问一个在线翻译的接口，文件代码如下：

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

访问 index.html 看到下图返回结果，证明模块封装成功了。

custom module package layui

Guess you like