let obj = {} let input = document.getElementById('input') let span = document.getElementById('span') // 数据劫持 Object.defineProperty(obj, 'text', { configurable: true, enumerable: true, get() { console.log('获取数据了') return obj['text'] }, set(newVal) { console.log('数据更新了') input.value = newVal span.innerHTML = newVal } }) // 输入监听 input.addEventListener('keyup', function(e) { obj.text = e.target.value })
完整实现可前往之前写的：这应该是最详细的响应式系统讲解了
14. 实现一个简单路由
// hash路由 class Route{ constructor(){ // 路由存储对象 this.routes = {} // 当前hash this.currentHash = '' // 绑定this，避免监听时this指向改变 this.freshRoute = this.freshRoute.bind(this) // 监听 window.addEventListener('load', this.freshRoute, false) window.addEventListener('hashchange', this.freshRoute, false) } // 存储 storeRoute (path, cb) { this.routes[path] = cb || function () {} } // 更新 freshRoute () { this.currentHash = location.hash.slice(1) || 'https://www.jb51.net/' this.routes[this.currentHash]() } }
15. 实现懒加载
<ul> <li><img src="https://www.jb51.net/article/imgs/default.png" data="./imgs/1.png" alt=""></li> <li><img src="https://www.jb51.net/article/imgs/default.png" data="./imgs/2.png" alt=""></li> <li><img src="https://www.jb51.net/article/imgs/default.png" data="./imgs/3.png" alt=""></li> <li><img src="https://www.jb51.net/article/imgs/default.png" data="./imgs/4.png" alt=""></li> <li><img src="https://www.jb51.net/article/imgs/default.png" data="./imgs/5.png" alt=""></li> <li><img src="https://www.jb51.net/article/imgs/default.png" data="./imgs/6.png" alt=""></li> <li><img src="https://www.jb51.net/article/imgs/default.png" data="./imgs/7.png" alt=""></li> <li><img src="https://www.jb51.net/article/imgs/default.png" data="./imgs/8.png" alt=""></li> <li><img src="https://www.jb51.net/article/imgs/default.png" data="./imgs/9.png" alt=""></li> <li><img src="https://www.jb51.net/article/imgs/default.png" data="./imgs/10.png" alt=""></li> </ul>
let imgs = document.querySelectorAll('img') // 可视区高度 let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight function lazyLoad () { // 滚动卷去的高度 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop for (let i = 0; i < imgs.length; i ++) { // 图片在可视区冒出的高度 let x = clientHeight + scrollTop - imgs[i].offsetTop // 图片在可视区内 if (x > 0 && x < clientHeight+imgs[i].height) { imgs[i].src = imgs[i].getAttribute('data') } } } // addEventListener('scroll', lazyLoad) or setInterval(lazyLoad, 1000)
16. rem基本设置
// 原始配置 function setRem () { let doc = document.documentElement let width = doc.getBoundingClientRect().width let rem = width / 75 doc.style.fontSize = rem + 'px' } // 监听窗口变化 addEventListener("resize", setRem)
17. 手写实现AJAX
// 1. 简单流程 // 实例化 let xhr = new XMLHttpRequest() // 初始化 xhr.open(method, url, async) // 发送请求 xhr.send(data) // 设置状态变化回调处理请求结果 xhr.onreadystatechange = () => { if (xhr.readyStatus === 4 && xhr.status === 200) { console.log(xhr.responseText) } } // 2. 基于promise实现 function ajax (options) { // 请求地址 const url = options.url // 请求方法 const method = options.method.toLocaleLowerCase() || 'get' // 默认为异步true const async = options.async // 请求参数 const data = options.data // 实例化 const xhr = new XMLHttpRequest() // 请求超时 if (options.timeout && options.timeout > 0) { xhr.timeout = options.timeout } // 返回一个Promise实例 return new Promise ((resolve, reject) => { xhr.ontimeout = () => reject && reject('请求超时') // 监听状态变化回调 xhr.onreadystatechange = () => { if (xhr.readyState == 4) { // 200-300 之间表示请求成功，304资源未变，取缓存 if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { resolve && resolve(xhr.responseText) } else { reject && reject() } } } // 错误回调 xhr.onerror = err => reject && reject(err) let paramArr = [] let encodeData // 处理请求参数 if (data instanceof Object) { for (let key in data) { // 参数拼接需要通过 encodeURIComponent 进行编码 paramArr.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])) } encodeData = paramArr.join('&') } // get请求拼接参数 if (method === 'get') { // 检测url中是否已存在 ? 及其位置 const index = url.indexOf('?') if (index === -1) url += '?' else if (index !== url.length -1) url += '&' // 拼接url url += encodeData } // 初始化 xhr.open(method, url, async) // 发送请求 if (method === 'get') xhr.send(null) else { // post 方式需要设置请求头 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8') xhr.send(encodeData) } }) }
18. 实现拖拽