兰亭古墨

不创建临时变量交换数组元素

解释首先理解一下： 正向肯定预查（look ahead positive assert） 和 正向否定预查(negative assert)正向肯定预查（look ahead positive assert）：正向否定预查(negative assert)：/(\d)(?=(\d\d\d)+(?!\d))/g 正则表达式图解：假设有字符串 ，正则表达式 首先，匹配 ，发现 后面有 ，正向预查到了，所以 会被匹配到；再次向后，匹配 ，发现 , 所以 也被匹配到,如下图加上 ，还要保证正向预查的

JavaScript 高级之各种手写系列

Promises/A+: https://promisesaplus.com/[译]Promise/A+ 规范: https://zhuanlan.zhihu.com/p/143204897

Promise基本 Promise执行器resolve, reject, then(同步)resolve(异步，基于发布订阅)then 链式调用 p.then().then();基本链式调用：在 then 里面返回 promise需要考虑 then return 的是 promise 还是普通值x 如果是 promise 则，需要考虑调用 resolve 还是 rejectx 如果是普通值， 则调用 resolve一、创建 Promise 类class Promise {

在开发项目中，可能常见后端返回一个扁平的一维数组，前端可能要处理数据将其转化为 tree 型结构。类似：const data = [{ id: 1, parentId: null }, { id: 2, parentId: 1 }, { id: 3, parentId: 1 }, { id: 4, parentId: 2 }, { id: 5, parentId: 4 }];TO{

最近在做思考总结，项目原来在做智能合同的项目关于文档比对导致页面卡断问题，项目组同事给了我一个切片编程的方案很棒，在此做个总结！需求源文档和修改后的文档，差异点存在近 5000+ 的差异点需要在两个文档上进行颜色标注，整个标注过程都是在进行 DOM 操作，做完后存在严重的页面卡死问题，甚至等待 5~8分钟才标注完成，甚至卡死！这个问题亟待解决优化！分析在事件循环机制中主线程需要全部执行完才会进行页面渲染，5000+ 的 DOM 操作严重阻塞了主线程，所以是不是可以给主线程让出空间，将dom操作任务放

今日爬坑,代码如下：let data = [ { name: 'hefeng', from: 'china', }, { name: 'alice', from: 'china', }, { name: 'jack', from: 'america', },];data.forEach((item, index) => { if (item.from === 'china') { data.splice(i

函数防抖(debounce)概念： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。生活中的实例： 如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。假设，我们观察的总时间为10秒钟，规定1秒作为一次事件的最小间隔时间。如果触发事件的频率是0.5s/次，那么函数防抖如图因为始终没法等一秒钟就被再次触发了，所以最终没有一次事件是成功的。函数实...

你可能会这么写，双重循环简单粗暴！function parseQueryString(url) { let queryString = url.slice(url.indexOf('?')+1) let tempArr = queryString.split('&') let obj = {} tempArr.forEach(item => { let arr = item.split('=') obj[arr[0]] = arr[1] }); ret

主要考察目标：数据类型校验 循环引用 function deepClone(data, hash = new WeakMap) { if (data == undefined) return data; if (typeof data !== 'object') return data; if (data instanceof RegExp) r...

// 首先看下apply() var obj = { name: 'Nicholas S.Zakas', age: 41, from: 'America', introduce: function (name, from) { console.log('hello, everyone, i am ' + name, ...

// 首先看下原生的js的call() var obj = { name: 'Nicholas S.Zakas', age: 41, from: 'America', getName: function (prefix) { console.log(prefix + this.name) } }...

function Animal(name, age) { this.name = name this.age = age // return {} } Animal.prototype.sayName = function () { console.log("Hello Everyone, I am " + this.na...

let reg = /^(?:(http|https|ftp):\/\/)?((?:[\w-]+\.)+[a-z0-9]+)((?:\/[^/?#]*)+)?(\?[^#]+)?(#.+)?$/ilet str = 'http://www.hefeng6500.cn/home/index.html?hefeng6500=bob#test'reg.exec(str)

需求：let str = 'zhufeng2019zhufeng2019'str = str.replace(/zhufeng/g, function(...args){ // args中存储了每一次大正则匹配的信息和小分组匹配的信息： content, $1, $2 return '@' // 返回的是啥就把当前正则匹配的内容替换成啥}) Strin...

I am trying to show where the two HTML pages differ. I am trying to figure out a way if i can compare the HTML source code of two webpages(almost similar), and show/highlight the differences visually(...

单页面应用（SinglePage Web Application，SPA）只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站如图:单页面应用结构视图  多页面应用（MultiPage Application，MPA）多页面跳转刷新所有资源，每个公共资源(js、...

本文旨在用最通俗的语言讲述最枯燥的基本知识面试过前端的老铁都知道，对于前端，面试官喜欢一开始先问些HTML5新增元素啊特性啊，或者是js闭包啊原型啊，或者是css垂直水平居中怎么实现啊之类的基础问题，当你能倒背如流的回答这些之后，面试官脸上会划过一丝诡异的笑容，然后晴转多云，故作深沉的清一下嗓子问：从用户输入URL到浏览器呈现页面经过了哪些过程？如果你懂，巴拉巴拉回答了一堆，他又接着问：那...

首先看下我们接收到的请求： 特别注意：responseType: 'blob' axios({ method: 'GET', url: '/api', params: params, responseType: 'blob' }).then(res=>{ let blob = ne...

受制于WEB页面源码的暴露，因此传统的对称加密方案以及加密密钥都将暴露在JS文件中，同样可以被解密。目前比较好的解决方案是WEB页面全程或用户登录等关键环节使用HTTPS进行传输。另外一种解决方案就是通过RSA进行加密。 RSA是一种非对称加密，也就是客户端通过公钥进行加密，服务端通过私钥进行解密。RSA算法请点击百度百科进行了解。也就是说公钥并不能进行解密，因此进行明文传输也...

将类似于 info 格式转化为 info2  var info = { id: 1, id1: 2, userName1: '刘玄德', userName2: '刘玄德', userName3: '大哥', userAge: 45, userAge1: 46, userAge2: 47 ...

先看下简单的，在一个页面中使用 v-model 进行 双向数据绑定：<input type="text" v-model="textValue"><h1>{{ textValue }}</h1>相信这行代码，大家肯定都非常熟悉！官方文档说明了 v-model 其实如如下原理：<input type="text" v-bind

今天看到高程关于传递参数这一张的时候，说到，参数不管是基本类型还是引用类型的传递都是按值传递，但是demo： function setName(obj){ obj.name=“Nicholas”; obj=new Object(); obj.name=“Greg”;} var person=new Object();setName(person);alert(pers...

fetch和XMLHttpRequest如果看网上的fetch教程，会首先对比XMLHttpRequest和fetch的优劣，然后引出一堆看了很快会忘记的内容(本人记性不好)。因此，我写一篇关于fetch的文章，为了自己看着方便，毕竟工作中用到的也就是一些很基础的点而已。fetch，说白了，就是XMLHttpRequest的一种替代方案。如果有人问你，除了Ajax获取后台数据之外，还有没有...

相信你肯定看了 ElementUI 官方文档了，没看的话先去看下表格各个属性的意义，方便下文阅读：传送门但你会发现此例过于简单，死数据，但我们开发的时候往往都是后台传递过来的数据，导致我们 rowspan 的参数需要自己做判断，根据数据的相同行（或列）进行合并；我们先看下结果： 代码附上：<template> <div class=""> ...

本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助<本文所有相关代码均在git...

 新建 filter 文件夹，在filter新建index.js，创建全局过滤器//filter/index.js内容import Vue from 'vue'Vue.filter('date', function (dateTime, fmt) { var dateTime = new Date(dateTime); var o = { "M+": ...

 ES 5的继承方式： //定义父级函数 function Teacher(){ this.name = 'yanglong'; } //定义父级函数的原型 Teacher.prototype.getName = function (){ return this.name; } //定义子代函数 func...

在上次的 “Chrome DevTools 你可能不知道的小技巧” 文中，得到很多开发朋友的反馈确实不知道这些小技巧。今天，我们来聊一聊在 EcmaScript5/6+ 中的一些小技巧，欢迎评论区讨论下更多技巧。·  ·  ·JSON.stringify我们平时经常会用到JSON 对象，比如当我们要实现对象的深拷贝时，我们可以用JSON 对象的JSON.stringify和JSON.p...

首先上效果图基于ElementUI的 “Cascader 级联选择器”组件；全国各地区行政区划JSON数据；（https://github.com/modood/Administrative-divisions-of-China）<template> <div> <el-cascader :options="options" v-mode...

作者：戴嘉华本文转载来自github：https://github.com/livoras/blog/issues/13目录： 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一：用JS对象模拟DOM树 4.2 步骤二：比较两棵虚拟DOM树的差异 4.3 步骤三：...

1、最普通的for循环：for(var i=0;i}特点：只能针对数组循环，不能引用于非数组对象2、for(var i in obj){}特点：用于数组或对象的属性进行操作，可能随机顺序遍历数组元素3、arr.forEach(function(value){})特点：ES5内建方法，但不能使用break中断循环，也不能用ret

目前使用的Vue做的项目，就讲下 Handsontable 在Vue中的使用吧Installationnpm install @handsontable/vue handsontableBasic usage<template> <hot-table :data="data" :rowHeaders="true" :colHeaders="true"><...

所谓“千里之行，始于足下；骐骥一跃，不能十步；驽马十驾，功在不舍”，今天我准备从最简单的步骤开始手写一个简易版的Vue所用设计模式MVVM。首先来来熟悉下Object.defineProperty 这个api的使用，详细请自行MDN查阅 var obj = {} Object.defineProperty(obj, 'test', { configur...

function queryURLParams(url) { let result = {}, reg1 = /([^?=&#]+)=([^?=&#]+)/g, reg2 = /#([^?=&#]+)/g; url.replace(reg1, (n, x, y) => result[x] = y)...

最近碰到一面试题给了一个请求接口，没有分页，一共一万条数据，并且让前端渲染在页面上，这个场景一般在实际应用场景不多见，一般后端都会设置分页查询，但是面试官考的就是前端对于大量数据的处理能力。看本文之前不妨思考下，如果让你做，你会怎么处理呢？先给出代码吧！<!DOCTYPE html><html><head> <script src="h...

const formatter = (num) => { const reg = /^\d*$/ if(!reg.test(num)){ throw '输入内容有误！请输入数字' }else{ return String(num).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g,'$&,') ...

原生js实现平滑滚动今天上班遇到一个问题，点击某个按钮，将某个div里面含有id的某个元素滚动到视野中央，大概距离视口顶部100px位置。思索良久，没搞出来，今晚回来好生研究，思路如下。首先了解下关于元素以及浏览器窗口各种尺寸含义一张图搞清楚　html 定位：ClientHeight,scrollWidth本教程只需要用到一下几个尺寸名称含义offsetTop当前元...

前言本例基于react，但是实际上就是用原生js做的。兼容性做到了IE9，但是按照这个思路做是可以做到IE8甚至更低的。需求与最初的思路当我拿到这个需求的时候以为很简单，就是可以给页面上的文章做记号，比如添加个下划线，或者背景涂色做成荧光笔的样子。因为只需要兼容IE9，所以window.getSelection是支持的。（IE8及以下有其它的获取选中的方法）那么思路就是选中文本，点击添加...