如何写好js
想要写好js，首先需要的是学好js，推荐两本技术学习书籍：JavaScript权威指南、JavaScript高级程序设计。 写好js的一些原则：
- 各司其职 html、css、js分离编写，分工明确才能思路清晰
- 组件封装 对于一些我们经常使用的页面功能，如轮播图、一键返回顶部等，我们可以用js代码封装一个组件，随用随取
- 过程抽象 运用函数式编程思想
个人理解：将前端比作一栋房子，html奠定地基与架构，css对房屋进行，js实现房屋内外的一些复杂功能，如开门关门，上锁，灶台，烟囱
举例展示
要求：写一段js代码，控制一个网页让它支持浅色与深色两种浏览模式 解决方案：直接通过原生js，获取控制按钮，根据当前按钮的content或创建一个条件变量，根据条件变量值的改 变操控body对页面浏览模式进行控制 优化方案：放弃使用js控制css样式来实现的方案，通过使用js对body添加与删除类名的方式来实现 深度优化：个人对css和html的理解程度足够强，只通过html+css放方案解决问题
组件封装
组件是指web页面上抽出一个个包含模板(html)、功能(js)、和样式(css)的单元。好的组件具备封装性、正确性、扩展性、复用性、灵活性
举例展示
例子：用原生js写一个电商网站的轮播图 解决方案：从组件的角度出发，在实现一个轮播图的功能前，就要考虑到它所具备的这些特性。首先，在考虑到封装性和复用性的情况下，进行html、css、和js的设计，分别思考每一个部分的特点。
-
html
- 轮播图是一个典型的列表结构，可以直接使用ul来搭建
-
css
- 使用css绝对定位将图片重叠在同一个位置
- 轮播图切换状态的修饰符
- 轮播图切换动画的过渡
-
js
- API设计应保证原子操作，职责单一满足灵活性
- 控制流：使用自定义事件来解耦
最后设计一个轮播图组件的基本方法如下：
-
结构设计
-
展现效果
-
行为设计
- API（功能）
- Event（控制流）
优化方案：使用组件时，我们需要将事先设计好的html和css引入，如何将轮播图中的各个控制功能分开使用，做到想用哪个用哪个，这里就需要将控制元素抽取成插件，插件与组件之间通过依赖注入的方式建立联系。 除了了优化方案中所提到的内容外，我们还可以将html模板化，只需要在html中引入一个div即可创建一个轮播图，将html模板化，可以更易于扩展，同时我们可以将一些通用的组件模型抽像出来，以一个单独的插件存在，满足组件的灵活性
总结
组件设计的原则：
- 封装性
- 正确性
- 复用性
- 扩展性
- 灵活性
实现组件的步骤：
- 结构设计
- 展现设计
- 行为设计
三次重构：
- 插件化
- 模板化
- 抽象化
一个好的组件是经历多次打磨而成，只要在遵循组件设计的原则上去实现组件，在三次重构中优化组件，最终才能看到令人满意的作品。
过程抽象
用来处理局部控制的一些方法，函数式编程的基础应用？ 个人理解：就是，在系统中以最低的损耗实现功能函数的输入与输出，这中间的过程我们称为过程抽象
纯函数与非纯函数
纯函数：在看到函数代码后就知道结构是什么，如（a,b）=>return a+b 非纯函数：无法确定函数输出结构，函数的结构是改变的，如 num=>return num++ 在纯函数中最具代表性的就是高阶函数，高阶函数的特点如下：
- 以函数作为返回值
- 以函数作为参数
- 常用于作为函数装饰器
个人理解：可以将高阶函数当做净水器中的滤芯，水经过过滤器的过滤，返回一个结果，这个时候的结果是固定的，我们都知道是净化过的水，无论之前的水中含有什么，结果都是纯净水
常用高阶函数
-
once
- 能够让"只执行一次"的需求覆盖不同的事件处理
-
throttle
- 节流 让函数按照我们在某一段时间内规定的次数执行
function throttle(fn, time = 500){
let timer;
return function(...args){
if(timer == null){
fn.apply(this, args);
timer = setTimeout(() => {
timer = null;
}, time)
}
}
}
-
Debounce
- 只有满足条件才会执行否则不会执行的函数
function debounce(fn, dur){
dur = dur || 100;
var timer;
return function(){
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, dur);
}
}
命令式与声明式
命令式：就像它的名字一样，所有的结果都需要我们进行一步步的教导一步步命令才能实现
声明式：就像一个机器一样，我们已经设计好了各种功能，在使用时只需要启动即可，不需要一步步的教导和发布命令
总结：
过程抽象听起来很复杂，但理解起来却很容易，设计一个精密的机器解决繁琐的工作这是我的理解，想要在开发中使用需要牢固的js基础。
