ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

【青训营】JavaScript温故而知新

2022-01-21 10:02:35  阅读:167  来源: 互联网

标签:温故而知新 function 插件 JavaScript return 函数 args 青训营 fn


【青训营】JavaScript温故而知新

参加字节跳动的青训营时写的笔记。这部分是月影老师讲的课。

1. 各司其责

  • HTML/CSS/JS各司其责

  • 避免不必要的直接使用JS操作样式(element.style.color=“red”)

  • 使用class来表示状态

  • 纯展示类交互寻求零JS方案(checkbox的checked和label,其中checkbox可以隐藏)

2. 组件封装

组件是指Web页面上抽出来一个个包含模板(HTML)、样式(CSS)、功能(JS)的单元

好的组件:封装性、正确性、扩展性、复用性

2.1 基本方法

  • 结构设计
  • 展现效果
  • 行为设计
    • API(功能)
    • Event(控制流)

2.2 重构

  • 插件化

    • 将控制元素抽象成插件

    • 插件与组件之间通过依赖注入的方式建立联系

  • 模板化

    • 将HTML模板化,更易于扩展(即视图根据数据来更新,这样子需要变更图片之类的时候,就只需要在图片数组中操作,而不需要变更HTML)
  • 抽象化(组件框架)

例子:轮播图把上一页、下一页和分页按钮抽象成插件,就可以根据需要添加了

3. 过程抽象

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

为了能够让只执行一次的需求覆盖不同的事件处理,我们可以将这个需求剥离出来,这个过程就叫做过程抽象

3.1 高阶函数

  • 以函数作为参数
  • 以函数作为返回值
  • 常用于作为函数装饰器
function test(fn) {
    return function(...args) {
        return fn.apply(this, args);
    }
}	// 等价范式

常用高阶函数:

  • Once

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

    function throttle(fn, time=500) {
        let timer;
        return function(...args) {
            if(timer == null) {
                fn.apply(this, args);
                timer = setTimeout(() => {
                    timer = null;	/* 到期的话,清除之前的计时器 */
                }, time)
            }
        }
    }
    
  • Debounce

  • Consumer / 2

  • Iterative

3.1.1 为什么使用高阶函数?

两种函数:纯函数和非纯函数

  • 纯函数:输入的值一定时,输出的值一定,比较适合用于单元测试
  • 非纯函数:会依赖于外部环境

通过高阶函数可以减少非纯函数的数量,增加系统的可靠性、稳定性。

标签:温故而知新,function,插件,JavaScript,return,函数,args,青训营,fn
来源: https://blog.csdn.net/chilanzi/article/details/122615269

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有