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

一、本堂课重点内容：

1. 从实践维度解读在实际编码过程中何种类型的 JavaScript 代码称之为“好代码”，并从 JS 出发，总结其他语言编码可遵循的共性原则，由浅入深，介绍了各司其职、组件封装、过程抽象三大原则。

2. 通过回溯2016 年 3 月的 left-pad 事件，引出编码的操作规范，持续对如何写好 JavaScript 进行讲解。

二、详细知识点介绍：

推荐两本书籍：犀牛书《JavaScript》、红宝书《JavaScript高级程序设计》

JavaScript编码原则

各司其职

HTML/CSS/JS各司其职

应当避免不必要的由JS直接操作样式

可以用class来表示状态

纯展示类交互寻求零JS方案

组件封装

设计UI组件的基本方法：

• 结构设计

• 展现效果

• 行为设计

  • API(功能)：设计接口
  • event(控制流)：用自定义事件解耦

组件插件化→解耦

• 将控制元素抽取成插件
• 插件与组件之间通过依赖注入建立联系
• 将HTML模板化

抽象

• 将组件通用模型抽象出来

过程抽象

高阶函数

once：为了能够让“只执行一次”的需求覆盖不同的事件处理，可以将这个需求剥离出来

function once(fn){
	return_function(...args){
		if(fn){
			const ret=fn.apply(this,args);
			fn=null;
			return ret;
		}
	}
}

HOF：以函数作为参数，以函数作为返回值，常用于作为函数装饰器

function HOF(fn){
	reyurn function(...args){
		return fn.apply(this,args);
	}
}

编程范式

命令式：面向过程、面向对象

声明式：逻辑式、函数式

三、实践练习例子：

1. left-pad 案例。
2. 代码实践1 - 交通灯。
3. 代码实践2 - 洗牌。
4. 代码实践2 - 发红包。

四、课后个人总结：

在前端开发中，学习好算法、设计模式也是很有必要的。优秀的代码不仅执行效率高，也更容易维护和阅读。