前端知识体系
2023-03-09 14:42:32 6 举报AI智能生成
登录查看完整内容
前端知识体系包括HTML、CSS和JavaScript等技术，是构建网页的基础。HTML负责网页结构，CSS负责网页样式，JavaScript负责网页交互。除此之外，前端工程师还需要掌握一些框架和库，如React、Vue等，以及版本控制工具Git等。前端开发需要不断学习新技术，以适应不断变化的市场需求。总之，前端知识体系是一个广泛而深入的领域，需要不断学习和实践才能掌握。
作者其他创作
大纲/内容
一个对象的 __proto__ 记录着自己的原型链，决定了自身的数据类型，改变 __proto__ 就等于改变对象的数据类型
函数的 prototype 不属于自身的原型链，它是创建子类的核心，决定了子类的数据类型，是连接子类原型链的桥梁。
在原型对象上定义方法和属性，是为了被子类继承和使用
原型及原型链
IE:4+
返回当前获取焦点元素
document.activeElement
IE: 9
向文档添加/删除事件
document.addEventListener/document.removeEventListener
兼容所有主流浏览器
返回文档的body元素
document.body
设置或返回与当前文档有关的所有 cookie
document.cookie
document.createAttribute
创建空的 DocumentFragment 对象，并返回此对象。
document.createDocumentFragment()
创建元素节点。
document.createElement()
返回文档的根节点(整个html)
document.documentElement
集合返回当前页面所有表单的数组集合
document.forms
集合返回当前文档中所有图片的数组
document.images
集合返回当前文档所有链接的数组
document.links
集合返回文档中所有 <script> 元素的集合
document.scripts
IE:8
返回文档中匹配指定的CSS选择器的第一元素
document.querySelector()
回文档中匹配的CSS选择器的所有元素节点列表
document.querySelectorAll()
返回当前文档的状态
document.readyState
返回载入当前文档的来源文档的URL(重定向过来的地址)
document.referrer
Document
为元素添加一个新的子元素
appendChild
现有的子元素之前插入一个新的子元素
insertBefore
删除一个子元素
removeChild
替换一个子元素
replaceChild
操作节点
返回一个元素的属性数组
attributes
返回元素的类名，作为 DOMTokenList 对象。
classList
设置或返回元素的class属性
className
返回指定元素的属性值
getAttribute
返回指定属性节点
getAttributeNode
如果元素中存在指定的属性返回 true，否则返回false。
hasAttribute
如果元素有任何属性返回true，否则返回false。
hasAttributes
返回元素的标记名（大写）
nodeName
1\tElement\t一个元素2\tAttr\t一个属性3\tText\t一个元素的文本内容 或属性4\tCDATASection\t一个文档的CDATA部分5\tEntity 实体引用6\tEntity\t一个实体\tElement7\tProcessingInstruction\t一个处理指令 8\tComment\t一个注释\tNone9\tDocument\t整个文档（DOM树的根节点）10\tDocumentType\t为文档实体提供接口 11\tDocumentFragment\t表示邻接节点和它们的子树12\tNotation\t代表一个符号在DTD中的声明
返回元素的节点类型
nodeType
返回元素的节点值
nodeValue
设置或返回元素的内容是否可编辑
contentEditable
如果元素内容可编辑返回 true，否则返回false
isContentEditable
操作属性
返回元素的子元素的集合
children
返回元素的一个子节点的数组
childNodes
克隆某个元素
cloneNode
返回元素的第一个子节点
firstChild
返回的最后一个子节点
lastChild
返回该元素紧跟的一个节点
nextSibling
返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）
nextElementSibling
返回元素的父节点
parentNode
返回某个元素紧接之前元素
previousSibling
返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。
previousElementSibling
设置或返回一个节点和它的文本内容
textContent
返回指定标签名的所有子元素集合。
getElementsByTagName
所有指定类名的元素集合，作为 NodeList 对象。
getElementsByClassName
检查两个元素是否相等
isEqualNode
操作节点关系
返回内容的可视高度（不包括边框，边距或滚动条）
clientHeight
返回内容的可视宽度（不包括边框，边距或滚动条）
clientWidth
返回任何一个元素的高度包括边框和填充，但不是边距
offsetHeight
返回元素的宽度，包括边框和填充，但不是边距
offsetWidth
返回当前元素的相对水平偏移位置的偏移容器
offsetLeft
返回当前元素的相对垂直偏移位置的偏移容器
offsetTop
返回元素的偏移容器
offsetParent
返回整个元素的高度（包括带滚动条的隐蔽的地方）
scrollHeight
返回元素的整个宽度（包括带滚动条的隐蔽的地方）
scrollWidth
返回当前视图中的实际元素的左边缘和左边缘之间的距离
scrollLeft
返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
scrollTop
返回元素的大小及其相对于视口的位置
getBoundingClientRect
操作尺寸/位置
Element
DOM
Window对象
Navigator对象
Screen对象
History对象
Location对象
BOM
function Array() { [native code] }
constructor
设置或返回数组元素的个数
length
合并多个数组，并返回新数组
concat
IE: 12
复制数组的前面两个元素到后面两个元素上
copyWithin
从数组创建一个可迭代对象， 该对象包含了数组的键值对
entries
用于检测数组所有元素是否都符合指定条件（通过函数提供）
every
方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素;
filter
方法用于将一个固定值替换/填充数组的元素
fill
方法为数组中的每个元素都调用一次函数执行，并返回通过测试（函数内判断）的数组的第一个元素的值
find
findIndex
方法用于调用数组的每个元素，并将元素传递给回调函数，没有返回值
forEach
方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组
from
edge: 14
方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
includes
IE: 8
方法可返回数组中某个指定的元素位置
indexOf
方法用于判断一个对象是否为数组
isArray
方法用于把数组中的所有元素转换一个字符串
join
方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找
lastIndexOf
通过指定函数处理数组的每个元素，并返回处理后的数组
map
方法用于删除数组的最后一个元素并返回删除的元素
pop
向数组的末尾添加一个或更多元素，并返回新的长度
push
将数组元素计算为一个值（从左到右）
reduce
将数组元素计算为一个值（从右到左）
reduceRight
反转数组的元素顺序
reverse
删除并返回数组的第一个元素
shift
选取数组的一部分，并返回一个新数组
slice
检测数组元素中是否有元素符合指定条件
some
对数组的元素进行排序
sort
从数组中添加或删除元素
splice
把数组转换为字符串，并返回结果
toString
向数组的开头添加一个或更多元素，并返回新的长度
unshift
对象原型方法
prototype
数组属性
Array
Boolean(true)
Boolean([])
Boolean({})
Boolean('false')
Boolean('true')
Boolean(1) // 非0
true
Boolean(false)
Boolean(0)
Boolean(undefined)
Boolean(null)
false
Boolean
Object
Date
Math
Number
String
RegExp
Function
javascript
基本选择器
组合选择器
组合器
伪类
选择器
盒模型
浮动
定位
弹性
动画
BFC
css
获取配置项值
--get
添加一个新配置变量
--add
删除一个配置变量
--unset
列出所有
动作
git config [--local | --global | --system]
设置/修改配置项
git init [project-name]
创建新仓库
git clone [url]
克隆远程仓库
git status [filename]
查看文件状态
git add [dir | file | .]
添加文件与目录
git rm --cached <file>
移除文件与目录（撤销add）
git reset HEAD <file>
从暂存区撤回工作区
git clean [options]
移除所有未跟踪文件
git checkout [file | .]
暂存区全部或指定的文件替换工作区的文件
git diff [files]
查看文件修改后的差异
汇总显示工作区、暂存区与HEAD的差异
git checkout
检出branch分支
git checkout branch
用暂存区中filename文件来覆盖工作区中的filename文件
git checkout -- filename
维持HEAD的指向不变。用branch所指向的提交中filename替换暂存区和工作区中相 应的文件
git checkout branch -- filename
检出
提交暂存区到仓库区
git commit -m [message]
提交暂存区的指定文件到仓库区
git commit [file1] [file2] ... -m [message]
git commit -a
提交时显示所有diff信息
git commit -v
使用一次新的commit，替代上一次提交
git commit --amend -m [message]
重做上一次commit，并包括指定文件的新变化
git commit --amend [file1] [file2]
提交
以图形化的方式显示提交历史的关系
git log --graph
查看所有分支日志
git reflog
显示指定文件是什么人在什么时间修改过
git blame [file]
日志与历史
git reset --hard HEAD
使用HEAD指针
git reset --hard 【commit-Id】
使用commit id
撤销更新
列出所有本地分支
git branch
列出所有远程分支
git branch -r
列出所有本地分支和远程分支
git branch -a
新建一个分支，但依然停留在当前分支
git branch [branch-name]
新建一个分支，并切换到该分支
git checkout -b [branch]
新建一个分支，指向指定commit
git branch [branch] [commit]
新建一个分支，与指定的远程分支建立追踪关系
git branch --track [branch] [remote-branch]
切换到指定分支，并更新工作区
git checkout [branch-name]
切换到上一个分支
git checkout -
合并指定分支到当前分支
git merge [branch]
选择一个commit，合并进当前分支
git cherry-pick [commit]
删除分支
git branch -d [branch-name]
删除远程分支
git push origin --delete [branch-name]
git branch -dr [remote/branch]
分支
下载远程仓库的所有变动
git fetch [remote]
显示所有远程仓库
git remote -v
显示某个远程仓库的信息
git remote show [remote]
增加一个新的远程仓库，并命名
git remote add [shortname] [url]
取回远程仓库的变化，并与本地分支合并
git pull [remote] [branch]
上传本地指定分支到远程仓库
git push [remote] [branch]
强行推送当前分支到远程仓库，即使有冲突
git push [remote] --force
推送所有分支到远程仓库
git push [remote] --all
修改远程仓库
git remote rename [oldname] [newname]
删除远程仓库
git remote rm [remote-name]
远程仓库操作
Git
基础
vuex
vueRouter
@vue/cli
vue-loader
vue
框架
单例
订阅发布
观察者
装饰器
职责链
状态
策略
代理
迭代器
命令
模板
设计模式
进阶
webpack
babel
node
typescript
flutter
动态规划
滑动窗口
二分查找
回溯
广度优先搜索（BFC）
深度优先搜索(DFC)
算法
二叉树
链表
队列
集合
数据结构
高级
前端知识体系
0 条评论
回复 删除
下一页
