360前端星计划-JavaScript从入门到放弃

JS与HTML\CSS的分离

• HTML（结构）CSS（表现）JS（行为）职责分离
• JS不应该直接操作CSS样式，违反了职责分离的原则
  • 可以切换class进行样式的改变
  • 可以使用HTML和CSS进行页面展示的实现，使用checkbox实现切换

复杂UI组件的设计

• eg:轮播图实现
  • 结构设计
    • 图片结构为列表结构，主体使用<ul>
    • CSS中采用绝对定位将图片重叠在一个位置
    • transition实现过渡效果
    • 轮播图切换状态使用修饰符(modifier)
    • 选中的图片类为“***-selected”
  • API设计
    • getSelectedItem()获得选中的元素
    • getSelectedItemIndex()获取选中的元素的键值，为了和小圆点联动
    • slideTo()鼠标移动到小圆点时的跳转
    • slideNext()左右两边点时跳转到下一页
    • slidePreious()跳转到上一页
  • 具体实现
    • 创建slide类，包含上述函数
    • getSelectedItem()使用querySelector实现
    • getSelectedItemIndex()使用indexOf()
  • 添加控制流
    • 使用自定义事件监听当前小圆点
  • 问题：函数过长，逻辑过于复杂
  • 解决方案：
    • 使用插件
      • 依赖注入，把对象当作参数传入
      • 降低耦合度
  • 问题：删除某个功能时，除了要删除插件还要额外删除HTML代码
  • 解决方案：
    • 改进插件，将HTML模板化整合进插件
    • 插件修改为对象，包含render函数和action函数，render函数传递模板，action函数放置方法
    • 插件：数据驱动和行为驱动，外部只传入数据
  • 模板化：JS、CSS、HTML都放在一个组件内，提升可维护性
  • 抽象组件模型

局部细节控制

• 多次点击的问题
  • 解决方案：只点击一次
    • block.addEventListener('click',()=>{},{once:true})
    • block.onclick = function(evt){block.onclick = null;}
• 异步请求获取数据
  • 只能执行一次
• 过程抽象
  • 只执行一次：once函数：返回一个只能执行一次的函数，执行一次后函数设为null
  • 节流：throttle函数，每隔一段时间执行一次
  • 防抖：debounce函数，用户持续点击时不执行，停下之后再执行
  • consumer函数：操作记录在队列中，后续进行再进行消费，同步执行操作变为异步执行，可以实现连击
• 声明式（过程抽象），指令式（面向过程和面向对象）
  • 数组的reduce方法：迭代
  • iterative：实现连续操作的函数封装
• 高阶函数：输入函数或返回函数
  • toggle：取出再放到最后，实现轮换

总结

• 各司其职：JS尽量只做状态管理
• 结构、API、控制流分离设计UI组件
• 插件和模板化，抽象出组件模型
• 运用过程抽象的技巧来抽象并优化局部API