分类「 网页即组件树
2017-01-19
FE
网页即组件树

# html树

H5 似乎已经尘埃落定,ES6大面积流行,CSS Level4 提上日程…
前端界发展很快,html 的层层嵌套注定了 DOM 是一类树,而网页以它作为根基,其内容也必定是嵌套的。
很常见的网页模型
很常见的网页模型
上面这个大家都不会不熟悉,html语义的那几个标签这里都有[0]。 这是一个很常见的网页模型,由 header nav arti aside footer 这几种基本组件构成,因此很自然的可以得到下面这棵树:
但是把,page这棵树的子树也是树,说不定也有子树。
因此在html里就体现为层层嵌套,即是:
html 总被能表示成成一棵树

# css权

上面提到的那棵树是确切存在的, DOM 可以作为上述所描述的那种 html树
而css通过选择符选中树上的结点,可以认为这就是树对应的 结点带权

# js

嗯,进一步思考你应该会突然发现上述的带权树实际上是很静态的。
如果 T 是一个返回描述结点的对象函数的话, 那么
State = T(Node);
而JS的加入 上述函数将会被推广
G 是 F 的推广 其中 Time 可有可无, Action 是JS的行为
State = G(Node, Action [, Time]);
也就是说,给定树结点和相关JS代码即可成为预言家,可见浏览器一直在重复这个运算。
那么,意义何在?
css和html都没有变量[0],当你写下 var 的时候你应该就知道了。
00var Eczn = 2017;  // 变量带来了不确定

Torzo 茶馆

# 组件、模块、函数等是抽象过程

世间很多事物都是抽象过程的对象集,很显然 这是某种代数系统,由函数这样的运算和操作数组成。
如果你还认同 问题都是可解决的,或者说 可计算的 也就是在上面的基础上让计算机做代数系统运算就一定能求解。
那么恭喜, 你是 Computer Can Do Anything 的坚定信仰者。

# 耦合和解耦之争

以前把css耦合到html文件里是谓第一大逆不道
  1. 一坨一坨的 style="喵喵喵" 破坏了语言的纯洁性
  2. 显然不适合维护
  3. 荒废的选择器
只图方便太丧心病狂了。 (16年底的时候搞过一个十多年前的页面)
然而网页即组件树这类说法的流行,耦合真的不行吗?
就拿这破博客来底部的 footer 说吧
如果按照解耦的思想,那么肯定是这样的:
00<!-- 一段html -->
01<!-- index.html 里的一部分 -->
02<footer>
03    <p>2017 <= varEczn*</p>
04</footer>
05
06<!-- 一段css 在另外一个css文件里 -->
07footer {
08    color: rgba(68, 68, 68, .85);
09    ..... 
10}
11
12<!-- 一段JS -->
13$("#foot").click(()=>{
14    ... 
15});
这样就有两个文件了 一个是html文件、一个是css文件
那么看看耦合的
00<!-- 全都写在 footer.html -->
01<style>
02    footer {
03        color: rgba(68, 68, 68, .85);
04        .....
05    }
06</style>
07<footer id="foot">
08    <p style="font-size: 0.8rem">2017 <= varEczn*</p>
09</footer>
10
11<script>
12    $("#foot").click(()=>{
13        ... 
14    }); 
15</script>
罗列一下缺点
解耦
  • 需要维护三个文件
耦合
  • 耦合了css/js 因此不会有css/js文件缓存了
因为Vally是采取模版渲染的方式来生成页面,因此耦合除了css缓存都比解耦要好,而实际上,完全可以通过技术将 style/script 标签提取出来放在某个css文件里(webpack里的各种loader),这叫 隐藏实施过程,这么来看,组件化思想大大改变了网页开发的模式。
而现今许许多多的框架都是以组件为网页开发元素,而不再是从前那种模式了。

# 乌云

接着刚刚提到的 Computer Can Do Anything 信仰
这怕是计算机科学家一直在寻找的 P 跟 NP 的关系把:
如果 Can Do Anything In A Short Time
那么也就会有 P = NP
如果 Can't Do Anything In A Short Time
那么就会有 P != NP
这片乌云背后的真相,我们还不清楚。
一个主流的看法是 P != NP,这是个对现有世界不会有太大影响的结论…
怕就是 P = NP 为真, 编程成为小学高中大学必修课的日子也就不远了,如果真是那样怕就是 同装石之门Torzo;Gate 的选择了。
Torzo;Gate
Torzo;Gate





回到顶部