- 博客(143)
- 收藏
- 关注
RSS订阅原创 面试题
作用域及原型链作用域参考：https://my.oschina.net/u/2949632/blog/793898原型链及其他参考：（快手一面）// 1var a = { x: 1 };var b = a;a.x = a = { n: 1 };console.log(a);console.log(b);// 2Function.prototype.a = () => alert(1);Object.prototype.b = () => alert(2);funct.
2020-05-22 17:49:31
373
原创 promise polyfill解析
https://github.com/taylorhakes/promise-polyfillPromise构造器function Promise(fn) { if (!(this instanceof Promise)) throw new TypeError('Promises must be constructed via new'); if (typeof fn !==...
2019-12-02 17:38:44
1882
原创 CSS3制作电脑屏幕出现问题时的字体闪动样式
思路：利用伪类重新生成同样的字体，且和原字体在竖直位置重合，在水平位置错开约2个px，利用动画使伪类的高度发生变化，同时利用一条直线跟随伪类高度的变化。HTML代码div class="wrapper" data-word="hello world!"> hello world! div class="whiteLine">div>div>CSS样式
2019-10-18 16:52:15
194
原创 js流与下载
触发下载一般会在页面点击链接进行下载，想下载一张图片怎么办？<a download="fileName.jpg" href="http://xxx/xxx.jpg">点击下载图片</a>属性分析：download: 必须，代表这个a标签的动作是下载，value是待下载的文件名href： 必须，代表下载的资源路径，点击下载按钮后请求到的资源会在内存中通过这个链接...
2019-10-18 16:50:32
317
原创 不同配置下的webpack打包文件分析
为啥有optimization？先说说大背景，入口文件entry中重要的是业务代码，但是业务代码不可避免的用到很多依赖。如lodash、element-ui等等，尤其在开发环境调试的时候，如何能更清晰的分离出业务代码呢？大家想到的肯定是只构建业务代码自己喽，没错！将依赖和entry分离的法宝在webpack3的时候还是commons-chunk-plugin，从webpack4时代开始，com...
2019-08-19 16:55:24
5972
原创 代码大全2 读书笔记
变量命名变量命名最重要的是要完全、准确的描述该变量代表的事物如当前日期：currentDate或todayDate,被省略为cd、current、date,不能明确的说明具体要表达什么，因此命名要清晰。以问题为导向名字反应的是问题（含义）而不是解决问题的动作，如一条个人成绩的输入inputLine远远没有personalScores明确变量名长度最好控制在8~16个字符，不能...
2019-07-07 22:20:06
216
原创 reduce实现串行promise
async function runPromiseByQueue(myPromises) { return await myPromises.reduce((previousPromise, nextPromise) => { return previousPromise.then(id => { console.log(id); return ne...
2019-06-05 11:37:58
1956
1
原创 node之path
1、path.basenamevar path = require('path');var basename1 = path.basename('after20180404\\node\\assert.js');//输出assert.js 获取文件名，包括后缀var basename2 = path.basename('after20180404\\node\\assert.js'...
2018-04-23 11:38:47
630
原创 node之Buffer
TypedArray因为JavaScript中数字是64位浮点数，例如canvas中获取图片像素值的getImageData方法，其实一个像素值是8位，却要浪费64位存储，现在可用8位的ArrayBuffer：// 创建一个8-byte的ArrayBuffervar b = new ArrayBuffer(8);// 创建一个b的引用，类型是Int32，起始位置在0，结束位置为缓冲区尾...
2018-04-11 16:01:56
351
原创 node断言函数
assert.deepEqual(actual,expected,[,message])断言actual和expected相等，用==判断否则抛出错误信息，AssertionError:message，只测试可枚举对象，不测试原型对象。const obj1 = {a:{b:1}};const obj2 = {a:{b:2}};const obj3 = {a:{b:1}};const ...
2018-04-04 16:10:43
467
原创 vuex使用规则
vuex是数据统一集中管理的解决档案，避免了vue组件之间传递数据的麻烦，且其state值同样使用双向数据绑定。下面利用webpack搭建平台。1. 在根组件中声明import Vue from 'vue'import VueX from 'vuex'import index from './index.vue'Vue.use(VueX);const store = n...
2018-03-29 12:00:33
1100
原创 vue改变组件对象值方法
1. 为对象或数组添加属性Vue.set(this.singerData, 'singer4', 'there is nothing in singer4');表示向对象this.singerData添加新属性singer4，值为'there is nothing in singer4'2. 直接改变对象或数组属性this.singerData.singer1 = 's...
2018-03-25 17:04:04
3561
原创 vue父子组件数据传递方式
父组件向子组件传值父组件向子组件传值简单，直接在父组件中引用子组件时将数据绑定在子组件中，并在子组件的props属性中接收即可。以下是父组件，其中<keep-alive>标签表示子组件，将created阶段获取的值singerData保存到vue的data()中，并在子组件中通过v-bind:singerData="singerData"传递给子组件，这里简写:singerDa...
2018-03-25 16:56:48
2139
原创 通过JavaScript实现刮刮乐学习canvas的globalCompositionOperation
HTML部分通过canvas实现刮刮乐上面的图层。<div class="container"> <div class="charactor cover">12345</div> <div class="cover"> <canvas id="canvas"&a
2018-03-09 11:35:18
1088
原创 CSS3伪类实现矩形四个切角
效果图如下 原理：给伪类添加背景利用线性渐变实现，然而背景渐变一次只能实现一个切角，因此，上图其实是由4个不同方向上的的背景实现的。代码实现div class="corner">/div>.corner{ width: 300px; height: 300px; background:
2018-01-17 20:29:49
11926
原创 diaplay:grid布局
grid布局即网格布局，每个网格都有起止线，每两条线之间都有设定好的距离1. 网格列宽设置首先设置网格的父级元素display：tablegrid-template-colums:100px 10px 100px 10px 100px;表示第1列100px，第2列10px(此列可作为列与列之间的间隙)2.网格高度设置grid-template-rows:a
2018-01-17 19:57:01
361
原创 display：grid布局
grid布局即网格布局，每个网格都有起止线，每两条线之间都有设定好的距离1. 网格列宽设置首先设置网格的父级元素display：gridgrid-template-colums:100px 10px 100px 10px 100px;表示第1列100px，第2列10px(此列可作为列与列之间的间隙)2.网格高度设置grid-template-rows:au
2018-01-17 11:23:27
19962
2
原创 CSS3实现水波效果
实现思路：利用伪类实现，伪类内容和背景图片一样，利用animation动画实现伪类的水波效果，而水波荡漾时最关键的就是：像用放大镜看一样，因此，需先将图片长宽缩小后将其用放大镜即scale放大，逐渐增加其大小（此时仍小于原图）并减小其scale（此时scale仍大于1，因为实现的效果仍然是放大后的效果），最终将其大小和scale都设置成最初的大小。水波荡漾时是从最中间开始由小变大的，所以在
2018-01-14 11:55:12
7666
原创 CSS3制作电脑屏幕故障时的闪动字体
思路：利用伪类重新生成同样的字体，且和原字体在竖直位置重合，在水平位置错开约2个px，利用动画使伪类的高度发生变化，同时利用一条直线跟随伪类高度的变化。HTML代码<div class="wrapper" data-word="hello world!"> hello world! <div class="whiteLine"></div></div>CSS样式
2018-01-10 15:29:46
1277
原创 监听文件变化后合并文件
1.监听文件(夹)变化fs.watch(fileDir,cb)2.读取目录fs.readdir(fileDir,cb)或fs.readdirSync(fileDir)3.读文件fs.readFile(file,cb)或fs.readFileSync(file);//file为文件名或者文件描述符4.写文件fs.writeFile(filePath,content,cb)或fs.readFileSyn
2017-11-14 17:07:45
363
原创 node复制文件
process.argv复制文件用命令行操作，假设主文件为main.js，需要将a.txt复制到b.txt中，则使用下面的命令：node main.js a.txt b.txt而main.js文件为：console.log(process.argv);var fs = require('fs');function copy(src, dst) { fs.writeFileSync(dst,
2017-11-14 16:40:49
1484
原创 重写bind方法
var that = null;Function.prototype.bind = function(obj,arg){ if (that == null){ that = this } return function(){ return that.call(obj,arg); }};function foo() { ret
2017-09-19 21:09:09
840
转载 css常见布局方式
单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）使用inline-block 和 text-align实现.parent{text-align: center;}.child{display:
2017-09-19 11:44:19
456
原创 前端路由实现原理
场景 分别点击顶部的”推荐”、”书城”、”书架”进而在顶部下面展示不同的页面。点击其中1个隐藏其他页面。实现原理 点击a标签对应的”推荐”、”书城”、”书架”，改变hash值后，监听onpopstate事件，进而进行不同的操作。代码实现1. 利用H5router实现整个路由系统。function H5router() { this.routers = {}; this.i
2017-09-14 16:10:12
461
原创 ES6 Symbol及对象遍历方法for in,Object,keys,JSON.stringify,getOwnPropertyNames,Reflect.ownKeys
Symbol是原始类型，不能用new 创建var s1 = Symbol('a');typeof s1;//symbolSymbol参数可接受字符串表示对Symbol实例的描述，主要是为了显示时容易区分，即是接受的字符串相等，返回值也不相等。 var s1 = Symbol('a');//Symbol(a) var s2 = Symbol('b');//Symbol(b) s1 === s2;
2017-09-07 21:55:16
3073
1
原创 ES6 Promise理解
catch方法.then().catch(cb)相当于：.then(null,cb)Promise对象的错误具有冒泡的性质，会一直向后传递，直到被捕获，推荐使用.catch方法，因为他不但能捕获前面then方法中的异常且能捕获较早之前未捕获到的异常，而then的第二个参数不能捕获第一个参数中的异常。// badpromise .then(function(data) { // succ
2017-09-07 19:23:26
355
原创 异步API Fetch
window.fetchfetch被定义在window对象上，用于请求远程资源，返回Promise对象检测请求结果,以下示例是请求图片： var URL = 'http://*******'; fetch(URL).then(function(response) { return response.json(); }).then(function(json) {
2017-09-07 16:03:02
304
转载 HTTPS建立连接的过程
思考问题的顺序学技术时，总是会问什么？这里也不例外，https为什么会存在，它有什么优点，又有什么缺点？为什么网站有的用http，有的用https？如果不能很好的回答，就往下看吧。http通信存在的问题容易被监听 http通信都是明文，数据在客户端与服务器通信过程中，任何一点都可能被劫持。比如，发送了银行卡号和密码，hacker劫取到数据，就能看到卡号和密码，这是很
2017-09-07 10:42:38
330
原创 HTTP2.0与HTTP1.0的区别
HTTP2.0的基本单位为二进制帧HTTP1.0利用文本与服务器交互，而HTTP2的基本协议单位为二进制帧流，每帧都有自己的类型旨在实现不同功能，然而HTTP1将继续存在，因此，HTTP2的二进制帧流需映射到HTTP1上以实现向下兼容。 HTTP2.0这么多新特性就是因为底层数据格式的改变：+-----------------------------------------------+|
2017-09-07 10:12:50
17296
转载 CSS中可以和不可以继承的属性
一、无继承性的属性1、display：规定元素应该生成的框的类型2、文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向3、盒子模型的属性width、height、margin 、margin-top、margin-right、margi
2017-09-06 20:57:28
304
原创 JavaScript substr,substring,slice,splice
str.substr(startIndex,length)从startIndex开始取length个字符若startIndex为负值，相当于str.length+startIndex若startIndex为负值且Math.abs(startIndex)>str.length,则默认将startIndex设为0省略length则返回从startIndex到字符串末尾length为0或者负值则
2017-09-06 20:48:17
209
原创 css vertical-align属性详解
适用场景vertical-align属性设置元素的对齐方式，只有具备以下两种属性的元素设置vertical-align后才起作用：1. display:inline2. display:inline-block属性介绍HTML：<p>xxxxxxxxxxxxx<span>Lorem ipsum dolor</span></p>CSS： p{ height: 1
2017-09-06 16:05:26
7261
原创 JavaScript选择文本方法
鼠标手动选择文本后显示1. 选择表单文本selectionStart,selectionEnd<textarea name="textarea" id="text" cols="30" rows="10"></textarea>text.onselect = function(){ var s = this.value.substring(this.selectionStart,this.s
2017-09-03 16:36:19
5447
转载 重绘和回流repaint/reflow
Reflow(渲染)对于DOM结构中的各个元素都有自己的盒模型，浏览器根据各种样式（浏览器的、开发人员定义的等）来计算，并根据计算结果将元素放到它该出现的位置，这个过程称reflow。reflow会影响到dom的结构渲染，同时会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。Repaint(重绘)当各种盒子的位置、大小以及
2017-09-03 11:12:17
347
原创 React 虚拟DOM及diff算法
虚拟DOM合理性由于操作DOM很慢，界面性能很多都是操作DOM引起的，而操作JS很快，用JavaScript对象很容易表示DOM节点，包括标签属性子节点，即根据DOM结构递归创建虚拟DOM树，在页面状态改变需要操作DOM时，先通过虚拟DOM计算出对真实DOM的最小修改量，然后再修改真实的DOM。1.两个相同组件产生类似的结构，不同组件产生不同的DOM结构。2.对于同一层次的一组子节点，通过唯一的
2017-09-03 11:05:14
612
原创 ouput标签详解
属性<output name="o1" for="a b"></output>output标签用于显示计算结果，而被计算得数从哪来？从for属性的指向来，注意从for属性获取的元素value为string类型，计算时需要转换为number，parseInt或者+都可以。HTML写法<form id="form" oninput="o1.value = (+a1.value) + (+b1.value
2017-09-01 10:02:33
827
原创 Math.prototype.concat详解及二维数组扁平化方法
当concat的参数不为数组时var arr1 = ['a', 'b', 'c'];var arr2 = arr1.concat([1,2],4,5);//这里[1,2],4,5不是数组console.log(arr2);//(7) ["a", "b", "c", 1, 2, 4, 5]当concat参数不为数组时,如上面的[1,2],4,5，则会将[1,2],4,5里面的参数全部拆开添加到新数
2017-08-31 10:20:38
1571
原创 javascript声明提升案列
var定义的变量会提升 if(!(a in window)){ var a = 1; console.log('haha') } console.log(a);以上代码只会输出undefined，不会输出haha，因为JavaScript在解析时会首先将当前作用域中的 变量进行扫描，建立作用域链，变量的初始值都为undefined，因此以上代码相
2017-08-29 20:29:28
239
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人