目录
1.前端开发步骤
- 任务分配(开发经理)
- 确定设计图(UI),确定开发需求(项目相关人员)
- 项目开发登记(填表)
- 接口文档定义(静态页面除外)
- 页面开发
- 确定开发效果(UI)
- 提交代码,后续跟踪
2.SVN 使用规范
- 用自己的账户
- 不要签出整个目录
- 先更新(工作前)再提交(下班前),多提交,写好说明
- 不提交:不能编译的代码 / 自动生成的文件
- 慎用锁定
3.文件命名规范
- 无空格特殊字符
- 小写字母,中划线分割
- 入口文件用 index 命名
- 外部插件-modules,组件-components
安装工具:npm install -g tfbi
创建项目:fbi init 项目名称
4.HTML 规范
- ID名是唯一的,写在最外层元素上,禁止使用 ID 写css样式
- 使用单闭合标签时尾部 不加 斜杠
- script 标签统一放在 body 结束标签的前面,link 标签统一放在 head 结束标签的前面
5.CSS 规范
- 定位 > 盒模型 > 文字 > 其他内部属性 > 其他 css3属性
- 定位:z-index,position,float,top,right,bottom,left
- 盒模型:width,height,padding,margin,border
- 文字:font-*,line-height,text-align,text-decoration....
- 其他内部属性:overflow,opacity,cursor....
- 其他 css3属性:animation,transition,transform....
- 浏览器私有前缀:
-webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;
6.jQuery 规范
- jQuery对象用 $ 变量表示:
(√)const $sidebarBtn = $(
'.sidebar-btn'
);
(×)const sidebar = $(
'.sidebar'
);
暂存 jQuery 查找:
function
setSidebar() {
const $sidebar = $(
'.sidebar'
); // 把要处理的对象存在变量里,不要直接操作
$sidebar.hide();
$(
'.sidebar ul'
).hide(); // 层叠式
$(
'.sidebar > ul'
).hide(); // 父节点 > 子节点
$sidebar.find(
'ul').hide(); //
jQuery对象 查询作用域7.isNaN、isFinite
- 用 Number.isNaN 代替 isNaN,用 Number.isFinite 代替 isFinite
- (×)
isNaN(
'1.2'
);
// false
(√)Number.isNaN(
'1.2.3'
);
// false
8.ES6 规范
- 不要保存引用 this, 用 箭头函数 或 函数绑定bind
function
foo() {
return
() => {
console.log(
this
);};}
9.ES6 习题
9.1 模板字符串
- ${ }里可以放任意的 JavaScript 表达式,也可以调用函数
const count = 8, price = 10; console.log(`加购一个后数量:${++count}, 总价:${count*price}`); // 加购一个后数量:9, 总价:90 console.log(`输出个字符串:${'cool'}`); // 输出个字符串:cool function myLove() { return "as you love!"; } console.log(`I love ${myLove()}`); // I love as you love!
- 如果
${ }
中的变量 不是 字符串,那么会按照一般的规则 转化为字符串const obj = {a:1, b:2}; console.log(`a = ${obj}`); // a = [object Object]
- 模板字符串会 保留 所有的空格、缩进和换行
9.2 属性简写
- 如果我们的需要的值不是单独变量,而是从某个对象取出属性
const pageNum = 0, pageSize = 10, user = {uid: 100000, password: '123123'}; const params = { pageNum: pageNum, // 原来 pageSize, // ES6 属性简写 user.password // 这么写是错误的 password: user.password // 需给定属性名才对,从对象中获取某个属性值 ...user // 扩展运算符 }
9.3 方法属性
let math = { add: function(a,b) { return a + b; }, // ES5:属性名对应方法 sub(a,b) { return a - b; }, // ES6:方法名自动识别为属性名 }
- 习题:方法名 作为 属性名
// Error 对象中的方法必须要有名字 let obj1 = { fn1(){}.bind() } // True let obj2 = { fn2: function(){}.bind() }
9.4 箭头函数
- 习题:return 必须返回一个整体,所以要用大括号把整体包起来 return
let getTempItem = () => { id: 's8309a82n', name: "Temp" }; getTempItem(); Uncaught SyntaxError: Unexpected token ':' let getTempItem = id => ({ id, name: "Temp" });
9.5 扩展运算符
- 解压:数组、对象、字符串
// 关于解压字符串 let myCountry = 'China'; console.log([...myCountry]); // ["C", "h", "i", "n", "a"] // 等同于:console.log(myCountry.split('')) cosnt resStr = {...myCountry}; console.log(resStr); // {0: "C", 1: "h", 2: "i", 3: "n", 4: "a"} // 问题:怎么取值呢? resStr[0] —————————————————————————————————————————————————————————————————————— // 关于解压对象 let you = { name: 'DJ', age: 16 } you = { ...you, school: 'DLPU' } // {name: "DJ", age: 16, school: "DLPU"} —————————————————————————————————————————————————————————————————————— // 关于解压数组 const rgb = ['red', 'green', 'blue']; const colors = [...rgb]; // 巴啦啦魔仙变,给我把rgb解压到这个数组里 // 结果: ['red', 'green', 'blue'] const colorList = ['yellow', ...rgb]; // ['yellow', 'red', 'green', 'blue'] console.log([...colors, ...colorList]);
- 习题:
let obj = {a: 1, b: 2}; console.log({a: 0, ...obj}); // {a: 1, b: 2} 会覆盖前面的赋值 let arr = [2,3,4]; console.log({...arr}) // {0: 2, 1: 3, 2: 4} console.log([...obj]); // 会报错,对象无法通过扩展运算符变成数组 // VM37:1 Uncaught TypeError: obj is not iterable at <anonymous>:1:17
9.6 解构赋值
- 解构赋值可以写 默认值
- 解构赋值可以选择 一部分属性 解构出来
this.thsService.getLog().then(res=>{ const { status, data } = res; const { status, data, data: { name, time } } = res; // console.log(status, data, name, time); }) // 还可以这样写,不重新赋值,直接解构: this.thsService.getLog().then({ status, data }=>{ console.log(status, data); }) let arr = [1, 2, 3, 4]; let [a, b, , d] = arr; // a=1, b=2, d=4 可以跳过一个值 // 解构赋值可以设置默认值 const { status = 500, data = null } = res; let [a=0, b=0, c=0, d=0, e=0] = arr;
- 区分剩余参数:
let restParam = (p1, p2, ...p3) => { // p3说:前两个参数你们拿走,剩下的都是我的了 console.log(p1, p2, p3); }; restParam(1,2,3,4,5); // p1 = 1, p2 = 2, p3 = [3, 4, 5]
- find()只能取出满足条件的一项,那如何取出数组中满足条件的所有项呢?
- arr.filter( item => item.id === 2 ); // [{id: 2}, {id: 2}]
9.7 回调地狱
// 一个动画的回调地狱例子 animate(ball1, 100, function () { animate(ball2, 200, function () { animate(ball3, 300, function () { animate(ball1, 200, function () { animate(ball3, 200, function () { animate(ball2, 180, function () { animate(ball2, 220, function () { animate(ball2, 200, function () { console.log("over"); }) }) }) }) }) }) }) }); // promise优化后 promiseAnimate(ball1, 500) .then(function () { return promiseAnimate(ball2, 200); }) .then(function () { return promiseAnimate(ball3, 300); }) .then(function () { return promiseAnimate(ball1, 200); }) .then(function () { return promiseAnimate(ball3, 200); }) .then(function () { return promiseAnimate(ball2, 180); }) .then(function () { return promiseAnimate(ball2, 220); }) .then(function () { return promiseAnimate(ball2, 200); }) // async/await优化后 async play() { await animate(ball1, 500); await animate(ball2, 200); await animate(ball3, 300); await animate(ball1, 200); await animate(ball4, 200); await animate(ball2, 180); await animate(ball2, 220); await animate(ball2, 200); }
9.8 对象新方法
- Object.values(obj): 返回由对象中属性值组成的数组;
- Object.entries(obj): 返回对象的每个属性名和所对应的值组成的数组
- ??:let c = a ?? b; // 等价于let c = a !== undefined && a !== null ? a : b;
- **指数操作符:let a = 7 ** 3; // a = 343,等同于 a = Math.pow(7, 3)
- padStart(maxLength, [fillString]):从前面补充字符
- padEnd(maxLength, [fillString]):从后面补充字符
JavaScript 网页编程(六)—— ES6重点概念 + 开发基本规范
最新推荐文章于 2024-08-13 16:49:07 发布