一提到前端，自然会听到h5,css3，自适应，移动端等等。给人的感觉要么杂乱，要么就是更新太频繁，学习速度跟不上，要么就是高深莫测、望尘莫及。对待它的办法唯有死记硬背，但又很累......
怎么才能让它感觉轻松起来？那就应该换种思路去认识它。就像你朝着太阳看，永远都是眼光；背着太阳看，永远都是阴影。换个角度来认识它，可能一切就清晰明了了，那么也就可能跟着轻松起来了。
用面向对象的思想去重新认识前端。
其实，这不是无端产生的，而是应该去这么认识它。因为像html,css,js,php这些对编程世界来说，是“上层语言”部分，它们本身就是编程思想直接使用的结果。
所以，这些领域的特点必然就是：是把抽象而晦涩的指针、内存、堆栈、指令等都封装了，为的是提高用户的体验效果。那么你在它们身上自然是很难看到指针、内存泄漏、堆栈等这些影子的。
因为要绚丽的外表，因此内在就隐藏的更深、更神秘。自然学习它也就要撕开外衣，自然变得更不知所措。那么如果要深入理解它，就得从根本上去分解它。
学了C++，你会对面向对象思想很清晰。它里面的特点就是：
类-对象，对象里面有成员属性、成员方法；成员属性又可以是复杂的类型，如：子对象。
使用方式就是：造对象，对象调用成员属性或者成员方法。
此时再看看html的源码架子：
PHP葵花宝典
那么类比起来，结果就应该是：
造了一个对象，名字叫html，它有两个成员属性，分别叫：head,body;而他们里面又各自有成员属性，如：body对象里面有个成员属性，该成员属性也是个对象，名叫：div，而该div的内部情况又是：
1个成员属性，名id，值为字符串"div1"；
1个成员属性，名未知（但总会有个名字的），值为字符串："PHP葵花宝典"；
1个成员属性，名style，值为字符串："color: #333;"；
1个成员属性，名onclick，值为字符串："return kkk();"；
同时，编译器可以这样做：对于名叫style的成员属性，它里面的内容采用css解释器去解释，那就不会直接傻乎乎的当字符串直接输出给用户了。
而对于名字以"on"开头的成员属性，对它里面的内容采用js解释器去解释，那也不是直接傻乎乎的当字符串直接输出了。其他名字的成员属性，就按字符串去处理......
这样，这种编译器就可以解释这个html源码了，这样的解释器其实就可以让浏览器来充当，自然推的出：浏览器里会有这么几种解释工具：html解释工具，css解释工具，js解释工具（其实就是那个叫“js引擎”的东西）；
总结一下：你写的html源码，可以对应成这样的结果：“对象-成员属性，成员属性又是个对象，该对象又有成员属性，对于style属性的值就用css解释器去解释，对于on开头的属性的值就用js解释器去解释......”，
这样就可以呈现出一棵倒立的树了，这就是DOM树。只要有这种解释和转化的能力就可以实现了。那么，谁有这种解释和转化的能力？浏览器。
所以：通过浏览器，可以把html源码和DOM树一一对应起来。
现在你应该清楚了吧，手写的html源码是可以和DOM树一一对应的；
这样，一切谜底就解开了。
所以，html,h5,css,css3,js这些东西也就自然变得很清晰、可爱了。因为它们就是一棵倒立的树，树里面有什么对象，对象里面有什么成员属性，一目了然。你修改一下DOM树的结构，自然结果也就跟着改变了，仅此而已......
网友评论