JavaScript 编码原则
写好JS的一些原则
- 各司其职
让HTML，CSS，Javascript职能分离
- 组件封装
好的UI组件具备正确性、拓展性、复用性。
- 过程抽象
应用函数式编程思维
1.各司其责
- HTML / CSS / JS 各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示累交互寻求零JS方案
<!-- HTML -->
<div id="myDiv"></div>
<!-- CSS -->
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<!-- JavaScript -->
<script>
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("click", function() {
myDiv.style.backgroundColor = "blue";
});
</script>
2.组件封装
组件：指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元，好的组件具备封装性、正确性、扩展性、复用性。
1.总结：
基本方法
-
结构设计
-
展现效果
-
行为设计
- API （功能）
- Event （控制流）
<div class="carousel">
<ul class="carousel-list">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- CSS -->
<style>
...
</style>
<!-- JavaScript -->
<script>
function Carousel(container) {
this.container = container;
this.list = container.querySelector(".carousel-list");
this.items = container.querySelectorAll("li");
}
Carousel.prototype.next = function() {
// 切换到下一张图片的逻辑
};
Carousel.prototype.prev = function() {
// 切换到上一张图片的逻辑
};
var carousel = new Carousel(document.querySelector(".carousel"));
carousel.next();
</script>
2.重构
1.插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入的方式建立联系
2.模板化
- 将HTML模板化，更易于扩展 （解耦）
3.抽象
- 将通用的组件模型抽象出来
总结：
- 组件设计的原则：封装性、正确性、扩展性、复用性。
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
3.过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
eg：操作次数限制
- 一些异步交互
- 一次性的HTTP请求
Once //为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
funtion once(fn){
return function(...args){
if(fn){
const ret = fn.apply(this, args);
fn = null;
return ret;
}
};
}
button.addEventListener('click', once((evt)=>{
const target =evt.target;
target.parentNode.className ='completed';
setTimeout(()=>{
list.removeChild(target.parentNode);
}，2000);
}));
高级函数
1.特点：
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数修饰器
2.为什么使用高阶函数？
减少使用非纯函数的次数，增强可维护性
3.常用的高级函数
- Once
- Throttle
- debounce
- Consumer
- Iterative
命令式与声明式
eg：命令式：
let list = [1, 2, 3, 4];
let mapl = [];
for(let i = 0;i < list.length; i++){
mapl.push(list[i] * 2);
}
eg:声明式：
let list = [1, 2, 3, 4];
const double = x => x * 2;
list.map(double);
JS中数据类型的判断方式
- typeof（操作数）：将操作数的类型返回，以字符串的形式表示。
- 无法详细区分Object的详细类型（Array/Date/Null）
- instanceof 判断A是否为B的实例
- 原理:监测左侧的__proto__原型链上是否存在右侧的prototype原型
- constructor：表示原型对象与构造函数间的关联关系。可以得知某个实例对象到底是由哪个构造函数产生的。
- 可用于判断Object的详细类型。
- 跨框架无效，因为prototype属性在不同框架间无法共享。
- 将公用的方法或对象放置在原型对象上，避免每次创建对象时对相应的方法或对象进行重复添加。
- 不可以判断Null和Undefined，因为其无constructor。
- Object.prototype.toString.call(A)
- Object的原型方法，封装了一个准确判断数据类型的函数。
- 可解决跨框架问题。
