智能柜台C端代码规范

语法上建议:

一、建议尽量使用”===”代替”==”

24f4a3f955f18712f0e98e2dbb7f8cc6.png

上述比较好

b54563854c72a2b81753b4c2dd9b6f7f.png

上述HX0188是一个字符串,用!==替代比较好

二、引用的组件/插件在当前vue文件内并未使用

例:

chk_bcip\src\business\common\views\ common-auditwait.vue

86ef30c81112a9ddaba2868fea74782f.png

Device._$Utils.AppUtils 都未使用,删除掉其引用

同理。调用组件/插件,也不能少import

2f5e9056c87878e1242eb27d4e885439.png

上述就是少了Device._$import

chk_bcip_components\src\components\business\pinpad\base-inputpassword.vue

initbeforeJump里使用了$"siu")$('pinpad")

但当前vue里缺少定义:

import ( Device ) from "@/platform";

let $ = Device.$:

三、多次使用的页面元素或对象属性,建议单独定义为变量对象

例:

chk_bcip\src\business\common\views\ common-auditchecktype.vue

bd0c2e1040839806d1a54bf93a1d4c76.png

this.trandata.business.busiid 多次使用,不如先定义一个变量等于this.trandata.business.busiid,再用定义的变量去后续的判断

四、属性的value使用前,建议先判断是否存在这个key的有效性

6c5cdb281231c784c0de49480ea8f737.png

上述是一个比较好的做法,在判断长度前,先判断button.children的有效性,

但是也最好能考虑button.children的类型,如果期望是数组,更好的做法是再判断下button.children的类型,然后再判断其length

五、非响应式数据可放在data(){}外定义

C:\WorkFile\gwi\kiosk-cli-hxb\src\business\sysinit\views\ sysinit-updatekey.vue

7b861128cf5a5e045e6322ea8e1b20c7.png

上述根据场景,将部分常量定义在data外,是一个好的做法。

六、一些比如判断条件里是数字组成或单独数字时,建议把在一个公共文件里定义成语义化字符串。

a5a0b16b1aafc306fc17e55405182782.png

上述数字的判断条件,可以考虑在当前vue或统一某公共文件里用能够表达出意义的英文定义一个常量,增加可阅读性。在公共文件定义的话也可以多人多文件使用时形成统一。

七、代码有调用页面的ref时,避免写多次this.$refs.xxx,可先赋值给一个临时变量。

6f1bf0f198589ce6625e4e175edb5206.png

上述this.$refs.soundplayer使用了两次,可以保留这种写法,但如果类似这样有多次连续调用this.$refs.xxx时,可先赋值给一个临时变量,减少dom消耗。

八、建议使用scss lessCss预编译。

74da9263617c679ed96c3f6a8170d0e4.png

比如多次使用某颜色,用css预编译写法,就可定义一个变量,每个<style>里使用,也方便统一修改。

九、避免使用一些浏览器提示不符合规范或即将要淘汰的写法,

比如穿透, /deep/要被淘汰,可用::v-deep

例:

chk_bcip\src\business\common\views\ common-auditwait.vue

The /deep/ combinator was a part of Shadow DOM v0, which has been deprecated and removed. Starting in M63, the /deep/ combinator was treated as a no-op, equivalent to a space “ “ combinator. As the code for all of Shadow DOM v0 was removed completely in M89, /deep/ will now throw exceptions in some JS operations, such as querySelectorAll. Simply replace it with “ “ to get pre-M89 behavior back.

翻译过来的意思是,在89之前,chrome浏览器会将/deep/ 当作空格字符串来处理,后面就完整删除Shadow DOM v0的内容了。

b155280ad13f7b829de099afc0756993.png

十、有些接口调用时需要考虑是否使用同步方式

比如有的xxxtran.vue

doTran()方法里

需要加 async... await

(依据实际情况)。

十一、优化条件判断

chk_bcip\src\business\common\views\common-checkbusienable.vue

isBlakGreyCustsuccess0方法里。

b57d0164ca9eedf26c7c02676788e48f.png

可优化为 if… else if….else

另外,ifswitch等,需要有默认分支,if要有elseswitch要有default。

1c2a243267fe2e2ad847f4276a3b1a29.png

十二、一些对值类型的判断可优化,

比如判断是否是undefined

chk_bcip_components\src\components\business\pinpad\base-inputpassword.vue

resetpasswourd if((cardHasinserted != undefined …){}

可考虑使用Lodash

比如 _.isUndefined(value)

f302e1d9b6667211981844a9e5c07d9f.png

Lodash 简介 | Lodash 中文文档 | Lodash 中文网(lodashjs.com)

9ca26f4aaa69dd8f6de83d8457f34e91.png

十三、建议使用循环时,尽量考虑效率因素。

5cc39a24a332098e28d528bb1ae3627a.png

比如加上Object.hasOwnProperty可避免去没必要的原型链查询。

十四、减少html的内联样式(行内样式),考虑到适配也尽量在style少写px单位写法。

58922ba399cccb6efca4e1e6f6a55433.png

十五、建议给变量设置默认值定义,尤其是非自己受控的,比如从接口接收的数据、从缓存内读取的数据等。

十六、如果页面开始时绑定了事件,也要在周期内进行事件解绑。

bb0fa18127d8753fd32af3fe873d6599.png

十七、依据实际情况,尽量减少使用try…catch,方便问题定位

十八、加注释(最少保证每个函数/方法有注释,重点IRTIR有注释(目前代码有的标记了))

5e3c77c7515dd9bb5004e70f1aef4e11.png

/**

* 测试

* @param {number} num

* @return {void}

*/

function test(num) {

console.log(num);

}

其他

@api: 提供给第三方使用的接口

@author: 标明作者

@param: 参数

@return: 返回值

@todo: 待办

@version: 版本号

@inheritdoc: 文档继承

@property: 类属性

@property-read: 只读属性

@property-write: 只写属性

@const: 常量

@deprecated: 过期方法

@example: 示例

@final: 标识类是终态, 禁止派生

@global: 指明引用的全局变量

@static: 标识类、方法、属性是静态的

@ignore: 忽略

@internal: 限内部使用

@license: 协议

@link: 链接,引用文档等

@see: link 类似, 可以访问内部方法或类

@method: 方法

@package: 命名空间

@since: 从指定版本开始的变动

@throws: 抛出异常

@uses: 使用

@var: 变量

@copyright: 版权声明

十九、国际化资源里面不能直接写中文,要不就不使用国际化,要不就加到国际化数据里面取

7cc1bd75f8ed7792e17174acc774af44.png

二十、图片名字不能出现中文,会导致Linux系统上面打包不识别(乱码)。

二十一、公共的平台或者组件代码修改一定要及时反馈给组长或者技术经理。

二十二、问题:Number(空字符串) == 0

dfbc494fbffdc2755d0df41e605459a4.png

一些研究:

45ba8d0bec173150323dab889bd1c0bb.png

8d8e22f1595294228067a82c92c95d9c.png

   34279c9068891ea22ef9992de32a4237.png

建议:

通过一元操作或者带有基数的parseInt 来解析成数字。parseFloat 具有性能上的优势,但是它会在相较于返回 NaN 更为合适的情况下返回一些数字。

二十三、

跳转业务的时候,假如第一个业务有凭证,然后跳进去的第二个业务也有凭证,除了需要改变业务idbusiId,还需要确认有没有更新盖章(allVocherFileInfo也需要同步更新),要不然会导致凭证上传的时候后端会把盖章数据第一笔传给了第二笔业务的盖章,这样就错乱了。

好啦,本期内容就分享到这里,你知道的越多,你不知道的越多!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/356929.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为云电脑和马云无影比_阿里云打造未来电脑无影,却因为5G限制,很难达到普及...

在9月17日&#xff0c;在2020阿里巴巴云栖大会上&#xff0c;阿里云发布了第一台云电脑"无影"&#xff0c;极致的简约&#xff0c;一张卡片大小的机器就等于一台电脑了。看到这款电脑的宣传片&#xff0c;真的是极致的未来感&#xff0c;随随便便一块小透明玻璃就是电…

SQL SERVER 2016研究三

2016 SQL SEVER 全程加密程式 column encryption settingEnabled; 重点&#xff1a;需要使用.Net Framework 4.6 新建一个程式如下&#xff1a; 1、创建链接数据库&#xff0c;必选栏位&#xff0c;影响加密。 2、或者在web.config文件数据链接字符串增加如下语句&#xff1a; …

小车故障灯亮显示大全_史上最全汽车故障灯大全,留着一定有用!

大家好&#xff0c;我是汽修小诺&#xff0c;喜欢有关汽车知识的小伙伴请关注我哦&#xff0c;感谢大家&#xff01;现在有车的朋友越来越多&#xff0c;开车途中难免会遇到汽车故障显示灯亮&#xff0c;从而不知道什么原因&#xff0c;有的朋友不敢开&#xff0c;等修理厂来检…

策略设计模式示例

本文是我们名为“ Java设计模式 ”的学院课程的一部分。 在本课程中&#xff0c;您将深入研究大量的设计模式&#xff0c;并了解如何在Java中实现和利用它们。 您将了解模式如此重要的原因&#xff0c;并了解何时以及如何应用模式中的每一个。 在这里查看 &#xff01; 目录 …

vscode修改json.maxItemsComputed配置解决提示

由于要测试明细查询打印业务&#xff0c;分页每页显示30行&#xff0c;要打印30页以上的数据&#xff0c;在打印的过程中会出现分页的问题&#xff0c;这里使用仿真工具测试&#xff0c;需要修改mock数据&#xff0c;造数据&#xff0c;超过5000行就有提示了&#xff0c;需要扩…

【面试题系列|前端面试题】前端高频面试题总结(2021年最新版)

面试过不少前端从业者&#xff0c;简历写的平平淡淡&#xff0c;别人会的技能他也都会&#xff0c;看起来什么都掌握一些&#xff1b;有些会请过来当面聊一下&#xff0c;有些就直接拒绝了&#xff08;如果是公司内要求独立完成项目的岗位&#xff0c;简历里放很多学习时候的DE…

观察者设计模式示例

本文是我们名为“ Java设计模式 ”的学院课程的一部分。 在本课程中&#xff0c;您将深入研究大量的设计模式&#xff0c;并了解如何在Java中实现和利用它们。 您将了解模式如此重要的原因&#xff0c;并了解何时以及如何应用模式中的每一个。 在这里查看 &#xff01; 目录 …

震惊!2021年数十个技术领域图谱曝光,包含Golang、区块链、人工智能、架构师等领域学习路线

前言:不知道你是否和我一样,刚开始学习某个技术领域的时候缺乏坚持的动力,没有一个清晰的学习路线,学习的过程中没有人指导,遇到问题没人一起解答,想深入学习某个领域而又无从下手,不知道该从何处学起?这不,你想要的技术图谱来啦。有了这款武功秘籍,不光能开阔视野,…

70多套java必练项目,适合小白上手!

导读&#xff1a;这些项目不管是找工作练手&#xff0c;还是公司使用当作模板进一步改进&#xff0c;亦或者是当作毕业设计&#xff0c;都很有借鉴意义&#xff01; 编译器建议使用&#xff1a;IDEA,Myeclipse,eclipse,HB-X等都可以。 数据库建议使用&#xff0c;mysql,oracle,…

mysql mycat 路由规则_Mycat分库路由规则

Mycat分库路由规则发布时间&#xff1a;2020-06-15 16:54:10来源&#xff1a;51CTO阅读&#xff1a;11651作者&#xff1a;lzf05303774一、Mycat分库路由分为连续路由和离散路由。1、连续路由&#xff1a;(1)、常用的路由方式&#xff1a;auto-sharding-long、sharding-by-date…

孙叫兽CSDN社区云----WebIT已创建,欢迎大家前端全栈小伙伴踊跃加入

目录 社区云是什么&#xff1f; 创建CSDN社区云WebIT的目的 推荐分享的技术点&#xff08;如下图所示&#xff09; 社区成员权益 版主权益 管理员权益 WebIT社区云积分规则 WebIT优质版主及管理员可以申请直播分享前端技术 WebIT社区云将为社区运营者提供&#xff1a; …

迭代器设计模式示例

本文是我们名为“ Java设计模式 ”的学院课程的一部分。 在本课程中&#xff0c;您将深入研究大量的设计模式&#xff0c;并了解如何在Java中实现和利用它们。 您将了解模式如此重要的原因&#xff0c;并了解何时以及如何应用模式中的每一个。 在这里查看 &#xff01; 目录 …

uibinder表单提交_使用UIBinder的GWT自定义按钮

uibinder表单提交这是一个有关如何在GWT上使用UIBinder创建自定义按钮的示例。 public class GwtUIBinderButton implements EntryPoint {public void onModuleLoad() {Button button new Button();button.setText("Button");button.addClickHandler(new ClickHandl…

python用import xlwt出现红字_如何用python处理excel

最近看到有很多的python课程是教人怎么用python处理excel,我看了一下价格收费还贼高...这么初级毫无水平的操作我的粉丝们就不要花钱去报课程了..我免费教你们怎么做.首先我们先要安装两个模块,一个叫做xlrd,一个是xlwt.安装如下:打开cmd输入pip install xlrd等待安装成功,成功…

什么是升职率?

我确实相信您熟悉彼得原则 。 一般而言&#xff0c;该原则是一种观察&#xff0c;即晋升可能并且将导致晋升人员不再符合该职位的条件。 对于JVM&#xff0c;存在类似的问题。 太快地提升对象可能会对性能产生重大影响。 在这篇文章中&#xff0c;我们将探讨提升率的概念&…

mysql自增id用完了_MySQL表自增id用完了该怎么办?

我们知道MySQL表可以定义一个自增长的id&#xff0c;如果我们的表没有指定主键字段&#xff0c;那MySQL会给我们的表创建一个不可见的&#xff0c;长度为6个自己的row_id&#xff0c;然后不停地往上加步长&#xff0c;虽然生活中自然数是没有上限的&#xff0c;但是在计算机里&…

jmeter插件监控cpu小节点

JMeter使用plugins插件进行服务器性能监控 性能测试时&#xff0c;我们的关注点有两部分 1 服务本身&#xff1a;并发响应时间 QPS 2 服务器的资源使用情况&#xff1a;cpu memory I/O disk等 JMeter的plugins插件可以实现对"二"的监控&#xff0c;具体操作步骤如下(…

mysql写入监控_zabbix监控mysql操作

说明&#xff1a;配置zabbix自带Mysql模板# 创建目录mkdir /var/lib/zabbix# 创建连接数据库文件touch /var/lib/zabbix/.my.cnf# 写入数据连接信息[client]host 192.168.0.148user rootpassword 123dffsdfs# 创建监控项文件touch /etc/zabbix/zabbix_agentd.conf.d/userpar…

openshift_云上的播放框架变得简单:Openshift模块

openshift仅仅几年前&#xff0c;找到一个负担得起的Java Web应用程序托管解决方案是一项艰巨的任务&#xff0c;而寻找免费的托管解决方案是一项不可能的任务。 更不用说考虑自动缩放&#xff0c;单命令部署&#xff0c;持续集成等问题了&#xff0c;这简直就是科幻小说。 去年…

xclock 不出来界面_macOS 使用 XQuartz 支持 X11 实现 Linux 图形化界面显示

更多奇技淫巧欢迎订阅博客&#xff1a;https://fuckcloudnative.io前言在 Windows 中相信大家已经很熟悉使用 Xmanager(Xshell), MobaXterm, SecureCRT 通过 X11 实现 Linux 图形化界面显示&#xff0c;我的需求是在 macOS 下使用 iTerm2 作为 Terminal 实现 X11 图形化界面显示…