javascript
码代码的程序员
这个作者很懒,什么都没留下…
展开
-
pc端纯前端实现文件下载
说明:下面的例子都是使用vue写的例子1.txt下载利用a标签进行下载 onClickDownDaily() { //定义文件内容,类型必须为Blob 否则createObjectURL会报错 const jsonData = [ { name: "路人甲", phone: "123456789", email: "000@123456.com", }, .原创 2021-12-10 17:41:57 · 485 阅读 · 0 评论 -
什么是防抖和节流?有什么区别?如何实现?
防抖:高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间在触发,则重新计算时间(后面触发的事件执行,替代了前面的事件)function debounce(fn,time) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉 timeout原创 2021-02-20 16:09:10 · 10138 阅读 · 0 评论 -
npm的常用命令
npmnpm的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。(安装node就可以使用了)npm查看版本npm -v常用命令本地安装(local)npm install gulp-g是代表全局安装(全局安装(global),使用-g 或 --global)npm install 安装模块 -g@x.x.x代表安装指定版本npm install gulp@3.9.1原创 2020-12-29 18:30:59 · 311 阅读 · 0 评论 -
vue中出现了echarts图标超出容器宽度的问题的解决方法
出现容器宽度的问题是,因为宽高设置了百分比的原因,如果设置固定宽度是没有问题解决方法1.this.$refs.{refname}.style.width为容器设置一个固定的宽度2.把声明echart的方法放在this.$nextTick方法中运行(推荐)...原创 2020-11-19 10:15:58 · 2504 阅读 · 1 评论 -
for of 和 for in 的一些区别
自己经常会搞混淆for of 和for of 的区别以及用法,所以记录一下,方便以后忘记了,可以回来看看1.for infor...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。用法:for (variable in object)variable在每次迭代时,variable会被赋值为不同的属性名。object非Symbol类型的可枚举属性被迭代的对象。如果你只要考虑对象本身的属性,而不是它的原型,那么使用getOwnPropertyNames...原创 2020-09-21 16:11:05 · 2245 阅读 · 0 评论 -
数组中的filter方法
filter()方法不会对空数组进行检测,不会改变原始数组filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];const result = words.filter(word => word.length > 6);console.log(result);// expected outpu.原创 2020-09-18 14:18:21 · 19771 阅读 · 0 评论 -
es6中数组新增的find() 和 findIndex()
find()数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。[1, 4, -5, 10].find((n) => n < 0)// -5find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组。[1, 5, 10, 15].find(function(value, index, arr).原创 2020-09-18 11:17:44 · 420 阅读 · 0 评论 -
es6的一些编程风格
1.在let和const之间,建议优先使用const,尤其是在全局环境,不应该设置变量,只应设置常量。const优于let有几个原因。一个是const可以提醒阅读程序的人,这个变量不应该改变;另一个是const比较符合函数式编程思想,运算不改变值,只是新建值,而且这样也有利于将来的分布式运算;最后一个原因是 JavaScript 编译器会对const进行优化,所以多使用const,有利于提高程序的运行效率,也就是说let和const的本质区别,其实是编译器内部的处理不同...原创 2020-08-20 23:51:30 · 195 阅读 · 0 评论 -
Promise的一些个人理解
ECMAscript 6 原生提供了 Promise 对象。Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。Promise 的特点:1、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:pending: 初始状态,不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来,它的英语意原创 2020-07-02 14:54:13 · 314 阅读 · 0 评论 -
js逻辑运算(a||b) (a&&b)
JS中的||符号:诀窍只要"||"前面为false,不管"||"后面是true还是false,都返回"||"后面的值。只要"||"前面为true,不管"||"后面是true还是false,都返回"||"前面的值。例子let a = 1 ;let b = 3 ;let c = 0;a||b ====>1a||c =====>1b||c =====>0总结:真前假后JS中的&&符号诀窍 只要"&&原创 2020-06-18 15:54:51 · 3970 阅读 · 3 评论 -
vue中使用pdf.js预览pdf文件
1.官网直接下载pdf.js,链接:点击打开链接这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译,基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下,整个文件放在static目录下的不好地方就是打包会很大哟(当然你可以选择性的删除里面的文件,比如绝大部分语言包)2.个人弄的一...原创 2020-03-29 23:29:15 · 802 阅读 · 0 评论 -
export default 和 export的一些区别
正确写法let man ={name:"13123",year:323,}export default man错误的写法(会报错)export default man ={name:"13123",year:323,}导入使用import man form xxx原创 2020-03-27 15:29:23 · 2594 阅读 · 0 评论 -
Sass 和 Js 之间变量共享
假设我们在xxx.scss中声明了一个theme:blue,我们在 js 中该怎么获取这个变量呢?我们可以通过css-modules:export来实现。// xxx.scss$theme: blue;:export { theme: $theme;}// test.jsimport variables from '@/styles/xxx.scss'cons...原创 2020-02-21 00:46:03 · 3836 阅读 · 1 评论 -
vue中全局配置sass变量或者方法
1.vue-cli3.0中,在vue.config.js文件中设置如下代码module.exports = { css: { loaderOptions: { // 给 sass-loader 传递选项 sass: { // @/ 是 src/ 的别名 //...原创 2020-02-07 21:37:50 · 2127 阅读 · 0 评论 -
工作中一些常用的js方法
1.想获取没有设置width的span的长度可以通过获取span里面字符的个数*font-size就可以获取span的长度2.在一个div中有一个输入框以及一个span的单位,想要span单位和输入框不管怎么变化都是一行显示因为单位是不规定的,所以先设置div为display:flex;然后根据字符的个数*font-size就可以获取span的长度,然后设置输入框的长度为flex:1...原创 2020-01-18 22:58:06 · 499 阅读 · 0 评论 -
js原生.style.width或者.width取不到值
1.元素未设置宽度值。2.元素设置了宽度值,但,设置在内联或外联样式表中,而非内嵌式的。比如css代码 p{ background:pink; }html代码<p id="p1">aaaaaaaaaa</p>PS:虽然这种方式取不到宽度值。但却可以设置元素的宽度值。比如:设置p元素宽度为200px: docu...原创 2020-01-17 23:30:24 · 1499 阅读 · 0 评论 -
工作中的elelemtn的一些小诀窍以及vue中的一些小问题
1.表单验证可以同时实现blur,change(触发方式,blur失去焦点,change数据改变){ required: true, message: "嘻嘻嘻嘻嘻", trigger: ["blur",'change'] }2.动态配置校验(:rules="itemforms.isMustFi...原创 2020-01-17 10:38:48 · 334 阅读 · 0 评论 -
for in 和for of的一些区别以及遍历数组的一些注意点
ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等,只不过他们的返回结果不一样。但是使用foreach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数。Array.prototype.method=function(){ console.log(this.leng...原创 2020-01-16 23:28:19 · 1811 阅读 · 0 评论 -
JSON.stringify与JSON.parse
1.实现数组深拷贝function deepClone(obj){ let _obj = JSON.stringify(obj), objClone = JSON.parse(_obj); return objClone} let a=[0,1,[2,3],4], b=deepClone(a);a[0]=1;a[2][0]=1;cons...原创 2019-09-22 23:09:00 · 94 阅读 · 0 评论 -
数组的拷贝
如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。es5的方法1.slicelet arr = [2,4,434,43]let arr1= arr.slice()arr[0] = 'a'console.log(arr,arr1) // [ 2, 4, 434, ...原创 2019-09-22 22:48:38 · 156 阅读 · 0 评论 -
axios的在请求头带上token简单封装
在请求头带上token1.导入axios$ npm install axios2.在文件中引入import axios from 'axios';axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 全局更改import qs from 'qs';// 配合...原创 2019-08-24 10:15:21 · 3315 阅读 · 0 评论 -
JS中去掉假值
let u=[undefined,null,'',false,0,NaN,'a']var s=u.filter(d=>d);console.log(s);//['a']原创 2019-02-17 21:55:12 · 564 阅读 · 0 评论 -
遍历某一元素下的子元素
jQuery function each(element){// element为获取到的jquery对象 var arr = []; arr.push(element[0]); // console.log(arr); if(element.children().length > 0){ element.children()...原创 2019-02-17 21:42:23 · 2506 阅读 · 0 评论 -
JS哪些操作会造成内存泄露
1)意外的全局变量引起的内存泄露function leak(){ leak="xxx";//leak成为一个全局变量,不会被回收 }2)闭包引起的内存泄露3)没有清理的DOM元素引用4)被遗忘的定时器或者回调 5)子元素存在引起的内存泄露...原创 2019-02-17 21:38:47 · 2201 阅读 · 0 评论 -
判断字符串中出现次数最多的字符和出现次数
步骤:1 . 将字符串转化数组2. 创建一个对象3. 遍历数组,判断对象中是否存在数组中的值,如果存在值+1,不存在赋值为1(这样就可以记录每个字符出现的次数)4. 定义两个变量存储字符值,字符出现的字数 var str = 'abaasdffggghhjjkkgfddsssss3444343'; // 1.将字符串转换成数组 ...原创 2019-02-17 21:34:30 · 9713 阅读 · 0 评论 -
ES6(...)展开运算符
函数传参展开运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了 // ES5 的写法 function f(x, y, z) { // ... } var args = [0, 1, 2]; ...原创 2018-12-28 11:50:05 · 17969 阅读 · 0 评论 -
JavaScript中如何检测一个变量是一个String类型?请写出函数实现
1.function a(obj){return typeof(obj)=="string";}alert(a(123));alert(a("abc"));2.function b(obj){ return obj.constructor === String}alert(b(123));alert(b("abc"));3.function type...原创 2018-11-27 00:45:45 · 8631 阅读 · 0 评论 -
js的寄生组合继承法
代码: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body>原创 2018-11-25 22:33:40 · 687 阅读 · 1 评论 -
优雅降级和渐进增强
渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。 优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器...原创 2018-11-25 22:23:54 · 588 阅读 · 0 评论 -
js获取DOM节点的几种方式
一、通过元素类型的方法来操作:document.getElementById();//id名, document.getElementsByTagName();//标签名 document.getElementsByClassName();//类名 document.getElementsByName();//name属性值,一般不用 document.querySelector();...原创 2019-02-18 22:47:42 · 12515 阅读 · 0 评论 -
es6的字符串的扩展之includes(), startsWith(), endsWith()
来源:《ES 6 标准入门》(第2版) -- 阮一峰 著 ---- 第4章 字符串的扩展传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。includes():返回布尔值,表示是否找到了参数字符串。 startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。 endsWith():返回布...转载 2019-03-19 15:15:07 · 957 阅读 · 0 评论 -
vue-lazyload懒加载插件的使用
1.vue-lazyload在npm上面的网址https://www.npmjs.com/package/vue-lazyload2.安装,在vue-cli中安装npm install vue-lazyload -D3.在HTML中安装<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"><...原创 2019-06-12 11:19:59 · 3579 阅读 · 0 评论 -
javascript中数组一些常用的方法
1.map()此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组 var arr = [1, 2, 3, 4, 5] var newArr = arr.map(x => x*2) //arr= [1, 2, 3, 4, 5] 原数组保持不变 //newArr = [2, 4, 6, 8, 10] 返回新数组...原创 2019-06-12 16:38:40 · 296 阅读 · 0 评论 -
echart中的点击事件
echart的点击事件let myChart = echarts.init(document.getElementById(id)); //防止出现多次点击 if(myChart._$handlers.click) { myChart._$handlers.click.length = 0; }; //点击事件 myChart.on('click', function...原创 2019-05-22 11:48:58 · 9735 阅读 · 0 评论 -
ztree异步逐级加载数据
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <link rel...原创 2019-05-07 16:11:02 · 4422 阅读 · 1 评论 -
vue的app监听返回键
document.addEventListener('plusready', function (a) { var first = ''; plus.key.addEventListener('backbutton', function () { //获取地址栏目中的url var urls = location.hash.split('/')[1]...原创 2019-04-11 17:31:33 · 3005 阅读 · 1 评论 -
async+await的个人理解
async+await是es7提出来的概念,它也是为了解决回调地狱的问题,它只是一种语法糖,从本质上讲,await函数仍然是promise,值得注意的是,async和await必须要一起使用。用法:首先在 function 前面加 async 用来说明这个函数是一个异步函数然后在async里面写await例如:async function a(y){ let sum ...原创 2019-03-29 16:54:16 · 4077 阅读 · 0 评论 -
Echarts的学习记录
你可以通过以下几种方式获取 ECharts。 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本。开发环境建议下载源代码版本,包含了常见的错误提示和警告。 在 ECharts 的GitHub上下载最新的release版本,解压出来的文件夹里的dist目录里可以找到最新版本的 echar...原创 2019-03-19 11:53:42 · 161 阅读 · 0 评论 -
js中的this原理
本文转载自阮一峰老师的网络日志---JavaScript的this原理一、问题的由来学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。var obj = { foo: function () {}};var foo = obj.foo;// 写法一obj.foo()// 写法二foo()上面代码中,虽然obj.foo...转载 2019-03-20 19:26:37 · 400 阅读 · 0 评论 -
js实现图片的懒加载
图片懒加载指的是在浏览过程中随着需要才被加载出来,例如某宝上面浏览商品时,会伴随很多的图片,如果一次全部加载出来的话,显然资源有些浪费,并且加载速度也会相对降低,那么懒加载的实现很重要。即随着浏览翻阅时,下面的图片才被加载出来,这样又不浪费带宽,访问网页速度也很快,用户体验也会有所提升。说了这么多,其实所需要注意的要点有:1. 屏幕可视区域的高度2. 每张图片在文档中的高度3. 图...原创 2018-11-24 00:12:03 · 914 阅读 · 0 评论