javascript
关注
分享
扫一扫
文章平均质量分 56
讨厌走开啦
这个作者很懒，什么都没留下…
展开
-
javascript读取zip包内指定文件内容
js读取zip包内文件 Document原创 2022-03-06 14:59:07 · 4797 阅读 · 0 评论 -
nodejs模拟wss服务提示The subprotocol ‘[object Object]‘ is invalid.的问题分析
nodejs模拟wss服务提示The subprotocol ‘[object Object]‘ is invalid.的问题分析原创 2022-02-16 22:56:55 · 4417 阅读 · 1 评论 -
前端项目运行时提示Syntax Error: TypeError: token.type.endsWith is not a function的解决方案
参考文档：https://www.baidu.com/link?url=rxkuHBNVNB0i7GCoDEfgkwDr3AllV9XWRLWwkFQl7p1PjamwyIPupL93spZDTywmxMetZ7yHNtqtgJRPGR0POa&wd=&eqid=d1c30348003392a90000000461721b6e问题背景：当为项目代码拉取分支后执行npm install下载依赖包，然后执行npm run serve发现项目运行失败，提示信息为Syntax Error: T原创 2021-10-25 21:58:08 · 7489 阅读 · 3 评论 -
reflow（重排/回流）、repaint（重绘）及其优化
原文地址：https://blog.youkuaiyun.com/u013100656/article/details/79888106浏览器拿到HTML之后的渲染过程：生成dom树；生成render树；执行reflow（在render树的基础上计算页面真实显示dom的位置）；执行repaint（为真实显示的dom绘制不影响dom位置的样式，如设置dom的color等）。reflow：当页面...转载 2019-06-21 17:38:51 · 766 阅读 · 0 评论 -
获取svg内text文本元素的高度、宽度及坐标等信息
之前有一篇文章介绍了如何获取svg元素的高度、宽度等信息，传送门：https://blog.youkuaiyun.com/lqlqlq007/article/details/81875996但是svg内的text文本元素通常不会给定宽度和高度，而动态计算文本元素位置时这些信息是必须的（比如希望text文本元素上下左右居中），此时可以通过getBoundingClientRect方法来获取，示例代码如下：&...原创 2019-06-28 18:21:12 · 9705 阅读 · 0 评论 -
javascript的arguments详解
参考文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments笔者虽然在开发中经常会用到arguments，但主要还是用于获取函数的可变参数列表，并没有深入理解，故在本文补上。arguments定义：arguments是函数（不包括箭头函数）内置的一个类数组对象，数组元素为函数...原创 2019-07-15 15:04:57 · 1948 阅读 · 0 评论 -
bind的用法和模拟实现
参考文档一：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind参考文档二：https://blog.youkuaiyun.com/YZ0826/article/details/80176169bind方法从功能上来说和call、apply方法相同，用于改变方法的this...原创 2019-07-15 17:17:56 · 258 阅读 · 0 评论 -
javascript事件循环的task和microtask
原文地址：https://www.cnblogs.com/dong-xu/p/7000139.html首先来看一个示例代码（也是面试时经常会被提及的setTimeout和Promise谁先执行这个问题）：console.log('script start');setTimeout(function() { console.log('setTimeout');}, 0);Promi...转载 2019-07-11 12:06:35 · 379 阅读 · 0 评论 -
javascript的继承——原型链继承
原型链继承方式：Son.prototype = new Father();原型链继承的几个特点：父类构造函数中的属性和方法都可以被子类继承；父类原型上的属性和方法可以被继承；父类实例上的属性和方法无法被继承；父类构造函数中的属性和方法在所有子类实例中是共享的；父类原型上的属性和方法在所有子类实例中是共享的；创建子类实例时无法向父类构造函数传参（如果父类构造函数允许传参）。下面...原创 2019-07-16 11:11:22 · 333 阅读 · 0 评论 -
javascript的继承——构造函数继承
构造函数继承方式：Father.call(this, args);构造函数继承的几个特点：父类构造函数中的属性和方法都可以被子类继承；父类原型上的属性和方法无法被继承；父类实例上的属性和方法无法被继承；父类构造函数中的属性和方法在所有子类实例中是不共享的；创建子类实例时可以向父类构造函数传参；允许多重继承（同时继承多个不同的父类）。var Father = function ...原创 2019-07-16 11:37:58 · 930 阅读 · 0 评论 -
javascript二维码生成
二维码的效果图如下：二维码的生成依赖于qrcodejs2插件，可以通过以下命令下载（qrcodejs2当前只有一个0.0.2版本）：npm install qrcodejs2@0.0.2qrcodejs2的使用也非常简单，在html模版上添加待生成二维码的dom（下例中的id为qrcode的div）：<!DOCTYPE html><html lang="en">...原创 2019-07-23 16:01:51 · 892 阅读 · 0 评论 -
async&await关键词用法
参考文档：https://javascript.info/async-awaitasync和await关键词通常用于和promise协同工作，下面介绍一下他们的功能和用法。asyncasync关键词定义在函数前，用于声明当前函数会返回一个promise对象。基本写法如下： async function test() { //do something }使...原创 2019-07-19 16:12:56 · 1754 阅读 · 0 评论 -
javascript的继承——组合继承
组合继承是指子类同时对父类进行原型链继承和构造函数继承，也是实际开发中常用的继承方式。如果对原型链继承和构造函数继承还不清楚的同学可以点下面的传送门：原型链继承：传送门构造函数继承：传送门父类构造函数中的属性和方法都可以被子类继承；父类原型上的属性和方法都可以被子类继承；父类实例上的属性和方法无法被继承；父类构造函数中的属性和方法在所有子类实例中是不共享的；父类原型上的属性和方法在...原创 2019-07-17 16:00:33 · 290 阅读 · 0 评论 -
用requestAnimationFrame实现无缝轮播图
参考文档一：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/108参考文档二：https://blog.youkuaiyun.com/vhwfr2u02q/article/details/79492303如果需要用css实现无缝轮播，请点传送门requestAnimationFrame方法的作用为在屏幕刷新每一帧时...原创 2019-08-26 10:22:01 · 1567 阅读 · 0 评论 -
promise终止方案
方案帖子地址：https://bbs.youkuaiyun.com/topics/392558819简单描述一下需求场景：页面同时并发多个相同的请求（即发送请求的代码是复用的），请求的响应时间不定（即后发请求的可能比先发的请求响应更快），需要做到每次只处理最后一次请求的响应结果。下面上代码：class promiseContainer { constructor() { this.promi...原创 2019-03-26 18:40:11 · 8120 阅读 · 0 评论 -
webpack4.x为图片资源配置base64编码规范
webpack可以通过url-loader（file-loader）来完成对符合要求图片资源进行base64编码转换的功能。参考文档：http://www.cnblogs.com/coco1s/p/4375774.html下面直接上webpack.config（即通过url-loader的limit配置项来完成，单位byte，大于limit的图片资源会进行base64编码转换）：const ...原创 2018-11-14 18:23:10 · 4902 阅读 · 0 评论 -
javascript中函数的循环调用
javascript中函数的循环调用原创 2017-09-16 17:43:14 · 10728 阅读 · 0 评论 -
首页性能优化——javascript的按需加载
首页性能优化有多个不同的方向，对应的优化方案也有所不同，本文主要介绍首页如何在首次加载时减少所依赖javascript文件数量来提升性能，即javascript的按需加载。首先先说明一下javascript按需加载的概念及适用场景：通常一个页面会在header标签里会声明依赖的javascript文件，这些javascript文件可能是jquery、angular、vue这样的框架库，也可能是d3这原创 2017-11-29 18:28:10 · 5220 阅读 · 0 评论 -
数组reduce()和reduceRight()方法
原文地址：https://www.w3cplus.com/javascript/array-part-8.html很多时候需要累加数组项的得到一个值(比如说求和)。如果你碰到一个类似的问题，你想到的方法是什么呢？会不会和我一样，想到的就是使用for或while循环，对数组进行迭代，依次将他们的值加起来。比如：var arr = [1,2,3,4,5,6];Array.prototyp转载 2018-01-21 22:36:55 · 762 阅读 · 0 评论 -
es6的yield关键字
原文地址：http://www.zhufengpeixun.com/qianduanjishuziliao/javascriptzhuanti/2017-03-25/740.html我们先回顾一下这个经常被用来演示yield语法的函数例子：function* gen () { for (let i = 0; i < 5; i++) { yield i }}con...转载 2018-02-11 16:09:52 · 433 阅读 · 0 评论 -
filter基本用法
一个例子说明filter的基本用法：let ar = ["1", "2"];let obj = {"key": "value"};function config(currentValue, index, arr) { console.log("currentValue is " + currentValue + " index is " + index + " a原创 2018-02-16 23:18:10 · 7058 阅读 · 0 评论 -
javascript中replace的基本用法
replace方法的定义戳这里下面给出几种基本用法的例子：替换唯一字符串（极少用到）：let test = "123liqing1234";let result = test.replace("liqing", "test");console.log("result is " + result);执行结果： 2. 批量替换字符串（因为javascript并不提供re...原创 2018-02-19 23:37:07 · 5243 阅读 · 0 评论 -
map基本用法
一个例子说明map的基本用法：let ar = ["1", "2"];let obj = {"key": "value"};function config(currentValue, index, arr) { console.log("currentValue is " + currentValue + " index is " + index + " arr原创 2018-02-21 23:50:43 · 985 阅读 · 0 评论 -
前端静态资源缓存最优解以及max-age的陷阱
原文地址：点这里合理的使用缓存可以极大地提高网站资源的利用率，还可以节约带宽从而降低服务器成本。但是很多站点针对缓存的策略并不合理，甚至是完全无作为，如果是这样，就完全没有发挥出缓存的优势，而不合理的策略反而很大程度上会导致网站在访问时会发生由于静态资源的竞争关系而导致依赖的静态资源不同步的问题（简单地说，就是页面发生了崩坏）。以下为两个最佳静态资源缓存实践的例子：资源内容长时间内...转载 2018-04-15 09:20:38 · 23009 阅读 · 0 评论 -
webpack如何兼容开发模式和生产模式
在前端工程中引入webpack后，开发人员往往会有下面两个疑问：webpack的编译实际上是对代码执行合并、压缩和混淆等动作，最终生成的代码往往已经不具备可读性，不利于开发对问题进行debug；每次代码修改都需要webpack执行一次编译动作，上面提到的合并、压缩和混淆等动作过于消耗性能。首先看一下可读性问题，以笔者上一篇博客的代码为例，我们在mainCtrl.js里故意构造一个脏检...原创 2018-06-06 18:13:47 · 3737 阅读 · 0 评论 -
获取svg元素的高度和宽度（或其他属性）
下面给出了基于svg元素的js对象获取属性的方法（jqury对象可以转成js对象获取，主要关注点是svg同时支持以attribute的方式和style的方式来定义高度和宽度，但两种定义方式获取属性的方法有所不同）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2018-08-20 18:53:24 · 16589 阅读 · 0 评论 -
webpack4.x中关于css-loader的几个坑
本文主要记录笔者在webpack4.x项目下使用css-loader管理css踩到的坑（下面用一个逐步修改的示例来说明）。项目的初始诉求是使用webpack来托管css的合并。当前项目代码结构如下图：package.json代码：{ &amp;amp;quot;name&amp;amp;quot;: &amp;amp;quot;webpack4-css-loader&amp;amp;quot;, &amp;am原创 2018-11-13 18:02:38 · 11689 阅读 · 0 评论 -
webpack4.x抽取css【extract-text-webpack-plugin与mini-css-extract-plugin】
本文主要记录笔者在使用webpack抽取css时遇到的一些问题。参考文档：https://www.npmjs.com/package/extract-text-webpack-pluginhttps://www.npmjs.com/package/mini-css-extract-plugin项目的初始诉求是利用webpack来管理css（合并），并增加hash（性能优化），当前项目使用w...原创 2018-11-08 18:30:30 · 19622 阅读 · 5 评论 -
webpack4.x——htmlWebpackPlugin的minify各配置项用法说明
htmlWebpackPlugin中内置了html-minifier，这个插件多用于页面资源压缩，但是常用的配置说明不太容易理解（而且多数配置默认是不起效的），故本文将对常用的配置进行补充说明。参考文档：https://github.com/kangax/html-minifier#options-quick-reference中文API请点这里：传送门removeComments（默认值f...原创 2018-11-15 17:26:25 · 10921 阅读 · 3 评论 -
透视图（pivot）数据解析逻辑（一个很low的透视图插件）
透视图 pivot原创 2017-08-15 10:37:59 · 2560 阅读 · 0 评论