JavaScript 编码原则｜青训营写好JS的一些原则各司其职：举例了切换阅读模式的例子组件封装：举例了实现轮

写好JS的一些原则

一. 各司其职：深夜食堂

版本一：js里改变样式

	  const btn = document.getElementById('modeBtn')
	  btn.addEventListener('click',(e) =>{
	      const body = document.body;
	      if(e.target.innerHTML === '🌞') {
	      body.style.backgroundColor = 'black';
	      body.style.color = 'white';
	      e.target.innerHTML = '🌜';
	    } else {
	      body.style.backgroundColor = 'white';
	      body.style.color = 'black';
	      e.target.innerHTML = '🌞';
	    }
	  })

版本二：更易读

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
  const body = document.body;
  if(body.className !== 'night') {
    body.className = 'night';
  } else {
    body.className = '';
  }
});

版本三：写css

	  javascript
	  #modeBtn:checked + .content {
	      background-color:black;
	      color:write;
	      transition:all 1s;
	  }

结论：

		1. HTML/JS/CSS各司其职
		2. 应当避免不必要的由JS直接操作样式
		3. 可以用class来表示状态
		4. 纯展示类交互寻求零JS方案

二. 组件封装：原生JS写一个轮播图

基本方法：

结构设计
展现效果
行为设计
1. API（功能）
2. Event(控制流)
总结：
1. 组件设计的原则：封装性，正确性，扩展性，复用性
2. 实现组件的步骤：结构设计，展现效果，行为设计
3. 三次重构：
  1. 插件化
    
    将控制元素抽取成插件,插件与组件之间通过依赖注入方式建立联系
  2. 模板化
    
    将HTML模板化，更易于扩展
  3. 抽象化(组件框架)
    
    将通用的组件模型抽象出来

三.过程抽象：

用来处理局部细节控制的一些方法
函数式编程思想的基础应用

例子：操作次数限制

1. 一些异步交互
1. 一次性的HTTP请求

高阶函数

高阶函数的理念是变量状态不可变，一切都可以是函数，参数可以是函数，普通函数的话，通常会通过改变变量的状态，去实现业务逻辑，循环是通过for，while等循环语法，而纯函数式是通过递归自我调用达到循环。

以函数作为参数
以函数作为返回值

常用于作为函数装饰器

function HOFO(fn){
	return function(...args){
        return fn.apply(this,args)
    }
}

常用高阶函数：

Once

Throttle

Debounce

Consumer/2

lterative

编程范式：

命令式编程（面向过程编程）

声明式编程（函数式编程）

自己的理解与总结：

讲了如何写好Javascript的三方面：

各司其职：

举例了切换阅读模式的例子
组件封装

举例了实现轮播图并进行了三次重构
过程抽象

函数式编程思想的基础应用，讲了几个高阶函数并讨论为什么使用高阶函数，又讲了俩个编程范式：声明式编程和命令式编程

感受：不同的代码虽然都可以实现功能但是可读性和后期可维护性有很大的区别，我们作为程序员写代码的时候也一定要有规范，尤其是JavaScript是多范式的语言所以写代码的时候一定要注意规范

JavaScript 编码原则｜ 青训营

写好JS的一些原则

JavaScript 编码原则｜青训营