Shulou(Shulou.com)06/03 Report--

Editor to share with you how layui encapsulates the module, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Layui is a very concise UI framework developed by Chinese people, which uses a modular loading method, so we inevitably need to add our own modules in the process of use.

In ordinary 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 the support of the server environment, so before reading this tutorial, please build a local server environment locally, which is not within the scope of this tutorial, please do it yourself.

1. Set up the project directory

First, download the layui package from layui's website and put it in your own project. Here I use a new empty project. After adding layui, the directory structure is as follows:

2. Write module files

Now I create a new modules folder under the layui folder in plugin to save our own module files, and create a new common.js file in this folder to write our first module, which 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}) }}; / / output interface exports ('common', obj);})

The layui.define () method is the definition module method of layui, which receives two parameters. The first parameter is the dependent module. Here we see that we rely on the second callback method with jquery;, in which we define the contents of the module, that is, we provide those methods. From the above, we can see that we have defined an obj object that has an ajax method to call jquery's ajax to perform our operation. If you are encapsulating other jquery plug-ins, just put the plug-in js code in the callback method of layui.define ().

Exports () is the output interface, and this method also takes two parameters, the first is the name of the output module, and the second is which object to output.

This is the end of our module. If you need to add methods later, just add methods to the obj object. Now our directory structure is as follows:

3. Set up the layui load component directory module

After the module is written, we need to configure layui so that layui can find our module. Generally, this configuration is done in our global js. Here, I create a new global.js file under assets/js, which contains the following contents:

Layui.config ({base:'/ assets/plugin/layui/modules/' / / customize the directory of the layui component}) .extend ({/ / set component alias common: 'common',})

Layui.config () is the configuration method of layui. The base parameter indicates the saved directory of our module, which is calculated from the access root of the website. As you can see from the previous step, my module is saved under the / assets/plugin/layui/modules/ folder. The common before the colon in the above code represents the name of the module, that is, the name we use when loading the module later, while the 'common' after the colon represents the name of our module file, which actually refers to the / assets/plugin/layui/modules/common.js file. We can omit the js suffix and add the suffix automatically when loading.

4. Use the module

After the module is defined, we can use the module. In fact, using the module is the same as using the built-in module of layui. Now modify the index.html file of the project. In it, I use the ajax method of the module to access an interface for online translation. The file code is as follows:

Layui.use (['common'], function () {var common = layui.common) Common.ajax ('/ / route.showapi.com/32-911, 'post',' json', {'showapi_appid': 28043,' showapi_sign': 'fd5ce066f69441bfa078c0ad16129b15',' qcow: 'hello'}, function (res) {alert (JSON.stringify (res));});}) The above is all the content of the article "how to encapsulate the module in layui". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.