javascript
文章平均质量分 59
泥猴桃
web前端开发
展开
-
javascript防抖和节流原理
防抖和节流的总结:1. 防抖(debounce) 防抖是限制频率,多次出发一次执行。2. 节流(throttle) 节流是限制次数,限制规定时间内执行次数。这篇文章以 underscore.js 工具库中的 防抖和节流函数作为演示,并探究其源码。underscore.js 中文文档本篇文章只对其原理进行探究,使用方式不做太多概述,如果不知道怎么使用的同学,可自行百度。**下边是 html 演示代码, 里边引入debounce.js throttle.js 两个文件 **<!DOCTYPE原创 2021-02-25 23:29:50 · 1209 阅读 · 1 评论 -
call、apply、bind 实现原理
这篇文章主要探究 call、apply、bind 的实现原理,对于使用方法不做太多概述。如果有不太了解的同学可以查看JavaScript MDN 官方文档 call apply bind 详解前言我们都知道 call、apply、bind 三个方法是用来改变 this 指向的,但是也只局限于会用状态。具体的实现原理,却没有思考过。所以有必要研究一下。在明白起原理的情况下,才能用的更好。具体实现 call众所周知这三个方法都是提供给 函数使用的,函数通过这三个方法调用把 this 传入进去就可以改变原创 2021-02-23 22:02:40 · 536 阅读 · 0 评论 -
对闭包的理解?闭包使用场景?
一、是什么一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域在 JavaScript中,每当创建一个函数,闭包就会在函数创建的同时被创建出来,作为函数内部与外部连接起来的一座桥梁下面给出一个简单的例子function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变.原创 2021-02-22 23:16:25 · 2089 阅读 · 0 评论 -
Promise 实现原理
前言这篇文章主要是探究 Promise 的实现原理,对于使用方法,这里不做过多概述,如果还有对 Promise 使用方式不太了解的,可以先看 阮一峰老师的 Promise 教程Promise 是什么,为什么会出现 Promise?抽象表达:Promise 是一门新的技术(ES6规范)Promise 是js 中进行异步变成的新解决方案,在没有 Promise 之前,旧方案是单纯使用回调函数具体表达:从语法上来说: promise 是一个构造函数从功能上来说:promise 对象用来封原创 2021-02-21 21:43:05 · 6592 阅读 · 1 评论 -
寻找字符串中,连续重复次数最多的字符
比如有一个字符串: ‘aaaabbbbbcccccccccccccdddddd’ 这里边连续重复出现次数最多的是 c 共出现了 13 次,我们要想办法使用js找出来解题思想:同时声明两个指针,i 和 j,初始值都是 0 同时指向下标为 0 的位置,遍历字符串,i停在 0 位,j 往后走,每走一次和 i 指针指向的位置做比较,如果相同,什么也不做,如果不同,就说明连续重复出现的字符串结束了,i — j 指针之间的字符串就是相同的,j - i 就是出现的次数这时候判断 j - i 是否大于 maxR原创 2021-02-17 23:09:11 · 4808 阅读 · 0 评论 -
栈相关笔试题
题目如下图:解题代码如下: function smartRepeat (templateStr) { // 指针 var index = 0 // 栈1,存放数字 var stack1 = [] // 栈2,存放临时字符串 var stack2 = [] // 剩余部分 var rest = templateStr while (index < templateStr.length原创 2021-02-17 22:58:36 · 245 阅读 · 1 评论 -
形式转换:试将高维数组[1, 2, [3, [4, 5], 6], 7, [8], 9]变为图中所示的对象
小技巧:只要出现了“规则复 现”就要想到用递归。方法一: var arr = [1, 2, [3, [4, 5], 6], 7, [8], 9] // var arr = [1, 2, 3, [4, 5]] // 转换函数,方法1 function convert (arr) { // 准备一个初始对象里边有个初始 children:[] 数组 var obj = {children: []} // 遍历传入的 arr 的 每一项 .原创 2021-02-17 22:33:19 · 531 阅读 · 0 评论 -
试输出斐波那契数列的前10项
面试题:1、试输出斐波那契数列的前10项,即1、1、2、3、5、8、13、21、34、55。方法1:使用递归 // 创建一个函数,功能是返回下标为 n 的这项的数字 function fib (n) { // 看下标 n 是不是 0 或者是不是 1, 如果是,就返回常数 1,如果不是就递归 var v = n === 0 || n === 1 ? 1 : fib(n - 1) + fib(n - 2) return v } // var原创 2021-02-17 22:05:19 · 16252 阅读 · 0 评论 -
javascript 笔试题整理
1、写一个深拷贝方法function deepClone (origin, target) { var target = target || {} var toStr = Object.prototype.toString var arrType = '[object Array]' for (var key in origin) { if (origin.hasOwnProperty(key)) { if (typeof(origin[key]) === 'objec原创 2021-01-11 23:21:20 · 1375 阅读 · 2 评论 -
javascript hasOwnProperty()
hasOwnProperty() 方法,判断 属性或者方法是不是对象本身的自有属性方法,而不是原型上的属性方法function Car () { this.brand = 'Benz' this.color = 'red' this.displacement = '3.0'}Car.prototype = { lang: 6, width: 2.5}Object.prototype.name = 'aaaa'var car = new Car()for (var k原创 2021-01-11 22:40:15 · 180 阅读 · 0 评论 -
javascript 链式调用实现原理
1、链式调用是什么使用过JQuery 的同学应该都知道,代码如下$('text’).setStyle('color', 'red').show();这就是链式调用,就是调用完一个方法以后,不用另起一行,重新再当前this 对象上再去调用方法, 就像下边这样var sched = { wakeup: function () { console.log('Running') return this }, morning: function () { console.原创 2021-01-11 22:26:34 · 2173 阅读 · 1 评论 -
javascript 原型 原型链总结
原型 prototype 其实是 function 对象的一个属性,打印出来看了一下,结果它也是对象function Handphone (color, brand) { this.color = color this.brand = brand this.screen = '18:9' this.system = 'Android'}console.log(Handphone.prototype)...原创 2021-01-10 23:20:21 · 186 阅读 · 0 评论 -
MVVM
MVVM 由一下三个内容组成View: 界面Model: 数据模型ViewModel: 作为桥梁负责沟通 View 和 Model在 JQuery 时期,如果需要刷新UI 时,需要先取到对应的 DOM 再更新 UI,这样数据和业务的逻辑就和页面有强耦合在MVVM 中, UI 是通过数据驱动的,数据一旦改变就会响应的刷新对应的 UI , UI 如果改变,也会改变对应的数据。这种方式就可以在业务处理中 只关心数据的流转,而无需直接和页面打交道。 ViewModel 只关心数据和业务的处理,不关原创 2020-12-03 22:06:12 · 219 阅读 · 0 评论 -
从浏览器地址栏输入 url 到显示页面的步骤
基础版浏览器根据请求的 RUL 交给 DNS 域名解析,找到真实 IP, 向服务器发起请求;服务器交给后台处理完成后返回数据,浏览器接收文件(THML、JS、CSS、 图像等);浏览器对加载到的资源(HTML、JS、CSS 等) 进行语法解析,建立相应的内部数据结构(如 HTML 的 DOM);载入解析到的资源文件,渲染页面,完成。详细版在浏览器地址栏输入RUL浏览器直接查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤如果资源未缓存,发起新请求。过已经缓存,检验是否足够新鲜,原创 2020-11-26 22:21:09 · 219 阅读 · 0 评论 -
VUE(nuxt)项目性能监测统计
最近有个需求是监测性能,要求在移动端项目里统计控制台(如下图)最后一行的Finish,DOMContentLoaded和Load三个时间。一、指标解释(1)FinishFinish 时间是页面上所有 http 请求发送到响应完成的时间,HTTP1.0/1.1 协议限定,单个域名的请求并发量是 6 个,即Finish是所有请求(不只是XHR请求,还包括DOC,img,js,css等资源的...转载 2020-03-12 21:30:42 · 2176 阅读 · 0 评论 -
JSON Web Token 入门教程
阮一峰的 JSON Web Token 入门教程这篇教程讲的很详细,简单明了,这里只放了一个连接入口,不再复制过来了!原创 2020-03-11 21:27:41 · 149 阅读 · 0 评论 -
js查看浏览器是否支持某一方法 [native code] 如ES6新特性 && 获取内置对象的子类型
1. 查看浏览器的对于API的支持如 Proxy, Promise, Map, Symbol, Reflect等原生方法,在浏览器中的支持情况都可以用这个函数检测 // 判断浏览器是否支持某一方法 function isNative(Ctor) { return typeof Ctor === 'function' && /native code/.test(Cto...原创 2019-12-22 17:52:33 · 2629 阅读 · 0 评论 -
input type=number禁止输入小数
最近做一个项目需求是输入框只能输入数字,并且禁止输入小数 intpu type=number 就可以控制只允许输入数字,但是不能控制输入小数 在网上查阅相关资料后整理了下 代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>input type=number 禁止输入小数点</tit原创 2017-10-09 22:37:55 · 24260 阅读 · 0 评论 -
document load 和 document ready 的区别
页面加载完成有两种事件load 是当前页面所有资源加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行的一个函数,问题: 如果图片资源较多,加载时间较长,onload 后等待执行的函数需要等待较长时间,所以一些效果可能受到影响。$(document).ready() 是当DOM 文档树加载完成后执行的一个函数(不包含图片,css 等),所以会比load 较快执行。在原生...原创 2019-02-16 23:04:40 · 648 阅读 · 0 评论 -
阮一峰关于js同步异步的解释
所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行。为了解...转载 2019-02-17 00:07:01 · 1109 阅读 · 0 评论 -
javascript 垃圾回收
这篇文章基本上是从 《javascript 高级程序设计》中摘抄出来的。有兴趣的同学有时间可以去阅读以下!和C#、 java一样 javascript 有自动垃圾回收机制,也就是说执行环境会负责管理代码执行过程中使用的内存,在开发过程中就无需考虑内存分配及无用内存的回收问题了。javascript 垃圾回收机制很简单:找出不在使用的变量,然后释放掉其占用的内存,但是这个过程不是时时的,因为其开销...转载 2019-02-17 15:36:27 · 248 阅读 · 0 评论 -
什么是跨域?如何解决?
1、什么是跨域跨域:指的是路蓝旗不能执行其他网站的脚本。他是由浏览器的同源策略造成的,是浏览器对javascript 施加的安全限制。例如:a页面想获取b页面的资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的。而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制。理解这一点很重要!!!同源策略: 是指协议,域...原创 2019-02-17 16:35:44 · 337 阅读 · 0 评论 -
for、forEach 、for in、for of 、map 循环的区别
for 遍历数组//对象数组var arr = [ {Monday: '星期一', Tuesday: '星期二', Wednesday: '星期三'} ]for (var i=0; i&amp;lt;arr.length;i++){ // i是下标(索引) console.log(i) console.log(arr[i])}结果://数组var arr = [&quot;星期一&quot;,&quot;...原创 2019-02-17 17:21:55 · 1195 阅读 · 0 评论 -
JavaScript中基本数据类型和引用数据类型的区别
1、基本数据类型和引用数据类型ECMAScript包括两个不同类型的值:基本数据类型和引用数据类型。 基本数据类型指的是简单的数据段,引用类型指的是有多个值构成的对象。 当我们把变量赋值给另一个变量时,解析器首先要确认的就是这个值是基本类型值,还是引用类型值。常见的基本数据类型:Number, String, Boolean, Null, Undefined 。基本数据类型是按值访问的,...转载 2019-02-13 22:07:59 · 138 阅读 · 0 评论 -
js判断字符串或者数组中出现次数最多的元素并计算出现总次数
var str = 'addddbcsaertdd'; function maxCount(str){ var obj = {}; for(var i = 0 ; i &amp;lt; str.length; i++){ var key = str[i]; if...原创 2019-02-19 23:31:58 · 735 阅读 · 0 评论 -
javascript深拷贝和浅拷贝的区别
今天,CVTE面试官问了深拷贝和浅拷贝的问题我的回答是:浅拷贝是拷贝了对象的引用,当原对象发生变化的时候,拷贝对象也跟着变化;深拷贝是另外申请了一块内存,内容和原对象一样,更改原对象,拷贝对象不会发生变化;但是面试官给我说:浅拷贝是拷贝一层,深层次的对象级别的就拷贝引用;深拷贝是拷贝多层,每一级别的数据都会拷贝出来;回来查了一下资料,并没有发现面试官说的这种关于深拷贝浅拷贝的说法,看了几篇文...转载 2019-03-03 18:50:09 · 663 阅读 · 0 评论 -
pc 端 前端对接支付宝支付-前端获取支付宝返回的form 表单以及submit提交表单,自动跳转支付页面扫码支付
项目中用到了微信扫码,支付宝扫码支付。前端调取支付宝接口(后台进行了封装,没有直接调取支付宝接口)。调用接口返回数据中,会有一串form表单字符串返回,前端需要做的就是把这串form 表单字符串通过appendchild 方法添加到当前页面中,并且执行这个表单的submit() 方法,表单提交以后,会自动跳转到支付宝扫码支付页面返回的form数据大概如下,(可能会有差别)<form n...原创 2019-06-18 23:19:07 · 23991 阅读 · 26 评论 -
js 格式化金额方法
//* 金额千分位加逗号,保留2位小数,不足补零,否则四舍五入 // * 参数说明: // * num:要格式化的数字 string或者number // * decimals:保留几位小数 // * dec_point:小数点符号 // * thousandsSep:千分位符号 // ...原创 2019-06-24 21:29:07 · 3025 阅读 · 0 评论 -
js正则验证身份证号码并 根据号码获取生日和性别
最近项目中碰到一个需求,根据用户输入的身份证号码自动识别生日,和性格,为此专门在网上找了下资料了解了下,建议先了读一遍下边的文章身份证信息介绍: https://baijiahao.baidu.com/s?id=1611137815296898286&wfr=spider&for=pc后来自己写了个方法记录一下代码如下<!DOCTYPE html><h...原创 2019-07-11 19:44:29 · 2782 阅读 · 0 评论 -
js 一些项目中常用的原型方法整理
这个文件一般可以直接复制到项目中,用来做utils 文件,里边包含了 Date , Number, String, Array 对象上封装的常用方法,具体请看注释!如果要拿去做项目的 utils 文件,可以把这些方法写在一个立即执行函数中,避免污染全局空间function Utils() {};/* * 格式化金额 * @param money [string/Number] 待精确的...原创 2018-12-16 18:05:12 · 640 阅读 · 0 评论 -
用来下载图片的javascript脚本
功能说明: 本人在浏览图片网站的时候常常发现一个问题就是想复制图片到本地时常常另存为,另存为,另存为。哎呀,有点麻烦。所以这脚本的功能就是在一个在一个图片网站时,跳出所有图片,然后只要点击自己想要的图片就可以下载了。当然啦直接用浏览器插件也是一个不错的选择哦。 –代码简单到不能再简单了,所以就不详细说明了。 –大家可以吧脚本保存到收藏夹,到时候想用时点击一下就可以了。 –可能有的,旧版本浏...原创 2018-08-06 20:31:56 · 1331 阅读 · 0 评论 -
JavaScript:原生JS实现图片懒加载
为什么要懒加载 懒加载(LazyLoad)是前端优化的一种有效方式,极大的提升用户体验,图片一直是页面加载的流浪大户,现在一张图片几兆已经是很正常的事,远远大于代码的大小。倘若一次ajax请求过来10张图片的地址,我想如果你一次性把10张图片都加载出来,肯定是不合理的。第一:会显示的很慢,多加载1秒都会引起用户的流失,这对靠流量的网站来说绝对是噩梦。 第二:用户如果只是随便看看,...转载 2018-08-06 20:25:17 · 312 阅读 · 0 评论 -
苹果ios用js的Date() 获取到的日期时间 显示NaN
ios使用如下方法获得NaN,安卓手机则是正常计算,解决方法是换个这个时间的格式new Date("2017-04-28 23:59:59").getTime()换成如下方式就正常了,就是‘-’换成‘/’new Date("2017/04/28 23:59:59").getTime()正则表达式替换方法"2017/04/28 23:59:59".replace(/\..原创 2018-05-19 18:53:04 · 13765 阅读 · 1 评论 -
js 中 函数内部加 return false 的作用
有两个作用,禁止向上冒泡和禁止默认行为。 请先看以下代码:<div id="box"> <div id="txt">123</div> <input id="btn" type="submit"></div>禁止向上冒泡:event.stopPropagation(); 在你点击了 txt 或者 btn 后,将会触发 onclick 事件。然后会触发 txt 或 btn 的上原创 2017-11-02 20:31:10 · 1936 阅读 · 0 评论 -
svg 环形进度条加读取进度效果(读数效果)-- 移动端 rem 适配
项目需求做一个环形进度条的效果需要有一个读数的效果,在网上查阅相关资料后整理了下 gif 效果如下,录制的不是很流畅多停留下时间看下 都是动态的效果 代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta content="width=d原创 2017-10-16 22:54:39 · 4230 阅读 · 2 评论 -
数字递增效果(读数效果)
最近项目需求中有用到环形进度条,然后需要读数的效果,在网上找了下相关的代码,写出来以后整理了下 话不多说直接上代码最终效果如下图 html<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery打开网页后数字动态跳转到指定数字大小代码</title><link rel="stylesheet" href="css/原创 2017-10-16 21:59:53 · 7071 阅读 · 0 评论 -
Cookie/Session机制详解
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份。本章将系统地讲述Cookie与Session机制,并比较说明什么时候不能用Cookie,什么时候不能用Session。 1.1 Cookie机制在程序中,会话跟...转载 2016-12-19 13:09:25 · 278 阅读 · 0 评论 -
网页防复制,禁止文字选中,禁止右键菜单js代码,兼容大部分浏览器方法
css文件中放入如下代码:body {-moz-user-select : none;-webkit-user-select: none;}js文件中放入如下代码:function iEsc() { return false;}function iRec() { return true;}function DisableKeys() { if(event.ctrlK原创 2016-12-22 13:49:58 · 651 阅读 · 0 评论 -
js实现数组项升序、降序 方法(适用大部分数据类型)
今天在书上看到两个方法,一个升序方法一个降序方法,记录下来供以后参考!javascript提供了两个相关方法 severse() 颠倒数组顺序; sort()升序排列数组项var arr = [1,5,2,10,15];console.log(arr.sort()); //[1, 10, 15, 2, 5]但是sort()方法会根据测试字符串的结果改变顺序,因为数值5虽然小于10,但原创 2016-12-08 23:53:39 · 4032 阅读 · 0 评论 -
js检测判断手机访问跳转到手机站
js代码如下 function browserRedirect() { var sUserAgent= navigator.userAgent.toLowerCase(); var bIsIpad= sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs= sUserAgent.match(/iphone os/i) =原创 2016-12-06 09:36:48 · 937 阅读 · 0 评论