如何写好 JavaScript | 青训营笔记

333333
128 阅读5分钟

写好JavaScript的一些原则

  • 各司其职
  • 组件封装
  • 过程抽象

1、各司其职

即：HTML负责页面结构，CSS负责页面样式，JavaScript则负责页面动作。

  • HTML是一种超文本标记语言，主要用来实现静态页面，我们在页面看到的文本，图片，视频，声音，表格，链接等都是通过HTML语言描述的，而超文本中的超就是超越‘文本’，可以设置样式，显示图片，播放视频。HTML的是由标签组成，给不同的标签不同的属性，可以实现网页的多彩效果。

  • CSS CSS指的是层叠样式表，它可以控制网页的布局，用于渲染HTML元素标签的样式。

  • Javascriptt是一门轻量级的脚本语言，是一种运行在客户端的脚本语言 （Script 是脚本的意思，脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行）。不同于Java程序运行在JVM中，Javascript运行是直接运行在浏览器中，主要使用来实现页面功能和业务逻辑。

43aab8af43977d7e3c17402ba181844.png 举例：写一段JS，控制一个网页，让他支持深色和浅色两种浏览模式

  • 版本一：

2162775d378a64402a32baa5791a6b1.png 这段代码虽然实现了点击页面让背景颜色变化，但是在js里修改css样式，违背了js只负责页面动作的原则。

  • 版本二：

f7e129beaba222fdddcdae68c7f81dc.png 这个版本将需要的样式规则放入css文件中，而js只负责监听点击事件切换class，满足了“CSS负责页面样式，JavaScript负责页面动作”的准则。

  • 版本三：

6069be439e6a8a36588089f23c107da.png 这里使用label属性将页面和input绑定，当点击页面的时候触发input的click事件，css的伪类以及兄弟选择器就会随之修改页面颜色。

总结：

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

2、组件封装

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

  • 插件化： 1、将控制元素抽取成插件 2、插件与组件之间通过依赖注入方式建立联系
  • 模板化：将HTML模板化，更易于扩展
  • 组件框架：将通用的组件模型抽象出来

总结：

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

3、过程抽象

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

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

高阶函数

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

d3c9809b9c0f02339bf4186bd64b8a1.png

常用的高阶函数：Once、Throttle、Debounce、Consumer / 2、terative

编程范式

4378fb3e99b88c305564405d8e7dea7.png

命令式：（更强调怎么做）

2c09f051e5b0d8f9ca2133a70044b8c.png

声明式：（更强调做什么，更简洁）

190ba9dfaf0d64000a5a92e72de0fa8.png

合理运用ES6写好Javascript

  • ES6 的出现主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念
  • 目前存在少数低版本浏览器的 JavaScript 是 ES5 版本，大多数的浏览器已经支持 ES6
  • ES6提供了大量的语法糖，让我们的JS代码写起来更加优雅，提高可读性

ES6一些常用的新特性

1、 let&const
let作用与var相似用于声明变量，常量值可以修改，但let不能重复声明变量var可以重复声明变量，let声明的变量在块级作用域内有效且let不存在变量提升问题。 const一定要赋初始值，常量值不能修改，存在于块级作用域但对于数组和对象的元素可以修改。

let a = 1
    a = 2
    console.log(a);//2
const a = 1
      a = 2
      console.log(a)//报错;

2、 箭头函数
箭头函数内的this指向上层对象；始终指向函数声明时所在作用域下的this的值，无法被call改变，普通函数的this指向调用对象。箭头函数不能作为构造函数实例化对象，箭头函数不能使用arguments但可以使用…rest，当形参有且只有一个的时候，可以省略()，当代码体只有一条语句的时候，可以省略{}，此时return必须省略，而且语句的执行结果就是函数的返回值。

 let n = 1
    let a = n => n + 3
    console.log(a(n));//4

3、 解构赋值
ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值。
数组的解构：

const arry = ['num', 'string', 'symbol']
let [a, b, c] = arry
console.log(a)//num

对象的解构：
和数组解构方法类似将原对象的值赋予新对象然后打印新对象里面的值。
注：对象解构赋值时一定要注意等号两边键名相等。

const {a,b} = {a: 11,b: 22}
console.log(a)//11

4、 模板字符串
模板字面量用倒引号 (``)而不是单引号 (’ ') 或双引号(" ")表示，可以包含用 ${expression} 表示的占位符。

let a = 10
let str = `现在${a}点了`
console.log(str);//现在10点了

5、简化对象的写法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法（在属性名和变量名相同的情况下），这样的书写更加简洁。

let name = 'wut'
    let age = 10
    let a = {
        name,
        age,
        getname() {
            return this.name;
        }
    }
    console.log(a.getname());//wut

6、函数参数的默认值设置
ES6允许给函数参数初始默认值，且可以和解构赋值一起使用。

function add(a, b, c = 10) {
        return a + b + c
    }
    console.log(add(1, 2, ));//13

7、rest参数
ES6引入rest参数，用于获取函数的实参，用来代替arguments

function add(...num) {
        console.log(num);
    }
    console.log(add(1, 2, 3)); //[1,2,3]

8、扩展运算符
…能将数组转为逗号分隔的参数序列，虽然形式与rest参数类似，但是rest参数是用在函数定义时的形参位置，扩展运算符是用在函数实际调用时的实参位置。

let a = [1, 2, 3]
    function f(x, y, z) {
        return x + y + z
    }
    console.log(f(...a));//6
avatar
文章
阅读
粉丝