首页
学习
活动
专区
圈层
工具
发布

团队 React 代码规范制定

前言 团队中每个开发人员的水平不同,技术关注点不同,如果没有一份代码规范的参照和约束,那么项目中的代码将会风格迥异,难以维护,为保证代码质量和风格统一,特此拟定一份《团队React 代码规范》,这样整个团队的开发人员可以参照这份代码规范进行编码...注意: JS、SCSS、Vue 的代码规范可以查看作者之前写的另一篇文章《前端团队代码评审 CheckList 清单》。...4.3、引号 JSX 的属性都采用双引号,其他的 JS 都使用单引号 ,因为 JSX 属性 不能包含转义的引号, 所以当输入 "don't" 这类的缩写的时候用双引号会更方便。...7、key 属性设置 key 帮助 React 识别哪些元素改变了,比如被添加或删除。...尽管并没有减少应用整体的代码体积,但你可以避免加载用户永远不需要的代码,并在初始加载的时候减少所需加载的代码量。

2.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何制定企业级代码规范与检查

    但是会不会有同学不想使用推荐的规范,制定自己或者在推荐的规范中进行一些修改(比如一些老项目,加入规范,改动大,可能暂时忽略某些规范) 使用方式:如果想使用推荐,然后在推荐的基础上进行规范修改,可以直接在...看 eslint-config-prettier 中 recommended部分 的源码,源码中也有使用到 eslint-config-prettier(把已有格式化配置关掉),然后自己制定了基础的 recommended...quotes:编码规范字符串只能使用双引号,这里却使用了单引号; index.js 第1行第22个字符,报错编码规则为 semi:编码规范每行代码结尾必须加分号,这里没有加分号。...此时运行 npm run lint 会看到少了两条报错信息,并不是说编码规范变了,而是 Eslint 自动修复了基础错误,打开 index.js 文件,可看到字符串自动变成了双引号,并且代码末尾也加上了分号...总结 本文主要对开篇那张图片中的本地代码检查部分进行了详细讲解,从实践到原理,另外小伙伴们也可以想下我开篇提到的如何做出亮点,希望有所帮助,最后快去制定一个属于自己项目的规范与检查吧!

    2.9K20

    js代码规范

    前言 在js的代码开发中,我简单的总结出了以下规则,后面会陆续补充并且对规范进行分类。...js代码建议保存到后缀名.js的文件中 js代码不建议放在html中,原因有:不能被缓存,会增大网页文件的大小,可维护性不高,会影响页面的加载。...js吧任何表达式都当一条简单语句,会导致一些隐性的错误。如果自己没加分号,那么js解释器会自动添加分号,按照自己能读懂的断句。 9.2 复合语句 也称为语句块,被包在大括号内部。...比如对象 var obj={} ;var arr=[] eval eval是最容易混乱使用的js函数,他可以执行内部入参的js函数或者表达式,可以直接解析变量。不建议使用 。...尽量使用语法严格模式 消除代码之中的不友好;代码运行更快 ;保证运行的安全 ;为新版本的js做好铺垫。 22.

    12.7K30

    调试JS代码

    记录下近期对JS代码的调试过程 性能分析 启动程序之后,打开google浏览器对应页面,按F12或者Ctrl+Shift+I进入 开发者工具页面 目前主要使用的功能有: Performance....性能评估,比如我想看下页面刷新的性能瓶颈所在,先点击 按钮,然后进行页面操作,当页面刷新完成,再点击 按钮,则会生成性能报告,可以看到资源消耗,JS代码的执行逻辑等 Sources....性能报告页面的 部分,可以通过点击色块查看其所在的js代码文件,如 点击则会跳转到 功能栏,有了源文件就可以进行断点调试;这里注意部分js文件是压缩后的文件,建议手动修改程序替换成可读性更强的原始代码文件...查看程序的打印输出,比如我想知道某个函数的执行时间,可以在js代码中进行修改 当js代码执行之后,可以在console输出中看到foo的执行时间 Network....代码使用for循环进行操作,也就是线性复杂度,计算耗时随数据量的增大而线性增大 通过debug观察发现颜色数组会有不少重复的数值,而同样的输入会导致相同的输出,然后对整个数据的1M个点进行统计分析,发现重复率相当高

    23.9K10

    JS代码混淆 | js 逆向系列

    0x02 混淆与压缩 代码压缩技术主要追求的就是文件变小,这样可以提交网页或程序加载速度,一般来说,代码压缩过程中会将代码中的空格、换行符、注释和不必要的字符等删除 // 原代码 let v = "Hello...-g uglifyjs example.js -c -m --mangle-props -c 代码压缩 -m 代码混淆 --mangle-props 混淆属性名 -b 美化显示 // 原代码 const...JShaman https://www.jshaman.com/ JShaman 是国内公司开发的js代码加密商业产品 免费版可以直接使用 // 原代码 const person = { age...,里面涉及了大量的内容,难以理解,但是当删除这段代码后,对整个执行结果没有任何影响,所以这段代码就是给我们添堵的死代码 接下来我们就可以总结 JavaScript obfuscator 默认配置混淆采用的一些技术了...这使得将删除的字符串的顺序与其原始位置匹配变得更加困难。

    10.3K20
    领券