javaScript
文章平均质量分 63
飞歌Fly
这个作者很懒,什么都没留下…
展开
-
SpiderFlow爬虫获取网页节点
SpiderFlow爬虫获取网页节点原创 2023-03-09 14:33:01 · 5149 阅读 · 0 评论 -
node-sass为什么一直安装不上、安装失败?
node-sass为什么一直安装不上、安装失败?原创 2022-08-28 11:50:34 · 8335 阅读 · 3 评论 -
html2canvas解决图片空白,图片样式错位
html2canvas解决图片空白,图片样式错位原创 2022-07-01 11:43:59 · 8518 阅读 · 0 评论 -
tinymce采用cdn.jsdelivr.net cdn经常挂怎么办?
原tinymce使用的是https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js地址,这个网站在国外会存在挂掉的情况,所以考虑使用国内稳定的cdn节点国内常用节点有:七牛 https://www.staticfile.org360 https://cdn.baomitu.com字节跳动 https://cdn.bytedance.com举例:把节点替换为 七牛的// why use this c原创 2022-05-18 11:24:08 · 17869 阅读 · 8 评论 -
Element-ui input 输入框限制只能输入数字的问题
需求说明后台管理系统,使用element-ui el-input组件,要求只能输入数字,最先使用的办法:<el-input v-model.number='count' type='number' maxLength='9'/>复制代码存在的问题1. maxLength不生效2. 可以输入e3. 可以输入1.1.....11...1复制代码目前解决的办法(可以生效)<el-input v-model='count' oninput="val转载 2022-05-17 12:22:21 · 21843 阅读 · 1 评论 -
vue使用v-for为列表每一项动态添加ref
有这样一个需求:因为list列表可能每一项的高度都不一样,要实现左侧步骤条动态高度,需要获取列表每一项的具体高度。所以想到给list每一项添加一个 ref,从而获取每一项的高度。1、使用index给每一项添加 ref ,:ref="`line_item${index}`" ,这样每一项都会有一个不同的 ref,line_item0、line_item1... <div class="line_item" :ref="`line_item${index}`" v-for="(item,原创 2022-05-09 16:37:15 · 3145 阅读 · 0 评论 -
实现双向绑定Proxy比defineproperty优劣
前言双向绑定其实已经是一个老掉牙的问题了,只要涉及到MVVM框架就不得不谈的知识点,但它毕竟是Vue的三要素之一.Vue三要素响应式: 例如如何监听数据变化,其中的实现方法就是我们提到的双向绑定 模板引擎: 如何解析模板 渲染: Vue如何将监听到的数据变化和解析后的HTML进行渲染可以实现双向绑定的方法有很多,KnockoutJS基于观察者模式的双向绑定,Ember基于数据模型的双向绑定,Angular基于脏检查的双向绑定,本篇文章我们重点讲面试中常见的基于数据劫持的双向绑定。常见的转载 2022-05-08 11:52:56 · 395 阅读 · 0 评论 -
用自己的方式(图)理解constructor、prototype、__proto__和原型链
在看了网上很多相关的文章,很多都是懵逼看完,并不是说各位前辈们写得不好,而是说实在不容易在一两次阅读中理解透。我在阅读了一些文章后,自己整理总结和绘制了一些相关的图,个人认为会更容易接受和理解,所以分享在此。也因此以下的所有的理解和图解都是出于个人的理解,如果有错误的地方,请各位前辈务必见谅,并辛苦在下方提出和纠错,我实在担心自己不成熟的理论底子会误导了其余的小兄弟。一开始,先说说为何这个知识点为什么理解起来这么乱个人感觉原因有三:JS内函数即对象。 Function对象和Object对象这两转载 2022-05-01 22:32:19 · 1349 阅读 · 2 评论 -
html2canvas生成的图片偏移不完整
情景一:问题背景:生成的图片在一个弹窗里面,如果页面没有滚动条就是正常的,但是一旦出现滚动条并且页面发生滚动时html2canvas绘制成的图片就会偏移出对应滚动高度的白边,如下:解决办法:楼主查了很多资料,也用了很多方法都没能解决这个问题,一气之下打算研究研究html2canvas的配置参数,果不其然,在配置参数RenderOptions下找到如下配置眼尖的楼主立马发现了scrollY这个东西。没错,这个肯定是配置偏移量的对吧,既然你是向下偏移我页面滚动的高度,那我把scroll..转载 2022-04-15 11:05:14 · 1263 阅读 · 0 评论 -
JS 的 6 种打断点的方式,你用过几种?
Debugger 是前端开发很重要的一个工具,它可以在我们关心的代码处断住,通过单步运行来理清逻辑。而 Debugger 用的好坏与断点打得好坏有直接的关系。Chrome Devtools 和 VSCode 都提供了 Debugger,它们支持的打断点的方式有 6 种。普通断点在想断住的那一行左侧单击一下就可以添加一个断点,运行到该处就会断住。这是最基础的断点方式,VSCode 和 Chrome Devtools 都支持这种断点。条件断点右键单击代码所在的行左侧,会出现一个下拉框转载 2022-02-28 12:15:34 · 1432 阅读 · 0 评论 -
vue下载pdf、word、excel、png图片
知道文件的下载路径后,执行文件下载操作,支持 pdf、pdf、word、excel、png等资源。downItem(filename, filePath) { let link if (filePath.includes('pdf') || filePath.includes('png')|| filePath.includes('jpg') ||filePath.includes('jpeg')) { link = document.createElement原创 2021-12-07 19:34:04 · 845 阅读 · 0 评论 -
浅谈前端路由原理hash和history
众所周知, hash 和 history 在前端面试中是很常考的一道题目。在学习本文内容之前,周一对 hash 和 history 的认知可能就在 hash 的 url 里面多了个 # ,而 history 就不会。然后,我认知里还有一个是只有 history 才能做前后端分离,而 hash 跟前后端分离没有关系。然而,现实是……对于前端路由来说, hash 和 history 都可以用于前后端分离项目,且两者有各自的特点和各自的使用场景,在使用过程中主要要了解当前项目所处的场景,以便于更好地判断使用哪转载 2021-11-04 18:44:08 · 826 阅读 · 0 评论 -
你不知道的 JSON.stringify() 的威力
前言其实有很多有用的东西,当时学习了,也记住了,但是时间久了就是记不住,所以导致在日常开发中总是想不起来原来这个东西可以这么用,而去选择了更加复杂和麻烦的方式。其实我们日常学习的知识就是拿来用的,即使你今天把知识点背下来了,没有去思考这个知识点我们可以用来干嘛,不需要几天就会慢慢地忘掉。所以今天我们来了解一下在日常学习时你遗漏掉或者忘掉或者没有思考过的你不知道的 JSON.stringify() 的威力。原文戳我通过需求学习JSON.stringify()首先我们在开发的过程当中遇到这样转载 2021-10-11 10:43:16 · 486 阅读 · 0 评论 -
web引入font字体文件太大,字体抽取
当只有一个活动页面或者一小段文字需要引入特殊字体,字体文件往往会有十几兆或者几十兆,特别在移动端或者弱网情况下有相当差的体验,一个14M左右的文件就需要加载12秒...所以针对一些小范围使用字体文件或者页面变化不大的项目可以考虑把常用字体抽取出来再生成一个小的字体文件,再进行引入。发现fontmin 这个框架比较符合需求,它是第一个纯 JavaScript 字体子集化方案,可以使用node命令或者可视化窗口的形式进行操作官网地址:http://ecomfe.github.io/fontmi.原创 2021-06-30 10:10:08 · 1310 阅读 · 0 评论 -
ES6解构 - 对象、嵌套对象解构
解构是ES6新加的解构功能,可以使得我们获取数据更方便,从而提高日常编码效率。解构可以用于对象,也可以用于数组,这篇文章我们只讲在对象类型上使用解构可以做哪些事情:一:解构用于变量声明let node = { name: 'mike', age: 25};let {name, age} = node;console.log(name); // mikeconsole.log(age); // 25let/const/var 后面跟上用一对{}包裹的变量列表,变量名与对象属转载 2021-06-27 10:31:28 · 4677 阅读 · 0 评论 -
NodeJS 3000等端口被占用
打开cmd或者gitbash,输入命令:npm install killport2 -gkillport 3000原创 2021-04-09 13:10:38 · 472 阅读 · 0 评论 -
使用iframe的正确姿势
前言说起iframe,大家都会觉得很嫌弃或者很不愿接近,原因大概都是:能耗高,安全问题,spider不喜欢它...也有(不少)同学内心独白就是:不!这很low很dirty,我才不想用惹!但是我们必须的承认iframe之强大,很多时候我们都会(不得不)使用它,真的素又爱又恨呐-8-今天就在这里和大家一起好好讨论一下iframe。iframe基本概念我们先看一个????<iframe src="demo.html" height="300" width="500" name="dem转载 2021-03-28 14:49:57 · 941 阅读 · 0 评论 -
call和apply第一个参数为null/undefined,函数this指向全局对象
call/apply用来改变函数的执行上下文(this),它们的第一个参数thisArg是个对象,即作为函数内的this。多数时候你传啥函数内就是啥。仅以call示例 1 2 3 4 5 6 7 functionfun() { alert(this); } fun.call(1); fun.call('a'); fun.call(true); fun.call({na...转载 2021-03-28 13:34:58 · 1871 阅读 · 0 评论 -
图解原型和原型链
原型和原型链是 JS 中不可避免需要碰到的知识点????,本文使用图片思维导图的形式缕一缕原型、原型链、实例、构造函数等等概念之间的关系????Constructor 构造函数首先我们先写一个构造函数 Person,构造函数一般为了区别普通函数要求首字母大写:function Person(){}复制代码prototype 原型原型指的就是一个对象,实例“继承”那个对象的属性。在原型上定义的属性,通过“继承”,实例也拥有了这个属性。“继承”这个行为是在 new 操作符内部实现的。转载 2021-02-21 21:42:31 · 216 阅读 · 0 评论 -
http请求发生两次(原来是options请求)
OPTIONS 请求的作用以及由来 哪些场景会出现 OPTIONS 请求 如何处理每次请求都要 OPTIONS ,从而导致 2 次重复网络请求开销的问题作用及由来先简单回顾一下跨域请求,当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,此时会发起一个跨域 HTTP 请求。针对跨域,有多种解决方案,不展开说,不是今天的重点。其中有一种方式叫做”跨域资源共享“(Cross-origin resource sharing),准确的说是一个W3C标准,可以克服同源策略的限制。转载 2020-07-31 17:14:41 · 3108 阅读 · 0 评论 -
一些常见的手写js题目
1、callFunction.prototype.call2 = function(content = window) { content.fn = this; let args = [...arguments].slice(1); let result = content.fn(...args); delete content.fn; return re...原创 2020-04-28 08:43:15 · 593 阅读 · 0 评论 -
JavaScript深入之创建对象的多种方式以及优缺点
1. 工厂模式function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name); }; return o;}var person1 = createPerson('k...转载 2020-03-31 11:10:17 · 179 阅读 · 0 评论 -
前端的各种日期操作
前言虽然现在处理日期方面已经有了很成熟的也很好用的库,例如(momentjs和date-fns),但是在实际开发中,我们有时候可能并不需要整个库。所以我就在下面整理了在前端开发时对日期时间的各种操作,也算是比较全的了。其中一部分来自自己,还有一部分来源于我们万能的网友~获取当前时间戳var timestamp = Date.parse(new Date()); //精确到...转载 2020-01-14 13:51:12 · 1280 阅读 · 1 评论 -
Object.assign 是浅拷贝还是深拷贝?实现深拷贝的方法有哪些?
bject.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 如果目标对象中的属性具有相同的键,则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。 Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用...转载 2020-01-13 09:24:34 · 1288 阅读 · 0 评论 -
H5移动端开发常用技巧
转载自:https://juejin.im/post/5d6e1899e51d453b1e478b29viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影(这个我觉得真没必要去掉,用户点击是需要反馈的,而这个背景色刚刚好提供了一种反馈)等等,太多啦,这些相信大家百度一下就可以查到很多资料????本篇文章主要是讲一些其他的或者优化手段。内容不多????1. 弹出数字键盘...转载 2019-10-18 16:56:52 · 335 阅读 · 0 评论 -
JavaScript数组遍历:for、foreach、for in、for of、$.each、$().each的区别
转载自:https://segmentfault.com/a/1190000017394445一、forJavascript中的for循环,它用来遍历数组var arr = [1,2,3,4]for(var i = 0 ; i< arr.length ; i++){ console.log(arr[i])}//1,2,3,4九九乘法表:for ( va...转载 2019-06-18 18:00:33 · 256 阅读 · 0 评论 -
如何正确判断this的指向
转载自:https://juejin.im/post/5d124a12f265da1b9163a28d如果用一句话说明 this 的指向,那么即是: 谁调用它,this 就指向谁。但是仅通过这句话,我们很多时候并不能准确判断 this 的指向。因此我们需要借助一些规则去帮助自己:this 的指向可以按照以下顺序判断:全局环境中的 this浏览器环境:无论是否在严格模式下,在全局...转载 2019-07-18 14:51:06 · 1228 阅读 · 0 评论 -
ios页面卡顿不流畅
给滚动元素上添加:overflow-y: auto;-webkit-overflow-scrolling : touch原创 2019-10-11 18:18:53 · 134 阅读 · 0 评论 -
关于常用的http请求头以及响应头详解
转载自:https://juejin.im/post/5c17d3cd5188250d9e604628一、常用的http请求头1.AcceptAccept: text/html浏览器可以接受服务器回发的类型为 text/html。 Accept: */* 代表浏览器可以处理所有类型,(一般浏览器发给服务器都是发这个)。2.Accept-Encoding Accept-...转载 2019-03-18 13:12:27 · 1184 阅读 · 0 评论 -
JS arr数组转化成json对象,数据改造并对json对象自定义
有时候后台会返回一些奇怪的数据,不能满足业务逻辑需要,所以我们就需要对 这部分数据进行自定义。假如后台返回的数据如图(部分截图)而我们需要的数据结构是这样的:[{"name":"全部","id":0},{"name":"预约","id":1},{"name":"已到店","id":2},{"name&q原创 2018-09-18 21:54:47 · 21278 阅读 · 0 评论 -
SourceTree回滚版本到某次提交
本次教程将讲述如何使用SourceTree来回退代码到某次提交。方法/步骤 1 打开sourceTree,切换到开发分支 2 打开本地工作副本test1.txt文件,编辑新增 add test1 3 提交并推送本次新增到远程仓库 4 打开本地工作副本test1.txt文件,编辑新增 add test2 5...转载 2019-06-20 14:08:23 · 2279 阅读 · 0 评论 -
JS中常见原生DOM操作API【总结整理)
转载自:https://blog.csdn.net/hj7jay/article/details/53389522几种对象NodeNode是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法。常见的Node有 element,text,attribute,comment,document 等(所以要注意 节点 和 元素 的区别,元素属于节点的一种)。...转载 2019-05-29 10:16:02 · 166 阅读 · 0 评论 -
js判断页面是首次被加载还是刷新
转载自:https://blog.csdn.net/shangxinwei/article/details/904119071 利用window.name属性在页面刷新时不会重置判断(在该属性空置的情况下可使用)if(window.name == ""){ console.log("首次被加载"); window.name = "isReload"; // 在首次进入页面时我们可...转载 2019-05-29 09:32:37 · 4633 阅读 · 1 评论 -
vue前端项目引入iconfont阿里图标的四种方式
一、首先登陆阿里云矢量图标库,把需要的字体图标加入到自己的项目中http://www.iconfont.cn/home/index二、阿里云图标的四种方式(推荐第二种方式Font class引入,如果不考虑网络问题可以用在线引入的方式)进入项目以后会看到阿里云可以选择三种方式进行导入图标(1)unicodeunicode的主要的特点是优势①兼容性最好,支持ie6...原创 2019-02-12 18:18:26 · 24720 阅读 · 3 评论 -
解决移动端,模态框、弹框滑动滚动,底部页面随着滑动、穿透的问题
移动端有个比较头疼的问题,就是 在模态框、弹框中滑动,底部页面也随着滑动的问题。本文将从 触摸事件、点击事件的顺序来解决这个问题。首先我们要明白 touch 和click 的执行顺序问题:当一个用户在点击屏幕的时候,系统会触发touch事件和click事件,touch事件优先处理,touch事件经过 捕获,处理, 冒泡 一系列流程处理完成后, 才回去触发click事件,click有200-...原创 2019-02-12 11:25:49 · 6821 阅读 · 0 评论 -
es6中Promise的理解以及使用
转载:https://www.zcfy.cc/article/javascript-promises-for-dummies-scotch-1961.html理解 PromisePromise 简介:"假设你是一个宝宝. 你的妈妈承诺(Promise)你,下个礼拜她会给你一台新手机。"你不知道,下个礼拜你是否会拿到手机。你的妈妈可以真的给你买一个全新的手机,或者放你鸽子,也有可能如...转载 2019-01-24 12:15:39 · 2207 阅读 · 2 评论 -
后台返回的base64格式的图片无法渲染到页面上
最近开发一个项目,需要后台返回一个二维码,所以后台返回给我一串base64格式的字符串。本以为直接img标签渲染即可,但死活不出来,以为我的方法有问题,一直在查找。后来发现是后台返回的base64图片格式的字符串 带有换行和空格,写了一个方法去掉换行和空格,图片立马渲染成功(吐槽一下。。) getQRcode () { let _this = this ...原创 2018-12-06 13:45:50 · 10680 阅读 · 0 评论 -
Canvas获取图像、图片的平均颜色或主色调
转载自:https://blog.csdn.net/teajs/article/details/50124207首先,我们可以使用canvas的getImageData函数获取所有像素的数据。然后将所有的rgb三值各取平均值即可。function getImageColor(canvas, img) { canvas.width = img.width; canvas...转载 2018-10-24 18:17:24 · 6402 阅读 · 0 评论 -
点击链接跳转到微信公众号关注页、微信关注链接
感觉现在微信又更新了,原来 好好的方法不给用了,可能是微信一直在禁用通过外部链接引导到关注页的举动,不支持。通过重定向跳转至全部消息列表页,关注按钮一闪而过,然后消失了。。。暂时没有好的解决方案。所以以下文章可以略过。。 现在的公众号引流一般都只能是 二维码扫码后关注,那么通过点击一段网页链接(图片、或文字)怎么引导用户到公众号关注页呢?一、首先打开需要设置关注页 的公众号此时...原创 2018-10-25 14:46:09 · 91059 阅读 · 23 评论 -
使用vue多组图片上传
本文使用原生的上传有局限性,ios手机能同时选择多张图片,而安卓手机只能一张一张上传,不能一次性选择多张。所以建议调用 微信JS SDK。 代码如下:<template> <div class="start-work viewport"> <div class="hd tc"> <div c...原创 2018-07-07 15:09:06 · 7236 阅读 · 3 评论