无标题文章

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: 本身)。

    例子:

例子

推荐阅读更多精彩内容

  • JAVA面试题 1、作用域public,private,protected,以及不写时的区别答:区别如下:作用域 ...
    JA尐白阅读 665评论 1 0
  • 1.要做一个尽可能流畅的ListView,你平时在工作中如何进行优化的? ①Item布局,层级越少越好,使用hie...
    fozero阅读 309评论 0 0
  • WebView·开车指南 2016-08-31BugDev 北京市东城区首席Bug布道师开山之作,一整月交通事故血...
    53c021c38a1d阅读 410评论 0 1
  • 2017年母亲节,我第一次早起跑步。 到2018年母亲节,坚持跑步整一年。 我是怎么跑起步的呢? 身边人的影响。 ...
    韩溪流阅读 699评论 0 9
  • 践行第47天,《说说你对情商的理解》 以前我认为情商主要是控制不良的情绪,简单的说就是不发脾气。能说会道,见人说人...
    天刀笑剑钝阅读 128评论 1 1