奇舞特训营 JavaScript

第零课

月影@75team

课件内容未经授权不得用于商业用途

Copyright © 75team.com All Right Reserved

如何写 JavaScript

问题1:操作 DOM

<ul id="user-list">
	<li>张三</li>
	<li>李四</li>
	<li>王五</li>
	<li>赵六</li>
</ul>
body{
	background-color: white;
	font-size: 24px;
}
#user-list{
	line-height: 1.5em;
}
#user-list > li:hover{
	background-color: rgba(0,0,0,0.3);
}

JavaScript?

版本 1

版本 2

版本 3

三个版本比较,你更喜欢哪个版本?


为什么?

问题 1 的思考

  • 写 JavaScript 操作 DOM 要注意什么
  • JavaScript 与 HTML、CSS 的职责如何分离
  • 把复杂性放在哪一头,为什么?

问题2:API 的设计

三个状态用红(stop)、绿(pass)、黄(wait)表示


要求用 JavaScript 让三个状态轮流切换


每个状态的停留时间是 2 秒

版本 1

版本 1 的问题?

如果需求增加到 5 盏、10 盏灯?

const traffic = document.getElementById('traffic');

(function reset(){
  traffic.className = 'wait';
  
  setTimeout(function(){
      traffic.className = 'stop';
      setTimeout(function(){
        traffic.className = 'pass';
        setTimeout(function(){
          ...
            ...
              ...
                ...
                  setTimeout(reset, 2000)
                ...
              ...
            ...
          ...
        }, 2000)
      }, 2000)
  }, 2000);
})();

过程耦合 + Callback Hell…… 差评!!!

版本 2

版本 2 的问题?

依赖于外部变量 stateList、currentStateIndex

封装性不好……差评!!

版本 3

版本 3 的问题?

版本 3 虽然中规中矩……

但其实可复用性差!

版本 4

版本 4 的问题?

版本 4 函数式编程,抽象出 poll 方法,有点意思

然而需求来了……

PM 做了需求变更如下:


wait、stop、pass 状态的时长不相等,分别改成 1秒、2秒、3秒


版本 2 ……

版本 3 ……

版本 4 ……

那么是否要回归到版本 1 呢?

版本 5 

版本 5 的问题?

版本 5 用 Promise 解决问题, 抽象出 wait 方法,还不错

版本 6 

版本 6 的问题?

  • 优点:面向对象、函数式、Promise、灵活可扩展
  • 缺点:复杂度、实现难度,是否过度设计了?

设计是双刃剑

写代码简单

程序设计不易

且行且珍惜……

问题 3 :JavaScript 的“效率”?

给定一个很大的数组,数组里面有许多整数,用 JavaScript 实现一个函数,要求:


将数组中之和为 10 的每一对数配对并找出,返回这些数配对后的数组。


例如:[11, 3, 8, 9, 7, -1, 1, 2, 4...]


得到:[[11,-1],[3,7],[8,2],[9,1]...]

版本1

版本2

为什么版本2比版本1快很多?


还有没有别的解法?

总结

这一课,我们学习了什么?

Your browser does not support the canvas element.

奇舞特训营 JavaScript (第 0 课)

如何写好原生 JavaScript

创建于2016年12月17日

分享“幻灯片”

分享链接
嵌入到网页

HI, 亲爱的用户

为获得声享编辑器的最佳体验,建议使用
360安全浏览器极速模式?或Chrome浏览器

下载360浏览器 下载Chrome