命令模式

let addEvent = function (elem, type, handler) {
    if (window.addEventListener) {
        return elem.addEventListener(type, handler, false);
    }
    if (window.attachEvent) {
        return elem.attachEvent('on' + type, handler);
    }
}

缺点：每一次调用都必须执行一次if判断

方案一

在该代码被加载时，利用立即执行函数做一次判断，然后返回给addEvent正确的事件绑定函数

let addEvent = (function (){
    if (window.addEventListener) {
        return function (elem, type, handler) {
            elem.addEventListener(type, handler, false);
        }
    }
    if (window.attachEvent) {
        return function (elem, type, handler) {
            elem.attachEvent('on' + type, handler);
        }
    }
})()

缺点：如果addEvent绑定事件函数一直都没有被调用，那么就白白做了一次浏览器嗅探

方案二：惰性载入函数

let addEvent = function(elem, type, handler) {
    if (window.addEventListener) {
        addEvent = function (elem, type, handler) {
            elem.addEventListener(type, handler, false);
        }
    }
    if (window.attachEvent) {
        addEvent = function (elem, type, handler) {
            elem.attachEvent('on' + type, handler);
        }
    }
    
    addEvent(elem, type, handler);
}

缺点：首次调用较慢

参考

《Javascript设计模式与开发实践》

设计模式

Leetcode459. 重复的子字符串

2021-01-232024-07-05算法2 分钟读完 (大约258个字)

题目链接: https://leetcode-cn.com/problems/repeated-substring-pattern/

给定一个非空的字符串，判断它是否可以由它的一个子串重复多次构成。给定的字符串只含有小写英文字母，并且长度不超过10000。

leetcode

减少使用setInterval

2021-01-222021-12-24前端3 分钟读完 (大约419个字)

setInterval很少使用在生成环境下，因为有如下几个缺点

缺点一：setInterval无视代码错误

setInterval执行的代码即使代码报错，它还会持续不断（不管不顾）地调用该代码

缺点二：setInterval无视网络延迟

假设你每隔一段时间就通过Ajax轮询一次服务器，看看有没有新数据（注意：如果你真的这么做了，那恐怕你做错了；建议使用“补偿性轮询”（backoff polling））。而由于某些原因（服务器过载、临时断网、流量剧增、用户带宽受限，等等），你的请求要花的时间远比你想象的要长。但setInterval不在乎。它仍然会按定时持续不断地触发请求，最终你的客户端网络队列会塞满Ajax调用。

CJS、ESM、UMD模块化标准

2021-01-192022-03-06前端11 分钟读完 (大约1655个字)

1. CommonJS

node.js的实现中采用了CommonJS标准的一部分，并在其基础上进行了一些调整

使用方式

使用require和exports或者module.exports进行模块的导入导出

// node.js为了简化操作，有var exports = module.exports
// 两者一致，那就说明，我可以使用任意一方来导出内部成员
console.log(exports === module.exports) // true

// 导出的对象近似于此种形式，exports相当于module.exports的引用
// var module = {
//   exports: {
//     foo: 'bar',
//   }
// }

命令模式

发布-订阅模式

迭代器模式

代理模式

策略模式

单例模式

惰性加载函数

场景

方案一

方案二：惰性载入函数

参考

Leetcode459. 重复的子字符串

减少使用setInterval

缺点一：setInterval无视代码错误

缺点二：setInterval无视网络延迟

CJS、ESM、UMD模块化标准

1. CommonJS

使用方式

分类

归档

标签

最新文章