前端代码书写tips

背景

前端项目代码书写规范，写出好代码！
每一行代码都应当有它存在的意义。如果没有意义，请立即修正！

eslint不可少

这个配好了。可以自动检测或修复各种语法问题、格式问题。
eslint常用规则。总结下（待补充）

你可以使用 . eslint.* 文件或 package.json 文件中的 eslintConfig 选项来配置 ESLint。
你的.eslint.* 文件可以是 .eslintrc.json、.eslintrc.js 或 .eslintrc.yml。
参考：https://www.jianshu.com/p/db768dbce06d

React项目tips

1、拒绝重复代码
能维护一份代码，绝不维护多份.
新手无法避免写重复代码，就不断的去抽取公共方法，不断去优化自己的代码。拒绝魔法数字、拒绝常量不定义…
2、拒绝大文件
拒绝一个需求只写一个文件，这个文件长达1000行。也就是拒绝大文件。
3、拒绝超高圈复杂度(待补充)
递归和多重嵌套循环
多重switch
4、代码模块化
一个需求拆分成多个功能，能抽取公共组件就抽取。
对需求理解，进行合理的模块划分，分清楚父子组件、兄弟组件、分清楚state和props。然后动手写代码。
5、适当用上代码重构方法，精炼代码
卫语句
6、适当用上设计模式
工厂模式
构造函数模式？–好像不是23种设计模式之一吧？

工厂模式主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中 在一个位置防止代码重复。
工厂模式解决了重复实例化的问题 ，但还有一个问题,那就是识别问题，因为根本无法搞清楚他们到底 是哪个对象的实例。
代码
function createObject(name,age,profession){//集中实例化的函数var obj = newObject();
obj.name =name;
obj.age = age;
obj.profession= profession;
obj.move =function () {
returnthis.name + ’ at ’ + this.age + ’ engaged in ’ + this.profession;
};
return obj;
}
var test1 = createObject(‘trigkit4’,22,‘programmer’);//第一个实例var test2
=createObject(‘mike’,25,‘engineer’);//第二个实例

构造函数模式
使用构造函数的方法 ，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：
1）构造函数方法没有显示的创建对象 (new Object());
2）直接将属性和方法赋值给 this 对象;
3）没有 renturn 语句。

7、合理使用hooks
我基本已经放弃类组件的写法了
8、自定义hooks，抽取公共逻辑
9、合理使用redux
一份数据多处使用。唯一的问题是，记得在恰当的时机清理你的缓存。

CSS书写

1、less模块化
使用前：
为了不让不同页面的样式互相影响，必须要保证每个lessId唯一，为了保证唯一，前缀上加了模块名，显得这个lessId超级长复杂

页面1
.createTask-name{}
.createTask-tip{}
.createTask-dialog{}
页面2
.modifyTask-name{}
.modifyTask-tip{}
.modifyTask-dialog{}
...

.jsx文件
import './module.less';
<div className={'createTask-name'}></div>

使用后
不必担心不同文件的lessId会重复。只要保证一个文件中的lessId不重复就好了

.less文件
.name{}
.tip{}
.dialog{}
.jsx文件
import styles from './index.modules.less';
<div className={styles.name}></div>

2、拒绝冗余样式
vscode有没有什么插件可以快速检测到你写的那些冗余样式呢？？？
常常遇到，有人给一个span属性加width
行内元素是没有width的，加了根本不生效，这就是冗余样式

性能优化

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，
减少DNS查找等
请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加
载。
请求带宽：压缩文件，开启GZIP，

开源

开源清单
插入之前整理的表格，梳理每个开源件的用途

原生js书写tips

1、拒绝var拥抱let
可以避免一些古怪的问题

用hash-table来优化查找
少用全局变量
用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
用setTimeout来避免页面失去响应
缓存DOM节点查找的结果
避免使用CSS Expression
避免全局查询
避免使用with(with会创建自己的作用域，会增加作用域链长度)
多个变量声明合并
避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率
尽量避免写在HTML标签中写Style属性