无标题文章

2018.12.22

前端开发规范：

JS部分：

目的：

    1、尽可能逻辑简化，加快运行速度

    2、保持代码的整洁和提高代码可读性

    3、方法备注、变量备注

具体规范

变量： 1、命名规范；

            2、局部变量放在方法顶部，先声明再调用。

判断：不超过3个尽量if-elseif-else，超过3个则用switch-case来输出结果。

循环：合理运用while，for，forEach，filter等，熟悉方法的特性。

组件：数据处理尽量在本页完成，再传入组件执行逻辑。

请求： 1、参数用变量先创建好，方便以后管理；

            2、必须整合接口报错原因和处理方式。

            

请求方法

报错处理

其他：

    1、如逻辑是非必然执行的话，尽量用try-catch保证逻辑执行，避免js报错导致逻辑停止；

    2、如非必要，定时器必须在页面生命周期结束后或者逻辑执行完毕后清空；

    3、弹出类遮盖类等的UI尽量用组件封装；

    4、处理请求超时或请求失败等情况；

    5、合理运用wxs；

    6、小程序跳转路径用绝对定位的方式，减少文件结构变化导致报错；

    7、在基本配置数据未加载完成前先不执行页面逻辑，避免页面错误或者无谓的数据请求；

    8、开发完成后必须将非必要控制台输出删除；

    9、优化setData机制，只渲染需要的部分数据即可；

    10、减少dom节点操作；

    11、方法整合，简单而逻辑相同的方法可以根据参数来执行对应逻辑；

    12、请求发出前尽量先检查必要参数是否正确；

wxml部分：

目的： 1、减少逻辑层与视图层之间的数据传输；

            2、加快页面渲染速度；

            3、优化体验。

具体规范：

条件渲染：if、hidden，尽量使用hidden。

列表渲染：wx:key必须填入。

列表处理：尽量减少参数来处理列表方法，减少视图层和逻辑层之间的数据传输。

原生组件：必须熟悉小程序原生组件的弊端，做出合理的措施，增加交互体验。

标签：尽量减少标签数量。

备注：模块备注。

自定义组件：尽量把组件放在页面底部并备注。

逻辑处理：运用wxs加快页面渲染逻辑处理。

UI模块：样式相似并逻辑相似的UI可用组件封装；

    例子：

wxs方法

引入wxs文件

调用wxs方法

wxss部分：

目的： 1、高效的UI开发。

            2、提供良好的UI交互。

具体规范：

    1、封装样式。

    2、具体属性顺序（1: 定位；2: 外部；3: 本身）。

    例子：

例子