时间：2023-09-04 08:42:02 | 来源：网站运营
时间：2023-09-04 08:42:02 来源：网站运营
web前端设计模式 （三）：
在线咨询
<!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中提供了迭代器接口 // 我们实现一个类似jQuery的迭代器 function Iterator(selector) { // 存储选择器 this.selector = selector; // 获取元素 this.elements = document.querySelectorAll(selector); // 维护一个索引自豪 this.index = 0; } // 提供一些方法 Iterator.prototype = { // 重写构造函数 constructor: Iterator, // 获取当前元素 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('已经是第一个了') } return this.getCurrent(); }, // 后一个 next: function() { this.index++; // 判断边界 if (this.index >= this.elements.length) { this.index = this.elements.length - 1; throw new Error('已经是最后一个了'); } 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浏览器下会产生内存外协的问题 // 高版本浏览器垃圾回收机制是计数的 // 低版本IE浏览器垃圾回收机制是引用的（指向的） // js中指向了元素，元素指向了js，此时将元素删除，由于还与js有关系，因此不能被垃圾回收机制回收 // 点击按钮，box显示 "新内容" // var btn = document.getElementById('btn'); // var box = document.getElementById('box'); // // 绑定事件 // btn.onclick = function() { // // 内存外协：box设置设置了新的内容，按钮元素被删除了，但是按钮元素还绑定了js中的click事件，因此没办法被销毁，泄露在内存中。 // // 更新box的内容 // box.innerHTML = '新内容' // } // 使用事件委托模式，避免内存外协 var box = document.getElementById('box'); // 给盒子绑定事件 box.onclick = function(e) { // 判断点击的是否是按钮 if (e.target.tagName.toUpperCase() === 'BUTTON') { // 更新盒子内容 box.innerHTML = "新内容"; } } </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> // 加载数据的方法 function getData() { // 当滚动条距离页面顶部的距离 + 视口的高度 + 300 > 页面的高度 的时候，加载数据 if (scrollY + innerHeight + 300 > document.body.clientHeight) { // 获取数据 $.get('data/all.json', function(res) { console.log(res); }) } } // 监听页面滚动 window.onscroll = function() { // 返回顶部 // getData(); throttle(getData); } // 基于时间，节流器方法 function throttle(fn, time, context, args) { // 在函数自身添加锁 if (fn.__lock) { // 被锁住了就不能执行 return; } // 添加锁 fn.__lock = true; // 执行函数 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> <!-- 实现jQuery --> <script> // // jQuery本身是一个工厂方法 // function jQuery(selector) { // // 返回实例 // return new init(selector) // } // // 真正的jQuery类 // function init() { // } // jQuery本身是一个工厂方法 // function jQuery(selector) { // // 返回实例 // return new init(selector) // } // // 工厂方法的原型 // jQuery.prototype = { // // 更正构造函数 // 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 相当于访问jQuery.prototype jQuery.fn = jQuery.prototype = { // 更正构造函数 constructor: jQuery, // 将真正的jQ类放在了工厂方法的原型对象上 // 每次访问init都要写 jQuery.prototype.init 太麻烦了，取了一个别名： jQuery.fn 代表原型对象 // init: init, version: '1.0', demo() { console.log('demo') }, // 拓展一些方法，让其更像数组 push: Array.prototype.push, splice: Array.prototype.splice } // 真正的jQuery类 jQuery.fn.init = function(selector) { // 根据选择器，将元素获取 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]; } } // 静态属性 // jQuery.extend({ // color: 'red' // }) // 拓展原型属性 jQuery.fn.extend({ css: function(key, value) { // 如果key是字符串，直接赋值 if (typeof key === 'string') { // 给每一个元素设置样式 for (var i = 0; i < this.length; i++) { this[i].style[key] = value; } } else { // 遍历对象设置样式 for (var k in key) { this.css(k, key[k]) } } // 链式调用 return this; }, // 设置属性方法 attr: function(key, value) { // 为每一个成员设置属性 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>关键词：模式,设计
