• DDDDDDDD


    一/
    函数防抖和节流是优化高频率执行js代码的一种手段,js中的一些事件如浏览器的resize、scroll,鼠标的mousemove、mouseover,input输入框的keypress等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能。为了优化体验,需要对这类事件进行调用次数的限制。
    1.防抖 防止抖动,以免把一次事件误执行多次,影响性能,比如敲键盘就是一个每天都会接触到的防抖操作。
    使用场景:
    1.登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖
    2.调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖
    3.文本编辑器实时保存,当无任何更改操作一秒后进行保存
    mousemove、mouseover鼠标移动事件防抖
    4.搜索框搜索输入。只需用户最后一次输入完,再发送请求防抖
    5.手机号、邮箱验证输入检测
    2.节流 控制事件发生的频率,如控制为1s发生一次,甚至1分钟发生一次。达到控制流动次数的效果
    使用场景:

        1.浏览器播放事件,每个一秒计算一次进度信息等
        2.input 框实时搜索并发送请求展示下拉列表,每隔一秒发送一次请求 (也可做防抖)
        3.高频点击提交,表单重复提交
    

    二/

    left
    right

    三/

    .模块化好处

        避免命名冲突(减少命名空间污染) 更好的分离, 按需加载 更高复用性 高可维护性

            Node 应用由模块组成,采用 CommonJS 模块规范。
    

          每个文件就是一个模块,有自己的作用域。

          在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。

            在服务器端,模块的加载是运行时同步加载的;在浏览器端,模块需要提前编译打包处理。
    
            ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
            CommonJS 和 AMD 模块,都只能在运行时确定这些东西。比如,CommonJS 模块就是对象,输入时必须查找对象属性。
    
            ES6 模块与 CommonJS 模块的差异 
             1.CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
            2.CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。
            因为 CommonJS 加载的是一个对象(即module.exports属性),该对象只有在脚本运行完才会生成。
            ES6 模块的运行机制与 CommonJS 不一样。ES6 模块是动态引用,不会缓存值,模块里面的变量绑定其所在的模块。     
            
            
            CommonJS规范主要用于服务端编程,加载模块是同步的,这并不适合在浏览器环境,因为同步意味着阻塞加载,浏览器资源是异步加载的,因此有了AMD CMD解决方案。
    

        AMD规范在浏览器环境中异步加载模块,而且可以并行加载多个模块。不过,AMD规范开发成本高,代码的阅读和书写比较困难,模块定义方式的语义不顺畅。

        CMD规范与AMD规范很相似,都用于浏览器编程,依赖就近,延迟执行,可以很容易在Node.js中运行。不过,依赖SPM 打包,模块的加载逻辑偏重

        ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。 

    AMD——异步模块加载规范 与CommonJS的主要区别就是异步模块加载,就是模块加载过程中即使require的模块还没有获取到,也不会影响后面代码的执行。

    RequireJS——AMD规范的实现。其实也可以说AMD是RequireJS在推广过程中对模块定义的规范化产出。

    CommonJS一般用于服务端,AMD一般用于浏览器客户端
    CommonJS和AMD都是运行时加载
    CommonJS一般用于服务端,AMD一般用于浏览器客户端
    CommonJS和AMD都是运行时加载
    与AMD规范的主要区别在于定义模块和依赖引入的部分。AMD需要在声明模块的时候指定所有的依赖,通过形参传递依赖到模块内容中:

    define(['dep1', 'dep2'], function(dep1, dep2){
    return function(){};
    })
    在依赖示例部分,CMD支持动态引入,require、exports和module通过形参传递给模块,在需要依赖模块时,随时调用require( )引入即可

    CommonJS/ AMD/CMD/ES6模块化

    1.CommonJS

    2.AMD
    3.CMD
    4.ES6模块化

  • 相关阅读:
    cmd 一键获取 所有连接过的wifi 密码
    MYSQL注入语句
    Web安全篇之SQL注入攻击
    Kali Linux 不能联网上网 解决方法
    php杂项
    laravel下的数据序列化
    填充数据
    css
    array
    GD库常用函数
  • 原文地址:https://www.cnblogs.com/dudududadada/p/15481707.html
Copyright © 2020-2023  润新知