这是我参与「第五届青训营」伴学笔记创作活动的第 2 天
如何写好JavaScript
一、什么样的JS代码才是好的代码?
要写好JavaScript,需要遵循以下三个原则:
1. 各司其职
各司其职是指三件套各有自己相应的功能,互不混淆,且各有各的优点及其适用场合,在这里举一个小例子。
在日常生活中经常使用到手机的夜间模式和白天模式的切换。及深色和浅色两种模式:此时我们的需求是:切换黑白字和黑白背景。
-------------------------------只使用JS----------------------------------
缺陷:很难理解需求原始含义 下图是改变深色和浅色只使用JS的代码,可见下图代码可读性较差,难以立刻分辨出原始需求,并且修改变量的可操作性也比较差。
---------------------------------各司其职----------------------------------
下图是改变深色和浅色调用了css样式的代码。操纵class类,此时可以很直观的知道需求,修改属性值时也可以直接在css代码中进行修改。
-------------------------------只有CSS和HTML------------------------------- 下图是改变深色和浅色只使用JS的代码 遵循了只有交互展示功能时尽量零JS的原则
2. 组件封装
组件:在WEB页面上抽象出来的包含……的单元
好的组件要有封装性、扩展性、正确性、复用性。
例子>>轮播图的实现
-
首先搭建列表的 HTML结构
-
CSS绝对定位 放在同一位置
轮播图切换的状态使用修饰符;切换动画用transition
- 设计JS API
3. 过程抽象
处理局部细节控制的方法。为了能够让“只执行一次”的需求覆盖不同的事件处理,我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
3.1 高阶函数
以函数作为参数,函数作为返回值。
常用的高阶函数
- Once
- Throttle
- Debounce
- Consumer/ 2
- Iterative
二、今日总结
JS还有很多深层的值得我去深入学习的东西,一定要熟练掌握!