前端与 HTML | 青训营笔记

用户7905203499293
122 阅读3分钟

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

一、本堂课重点内容：

  • 如何写好JavaScript
    1. 各司其责
    2. 组件封装
    3. 过程抽象
  • 写代码应该关注的要点

二、详细知识点介绍：

  • JavaScript编码原则

    1. 各司其职

    （1）将HTML、CSS、JavaScript的职能分离开。（e：×在js里面写xxx.style.background = "xxx"这种应该是css负责的代码）

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

    （3）可以用 class来表示状态

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

    1. 组件封装

    （1）组件是指Web页面上抽出来一个个包含模版(HTML)、功能(JS)和样式(CSS)的单元。

    （2）好的组件具备封装性、正确性、扩展性、复用性。

    （3）实现组件的步骤：结构设计、展现效果、行为设计

    （4）三次重构：插件化、模板化、抽象化（组件框架）

    一、插件化：
i)将控制元素(如轮播图下方的小圆点)抽取成插件
function plunginXXX(形参){
    该控制元素功能的逻辑
}
ii)插件与组件间通过依赖注入方式建立联系
在构造函数里面进行【依赖注入】
registerPlugins(...plugins){
    plugins.forEach(plugin => plugin(this));
}

在主函数里注册插件
xxx.registerPlugins(plunginXXX1，plunginXXX2);

完整参考代码：
https://code.juejin.cn/pen/7108191112094973989

二、模板化
将HTML模板化，更易于扩展。令其实现数据驱动，根据数据去生成HTML模板
将图片等欲变为模板的元素作为参数传入组件，通过调用自定义待实现所需功能的render()方法在js里改innerHTML的内容
完整参考代码：
https://code.juejin.cn/pen/7108191503301754910

三、抽象化
将组件通用模型抽象出来

    抽象.png 完整参考代码： code.juejin.cn/pen/7108185…

    1. 过程抽象

    （1）为了能够让"只执行一次"的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象，在js中可以用高阶函数实现过程抽象

    （2）高阶函数：i)以函数作为参数；ii)以函数作为返回值；iii)常用于作为函数装饰器

    函数装饰器：
function HOF0(fn) {
    return function(...args) {
        return fn.apply(this, args);
    }
}
其中参数fn等价于第一个return后的那个function

    纯函数(pure function)：输入输出是确定的。使用纯函数会使测试该纯函数是否正确变得容易，可维护性高，高阶函数就是一个纯函数。

    非纯函数(inpure function)：当给定相同的输入时，不纯函数可能不会返回一致的结果，并且它们可能会产生超出函数范围的影响。使用非纯函数时，测试该函数功能是否正确需要写一个test case来实践，不易于维护。

  • 编程范式

    命令式：侧重点在怎么做

    声明式：侧重点在做什么。可扩展性强

三、实践练习例子：

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

四、课后个人总结：

之前学习js相关的知识都是关于js的语法、特性等基础性的内容，通过这次青训营的课，我了解到在实际的开发过程中还需要注重js的编码原则，使得编码更加规范、更加高效、更加可维护。实现一个功能的方法可能会有很多种方法，具体选哪一种是需要根据实际使用场景动态调整的。

五、引用参考：

avatar
文章
阅读
粉丝