[ JavaScript | 青训营笔记]这是我参与「第五届青训营」伴学笔记创作活动的第 3 天各司其职 html、

这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

html、css、js的分工应该明确，html负责DOM结构模板，css负责样式、js负责逻辑行为的处理，应避免在js中操作style、dom，否则容易出现逻辑混乱，代码可读性差等等问题

组件设计的原则

封装性、正确性、拓展性、复用性

实现过程：结构设计、样式设计、行为设计(API,Event)

设计方向：插件化、模板化、抽象化

插件化：功能提取为插件，注册形式使用，方便做功能的追加和删减操作

模板化：将HTML模板化，更易于拓展

抽象化：公共逻辑提取出来到父类或者函数中，使用时随时继承或者拓展

过程抽象/装饰器/HOC

过程抽象：为了让执行一次的需求覆盖其他事件，将这个需求剥离出来纯函数：代码无副作用(不改变原数据，以及其他数据)，输入与输出对应，不受其他因素影响高阶函数：接收一个函数返回另一个函数利用高阶函数可以将逻辑抽离出来到一个函数中集中处理，提高代码的复用性

命令式/声明式声明式编程相比命令式编程更明确业务逻辑

consr arr=[1,2,3]
const add=(a,b)=>a+b
const add10=(val)=>{return add(val,10)}
const newArr=arr.map(add10)

以上代码newArr是对arr的每个元素都加10，对比使用for循环实现的优势是每一步的目的明确，且保证了可拓展性，随时可以构造出add1 add100，保证了代码的复用性

前端需不需要算法？

需要

但是不必刻意追求、应该以实际业务场景的需求为主，为保证代码的可读性、结构清晰有时可以牺牲部分效率。不应该追求极致的效率让代码过分抽象。