一些JavaScript中原理的简单实现
实现一个双向数据绑定
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。通过这个属性可以实现简单的双向数据绑定,当前版本的的Vue数据绑定也是基于这个方法来实现的。
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
})
实现图片的懒加载
图片的懒加载原理是通过监听scroll事件来显示图片,这种技术通常用在需要加载大量的图片时,通过事件的监听将所有图片的src属性设置成默认的链接,真实的图片链接设置在data-origin里面,当出现在视口区域时将图片的src属性替换成data-origin实现懒加载。
<ul>
<li><img src="./imgs/default.png" data="./imgs/1.png" alt=""></li>
<li><img src="./imgs/default.png" data="./imgs/2.png" alt=""></li>
<li><img src="./imgs/default.png" data="./imgs/3.png" alt=""></li>
<li><img src="./imgs/default.png" data="./imgs/4.png" alt=""></li>
<li><img src="./imgs/default.png" data="./imgs/5.png" alt=""></li>
<li><img src="./imgs/default.png" data="./imgs/6.png" alt=""></li>
<li><img src="./imgs/default.png" data="./imgs/7.png" alt=""></li>
<li><img src="./imgs/default.png" data="./imgs/8.png" alt=""></li>
<li><img src="./imgs/default.png" data="./imgs/9.png" alt=""></li>
<li><img src="./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)
一些JavaScript中原理的简单实现的更多相关文章
- javascript中闭包最简单的简绍
javascript中闭包是什么 JavaScript 变量可以是局部变量或全局变量.私有变量可以用到闭包.闭包就是将函数内部和函数外部连接起来的一座桥梁. 函数的闭包使用场景:比如我们想要一个函数来 ...
- javascript 数组排序原理的简单理解
js内置的Array函数原型对象有个sort方法,这个方法能按照顺序排序数组. 例如: var arr1 = [6, 4, 2, 5, 2]; arr1.sort((x, y) => x - y ...
- JavaScript中对事件简单的理解(1)
事件(event) 1.什么是JavaScript事件? 事件是文档或浏览器中发生的特定交互瞬间. 2.事件流 事件流描述的是从页面中接受事件的顺序,包含IE提出的事件冒泡流与Netscape提出的事 ...
- JavaScript中对事件简单的理解
事件(event) 1.什么是JavaScript事件? 事件是文档或浏览器中发生的特定交互瞬间. 2.事件流 事件流描述的是从页面中接受事件的顺序,包含IE提出的事件冒泡流与Netscape提出的事 ...
- JavaScript中对事件简单的理解(2)
事件(event) event对象 (1)什么是event对象? Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.事件通常与函数结合使用,函数不会 ...
- Javascript中Promise的简单使用
// 函数功能:1秒以后创建一个10以内的随机整数,并判断这个数是否为偶数:如果是偶数则做一件事情,如果是奇数则做另一件事情 function doSomthing() { var promise = ...
- javascript中Ajax的简单封装
GET方式的在线:DEMO POST方式在线:DEMO // 1.封裝AJAX函數 function nativeAjax(option,success,error){ // 定义domain,方便环 ...
- 用25行JavaScript语句实现一个简单的编译器
原文:https://www.iteye.com/news/32680 译者注:即使对于专业程序员来说,构造一个编译器也是颇具挑战性的任务,本文将会引导你抽丝剥茧,一探究竟! 我已经写了几篇与编程语言 ...
- JavaScript中的计时器原理
理解John Resig 在 How JavaScript Timers Work. 原理分析 timer(setInterval,setTimeout)有一个很重要的概念,时间延迟的长短是不稳定的. ...
随机推荐
- msf渗透安卓手机
正文开始 首先你需要kali系统 生成木马 首先ifconfig查看本机在局域网内的ip 使用msfvenom生成apk木马 msfvenom -p android/meterpreter/rever ...
- gcc和g++的区别解析
1.误区:gcc只能编译C源代码,g++只能编译C++源代码 解析:其实gcc和g++都可以编译c/c++源代码,只是细节不同,后缀名为.c的源文件,gcc将其当作C程序,而g++则当作c++程序来处 ...
- 【网易官方】极客战记(codecombat)攻略-森林-盐碱地salted-earth
保卫森林定居点开始. 简介 这个关卡引入了布尔 “or” 的概念. 在两个布尔值之间放置一个 or 将返回一个布尔值,就像 + 需要 2 个数字并且吐出另一个数字一样. 如果前或后的值为 true,则 ...
- flask框架-下
Local与偏函数 threasing.local 多个线程修改同一个数据,复制多份变量给每个线程用,为每个线程开辟一块空间进行数据存储. 不使用therading.local # 不用local f ...
- drf偏移分页组件-游标分页-自定义过滤器-过滤器插件django-filter
drf偏移分页组件 LimitOffsetPagination 源码分析:获取参数 pahenations.py from rest_framework.pagination import Limit ...
- 【模式分解】无损连接&保持函数依赖
首先引入定义 无损分解指的是对关系模式分解时,原关系模型下任一合法的关系值在分解之后应能通过自然联接运算恢复起来.反之,则称为有损分解. 保持函数依赖的分解指的是对关系分解时,原关系的闭包与分解后关系 ...
- python-day5爬虫基础之正则表达式2
dot: '.'匹配任意的字符 '*'匹配任意多个(0到多个) 如图所示, 程序运行结果是abc,之所以没有匹配\n,是因为\n是换行符,它就代表这个字符串是两行的,而正则表达式是一行一行去匹配的.在 ...
- Vue 项目中应用
Vue使用 一.vue生命周期 # main.js import Vue from 'vue' import App from './App.vue' import router from './ro ...
- Python程序中的线程操作(线程池)-concurrent模块
目录 Python程序中的线程操作(线程池)-concurrent模块 一.Python标准模块--concurrent.futures 二.介绍 三.基本方法 四.ProcessPoolExecut ...
- urlopen error [errno 10060]的解决思路
当用多线程爬取某个网站的数据的时候,爬取一段时间后,总出现urlopen error [errno 10060]的错误,结果线程无端的被挂掉,一开始的解决思路是每次连接的时候换用不同的useragen ...