JavaScript 网页编程（六）—— ES6重点概念 + 开发基本规范

目录

1.前端开发步骤

2.SVN 使用规范

3.文件命名规范

4.HTML 规范

5.CSS 规范

6.jQuery 规范

7.isNaN、isFinite

8.ES6 规范

9.ES6 习题

9.1 模板字符串

9.2 属性简写

9.3 方法属性

9.4 箭头函数

9.5 扩展运算符

9.6 解构赋值

9.7 回调地狱

9.8 对象新方法

---

1.前端开发步骤

1. 任务分配（开发经理）
2. 确定设计图（UI），确定开发需求（项目相关人员）
3. 项目开发登记（填表）
4. 接口文档定义（静态页面除外）
5. 页面开发
6. 确定开发效果（UI）
7. 提交代码，后续跟踪

2.SVN 使用规范

1. 用自己的账户
2. 不要签出整个目录
3. 先更新（工作前）再提交（下班前），多提交，写好说明
4. 不提交：不能编译的代码 / 自动生成的文件
5. 慎用锁定

3.文件命名规范

1. 无空格特殊字符
2. 小写字母，中划线分割
3. 入口文件用 index 命名
4. 外部插件-modules，组件-components

• 安装工具：npm install -g tfbi
• 创建项目：fbi init 项目名称

4.HTML 规范

• ID名是唯一的，写在最外层元素上，禁止使用 ID 写css样式
• 使用单闭合标签时尾部 不加 斜杠
• script 标签统一放在 body 结束标签的前面，link 标签统一放在 head 结束标签的前面

5.CSS 规范

• 定位 > 盒模型 > 文字 > 其他内部属性 > 其他 css3属性

1. 定位：z-index，position，float，top，right，bottom，left
2. 盒模型：width，height，padding，margin，border
3. 文字：font-*，line-height，text-align，text-decoration....
4. 其他内部属性：overflow，opacity，cursor....
5. 其他 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 查找：

 

1. function setSidebar() {
2.  const $sidebar = $('.sidebar');  // 把要处理的对象存在变量里，不要直接操作
3.  $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

1. function foo() {
2.  return () => {
3.   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])：从后面补充字符