如何学好JavaScript

写好JS的一些原则：

各司其责：让HTML、CSS和JavaScript职能分离
组件封装: 好的UI组件具备正确性、扩展性、复用性
过程抽象: 应用函数式编程思想

如何实现JS代码优化

优化 => 面对一个需求是否能提供多种解决方案

当页面没有行为动态时，尽量就不用JS编码

组件封装

📚 组件是什么呢？
是指Web页面上抽出来一个个包含HTML、CSS和JS的单元

案例:轮播图

HTML
CSS
JS => API => Slider

基本方法总结:

结构设计
展现效果
行为设计
- API(功能)
- Event(控制流)

重构

插件化 => 将组件内部的小组件抽取成插件 => 插件注册 => 提高使用效率

模板化 => render函数

抽象化 => 尽量将页面内容抽离出来成为类似于一个小小的框架，调用的时候就十分方便，而且也可以随时停止使用

过程抽象

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

具体案例

操作次数限制 => eg.在一些有抽奖功能的软件，同一个用户可能会持续点击抽奖按钮，那么这个时候就要让抽奖次数延迟响应，而不是点击一次就响应一次，这可能会给服务器带来非常大的消耗。同样的，还有一些异步交互功能，一次性的HTTP请求等等。
将只需要执行一次的需求覆盖不同的事件处理，可以将需求抽离出来，最常见的就是重新封装组件，那么在这里有新的用法，就是构建Once高阶函数

function once(fn){
 return function(...args){
 // 那么下一次进入if之后发现没有变量值 就不会进入if循环
  if(fn){ 
    const ret = fn.apply(this,args);
    // 第一次调用函数之后会将参数置为null
    fn = null;
    return ret;
    }
  };
}
// **在需要实现需求的地方直接调用函数即可**

⭐高阶函数

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

JS有很多原生方法都是高阶函数，例如Array.prototype.map,简单来说，就是map()接收一个回调函数，从回调函数中获得返回值，再创建一个新数组返回这些值。

📚让我们通过一个简单的例子来看看
我们现在有一个数组[1,2,3,4],生成一个新数组，让里面的元素值全部翻倍，话不多说，直接上代码👍

const arr = [1,2,3,4];
const newArr = arr.map(item => item * 2);

consolo.log(arr); // [1,2,3,4]
consolo.log(newArr);// [2,4,6,8]

还有许多方法，也可以通过查阅文档developer.mozilla.org/zh-CN/docs/…进行学习

📌Ps:纯函数 => 没有其他副作用 + 结果可预期

编程范式

命令式 => 一步一步告诉编译器我们需要干什么 => 写给计算机的语言 => ”怎么做“
1. 运算语句
2. 条件语句
3. 循环语句
声明式 => 写给不同的程序员的语言 => ”做什么“ => 函数式编程

怎么样才能写出好的JS代码？

关注以下几点：

代码风格
代码运行效率 => 学会优化代码，在本地运行的时候可能几ms的差别不是很明显，但是当运行一个大型项目的时候，能提高一点就是一点
特殊约定 => => 尽量是一个团队内或者小组统一风格(dddd😀)
结合使用场景 => 根据不同的场景选择最适合的逻辑方案
逻辑设计

学好JS|青训营笔记