Introduction to the method of using function layui.define in layui project

Foreword:

1. If you deeply understand and use layui.define properly, then this article is a bit of a waste of time for you.

2. If you have never heard of "Javascript modular development", let alone understand it. Then it is recommended that you first search for what "Javascript modular development" is on the Internet. This is very important for you to understand what I will say later. Of course, it will also help you better understand the concept that the author of Layui wants to express.

Recommended: layui framework tutorial

When we use Layui, we often use

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

However, careful friends will find that layui There is another function called layui.define. What is this used for?

We used to write code without the concept of modularity, 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 programmers understand that JavaScript modularization is essential. When it comes to realizing modularization, each company has its own ideas and implementations. They consider all the issues possible, which also results in a complex configuration that you need to use their modularity.

layui adopts its own loading method, which is relatively lightweight compared with other modular implementations. It has two core functions define and use to achieve its own modularity, but sometimes it can be confusing. A friend of our company asked me during the use process that the define function of layui feels similar to the use function. How to use it correctly?

As the layui document says, the function layui.define is used to extend components. The function use is to load and use this component. But what kind of code counts as a component? On the extended components page, we can also see some excellent authors sharing their results. But we can see that these components all have one thing in common, that is, they do not involve business (this is not nonsense, whoever has business uses it).

So once the business is designed, it is no longer a component. At this time, we can change the name to an interface. Then the difference between functions define and use is easy to understand. 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, then use the function define. But if your function is only for internal execution and does not need to be called by others, then use the function use.

At this point, if you now clearly understand the difference between the two, then a simple layui project with the following architecture should be more clear.

First of all, you need to download a simple construction project here layui.test.project.

Then open the project with the tool, we can clearly see the file directory.

A large number of layui.defines are used here, which are displayed in index.single.html. Here we configure the cdn of layui, configure the global layui parameters, and finally It is the business script we use.

Open layui.config.js and you can clearly see the content. I have defined 2 components (note the name). They do not have any business logic. So I placed it in the lib folder, which is used to store some non-business public components. Because it will be used a lot, I configured it in advance.

Then we will come to the entry script main.single.js, which uses layui's own modules jquery and form, as well as the modules logger and more I just defined, because I will not export them to others. Use, so use the function use. And inside it, I made simple test logic.

Next, you may find that api, const, and utils are not used here at all. What do they do?

api The name means to provide processing with the backend interface, because layui comes with jquery, so we use jquery.ajax to call the backend interface. The callback function is sometimes a nightmare for some beginners. , so we use jquery’s deffer object, which can be called in a chain.

I did not encapsulate jquery.ajax here, so there is no unified handling of error handling and token carrying, which will invisibly load the workload, so you need to add an interface that encapsulates jquery.ajax. You can define one again here. The component layui.ajax.js

const stores constants. Here, a keyword response.js is configured to return the interface. Of course, this is for simulation. If the front-end and back-end are discussed well, it can also be written directly in the project.

utils stores tool classes. Our commonly used conversion time and conversion url can be written here.

These three folders are configured to assist other business pages, so basically all use lazy loading calls. They start with the function define, and finally export an interface name for external calls. Different from lib which needs to be pre-configured, when using them, you need to reconfigure yourself. Here is utils loading as an example:

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

注意： 如果你使用ftl，jsp，apsx这些由后台渲染的页面引擎，应该会有一个公共的头部，那么刚刚的全局配置 layui 文件 layui.config.js，你可以在公共的头部加入。

The above is the detailed content of Introduction to the method of using function layui.define in layui project. For more information, please follow other related articles on the PHP Chinese website!