


Detailed analysis of layui's project optimization and non-intrusive 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
# layui-update
## 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
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)
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)
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)
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)
``` layer.open({ type: 1, async: true, //异步请求,content为请求地址 content: '../template/xx.tpl', data: { /*静态tpl文件搭配动态数据,生成动态提示框.*/ /*(好处:不用后端生成动态文件,不用前端拼接字符串,不用一次性把当前页面可能涉及的弹窗内容全部都提前加载完)*/ v1: '李先生,你好!', v2: '没有开通权限/已开通权限' }, btn: ['按钮一', '按钮二', '按钮三'], success: function(layero, index) { console.log(layero, index); } }) ```
``` 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="$('.box').addClass('box-1')">改变1</button> <button type="button" onclick="document.getElementById('d1').setAttribute('attr-1','x1')">改变2</button> <button type="button" onclick="document.getElementById('d1').innerHTML='HTML'">改变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 = 'data发生了改变↓' + '</br>' + '新值:' + JSON.stringify(x) + '</br>' + '旧值:' + JSON.stringify(y) + '</br>' + 'key:' + JSON.stringify(z); layer.alert(c); }); $.watchDom(document.getElementById('d1'), function() { layer.alert('box改变'); }); </script> ```
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> ```
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> ```
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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.

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.

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

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.

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.

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.

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.

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.
