- 博客(34)
- 收藏
- 关注
RSS订阅原创 var与let，const 以及 var的 变量提升
变量提升的概念：使用var声明的变量可以在声明之前被调用，其值为undefined；console.log(a);var a=1;console.log(a);// undefined// 1变量提升只局限于当前的函数，不会提升到函数外面console.log(a)// var a = 1;// console.log(a)var fn = function (...
2020-04-24 23:08:46
560
原创 箭头函数与function定义函数区别
箭头函数与function定义函数this指向箭头函数只指向定义环境,function传统函数随着调用的环境的改变而改变,没有调用者this就是windowfunction会随着调用者的变化而改变执行体的this指向,this始终指向调用者，如果没有调用者就指向window箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，定义的时候就确定了，无论被谁调用都不...
2020-04-24 22:02:57
526
原创 react 生命周期
constructor()构造函数，获取组件的props和context，初始化state定义组件属性的默认值和组件属性的类型// defaultPropsChildren.defaultProps = { msg: '默认父组件传来的值'}// PropTypesChildren.propTypes = { num: propTypes.number}...
2020-04-24 21:02:24
331
原创 react 新特性 2019
1.Time Slicing时间分片官方说明是可以进行异步的渲染，不会阻塞当前的线程，当cpu足够用的话，看起来是同步渲染的，当cpu很吃紧的时候，会看到有点卡顿，但不至于卡死，对于开发者透明，不影响开发过程。原理暂时没搞明白，渲染的方式肯定还是同步的渲染下来，至少父子组件的渲染是同步，猜测是把渲染任务推到任务队列里，然后一个个去执行，如果主线程很忙就会执行频率降低，如果主线程不忙就...
2020-04-23 20:17:25
493
原创 webpack-loader记录
loader的意义就在于他可以帮你"改代码"比如说，你在一个js文件里写了一行“错误”的代码，loader可以识别到这些代码并且将它转换为正确的代码。最好的例子就是jsx写法，当在js文件中没有别的配置，直接写jsx必定是报错的，但是jsx可以被jsx-loader识别后转换为了CreateElement的函数表达式，然后再交给js引擎去执行，那么我们的错误代码也可以运行起来了。这可以配合...
2020-04-21 22:59:44
126
原创 媒体查询
参考链接https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries#-moz-device-pixel-ratio媒体查询目的是为了页面能够在不同的显示器 ，不同大小的屏幕下也能够 正常显示原理：定义一系列的条件，用这些条件去检查显示器设备，如果符合规定的条件就应用对应的css样式。媒体类型：scr...
2020-04-21 20:33:07
628
转载 flex弹性盒子
转载自http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlFlex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性任何元素都能被指定为一个flex容器，使用display:flex即可flex容器下一级子元素都会被看作是flex-item，也叫flex元素；flex容器有一套css...
2020-04-21 00:12:36
290
转载 css盒模型
CSS盒子模型在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。盒子的组成一个盒子由外到内可以分成四个部分：margin（外边距）、border（边...
2020-04-20 22:42:29
120
原创 给数字加千分位
这个是比较常见的业务场景了，个人还是喜欢用正则来处理而非手动js切割处理，正则效率更高，写的比较简略，有遇到不能处理的场景再来补充直接上代码const thousandRegex = /(\d)(?=(\d{3})+\.)/g;/** * * @param {Number,String} num 格式化目标 * @param {Number} precision 精度 ...
2020-04-20 20:13:53
242
原创 获取浏览器类型，可扩展的写法
const rules = [ { name: "Opera", includes: ['Opera'], }, { name: "Edge", includes: ['Edge'], }, { name: "Firefox", includes: ['Firefox'], }, { name: "Opera", includes: ['Opera'], }, { name: "Chr...
2020-04-20 20:08:41
120
原创 管理网络请求的与缓存请求数据，提高性能
网络请求的往往是限制前端新能的重要因素，页面的卡顿往往不是前端渲染的问题而是请求数据慢或者频繁请求导致的。大型复杂的业务更加需要做请求的缓存，同时又要有细粒度的控制能力，哪些请求可以缓存，哪些请求不需要缓存，哪些请求可以直接存到localStorage里，哪些只在当前页面做缓存，以及何时应该清理缓存。为了解决以上问题，我们自己封装了一个强大的createService方法，可以高效，便捷，细粒度去...
2020-04-20 20:04:13
177
原创 树结构处理最佳实践
最近实际开发过程中经常遇到需要处理树形数据结构，每次都要写一遍递归，感觉比较麻烦，各个组员的写法也不统一，于是想自己写一套终极版本，希望能够兼顾复杂的业务场景和代码执行效率直接上代码和大家分享一下，欢迎指正。/** * * @param {Array} tree [{label,value,children}] * @param {Object} option * {...
2020-04-20 19:45:45
255
原创 XMLHttpRequest 用法解析
XMLHttpRequest构造函数，用于创建一个XMLHttpRequest实例newXMLHttpRequest()实例方法 ：XMLHttpRequest.abort()如果请求已被发送，则立刻中止请求。XMLHttpRequest.getAllResponseHeaders()以字符串的形式返回所有用CRLF分隔的响应头，如果没有收到响应，则返回null。...
2020-04-12 14:54:00
1104
原创 js自己实现 bind
简单实现Function.prototype.bind = function(ctx,...res){ const self = this; return function (...res2){ self.apply(ctx,res.concat(res2)) }}const fn = function(num){ console.log(this.name+''+num...
2020-04-12 14:36:05
144
转载 js的== 抽象相等比较算法
http://lzw.me/pages/ecmascript/#203抽象相等比较算法比较运算x==y, 其中x和y是值，产生true或者false。这样的比较按如下方式进行：若Type(x)与Type(y)相同， 则 若Type(x)为Undefined， 返回true。 若Type(x)为Null， 返回true。 若Type(x)为Number， 则 若x为...
2020-04-12 14:27:26
176
原创 js事件循环
https://www.jianshu.com/p/184988903562可以这么理解，js在不断地按顺序执行函数（任务），但是函数（任务）被分为3类，最普通的同步函数，一类叫宏任务，一类叫微任务遇到同步任务直接执行,遇到异步任务分类为宏任务(macro-task)和微任务(micro-task)。宏任务：整体的Script setTimeout setInterval微任务...
2020-03-18 02:01:28
293
原创 webpack之splitChunk
optimization: {splitChunks: {chunks: "async", // 必须三选一： "initial" | "all"(推荐) | "async" (默认就是async)minSize: 30000, // 最小尺寸，30000minChunks: 1, // 最小 chunk ，默认1maxAsyncRequests: 5, //...
2020-03-17 23:18:18
2008
原创 react diff策略
React通过引入Virtual DOM的概念，极大地避免无效的Dom操作。将时间复杂度从O3降到了O1，归功于react的 diff策略。实现原理：Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。 对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。在上面三个策略的基础上...
2020-03-17 23:06:56
228
原创 vue的scoped探究
在写vue组件的时候，style可以添加scoped属性，这属性到底干了哪些事情，会有哪些作用和影响呢？1. 在style标签上添加scoped属性，这张样式表被编译之后，其生成的样式class会添加一个hash值（实际上是一个属性选择器）如：.v-customer{color:red;}编译后成为：.v-customer[data-v-123456] {color...
2019-04-18 19:47:37
320
原创 npm mysql 学习笔记
npm模块mysql模块是node端操作mysql数据库的模块说说麻烦，还是官网讲的全面https://www.npmjs.com/package/mysql直接上代码const config = { host: "localhost", port: "3306", user: "root", password: "root", datab...
2019-03-20 21:29:11
768
原创 express学习笔记
express是 基于Node.js平台，快速、开放、极简的 Web 开发框架。很多node后端框架都是基于express构建的，得益于express简单和开放的设计。此文是基于express4.x 的。一 安装步骤：1 安装node环境2 npm init3 npm i express --save二 完成 hello world：main.jscon...
2019-03-20 21:08:27
239
原创 moment.js使用笔记
介绍：moment.js是一个专门用来处理时间的函数库，可以在浏览器和node.js环境中使用。安装：npm i moment --save使用：import moment from 'moment' const moment = require('moment')这里引入的moment其实就是一个函数，会根据传入的参数返回一个moment实例moment实例实际上就对...
2019-02-27 17:23:08
2398
原创 iview--使用总结
说在最前面——实测iview有内存泄漏的问题，正式项目还是别用了，除非官方修复了这个问题。 虽然说这个组件库有很大的问题，不过作为学习vue以来使用的第一个组件库，对我的帮助还是很大的，另一方面也要归功于他的设计有许多地方无法满足公司业务需求，导致我经常需要去看iview的源码来想办法覆盖iview组件以实现自己的需求。想必以后不会在用这组件库了（内存泄漏），不过他的设计还是值得...
2019-02-02 10:04:31
9364
2
原创 js中的FileReader
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <input id='file' type="
2018-07-23 16:54:35
1159
原创 js调用摄像头并截图
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title></head> <body> <video id="video"
2018-07-23 16:54:08
2413
2
原创 深入理解ES7的async/await
参考原文：https://blog.csdn.net/sinat_17775997/article/details/60609498在js中我们可以使用Promise方便地进行异步操作，但是有时候会有两个异步操作之间需要保证先后关系，比如请求一次数据A，A数据得到后然后再请求数据B。要解决上述问题，以往情况下我们可以在请求A数据的Promise的then中再new 一个Promise来...
2018-07-23 16:51:15
722
2
原创 正则表达式中的?! , ?=
let re=/^(?=.*[A-Za-z])(?!.{16,})([A-Za-z'-]*[\s]?[A-Za-z'-]*)$/上面这样的正则表达式，相比第一次遇到的童鞋都会感到奇怪。这里就来解释一下。查过一些资料，这种?=,?!的写法其实一种预先判断的写法，需要用小括号包起来。比如 ?=.*[A-Za-z])这部分就是先判断一下这个字符串是不是符合.*[A-Za-z]格式的，符合则...
2018-07-23 16:50:28
1689
原创 自己实现Promise
class MyPromise { constructor(func) { this.task = []; this.errTask=undefined; this.ball = null; this.status=undefined; setTimeout(() => { f...
2018-07-22 22:55:11
179
原创 在react中自己实现双向帮绑定
function bind(component,arr){ const _com={}; arr.forEach(item => { _com[item]=component.item; Object.defineProperty(component,item,{ get:function(){ ...
2018-07-22 22:54:24
207
原创 js中的import ,export ，exports，module.exports, require
在js中，import可以导入另个文件中的export的东西。而需要注意的地方是，js仿佛有着Spring容器一般东西，任何东西只要被导入一次过，在下一次导入（比如在另一个js文件里又导入了同一个东西），那么这两个东西是同一个。因此，基于这一点，在js中我们可以非常自然地做到单例模式。比如如果我们需要一个数据的容器 DataPool，并且我们希望这个容器是全局唯一，全局可访问的，那么我们可以在一个...
2018-07-22 22:50:11
1444
原创 从零开始搭建一个react-app
本文章只讲详细步骤不解释原因，只为记录搭建过程，以便将来使用。1.安装node6.0以上2.npm i -g create-react-app3.create-reacte-app my-app4.cd my-app5.npm run eject6.npm i --save jquery react-bootstrap redux react-redux react-rou...
2018-07-17 10:06:57
260
原创 react插件----create-react-app
create-react-app是一个非常方便的搭建react应用的插件，它帮你直接配置好了许多常用的模块如react，webpack，webpack-devserver，babel，eslint，fetch，css-loader等，并且这些配置一开始时是被隐藏的。npm install -g create-react-app 安装此插件使用命令 create-react-app myap...
2018-07-17 09:39:13
289
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人