- 博客(90)
- 收藏
- 关注
RSS订阅原创 ES2015新特性
ECMAScript概述JavaScript = ECMAScript + 运行环境的API其中，运行环境包括浏览器和Node环境ES2015（ES6来泛指ES2015之后的新标准）新特性解决原有用语法上的不足let、const与块级作用域let、const声明的变量只在{}包裹的块级作用域内有效// 将会打印出三次foo;for(let i = 0; i < 3; i ++) { let i = 'foo'; console.log(i);}// 这段代码相当于如下
2020-06-28 17:58:40
765
原创 ES6中的Promise实现原理
Promise规范要点Promise是一个类，接收一个函数作为参数，该函数称为执行器，创建Promise对象时，执行器会立刻执行；Promise有三种状态，分别为pending等待、fulfilled成功、rejected失败；其中pending会转换为fulfilled或者rejected，一旦状态更新，则无法再更新状态；执行器函数接收两个参数，分别为resolve函数和reject函数，用于更新Promise对象的状态then()方法内部需要判断状态，状态成功则调用onFulfilled函数，
2020-06-20 20:40:07
908
原创 JavaScript的函数式编程简介
函数式编程的优点React的推广、Vue3开始采用可以抛弃模拟面向对象编程的this打包时，利用sideEffects来过滤副作用代码方便测试，并行处理lodash、underscore、ramda等库帮助开发函数式编程的概念编程范式，对运算过程的抽象，将程序的本质（输入通过运算得到输出的过程）进行进一步的抽象，把运算过程中各种运算进行更加细粒度的划分为各种各样的函数，然后用函数的组合方式来抽象得到整个运算。这样有利于复用代码，灵活组合出不同的运算过程。函数一词指的是数学中的函数定义，即
2020-06-19 16:39:25
307
原创 从matrix变换函数矩阵来说明CSS Transform的原理和操作
文章以二维变换为例说明，三维变换采用类似的操作理解即可。变换的坐标系统默认的变换坐标系统，变换原点为元素中心，x轴与y轴与web中定义的一致。其中，变换原点可以用transform-origin属性来设置。transform是以该坐标系统为参考，对变换中图形上每个点的坐标进行更新，来得到变换后的图形。i→= ai→+bj→\overrightarrow{i} =\ a\overrightarrow{i} +b\overrightarrow{j} i= ai+bj线性变换线性变
2020-05-11 19:30:35
435
原创 button元素被点击后自动获得焦点
元素在被鼠标点击后，会自动获得焦点，此时如果按下enter键，就会触发元素的click事件。但是元素如果是用Tab键获得焦点后按下enter，则只会触发一次click，然后就失去焦点，再按下enter键并不会触发click事件。因此，如果要避免鼠标单击获得焦点的情况，要在click事件回调里设置失去焦点行为，这样就不会出现按下enter触发click的情况了。表单元素很可能都有这类特性，鼠标单击获...
2020-04-11 15:43:18
2094
原创 CSS经典布局——sticky footer粘滞页脚
简述sticky footer粘滞页脚布局是经常使用的CSS经典布局之一，其表现形式是：页脚始终在视口的底部，不管是内容区内容较少不足以占据视口高度，还是内容区内容很多超过视口高度导致出现滚动条，页脚都处于视口的底部，并且不会遮住内容。表现形式内容区内容不多内容区内容很多HTML代码与CSS代码<!DOCTYPE html><html lang="en">...
2020-04-03 18:41:39
479
原创 HTML编码、innerHTML、innerText与URL编码
HTML编码字符集为了让浏览器知道页面应该显示什么，必须要给页面一个明确的字符集用于浏览器编码解码。通常，我们都用utf-8字符集。如<meta charset="UTF-8">来指定页面所用的字符集。这样一来，浏览器可以根据utf-8字符集来显示内容。点击这里先展示一下HTML特殊字符与字符实体对照表。浏览器对HTML标签内的特殊字符解析时，为什么直接写特殊字符也行，写特殊字符...
2020-02-29 22:14:23
604
原创 JavaScript设计模式——单例模式
本文由《JavaScript设计模式与开发实践》–曾探著总结而来。应用场景某个作用域内（如全局作用域）只需要一个具备功能的对象。例如全局的window，登录框等等。总之，就是在顶级的作用域中用来掌控顶级信息的对象。这样的对象是唯一的，适合用单例模式来创建。创建方式思路：包括两点，首先要创建这样的对象。创建对象可以用ES6语法中的类（或ES5的构造函数），通过new 类名()来创建，也可...
2020-02-26 16:16:25
711
原创 npm安装Electron 7.x以上版本的方法
在国内安装Electron 7版本时常常会在安装electron的时候卡在npm install.js不动，因此需要对npm做如下配置registry=https://registry.npm.taobao.orgsass_binary_site=https://npm.taobao.org/mirrors/node-sass/phantomjs_cdnurl=http://npm.taob...
2020-01-23 18:49:48
1291
2
原创 nodemon--node.js工程自动热启动构建工具
在用node写应用时，常常会遇到更改代码后要重启项目来观察更改后的效果，手动重启费时费力，利用nodemon包来实现自动热重启，设定监视的文件或文件路径，发生更改后执行重启命令，这样就避免了手动反复重启的繁琐，加快项目的开发速度。...
2019-12-13 19:15:53
282
原创 Blob数据类型及应用
JavaScript中有一种专门存放二进制数据的数据类型对象，叫blob，是从HTML5引入的。blob的英文名称为Binary Large Object，即二进制的大型对象。File对象继承自blob对象，并有一些额外的拓展功能。创建方法利用构造函数Blob(array, options)array: 必需，数组类型，其中数组元素是二进制对象或者字符串；options: 可选，对二进...
2019-10-14 20:03:12
4214
原创 正则表达式总结（JavaScript忍者秘籍第二版）
正则表达式创建字面量语法/表达式内容/后跟修饰符构造函数new RegExp(‘表达式内容’, ‘修饰符’)修饰符i : 对大小写不敏感；g : 查找所有匹配项，即全局查找匹配；全局匹配时，返回的数组元素为在字符串全局查找下的各个匹配结果，不包含捕获内容。m : 允许多行匹配，即multiple lines，对获取textarea元素值有帮助；y : 开启黏连匹配，与g修...
2019-09-27 14:13:12
132
原创 node环境使用CommonJS规范的模块加载机制
CommonJS规范的模块加载机制与ES6的有所不同，ES6属于静态加载，直到加载模块的脚本运行才会运行要加载的模块。而CommonJS的模块是动态加载，要加载的模块先运行，然后输出一个exports对象给加载模块的脚本，exports对象的属性值已经被求值。加载模块的脚本会声明一个对象来将exports对象（浅）拷贝过来。看如下的两份不同的代码：module_a.jsvar count =...
2019-07-27 15:54:05
440
原创 Django的模板过滤器空格
在用模板过滤器将变量格式化时，要注意格式化规则前不要加空格，否则无法解析。如：{{ value|date:"M d Y H:i" }}如果写成：{{ value | date: "M d Y H: i" }}date和 "M d Y H: i"之间用空格隔开，则无法解析；...
2019-07-23 10:33:04
780
原创 Mac下sublime text3运行Python3的可交互环境设置
Mac系统自带Python2.7，默认启动2.7版本的Python解释器。当下载了Python3.7后，需要在sublime text3的编辑器里运行Python3.7的解释器时，需要做如下的设置：tools->build system->new build system，打开一个新的配置文件，文件里输入以下内容并保存，名字可以命名为Python3，这样tools->buil...
2019-07-16 10:24:47
2992
原创 图片加载防闪动的CSS方法
图片闪动：在移动端设置图片布局时，图片使用自适应的方式，其父元素的高度是被图片高度撑开的。在图片加载前，父元素高度为0；加载后，父元素高度为图片高度。这样的过程会造成视觉上的闪烁，影响用户体验。因此，在用图片撑开父元素高度之前，就需要给父元素设置一个高度。这个高度不能写成定值，否则无法适配移动端各种尺寸。此时，可以利用padding百分比的方式，来将父元素作为一个占位符，提前撑开高度，以便于图片...
2019-07-08 13:14:00
3852
原创 浏览器重排和重绘触发情况
浏览器渲染引擎解析HTML文档形成DOM树，解析CSS文档形成样式规则，DOM树和样式规则结合形成渲染树，然后开始绘制。渲染树需要重新分析且节点尺寸需要重新计算就称为重排。节点的几何属性或者样式发生变化就称为重绘。任何改变渲染树构建信息的行为都会导致重排或者重绘。如：添加、删除、更新DOM节点通过display: none隐藏一个DOM节点-触发重排和重绘通过visibility: hid...
2019-07-04 16:07:13
993
原创 ES6的Map数据结构
Map数据结构是为了解决对象无法使用非字符串作为键而提出的数据结构，本质上讲，Map是一个二维数组，其中数组元素是只含有两个元素的数组，这两个元素按顺序分别为键和值。如var m = new Map([[x, 1], [y, 2]]);实际上，最常用的形式是把对象作为键，对象相关的信息作为值来存储在Map中。设置键值对设置键值对方法set(key, value);var m = new M...
2019-07-02 14:42:25
1855
原创 浅谈浏览器内核线程
浏览器内核是多线程的，各个线程互相配合，常驻线程如下：GUI渲染线程负责对HTML文档的渲染，当发生重绘或者回流时，GUI线程就会执行。当JS引擎线程执行时，GUI线程会被挂起，两者互斥。JavaScript引擎线程用于执行JavaScript脚本。单线程，与GUI线程互斥。定时器线程单独用于计时的线程。事件触发线程当一个事件被触发时该线程会把事件处理函数添加到任务队列的队尾，等...
2019-06-28 19:04:32
325
原创 JS的事件循环机制
JS的异步操作来源于浏览器提供的异步API，以及事件循环机制，回调函数队列（或者叫task queue，任务队列）。事件循环机制循环往复地监测JS调用栈和任务队列，一旦调用栈为空，且任务队列中有回调函数，就会将回调函数丢入调用栈中执行。为了得到一个顺畅的UI界面，耗时操作应该写成异步形式，因为重绘操作必须是调用栈为空的情况下（即没有JS代码执行）。
2019-06-28 14:40:10
1651
原创 判断JS数据类型的方法
JS是弱语言，其数据类型可以自动转换，因此很多时候在用到数据的时刻不清楚数据的类型到底是哪种，需要进行判断后，再执行语句。最新的ECMAScript规范定义的数据类型分为两大类，分别为基本类型和引用类型。基本类型： String, Number, Boolean, Undefined, Null, Symbol基本类型也称为简单类型，作为简单的数据段占据的空间固定。因此为了提升变量的查询速...
2019-06-28 13:41:38
123
原创 函数参数对象arguments转为数组args的几种方法
在将函数柯里化的时候，经常需要用到函数参数对象arguments转为数组的情况（如果是用apply方法来调用函数，其实没必要转为数组，因为apply方法的第二个参数不仅可以是数组，也可以是类数组对象）。下面给出几种转为数组的方式：ES5规范下的方式：利用数组的slice方法，可以数组原型Array.prototype或者[]来调用slice，使用slice会阻止某些引擎（如V8）的优化，因此...
2019-06-27 16:09:49
720
原创 ES6中的生成器和迭代器
生成器函数generator function 用function *name () {}来声明，调用生成器函数则会返回一个生成器对象generator，并且符合可迭代协议和迭代器协议，因此generator也是一个迭代器对象，具有next()方法，调用next()方法会执行生成器函数内的语句（即遍历生成器函数内部的状态，状态值由yield后的表达式值给出）。function *foo ( x ...
2019-06-25 20:58:20
175
原创 在setTimeout或者ajax等异步方法中回调函数的写法与调用
常常在setTimeout或者ajax中产生异步代码执行，执行的是回调函数，那么回调函数怎么写呢？这要跟回调函数的函数体内写法有关；回调函数的函数体内return返回值不是函数；回调函数的函数体内return返回值是函数；分析一下代码的执行过程：function callback () { console.log('执行callback函数') return function ()...
2019-06-18 19:32:55
2041
原创 微信小程序的this.setData()方法更新二级属性数据
在用this.setData()更新数据时，如果要更新的数据如下：data: { person: { name: 'xiaoming', occupation: 'front-end engineer' }}要把person.name更新为"xiaogang"，我们如果通过以下途径更新更新途径1：this.setData({ person.name = "xiaoga...
2019-05-03 15:21:46
5090
原创 Mac下安装MongoDB以及启动连接流程
先到官网上选择相应系统的server版下载，然后解压复制到想要的路径下，更改文件夹名称为mongodb，否则原来的版本号太长了；可以不配置环境变量，在shell中切换到mongodb的文件夹下，里面有bin文件夹，切换到bin文件夹下，在shell中输入./mongod --dbpath path --port portnumber其中，path是给数据库文件的存储路径，可以根据项目路径来...
2019-03-26 10:38:45
445
原创 Mac下Apache配置虚拟主机后localhost访问不到的解决方案
配置虚拟主机后，localhost的访问就会失效，解决方案是在虚拟主机的配置文件里添加localhost虚拟主机，如下：<VirtualHost _default_:80> DocumentRoot "/Library/WebServer/Documents/" ServerName localhost </VirtualHost>Docu...
2019-02-22 09:48:57
1187
原创 浅谈浏览器动画与requestAnimationFrame
浏览器动画的实现是通过在一定频率下重新渲染得到的，每一帧都间隔相同的时间。在CSS动画中，浏览器知道动画的开始和每一帧的时间间隔，所以动画的效果很流畅。但在用JS实现的动画中，一般用定时器实现时，存在着时间间隔并不可靠的问题，如果线程里有其他任务存在，定时器执行任务的时间间隔并不一定能保证是自己设定的数值；这样容易导致动画产生延迟停滞，效果大打折扣； 为了解决这个问题，引入了requestAn...
2019-02-14 15:57:17
353
原创 在canvas画布上多次绘制图形叠加的效果
如果在画布2d上下文连续绘制多次相同的图形，比如<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画布简单实践</title></head><body&g
2019-02-14 15:35:38
5463
原创 github上传代码时图片后缀一定要跟代码中的一致
在用GitHub托管代码时，图片后缀.JPG，但代码中为.jpg小写形式，在本地文件系统和本地服务器调试中没问题，但在上传到GitHub时，图片加载不出来，返回404。经查询，发现GitHub要求代码和图片必须一致，因此将图片后缀.JPG 改为.jpg后，图片可以正常显示了。...
2019-02-09 16:19:59
206
原创 生成随机排列的n个0~n不重复数字的数组
有时候会用到生成一个数组，要求数组中的数字不重复，有一定范围（比如0~8），且随机排列的情况，如[2, 5, 0, 1, 4, 8, 7, 6, 3];function arrRandom(n) { var arr = []; arr.push(Math.floor(Math.random() * n)); while(arr.length < n) { var num ...
2019-02-08 18:09:15
1370
原创 外边距塌陷问题及其对策
在做子块级元素相对于父块级元素垂直定位时，如果用margin-top来做定位，会导致外边距塌陷现象出现；简而言之，就是子元素和父元素相对于更大的容器同时下移。外边距塌陷的意思就是子元素和父元素的垂直外边距合二为一了，并且同时设定。水平外边距没有这个现象。出现的情况是子元素与父元素之间没有任何隔离，外边距接触到一起，导致外边距合并。解决办法：为父元素开启BFC环境：overflow： hi...
2019-02-08 16:49:24
1141
原创 用setTimeout定时器调用自身构建的位置移动函数时注意的问题
在做有关位置移动的问题时，通常会采用setTimeout定时器来反复调用自身来构建位置移动函数，以达到不断更改元素位置到达目的地。但是如果在判断目的地到达的语句里function show() {......if(pos == destination) { //return true; clearTimeout(timer);}var timer = setTimeout(show...
2019-02-07 20:23:05
794
原创 图片img或者含有img元素拖拽时的阴影效应问题
&lt;body&gt; &lt;!-- &lt;div id="div1"&gt; --&gt; &lt;img src="地鼠洞.jpg" alt="" id="img1"&gt; &lt;!-- &
2019-02-06 17:53:58
2469
原创 JS异步与同步的理解
什么是异步执行机制浏览器内有三大线程：JS执行引擎线程，HTTP请求线程，事件触发线程；同步执行机制应该指的是JS执行引擎线程，按照书写顺序将程序加入队列中，按先后顺序一个个执行；异步执行机制就是不完全按照书写顺序将程序加入队列，而是将某些程序推迟到未来的某个时刻再加入队列中，等待执行；比如，一段代码中包含三个函数，第二个函数是一个监听器函数（注册有回调函数），当执行完第二个函数后，并...
2019-02-04 17:30:38
197
原创 写面向对象模式时this指向问题
this永远指向的是所属函数的调用对象，也就是说，this属于某个函数，哪个对象调用了这个函数，this就指向哪个对象；对this的指向一定要注意包含this的函数被谁调用，被window调用则会指向window；如this.ele.onclick = this.move; //move是对象的某个方法，this.ele是对象的一个属性；此时move方法里的this指向的并不是对象，而是thi...
2019-02-02 20:34:46
187
原创 Object.create方法创建对象
Object.create()方法以传入的对象为原型对象来创建对象实例。`person1 = { name: "xiaoming", gender: "male"}`person2 = Object.create(person1);person2 == person1； //false；创建的对象实例person2以person1为原型，共享person1的属性和方法，但两者不相同...
2019-01-31 09:21:20
357
原创 data:URL提高图片响应速度
data:URL方式可以免去向服务器发出HTTP请求，从而提高响应速度。原本的<img src="images/pic.gif">现在可以变为如下形式<img src="data:image/gif;base64, R0lGODlhMwAxAIAAAAAAAPyH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX El...
2019-01-27 23:11:05
217
原创 图片地图/CSS Sprites改变HTTP请求数量从而提高响应速度
通常可能会在导航栏中用图片或者图标来链接到其他页面，但如果每个图片都用img标签来引入，则会导致有多个HTTP请求，页面响应速度变慢，而采用图片地图的方式来引入导航链接，则只需要一次HTTP请求，几乎可以减少50%的请求时间。图片地图的方式即是将所有链接用的图片或者图标合成一张大图，只需要引入这张大图，在大图的不同区域点击，导航到不同链接对应的页面即可。引入大图时用&amp;lt;img src=&quot;i...
2019-01-27 17:15:27
148
原创 form元素的submit方法报错问题
在用form元素的submit方法提交表单时，会遇到显示.submit() is not a function报错信息。经过验证，发现由于HTML的input元素name=submit导致，submit是DOM API的保留字，一般谨慎使用，尽量少用submit做属性值或者变量名；...
2019-01-24 19:44:21
1030
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人