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

This article mainly introduces how to use the function layui.define in layui. It is very detailed and has a certain reference value. Friends who are interested must finish reading it.

Foreword:

1. If you have a deep understanding and reasonable use of layui.define, this article is a bit of a waste of time for you.

2. If you haven't heard of "Javascript modular development", let alone understand it. So it is recommended that you first look for "Javascript modular development" on the web, which is important for you to understand what I am talking about later, and of course, it will also help you better understand the ideas that the Layui authors are trying to express.

Recommended: layui Framework tutorial

When we use Layui, we often use

Layui.use ([], function () {})

However, a careful little friend will find that another function of layui is layui.define. What is this used for? In the past, we did not have the concept of modularization in writing code, such as the following code:

Function entry (type) {if (type = 1) {handle1 ()} else if (type = 2) {handle2 ()} else {handleall ()} function handle1 () {} function handle2 () {} function handleall () {}

Long-term practice has made it clear to programmers that javascript modularity is essential. In the realization of modularization, each family has its own ideas and implementation. They consider as many problems as possible, which also leads to the need for a complex configuration to use their modularity. Layui uses its own loading method, and compared with other modular implementations, it is more lightweight. She has two core functions, define and use, to modularize herself, but it can be confusing at times. In the process of using it, my partner asked me that the define function of layui feels almost the same as the use function, how to use it correctly? As described in the layui documentation, the function layui.define is used to extend components. The function use is loaded to use this component. But what kind of code can be considered a component? on the extension component page, we can also see some good authors share their results. But we can see that these components have one thing in common, that is, they do not involve business (this is not nonsense, who uses it if there is a business). So once the design business is no longer a component, we can change the name and call it the interface. Then it's easy to understand the difference between define and use. The function define is to define components or interfaces, and the function use is to use those components or interfaces. If you write a component or interface that you want others to use, use the function define, but if your function is just housekeeping and does not need to be called by others, use the function use. At this point, if you now clearly understand the difference between the two, then a simple layui project in the following architecture should be more clear. First, you need to download a simple build project layui.test.project here. Then open the project with the tool, and we can see the file directory clearly.

Here we use a lot of layui.define, which is shown in index.single.html, in which we configure the cdn of layui, the global layui parameters, and finally the business script we use. Open layui.config.js, you can clearly see the content, in which I have defined 2 components (note this name), they do not have any business logic. So I put it in the lib folder, which is used to store some non-business public components. Because it will be used a lot, so I finished the configuration ahead of time. Then we'll come to the entry script main.single.js, which uses layui's own module jquery,form, as well as the modules logger and more I just defined, because I won't export it to anyone else, so I use the function use. Inside, I did a simple test logic.

Next, you may find that api,const,utils is not used here at all, what do they do? The old name of api is meant to provide processing with the background interface. Because layui comes with jquery, we use jquery.ajax in the call to the background interface. Callback functions are sometimes a nightmare for beginners, so we use jquery's deffer object, which can be called by chain.

Here I do not encapsulate jquery.ajax, such error handling, token carries no unified processing, virtually will load the workload, so you need to add the API that encapsulates jquery.ajax. Here you can define a component layui.ajax.jsconst storage constant again, and here configure a keyword response.js that returns the interface. Of course, this is for simulation. If the front and background discuss it, you can also write it to death in the project. Utils storage tools, our commonly used conversion time, conversion url can be written here.

These three folders are configured to assist other business pages, so basically all use lazy loading calls, starting with the function define, and finally exporting an interface name to external calls.

Layui.extend ({utils:'/ path/to/utils/index'}) .use (['utils'], function () {var utils = layui.utils / /...})

Note: if you use ftl,jsp,apsx, which is rendered by the background page engine, there should be a common header, then the global configuration layui file layui.config.js, you can add in the public header.

The above is all the content of the article "how to use function layui.define in layui". Thank you for reading! Hope to share the content to help you, more related 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.