JS啊
酒慰风尘
这个作者很懒,什么都没留下…
展开
-
码代码时要精辟的点① 性能优化CRP
CRP又称关键渲染路径,引用MDN对它的解释:关键渲染路径是指浏览器通过把 HTML、CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序。优化关键渲染路径可以提高渲染性能。关键渲染路径包含了 Document Object Model (DOM),CSS Object Model (CSSOM),渲染树和布局。优化关键渲染路径可以提升首屏渲染时间。理解和优化关键渲染路径对于确保回流和重绘可以每秒 60 帧、确保高性能的用户交互和避免无意义渲染至关重要。如何利用CRP进行性能优化?结合一道原创 2020-07-08 20:48:05 · 236 阅读 · 0 评论 -
时间戳----消息通知
import { Injectable } from '@angular/core';@Injectable()export class TimeNoticeFileService { // 时间戳转换日期 (yyyy-MM-dd HH:mm:ss) formatDateTime = timeValue => { const date = new Date(timeValue), y = date.getFullYear(); let m: number |原创 2020-06-11 17:33:43 · 236 阅读 · 0 评论 -
移动端无限滚动/横向(X轴)tab选择
无限滚动并加载数据其中还有加载时图片的展示这里结合ionic4写的 // 统一处理结果 handleResult(res: CommonProductResult) { // 定义下接口回值的属性 this.isNoSuch = false; // 加载时的图片 this.isWaiteList = false; //返回无数据时给占位符 if (!!res.list.length) { if (this.pageNum > DEFAULT_PAGE_原创 2020-06-09 17:12:14 · 509 阅读 · 0 评论 -
每天一点面试题(15)--------防抖 和 节流//原型 和 原型链
一丶 防抖 和 节流1.防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间实现方式:每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法缺点:如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟//防抖debounce代码:function debounce(fn) { let timeout = null; // 创...原创 2020-04-08 23:56:57 · 142 阅读 · 0 评论 -
js-将已有的文字复制到剪切板
react 项目中涉及到复制功能,逻辑就是用户点击一个复制按钮,将后台拿到的数据放进粘贴板供用户粘贴,感觉用插件还要引入和绑定DOM比较麻烦,就干脆用原生写了,以下为实现方法,注释已经写的比较明白了, 可以直接拿来用: handleCopyDDL = record =>{ // 获取需要复制的文字 const copyStr = record.ddl_str //...原创 2020-03-18 16:05:18 · 208 阅读 · 0 评论 -
window.localStorage.setItem的使用
最近接触的一个小项目中频繁看到一个新的面孔: changeTheme () { dispatch({ type: 'app/switchTheme' }) }, changeOpenKeys (openKeys) { window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(ope...原创 2020-03-03 16:48:25 · 2545 阅读 · 1 评论 -
JS 前端导出CSV文件
前言:长期以来,在做文件下载功能的时候都是前端通过ajax把需要生成的文件的内容参数传递给后端,后端通过Java语言将文件生成在服务器,然后返回一个文件下载的连接地址url。前端通过location.href = url或者window.open(url),完成文件的下载。如果希望在前端直接出发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性。CSV文件格式:c...原创 2020-02-19 14:51:32 · 2556 阅读 · 1 评论 -
Ant-design Button onClick 获取按钮的目标
用 React 的 Ant-Design 发现的 Button 获取 onClick 的 e.target 的时候经常会出问题,发现 Antd 封装的 Button 是一个 button 里面还有 span,如果点击的是按钮上的文字的话,获取的是 span,这个时候 e.target 是不起作用的。可以用 e.currentTarget。这两者有什么区别呢?如下:event.targetThi...原创 2020-02-17 18:36:48 · 3493 阅读 · 0 评论 -
为什么尽量别用 setInterval
为什么尽量别用setInterval在开发一个在线聊天工具时,经常会有过多少毫秒就重复执行一次某操作的需求。“没问题”,大家都说,“用setInterval好了。”我觉得这个点子很糟糕。原因之一:setInterval无视代码错误setInterval有个讨厌的习惯,即对自己调用的代码是否报错这件事漠不关心。换句话说,如果setInterval执行的代码由于某种原因出了错,它还会持续不断(不...原创 2020-02-11 17:35:30 · 238 阅读 · 0 评论 -
单页面路由的基本原理
1. Hash1.1 相关 ApiHash 方法是在路由中带有一个 #,主要原理是通过监听 # 后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件,然后通过获取 location.hash 得到当前的路径标识符,再进行一些路由跳转的操作,参见 MDNlocation.href:返回完整的 URLlocation.hash:返回 URL 的锚部分location.pa...原创 2020-02-08 19:25:56 · 470 阅读 · 0 评论 -
JavaScript 函数式编程
我认为函数式编程可以理解为,以函数作为主要载体的编程方式,用函数去拆解、抽象一般的表达式与命令式相比,这样做的好处在哪?主要有以下几点:语义更加清晰可复用性更高可维护性更好作用域局限,副作用少 基本的函数式编程// 数组中每个单词,首字母大写 // 一般写法const arr = ['apple', 'pen', 'apple-pen'];for(const i in ...原创 2020-02-05 23:20:57 · 106 阅读 · 0 评论 -
JS类的static
static类(class)通过 static 关键字定义静态方法。不能在类的实例上调用静态方法,而应该通过类本身调用。这些通常是实用程序方法,例如创建或克隆对象的功能。语法static methodName() { ... }描述静态方法调用直接在类上进行,不能在类的实例上调用。静态方法通常用于创建实用程序函数。调用静态方法从另一个静态方法静态方法调用同一个类中的其他静态方法,...原创 2020-01-30 19:29:04 · 14690 阅读 · 1 评论 -
引用类型的方法对比 在redux中
一.数组操作增加一项使用push的方法会改变原数组的值let a = [1, 2, 3];a.push(4);console.log(a) //[1, 2, 3, 4]若不想改变原数组, 可以考虑concat方法,他不会对原有数组进行改动,而创建一个新数组let a = [1, 2, 3];let b = a.cancat([4]);console.log(a) /...原创 2020-01-07 14:06:24 · 117 阅读 · 0 评论 -
时间戳转日期
new Date() 不同浏览器(内核)的输出Android和chrome都是webkti内核。于是打开控制台,分别测试了不同浏览器对Date()参数的反应。首先是chrome的:只要是字符串,这三种格式都能正常解析,非字符串"/"月份多加1,这个问题本身存在。然后是ff:字符串中",“和”/“能正常解析,”-"不能。ps:这是原作者测试的结果,我自己测试的时候“-”可以起作用最后...原创 2020-01-02 22:55:35 · 480 阅读 · 0 评论 -
ES6、ES7、ES8、ES9、ES10新特性一览
ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMA-417。关于ECMA的最新资讯可以浏览 ECMA news查看。ECMA规范最终由TC39敲定。TC39由包括浏览器厂商在内的各方组成,他们开会推动JavaScript提案沿着一条严格的发展道路前进。从提案到入选ECMA规范主要有以下几个阶段...转载 2019-12-27 22:57:52 · 135 阅读 · 0 评论 -
js删除数组中元素
例如我有一个数组: var array = [“aa”,“dd”,“cc”,“aa”] ,我想删除这个数组的“dd”元素,那么我们应该怎么办呢?定义一个输出数组元素的方法//输出数组中的元素 var getArray = function(array){ //循环数组元素 for(var i=0;i<array.length; i++) ...原创 2019-12-25 16:16:02 · 149 阅读 · 0 评论 -
数组转链表,链表转数组
数组转链表,易懂版function array2list(ary) { if(ary.length === 0) { return null } var nodes = [] for(var i = 0; i < ary.length; i++) { var node = {} node.value ...原创 2019-12-25 10:53:54 · 798 阅读 · 0 评论 -
每天一点面试题(十二) --------------map补充 没什么用 看了记下来
1.[JS] Map中keys的有序性1. 背景mdn: Map是ES6中的内置全局对象,其中保存了多个键值对映射关系。它的key 和value 都可以是js中的任意对象。例如,const m = new Map;const objectKey1 = {};const objectKey2 = {};const stringKey3 = '';const numberKey4 =...原创 2019-12-15 21:25:24 · 116 阅读 · 1 评论 -
每天一点练习题(6) -------unll,undefined,undeclared(defind)
例行写点没有的话,最近也在做面试官。心里会有感觉,在面试的时候把问题回的精彩了可能只需要几个问题就能通过面试,如果被问的特别广的时候肯定是看看是不是可以拿到更高的薪资。所以像标题这种很基础的面试题更应该答精彩,就像搞对象不就是从相互吸引开始?另外如果这个问题写到最后篇幅不长会把JS判断数据类型的方法加上,它们也是有关系的。用typeof的判断转数字null在进行数字运算时可以转换成0,...原创 2019-11-28 11:09:21 · 144 阅读 · 0 评论 -
每天一点面试题(5) -------原型继承部分
对于原型继承 快到0202年了 基本已经用的很少了 但是在源码中还有很多需要实现底层构架的情况下还是会用到 所以一定要学好这部分 虽然学好了不常用也会忘记说到继承必须说原型 所以原型部分会在JS分类里写清楚想要继承,就必须要提供个父类(继承谁,提供继承的属性)一. 原型继承重点:让新实例的原型等于父类的实例。特点:1、实例可继承的属性有:实例的构造函数的属性,父类构造函数属性...原创 2019-11-27 16:00:25 · 175 阅读 · 0 评论 -
真正理解/玩转柯里化函数和反柯里化
一. 在最初 去网上查了相关资料 很有意思一点就是 看到了这个函数在数学中的定义:函数柯里化currying的概念最早由俄国数学家Moses Schönfinkel发明,而后由著名的数理逻辑学家Haskell Curry将其丰富和发展,currying由此得名。currying又称部分求值。一个currying的函数首先会接受一些参数,接受了这些参数之后,该函数并不会立即求值,而是继续返回另...原创 2019-11-25 21:38:16 · 197 阅读 · 0 评论 -
Object.keys方法之详解
一、语法Object.keys(obj)参数:要返回其枚举自身属性的对象返回值:一个表示给定对象的所有可枚举属性的字符串数组二、处理对象,返回可枚举的属性数组let person = {name:“张三”,age:25,address:“深圳”,getName:function(){}}Object.keys(person) // [“name”, “age”, “address”,“...原创 2019-11-25 16:46:12 · 187 阅读 · 0 评论 -
object对象的hasOwnProperty propertyIsEnumerable两个方法的使用
首先说下基本的概念:hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员,返回一个bool值一个对象是否可以进行for in穷举,我们可以通过propertyIsEnumerable属性来判断,说明如下: propertyIsEnumerable 属性,返回 Boolean...原创 2019-11-22 18:03:12 · 265 阅读 · 0 评论