时间：2023-09-11 13:12:01 | 来源：网站运营
时间：2023-09-11 13:12:01 来源：网站运营
15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)：
在线咨询
(function(){ // 养鱼游戏 let fish = null function catchFish() { // 如果鱼存在,则直接返回 if(fish) { return fish }else { // 如果鱼不存在,则获取鱼再返回 fish = document.querySelector('#cat') return { fish, water: function() { let water = this.fish.getAttribute('weight') this.fish.setAttribute('weight', ++water) } } } } // 每隔3小时喂一次水 setInterval(() => { catchFish().water() }, 3*60*60*1000)})()function Tools(){ if(!(this instanceof Tools)){ return new Tools() } this.name = 'js工具库' // 获取dom的方法 this.getEl = function(elem) { return document.querySelector(elem) } // 判断是否是数组 this.isArray = function(arr) { return Array.isArray(arr) } // 其他通用方法...}// canvas绘制图形验证码(function(){ function Gcode(el, option) { this.el = typeof el === 'string' ? document.querySelector(el) : el; this.option = option; this.init(); } Gcode.prototype = { constructor: Gcode, init: function() { if(this.el.getContext) { isSupportCanvas = true; var ctx = this.el.getContext('2d'), // 设置画布宽高 cw = this.el.width = this.option.width || 200, ch = this.el.height = this.option.height || 40, textLen = this.option.textLen || 4, lineNum = this.option.lineNum || 4; var text = this.randomText(textLen); this.onClick(ctx, textLen, lineNum, cw, ch); this.drawLine(ctx, lineNum, cw, ch); this.drawText(ctx, text, ch); } }, onClick: function(ctx, textLen, lineNum, cw, ch) { var _ = this; this.el.addEventListener('click', function(){ text = _.randomText(textLen); _.drawLine(ctx, lineNum, cw, ch); _.drawText(ctx, text, ch); }, false) }, // 画干扰线 drawLine: function(ctx, lineNum, maxW, maxH) { ctx.clearRect(0, 0, maxW, maxH); for(var i=0; i < lineNum; i++) { var dx1 = Math.random()* maxW, dy1 = Math.random()* maxH, dx2 = Math.random()* maxW, dy2 = Math.random()* maxH; ctx.strokeStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')'; ctx.beginPath(); ctx.moveTo(dx1, dy1); ctx.lineTo(dx2, dy2); ctx.stroke(); } }, // 画文字 drawText: function(ctx, text, maxH) { var len = text.length; for(var i=0; i < len; i++) { var dx = 30 * Math.random() + 30* i, dy = Math.random()* 5 + maxH/2; ctx.fillStyle = 'rgb(' + 255*Math.random() + ',' + 255*Math.random() + ',' + 255*Math.random() + ')'; ctx.font = '30px Helvetica'; ctx.textBaseline = 'middle'; ctx.fillText(text[i], dx, dy); } }, // 生成指定个数的随机文字 randomText: function(len) { var source = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']; var result = []; var sourceLen = source.length; for(var i=0; i< len; i++) { var text = this.generateUniqueText(source, result, sourceLen); result.push(text) } return result.join('') }, // 生成唯一文字 generateUniqueText: function(source, hasList, limit) { var text = source[Math.floor(Math.random()*limit)]; if(hasList.indexOf(text) > -1) { return this.generateUniqueText(source, hasList, limit) }else { return text } } } new Gcode('#canvas_code', { lineNum: 6 })})();// 调用new Gcode('#canvas_code', { lineNum: 6})// 缓存代理function sum(a, b){ return a + b}let proxySum = (function(){ let cache = {} return function(){ let args = Array.prototype.join.call(arguments, ','); if(args in cache){ return cache[args]; } cache[args] = sum.apply(this, arguments) return cache[args] }})()function on(type, fn){ // 对于支持dom2级事件处理程序 if(document.addEventListener){ dom.addEventListener(type,fn,false); }else if(dom.attachEvent){ // 对于IE9一下的ie浏览器 dom.attachEvent('on'+type,fn); }else { dom['on'+ type] = fn; }}class Subject { constructor() { this.subs = {} } addSub(key, fn) { const subArr = this.subs[key] if (!subArr) { this.subs[key] = [] } this.subs[key].push(fn) } trigger(key, message) { const subArr = this.subs[key] if (!subArr || subArr.length === 0) { return false } for(let i = 0, len = subArr.length; i < len; i++) { const fn = subArr[i] fn(message) } } unSub(key, fn) { const subArr = this.subs[key] if (!subArr) { return false } if (!fn) { this.subs[key] = [] } else { for (let i = 0, len = subArr.length; i < len; i++) { const _fn = subArr[i] if (_fn === fn) { subArr.splice(i, 1) } } } }}// 测试// 订阅let subA = new Subject()let A = (message) => { console.log('订阅者收到信息: ' + message)}subA.addSub('A', A)// 发布subA.trigger('A', '我是徐小夕') // A收到信息: --> 我是徐小夕const obj = { A: (num) => num * 4, B: (num) => num * 6, C: (num) => num * 8}const getSum =function(type, num) { return obj[type](num)}function _each(el, fn = (v, k, el) => {}) { // 判断数据类型 function checkType(target){ return Object.prototype.toString.call(target).slice(8,-1) } // 数组或者字符串 if(['Array', 'String'].indexOf(checkType(el)) > -1) { for(let i=0, len = el.length; i< len; i++) { fn(el[i], i, el) } }else if(checkType(el) === 'Object') { for(let key in el) { fn(el[key], key, el) } }}关键词：详细,模式,设计,思维,工程师
