VirgoYellow 的专栏

vue-cli 3 以上的项目使用 axios 请求本地 json 文件

关于 Chrome 浏览器设置 border-radius 不成效的解决办法

前端 标签中的内容保存、展示

js拖拽是常见的网页效果，本文将从零开始实现一个简单的js插件。一、js拖拽插件的原理常见的拖拽操作是什么样的呢？整过过程大概有下面几个步骤：用鼠标点击被拖拽的元素按住鼠标不放，移动鼠标拖拽元素到一定位置，放开鼠标这里的过程涉及到三个dom事件：onmousedown,onmousemove,onmouseup。所以拖拽的基本思路就是：用鼠标点击被拖拽的元素触发onmousedown（1）设置当前元素的可拖拽为true，表示可以拖拽（2）记录当前鼠标的坐标x,y（3）记录当前元素

使用 forEach 的时候，是不能通过 return 来跳出循环的（只可以终止 return 语句后面代码的执行，并不会终止整个循环），比如下面的例子????var list = [ {id: 'id_1', name: 'name_1', price: 1}, {id: 'id_2', name: 'name_2', price: 2}, {id: 'id_3', name: 'name_3', price: 3}, {id: 'id_4', name: 'name_4

1、原理赋值：将某一对象赋给某个变量的过程，称为赋值。浅拷贝：浅拷贝是创建一个对象，这个对象有着原始对象属性值的一份精准拷贝，如果属性是基本类型，拷贝的就是基本类型的值；如果属性是引用类型，拷贝的就是内存地址，如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝：深拷贝就是将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原有的对象。2、区别赋值：当我们将一个对象赋值给另外一个新的变量时，赋的其实是该对象在栈中的地址，而不是堆中的数据。也就是说

this 是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。关于 this，经常会有一些误解：比如会把 this 理解成指向函数自身，又或者认为 this 指向函数的作用域。其实，this 是在函数调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。因此，函数的不同使用场合，this 也有不同的值。那么我们该如何判断 this 呢？可以按照下面的顺序来进行判断：1.函数是否在 new 中调用（new绑定）？如果是的话，this 绑定的是新创建的对象。首先，回想下 new 运算符

装饰器装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为。通俗的讲，装饰器就是一个方法，可以注入到类、方法、属性、参数上来扩展类、方法、属性、参数的功能。常见的装饰器有：普通装饰器（无法传参）、装饰器工厂（可传参）装饰器类型类装饰器属性装饰器方法装饰器函数参数装饰器类装饰器类装饰器在类声明之前被声明（紧靠着类声明）；类装饰器应用于类构造函数，可以用来监视、修改或替换类定义；类的构造函数将作为唯一参数传递给装饰器；如果类装饰器返回一个值，它会

ES 5 ---- 类// 构造函数里定义属性 & 方法function Person() { this.name = 'zhangsan'; this.age = 18; this.run = function() { console.log(`${this.name}在跑步。`); }}// 原型链上定义属性 & 方法Person.prototype.sex = '男';Person.prototype.work = func

1、防抖 1.1 定义： 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。 1.2 应用场景： (1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源； (2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，...

1、JS把中文的标点全部替换成英文标点：function qj2bj(str){ var tmp = ""; for(var i=0;i<str.length;i++){ if(str.charCodeAt(i) >= 65281 && str.charCodeAt(i) <= 65374){// 如果位于全角！到全角～区间内 tmp += S...

跨域：即请求的地址与被请求的地址协议头、域名、端口有一个不一样就叫跨域。相反，不跨域即叫同源，同源：即协议头、域名、端口完全一致。举个例子：URL 说明 是否允许通信http://www.demo.com/a.jshttp://www.demo.com/b.js ...

URLSearchParams接口定义了一些实用的方法来处理 URL 的查询字符串。之前没有没有接触过，了解之后发现还是挺实用的，记录一下。首先，我们调用 new URLSearchParams()会返回一个 URLSearchParams对象实例：let str = 'name=Amy&age=24&sex=female';let obj = new URLSe...

之前有写过一篇js 导出 csv 文件的，现在需求上要求导出 txt 文件，还要导出成指定的格式，只能再次研究下。先贴下这个项目导出 csv 的处理：let rstList = [];let csvList = [];data.list.forEach((item, index)=>{ rstList.push(item.program_info);});rstList...

js 是客户端执行的，所以，js的一切关于时间的函数，如 Date.now() 都是以客户端为准的。但是如果客户端的时间跟网络时间不一致，对有些对时间依赖度较高的项目来说，可能就是致命性的问题，这种情况下，就不能简单的使用客户端的时间，而是要获取服务器时间以保证项目的正常运行。接下来说下 js 如何获取服务器时间。原理：使用 ajax请求，返回的头部信息就含有服务器端的时间信息，获取到就可...

问题：页面上有个 <textarea></textarea> 元素，输入内容以后预览，发现回车键的位置并没有换行。如下图所示：预览结果：将内容打印出来，可以看到，<textarea> 中的内容里面，换行是用的 “\n” ，而 html 并不识别：解决办法：将内容里面的\r替换成<br>再进行预览就可以了：var ...

通过接口拿到的数据结构如上所示，现在要通过 JavaScript 将数据导出： <script type="text/javascript" src="json2csv.js"></script> <script type="text/javascript"> var title = Object.keys...

function similar(s, t, f) { if (!s || !t) { return 0 } var l = s.length > t.length ? s.length : t.length var n = s.length var m = t.length var d = [] f = f || 3...

目标：有一个对象数组，已知某个 id 属性的值，改变其所在对象的 children 属性值。方法：通过递归方式遍历对象数组，找到指定 id 对应的对象，改变该对象的 children 属性值。具体实现：// 原始对象数组[数据结构是这样的，但是每层有多少数据是不一定的]var originData = [{ id: 1, name: 'name1', children: [{...

Chrome的调试功能十分强大，这里仅简单记录一些常用的 JS 调试，日常所需必备。1、设置断点 可以通过以下两种方式来设置断点： （1）F12 调出控制台后，在 Source 面板设置。找到要调试的文件，在内容源代码左侧的代码标记行的位置点击，即可打上一个断点： （2）在 js 文件中设置。在 js 源文件中需要执行断...

Date 对象的方法简介：       ·Date 　                     ｜　返回当日的日期和时间　　·getDate　　　　   　｜　从 Date 对象返回一个月中的某一天 (1 ~ 31)　　·getDay　　 　　　   ｜　从 Date 对象返回一周中的某一天 (0 ~ 6)　　·getFullYear　　　 　｜　根据本地时间获取当

学习js也有一段时间了，今天练习一个实现倒计时效果的小例子，自娱自乐。说着也快到高考了，就先来一个高考倒计时吧！高考倒计时 *{margin:0;padding:0;font-family:"微软雅黑";font-size:20px;} .wrap{background:lightBlue;width:500px;height:60px;margin:40px

文字信息无缝滚动效果

学习了信息无缝滚动效果后，再来看看间歇性滚动的效果。信息间歇性循环滚动效果    *{margin:0;padding:0;}    a{color:#000;text-decoration:none;}    .wrap{width:400px;margin:60px auto;border:6px solid #ccc;border-radius:6px

CSS/JS中图片路径问题

获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中，浏览器显示窗口大小只能以下获取： 代码如下：document.body.offsetWidth;document.body.offsetHeight;在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小： 代码如下：document.documentElement.clientWidth

不知道各位 JavaScript 开发者有没有关注过 W3C 在中国的官方教学网站： http://www.w3school.com.cn/此网站非常全面，并且内容也很完整丰富。不过今天不是广告时间，因为我发现了一个 FireFox, Chrome, IE, Safari 都能支持的某 HTML 标签，这个网站上竟然没有介绍！那就是 ，多么常用的文字滚动标签啊～接下来是我对此元素的分析

/** * * @authors Your Name (you@example.org) * @date 2018-10-11 15:05:02 * @version $Id$ *///IE8以下不支持数组的indexOf方法，先对浏览器Array对象进行支持indexOf和forEach的polyfillArray.prototype.indexOf = Array.p...

记录一下。。。1、splice()方法：用于插入、删除或替换数组的元素。    注意：这种方法会改变原始数组    语法:    array.splice(index,howmany,item1,.....,itemX)    参数：    index   必需。规定从何处添加/删除元素。            该参数是开始插入和（或）删除的数组元素的下标，必须是数字。  ...

本文是基于 sublime text 3 进行 javascript css html 的语法检查。正式开始前，再啰嗦一遍关于插件安装的：1、Package Control 组件安装ctrl+`调出 console，粘贴以下代码到命令行并回车：import urllib.request,os; pf = 'Package Control.sublime-package'; ipp...

前言：                在 JavaScript 原型继承结构里面，规范中用 [[Prototype]] 表示对象隐式的原型，在 JavaScript 中用 __proto__ 表示，并且在 Firefox 和 Chrome 浏览器中是可以访问得到这个属性的，但是 IE 下不行。        所有 JavaScript 对象都有 __proto__ 属性，但只有 Object...

/** * * @authors Your Name (you@example.org) * @date 2019-01-09 10:41:53 * @version $Id$ */var array = [6,4,1,7,2,5,8,3];//借助sort排序array.sort(function(a,b){ //return a-b; //升序[默认] ret...

前两天遇到一个 闭包+递归 的问题，今天仔细想了下，特此记录。实现这样一个函数 go：输入、输出分别如下：go('l');  //输出 "gol"go()('l');  //输出 "gool"go()()('l');  //输出 "goool"go()()()('l');  //输出 "gooool"...go()...()('l');  //输出 "goo...ol"...

题外话： 位运算符是在数字底层（即表示数字的32个数位）进行操作的。 ECMAScript 整数有两种类型，即 有符号整数（允许用整数和负数）和 无符号整数（只允许用整数）。有符号整数使用31位表示整数的数值，用第32位表示整数的符号，0表示正数，1表示负数。 正数是以真二进制形式存储的，例如，18的表示法： 也可以将18...

关于 sort() 的具体说明，这里不再赘述，可以戳这里 ↓↓↓： https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 之前也有用过 sort() ，但是没有具体弄清楚这个方法的含义，导致在一次字符串排序中遇到问题，...

先理解一些函数的基本概念：函数声明、函数表达式、匿名函数。函数声明：使用function关键字声明一个函数，再指定一个函数名。function fnName(){}函数表达式：使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量。 这是最常见的函数表达式语法形式。var fnName = function(...

//判断方法function flashChecker() { var hasFlash = 0; var flashVersion = 0; if(document.all) { var swf = new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); if(swf) { ...

今天开始了我的JavaScript学习之旅，前两天的迷茫终于过去了。。又有了学习的方向，感觉很不错。。闲话不扯了，进入正题。正在看《JavaScript权威指南》（第五版），然后就毫无征兆的看到了 sub = s.substring(1, 4) ;(变量s包含一个字符串），汗颜啊，竟然不知道substring()的用法，赶紧地学习学习。。substring()：        su