時間：2023-09-04 08:42:02 | 來源：網(wǎng)站運營
時間：2023-09-04 08:42:02 來源：網(wǎng)站運營
web前端設(shè)計模式 （三）：
在線咨詢
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <script> // ES6中提供了迭代器接口 // 我們實現(xiàn)一個類似jQuery的迭代器 function Iterator(selector) { // 存儲選擇器 this.selector = selector; // 獲取元素 this.elements = document.querySelectorAll(selector); // 維護(hù)一個索引自豪 this.index = 0; } // 提供一些方法 Iterator.prototype = { // 重寫構(gòu)造函數(shù) constructor: Iterator, // 獲取當(dāng)前元素 getCurrent: function() { return this.elements[this.index] }, // 獲取第一個 first: function() { // 更改index指向 this.index = 0; // 返回元素 return this.getCurrent(); }, // 前一個 prev: function() { this.index--; // 判斷邊界 if (this.index < 0) { this.index = 0; throw new Error('已經(jīng)是第一個了') } return this.getCurrent(); }, // 后一個 next: function() { this.index++; // 判斷邊界 if (this.index >= this.elements.length) { this.index = this.elements.length - 1; throw new Error('已經(jīng)是最后一個了'); } return this.getCurrent(); }, // 獲取最后一個 last: function() { // 更改index指向 this.index = this.elements.length - 1;; // 返回元素 return this.getCurrent();; }, // 獲取第幾個 eq: function(index) { this.index = index; return this.getCurrent(); } } // 獲取li var lis = new Iterator('li'); console.log(lis.first()) console.log(lis.last()) console.log(lis.prev()) console.log(lis.prev()) console.log(lis.next()) console.log(lis.eq(3)) </script></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="box"> <button id="btn">按鈕</button> </div> <script> // 在低版本IE瀏覽器下會產(chǎn)生內(nèi)存外協(xié)的問題 // 高版本瀏覽器垃圾回收機(jī)制是計數(shù)的 // 低版本IE瀏覽器垃圾回收機(jī)制是引用的（指向的） // js中指向了元素，元素指向了js，此時將元素刪除，由于還與js有關(guān)系，因此不能被垃圾回收機(jī)制回收?? // 點擊按鈕，box顯示 "新內(nèi)容" // var btn = document.getElementById('btn'); // var box = document.getElementById('box'); // // 綁定事件 // btn.onclick = function() { // // 內(nèi)存外協(xié)：box設(shè)置設(shè)置了新的內(nèi)容，按鈕元素被刪除了，但是按鈕元素還綁定了js中的click事件，因此沒辦法被銷毀，泄露在內(nèi)存中。 // // 更新box的內(nèi)容 // box.innerHTML = '新內(nèi)容' // }? // 使用事件委托模式，避免內(nèi)存外協(xié) var box = document.getElementById('box'); // 給盒子綁定事件 box.onclick = function(e) { // 判斷點擊的是否是按鈕 if (e.target.tagName.toUpperCase() === 'BUTTON') { // 更新盒子內(nèi)容 box.innerHTML = "新內(nèi)容"; } } </script></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #back { position: fixed; right: 100px; bottom: 50px; width: 40px; height: 40px; padding: 15px; background-color: pink; font-size: 20px; color: green; } #qq { border: 1px solid pink; } #qq img { display: none; } </style></head><body> <div id="qq"> <span>官方QQ號</span> <img src="./qq.jpg" alt=""> </div> <h1>1-1-1</h1> <h1>2-2-2</h1> <h1>3-3-3</h1> <h1>4-4-4</h1> <h1>5-5-5</h1> <h1>6-6-6</h1> <h1>7-7-7</h1> <h1>8-8-8</h1> <h1>9-9-9</h1> <h1>10-10-10</h1> <h1>11-11-11</h1> <h1>12-12-12</h1> <h1>13-13-13</h1> <h1>14-14-14</h1> <h1>15-15-15</h1> <h1>16-16-16</h1> <h1>17-17-17</h1> <h1>18-18-18</h1> <h1>19-19-19</h1> <h1>20-20-20</h1> <div id="back">返回頂部</div> <script src="jquery.js"></script> <script> // 加載數(shù)據(jù)的方法 function getData() { // 當(dāng)滾動條距離頁面頂部的距離 + 視口的高度 + 300 > 頁面的高度 的時候，加載數(shù)據(jù) if (scrollY + innerHeight + 300 > document.body.clientHeight) { // 獲取數(shù)據(jù) $.get('data/all.json', function(res) { console.log(res); }) } } // 監(jiān)聽頁面滾動 window.onscroll = function() { // 返回頂部 // getData(); throttle(getData); }? // 基于時間，節(jié)流器方法 function throttle(fn, time, context, args) { // 在函數(shù)自身添加鎖 if (fn.__lock) { // 被鎖住了就不能執(zhí)行 return; } // 添加鎖 fn.__lock = true; // 執(zhí)行函數(shù) fn.apply(context, args); // 1秒之后解鎖 setTimeout(function() { fn.__lock = false; }, time || 1000) }? </script></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div class="app">hello</div> <div class="app">hello</div> <div class="app">hello</div> <script src="jquery.js"></script> <script> // $('.app').css('color', 'red').css({ // fontSize: '50px', // backgroundColor: 'pink' // }).attr('title', 'hello') </script> <!-- 實現(xiàn)jQuery --> <script> // // jQuery本身是一個工廠方法 // function jQuery(selector) { // // 返回實例 // return new init(selector) // } // // 真正的jQuery類 // function init() {? // }?? // jQuery本身是一個工廠方法 // function jQuery(selector) { // // 返回實例 // return new init(selector) // } // // 工廠方法的原型 // jQuery.prototype = { // // 更正構(gòu)造函數(shù) // constructor: jQuery, // // 將真正的jQ類放在了工廠方法的原型對象上 // // 每次訪問init都要寫 jQuery.prototype.init 太麻煩了，取了一個別名： jQuery.fn 代表原型對象 // init: init // } // // 真正的jQuery類 // function init() {? // }????? // jQuery本身是一個工廠方法 function jQuery(selector) { // 返回實例 // return new init(selector) // 重新訪問init return new jQuery.fn.init(selector); } // 工廠方法的原型 // 這樣訪問jQuery.fn 相當(dāng)于訪問jQuery.prototype jQuery.fn = jQuery.prototype = { // 更正構(gòu)造函數(shù) constructor: jQuery, // 將真正的jQ類放在了工廠方法的原型對象上 // 每次訪問init都要寫 jQuery.prototype.init 太麻煩了，取了一個別名： jQuery.fn 代表原型對象 // init: init, version: '1.0', demo() { console.log('demo') }, // 拓展一些方法，讓其更像數(shù)組 push: Array.prototype.push, splice: Array.prototype.splice } // 真正的jQuery類 jQuery.fn.init = function(selector) { // 根據(jù)選擇器，將元素獲取 var dom = document.querySelectorAll(selector); // 存儲選擇器 this.selector = selector; // 定義長度 this.length = 0; // 將獲取的元素，存儲再自身 for (var i = 0; i < dom.length; i++) { // 存儲一個成員并更改長度 this[i] = dom[i]; this.length ++; } } // 讓init類的實例，具有jQuery原型上的方法 // jQuery.fn.init.prototype = jQuery.prototype; jQuery.fn.init.prototype = jQuery.fn;? // jquery又定義了拓展方法 jQuery.extend = jQuery.fn.extend = function(obj) { // 解析對象 for (var key in obj) { this[key] = obj[key]; } } // 靜態(tài)屬性 // jQuery.extend({ // color: 'red' // }) // 拓展原型屬性 jQuery.fn.extend({ css: function(key, value) { // 如果key是字符串，直接賦值 if (typeof key === 'string') { // 給每一個元素設(shè)置樣式 for (var i = 0; i < this.length; i++) { this[i].style[key] = value; } } else { // 遍歷對象設(shè)置樣式 for (var k in key) { this.css(k, key[k]) } } // 鏈?zhǔn)秸{(diào)用 return this; }, // 設(shè)置屬性方法 attr: function(key, value) { // 為每一個成員設(shè)置屬性 for (var i = 0; i < this.length; i++) { this[i][key] = value; } } }) // 對jQuery起別名 var $ = jQuery; // console.log(jQuery('.app')); $('.app').css('color', 'red').css({ fontSize: '50px', backgroundColor: 'pink' }).attr('title', 'hello') console.log($('.app')); </script></body></html>關(guān)鍵詞：模式,設(shè)計
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
