javascript
文章平均质量分 61
莱米code
这个作者很懒,什么都没留下…
展开
-
JS 指定元素滚动到屏幕中间
点击元素,使该元素滚动到屏幕中间<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2022-03-20 17:24:13 · 4062 阅读 · 0 评论 -
swiper 组件实现 滑动到最后一个 slide 后,再次滑动触发跳转事件
该代码只测试了移动端 其他端原理应该相同技术栈swiper 6.xvue 2.xts思路借助 swiper 提供的 touch 事件当用户按下屏幕时,通过 touchStart 记录起始的位置通过 touchMove 不断更新坐标点,并判定是否到达可执行操作的临界点用户松手触发 touchEnd 事件,在这里面通过(方向,是否是最后一个,是否到达临界点)这些条件判断是否执行用户代码段核心代码 /** * 是否到最后一个 slide 了 */ isEnd: .原创 2021-07-06 20:07:18 · 3942 阅读 · 1 评论 -
JS 阻止浮层弹窗下滚动
1. 利用移动端的 touchmove 阻止默认行为 _preventEvent(e){ e.preventDefault(); } // 禁用 document.documentElement.addEventListener('touchmove', this._preventEvent, {passive: false}) // 解除禁用 document.documentElement.removeEventListener('touchmove', this._pre原创 2020-10-23 14:19:45 · 655 阅读 · 0 评论 -
【Jump】 js 控制页面的滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jump</title> <style> #box { background-color: pi原创 2020-10-22 11:38:44 · 1526 阅读 · 0 评论 -
JS 中的数据类型检测(含jquery源码es6实现)
数据类型检测typeof原理:直接在计算机底层基于类型的值(二进制)进行检测typeof null // objecttypeof /^1/ // objecttypeof new Date() // objecttypeof function(){} // function弊端:typeof 不能区别 普通对象/数组对象/正则对象/日期对象会错误的将 null 检测为 objectinstanceof原理: 检测当前实例是否属于这个类,只原创 2020-08-11 09:51:30 · 187 阅读 · 0 评论 -
关于数组/对象的遍历 for in for of
let arr = [3, 4, 5] let obj = { "a": "val_a", "b": "val_b", "c": "val_c" } for (let i in arr) { console.log(i); // 0 1 2 } for (let i of arr) { con...原创 2020-08-10 16:53:13 · 239 阅读 · 0 评论 -
前端中的二进制
ArrayBufferArrayBuffer:用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组,通常在其他语言中称为 byte arrayTypedArrayTypedArray :它是一个指定特定元素类型(Int8Array)的统称,详情见 MDNlet buffer = new ArrayBuffer(8); // 8个字节的ArrayBufferconsole.log(buffer.byteLength); // 8字节const int8Array = new原创 2020-07-17 17:54:56 · 1550 阅读 · 1 评论 -
JS 中的 compose 函数 绘图分析函数执行过程
在函数式编程中,经常会出现多个函数组合,像这样: const add1 = (x) => x + 1 const mul3 = (x) => x * 3 const div2 = (x) => x / 2 add1(mul3(div2(add1(6)))) // 11.5这样虽然能够完成计算,但是可读性很差,所以我们需要构造一个函数完成上面的功能: function compose(...funcs) { if (funcs.le原创 2020-07-05 17:16:34 · 225 阅读 · 0 评论 -
canvas web 跟随鼠标绘制矩形框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>跟随鼠标绘制矩形框</title> <style> #canvas {原创 2020-06-30 15:30:08 · 3009 阅读 · 2 评论 -
js 手写 new、create 方法
let obj = {}let func = function() {}console.log('对象的 __proto__:', obj.__proto__);console.log('对象的 prototype', obj.prototype);// prototype 是函数所特有的属性console.log('函数的 __proto__:', func.__proto__);console.log('函数的 prototype:', func.prototype);functi原创 2020-06-26 15:33:10 · 617 阅读 · 0 评论 -
js 中 Array 常用方法原理
经常会忘记数组的方法,因此将常用的方法用js实现,通过实现原理来加深印象function deepCopy(target) { let result const type = typeof target if (type === 'object') { if (target === null) return target if (Array.isArray(target)) return target.map(item => deepCo.原创 2020-06-26 15:29:00 · 349 阅读 · 0 评论 -
JS性能优化之减少回流重绘次数
1. 重绘 - Repaint当render tree中的一部分元素的样式改变(宽高、大小、位置等不变)导致页面重建如:color backgroundColor visibility…每个页面至少需要一次回流,就是在页面第一次加载的时候2. 回流 - Reflow元素的大小或者位置发生了变化(当页面布局和几何信息发生变化的时候),触发了重新布局导致渲染树重新计算布局和渲染...原创 2020-05-01 10:45:25 · 674 阅读 · 0 评论 -
JavaScript高级程序设计(第三版)学习笔记第11章
DOM 扩展1. 选择符APISelectors API 使浏览器原生支持CSS查询querySelector // body元素 document.querySelector("body"); // 根据id document.querySelector("#content"); // 类名为bd的第一个元素 document.querySelector(".bd")...原创 2020-04-23 22:09:37 · 157 阅读 · 0 评论 -
JavaScript高级程序设计(第三版)学习笔记第10章
1. 节点层次节点关系操作节点- appendChild- insertBefore- replaceChild- removeChild- cloneNode(true) // 深克隆- cloneNode(false)原创 2020-04-23 21:00:23 · 142 阅读 · 0 评论 -
JavaScript高级程序设计(第三版)学习笔记8章
BOM(Browser Object Model)-浏览器对象模型1. window 对象window 对象扮演着 ECMAScript 中 Global对象的角色,因此全局声明的对象或者方法会变成 window对象的属性和方法窗口的可视区域大小 打开新窗口 window.open("http://www.baidu.com")定时器 // 超时调用 ...原创 2020-04-22 21:18:36 · 128 阅读 · 0 评论 -
javascript 闭包的理解
function fn(){ var y = 999; return function(){ console.log(y); // 999 return y; } } var f = fn(); f(); // 999ECStack Execution Context Sta...原创 2020-04-21 22:38:16 · 110 阅读 · 0 评论 -
JavaScript高级程序设计(第三版)学习笔记第7章
函数表达式1. 定义函数的方式 //函数声明 function functionName(){} // 函数表达式 var functionName = function(){}2. 递归3. 闭包闭包是指有权访问另一个函数作用域中的变量的函数定义一个变量声明变量(declare)创建值- 基本值 存在于栈中- 引用值 存在于堆中复制(d...原创 2020-04-21 21:50:39 · 165 阅读 · 0 评论 -
JavaScript高级程序设计(第三版)学习笔记第6章
面向对象的程序设计1.理解对象1.1 属性类型ECMAScript 中有两种属性:数据属性和访问器属性、1. 数据属性数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特性Configurable - 表示能否通过delete删除属性从而重新定义属性,能否修改属性的特征,或者能否把属性修改为访问器属性,默认值为trueEnumerable - ...原创 2020-04-19 21:37:50 · 174 阅读 · 0 评论 -
JavaScript高级程序设计(第三版)学习笔记5章
第5章 引用类型1. Obejct2. Array创建数组 var colors = new Array(3) // [,,] var colors = new Array("red") // ["red"] var colors = []数组的length属性不是只读的,可以通过这个属性向数组的末尾添加或删除项 var colors = ["red",...原创 2020-04-16 20:51:03 · 171 阅读 · 0 评论 -
JavaScript高级程序设计(第三版)学习笔记4章
第4章 作用域和内存1. 基本类型和引用类型基本类型:Undefined Null Boolean Number String引用类型:Object基本类型,可以对其进行赋值操作,而引用类型相当于是一个指针,可以添加方法、属性函数传参时基本类型会传递值,引用类型会传递指针,因此在函数内部修改引用类型的值其外部也会改变2. 没有块级作用域可以在函数外部访问到内部定义的变量的值...原创 2020-04-13 21:37:49 · 204 阅读 · 0 评论 -
Ajax (菜鸟教程)学习笔记
什么是AJAXAJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。创建对象var xmlhttp;if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代...原创 2019-07-28 16:36:18 · 461 阅读 · 0 评论 -
JavaScript高级程序设计(第三版)学习笔记1-3章
第1章1. 简介JavaScript:专为网页交互设计的脚本语言,包含三部分ECMAScript - 提供核心语言功能欧洲计算机制造商协会(ECMA,European Computer Manufacturers Association)DOM - 文档对象模型,提供访问和操作网页内容的方法和接口BOM - 浏览器对象模型,提供与浏览器交互的方法和接口第2章1. <...原创 2020-04-11 19:11:10 · 182 阅读 · 0 评论 -
.eslintrc.js
module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, es6: true }, extends: ['plugin:vue/rec...原创 2019-12-03 18:38:48 · 298 阅读 · 0 评论 -
call,apply,bind 用法及原理
改变js中函数内部的this指向示例: 使fn函数中的this指向obj对象注: apply 只能接收数组作为参数原创 2019-10-14 18:49:07 · 101 阅读 · 0 评论