JavaScript
John的WEB前端学习日记
这个作者很懒,什么都没留下…
展开
-
echarts-for-weixin只显示折线图,其他不显示解决办法
小程序使用echarts-for-weixin展示图表,结果只展示折线图,其他的统统不显示,百度大法一下午终于知道可能是echarts包内只有折线图。原创 2022-12-21 18:09:00 · 370 阅读 · 1 评论 -
有以下 3 个判断数组的方法,请分别介绍它们之间的区别和优劣Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()
1. Object.prototype.toString.call()每一个继承 Object 的对象都有toString方法,如果toString方法没有重写的话,会返回[Object type],其中 type 为对象的类型。但当除了 Object 类型的对象外,其他类型直接使用toString方法时,会直接返回都是内容的字符串,所以我们需要使用call或者apply方法来改...转载 2020-03-03 16:46:30 · 277 阅读 · 0 评论 -
js实现深度优先遍历和广度优先遍历
什么是深度优先和广度优先其实简单来说 深度优先就是自上而下的遍历搜索 广度优先则是逐层遍历, 如下图所示1.深度优先2.广度优先两者的区别对于算法来说 无非就是时间换空间 空间换时间深度优先不需要记住所有的节点, 所以占用空间小, 而广度优先需要先记录所有的节点占用空间大 深度优先有回溯的操作(没有路走了需要回头)所以相对而言时间会长一点深度优先采用...转载 2020-02-29 23:48:02 · 442 阅读 · 0 评论 -
Vue使用jsPdf将页面导出成pdf文件
1 、我们要添加两个模块①第一个.将页面html转换成图片npm install --save html2canvasnpm install jspdf --save②第二个.将图片生成pdf2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf')在将要导出的页...转载 2019-11-20 19:56:10 · 1601 阅读 · 1 评论 -
js中的instanceof运算符
概述instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上语法obj instanceof Object;//true 实例obj在不在Object构造函数中描述instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。实转载 2017-01-16 09:52:02 · 1396 阅读 · 0 评论 -
浏览器工作原理详解
转自:http://blog.csdn.net/dangnian/article/details/50876241这篇文章是以色列开发人员塔利·加希尔的研究成果。她在查阅了所有公开发布的关于浏览器内部机制的数据,并花了很多时间来研读网络浏览器的源代码。她写道:在 IE 占据 90%市场份额的年代,我们除了把浏览器当成一个“黑箱”,什么也做不了。但是现在,开放源代码的浏览器拥有了转载 2017-09-26 11:18:39 · 330 阅读 · 0 评论 -
光标停止输入后触发事件
var flag = 0; var timer; function openFlag () { timer = setTimeout(function(){ flag = 1; manageData(); }, 1000); } function closeFlag() { clearTimeout(timer);// 取转载 2017-09-28 17:46:16 · 2148 阅读 · 1 评论 -
打造丝般顺滑的 H5 翻页库
转自:http://fex.baidu.com/blog/2017/10/build-a-silky-smooth-slide-library/背景随着近几年移动营销页的火爆,催生了一个中国式的名词「H5」。而 H5 最常见的形态就是类似幻灯片翻页效果。我们需要制作 H5 的时候,最快的办法就是使用一些滑动插件库,如 iDangero.us 出品的 Swiper,百转载 2017-11-30 10:49:08 · 3656 阅读 · 0 评论 -
[正则]改变URL中的参数值
转自:http://zccst.iteye.com/blog/2212989如果一个URL是:http://www.example.com/index.html?id=100&name=xx&age=20 希望将name=meinv怎么办? Js代码 function getQueryString(name) { var reg = new转载 2017-12-08 11:40:16 · 1792 阅读 · 0 评论 -
js数组操作--使用迭代方法替代for循环
前言数组的迭代方法,这个想必大家都不陌生了,可能刚入门的人暂时还没接触到这个。但是以后的开发中,肯定会用得上的。我自身的一个使用经历就是,如果迭代方法用的适当,不但可以减少代码量,也能使代码可读性更强,性能上的优化也是肯定的了。还有一个就是,我本身在数组的遍历上,基本都是用for循环进行操作,在开始使用了迭代方法之后,我for循环用的很少。如果以后我更加熟练迭代方法的话,for使用会更少,也希转载 2017-11-23 10:20:23 · 466 阅读 · 0 评论 -
编写自己的代码库(javascript常用实例的实现与封装)
1.前言大家在开发的时候应该知道,有很多常见的实例操作。比如数组去重,关键词高亮,打乱数组等。这些操作,代码一般不会很多,实现的逻辑也不会很难,下面的代码,我解释就不解释太多了,打上注释,相信大家就会懂了。但是,用的地方会比较,如果项目有哪个地方需要用,如果重复写的话,就是代码沉余,开发效率也不用,复用基本就是复制粘贴!这样是一个很不好的习惯,大家可以考虑一下把一些常见的操作封装成函数,调用的转载 2017-12-13 10:52:48 · 508 阅读 · 0 评论 -
试解面试题
题目:写一个javscript函数 fn,该函数有一个参数 n(数字类型),其返回值是一个数组,该数组内是 n 个随机且不重复的整数,且整数取值范围是 [2, 32]。写了个递归来实现:var arr =[];function fn(n){ var num = random(); arr.push(num) //生成随机数的方法 function rand原创 2017-12-22 11:32:47 · 297 阅读 · 0 评论 -
javascript思维导图
通过几张思维导图,可以了解到整个JavaScript家族的全貌,然后更有利于JavaScript全局学习JavaScript 数据类型JavaScript 变量Javascript 运算符JavaScript 流程控制JavaScript 数组JavaScript 函数基础JavaScrip转载 2017-09-18 09:45:33 · 1030 阅读 · 0 评论 -
Backbone.js源码分析(珍藏版)
// Backbone.js 0.9.2// (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc.// Backbone may be freely distributed under the MIT license.// For all details and documentation:// http://backbonejs.org转载 2017-08-11 12:02:05 · 976 阅读 · 0 评论 -
js中Object常用方法和属性
一、属性 Object自带一个prototype的属性,即Object.prototype,Object.prototype本身也是一个对象,也会有一些属性和方法。如下: 1、属性 Object.prototype.writable:默认为false Object.prototype.enumerable:默认为false Object.prototype.configurab转载 2017-08-08 11:40:15 · 408 阅读 · 0 评论 -
JS中getYear()和getFullYear()区别分析
s中得到当前年份做法是var dayObj=new Date(); dayObj.getYear()来得到年份,我前面写过这样会出现浏览器的兼容性的问题,就是在IE中能得到我们想要的结果但是在FF中就不行了,和我们要的结果相差1900年js中得到当前年份做法是var dayObj=new Date(); dayObj.getYear()来得到年份,我前面写过这样会出现浏览器的兼容性转载 2017-01-17 09:00:12 · 2975 阅读 · 0 评论 -
理解Object.defineProperty的作用
对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。定义对象可以使用构造函数或字面量的形式:var obj = new Object; //obj = {}obj.name = "张三"; //添加描述obj.say = function(){}; //添加行为除了以上添加属性的方式,还可以使用Object.defineProperty定义新属性或修改原有的转载 2017-02-15 14:34:54 · 1116 阅读 · 0 评论 -
jQuery中click和原生onclick的区别
转载自:http://blog.csdn.net/eyeder/article/details/48805055click()和onclick()的区别: 1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件。 2.click()方法的主要作用是触发调转载 2017-05-05 13:52:42 · 2495 阅读 · 0 评论 -
前端数据模拟---mock.js 使用教程
数据模板#查看模板生成的数据var data = Mock.mock({ //list|1-10 数组元素个数随机范围, id|+2 属性值递增, age|20-30数值随机范围 // test|3.2-5 3.xx-3.xxxxx 整数位3,小数位位数范围为2-5 //'yourname|2-4': 'alice-' 重复字符串的次数范围2-4 //常规真实转载 2017-04-25 17:50:04 · 14706 阅读 · 1 评论 -
html5仿ios下拉和上拉回弹功能
在网上搜索了“html5 下拉回弹” 或 “html5 仿ios下拉回弹”,几乎没有找到可用的代码,大都是在对-webkit-overflow-scrolling进行讨论的,没什么意思。-webkit-overflow-scrolling : touch; 在查看了iscroll.js的下拉回弹及mui的回弹功能后,码出了以下的代码,基本上能够做到模仿ios回弹的效果。var转载 2017-05-09 17:33:45 · 6428 阅读 · 1 评论 -
详解JavaScript中shift()方法的使用
定义和用法shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。语法arrayObject.shift()返回值数组原来的第一个元素的值。说明如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。请注意,该方法不创建新数组,而是直接修改原有的 arrayObject。提示和注释转载 2017-07-12 11:34:14 · 5224 阅读 · 1 评论 -
JS中数组的常用方法(包含es6扩展)
转自:http://blog.csdn.net/wlwanglu/article/details/522785751、 join() 功能:将数组中所有元素都转化为字符串并连接在一起。 输入: 分隔符,默认为逗号 输出:分隔符分割的字符串 举例:var a = [1,2,3];a.join(); // =>"1,2,3"a.join(";");// =>"1;2转载 2017-08-08 11:36:01 · 1313 阅读 · 0 评论 -
JS生成某个范围的随机数【四种情况详解】
JS没有现成的函数,能够直接生成指定范围的随机数。但是它有个函数:Math.random() 这个函数可以生成 [0,1) (包括0,不包括1)的一个随机数。利用它,我们就可以生成指定范围内的随机数。而涉及范围的话,就有个边界值的问题。这样就包含四种情况:1)min ≤ r ≤ max (一般这种比较常见)2)min ≤ r 3) min转载 2017-12-22 17:48:28 · 3716 阅读 · 0 评论 -
i++与++i的区别及效率
先看看基本区别:i++ :先在i所在的表达式中使用i的当前值,后让i加1++i :让i先加1,然后在i所在的表达式中使用i的新值 看一些视频教程里面写for循环的时候都是写 ++i 而不是 i++,上网搜索了一下,原来有效率问题++i相当于下列代码 i += 1; return i; i++相当于下列代码 j = i; i += 1; re转载 2018-01-04 16:03:12 · 541 阅读 · 0 评论 -
浅谈session,cookie,sessionStorage,localStorage的区别及应用场景
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。区别:1、保持状态:cookie保存在浏览器端,session保存在服务器端2、使用方式:(1)cookie机制:如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随浏...转载 2017-01-22 11:36:53 · 7856 阅读 · 0 评论 -
如何获得select被选中option的value和text和
我想获取select选中的value,或者text,或者……比如这个:<select id="select"> <option value="A" url="http://www.baidu.com">第一个option</option> <option value="B" url="http:/转载 2018-10-25 16:50:48 · 22838 阅读 · 2 评论 -
vue + typescript 项目起手式
vue + typescript 新项目起手式我知道你们早就想用上 vue + ts 强类型了还有后续 vue + typescript 进阶篇安装vue-cli 安装ts依赖 配置 webpack 添加 tsconfig.json 添加 tslint.json 让 ts 识别 .vue 改造 .vue文件什么是typescriptTypeScript 是 JavaS...转载 2018-11-02 18:16:00 · 319 阅读 · 0 评论 -
一些使 JavaScript 更加简洁的小技巧
推荐9个使 JavaScript 代码变得更加简洁的小技巧,大概5分钟就能掌握。1.清空或截断数组在不重新给数组赋值的情况下,清空或截断数组的最简单方法是更改其 length 属性值:const arr = [11, 22, 33, 44, 55, 66];// truncantingarr.length = 3;console.log(arr); //=> [11,...转载 2018-11-05 10:50:11 · 320 阅读 · 0 评论 -
理解异步JavaScript
写在文章前这篇文章是翻译自Sukhjinder Arora的 Understanding Asynchronous JavaScript。这篇文章描述了异步和同步JavaScript是如何在运行环境中,使用调用栈,消息队列,作业队列,以及事件循环来工作的。文章如有翻译不好的地方还望多多包涵。理解异步JavaScript众所周知,JavaScript 是单线程的编程语言,那就意味着在同一...转载 2018-12-10 11:16:56 · 175 阅读 · 0 评论 -
正排索引和倒排索引---面试题试解
一个后端朋友发出来的两道面试题,说是考察正排索引和倒排索引的算法(我朋友面试的是大数据),想着用js来试解,废话不多说,上题看题目对于前端同学来说没有读取本地txt文件的方法(nodeJS除外),所以我们暂且把数据源作为一个对象数组来处理:格式如下:let obj = {'001':['aaa','bbb','ccc','ddd'],'002':[ 'fff','eee','ccc'...原创 2019-03-26 17:37:22 · 1275 阅读 · 1 评论 -
Js正则表达式数字或者带小数点的数字
function chk() { var patrn = /^\d+(\.\d+)?$/; var result = true; $("input[type=text]").each(function () { if (!patrn.exec(this.value)) { ...转载 2019-05-17 09:04:52 · 16977 阅读 · 0 评论 -
全面解析Vue.nextTick实现原理
vue中有一个较为特殊的API,nextTick。根据官方文档的解释,它可以在DOM更新完毕之后执行一个回调,用法如下:// 修改数据vm.msg='Hello'// DOM 还没有更新Vue.nextTick(function(){// DOM 更新了})尽管MVVM框架并不推荐访问DOM,但有时候确实会有这样的需求,尤其是和第三方插件进...转载 2019-05-17 09:09:08 · 1012 阅读 · 0 评论 -
ES6、ES7、ES8特性一锅炖(ES6、ES7、ES8学习指南)
ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMAScript-262。ECMAScript 标准建立在一些原有的技术上,最为著名的是 JavaScript (网景) 和 JScript (微软)。它最初由网景的 Brendan Eich 发明,第一次出现是在网景的 Navigator 2.0 浏览...转载 2018-09-27 10:29:30 · 10228 阅读 · 0 评论 -
如何避开 async/await 地狱
原文地址 How to escape async/await hellasync/await把我们从回调地狱中解放了出来,但是,人们也对其颇有微词.因为随之而来导致了async/await地狱的诞生.在这篇文章,我会试图解释什么是async/await地狱,另外我也会分享一些避开它们的方法.什么是 async/await 地狱?当我们在编写JavaScript异步代码的时候,人...转载 2018-09-18 13:57:10 · 502 阅读 · 0 评论 -
隐藏微信H5页面下拉出现的网址
微信h5页面在进行下拉操作的时候会出现网址,如下图:在很多时候,并不想暴露这个网址,这时候可以模拟微信下拉操作,从而避免这种情况。而模拟这种操作可以一个叫 better-scroll 插件实现。这里说下大概用法:安装NPMbetter-scroll 托管在 Npm 上,执行如下命令安装:npm install better-scroll --save接下来就可以在代码中引入了,webpack 等...原创 2018-05-22 09:38:12 · 5659 阅读 · 0 评论 -
javascript history对象详解
前面的话history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后退和前进。本文将详细介绍BOM中的history对象lengthhistory.length属性保存着历史记录的URL数量。初始时,该值为1。如果当前窗口先后访问了三个网址,history.length...转载 2018-02-24 11:13:48 · 2295 阅读 · 0 评论 -
娓娓道来Promise
1.概述 在Promise之前,我们js解决异步的方式是采用回调函数的方式,但是这种方式有个问题,就是当业务比较复杂时,很容易出现回调地狱,使得代码很难理解和维护。所以,Promise就是解决回调地狱的问题而出现的异步编程的解决方案。2.详述Promise我们先通过一个简单的例子,来感受一下Promise。let p = new Promise(function(resolve,reje...转载 2018-03-19 14:01:13 · 209 阅读 · 0 评论 -
forEach与map异同
一、原生js forEach()和map()遍历共同点: 1.都是循环遍历数组中的每一项。 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。 3.匿名函数中的this都是指Window。 4.只能遍历数组。1.forEach() 没有返回值。 [javascript] vie...转载 2018-03-22 10:51:29 · 11960 阅读 · 0 评论 -
axios的兼容性处理
转自:https://www.cnblogs.com/leaf930814/p/6807318.html一、简介看看官网的简介:“Promise based HTTP client for the browser and node.js” 译:基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用。二、特点:1、在浏览器中发送 XMLHttpRequests 请求...转载 2018-04-09 13:57:07 · 2006 阅读 · 0 评论 -
15/18位身份证号码验证的正则表达式总结(详细版)
前言开发过程中,常常需要对一些输入信息进行有效性验证,使用正则表达式进行校验是最简单、效率最高的方式了,下面就来看看15/18位身份证号码验证的正则表达式吧。介绍xxxxxx yyyy MM dd 375 0 十八位xxxxxx yy MM dd 75 0 十五位地区: [1-9]\d{5}年的前两位: (18|19|([23]\d)) 1800-2...转载 2018-05-16 18:29:45 · 52508 阅读 · 9 评论