042_前端规范

最终目的—去除冗余，让代码易于维护

常见代码片段

// 遍历数组
[1,2,3].forEach(function(value, index)) { console.log(value)
}
// 映射新数组
arr = [1,2,3].map(v => v*2)  // [2,4,6]
// 所有元素是否通过测试
[1,2,3,4].every(v => v>2)  // false
// 是否有元素通过测试
[1,2,3,4].some(v => v>2)   // true
// 累加
[1,2,3,4].reduce((pre,cur) => pre+cur)  //10//过滤数组
[1,2,3,4,5].filter(v => v>3)  // [4,5]
//查找符合条件的元素
arr = [{name:’zhangsan’,age:17},{name:’lisi’,age:19}];
arr.find(v => v.age>18)
// 查找索引
arr.findIndex(v => v.age>18)
// 是否包含
[1,2,3,4].includes(3)  // true
// 字符串串的拼接
[’hello’,’world’].join(‘—’)//获取对象的key值
Object.keys({name:’joy’,age: 1})
//获取对象里数据的数量
Object.keys({name:’joy’,age: 1}).length
// 遍历数组
Object.entries({name:’joy’,age: 1})
//结果：[[‘name’,'joy'],['age',1]];
Object.entries({name:’joy’,age:
1}).forEach(([k,v])=>{  console.log(v)
}) // 去除空白
’   Helo  world    ’.trim()
//重复创建字符串
'hello'.repeat(2)
//连接数组
arr1 = [1,2,3]
arr2 = [4,5,6,7]
arr1.concat(arr2)
[…arr1, …arr2]
// 数组去重
arr = [1,2,3,4,6,2,1,3,7,9]
[…new Set(arr)]

javascript规范

*校验规则eslint详细规则 * 使用：eslint-prettier 校验
1.驼峰命名，不要使用拼⾳音如：activiesList
2.使用两个空格进⾏行行缩进；
3.⽤const定义常量，常量, 使用全部字⺟母⼤大写；如果对变量重新赋值，用let替代var； eslint: no-var

如：
const NUM1 = 1;
let cont = 1  if(true) { cont+ = 1
}

4.boole(} )an 类型的变量使用 is 或 has 开头。
如：
let isShow = true
let hasShow = false
5.直接用字⾯面量定义对象 eslint: no-new-object
const item = {}
6.三元操作符始终写在前⼀一⾏行行, 以免分号的隐式插⼊入产⽣生预想不到的问题。
如：let x = a ? b : c; let x = foo.bar(). doSomething(). doSomethingElse();

7.单⾏行行注释  //
8.多⾏行行注释
/*
*   代码执⾏行行到这里后会调用setTitle()函数
*   setTitle()：设置title的值
9.函数(*/ )注释 强制要求dsdoc格式注释。参数和返回值
/**
*   以星号开头，紧跟⼀一个空格，第⼀一⾏行行为函数说明
*   @param {类型} 参数 单独类型的参数
*   @param {[类型|类型|类型]} 参数 多种类型的参数
*   @param {类型} [可选参数] 参数 可选参数用[]包起来
*   @return {类型} 说明
*   @author 作者 创建时间 修改时间（短⽇日期）改别⼈人代码要留留名
*   @example 举例例（如果需要）
*/如：/**
*   Add two number
*   @param {number1} num1 The first number
*   @param {number2} num1 The second number
*. @return {number} the sum of the two numbers
*/ function add(num1, num2){ return num1 + num2;}
10.不要用 eval()
11.⾏行行尾需要加分号；
12.动态给对象赋值
如：function getKey(k) { return `a key named ${k}`;
}
// bad
const obj = {id: 5, name: ‘Su San’,
};
Obj[getKey(‘enabled’)] = true; // good
const obj = { id: 5, name: ‘Su San’, [getKey(‘enabled’)]: true,
};
13.对象⽅方法使用简写
// bad
const obj = { value: 1, addValue: function(value){ return value + obj.value };
}// good
const obj = { value: 1, addValue(value){ return value + obj.value; }
};
14.对象属性简写
const name = ‘Su shan shan’
// bad
const obj = { name：name, };// good
const obj = { name, };
15.对象简写写在前⾯面
const name = ‘Su shan shan’
const ageVal = 18
// bad
const obj = {  id: ‘123’, name, sex: ‘⼥’, ageVal
};// good
const obj = { name,
ageVal,
sex: ‘女’,id: ‘123’, };
16.合法的key不需要引号  “易读，易于压缩”
// bad
const bad = { ‘foo’：1,‘bar’: 2,‘b-ful’:3
}// good
const good = { foo：1, bar: 2, ‘b-ful’:3
};
17.⽤`Object.assign` 浅拷贝，用展开符号…去获取⼀一个新对象
// every bad
const orign1 = {a:1, b:2}
const copy = Object.assign(orign1, {c:3})
delete copy.a // bad
const orign1 = {a:1, b:2}
const copy = Object.assign({},orign1, {c:3}) // good
const orign1 = {a:1, b:2}
const copy = {…orign1, c:3)
const {a, …noA} = copy  //noA => {b:2,c:3} 18.用字面量创建数组
// const item = []
19.用Array.form 把类数组转换为数组
const foo = document.querySelectorAll(‘.foo’)
const nodes = Array.form(foo)
20.数组的回调函数，要有return
[1,2,3].map(x => {[1,2,3].map(x => x*2) const y = x+1; return  x*y
})
21.用… to 复制数组
const len = items.length;
const itemsCopy = [];
let i;
// bad
for(i=0;i<len.length; I+=1) { itemsCopy[I] = items[I];
}
// good
const itemsCopy = […items]
22.简单的字符串串有单引号
23.使用字符串串模版连接字符串串，可读性⽐比较好
function sayHi(name) {
return `How are you  ${name}`
}

解构

使用对象解构来获取对象的值
// bad
function getFullName (user) { const firstName = user.firstName const lastName = user.lastName return `${firstName} ${lastName}`
}
// good
function getFullName (user) { const {firstName, lastName} = user return `${firstName} ${lastName}`
}
// good
function getFullName ({firstName,lastName}) { return `${firstName} ${lastName}`
}数组解构
const  arr  = [1, 2,3,4,5]
// bad
const first = arr[0]
const second = arr[1]
// good
const [first,second] = arr 返回多个值时，用对象解构，不要用数组，因为“返回值不需要考虑顺序”
// bad
function processInput(input) {
return [left, right, top, bottom]
}
// good
function processInput(input) {
return {left, right, top, bottom}
} 有默认值的参数放后⾯面
// bad
function handleThing(opts={}, name) {
//…
}
// good
function handleThing(name, opts={}) {
//…
}

下载文件重命名

window.open(urll + '?attname=会议签到表.xls','_blank')

042_前端规范 2021-06-03相关推荐

2021.06.03邮票面值设计
2021.06.03邮票面值设计题目描述给定一个信封,最多只允许粘贴 N 张邮票,计算在给定 K(N+K≤15)种邮票的情况下(假定所有的邮票数量都足够),如何设计邮票的面值,能得到最大值 MAX ...
2021.06.03合并石子+能量项链
2021.06.03合并石子+能量项链题目描述在一个圆形操场的四周摆放 N 堆石子,现要将石子有次序地合并成一堆,规定每次只能选相邻的2堆合并成新的一堆,并将新的一堆的石子数,记为该次合并的得分. ...
【财经期刊FM-Radio｜2021年03月04日】
title: [财经期刊FM-Radio|2021年03月04日] 微信公众号: 张良信息咨询服务工作室 [今日热点新闻一览↓↓] 科技股拖累纳指跌超2%,ARKK跌入熊市,美债收益率又猛升,美国5年 ...
软件本地化团队 - 〖0day 资源〗 - 2006.06.03 0day
软件本地化团队 -> [0day 资源] -> 2006.06.03 0day 登录 -> 注册 -> 回复主题 -> 发表主题 kfm 2006-06-03 22:39 ...
【财经期刊FM-Radio｜2021年03月29日】
title: [财经期刊FM-Radio|2021年03月29日] 微信公众号: 张良信息咨询服务工作室 [今日热点新闻一览↓↓] 北京时间周一亚洲早盘,美股期货和原油期货小幅走低. 低基数叠加&qu ...
Mculover666的博客文章导航（嵌入式宝藏站）（2021.06.17更新）
一.MCU系列 1. 开发环境 [Keil MDK](一)Keil MDK 5.28 的下载.安装.破解 [Keil MDK](二)Keil MDK中芯片器件包的安装 [Keil MDK](三)Kei ...
前端实习周记06 （遇到棘手问题不要一路走到黑，山穷水复疑无路，柳暗花明又一村）
前端实习周记06 本周遇到了一个想想就肝疼的坑. 做一个页面需要使用附件下载的接口.情况是这样的: 在发起下载http请求后,后端直接传递了一个二进制文件,可以接受但是一直未能跳转下载,尝试解决这个问 ...
【财经期刊FM-Radio｜2021年03月01日】
title: [财经期刊FM-Radio|2021年03月01日] 微信公众号: 张良信息咨询服务工作室 [今日热点新闻一览↓↓] 2月份中国制造业PMI季节性回落,经济仍保持稳定恢复势头茅台集团去 ...
前端规范 - js开发规范
因为会牵扯到业务逻辑,在实际开发场景中,js开发会占绝大部分,相应的规范细节也比较多限于篇幅原因,加上有eslint的这个利器,本文只讲一些最最常用的规范 [强制] 开启eslint 开启了esli ...

042_前端规范 2021-06-03

042_前端规范

常见代码片段

javascript规范

解构

下载文件重命名

042_前端规范 2021-06-03相关推荐

最新文章

热门文章

042_前端规范 2021-06-03

042_前端规范

常见代码片段

javascript规范

解构

下载文件 重命名

042_前端规范 2021-06-03相关推荐

最新文章

热门文章

下载文件重命名