javascript
前端Jason
做一个能独立思考的人,有话可说,有事可干,歌以咏志。
展开
-
树数据中根据子节点id查找父节点的id
<!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"> <title>Document<原创 2021-11-29 17:07:44 · 988 阅读 · 2 评论 -
js中new关键字的实现原理
// 实现newfunction _new() { let obj = new Object(); // 1. 创建一个空对象 let Con = [].shift.call(arguments); // 2. 获得构造函数 obj.__proto__ = Con.prototype; // 3. 链接到原型 let result = Con.apply(obj, arguments); // 4. 绑定 this,执行构造函数 return typeof result === 'ob原创 2021-11-29 11:07:44 · 369 阅读 · 0 评论 -
垃圾回收机制
我们知道垃圾回收机制是引擎来做的,JS引擎有很多种(各个浏览器都不同),其垃圾回收机制在一些细节及优化上略有不同,本文我们以一些通用的回收算法作为切入,再由 V8 引擎发展至今对该机制的优化为例(为什么以 V8 为例?因为它市场占有率大 ????),一步一步深入来助我们了解垃圾回收机制,因为只有真正了解垃圾回收机制,后面才能理解内存泄漏的问题以及手动预防和优化JavaScript 是门魅力无限的语言,关于它的 GC(垃圾回收)方面,你了解多少呢?想来大部分人是因为面试才去看一些面试题从而了解的垃圾回收,转载 2021-09-06 11:28:36 · 270 阅读 · 0 评论 -
js复制文本到剪切板
思路创建文本域,并把需要复制的字符串赋值给value属性选中(聚焦)文本域执行复制操作document.execCommand('Copy')实现/** * @param url 需要复制的字符串 * @param success 复制成功的回调 * @param error 复制失败的回调 */export const copyStr = (url: string, success?: () => void, error?: () => void) => {原创 2021-08-18 14:03:34 · 185 阅读 · 0 评论 -
防抖
防抖 debounce场景搜索提示如果默认情况下,输入一个字符就触发送一次请求,这样太浪费性能。加入防抖后,指定一个最大触发时间,用户在这个时间内输入内容后,就会重新开始计时,只有超过该时间间隔才会发送请求优势:避免频繁触发事件,导致的性能问题其他场景: window 的 resize / scroll 事件等生活中的例子:乘坐电梯,假设你正在电梯里面 电梯门开始关闭,突然,另一个人进入电梯。这个时候,电梯门打开了,它没有升降。 现在又有一个人要进入电梯,又执行了上述相同的功能原创 2021-05-10 13:54:06 · 112 阅读 · 0 评论 -
JS实现复制文本功能
核心api:textArea.select(); 代替手动实现自动选中文本document.execCommand("Copy") 复制选中内容到剪贴板,返回值是一个boolean值,如果是 false 则表示操作不被支持或未被启用。了解更多废话少说直接上代码// 1. 创建// 自调用Clipboard函数返回值为一个对象,该对象有一个copy方法,将该对象挂到全局window上,以便在项目的任何地方都能使用window.Clipboard = (function (window, d.原创 2020-12-01 16:19:06 · 803 阅读 · 0 评论 -
iframe之父子页面相互传参
思路:父传子:发送方:iframe.contentWindow.postMessage('要传的参数', '*')接收方:window.addEventListener("message", function(e){...}, false) // e是个对象,里面包含了传过来的参数子传父:发送方:parent关键字表示父窗口,如果一个窗口没有父窗口,则它的 parent 属性为自身的引用.parent.postMessage('要传的参数', '*')接收方:window.a原创 2020-07-12 19:32:01 · 2272 阅读 · 0 评论 -
6种方式实现数组扁平化
概念将多维数组变成一维数组的过程[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]实现方式1. ES6的Generator 函数无视数据类型function *flatten(arr) { for (const item of arr) { if (Array.isArray(item)) { yield *flatten(item) } else { yield item } }}const原创 2020-07-12 19:02:46 · 1460 阅读 · 0 评论 -
ECharts数据可视化插件
EChartsECharts快速上手ECharts,一个使用JavaScript实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线...转载 2020-02-11 21:14:58 · 1538 阅读 · 0 评论 -
响应式布局的两种方式
媒体查询/*@media screen and (条件){ html{ font-siz:值px }}*//*实现rem的适配设计图是 750需要适配的设备:750 720 540 480 424 414 400 384 375 360 320 定义函数 */@media screen and (min-width:320px){ h...原创 2020-02-01 11:04:58 · 630 阅读 · 0 评论 -
ES6模块化
ES6模块化在之前的 javascript 中一直是没有模块系统的,前辈们为了解决这些问题,提出了各种规范, 最主要的有CommonJS和AMD两种。前者用于服务器,后者用于浏览器。而 ES6 中提供了简单的模块系统,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。基本使用一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能...原创 2020-01-12 11:27:53 · 172 阅读 · 0 评论 -
FormData上传进程监听
效果图FromDtata.html<style>.info { width: 500px; min-height: 200px; border: 1px solid red; margin: 0 auto;}.out { width: 80%; height: 20px; margin: 50px auto; border: 1px sol...原创 2019-12-09 20:20:08 · 168 阅读 · 0 评论 -
模板引擎
模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。为什么要使用模板引擎我们通过ajax获取到数据后,需要把数据渲染到页面,在学习模板引擎前,我们的做法是大量的拼接字符串,对于结构简单的页面,这么做还行,但是如果页面结构很复杂,使用拼串的话代码可阅读性非常的差,而且非常容易出错,后期代码维护也是相当的麻烦。...原创 2019-12-09 20:10:34 · 117 阅读 · 0 评论 -
前后端交互的两种方式
方式一:表单提交表单(form):表单用于收集用户输入信息,并将数据提交给服务器。是一种常见的与服务端数据交互的一种方式//1. action:指定表单的提交地址//2. method:指定表单的提交方式,get/post,默认get//3. input的数据想要提交到后台,必须指定name属性,后台通过name属性获取值//4. 想要提交表单,不能使用input:button 必须...原创 2019-12-09 20:07:47 · 10469 阅读 · 6 评论 -
jsonp介绍及原理
jsonp介绍为了保证用户信息的安全,防止恶意的网站窃取数据,目前所有浏览器都实行了同源策略,而不同源 则跨域。同源策略最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。现在浏览器的所谓"同源"指的是"三个相同":协议相同域名相同端口相同例如:http://www.example.com/dir2/other.html:同源http:...原创 2019-12-05 22:29:34 · 152 阅读 · 1 评论 -
jQuery事件
jQuery事件机制JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件的处理能力。jQuery事件发展历程简单事件绑定 > bind事件绑定 > delegate事件绑定 > on事件绑定(推荐)简单事件注册。缺点:只能注册单个事件...原创 2019-11-29 10:23:51 · 228 阅读 · 0 评论 -
gulp
gulp官网中文网前端自动化构建工具js: function(){//},代码压缩,混淆 : var name = 123,var x = 123css,合并: 1个js 1kb ,有10个js.5个核心方法gulp.task(‘任务名’,function(){}) // 创建任务。gulp.src(’./*.css’) 指定想要处理的文件gulp.dest() // 指...原创 2019-11-23 10:52:07 · 99 阅读 · 0 评论 -
数组去重6大方法
性能逐渐递减// 1function distinct(a, b) { let arr = a.concat(b) let result = [] // 保存去重后的结果 let obj = {} // 利用对象属性唯一的特性来判断数组元素是否已经存在了 for (let i of arr) { // i就是数组的当前元素的值 if (!obj...原创 2019-11-23 10:35:16 · 344 阅读 · 0 评论 -
BOM-浏览器对象模型
BOM延时器和定时器延时器: var timerId = setTimeout() clearTimeout(timerId)定时器: var timerId = setInterval() clearInterval(timerId);延时器延时一段时间执行一次定时器:间隔一段时间不停的执行,想要停止,手动调用clearInterval来停止。this指向解决this问题: va...原创 2019-11-23 10:32:41 · 106 阅读 · 0 评论 -
ES5-数组的新方法
ES5-数组的新方法forEachforEach() 方法对数组的每个元素执行一次提供的函数。功能等同于for循环.应用场景:为一些相同的元素,绑定事件处理器!需求:遍历数组[“张飞”,“关羽”,“赵云”,“马超”]var arr = ["张飞","关羽","赵云","马超"];//第一个参数:element,数组的每一项元素//第二个参数:index,数组的下标//第三个参数:a...原创 2019-11-18 11:31:30 · 175 阅读 · 0 评论 -
ES6-函数的'默认参数'
JavaScript 中函数的参数默认是undefined。然而,在某些情况下可能需要设置一个不同的默认值。之前做法:一般设置默认参数的方法是在函数体测试参数是否为undefined,如果是的话就设置为默认的值。语法:function [函数名]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) { s...原创 2019-11-18 11:16:02 · 120 阅读 · 0 评论 -
ES6-展开运算符 ...
思考:let arr1 = [11, 22, 33]; let arr2=[‘one’, ‘two’, ‘three’] 合并成一个新数组展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用作用:1-展开数组2-展开对象const arr = [1...原创 2019-11-18 11:08:17 · 149 阅读 · 0 评论 -
ES5-数组reduce()方法
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 可以作为一个高阶函数,用于函数的 compose。注意: reduce() 对于空数组是不会执行回调函数的。array.reduce(function(total, currentValue, currentIndex, arr), initialValue)参...原创 2019-11-18 10:50:37 · 451 阅读 · 0 评论 -
原生实现bind()方法
正常情况下bind()是如何使用的??Math.max.bind([],3,2,1,34,23,55,4).bind(obj,参数1,参数2…)因为形参只设了一个obj,所以obj为第一个实参,所有实参都在arguments里Function.prototype.mybind = function (obj) { // 截取参数1,参数2... // [3,2,1,34...原创 2019-11-10 14:17:23 · 144 阅读 · 0 评论 -
正则表达式
正则表达式正则表达式:用于匹配规律规则的表达式,正则表达式最初是科学家对人类神经系统的工作原理的早期研究,现在在编程语言中有广泛的应用,经常用于表单校验,高级搜索等。创建正则表达式构造函数的方式var regExp = new RegExp(/\d/);正则字面量var regExp = /\d/;正则的使用/\d/.test("aaa1");元字符正则表达式由一些...原创 2019-11-10 14:05:32 · 153 阅读 · 0 评论 -
递归
递归函数递归函数:函数内部直接或者间接的调用自己递归的要求:自己调用自己(直接或者间接)要有结束条件(出口)递归函数主要是化归思想 ,将一个复杂的问题简单化,主要用于解决数学中的一些问题居多。把要解决的问题,归结为已经解决的问题上。一定要考虑什么时候结束让函数结束,也就是停止递归(一定要有已知条件)应用:获取按钮下标的两种方式由于点击事件是异步的,当点击按钮的时候for循环早...原创 2019-11-10 13:51:00 · 68 阅读 · 0 评论 -
通过改变原型指向实现继承
通过改变原型指向实现继承,即原型链继承function Person(name, age, sex) { this.name = name this.age = age this.sex = sex}Person.prototype.eat = function () { console.log("人可以吃东西");}Person.prototype....原创 2019-11-10 13:39:26 · 171 阅读 · 0 评论 -
组合继承
组合继承 = 原型链继承 + 借用构造函数继承借用构造函数继承:继承到了构造函数中的属性原型链继承: 继承到了原型上的方法function Person(name, age, sex) { this.name = name, this.age = age, this.sex = sex}Person.prototype.sayHi = func...原创 2019-11-10 13:35:49 · 75 阅读 · 0 评论 -
浅拷贝和深拷贝
浅拷贝:只拷贝对象表面一层属性,无法拷贝属性值是复杂数据类型的属性深拷贝:拷贝对象的所有属性深拷贝本质:使用递归,一层层浅拷贝var obj = { name: "小明", age: 22, car: { price: "20w", brand: "大众" } }fu...原创 2019-11-10 13:28:16 · 132 阅读 · 0 评论 -
函数的四种调用模式以及call()apply()和bind()
函数的四种调用模式根据函数内部this的指向不同,可以将函数的调用模式分成4种函数调用模式方法调用模式构造函数调用模式上下文调用模式(借用方法模式)函数:当一个函数不是一个对象的属性时,我们称之为函数。方法:当一个函数被保存为对象的一个属性时,我们称之为方法。函数调用模式如果一个函数不是一个对象的属性时,就是被当做一个函数来进行调用的。此时this指向了windowf...原创 2019-11-10 13:24:17 · 452 阅读 · 0 评论 -
JavaScript之对象和原型
万物皆对象内置构造函数创建对象我们可以直接通过 new Object() 创建://在js中,对象有动态特性,可以随时的给一个对象增加属性或者删除属性。var person = new Object()person.name = 'Jack'person.age = 18person.sayName = function () { console.log(this.name)...原创 2019-11-08 11:37:01 · 150 阅读 · 0 评论 -
swaiper实现轮播图
swiper初始化swiper第一个参数为: 轮播图容器的css选择器第二个参数为:是一个对象,这个对象用来做配置的.swiper-container { width: 790px; height: 340px;} .swiper-pagination-bullet{ width: 12px; height: 12px;}.swiper-pagin...原创 2019-11-08 11:31:23 · 234 阅读 · 0 评论 -
原生JS实现轮播图
需求:js动态添加小圆点js动态添加最后一张假图片实现左右焦点图 + 无缝滚动自动播放点击小圆点同步切换核心:改变ul的left值+无缝轮播/index.html中的css* { margin: 0; padding: 0; list-style-type: none}div.box { width: 790px; height: 340p...原创 2019-11-08 11:17:05 · 164 阅读 · 0 评论 -
JavaScript实现放大镜效果
功能鼠标移入到smallBox上,显示mask 和 bigBox鼠标移出smallBox, 隐藏mask 和 bigBox鼠标在smallBox上移动 onmousemovemask跟随鼠标移动限制mask的移动范围等比例的移动大图//css* { margin: 0; padding: 0;}.box { width: 350px; ...原创 2019-11-05 11:58:44 · 117 阅读 · 0 评论 -
鼠标拖拽的两种方法
<div></div>div { width: 100px; height: 100px; background-color: aqua; cursor: move }// 方式一: var div = document.querySelector('d...原创 2019-11-05 11:52:08 · 926 阅读 · 0 评论 -
javascript之Bom
BOMBOM(Browser Object Model):浏览器对象模型,提供了一套操作浏览器功能的工具。BOM包含的内容很多,但是很多东西都不太常用,在BOM中需要大家掌握的就一个东西,那就是定时器 。window对象window对象是一个全局对象,也可以说是JavaScript中的顶级对象像document、alert()、console.log()这些都是window的属性,...原创 2019-11-05 11:45:58 · 81 阅读 · 0 评论 -
阻止a链接跳转的三种方式
<a href="http://www.baidu.com" id="a">百度一下</a>// 方式一:// <a href="javascript:void(0)">百度一下</a> var a = document.getElementById('a')// 方式二:// a.onclick = function () {...原创 2019-11-05 11:43:18 · 1260 阅读 · 0 评论 -
事件的三个阶段
事件的三个阶段事件触发时候会经历三个阶段:①事件捕获阶段 ②执行阶段(执行当前元素的注册事件) ③事件冒泡阶段。本节通过一个示例,对三个阶段加以总结引入:addEventListener(type,listener,userCapture)type:事件名称 click mouseover mouseoutlistener:事件注册函数userCapture:可选,boo...原创 2019-11-02 08:39:29 · 849 阅读 · 0 评论 -
注册事件的两种方式
注册事件的两种方式on+事件名称onclick、onmouseover这种on+事件名称的方式注册事件几乎所有的浏览器都支持。注册事件:box.onclick = function(){ //事件处理程序 }移除事件:box.onclick = null; on+事件名称注册事件的缺点:同一个元素同一类型的事件,只能注册一个,如果注册了多个,会出现覆盖问题。注册事件的...原创 2019-11-01 11:39:41 · 1154 阅读 · 0 评论 -
获取距离
基本情况:显示器的屏幕信息screeen.height 屏幕分辨率的高(定值)screen.width 屏幕分辨率的宽(定值)screen.availHeight 屏幕可用高度(屏幕分辨率的高度-上下测任务栏的高度,定值)screen.availWidth 屏幕可用宽度(屏幕分辨率的宽度-左右侧任务栏的宽度,定值)浏览器信息window.outerHeight 浏览器高度wi...原创 2019-11-01 11:37:24 · 189 阅读 · 0 评论