Layui单页版应用开发

1. 拿到设计图先熟悉整个业务，对复杂的功能实现问题先做思考能否实现，如若不能则用其它实现方法替代。

2. 下载layui单页版应用模板，更新其中的layui版本和echarts版本，删除多余文件。

3. 命名规则：a.文件命名全小写单词以下划线分隔，"动词_名词"或者"名词_名词"；b.class和id命名全小写单词以连字符分隔，"动词-名词"或者"名词-名词"；c.变量命名驼峰式，如dataList；d.函数命名双驼峰式，如AddUser；e.每个变量及函数都要写备注。

4.整理页面中所有表单，确认所有字段的长度及校验规则，改写layui源码里面form.js文件的校验方法。

5.常用正则表达式：账号，密码，名称，电话，邮箱，身份证

6.公共样式文件style/common.css在layout.html中引入

 <script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/common.css" media="all">
 </script>

7.封装函数写在controller下

//定义模块
layui.define(['layer','admin'], function(exports) {
    'use strict';
    var ajax={
        test:function(){}
    };
    exports('ajax',ajax);
})
//引入模块
layui.use('ajax',function(){
    layui.ajax.test();
})

8.相似页面的样式和简单脚本都写在同一个文件中，使代码更简介明了。

9.使用layui模板遇到的坑：

（1）如果在layout.html中使用了模板请求菜单栏数据，并且在lay-done函数中接收数据，其它页面也要使用lay-done函数就不能命名为layui.data.done，可以命名为layui.data.other，否则只会执行菜单栏的方法；

<script type="text/html" template lay-url="{{layui.admin.domain}}school/login/getMenu" 
lay-done="layui.data.done(d)" id="TPL_layout">
</script>

<script>
  layui.data.done=function(d){}
</script>

(2)页面中既要使用模板请求，还要使用laytpl模板渲染时，一定不要两个script相互嵌套；

(3)模板请求中如果有时间、下拉、单选、上传等组件，都要在lay-done函数中重新渲染或者重新执行脚本，如layui.form.render('select')；

来源：CSDN

作者：猫猫是灰色的

链接：https://blog.csdn.net/BIGBIGBIGCAT/article/details/103840111

标签

应用开发