js交互相关代码分析、小程序的生命周期、动态模板语法详解和表单 & 前端模块化 & DOM的重排、重绘

js交互相关代码分析、小程序的生命周期、动态模板语法详解和表单 & 前端模块化 & DOM的重排、重绘

回顾

• js交互相关代码分析
  • app.js 全局入口JS
    • 全局生命周期函数
    • 全局数据
  • page.js 页面JS
    • 页面生命周期函数
    • 页面的数据
    • 事件处理函数
  • utils.js 通用js模块
    • 通用的一些工具函数
• 小程序的生命周期
  • 全局生命周期
  • 页面生命周期
  • 应用场景
    • 调用后台的接口
    • 启动/销毁定时任务
    • 获取场景值
• 动态模板语法详解
  • 数据绑定
  • 条件渲染
  • 列表渲染
  • template标签用法
  • 事件处理
• Tab案例实践
  • 基本布局与业务实现
  • 代码重构
• 表单基本操作

补充

• 前端的模块化历程

  • 前端模块化（方便代码的重用；方便后期的维护和扩展）
    • 自己采用自调用方式进行代码隔离（模块化）
    • 为了统一规范，诞生了一些标准
      • AMD —> Require.js
      • CMD —> Sea.js
    • CommonJS —> Node.js
    • ESM ES6模块化

• 如何理解模块化开发？

• 模块化js（CommonJS规范）

  • 模块成员导出
    • module.expors
    • exports
    • 组好两者不要结合使用
  • 模块成员导入 require()

• ES6的模块化

  • 导出export
  • 导入import

• DOM的重排、重绘吗

  • 浏览器的核心：浏览器内核（渲染引擎；JS引擎（解析器V8））
  • 浏览器渲染原理
    • DOM树（几何尺寸发生变化；动态的添加、删除、替换DOM）导致重排
    • Style树（样式的变化导致重绘）
    • 渲染树（Render树）