说说前端组件化

在这里，我们来学习一下前端组件化的知识，而组件化是前端架构中最重要的部分。说到前端架构，其实前端架构最热门的话题有两个，一个是组件化，一个是架构模式。组件化的概念从研究如何扩展HTML标签开始，最终扩展出一套前端架构体系。而它最重要的作用就是提高前端代码的复用性。架构模式就是大家非常熟悉的MVC、MVVM等设计模式。这个话题主要关注的是前端和数据逻辑层的交互。因此，在前端架构中，组件化可以说是重中之重。在实际工程中，组件化往往比架构模式更重要。因为组件化直接决定了一个前端团队代码的复用率，而一个好的组件化系统可以帮助前端团队提高代码复用率，从而提高团队的整体效率。因为复用率提高了，大家重复写的代码量就会减少，效率也会提高，这样团队成员的心理和精神负担就会少很多。！！所以学习组件化可以说是非常重要的。这里我们先从了解什么是组件化，以及一个组件的基本组件开始。组件的基本概念组件分为模块和对象。组件与UI有很强的相关性，所以某种意义上我们可以把组件看作是特殊的模块或者特殊的对象。！！组件化既是对象又是模块。组件化的特点是可以使用树状结构进行组合，具有一定的模板配置能力。这是我们组件的一个基本概念。对象和组件的区别先来看对象，它有三大要素：属性——属性方法——方法继承关系——Inherit一个普通的对象在JavaScript中可以通过它的属性、方法、继承关系来描述.而这里的继承，在JavaScript中，使用的是原型继承。这里所说的“普通对象”不包括复杂的函数对象或者其他特殊的对象，但是在JavaScript中，属性和方法是一个。与组件相比，组件包含更多的语义元素。组件中的元素包括：Properties——Propertiesmethod——Methodsinheritance——Inheritcharacteristics——Attribute配置和状态——Config&Stateevents——EventlifeCycle-Lifecyclesubcomponents-ChildrenProperties和Attribute在英文中的含义非常不同，但它们通常被翻译成“属性”。如果两个词都出现，Attribute将被翻译为“feature”，Properties将被翻译为“attribute”。如何区分这两个元素？这里我会在后面的文章中和大家一起详细了解。接下来是组件的Config，是组件的一个配置。我们经常在构造函数创建对象时使用Config，我们传入这个构造函数的参数称为“Config”（配置）。同时，组件也会有一个状态。当用户操作或调用某些方法时，状态会发生变化。这是组件的状态，它会随着一些行为而改变。状态和属性、属性和配置可能都是熟悉的或相同的。Event是对“事件”的感知，一个事件由组件传递出去。我们的组件主要是用来描述UI之类的东西，基本上它都会有这种事件来实现某种类型的交互。每个组件都会有一个lifecycle生命周期，本文后面会详细研究。组件的children是很重要的一个部分，children也是组件中的必要条件，因为没有children组件是不可能形成树状结构的，所以对界面的描述能力会差很多。之前有一些流行的拖拽系统，我们可以将一些写好的UI组件拖到页面上来构建我们的系统界面。但是后来发现除了可以在某些区域进行拖拽之外，还需要一些组件嵌套组件的自动排序和功能需求。这时候如果组件之间没有树状结构就不好用了。最后，组件在对象的基础上增加了很多语义相关的概念，这使得组件成为一个非常适合描述UI的概念。Component组件我们用一张图来更深入地理解组件。组件更改最直接的来源是用户输入和操作。例如，当用户在我们的选择框组件中选择一个选项时，我们的state状态甚至我们的子组件children都会在这个时候发生变化。图中右侧的情况是组件的开发者与组件的关系。其中之一是开发人员使用组件的标记代码来影响组件。其实就是开发者通过组件的Attribute改变了组件的一些特性或特性。！！属性是一种声明性语言，也是标记代码。而MarkupCode也不一定像我们的HTML一样是类XML的语言。在标记语言这个大生态中，其实有很多语言可以用来描述一个界面的结构。但是最主流的是基于XML的系统。我们Web领域最常见的就是XML。JSX也可以理解为嵌入在编程语言中的XML结构。除了使用Attribute之外，开发者还可以使用Property来影响组件。这个组件本身有Property（属性），当开发者修改一个组件的属性时，这个组件就会改变。而这个和对象中的属性Property是同一个概念。！！Attribute和Property是一样的吗？有时是，有时不是，这完全取决于组件系统的设计者。组件的实现者或设计者可以统一属性和特性。我们甚至可以将state、config、attribute、property这四个统一起来。然后是method方法，用来描述一个复杂的过程，但是JavaScript中的property是允许get、set等方法的，所以说到底，method和property的作用是差不多的。所以这里我们可以确定一个概念，就是使用组件的开发者会使用方法和属性，这些组件的元素。但是如果开发一个组件的开发人员需要向使用该组件的程序员传递消息，这时候就需要一个event事件。当一个组件由于某种行为或事件触发了变化时，该组件将向用户发送一个事件消息。所以这里事件的方向是反的，从组件到外部。通过这张图，我们可以清楚的知道组件各个元素的作用以及它们的信息流向。特性Attribute在所有组件的元素中，最复杂的无非是Attribute和Property。从英文单词Attribute的理解上，我们更强调描述性。比如我们形容一个头发很多，长相帅气，皮肤白皙的人。这些都是Attributes，也可以说是对某个事物的特性、特点的描述。财产更像是一种从属关系。比如我们在开发中经常会发现一个对象，它有一个Property是另一个对象，那么它们之间很有可能存在从属关系，子对象从属于父对象。但这里也有一个特例。如果我们有一个弱引用，一个对象引用另一个对象，这是一个完全不同的概念。以上就是这两个词在英文中的区别，但是在实际的应用场景中也是不一样的。因为Property是一种从属关系，所以在我们面向对象中经常会用到。而Attribute最初是在我们的XML中使用的。有时它们相同，有时它们不同。Attributevs.Property这里我们使用一些例子来了解Attribute和Property之间的区别。我们可以看看它们在HTML中不等价的场景。Attribute:HTML中的属性可以同时通过HTML属性设置也可以通过JavaScript设置属性：myComponent.a='value';这里是定义一个元素的a='value'。这不是属性，而是属性！！很多同学认为这只是两种不同的写法，其实他们的行为是不同的。Class属性