- 博客(56)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 前端工程化--Vue-CLI自动生成页面
每次新建页面这样的机械化步骤我们完全可以用代码帮我们执行，更进一步，对于一些简单的页面，我们甚至可以一键生成页面，包括从后端请求数据等操作。
2020-04-09 18:29:50
3724
4
原创 async/await 的错误捕获
详细介绍了几种常用的捕获async/await错误的方式，最后以error first的风格抽成一个统一的函数。
2020-03-19 08:29:34
7164
原创 前端机器学习--识别人脸在脸颊上画草莓
要在用户上传的人脸上画草莓，会面临几个问题： 1. 在哪儿画？2. 画多大？3. 草莓的角度和脸的角度是否一致？基于这些问题，就不得不使用机器学习来解决了！
2020-03-13 10:03:21
96640
原创 在 Chrome DevTools 中调试 JavaScript
介绍几种常用的Chrome DevTools断点调试方法1. 代码行断点2. DOM更新断点4. XHR/Fetch断点5. 事件侦听器断点6. 异常断点7. 函数断点
2020-03-13 09:27:36
9714
6
原创 划水神器--在浏览器地址栏和标签页title里面玩俄罗斯方块
划水神器–在浏览器地址栏和标签页title里面玩俄罗斯方块效果如图：在线体验1. 原理URL地址栏中玩：使用window.location.hash动态修改页面的hash值标签页中玩：使用document.title动态修改页面的title使用一个定时器，产生方块下落的效果，监听键盘按键事件，修改方块形态、位置2. 依赖的库为了开发方便，可以使用这两个库：tetris-e...
2019-11-18 14:53:22
652
原创 Webkit底层原理(5)--CSS解释器和样式布局
从整个网页的加载和渲染过程来看，CSS解释器和规则匹配处于DOM树建立之后，RenderObject树（下一篇文章会介绍）建立之前，CSS解释器解释后的结果会保存起来，然后RenderObject树基于该结果进行规则匹配和布局计算。当网页有用户交互或者动画等动作的时候，通过CSSOM技术，JavaScript代码同样可以很方便的修改CSS样式，Webkit此时需要重新解释样式并重复以上这一过程。...
2019-10-06 11:28:24
447
原创 Webkit底层原理(4)--DOM事件机制和Shadow DOM
一、DOM事件机制1. 事件的工作过程事件在工作过程中使用两个主体，第一个是事件（event），第二个是事件目标（EventTarget）。每个事件都有属性来标记该事件的事件目标。当事件到达事件目标的时候，在这个目标上注册的监听者（EventListeners）都会被触发调用，当然这些监听者的调用顺序是不固定的，所以不能依赖监听者注册的顺序来决定你的代码逻辑。事件处理最重要的部分就是事件捕获...
2019-10-05 18:15:43
522
原创 Webkit底层原理(3)--HTML解释器
1. 解释过程HTML解释器的工作就是将从网络或本地磁盘获取的HTML网页和资源从字节流解释成DOM树结构。如下图：图中将这一过程描述得很清晰：首先是字节流，经过解码之后是字符流，然后通过词法分析器会被解释成词语（Tokens），之后经过语法分析器构建成节点，最后这些节点被组成一颗DOM树。2. 词法分析在进行词法分析之前，解释器首先要做的就是检查该网页内容使用的编码格式，以便后面使用合...
2019-10-04 14:58:18
856
原创 Webkit底层原理(2)--资源加载和网络栈
资源加载和网络栈使用网络栈下载网页和网页中的资源是渲染引擎工作的第一步，也是非常耗时间的一步。一、Webkit资源加载机制1. 资源网页本身就是一种资源，例如图片、视频等。HTML支持的资源主要有以下类型：HTML：HTML元素；JavaScript：JavaScript代码，可以内嵌在HTML文件中，也可以单独以文件形式存在；CSS：层叠样式表，可以内嵌在HTML文件中，也可以...
2019-10-03 13:52:52
269
原创 Webkit底层原理(1)--Webkit架构和模块
一、Webkit架构Webkit的一个显著的特征就是它支持不同的浏览器，因为不同浏览器的需求不同，所以在Webkit中，一些代码可以共享，但是另一部分是不同的，这些不同的部分称为Webkit移植（Ports）。Webkit的整体结构如图：图中最下面是操作系统，Webkit可以在不同的操作系统上工作。不同浏览器可能会依赖不同的操作系统，同一个浏览器使用的Webkit也可能依赖不同的操作系统，例...
2019-10-02 16:21:52
1132
1
原创 WEB性能(7)--XMLHttpRequest
一、XMLHttpRequestXMLHttpRequest（XHR）是浏览器层面的API，可以让开发人员通过JavaScript实现数据传输。XHR是在Internet Explorer 5 中首次亮相的，后来成为AJAX（Asynchronous JavaScript and XML）革命核心技术，我今天几乎所有Web应用必不可少的基本构件。XHR诞生以前，网页要获取客户端和服务器的任何状...
2019-10-02 11:03:38
305
原创 WEB性能(6)--经典最佳实践
经典最佳实践1. 减少DNS查找每一次主机名解析都需要一次网络往返，从而增加请求的延迟时间，同时还会阻塞后续的请求。2. 重用TCP连接尽可能使用持久连接，以消除TCP握手和慢启动延迟。3. 减少HTTP重定向HTTP重定向很费时间，特别是不同域名之间的重定向，更加费时；这里面既有额外的DNS查询、TCP握手，还有其他延迟。最好的重定向次数为零。4. 使用CDN（内容分发服务）把数...
2019-10-02 11:00:54
238
原创 WEB性能(5)--HTTP 2.0介绍
一、HTTP 2.0介绍HTTP2.0可以让我们的应用更快、更简单、更健壮！HTTP2.0把很多以前我们针对HTTP1.1想出来的歪招都一笔勾销，把解决那些问题的方案都内置在了传输层中。HTTP2.0的目的就是通过支持请求与相应的多路复用来减少延迟，通过压缩HTTP首部字段将协议开销降至最低，同时增加对请求优先级的服务器推送的支持。HTTP2.0不会改动HTTP的语义。HTTP方法、状态、U...
2019-09-22 10:38:54
413
原创 WEB性能(4)--HTTP 1.x
一、HTTP 1.x介绍HTTP 1.0的优化策略非常简单，就一句话：升级到HTTP 1.1！改进HTTP的性能是HTTP 1.1工作组的重要目标，后来HTTP1.1页引入了大量增强性能的特性：持久化连接以支持连接重用；分块传输编码以支持流式相应；请求管道以支持并行请求处理；字节服务以支持基于范围的资源请求；改进的更好的缓存机制。在《高性能网站建设指南》中有14条规则，其中有6...
2019-09-17 22:11:44
214
原创 WEB性能(3)--TLS
一、传输层安全（TLS）介绍SSL（Secure Sockets Layer，安全套接层）协议最初是网景公司为了保障网上交易安全而开发的，SSL协议在直接位于TCP上一层的应用层被实现。SSL不会影响上层协议（HTTP），但能够保证上层协议的网络通信安全。IETF后来在标准化SSL协议时，将其改名为TLS（Transport Layer Security，传输层安全）。TLS1.0和SSL3....
2019-09-04 21:36:50
609
原创 WEB性能(2)--UDP
一、UDP介绍1980年8月，紧随TCP/IP之后，UDP（User Datagram Protocol，用户数据报协议）被加入了核心网络协议套件。UDP的主要功能和亮点并不在于它引入了什么特性，而在于它忽略的那些特性。UDP一般称为无（NULL）协议，RFC768描述了它的运作机制，全文完全可以写在一张餐巾纸上！数据报：一个完整、独立的数据实体，携带者从源节点到目的节点的足够信息，对这些节...
2019-09-04 08:12:08
1360
原创 WEB性能(1)--TCP
一、TCP介绍因特网有两个核心协议：IP和TCP。IP，即Internet Protocol（因特网协议），负责联网主机之间的路由选择和寻址；TCP，即Transmission Control Protocol（传输控制协议），负责在不可靠的传输信道上提供可靠传输的抽象层。TCP向应用层隐藏了大多数网络通信的负责细节，比如丢包重发、按序发送、拥塞控制、数据完整等等。采用TCP数据流可以确保发送...
2019-09-03 12:53:21
375
原创 HTTPS详细介绍
一、为什么要HTTPSHTTP协议因为其轻、小、快、简单，所以在全世界普及开来，各种应用都离不开它。但是随着业务复杂度的提高，HTTP的这些优点逐渐成为了短板。所以就开始各种打补丁，比如因为HTTP是无状态的协议，所以为了管理状态而诞生的Cookie。这篇文章要说的是其中一个为了安全而诞生的超级补丁SSL（HTTPS）。1. HTTP在安全方面哪儿不行窃听HTTP使用明文进行传输，因此...
2019-07-12 15:07:18
2250
1
原创 浏览器缓存详细介绍
一、整个流程过一遍 我们假设浏览器在请求一张图片：浏览器会检查这张图片的HTTP头部字段，看看这张图片是不是满足强缓存，如果满足的话，浏览器会直接从本地缓存里面将图片取出来，不会向服务器发送请求。如果第一步的强缓存没有满足的话，浏览器会向服务器发送一个请求，服务器会检查该图片的HTTP头部字段，看看是不是满足协商缓存，如果满足的话，服务器会返回一个没有相应体，只有响应...
2019-05-29 19:13:41
332
原创 Vuex详细介绍
1. 什么是VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。这是官网的说法，其实很简单：就是一个加强版的data！在单页应用中会有一个data函数，里面就存放了当前页面的一些数据。比如：<template> <div> <p>{{num}}</p> </div></te...
2019-05-22 18:39:05
148
原创 使用Vue做一个可自动拼图的拼图小游戏（二）
背景以及最终效果在上一篇文章中我们已经写完了一个可以正常玩的拼图小游戏，但是这还没有结束，我们还要接着试一下让拼图游戏可以自己完成拼图。最终效果如下图：本部分是这篇文章的第二部分，主要讲的是实现自动拼图的功能实现。原理这里开始就涉及到一些算法的知识了，不过不难。拼图游戏其实就是：N数码问题，而我写的是3*3的，所以就是八数码问题的求解。总结一下，我们需要做的事包括以下几个：判断八...
2019-03-28 15:26:55
8882
原创 使用Vue做一个可自动拼图的拼图小游戏（一）
背景以及最终效果随着几个项目的提测，也闲下来了，恰好玩了一把拼图游戏，于是突发奇想打算自己写一个试试。最终效果如下图：实现的功能有：普通拼图的功能自动拼图本部分是这篇文章的第一部分，主要讲的是实现普通拼图的功能。原理相信拼图的玩法大家一点都不陌生，就是点击一个非空的块，如果它的周围有空的块，被点击的块就会往空块的方向移动。如果最后的排列是[1,2,3,4,5,6,7,8,0]...
2019-03-27 16:06:47
11309
原创 给女朋友讲HTTP协议 | 网络基础
为了更好的理解HTTP，我们需要花点时间了解一下TCP/IP协议族。通常使用的网络是在TCP/IP协议族的基础上运作的。而HTTP属于它内部的一个子集。TCP/IP协议族计算机与网络设备要相互通信，双方就必须基于相同的方法。比如，如何探测到通信目标、由哪一边先发起通信、使用哪种语言进行通信、怎样结束通信等规则都需要事先确定。不同的硬件、操作系统之间的通信，所有的这一切都需要一种规则。而我们就...
2019-01-10 19:09:48
408
原创 各种密码学算法的GUI编程实现（DES、AES、Present、扩展欧几里得算法、素性检测）
各种密码学算法的 C# GUI编程实现，包含：DES、AES、Present轻量级密码算法、扩展欧几里得算法、素性检测。
2018-12-29 12:32:06
13452
2
原创 Vue组件-爬取页面表格中的数据并保存为csv文件
背景实际开发过程中需要将前端以表格形式展示的数据保存为csv格式的文件，由于数据涉及到的种类比较多，格式化都是放在前端进行的，所以后端以接口下载的形式返回csv文件会比较麻烦，于是想着直接写个组件爬取页面中表格内的数据。开发框架：Vue+Webpack+Element-UI实现分析首先分析一下涉及到的知识点，其实涉及到的知识点也比较简单：获取页面节点信息获取页面数据了解csv...
2018-12-17 15:37:43
7655
1
原创 VUE回到顶部组件，使用requestAnimationFrame
这篇文章是18年就写的了，那时候element-ui还没有回到顶部组件，我就弄了一个，现在官网已经有了。想直接使用的话可以使用官网上的，但是官网的是使用setInterval写的，我就顺便改一下这篇文章，使用requestAnimationFrame弄一个
2018-12-14 17:18:43
9922
12
原创 Promise实现原生JS的Ajax请求（后端使用Node.js）
最近在学习ES6的相关知识，看完了Promise，于是打算用Promise实现一个原生JS的Ajax例子，顺便复习一下Node的相关知识。说搞就搞，先写后端项目目录结构后端使用的是Express框架，具体步骤如下：npm init初始化，这个就一直下一步就行了，需要注意的是项目文件夹名不能为中文。npm install express --save使用 npm 安装 e...
2018-11-30 15:04:13
598
原创 JavaScript中数组排序sort深入理解（Array.prototype.sort）
疑问最近在看算法书的时候看到C++中的sort方法，书中介绍是使用的快速排序。于是想起来自己天天都在写的JavaScript中的sort排序，它使用的是什么排序算法呢？各个浏览器使用的是同一种排序算法吗？带着问题，打开了ECMA官方规范ECMA 2015ECMA 2016ECMA 2017规范中并没有写明具体使用的排序算法，只是说了JavaScript的sort方法（Array.p...
2018-11-28 17:31:52
3664
原创 ES6（三）：变量的解构赋值
解构赋值语法是一个Javascript表达式，这使得可以将值从数组或属性从对象提取到不同的变量中，文中主要讲数组的解构赋值、对象的解构赋值、字符串的解构赋值、数值和布尔值的解构赋值以及函数参数的解构赋值数组的解构赋值基本用法ES6以前我们如果要定义三个变量的话需要这样做：codevar a = 1, b = 2, c = 3;console.log(a); // 1c...
2018-11-22 14:46:16
1862
原创 ES6（二）：Promise
ES6之前解决异步编程只能使用回调函数或事件，ES6中加入了 Promise，使得异步编程更加简洁直观和合理特点Promise是一个对象，具有以下两个特点：对象的状态不受外界影响状态一旦改变就不会再变使用方法基本使用ES6中规定，Promise对象是一个构造函数，于是我们就需要使用new关键字实例化：code：const promise = new Promise((reso...
2018-11-21 14:19:31
3467
原创 判断两个json是不是相等的
JavaScript判断两个json是不是相同的原理暴力的递归遍历对比，遇到不相等就return falsecode：let jsonObjA = { "Name": "MyName", "Company": "MyCompany", "Infos": [{ "Age": "100" }, {
2018-11-05 19:10:06
3195
原创 彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽完整实现
一、基于鼠标事件的拖拽原理——onmousedown、onmousemove、onmouseuponmousedown该事件会在鼠标按键被按下时触发支持该事件的HTML标签： &lt;a&gt;, &lt;address&gt;, &lt;area&gt;, &lt;b&gt;, &lt;bdo&gt;, &lt
2018-11-01 16:27:58
43858
4
原创 ElementUI的DatePicker多个日期选择器默认没有选中样式的问题
背景 在使用vue+element开发的时候由于项目需要，需要使用element日期选择器里面的支持多选以及跳选的日期选择器。 就是这货：code： &lt;el-date-picker v-model="value13" type="dates"&gt; &lt;/el-date-picker&gt; 它可以支持跳选，还是一个比较实用的日期选择器：
2018-10-31 18:09:18
2687
3
原创 ES6（一）：let和const
ES6（一）：let和const一、let1. let基本用法 相当于var,但是又与var不同，因为let声明的变量只能在let所在的代码块中有效。 从以下两段代码以及对应的输出结果可以很明显的看出var与let的区别。code：for (var i = 0; i &lt; 5; i++) { console.log(i);}console.log(i);resu...
2018-10-31 16:21:10
204
原创 手机H5页面（文字滚动、适配各种屏幕、jQuery ajax包含cookie）
###手机H5页面###文字滚动使用li标签，通过改变margin-top实现向上滚动。代码：js: carousel: function() { var items = $('.roll').find('li'); console.log(items); var $itemOne = items.eq(0); var margin_top = 0; ...
2018-09-30 18:27:36
1711
原创 使用js对在网页中打开Excel表格，并进行自动求和操作。
js-ExcelJs is used to operate Excel tables and realize automatic summation.使用js对在网页中打开Excel表格，并进行自动求和操作。####使用的插件：js-xlsx####代码地址：https://github.com/usecodelee/js-Excel####兼容性如图：###操作演示：初始页面：...
2018-09-25 22:29:49
12138
2
原创 git中忽略指定文件
git忽略指定文件使用git bash生成.gitignore语句：touch .gitignore在.gitignore中指定需要忽略的文件夹或者文件文件夹（/文件夹名/）文件（文件名）
2018-09-25 20:03:05
513
原创 实现斐波那契数列（js），以及复杂度降阶
实现斐波那契数列（js），以及复杂度降阶背景——兔子数列假设第1个月有1对刚诞生的兔子，第2个月进入成熟期，第3个月开始生育兔子，而1对成熟的兔子每个月会生1对兔子，兔子永远不会死去……那么，由1对兔子开始，12个月后会有多少对兔子呢？问题分析：我们拿新出生的1对小兔子分析，第1个月，小兔子a没有繁殖能力，所以还是1对。第2个月，小兔子a进入成熟期，仍然是1对。...
2018-09-02 10:16:48
3482
原创 Datepicker日期选择器插件
Datepicker日期选择器插件这个插件还是比较简单的，而且样式也比较漂亮，可以自定义选择年月日、年月日时分、年月、时间段选择等等。效果预览：这个插件是基于jQuery和bootstrap的。因此我们需要引入的文件有：bootstrap.min.css或bootstrap.cssbootstrap-datepicker.min.css或bootstrap-date...
2018-08-07 14:23:45
9361
原创 表格按列方向上渲染数据
表格按列方向渲染数据需求：如图按两列渲染数据： 如果是一条数据和一个对应的值就不会出现问题。但是如果某一个数据的值有多个，并且需要显示在不同的行的话就会有问题。问题是：会循环出多个td在一行中。解决方案1&lt;tr&gt; &lt;td&gt;m2&lt;/td&gt; &lt;td&gt; &lt;d
2018-08-07 14:18:30
4182
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人