• 这是我参与第五届青训营伴学笔记创作活动的第3天
• JS三大原则各司其职 组件封装 过程抽象 原则。

JS三大原则

各司其职

• 让HTML CSS 和 JS 职能分离
• JS不要操作css中的标签和属性代码
• 可以用class来表示状态
• 纯展示类交互寻求零JS方案

组件封装

• 好的UI组件具备封装性 正确性 扩展性 复用性
• 组件封装的基本方法
  • 结构设计
  • 展现效果
  • 行为设计
    • API 功能
    • Event 控制流
• 三次重构
  • JS插件化 解耦
    • 将控制元素抽取成插件
    • 插件与租价之间通过依赖注入的方式
  • html模板化 解耦
    • 将HTML模板化，更易于扩展
  • 抽象
    • 将组件通用模型抽象出来

过程抽象

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

高阶函数

• HOF
  • 以函数为参数
  • 以函数作为返回值
  • 以函数为参数且以函数为返回值 常用于函数修饰器
• 常用高阶函数
  • once
    • 为了能够让只执行一次的需求覆盖不同的事件处理，我们可以剥离出来，这个过程我们称为过程抽象

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

  • Throttle 节流函数
  • Debounce 防抖函数
  • Consumer / 2
  • assert 断言
  • Iterative

编程范式

• 声明式天然比命令时具有更高的可扩展性
• 命令式 强调怎么做

• 申明式 强调做什么

• 三态

总结

• 本节课程我们学习到了JS的三大原则
  • 总结语言编码可遵循的共性原则
  • 在我们自定义组件时如何抽取其中的模板和样式，并使自己的组件拥有更高的可扩展 可复用的特性
  • 认识高阶函数HOF 以及 申明式编程和命令式编程如何选取合适的方式 遵循各自的编程范式