## 写好JS的一些原则 ### 各司其责 HTML描述结构，CSS描述展现形式，JS描述行为并不是单指代码位置上的分离，而是指本身承担的职责应当避免不必要的由JS直接操作样式，可以用class来表示状态，纯展示类交互寻求零JS方案 #### 例：写一段JS，控制网页切换深色模式方案1. 在JS中直接修改样式（不便于后期维护）方案2. 在JS中修改class名，而具体class内容的实现交给CSS（依然耦合）方案3. 修改HTML结构，利用纯CSS实现。使用checkbox状态选择展示夜间或白天样式 ### 组件封装组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元好的组件具备封装性、正确性、扩展性、复用性 #### 例：封装一个轮播图 ##### 初步想法 1. 结构设计：HTML 轮播图是一个典型的列表结构，可以使用

`.trim(); return `
` ) } } ``` ### 过程抽象将通用的组件模型抽象出来，用来处理局部细节控制的一些方法。是函数式编程思想的基础应用。比如slider中，可以看到插件和slider类都有render方法，用于初始化HTML模板。因此可以抽象出一个Component类，将registerPlugin和render方法抽象出来，然后让slider类和插件都继承这个Component类，再交由具体类重写render方法 ```JavaScript class Component{ constructor(id,opts={name,data:[]}){ this.container = document.getElementById(id); this.options = opts; this.container.innerHTML = this.render(opts.data); } registerPlugins(...plugins){ plugins.forEach((plugin)=>{ const pluginContainer = document.createElement('div'); pluginContainer.className = `.${name}__plugin`; pluginContainer.innerHTML = plugin.render(this.options.data); this.container.appendChild(pluginContainer); plugin.action(this) }) } render(data){ // 抽象方法，交由具体类实现 return '' } } ``` ### 总结组件设计的原则：封装性、正确性、扩展性、复用性实现组建的步骤：结构设计、展现效果、行为设计三次重构：插件化、模板化、抽象化（组件框架）

debug记录：模块`umi`没有导出的成员`Subscribe`

问题

解决