js
文章平均质量分 60
Delicia_Lani
这个作者很懒,什么都没留下…
展开
-
如何用promise封装axios方法
axios:易用、简洁且高效的http库支持promise:使用Promise管理异步,gaob原创 2021-06-06 17:57:55 · 6081 阅读 · 2 评论 -
Get/Post请求的区别,你不知道的都在这里
日常开发过程中,get/post请求是不可避免的操作,那他们两个之间有什么区别的?这是老生常谈的问题了,今天有时间整理一下,来具体看看吧。参考:https://www.cnblogs.com/logsharing/p/8448446.html原创 2021-06-06 11:03:00 · 209 阅读 · 0 评论 -
js时间转换,亲测可用
1、时间戳转换成YYYY-MM-DD HH:mm:ssfunction addZero(m) { return m < 10 ? '0' + m : m }//时间戳转化成时间格式function timeFormat(timestamp){ //timestamp是整数,否则要parseInt转换,不会出现少个0的情况 var time = new Date(parseInt(timestamp) * 1000); var year = time.getFull原创 2021-05-08 17:36:11 · 326 阅读 · 0 评论 -
使用DataTables组件,前端分页转为服务端分页,只需添加一行代码
最近接触的项目中使用了DataTables组件库,越使用,越发地感觉该库的强大。该库的的官网地址:https://datatables.net/reference/api/在使用该组件的时候,种种原因吧,最终写成了前端分页,但是服务端提供的接口是服务端分页,当然,服务端分页是最合理的。因此我需要将该表格改为服务端分页。有人可能会问,为什么不直接把写法改一下呢?我这里涉及了十几个表格,我查了一下由目前的写法改为服务端分页的写法改动还挺大的,实在是不想改。因此去查API看有没有合适的,毕竟分页是比较典型的吗原创 2021-04-20 19:42:22 · 285 阅读 · 1 评论 -
webpack性能优化详解,你想知道的webpack都在这里
webpack性能优化开发环境性能优化;生产环境性能优化;开发环境性能优化:优化打包构建速度-HMR;优化代码调试-source-map;生产环境性能优化:优化打包构建速度:oneOf;babel缓存;多进程打包;externals;dll;优化代码运行的性能:缓存(hash-chunkhash-contenthash);tree shaking;code split;懒加载/预加载;pwa;...原创 2021-04-12 19:58:20 · 628 阅读 · 4 评论 -
亲测有效,vue项目中调用微信的预览图片接口
近期用vue框架开发了一个微信公众号,现在需要实现点击图片,放大查看。以前浏览公众号的时候,点击图片放大查看觉得很普通,近期开发的时候我一度以为是微信自带的,今天才知道,需要调用微信提供的预览图片接口。...原创 2021-04-12 17:41:19 · 738 阅读 · 0 评论 -
服务端返回的字段是html标签,使用v-html进行渲染并修改样式
服务端同学返回了这样的数据:scene: "<p>通用</p>↵"需要将scene字段解析出来,将“通用”二字正确地渲染出来。原创 2021-04-07 10:10:06 · 1418 阅读 · 0 评论 -
JS判断两个数组是否相等
今天在实现一个算法题的时候,用到判断两个数组中的元素是否相等,这里的相等指的是两个数组A,B,判断这两个数组中对应的元素是否相等,即顺序和数值要分别对应相等。具体来自这个题目:https://leetcode-cn.com/problems/leaf-similar-trees/那判断两个数组是否相等有哪些方法呢?第一种方法,挨个遍历,所以我是这样写的:let arr1 = [1,2,3,4,5], arr2 = [3,4,5,6];for (let i = 0; i <= arr原创 2021-04-04 17:10:50 · 5513 阅读 · 1 评论 -
玩转Echarts-使用Echarts开发过程中的配置项总结
本文将介绍自己在工作中遇到的小问题;每次遇到需要动态扩展的内容,都需要去查找官方文档,现将常用的几个API进行总结,便于后期查找使用。legend:图例 配置项 默认值 其他值 效果图 type:类型 plain:普通图例 scroll:可滚动翻页的图例。默认横向滚动。 设置orient: 'vertical',实现纵向滚动 legend: { type: 'scro原创 2021-04-02 16:31:44 · 442 阅读 · 0 评论 -
typeof 可以判断哪些类型?instanceof 做了什么?null为什么被typeof错误的判断为了‘object‘
一、typeoftypeof操作符唯一的目的就是检查数据类型 类型 typeof 结果 基本类型 undefined "undefined" Boolean "boolean" Number "number" String "string" BigInt (ECMAScript 2020 新增) "bigint" Symbol "symbol" null...转载 2021-04-01 09:39:01 · 738 阅读 · 0 评论 -
使用jsplumb绘图,实现连线
近期有个需求,实现节点之间的连线,选用的jsplumb来绘制。我自己在实现过程中,遇到了重绘问题/加载顺序问题/自动刷新过程中保持连线正确等很多问题,查了好多资料后,得以解决,有问题的小伙伴可以一起交流。jsplumb涉及的几个重要网址,可以作为研发过程中的依据:jsplumb官网:https://jsplumbtoolkit.comjsplumb中文(这个中文网站列出的API还是比较完善的):https://github.com/wangduanduan/jsplumb-chinese..原创 2021-03-10 16:51:01 · 5025 阅读 · 2 评论 -
超级全面-深拷贝与浅拷贝的实现方式
一.数据类型:(1)基本数据类型:number,string,Boolean,null,undefined,symbol(ES6),BigInt(ES10);(2)引用数据类型:对象,数组,函数等;引用数据类型的存储:名存于栈,值存于堆;栈内存会提供一个引用的地址指向堆内存中的值。二.用实例来看深浅拷贝:(1)浅拷贝:a =[1, 2, 3, 4] b = a;进行拷贝操作的时候,复制的是a的引用地址,不是堆里面的值;a[0] = 0;对数组a进行修改操作,a,b指向的是同...原创 2021-03-10 16:40:45 · 1303 阅读 · 0 评论 -
async函数
async函数返回一个promise对象;async函数内部的return语句返回的值,会成为then方法回调函数的参数。async function f() { return 'hello'}f().then(v => { console.log(v)})async函数返回的promise对象,必须等到内部所有的await命令后面的promise对象执行完,才会发生状态改变,除非遇到return语句,或者抛出错误。也就是说,只有async函数内部的所有异步操作执行原创 2020-10-11 22:29:26 · 122 阅读 · 0 评论 -
angular使用highlight高亮显示代码
具体使用过程参考官方文档:https://github.com/mattlewis92/angular-highlight-js使用过程中遇到的问题及解决方式1.安装angular-highlight-js之后,引入了highlight.js,报错,需要再安装highlight.js;2.在最初实践的时候,我在app.module.ts里面引入了相关依赖,当我需要将app.module...原创 2020-03-05 11:26:42 · 1893 阅读 · 0 评论 -
手写方法装饰器(MethodDecorator)
手写一个方法装饰器:export class AppComponent implements OnInit { ngOnInit() { new Person().pay(100); }}function methodName(target: any, key: string, descriptor: PropertyDescriptor) { const origi...原创 2020-03-06 19:43:54 · 523 阅读 · 0 评论 -
ES6-Object.keys()方法
在实际开发中,我们有时需要知道对象的所有属性;ES5 引入了Object.keys方法,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键名。传入对象,返回属性名var data={a:1,b:2,c:9,d:4,e:5}; console.log(Object.keys(data));//["a", "b", "c", "d", "e"] ...转载 2019-12-20 11:40:17 · 869 阅读 · 0 评论 -
ES6-Object.assign()方法详解
基本用法Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target /...转载 2019-12-20 10:29:50 · 150 阅读 · 0 评论 -
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解(含示例图)
这里是javascript中制作滚动代码的常用属性页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;window.innerHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeig...转载 2019-10-21 20:23:46 · 112 阅读 · 0 评论 -
实现一个sleep函数
比如 sleep(1000) 意味着等待1000毫秒,可从 Promise、Generator、Async/Await 等角度实现function sleep(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(time) }, time) }...原创 2019-10-06 19:10:25 · 1169 阅读 · 0 评论 -
for循环中含setTimeout打印及改进方式
for (var i = 0; i < 10; i++){ setTimeout(() => { console.log(i); }, 1000)}setTimeout是异步执行,10ms后往任务队列里面添加一个任务,只有主线上的全部执行完,才会执行任务队列里的任务,当主线执行完成后,i是10,所以此时再去执行任务队列里的任务时,i全部是10了。...原创 2019-10-05 19:06:14 · 768 阅读 · 0 评论 -
箭头函数与普通函数的区别
引入箭头函数有两个方面的作用:更简短的函数并且不绑定this。箭头函数与普通函数不同之处有:箭头函数没有 this,它会从自己的作用域链的上一层继承 this(因此无法使用 apply / call / bind 进行绑定 this 值); 不绑定 arguments,当在箭头函数中调用 aruguments 时同样会向作用域链中查询结果; 不绑定 super 和 new.target;...原创 2019-10-07 10:18:03 · 97 阅读 · 0 评论 -
ES6 转 ES5 的流程
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/112ES6 转 ES5 目前行业标配是用 Babel,转换的大致流程如下:解析:解析代码字符串,生成 AST; 转换:按一定的规则转换、修改 AST; 生成:将修改后的 AST 转换成普通代码。...原创 2019-10-07 10:58:42 · 187 阅读 · 0 评论 -
隐式类型转换的应用
1 + "1"加性操作符:如果只有一个操作数是字符串,则将另一个操作数转换为字符串,然后再将两个字符串拼接起来所以值为:“11”2 * "2"乘性操作符:如果有一个操作数不是数值,则在后台调用 Number()将其转换为数值[1, 2] + [2, 1]Javascript中所有对象基本都是先调用valueOf方法,如果不是数值,再调用toString方法。所以两个数组对象的...原创 2019-10-09 10:29:49 · 164 阅读 · 0 评论 -
cookie、LocalStorage 与 SessionStorage三者的区别(web Storage)
1、cookie数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。2、存储大小限制也不同,cookie数据不能超过4kb,同时因为每次http请求都会携带cookie,所以cookie只适合保...转载 2019-10-10 11:29:41 · 112 阅读 · 0 评论 -
es6 promise.all封装以及promise.race封装
function promiseAll(promises){ return new Promise(function(resolve,reject){ if(!Array.isArray(promises)){ return reject(new TypeError("argument must be an array")) } ...转载 2019-10-11 18:54:09 · 196 阅读 · 0 评论 -
JS创建长度为100的数组,数值为下标
var arr1 = new Array(100)for (var i = 0; i < arr1.length; i++) { arr1[i] = i}console.log(arr1)var arr2 = Array.from({length: 100}, (v, k) => k)console.log(arr2)var arr3 = Array.from...原创 2019-10-04 16:26:13 · 1769 阅读 · 0 评论 -
set、map、weakSet、weakMap区别
Set 成员唯一、无序且不重复 [value, value],键值与键名是一致的(或者说只有键值,没有键名) 可以遍历,方法有:add、delete、has WeakSet 成员都是对象 成员都是弱引用,可以被垃圾回收机制回收,可以用来保存DOM节点,不容易造成内存泄漏 不能遍历,方法有add、delete、has Map 本质上是键值对的集合,类似集合 可以...原创 2019-10-04 14:48:33 · 138 阅读 · 0 评论 -
Vue+TypeScript入门学习,含详细项目代码,vuex状态管理
之所以写下这篇文章,是因为最近的项目需求,使用Vue,TypeScript实现项目,对我而言,是一个全新的挑战,因此,是零基础,不过各语言之间都是相通的,学起来也没有那么难。只是在真正实现项目的过程中,踩过了好多坑。一,该链接中讲到Vue对typescript的支持:https://cn.vuejs.org/v2/guide/typescript.html二,typescript是什么?...原创 2019-07-05 15:27:29 · 1957 阅读 · 0 评论 -
JavaScript中的call,apply,bind区别及应用(包含手写call/apply/bind)
目录一、使用目的二、三者分别是如何定义的及区别(摘自MDN)三、在程序中收获四、三者的具体应用四、手写bind,apply,call今天在读程序题的时候,遇到call,apply,bind的使用。const person = { name: 'Lydia' }function sayHi(age) { console.log(`${this.name} is ...原创 2019-06-18 14:29:59 · 2693 阅读 · 0 评论 -
懂得了深拷贝与浅拷贝
这篇帖子通俗易懂:https://blog.csdn.net/qq_32766999/article/details/92661681Object.assign:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign原型对象:https://develope...转载 2019-06-19 11:12:24 · 148 阅读 · 0 评论 -
js 正则匹配案例积累
转自:https://blog.csdn.net/qq_32766999/article/details/91560950原创 2019-06-14 13:59:06 · 146 阅读 · 0 评论 -
读懂原型链与继承(包含学习过程中看过的帖子)
JS中原型链与继承无疑是一大重点,同时是难点,决定把这一知识点打通,首先从看帖子开始。目录一、创建对象有几种方法(通常是以下三种)二、原型、构造函数、实例、原型链三、instanceof四、new 运算符五、题目六、经典的图一、创建对象有几种方法(通常是以下三种)字面量 构造函数 Object.create<script type="text/ja...原创 2019-06-07 16:20:46 · 169 阅读 · 1 评论 -
前端开发中遇到的小问题积累
1.HTML中设置浏览器标题前的logo:在<head></head>标签之间输入<link rel="icon" href="图片位置" type="image/x-icon"/>2.在线引入所需框架:<!--引入jquery--><script src="https://code.jquery.com/jquery-3....原创 2019-06-12 14:23:19 · 426 阅读 · 0 评论 -
浏览器下的事件循环机制(Event Loop),含四个代码示例及相关解析
一,基本概念:同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务:不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。二,常见的宏任务与微任务:macrotask:setTimeout,setInterval,setImmediate,requestAni...原创 2019-07-20 10:01:50 · 320 阅读 · 0 评论 -
闭包(含实例代码,通俗易懂)
闭包实现累加:var count = 0var fn1 = function () { return function (){ count++ console.log(count) }}var fn2 = fn1()fn2()fn2()fn2()fn2()闭包实现函数只有一次有效调用:var fn1 = functi...原创 2019-08-01 09:21:41 · 3158 阅读 · 1 评论 -
JS中数据类型判断
js中判断一个对象的类型的方法typeof/constructor/instanceof:https://blog.csdn.net/qq_23392341/article/details/69851017判断是否是数组;判断是否是空对象:https://segmentfault.com/a/1190000010143040目录javascript中检测对象的类型的运算符有:typeo...原创 2019-10-01 15:00:18 · 151 阅读 · 0 评论 -
通过new方式创建对象
创建一个新对象。 这个新对象会被执行[[原型]]连接。 将构造函数的作用域赋值给新对象,即this指向这个新对象. 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。 function new(func) { lat target = {}; target.__proto__ = func.prototype; let res = fun...原创 2019-10-01 11:17:10 · 815 阅读 · 0 评论 -
经典JavaScript
1.Array.from:https://www.cnblogs.com/jf-67/p/8440758.html2.this指向问题:https://segmentfault.com/a/1190000011817793?utm_source=tag-newest使用call、apply、bind改变this指向,call、apply的应用,手写call、apply:https://b...原创 2019-09-29 18:58:59 · 338 阅读 · 0 评论 -
经典写算法
目录一、闭包实现累加二、跳台阶问题三、回文系列:四、js实现阶乘n!(递归形式与for循环形式)五、溢出问题处理六、数组乱序,前后相邻输出不一致七、按照年龄进行分类:八、去重系列九、Eg[1,2,3,4,5] =1*2+2*2+3*2+4*2+5*2=30十、零钱问题十一、二叉树相关十二、链表相关十三、有效的括号十四、两个数组的交集十五、...原创 2019-09-25 17:43:31 · 1846 阅读 · 2 评论 -
js基础
// 将二进制转化为16进制// 思路:先转化为10进制,使用parseInt,parseInt以redix为基础,转化为其数据的十进制var num = 101001var result = parseInt(num, 2)console.log(result) // 41var summary = result.toString(16)console.log(summary) /...原创 2019-09-09 14:54:27 · 82 阅读 · 0 评论