首页 > 代码库 > 奇舞js笔记——第0课——如何写好原生js代码
奇舞js笔记——第0课——如何写好原生js代码
摘要
1.好的代码职责要清晰，javscript不要用来操作样式；
2.API要设计的合理：通用性，适度的抽象（数据抽象，过程抽象），可扩展性；
3.效率问题：用好的、合适的算法（前端程序员要把自己当程序员）。
注：
1.学习视频地址
2.ppt地址
3.个人感想：
是我hin厉害的师父推荐我看的月影大大的视频，感觉对于我这个小白来说，真的是一遍又一遍的刷新知识面。我觉得像月影大大这种大佬的思路，我接触之后真的是受益匪浅。
所以我总结出来不仅是自己记笔记，也是想分享给想要成为真正的前端“工程师”的前端er。
真的很珍惜这种知识面被刷新的感觉——越学习，越感到自己无知，共勉。
目录
1. 问题一：操作DOM
版本1，初级工程师：
版本2，中规中矩：
版本3，专业版：
操作DOM问题的总结：
2.问题二：API的设计
版本1： 嵌套setTimeout
版本2： 数据抽象
版本3：数据抽象，封装（七八十分）（一定要会）（中规中矩）（项目中用起来不错）
版本4：过程抽象（版本2和3是数据抽象）
版本5： 改需求，改时间 的对策
版本6：（高级程序员写的）
API设计问题总结：
3.问题三：效率/性能问题
版本1：两个循环
版本2：利用数组的排序方法sort，先排序，再遍历
版本3：空间复杂度换时间复杂度
效率问题总结
4.总结
正文
1.问题一：操作DOM
做一个列表单选
版本1，初级工程师：
优点：
在ul上添加事件句柄，由于事件可以冒泡，在点击事件中筛选event.target来处理就可以
问题：
js负责的是“行为”
在js中定义样式,若需求改动后，会导致不灵活
js：不操作DOM样式，操作DOM状态
版本2，中规中矩：
分清职责：
css中添加样式类
js来操作状态（类属性）
版本3，专业版：
这样实现，充分利用html标准，更具有语义性，灵活
操作DOM问题的总结：
1.写 JavaScript 操作 DOM 要注意什么
不要操作DOM样式
（很多wvvm框架禁止直接在js中操作DOM的原因就是这个，害怕写出版本1那种代码）
2. JavaScript 与 HTML、CSS 的职责如何分离
html负责内容，语义
css负责样式
js负责状态，不负责样式
3. 把复杂性放在哪一头，为什么？
4. 框架？原生？：
框架帮你解决了代码写的不好的问题，一旦用惯了，再换框架，会写出问题很多的代码；
写原生的更能意识到自己的问题；
2.问题二：API的设计
三个状态用红(stop)、绿(pass)、黄(wait)表示
要求用 JavaScript 让三个状态轮流切换
每个状态的停留时间是 2 秒
版本1：
css：
优点：
html，css中把三个状态类”stop”,”wait”,”pass”放在父元素上，然后在css中直接用：nth-child操作父元素的某个子元素，这样灵活性很高
缺点：
如果需求增加到 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…… 差评！！！：
代码中，三个状态有顺序，必须先1再2再3，过程耦合；
Callback Hell难以维护
版本2：
优点：
把状态抽取出来，通过数组的下标去操作，更改数据很方便
把数据/状态抽象出来
缺点！！：
依赖于外部变量 stateList、currentStateIndex
封装性不好……差评！！
版本3：封装好（七八十分）（一定要会）（中规中矩）
优点：
把currentStateIndex分装进函数，因为使用者使用不到；
把state的数组和dom元素暴露出来，以便更改；
很重要：：：：：什么该暴露，什么该封装
缺点：
可复用性差，只有当前的能用到
版本4：（过程抽象）（版本2和3是数据抽象）
抽象出来了一个poll 函数是一个高阶函数（偏函数），返回值是function，说明做了一个过程抽象。
它的参数是一系列函数，返回值也是函数，它的功能是按顺序调用参数中的函数。
小王去开门：person类，是数据抽象；开门，开xx，是过程抽象
bind函数也是一个高阶函数（偏函数），它也返回一个函数，
优点：poll函数可复用，很通用。
例如：
版本5：改需求：改时间
版本2.3.4做了抽象反而不能改时间，版本1可以改，要回去？？？
promise（是es6里面很重要的概念）
不用promise的版本:
版本6：（高级程序员写的）
内部实现很复杂，但是外部API很好用；可以随意向状态列表添加状态，且每个状态里面可以做很多种事情；
API设计问题总结：
1.写原生的js有很多方向可以写，但是用框架类库模式会很固定
2.避免过程耦合，即上下两个过程有关联（例如版本1中，必须先实现状态1，再状态2...）
3.要知道什么数据该封装，什么不该封装（例如例子中的currentIndex该封装，因为只有在内部实现时要用到它，而状态列表，元素，不该封装，因为与具体的过程实现没关系，而是与外部接口有关系）
4.可复用的过程可以抽象出来（例如例子中的按顺序执行几个行为）
5.与过程无关的数据可以抽象出来（例如例子中的三个状态，等待时间）
3.问题三：效率/性能问题：
版本1：两层循环
效率：两层循环，时间复杂度是O(n^2)，效率很低
版本2：利用数组的排序方法sort，先排序，再遍历
效率：
排序时间复杂度n*log(n)，遍历复杂度是O(n)
总的就是O(n*logn+n)
如果数组很大的话，效率高很多，比如n=10000
n^2=100000000,n*logn+n=50000
版本3：空间复杂度换时间复杂度
（大致思路就是将1和9中的1放在key上，另一个放在value上）
效率问题总结：
1.程序优化本质上是要用好的算法，要重视算法问题，尤其是在js不止被用在浏览器上时（例如用在服务端时，比如处理图片就要处理大量的像素点，所以算法很重要，可以在leetcode刷题，前端在程序员比鄙视链上，要正式这个问题，别把自己不当程序员）
2.其他优化要了解：http协议特点，资源请求特点，图片格式
4.总结：
1.好的代码职责要清晰，javscript不要用来操作样式
2.API要设计的合理：通用性，适度的抽象，可扩展性
3.用好的、合适的算法（前端程序员要把自己当程序员）
奇舞js笔记——第0课——如何写好原生js代码