月影JS小结| 青训营笔记

110 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2天
一、本堂课重点内容:

  • JS代码三原则
  • JS代码优化之路

二、详细知识点介绍:

  • 各司其职 :HTML、CSS、JS要对应的肩负好各自的责任不要出现越职的现象出现这样既有利于代码的维护也便于理解(深夜食堂的例子)HTML实现结构和内容、CSS负责效果,JS负责动作。
  • 组件封装:通过举页面中电商轮换图的例子来解释什么是组件封装,主要通过class 去封装各个方法实现效果,hook封装、将html也通过JS去生成,再利用插件化的特点,需要一个根元素,达到模块化效果组件抽象化,并通过类继承,类数据共享,必包数据私有化,最里层类嵌套函数相互关联,再包一层向外暴露,这样就可以实现实例共享原型方法和属性也能通过传参到达内部函数,串联数据,数据进行响应(来自评论区大佬还需要消化)、封装起来形成一个文件并不违背其各司其职的原则。
  • 过程抽象:用到了高阶函数,高阶函数的应用场景:once函数,防抖节流等,高阶函数与普通函数的区别。
    纯函数:输入输出确定、行为可预期、纯函数越多程序的可流动性越高(加和函数)
    非纯函数:计次函数count()
    使用高阶函数可以大大减少使用非纯函数的情况
    编程范式:命令式(面向过程、面向对象),声明式(逻辑式、函数式)声明式的代码更好拓展
  • 关于LeftPad事故背景的引入
  • JS代码质量优化

三、实践练习例子:

  • 交通灯
  • 洗牌
  • 分红包 后续要一一再仔细学习并做好相应笔记。

四、课后个人总结:

今天跟着月影老师的五节JS录播课感觉内容十分丰富且非常深刻,对于小白的我来说还有点理解上的难度,没有切身的体会以至于理解的不够深刻这是我面临的最大问题是在听完老师系列课程后最明显的感受:实践太少,没有遇到和思考过这些问题对于怎么写好JS更是没有这么深刻的理解和思考,希望以本次青训营为起点丰富自己的实践经历同时提高自己的能力,听了老师的课后我能明显的感觉到与教育体制内课程的不同,也更能认识到坚持之后我可以达到什么样的程度。这将是有意义的坚持学习,在最后结营之后我还会回头来看月影老师对于如何写好JS的课程,并细细品味和思考。