组件化实战——组件知识和基础轮播组件

点击上方 前端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