摘要：也是的独特性，使得组件化成为了可能。简单的说就是组件内部标签对内语义化，组件自定义标签对外语义化对内语义化保存自定义标签具有正确的语义，自定义标签对外语义是对内部标签组合出的功能概括。
组件化
这里首先介绍WebComponents标准，以下为腾讯alloyteam团队的一篇文章里的内容。
模板能力，WebComponent提供原生的模板能力
ShadowDOm封装组件独立的内部结构，ShadowDOm可以理解为一份有独立作用域的html片段。这些html片段的css环境和主文档隔离的，各自保持内部的独立性。也是ShadowDOm的独特性，使得组件化成为了可能。
自定义原生标签
imports解决组件间的依赖
我们简单来回顾一下WebCompoents的四部分功能：
定义组件的HTML模板能力
Shadow Dom封装组件的内部结构，并且保持其独立性
Custom Element 对外提供组件的标签，实现自定义标签
import解决组件结合和依赖加载
由此我们能看出一个真正成熟可靠的组件化方案，需要具备的能力:
资源高内聚---- 组件资源内部高内聚，组件资源由自身加载控制
作用域独立----内部结构密封，不与全局或其他组件产生影响
自定义标签----定义组件的使用方式
可相互组合----组件真正强大的地方，组件间组装整合
接口规范化----组件接口有统一规范，或者是生命周期的管理
现在流行的React算是很好的实现了组件化，这里我想谈的是自己对于组件化的理解，探究和尝试。 我认为组件化可分为UI组件化和JS方面的组件化(名字没有想好)。以下是对于这两方面的想法:
组件化之UI组件化所谓UI组件化，可以想到这里涉及到了HTML和CSS。
在HTML上，我们应该保证组件内部的标签要语义化。组件的自定义标签具有语义，是对组件的一种说明，概况。简单的说就是,组件内部标签对内语义化，组件自定义标签对外语义化
对内语义化保存自定义标签具有正确的语义，自定义标签对外语义是对内部标签组合出的功能概括。
在CSS上，保证代码上的模块化，具有独立作用域；内部的布局，字体的变化(不包括颜色这类是不可控的)只由其最外层容器影响。概括的说就是，组件内部的布局只受容器变化影响。在容器不受外部影响变化的前提下，内部容器的样式不被外部所影响
_但是实际上_，我认为CSS是这里最不可控的。我们能保证在代码上模块化，独立作用域，这是在写less(或者使用sass)上得到的体验，比如下面:
#header{
h1{
a{
}
}
nav {
ul {
li {
}
}
}
}
在写less的时候，能感受到所有的样式都在#header的作用域下发挥作用。实际上也是这样的，但是我为什么说CSS是最不可控的呢？这也是我对于CSS畏惧的地方----同一个组件结构是可以具有不一样的样式的，也就是说在我们的html结构相同，js实现的一些功能也相同的时候，但是我们的样式是可以不同的，布局，颜色，字体等等。所以同样是一个导航组件，可能会有不同的样子。这里我认为他们算是不同的组件，因为组件是由结构，样式和逻辑构成的。我把没有样式的组件叫做 无样式组件 或 可重复利用用组件 ，而具有样式的组件叫做 完全体组件 或者 一次性组件。
PS：这里只是一个菜鸟(目前实习还未找到)的看法，缺少实践，只能自己去想和尝试，可能内容有"胡言乱语",请大牛能指出问题，虚心求教。明天会继续探求和尝试。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/78893.html
摘要：网络上大多数文章，也是千篇一律的翻译这句话，可是仅凭这一句话，我想象不到的使用场景。因为真正的使用场景下，子组件的数据都是来自父组件的。组件的数据都是来自调用者的，然后会把每一行的，在开发者需要时，传递出去。 Vue的slot-scope的场景的个人理解 这篇文章不是单纯把文档的话和api拿来翻译和演示，而是谈谈我对于slot-scope的使用场景的个人理解，如果理解错误，欢迎讨论！ ...
摘要：我没有能力去控制那些自媒体发布这些不实的内容，但是在我了解的范围内，还是尽力输出一些我的理解。 之前我发过一篇《说说我为什么看好Spring Cloud Alibaba》，然后这两天有网友给我转了这篇文章《坑爹项目spring-cloud-alibaba，我们也来一个》，问我的看法是怎么样的，聊天时候简单说了一下。今天在家休息，抽空整理一下内容，逐点说一下我的看法，主要还是觉得这篇文章...
摘要：比如说预处理器，组件化，工程化，兼容性处理等方面，这些主要是基于自己的开发经验业界流行技术方案进行准备。但是在开始谈面试前我想先提出一个概念学霸面试模型学校的学习和公司的工作有很多相似的地方。所以对于面试，请参考上学那会儿你们班学霸的姿势。 背景 参加完 厦门第四届CSS Conf 后，让我对 CSS 产生了新的思考。CSS 是前端必须熟练掌握并保持持续关注的技术，但是我又不想在 CS...
摘要：官方文档官方文档，官方文档永远是学习资料的第一步起步扎实的基本功。学习的新特性，理解，建议可以看看阮一峰的教程。的学习曲线会比较长，需要了解到的常用命令，以及和的模块规范，的也很多，其实更多的是属于一项后端语言。 学习Vue2.0的建议顺序 注：本文是看过其他关于vue文章之后的想法，欢迎转载，请注明出处。 Vue官方文档：Vue2.0官方文档，官方文档永远是学习资料的第一步 起步...
摘要：但是它与里大部分的概率是保持一致的。但是如何将转换成函数的调用呢就是干这件事情的。好了，让我们看看是如何工作的。下面的图片在流程图中高亮了一个组件是如何工作的最后希望这篇文章能帮助你理解是如何工作的至少在中 英文原文链接 Virtual DOM很神奇，同时也比较复杂，难以理解。react,preact和相似的js库都使用了virtual dom。然而，我找不到任何好的文章或者文档，可以...
阅读 2739·2021-11-19 09:40
阅读 1409·2021-11-15 11:39
阅读 427·2021-10-08 10:05
阅读 2184·2021-09-03 10:29
阅读 3273·2021-08-12 13:22
阅读 1901·2019-08-30 15:54
阅读 3569·2019-08-30 14:03
阅读 2560·2019-08-30 13:45
