Web学习
文章平均质量分 93
Blateyang
硕士毕业于华南理工大学,目前主要从事Web开发方面的工作,平时很少看留言,有事请私信
展开
-
前端工程化实践三——利用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 · 475 阅读 · 0 评论 -
前端工程化实践二——实现一个项目发布系统
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 · 771 阅读 · 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 · 445 阅读 · 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 · 220 阅读 · 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 · 200 阅读 · 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 · 308 阅读 · 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 · 293 阅读 · 0 评论 -
前端训练营学习笔记——CSS排版、动画和渲染
1 CSS排版1.1 盒标签、元素和盒的辨析标签Tag:源代码层面,HTML代码中可以书写开始、结束和自封闭标签元素Element:语义层面,一对起止标签表示一个元素,DOM中存储的是元素和其它类型(如文本)的节点,CSS选择器选中的是元素盒box:表现层面,CSS选中的元素在排版时可能产生多个盒,排版和渲染的基本单位是盒盒模型marginborder-boxborderpaddingcontent-boxcontentbox-sizing: border-box原创 2021-05-23 11:57:01 · 281 阅读 · 0 评论 -
浏览器工作原理——动手实现一个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 · 402 阅读 · 0 评论 -
浏览器工作原理——动手实现一个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 · 427 阅读 · 0 评论 -
浏览器工作原理——动手实现一个toy-browser(一):解析响应
0 前言本文是参加极客时间前端训练营的练习项目toy-browser的学习笔记整理,目的是为了记录所学,通过输出文章进行梳理回顾,也希望对浏览器工作原理和简单实现有兴趣的朋友有所帮助。1 浏览器工作原理概述熟悉浏览器工作原理的意义:让我们知道浏览器是如何一步步将一个URL转换成我们看到的网页图片的,对涉及浏览器的一些术语(重绘、重排)和CSS的某些布局和渲染特性的理解有帮助浏览器的主要作用就是将请求的网址转换为网页图片,按照顺序大致可分为以下几个阶段:首先浏览器将用户输入的URL作为请求依据HT原创 2021-05-09 10:31:38 · 1099 阅读 · 0 评论 -
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 · 259 阅读 · 0 评论 -
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 · 314 阅读 · 0 评论 -
jsonp跨域请求用法
引言熟悉web的朋友应该都知道由于浏览器的同源策略,一个网站是不能直接使用另一个网站的数据的,但有时我们又需要在网页中请求另一网站的数据,这就需要用到跨域请求的技术。笔者知道的几种常用跨域请求技术包括跨域资源共享(CORS)和JSONP。跨域资源共享的思路是在跨域请求中添加Origin头指明请求来源,而服务器在响应中添加“Acess-Control-Allow-Origin”字段,指明允许跨域访问的非同源网站,详细原理可以参考跨域请求及其解决方案。JSONP是JSON with padding的简写,其原创 2020-11-22 17:21:17 · 261 阅读 · 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 · 678 阅读 · 0 评论 -
华为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 · 300 阅读 · 0 评论 -
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 · 357 阅读 · 0 评论 -
华为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 · 311 阅读 · 0 评论 -
Web入门学习笔记1——建立第一个网站
写在前面的话参加工作后因为工作需要,博主暂时不搞计算机视觉和深度学习,转向Web开发了。这篇博客是学习Web开发的第一篇博客,记录下自己设计的第一个网站blateyang.github.io的过程,以后会不定时进行更新。以下是网站的截图:一、安装基础软件需要的基础软件主要有:代码编辑器本人倾向使用代码编辑器VSCode进行编辑,界面简洁美观,具有自动缩进和自动补全等功能,当然浏览器本...原创 2020-02-02 23:16:45 · 572 阅读 · 0 评论