自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

从入门到进错门

Share、Open、Free

原创 前端工程化--Vue-CLI自动生成页面

每次新建页面这样的机械化步骤我们完全可以用代码帮我们执行,更进一步,对于一些简单的页面,我们甚至可以一键生成页面,包括从后端请求数据等操作。

2020-04-09 18:29:50 105 0

原创 async/await 的错误捕获

详细介绍了几种常用的捕获async/await错误的方式,最后以error first的风格抽成一个统一的函数。

2020-03-19 08:29:34 434 0

原创 前端机器学习--识别人脸在脸颊上画草莓
原力计划

要在用户上传的人脸上画草莓,会面临几个问题: 1. 在哪儿画? 2. 画多大? 3. 草莓的角度和脸的角度是否一致? 基于这些问题,就不得不使用机器学习来解决了!

2020-03-13 10:03:21 95755 0

原创 在 Chrome DevTools 中调试 JavaScript
原力计划

介绍几种常用的Chrome DevTools断点调试方法1. 代码行断点 2. DOM更新断点 4. XHR/Fetch断点 5. 事件侦听器断点 6. 异常断点 7. 函数断点

2020-03-13 09:27:36 9102 6

原创 划水神器--在浏览器地址栏和标签页title里面玩俄罗斯方块

划水神器–在浏览器地址栏和标签页title里面玩俄罗斯方块 效果如图: 在线体验 1. 原理 URL地址栏中玩:使用window.location.hash动态修改页面的hash值 标签页中玩:使用document.title动态修改页面的title 使用一个定时器,产生方块下落的效果,监听...

2019-11-18 14:53:22 122 0

原创 Webkit底层原理(5)--CSS解释器和样式布局

从整个网页的加载和渲染过程来看,CSS解释器和规则匹配处于DOM树建立之后,RenderObject树(下一篇文章会介绍)建立之前,CSS解释器解释后的结果会保存起来,然后RenderObject树基于该结果进行规则匹配和布局计算。当网页有用户交互或者动画等动作的时候,通过CSSOM技术,Java...

2019-10-06 11:28:24 140 0

原创 Webkit底层原理(4)--DOM事件机制和Shadow DOM

一、DOM事件机制 1. 事件的工作过程 事件在工作过程中使用两个主体,第一个是事件(event),第二个是事件目标(EventTarget)。每个事件都有属性来标记该事件的事件目标。当事件到达事件目标的时候,在这个目标上注册的监听者(EventListeners)都会被触发调用,当然这些监听者的...

2019-10-05 18:15:43 98 0

原创 Webkit底层原理(3)--HTML解释器

1. 解释过程 HTML解释器的工作就是将从网络或本地磁盘获取的HTML网页和资源从字节流解释成DOM树结构。如下图: 图中将这一过程描述得很清晰:首先是字节流,经过解码之后是字符流,然后通过词法分析器会被解释成词语(Tokens),之后经过语法分析器构建成节点,最后这些节点被组成一颗DOM树。...

2019-10-04 14:58:18 203 0

原创 Webkit底层原理(2)--资源加载和网络栈

资源加载和网络栈 使用网络栈下载网页和网页中的资源是渲染引擎工作的第一步,也是非常耗时间的一步。 一、Webkit资源加载机制 1. 资源 网页本身就是一种资源,例如图片、视频等。HTML支持的资源主要有以下类型: HTML:HTML元素; JavaScript:JavaScript代码,可以...

2019-10-03 13:52:52 42 0

原创 Webkit底层原理(1)--Webkit架构和模块

一、Webkit架构 Webkit的一个显著的特征就是它支持不同的浏览器,因为不同浏览器的需求不同,所以在Webkit中,一些代码可以共享,但是另一部分是不同的,这些不同的部分称为Webkit移植(Ports)。Webkit的整体结构如图: 图中最下面是操作系统,Webkit可以在不同的操作系统...

2019-10-02 16:21:52 103 1

原创 WEB性能(7)--XMLHttpRequest

一、XMLHttpRequest XMLHttpRequest(XHR)是浏览器层面的API,可以让开发人员通过JavaScript实现数据传输。XHR是在Internet Explorer 5 中首次亮相的,后来成为AJAX(Asynchronous JavaScript and XML)革命核...

2019-10-02 11:03:38 32 0

原创 WEB性能(6)--经典最佳实践

经典最佳实践 1. 减少DNS查找 每一次主机名解析都需要一次网络往返,从而增加请求的延迟时间,同时还会阻塞后续的请求。 2. 重用TCP连接 尽可能使用持久连接,以消除TCP握手和慢启动延迟。 3. 减少HTTP重定向 HTTP重定向很费时间,特别是不同域名之间的重定向,更加费时;这里面既有额外...

2019-10-02 11:00:54 22 0

原创 WEB性能(5)--HTTP 2.0介绍

一、HTTP 2.0介绍 HTTP2.0可以让我们的应用更快、更简单、更健壮!HTTP2.0把很多以前我们针对HTTP1.1想出来的歪招都一笔勾销,把解决那些问题的方案都内置在了传输层中。 HTTP2.0的目的就是通过支持请求与相应的多路复用来减少延迟,通过压缩HTTP首部字段将协议开销降至最低,...

2019-09-22 10:38:54 60 0

原创 WEB性能(4)--HTTP 1.x

一、HTTP 1.x介绍 HTTP 1.0的优化策略非常简单,就一句话:升级到HTTP 1.1! 改进HTTP的性能是HTTP 1.1工作组的重要目标,后来HTTP1.1页引入了大量增强性能的特性: 持久化连接以支持连接重用; 分块传输编码以支持流式相应; 请求管道以支持并行请求处理; 字节服务...

2019-09-17 22:11:44 40 0

原创 WEB性能(3)--TLS

一、传输层安全(TLS)介绍 SSL(Secure Sockets Layer,安全套接层)协议最初是网景公司为了保障网上交易安全而开发的,SSL协议在直接位于TCP上一层的应用层被实现。SSL不会影响上层协议(HTTP),但能够保证上层协议的网络通信安全。 IETF后来在标准化SSL协议时,将其...

2019-09-04 21:36:50 123 0

原创 WEB性能(2)--UDP

一、UDP介绍 1980年8月,紧随TCP/IP之后,UDP(User Datagram Protocol,用户数据报协议)被加入了核心网络协议套件。UDP的主要功能和亮点并不在于它引入了什么特性,而在于它忽略的那些特性。UDP一般称为无(NULL)协议,RFC768描述了它的运作机制,全文完全可...

2019-09-04 08:12:08 202 0

原创 WEB性能(1)--TCP

一、TCP介绍 因特网有两个核心协议:IP和TCP。IP,即Internet Protocol(因特网协议),负责联网主机之间的路由选择和寻址;TCP,即Transmission Control Protocol(传输控制协议),负责在不可靠的传输信道上提供可靠传输的抽象层。 TCP向应用层隐藏了...

2019-09-03 12:53:21 91 0

原创 HTTPS详细介绍

一、为什么要HTTPS HTTP协议因为其轻、小、快、简单,所以在全世界普及开来,各种应用都离不开它。但是随着业务复杂度的提高,HTTP的这些优点逐渐成为了短板。所以就开始各种打补丁,比如因为HTTP是无状态的协议,所以为了管理状态而诞生的Cookie。这篇文章要说的是其中一个为了安全而诞生的超级...

2019-07-12 15:07:18 292 0

原创 浏览器缓存详细介绍

一、整个流程过一遍   我们假设浏览器在请求一张图片: 浏览器会检查这张图片的HTTP头部字段,看看这张图片是不是满足强缓存,如果满足的话,浏览器会直接从本地缓存里面将图片取出来,不会向服务器发送请求。 如果第一步的强缓存没有满足的话,浏览器会向服务器发送一个请求,服务器会检...

2019-05-29 19:13:41 76 0

原创 Vuex详细介绍

1. 什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这是官网的说法,其实很简单:就是一个加强版的data! 在单页应用中会有一个data函数,里面就存放了当前页面的一些数据。比如: <template> <div> ...

2019-05-22 18:39:05 42 0

原创 使用Vue做一个可自动拼图的拼图小游戏(二)

背景以及最终效果 在上一篇文章中我们已经写完了一个可以正常玩的拼图小游戏,但是这还没有结束,我们还要接着试一下让拼图游戏可以自己完成拼图。 最终效果如下图: 本部分是这篇文章的第二部分,主要讲的是实现自动拼图的功能实现。 原理 这里开始就涉及到一些算法的知识了,不过不难。拼图游戏其实就是:N数码...

2019-03-28 15:26:55 8018 0

原创 使用Vue做一个可自动拼图的拼图小游戏(一)

背景以及最终效果 随着几个项目的提测,也闲下来了,恰好玩了一把拼图游戏,于是突发奇想打算自己写一个试试。 最终效果如下图: 实现的功能有: 普通拼图的功能 自动拼图 本部分是这篇文章的第一部分,主要讲的是实现普通拼图的功能。 原理 相信拼图的玩法大家一点都不陌生,就是点击一个非空的块,如果它...

2019-03-27 16:06:47 9599 0

原创 给女朋友讲HTTP协议 | 网络基础

为了更好的理解HTTP,我们需要花点时间了解一下TCP/IP协议族。 通常使用的网络是在TCP/IP协议族的基础上运作的。而HTTP属于它内部的一个子集。 TCP/IP协议族 计算机与网络设备要相互通信,双方就必须基于相同的方法。比如,如何探测到通信目标、由哪一边先发起通信、使用哪种语言进行通信、...

2019-01-10 19:09:48 205 0

原创 各种密码学算法的GUI编程实现(DES、AES、Present、扩展欧几里得算法、素性检测)

各种密码学算法的 C# GUI编程实现,包含:DES、AES、Present轻量级密码算法、扩展欧几里得算法、素性检测。

2018-12-29 12:32:06 11067 0

原创 Vue组件-爬取页面表格中的数据并保存为csv文件

背景 实际开发过程中需要将前端以表格形式展示的数据保存为csv格式的文件,由于数据涉及到的种类比较多,格式化都是放在前端进行的,所以后端以接口下载的形式返回csv文件会比较麻烦,于是想着直接写个组件爬取页面中表格内的数据。 开发框架:Vue+Webpack+Element-UI 实现 分析 首...

2018-12-17 15:37:43 6363 0

原创 VUE回到顶部组件,使用requestAnimationFrame

这篇文章是18年就写的了,那时候element-ui还没有回到顶部组件,我就弄了一个,现在官网已经有了。想直接使用的话可以使用官网上的,但是官网的是使用setInterval写的,我就顺便改一下这篇文章,使用requestAnimationFrame弄一个

2018-12-14 17:18:43 8583 11

原创 Promise实现原生JS的Ajax请求(后端使用Node.js)

最近在学习ES6的相关知识,看完了Promise,于是打算用Promise实现一个原生JS的Ajax例子,顺便复习一下Node的相关知识。 说搞就搞,先写后端 项目目录结构 后端使用的是Express框架,具体步骤如下: npm init 初始化,这个就一直下一步就行了,需要注意的是项目文件...

2018-11-30 15:04:13 281 0

原创 JavaScript中数组排序sort深入理解(Array.prototype.sort)

疑问 最近在看算法书的时候看到C++中的sort方法,书中介绍是使用的快速排序。于是想起来自己天天都在写的JavaScript中的sort排序,它使用的是什么排序算法呢?各个浏览器使用的是同一种排序算法吗? 带着问题,打开了ECMA官方规范 ECMA 2015 ECMA 2016 ECMA 20...

2018-11-28 17:31:52 3250 0

原创 ES6(三):变量的解构赋值

解构赋值语法是一个Javascript表达式,这使得可以将值从数组或属性从对象提取到不同的变量中,文中主要讲数组的解构赋值、对象的解构赋值、字符串的解构赋值、数值和布尔值的解构赋值以及函数参数的解构赋值 数组的解构赋值 基本用法 ES6以前我们如果要定义三个变量的话需要这样做: code var ...

2018-11-22 14:46:16 645 0

原创 ES6(二):Promise

ES6之前解决异步编程只能使用回调函数或事件,ES6中加入了 Promise,使得异步编程更加简洁直观和合理 特点 Promise是一个对象,具有以下两个特点: 对象的状态不受外界影响 状态一旦改变就不会再变 使用方法 基本使用 ES6中规定,Promise对象是一个构造函数,于是我们就需要使...

2018-11-21 14:19:31 3330 0

原创 判断两个json是不是相等的

JavaScript判断两个json是不是相同的 原理 暴力的递归遍历对比,遇到不相等就return false code: let jsonObjA = { "Name": "MyName", "Company":...

2018-11-05 19:10:06 1880 0

原创 彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽完整实现

一、基于鼠标事件的拖拽 原理——onmousedown、onmousemove、onmouseup onmousedown 该事件会在鼠标按键被按下时触发 支持该事件的HTML标签: &amp;lt;a&amp;gt;, &amp;lt;address&...

2018-11-01 16:27:58 40279 2

原创 ElementUI的DatePicker多个日期选择器默认没有选中样式的问题

背景   在使用vue+element开发的时候由于项目需要,需要使用element日期选择器里面的支持多选以及跳选的日期选择器。   就是这货: code: &amp;lt;el-date-picker v-model=&quot;value13&quot; type=...

2018-10-31 18:09:18 936 1

原创 ES6(一):let和const

ES6(一):let和const 一、let 1. let基本用法   相当于var,但是又与var不同,因为let声明的变量只能在let所在的代码块中有效。   从以下两段代码以及对应的输出结果可以很明显的看出var与let的区别。 code: for (var i = 0; i &am...

2018-10-31 16:21:10 114 0

原创 手机H5页面(文字滚动、适配各种屏幕、jQuery ajax包含cookie)

###手机H5页面 ###文字滚动 使用li标签,通过改变margin-top实现向上滚动。 代码: js: carousel: function() { var items = $('.roll').find('li'); console...

2018-09-30 18:27:36 902 0

原创 使用js对在网页中打开Excel表格,并进行自动求和操作。

js-Excel Js is used to operate Excel tables and realize automatic summation. 使用js对在网页中打开Excel表格,并进行自动求和操作。 ####使用的插件:js-xlsx ####代码地址:https://github....

2018-09-25 22:29:49 10156 2

原创 git中忽略指定文件

git忽略指定文件 使用git bash生成.gitignore 语句:touch .gitignore 在.gitignore中指定需要忽略的文件夹或者文件 文件夹(/文件夹名/) 文件(文件名)

2018-09-25 20:03:05 339 0

原创 实现斐波那契数列(js),以及复杂度降阶

实现斐波那契数列(js),以及复杂度降阶 背景——兔子数列 假设第1个月有1对刚诞生的兔子,第2个月进入成熟期,第3个月开始生育兔子,而1对成熟的兔子每个月会生1对兔子,兔子永远不会死去……那么,由1对兔子开始,12个月后会有多少对兔子呢? 问题分析: 我们拿新出生的1对小兔子...

2018-09-02 10:16:48 2359 0

原创 Datepicker日期选择器插件

Datepicker日期选择器插件 这个插件还是比较简单的,而且样式也比较漂亮,可以自定义选择年月日、年月日时分、年月、时间段选择等等。 效果预览: 这个插件是基于jQuery和bootstrap的。因此我们需要引入的文件有: bootstrap.min.css或bootst...

2018-08-07 14:23:45 6230 0

原创 表格按列方向上渲染数据

表格按列方向渲染数据 需求: 如图按两列渲染数据: 如果是一条数据和一个对应的值就不会出现问题。但是如果某一个数据的值有多个,并且需要显示在不同的行的话就会有问题。问题是:会循环出多个td在一行中。 解决方案1 &amp;lt;tr&amp;gt; &...

2018-08-07 14:18:30 3646 0

提示
确定要删除当前文章?
取消 删除