JavaScript是目前web开发中不可缺少的脚本语言,JS不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JS代码。
其特点为:
- 开发工具简单,记事本即可
- 无需编译,直接由JS引擎负责执行
- 属于弱类型语言,由数据决定数据类型
- 面向对象
其中有些相关概念:
- 核心(ESMAScript):描述了该语言的语法和基本对象,用来操作浏览器上的对象。
- 文档对象模型(DOM):描述处理网页内容的方法和接口,用来操作网页中的元素。
- BOM:浏览器对象模型与浏览器进行交互的方法和接口(如浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作)
学会写JavaScript是基础的第一步,而要写好JavaScript则是提升的第一步。
写好JavaScript需要遵循三个原则,即:各司其责、组件封装和过程抽象。
接下来我将一一介绍这三个原则。
一、各司其责:即让HTML、CSS和JS职能分离
- HTML/CSS/JS各司其责
- 应当避免不必要的由JS直接操作的样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
与之相关的案例:切换网页白天模式和夜间模式
二、组件封装
基本方法:
- 结构设计
- 展现效果
- 行为设计:API功能以及Event控制流
重构:插件化、模板化、抽象化
组件设计的原则:封装性、正确性、扩展性、复用性
与之相关的案例:网页的轮滑框
三、过程抽象:即函数式编程思想的基础应用
高阶函数(HOF):
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
function HOF0(fn){
return function(...args){
return fn.apply(this,args);
}
}
常用的高阶函数:
- Once(多次触发事件时,以第一次为准)
- Throttle(节流函数,限制一个函数在一定时间内只执行一次)
- Debounce(变化超过一定时间后自动保存)
- Consumer/2(延时调用)
- iterative(批量操作纯函数与非纯函数)
与之相关的相关案例:ON OFF开关的转换
自我感受
作为刚对前端有些了解的初学者,遗憾的是,我只能勉强了解老师讲的案例的基本思想和概念,若要想有自己独特的解放方式和想法,还需要继续钻研,努力学习,也希望能和大家一起交流进步!