Home Web Front-end JS Tutorial Detailed analysis of layui's project optimization and non-intrusive optimization

Detailed analysis of layui's project optimization and non-intrusive optimization

Aug 25, 2018 am 09:51 AM
layui Project optimization

This article brings you a detailed analysis of layui's project optimization and non-intrusive optimization. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Practical optimization based on layui, non-invasive optimization form date open-iframe data-table upload verify-form laytpl laypage laytree tableTree

Detailed analysis of layuis project optimization and non-intrusive optimization
# layui-update

# Project introduction

## Practical optimization based on layui, non-intrusive optimization


[1. Form element optimization](https ://bable2000.gitee.io/layui-update/view-demo/imit-form.html)


1. Form elements do not need to be wrapped in layui-form
2. Dynamically added Form elements do not need to be rendered with form.render()
3. There is no JS setting for the time control, min max is dynamically set, and the start and end times are input separately

4. Add input select date radio checkbox defocus verification

5. [Verification of independent form (no need to trigger submission, no need to set filters)](https://bable2000.gitee.io/layui-update/view-demo/verify-form.html)
6 , Add drop-down button group, search selection box (free type)

7, Add form group button group




2. [Simplified fixed form](https://bable2000.gitee .io/layui-update/view-demo/fixed-table.html) (fixed table header, fixed first column, fixed last column, fixed table tail)


3. [Data table](https://bable2000.gitee.io/layui-update/view-demo/data-table.html)

1. The header is fixed, the first column is fixed, the last column is fixed, and the table The tail is fixed, but the form structure does not change at all

2. Customize the form template (you can modify it yourself)
3. Pagination and tables are separated (to facilitate processing after data request and before display)

4. Because Customize the form template, so the default checked/disabled of the checkbox is allowed

5. Added the function of manual 'total' at the end of the table

[Data table.png](http://oyh4crb8q.bkt.clouddn .com/data-table.png)


## 4. [Modify laytpl template writing into vue mode](https://bable2000.gitee.io/layui-update/ view-demo/laytpl.html), laytpl complex template is too difficult to write


5. Optimize layer (according to project requirements)

1. [Add Asynchronous request of layer](https://bable2000.gitee.io/layui-update/view-demo/layer-open.html), reducing the nesting of ajax->layer


```
layer.open({
 type: 1,
 async: true, //异步请求,content为请求地址
 content: '../template/xx.tpl',
 data: { 
 /*静态tpl文件搭配动态数据,生成动态提示框.*/
 /*(好处:不用后端生成动态文件,不用前端拼接字符串,不用一次性把当前页面可能涉及的弹窗内容全部都提前加载完)*/
 v1: '李先生,你好!',
 v2: '没有开通权限/已开通权限'
 },
 btn: ['按钮一', '按钮二', '按钮三'],
 success: function(layero, index) {
 console.log(layero, index);
 }
})
```
Copy after login

2. [Add the opening position and traceability of iframe pop-up windows](https://bable2000.gitee.io/layui-update/)

```
var open1 = function() {
 layer.open({
 type: 2,
 goal: top, //顶层窗口top,父级窗口parent,父级的父级窗口parent.parent
 content: './view-demo/iframe-source-2.html',
 area: ['50%', '50%'],
 success: function() {
 console.log('加载完')
 }
 })
};
parent.layer.close(layerIndex) //当前窗口信息
layerSource.parent.layer.close(layerSource.layerIndex) //关闭打开当前窗口的窗口
console.log('iframe弹窗发起方 layerSource:', layerSource.document);
console.log('iframe弹窗layer索引值 layerIndex:', layerIndex)
```
######
 6. 
[数据变化监控](https://bable2000.gitee.io/layui-update/view-demo/watchData.html)
 , 
[指定节点变化监控](https://bable2000.gitee.io/layui-update/view-demo/watchDom.html)
```
<div id="d1" class="box" attr-1=""></div>
<button type="button" onclick="$(&#39;.box&#39;).addClass(&#39;box-1&#39;)">改变1</button>
<button type="button" onclick="document.getElementById(&#39;d1&#39;).setAttribute(&#39;attr-1&#39;,&#39;x1&#39;)">改变2</button>
<button type="button" onclick="document.getElementById(&#39;d1&#39;).innerHTML=&#39;HTML&#39;">改变3</button>
<script type="text/javascript">
var data = {
 a: 200,
 b: [1, 2, 3],
 c: {
 c1: 1,
 c2: 2
 }
};
$.watchData(data, function(x, y, z) {
 var c = &#39;data发生了改变↓&#39; + &#39;</br>&#39; +
 &#39;新值:&#39; + JSON.stringify(x) + &#39;</br>&#39; +
 &#39;旧值:&#39; + JSON.stringify(y) + &#39;</br>&#39; +
 &#39;key:&#39; + JSON.stringify(z);
 layer.alert(c);
});
$.watchDom(document.getElementById(&#39;d1&#39;), function() {
 layer.alert(&#39;box改变&#39;);
});
</script>
```
Copy after login


6. [ File upload preview, upload progress bar* and various front-end and back-end error handling, file full-screen preview, rotation](https://bable2000.gitee.io/layui-update/view-demo/upload.html)


[File upload.png](http://oyh4crb8q.bkt.clouddn.com/file-1.png)


[File full screen preview.png](http:// oyh4crb8q.bkt.clouddn.com/file-2.png)

1. reader.readAsDataURL(file)->window.URL.createObjectURL(file) =>Asynchronous file preview changed to Synchronization (same browser support)

\* [Quote the code of Stream and then 'optimize'](https://fly.layui.com/jie/31616/)

7. Recursive reference to external files


```
<imports href="../template/imports-1.tpl">同步引入失败替换内容(引入片段中允许有script)</imports>
<imports href="../template/imports-1.tpl" async>异步引入失败替换内容</imports>
```
Copy after login

8. js introduces external files


# Software architecture

Based on layui architecture/**layui-v2.2.6 MIT License By https://www.layui.com*/
# Installation tutorial

Based on layui architecturelayui The first version was released in the golden autumn of 2016. It is different from those UIs based on the bottom layer of MVVM. Framework, however, does not go against the grain, but believes in the way of returning to nature. To be precise, it is more tailor-made for server-side programmers. You do not need to get involved in the complex configuration of various front-end tools. You only need to face the browser itself, and all the elements and interactions you need can be found at your fingertips.

###You need to introduce:######
```
<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/layui/layui.js"></script>
<script src="../js/common.js"></script>
```
Copy after login
###Related recommendations:#########JavaScript Project Optimization Summary############## #How to use gulp to automatically optimize requireJS projects###############WEB project optimization skills (must know)######

The above is the detailed content of Detailed analysis of layui's project optimization and non-intrusive optimization. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to set up jump on layui login page How to set up jump on layui login page Apr 04, 2024 am 03:12 AM

Layui login page jump setting steps: Add jump code: Add judgment in the login form submit button click event, and jump to the specified page through window.location.href after successful login. Modify the form configuration: add a hidden input field to the form element of lay-filter="login", with the name "redirect" and the value being the target page address.

How to get form data in layui How to get form data in layui Apr 04, 2024 am 03:39 AM

layui provides a variety of methods for obtaining form data, including directly obtaining all field data of the form, obtaining the value of a single form element, using the formAPI.getVal() method to obtain the specified field value, serializing the form data and using it as an AJAX request parameter, and listening Form submission event gets data.

How to Optimize Your Java Development Work Project Experience How to Optimize Your Java Development Work Project Experience Nov 02, 2023 am 09:47 AM

Java development is one of the most popular programming languages ​​in the world today, and as more and more companies and organizations use Java for application development, the number of Java developers is also increasing. However, Java developers may face some common problems, such as duplicate code, lack of documentation, inefficient development processes, etc. In this article, we'll explore some ways to optimize your Java development work project experience. Use design patterns Use design patterns to avoid code duplication and unnecessary complexity, while improving the quality of your code

How layui implements self-adaptation How layui implements self-adaptation Apr 26, 2024 am 03:00 AM

Adaptive layout can be achieved by using the responsive layout function of the layui framework. The steps include: referencing the layui framework. Define an adaptive layout container and set the layui-container class. Use responsive breakpoints (xs/sm/md/lg) to hide elements under specific breakpoints. Specify element width using the grid system (layui-col-). Create spacing via offset (layui-offset-). Use responsive utilities (layui-invisible/show/block/inline) to control the visibility of elements and how they appear.

What is the difference between layui and vue? What is the difference between layui and vue? Apr 04, 2024 am 03:54 AM

The difference between layui and Vue is mainly reflected in functions and concerns. Layui focuses on rapid development of UI elements and provides prefabricated components to simplify page construction; Vue is a full-stack framework that focuses on data binding, component development and state management, and is more suitable for building complex applications. Layui is easy to learn and suitable for quickly building pages; Vue has a steep learning curve but helps build scalable and easy-to-maintain applications. Depending on the project needs and developer skill level, the appropriate framework can be selected.

How to transfer data in layui How to transfer data in layui Apr 26, 2024 am 03:39 AM

The method of using layui to transmit data is as follows: Use Ajax: Create the request object, set the request parameters (URL, method, data), and process the response. Use built-in methods: Simplify data transfer using built-in methods such as $.post, $.get, $.postJSON, or $.getJSON.

What does layui mean? What does layui mean? Apr 04, 2024 am 04:33 AM

layui is a front-end UI framework that provides a wealth of UI components, tools and functions to help developers quickly build modern, responsive and interactive web applications. Its features include: flexible and lightweight, modular design, rich components, Powerful tools and easy customization. It is widely used in the development of various web applications, including management systems, e-commerce platforms, content management systems, social networks and mobile applications.

What language is layui framework? What language is layui framework? Apr 04, 2024 am 04:39 AM

The layui framework is a JavaScript-based front-end framework that provides a set of easy-to-use UI components and tools to help developers quickly build responsive web applications. Its features include: modular, lightweight, responsive, and has complete documentation and community support. layui is widely used in the development of management backend systems, e-commerce websites, and mobile applications. The advantages are quick start-up, improved efficiency, and easy maintenance. The disadvantages are poor customization and slow technology updates.

See all articles