Day4 如何写好JavaScript

ChrisorLoser
72 阅读2分钟

一、什么才是好的js:

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

二、各司其责：

  • HTML/CSS/JS各司其责
  • 应当避免不必要的由JS直接操作样式
  • 可以用class来表示状态
  • 纯展示类交互寻求零JS方案

三、组件封装：

组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。

以轮播图作典型案例：

  • 结构：HTML

image.png

  • 表现：使用CSS绝对定位将图片重叠在同一个位置；轮播图切换的状态使用修饰符；轮播图的切换动画使用CSS transition

image.png

  • 行为：API

image.png

  • Slider
    • +getSelectedItem()
    • +getSelectedItemIndex()
    • +slideTo()
    • +slideNext()
    • +slidePrevious()

  • 行为：控制流。使用自定义事件来解耦。

image.png

image.png


  • 重构：插件化
    解耦：将控制元素抽取成插件
    插件与组件之间通过依赖注入方式建立联系
    将HTML模板化，更易于扩展。

image.png

小结：

  • 组件设计的原则：封装性、正确性、扩展性、复用性
  • 实现组件的步骤：结构设计、展现效果、行为设计
  • 三次重构： 1.插件化
    2.模板化
    3.抽象化（组件框架）

过程抽象：

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

image.png

高阶函数：

Once：为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。

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

HOF：

  • 以函数作为参数
  • 以函数作为返回值
  • 常用于作为函数装饰器
    function HOF0(fn){
        return function(...args){
            return fn.apply(this,args);
        }
    }

命令式与声明式：

  • 命令式编程是一种以编写具体步骤和指令为基础的编程方式。在命令式编程中，开发者需要明确地指定如何执行任务，一步一步地描述出解决问题的过程。
    let list=[1,2,3,4];
    let mapl=[];
    for(let i=0;i<list.length;i++){
        mapl.push(list[i]*2);
    }
  • 声明式编程是一种描述目标的编程方式。其重在让计算机明白目标，而非流程。
    let list=[1,2,3,4];
    const double=x=>x*2;
    list.map(double);

心得：

JavaScript是实现前端交互功能的重要部分。但是会写并不代表着完全掌握。多写多练，多思考多翻阅文档，从不同角度分析如何优化代码，才能化繁为简，提升工作效率。

avatar
文章
阅读
粉丝