点击上方 前端Q,关注公众号
回复加群,加入前端Q技术交流群
作者:blateyang
原文链接:https://juejin.cn/post/6986304993171079176/
1.1. 组件的基本知识
1.1.1 前端两大重点内容
组件化:解决复用问题
架构模式:如MVC、MVVM等,解决前端和数据逻辑层的交互问题
1.1.1.2 组件的理解
组件可以看作特殊的对象和模块,它和UI是强相关的,是可复用的界面功能模块。它除了具有对象的property,method,inherit之外,还有attribute,state,children,event等,下图描述了组件组成部分间的关系
1.1.1.3 Attribute vs Property
Attribute强调描述性
Property强调从属关系
在html中,二者含义是不同的
<input value="cute">
<script>
var input = document.getElementByTagName("input"); // 若property没有设置,则结果是attribute
input.value //cute
input.getAttribute("value"); //cute
input.value = "hello"; //若value属性已设置,则attribute不变,property变化,元素上实际的效果是property优先
input.value // hello
input.getAttribute("value"); //cute
</script>
1.1.1.4 如何设计组件状态(?表示待定)
Markup set | JS set | JS Change | User Input Change | |
---|---|---|---|---|
property | x | √ | √ | ? |
attribute | √ | √ | √ | ? |
state | x | x | x | √ |
config | x | √ | x | x |
1.1.1.5 生命周期Lifecycle
created
mount
unmount
destroyed
JSchange/set