front-end
2019-05-28 14:40:26 0 举报AI智能生成
2019 前端开发入门知识梳理 阅读顺序：右侧夯实基础，左侧注重实践
作者其他创作
大纲/内容
想要弄懂的问题/习得的能力
div 到底是什么含义？答：div 是块级无语义元素，span 是行内无语义元素
如何实现页面内与服务端交互？
XMLHttpRequest
如何做浏览器兼容性测试？
如何实现组件化？
如何实现页面自适应（根据不同的 device 产生不同的布局）？
flexbox 看起来是个不错的选择
如何实现模块化？
require? import?
坑
浏览器缓存=>代码未更新
solution
另一个缓存导致的例子
localhost:8000 和 localhost:8000/index.html 返回内容不同，清除浏览器缓存后，行为一致，why？
fetch
服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
tools
工程
npm
基本概念
package：必须包含 package.json
module：在 npm 的语境里，专指 node_module，可能是 package 也可能不是
scope：就是个 namespace
user
org
unscoped
registry
public
enterprise
scripts：自动化一些任务
阮一峰：npm scripts 使用指南
npm packages
(*) webpack：打包
react：UI 组件化
状态管理
mobx vs redux
UI 库
ant design
表单处理
(*) formik
facebook/create-react-app：react 项目工业级的 starter
javascript
(*) babel：在老环境中使用新语法
(*) eslint：语法规则和代码风格的检查工具
CSS
(*) sass：为 css 赋予一点新能力，增加可维护性、降低编写难度
front-end
html：结构和语义
元素
分类#1：
文档元信息
title
meta
对 SEO 非常重要
link
script
重要属性：async
内容可以通过 src 指定，也可以写在 <script> 标签内
属性：lang
语义相关内容
链接
属性：href
属性：title
属性：download
替换型元素
img
video
audio
表单
表格
分类#2：
内联元素(inline)
块级元素(block)
分类#3：
语义元素（semantic elements）：对可访问性、SEO 等非常重要
文本相关
em
strong
h1-h6
p
列表
ul
ol
描述列表
dl：description list
dt：description term
dd：description description
一个 dt 可以有多个 dd
引用
blockquote
q：inline quote
cite
abbr：缩略语
address：标记编写HTML文档的人的联系方式，而不是任何其他的内容
上标和下标
sup
sub
展示代码
code：代码
pre：保留空格
var：变量名
kbd：键盘输入
samp：计算机程序输出
页面结构
header
nav
main
article
section
div
aside：包含一些间接信息，与主内容相关（如：文章的作者简介、文章的导航）
footer
表象元素（presentational elements）：不推荐使用，被 css 替代
i
b
u
font
center
无语义元素：当找不到恰当的语义元素时使用
span
全集
HTML 元素参考
css：设计与布局
设计理念：一切皆盒子
语言
规则集
选择器组
选择器
simple
元素选择器（element selector）
类选择器（class selector）
可以用 . 串联多个类
ID 选择器
*：通用选择器，仅适合用于调试
属性（attribute）
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。
[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
[attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
[attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素。
伪选择器（pseudo selectors）
伪类（pseudo classes）
语法：单个冒号
用途：当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）
伪元素（pseudo elements）
语法：两个冒号
组合器和选择器组（combinators and selector list）
A B
A>B
A+B
A~B
声明块（declaration block）
声明
display: block;
@rule：非常像 C 语言的宏
嵌套语句：只有在特定条件匹配时才会应用到文档上
@media：只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容；
@supports：只有浏览器确实支持被测功能时才会应用该@-规则的内容；
@ducuments：只有当前页面匹配一些条件时才会应用该@-规则的内容。
单位
数值
长度和尺寸
font-size 默认：16px
绝对单位（absolute unit）
px
相对单位（relative unit）
em：1em 与当前元素的字体大小相同（注意：字体大小继承自父元素）
无单位值
百分比
颜色
keyword
十六进制：#ffffff
rgb
hsl
rgba：rgb 升级版，额外支持配置透明度
hsla：同上
opacity：不透明度
层叠与继承
层叠
重要性（Importance）
专用性（Specificity）
源代码次序（Source Order）
继承
inherit
initial
unset
revert
盒模型
注意：外边距有一个特别的行为被称作外边距塌陷（margin collapsing）：当两个框彼此接触时，它们的间距将取两个相邻外边界的最大值，而非两者的总和。
盒类型
block：独占一行，可设置宽高
inline：不独占，折行会断成两截，不可设置宽高
inline-block：不独占，折行不会断，可设置宽高
功能
绘制
文本
字体
chrome 最小字体大小：12px
盒子
背景
边界
阴影
交互
布局
（默认）正常流（normal flow）
弹性布局（flexbox）
网格布局（grid）
其他
浮动（float）
定位（position）
（默认）static：在正常流中的位置
relative：相对于 static 的位置
absolute：相对于 <html>（或最近的被定位的祖先元素）的位置
fixed：与 absolute 相似，区别在：相对于浏览器视口（viewport）
sticky：static 与 fixed 的混合体，非常适合用于固定位导航栏
其 sticky 的对象是最近的具有 scrolling 机制的祖先
CSS 表格
多列布局（Multi-Column）
各种效果实现的 cheatsheet
codepen
悬停提示：::after + absolute定位
negtive margin 用来合并相邻 border
float 布局和 clearfix 技巧（全 float 元素高度为 0）
javascript：交互
设计理念：一切皆对象，一切皆可储存在变量里
<script> 元素的位置
async：如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。
defer：如果脚本需要等待解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。
变量
变量声明
var
隐式变量提升（hoisting）
作用域：全局/函数
let
作用域：块级
const
作用域：同 let
作用域
全局
函数
类型系统
number
整数
浮点数
boolean
string
array
object
typeof 操作符
typeof(array) = 'object'
typeof(null) = 'object
条件/循环/函数
事件
定义事件处理函数的方式
事件属性
addEventListener/removeEventListener
事件执行机制
事件捕捉与冒泡（Event Bubbling）
现代浏览器统一使用：事件冒泡
利用该机制可实现将子元素的事件委托给父元素
事件对象
target：指向触发事件的元素的引用
preventDefault()：阻止默认行为
stopPropagation()：阻止事件在冒泡链上进一步扩散
对象
创建
对象声明语句
构造函数
new Object()
obj = Object.create(proto_obj)：以 proto_obj 作为 obj 的原型对象（即 __proto__）
原型链与继承（prototype）
方法一
2. Child.prototype = Object.create(Parent.prototype)，继承父类允许继承的方法
3. Child.prototype.constructor = Child，修改子类的构造函数指向自身，而非父类的构造函数
4. Child.prototype.override_func = function() {...}，重写从父类处继承的函数
异步
trigger
event-based-trigger
time-based-trigger：均在 main thread 运行
setTimeout()：一次性
setInterval()：周期性
requestAnimationFrame()
实现方式
传统：callback
promise
promise 术语
pending
resolved
fulfilled
rejected
链式：promise...then...catch
同时等待多个异步操作：Promise.all()
async/await
浏览器
实现原理
解析HTML
构建DOM树
计算CSS
渲染、合成和绘制
API
DOM
MDN：DOM 概述
获取元素引用
document.querySelector()
document.querySelectorAll()
document.getElementById()
document.getElementByTagName()
client-side-storage
图解
kv 存储
localStorage
sessionStorage
[TODO] NoSQL
IndexedDB
[TODO] service worker + Cache API
主要对象
0 条评论
下一页
