- 博客(131)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 前端工程化实践三——利用Git hooks实现持续集成
目录1 发布前检查的相关知识1.1 持续集成的由来1.2 前端持续集成2 Git hooks的基本用法3 ESlint的基本用法3.1 ESlint安装和简单使用4 ESlint API5 使用无头浏览器检查DOM5.1 目前自动化测试中检查DOM的几种方式5.2 Puppeteer6 总结1 发布前检查的相关知识1.1 持续集成的由来持续集成最早是在客户端软件开发中提出的一种软件集成模式，有两个关键点：daily build和BVT(build verification test),BVT就是对bu
2021-08-01 21:28:29
427
原创 前端工程化实践二——实现一个项目发布系统
1 发布系统1.1 实现一个线上Web服务1.1.1 发布系统的组成线上服务系统：Web服务器发布系统：用于将项目发布到线上服务系统中发布工具：和发布系统相连接的发布工具1.1.2 初始化Server找一台服务器（可以是真实的或者利用虚拟机代替）依次安装上node,npm,express等环境1.1.2 利用Express框架编写服务器初始化express项目: npx express-generator安装依赖:npm install将项目代码远程拷贝到server，然后执行n
2021-07-25 23:54:15
669
2
原创 前端训练营学习笔记——工程化实践一：创建自己的脚手架工具
目录0 引言1 什么是工程化2 初始化与构建2.1 初始化工具Yeoman2.2 利用yeoman创建脚手架的简单用法2.2.1 通过yeoman进行命令行交互2.2.2 通过yeoman进行HTML模板填充2.2.3 通过yeoman管理依赖2.3 webpack基本知识2.3.1 webpack的设计初衷和基本理解2.3.2 webpack安装使用的两种方式2.3.3 webpack的基础概念2.4 babel基本知识2.4.1 babel的作用2.4.2 babel安装和使用2.4.3 在webpac
2021-07-19 00:11:35
394
3
原创 前端训练营学习笔记——组件化实战3：将动画和手势库应用到轮播图组件及为组件增加更多属性
文章目录1 手势动画应用1.1 将轮播图组件中手动轮播实现替换成通过手势组件实现1.2 将轮播图中自动轮播实现替换成通过动画组件实现1.3 将自动轮播和手动轮播利用时间线结合起来2 为组件添加更多属性3 给组件加入children机制3.1 内容型children3.2 模板型children4 总结1 手势动画应用1.1 将轮播图组件中手动轮播实现替换成通过手势组件实现 // 手动控制轮播 this.root.addEventListener("start", (event)=>
2021-06-25 22:34:23
185
1
原创 前端训练营学习笔记——组件化实战2：设计动画和手势库
目录1 动画1.1 动画分类和实现方式1.1.1 动画分类1.1.2 动画的实现方式1.2 时间线1.2 设计时间线的更新1.3 给时间线添加暂停和启动功能1.4 完善其它功能1.5 时间线部分代码1.6 动画部分代码2 手势2.1 手势的基本知识2.2 实现鼠标和触摸操作2.3 实现手势的逻辑2.4 处理鼠标事件2.5 派发事件2.6 实现一个Flick事件2.7 手势库的封装3 小结上一篇博客《组件化实战1：组件知识和基础轮播组件》介绍的轮播组件虽然有两个功能，但无法集成到一起，也存在一些小问题的，
2021-06-23 22:42:26
178
3
原创 前端训练营学习笔记——组件化实战1：组件知识和基础轮播组件
1 组件化1.1. 组件的基本知识前端两大重点内容组件化：解决复用问题架构模式：如MVC、MVVM等，解决前端和数据逻辑层的交互问题组件的理解组件可以看作特殊的对象和模块，它和UI是强相关的，是可复用的界面功能模块。它除了具有对象的property,method,inherit之外，还有attribute,state,children,event等，下图描述了组件组成部分间的关系Attribute vs PropertyAttribute强调描述性Property强调从属关系
2021-06-22 22:03:51
271
1
原创 前端训练营学习笔记——CSS概览和CSS选择器
目录1 CSS总论1.1 CSS语法的研究1.2 @规则的研究1.3 CSS规则的结构1.4 利用爬虫收集标准2 CSS选择器2.1 选择器语法2.2 选择器的优先级2.3 伪类2.4 伪元素1 CSS总论1.1 CSS语法的研究建立知识体系，比较好的方法是找到一个权威的标准作为线索去研究，如果是语言的知识体系，可以将语法作为建立知识体系的线索。CSS的标准比较散乱，相对完整的标准是CSS2.1，它规定了CSS的基本语法结构：@charset@importrules@media@pag
2021-05-30 21:01:52
256
原创 前端训练营学习笔记——CSS排版、动画和渲染
1 CSS排版1.1 盒标签、元素和盒的辨析标签Tag：源代码层面，HTML代码中可以书写开始、结束和自封闭标签元素Element：语义层面，一对起止标签表示一个元素，DOM中存储的是元素和其它类型（如文本）的节点，CSS选择器选中的是元素盒box：表现层面，CSS选中的元素在排版时可能产生多个盒，排版和渲染的基本单位是盒盒模型marginborder-boxborderpaddingcontent-boxcontentbox-sizing: border-box
2021-05-23 11:57:01
221
原创 浏览器工作原理——动手实现一个toy-browser（三）：排版和渲染
1 浏览器工作原理——排版生成带位置的DOM1.1 根据浏览器属性进行排版1.1.1 css的几代布局演变传统布局正常流float浮动position定位flex弹性布局grid网格布局1.1.2 flex网格布局相关属性flex-direction: row(水平排布)Main（排版时元素的延伸方向）: width, x, left, rightCross: height, y, top, bottomflex-direction: column（垂直排布）
2021-05-11 23:09:23
352
原创 浏览器工作原理——动手实现一个toy-browser（二）:生成DOM树和计算CSS
接上一篇博客浏览器工作原理——动手实现一个toy-browser（一），本篇主要介绍浏览器工作流程的HTML解析和CSS计算环节。文章目录1 浏览器工作原理——解析HTML生成DOM树1.1 HTML parser模块的文件拆分1.2 用FSM实现HTML的分析1.3 解析标签1.4 创建元素1.5 处理属性1.6 用Token构建DOM树1.7 将文本节点加到DOM树2 浏览器工作原理——CSS计算2.1 收集CSS规则2.2 添加CSS计算调用2.3 获取父元素2.4 选择器与元素匹配2.5 计算选择
2021-05-09 21:37:49
369
原创 浏览器工作原理——动手实现一个toy-browser（一）：解析响应
0 前言本文是参加极客时间前端训练营的练习项目toy-browser的学习笔记整理，目的是为了记录所学，通过输出文章进行梳理回顾，也希望对浏览器工作原理和简单实现有兴趣的朋友有所帮助。1 浏览器工作原理概述熟悉浏览器工作原理的意义：让我们知道浏览器是如何一步步将一个URL转换成我们看到的网页图片的，对涉及浏览器的一些术语（重绘、重排）和CSS的某些布局和渲染特性的理解有帮助浏览器的主要作用就是将请求的网址转换为网页图片，按照顺序大致可分为以下几个阶段：首先浏览器将用户输入的URL作为请求依据HT
2021-05-09 10:31:38
739
原创 动态规划概念、特点、经典例题和于其它算法思想的比较
目录1.动态规划概念2.动态规划适用问题的特点2.1 最优子结构2.2 重复子问题2.3 无后效性3. 动态规划的例子3.1 简单例子——Fibonacci数列3.2 经典例子——背包问题4 动态规划解题思路和方法5 动态规划和贪心、回溯、分治算法的比较5.1 动态规划5.2 贪心5.3 回溯5.4 分治1.动态规划概念动态规划（Dynamic Programming,DP）是通过把原问题分解成相对简单的子问题的方式来解决复杂问题的方法。它的基本思想是将待求解问题分解成不同部分（即子问题），然后依据子问
2021-04-05 15:07:22
6328
原创 HTML4.01规定的所有文本实体
文本实体是可以直接书写在HTML中用以显示特殊字符的字符串，例如&表示&。访问http://www.w3.org/TR/html4/strict.dtd可以在页面中找到3个后缀名为.ent的文件：HTMLlat1.ent,HTMLsymbol.ent和HTMLspecial.ent，分别访问三个文件即可得到相关的文本实体及对应编码（共252个），现整理如下（通过https://www.w3school.com.cn/tags/html_ref_entities.html和[http
2021-03-23 00:00:18
222
原创 git push报错unable to resolve reference ‘refs/remotes/origin/main‘: reference broken
原因： 引用文件损坏解决方法：将git项目根目录的.git文件夹中对应路径refs/remotes/origin/main的文件删除重新git pull远程仓库的代码即可参考：https://my.oschina.net/u/4273264/blog/4296434
2021-03-21 18:53:35
997
1
原创 JS数据类型检测的坑和通用数据类型检测方法
目录1 前言2 四种数据类型检测方法介绍2.1 typeof的坑及原理2.2 instanceof的坑及原理2.3 constructor的坑及原理2.4 Object.prototype.toString.call()3 利用typeof和Object.prototype.toString封装自己的通用数据类型检测方法4 总结1 前言提起JS的数据类型检测，大多数搞前端的朋友都知道有typeof和instanceof两个关键字可以用，其实还有另外2个方法constructor和Object.proto
2021-03-18 21:07:50
246
原创 jsonp跨域请求用法
引言熟悉web的朋友应该都知道由于浏览器的同源策略，一个网站是不能直接使用另一个网站的数据的，但有时我们又需要在网页中请求另一网站的数据，这就需要用到跨域请求的技术。笔者知道的几种常用跨域请求技术包括跨域资源共享（CORS）和JSONP。跨域资源共享的思路是在跨域请求中添加Origin头指明请求来源，而服务器在响应中添加“Acess-Control-Allow-Origin”字段，指明允许跨域访问的非同源网站，详细原理可以参考跨域请求及其解决方案。JSONP是JSON with padding的简写，其
2020-11-22 17:21:17
230
1
原创 华为Web前端全栈成长计划第三阶段笔记——Vue基础
文章目录1 Vue核心1.1 Vue的基本认识1.1.1 Vue是什么？1.1.2 Vue的特点1.1.3 与其它前端JS框架的关系1.1.4 Vue扩展插件1.2 Vue的基本使用1.2.1 像引入js库一样引入Vue.js1.2.2 helloworld示例1.2.3 理解MVVM模式1.3 模板语法1.3.1 模板的理解1.3.2 双大括号表达式1.3.3 指令1：v-bind 强制绑定解析表达式1.3.4 指令2：v-on 绑定事件监听1.3.5 指令3：v-model 在表单控件或者组件上创建双向
2020-11-08 23:25:45
580
原创 华为Web前端全栈成长计划第二阶段笔记——JS基础语法
1 数据类型1.1 初识JS什么是JS?JS是用于网页开发实现网页动态交互的高级脚本语言，原名Livescript（后面为了蹭Java热度，改名为JavaScript)，由Netscape公司发明，后交由Mozilla基金会(MDN)维护。JS的标准是ECMAScript,目前普遍使用的版本是ECMAScript5.1(ES5),最新版本是ES6（2015年发布）JS的执行原理由浏览器的JS引擎逐行读取JS代码解释执行，读取一行执行一行JS的三大组成部分ECMAScript
2020-10-19 20:25:41
264
原创 CSS三栏布局几种常用方案
双飞翼布局是比较常见的一种网页布局方式，其基本要求是分左中右三栏，左右两栏等宽，中间栏宽度自适应，大致效果如下图所示。为了便于中间包含内容的div优先加载，在布局时将中div放在最前面，html部分代码如下 <div class="layout"> <div class="center">cneter</div> <div class="left">left</div> <div class="right">
2020-10-18 22:05:41
320
原创 华为Web前端全栈成长计划第二阶段笔记——JS函数
课程连接：【WEB前端全栈成长计划-二阶段正式开启】0基础前端开发者养成记，课程免费参与有奖！课程质量还是不错的，理论与实践结合，沿着HTML/CSS-》JS、Ajax-》Node.js、VUE的路线学习，有考核还有专门的学习社群，安利一下~文章目录1 函数1.1 JS参数传递形式1.2 函数形参与实参个数不匹配问题1.3 函数返回值1.4 arguments的使用1.5 函数的两种声明方式2 JS的作用域和作用域链2.1 什么是JS的作用域？2.2 JS作用域划分3 JS的预解析3.1 js引擎运行j
2020-08-02 11:42:54
224
原创 学习Web开发-JS笔记1（JavaScript第一步）
目录1 什么是JavaScript（JS）?2 JS能做什么3 JS在页面上做了什么3.1 JS的执行顺序3.2 引用JS代码的方法3.2.1 内部引用3.3.2 外部引用3.3 脚本调用策略3.3.1 async异步属性3.3.2 defer属性4 JS代码调试5 JS变量5.1 var（旧）和let（新）关键字区别5.2 五种基本类型6 JS字符串6.1 与数字的互转6.1.1 数字->字符串6.1.2 字符串->数字6.2 一些常用的字符串方法6.2.1 在字符串中查找并提取子字符串6.2
2020-06-20 16:56:44
252
1
原创 设计模式学习笔记1-设计模式概念
设计模式（Design Pattern)什么是设计模式？设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案，代表了最佳实践使用设计模式的目的可重用代码让代码更容易被他人理解保证代码的可靠性设计模式的由来GOF四人帮合著的《设计模式——可复用的面向对象软件设计元素》主要基于的面向对象设计原则对接口编程而非对实现编程优先使用对象组合而非继承设计模式的两个主要...
2020-04-03 22:38:52
257
原创 Web入门学习笔记1——建立第一个网站
写在前面的话参加工作后因为工作需要，博主暂时不搞计算机视觉和深度学习，转向Web开发了。这篇博客是学习Web开发的第一篇博客，记录下自己设计的第一个网站blateyang.github.io的过程，以后会不定时进行更新。以下是网站的截图:一、安装基础软件需要的基础软件主要有：代码编辑器本人倾向使用代码编辑器VSCode进行编辑，界面简洁美观，具有自动缩进和自动补全等功能，当然浏览器本...
2020-02-02 23:16:45
526
原创 中缀表达式求值并转换逆波兰表达式
算术表达式的三种表示方式中缀表达式：运算符位于与其相关的操作数中间，如(1+2)*(3-4)前缀表达式（波兰式）：运算符位于与其相关的操作数前面，如* + 1 2 - 3 4后缀表达式（逆波兰式）：运算符位于与其相关的操作数后面，如1 2 + 3 4 - *表达式求值思路基本思路：栈+线性扫描（当前操作符比栈顶的操作符优先级低，则进行一次实际的运算）中缀表达式求值的C代码实现思路...
2019-09-08 22:55:09
1224
原创 SourceInsight4.0自定义编译命令
Source Inside(SI)是一款面向项目开发的程序编辑器和代码浏览器，它提供了一个视图将分散在各个地方的代码汇合在一起形成一个虚拟的整体，供开发者方便地阅读和编辑。关于其使用介绍可以参看链接【工利其器】必会工具之（一）Source Insight篇SourceInsight4.0破解方法直接参考链接，亲测可用（2019/8/23）Source Insight 4.x完美激活破解安装图...
2019-08-24 21:51:00
3939
原创 计算机网络中速率(date rate)和带宽的区别
谢希仁的《计算机网络》中对于速率和带宽的介绍如下：速率：数据的传送速率，也称数据率或比特率，单位是bit/s。网络的速率往往指的是额定速率或标称速率（理想速率）。带宽：在计算机网络中带宽用来表示网络中某通道传送数据的能力，网络带宽指在单位时间内网络中的某信道所能通过的“最高数据率”，单位也是bit/s。从上面的介绍来看，额定速率貌似和网络带宽描述的是同一个东西。通过到网上查阅资料，根据知乎上...
2019-07-31 23:31:41
26576
1
原创 改善记忆力的几个习惯和动作
几个习惯：运动方面（由室内到室外）冥想（提升专注力、调节情绪、改善睡眠）晒太阳（阳光能促进神经生长因子，使神经纤维生长，多晒太阳还能抗抑郁）坚持每天跑步15分钟以上（实验证明长期坚持跑步有助于提高长短期记忆力，因有氧运动会促进肌肉分泌一种蛋白分子，其会促进海马体分泌神经营养因子，跑步还有很多其它好处，如减肥、提高免疫力、抗抑郁等）主动和认识的人打招呼（打招呼时需要记住对方的名字和相貌）...
2019-06-17 16:25:51
530
原创 python列表乘法使用注意
一句话，对Python列表使用乘法，对于不可变对象（如数字、字符串）而言是复制值，但对可变对象（如列表、字典）而言则是复制引用，因此对于包含可变对象的列表切莫使用列表乘法，可使用列表生成式代替。简单例子见下图。详细参见小心python的list乘法...
2019-05-13 19:03:10
6174
原创 Win10下VSCode编译.cpp文件报错：ld.exe: can not open file ...xxx.exe:permission denied collect2.exe error
编译cpp文件时报错:ld.exe: can not open file ...xxx.exe:permission denied collect2.exe error ld returned 1 exit status原因：代码当前目录（包括子目录）下有同名的.exe文件，会报此错误，只要把名字改一下就行了...
2019-05-11 21:19:36
5663
2
原创 多态及C++中的多态技术
多态性是面向对象编程中很重要的一个特征，简单理解就是“一个事物，多种形态”。谭浩强的《C++面向对象程序设计》中对多态性的一般性表述是：向不同对象发送同一消息（调用函数），不同对象会产生不同的行为（即不同的实现）C++中，将多态分为两类，通过指向基类的指针或引用调用虚函数对应的是运行时多态，通过调用重载函数或模板函数对应的是编译时多态。不过，关于重载是否属于多态有两种说法：说法1重载...
2019-05-10 09:05:38
514
原创 C++中虚函数的一点笔记
为什么C++中的静态成员函数不能声明为虚函数？静态成员函数为类所有，其被调用时没有this指针，而虚函数必须通过this指针才能调用，因此静态成员函数不能声明为虚函数更详细的解释可参考https://blog.csdn.net/shltsh/article/details/45999801和https://blog.csdn.net/wyc12306/article/details/6894...
2019-04-27 22:32:19
241
原创 python2和python3 通过import导入模块和包的区别
python2默认是按照相对路径导入模块和包，python3默认则是按照绝对路径导入示例：假设项目目录结构如下A|---test.py|---A1 |---__init__.py |---a1.pytest.py内容如下import A1A1.a1.foo()a1.py内容如下def foo(): pass若用python2跑test.py，在A1的__ini...
2019-04-24 14:42:27
10697
转载 cin.clear()，cin.sync()，cin.ignore()用法
cin.clear()：用来将cin的所有状态值重设为有效值cin.sync()：用来清除输入缓冲区cin.ignore(n, ch)：忽略输入缓冲区中以’ch’为结束符的那部分内容或指定长度(n)的内容注：先要用cin.clear()重置状态值后，后面两个函数才能起作用且cin.ignore()比cin.sync()更灵活以下内容转载自http://blog.sina.com.cn/...
2019-04-21 21:50:39
854
原创 leetcode笔记2——罗马数字和整数的相互转换
1.相关题目：#13 罗马数字转整数 简单难度#12 整数转罗马数字 中等难度其中13题描述如下罗马数字包含以下七种字符: I， V， X， L，C，D 和 M。字符 数值I 1V 5X 10L 50C 100D 5...
2019-03-11 16:10:52
331
原创 函数重载与函数模板的比较
函数重载与函数模板是两个有些相似的概念，它们使用的函数名都一样，但用处不同。下面对两者进行简要介绍并指出它们的区别和联系。函数重载(overloaded)即定义函数名相同而形参列表（形参个数或形参类别）不同的多个函数，这些函数被称为重载函数，重载函数通常执行的操作非常类似，如打印不同的输入对象。调用函数时编译器根据实参的类型确定调用哪个重载函数。void print(const char *...
2019-03-06 20:10:14
4552
原创 extern关键字的理解
1. 基本含义:声明外部对象声明对象是一个外部对象（变量或函数），标识其定义在别的文件中。会被多个文件使用的对象通常用extern声明于头文件中。用法eg.extern int var;2. extern “C”：链接指示声明对象是一个外部C语言的对象，告诉编译器在编译该对象时按照指定的C语言编译方式进行编译用法：单语句链接指示eg.extern "C" int strcmp(c...
2019-02-21 12:55:29
603
原创 leetcode笔记1—— “N数之和”类题
leetcode笔记1—— “N数之和”类题相关题目#1 两数之和#15 三数之和#18 四数之和以三数之和为例：给定一个包含 n 个整数的数组 nums，判断 nums 中是否存在三个元素 a，b，c ，使得 a + b + c = 0 ？找出所有满足条件且不重复的三元组。示例：例如, 给定数组 nums = [-1, 0, 1, 2, -1, -4]，满足要求的三元组集合为...
2019-02-01 22:52:59
1127
原创 Windows PowerShell中无法将"python"项识别为cmdlet、函数、脚本文件或可运行程序的名称
原因：PowerShell找不到python解释器的路径解决办法：以管理员权限打开PowerShell，将python.exe所在的路径加到系统环境变量Path中，命令如下：[Environment]::SetEnvironmentVariable("Path", "$env:Path;C:\Program Files\Anaconda3")上面的“C:\Program Files\An...
2019-01-13 15:49:34
26259
4
原创 （windows+xrdp+ubuntu16.04）远程服务器出错：“password failed error - problem connecting“
这个问题貌似是2019年1月10日xrdp进行了系统自动更新后导致的，有两个解决办法：方法1：对xrdp进行降级重新安装sudo apt-get install xrdp=0.6.1-2方法2：将下面两行参数设置追加到/etc/xrdp/sesman.ini的[Xvnc]配置中param8=-SecurityTypesparam9=None采取以上方法后重启xrdp服务应该就行了sud...
2019-01-11 13:04:49
3948
2
原创 使用Mendeley和CvtCNKI进行中英文参考文献引用管理（含硕博论文）
在写学术论文和学位论文的时候，往往需要引用大量参考文献，以前博主的做法都是边写论文边把相关参考文献以word批注的形式列在侧边栏（因为后面修改的时候可能还会有所变动），等论文定稿之后再手动对引用的相关参考文献编号并按序列在论文末尾，后面发现这种做法在要引用的参考文献比较多的时候比较麻烦，然后上网搜索才知道有文献引用管理软件这种能自动生成参考文献引用的利器，比如最著名的EndNote，还有免费好用的...
2018-12-22 21:42:07
8619
4
计算机视觉与机器学习综述
2015-09-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人