時(shí)間：2023-09-11 13:12:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-11 13:12:01 來源：網(wǎng)站運(yùn)營
15分鐘帶你了解前端工程師必知的javascript設(shè)計(jì)模式(附詳細(xì)思維導(dǎo)圖和源碼)：
在線咨詢
(function(){ // 養(yǎng)魚游戲 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小時(shí)喂一次水 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) } // 判斷是否是數(shù)組 this.isArray = function(arr) { return Array.isArray(arr) } // 其他通用方法...}// canvas繪制圖形驗(yàn)證碼(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'), // 設(shè)置畫布寬高 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); } }, // 生成指定個(gè)數(shù)的隨機(jī)文字 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 })})();// 調(diào)用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)// 發(fā)布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) => {}) { // 判斷數(shù)據(jù)類型 function checkType(target){ return Object.prototype.toString.call(target).slice(8,-1) } // 數(shù)組或者字符串 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) } }}關(guān)鍵詞：詳細(xì),模式,設(shè)計(jì),思維,工程師
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
