浏览器处理“盒子”

阅读更多

前言

这应该是我写关于Web前端一些概念性的东西的最后一篇，为了分享一些自己的想法跟理解，一起交流心得，并且希望能帮助到一些人进入Web前端。为了避免盒子的概念太奇怪，在这声明一下：盒子就是页面切分成一小块一小块的元素。

 

让盒子动起来

前面几篇文章已经介绍了，我们可以通过为页面量身定制一套装饰，使得页面的摆放跟设计图一摸一样，高保真地还原设计图。

不满足现状的人们要继续朝更高难度的发展，我们得想办法让页面上这些“盒子”跟我们交流。

于是后来的发展中就出现了Javascript(JS)。

再次用俗一点的话来解释它的话：使用它，我们可以任意改变页面上盒子的大小，例如宽度，边距等等；我们可以让盒子从页面上消失、隐藏、移动；我们可以监控用户是不是点击了页面上的盒子并作出响应或者浏览器是不是已经把盒子摆放好了；我们也可以知道现在页面上有多少个盒子了；

细心的人应该注意到，上边说的全都是针对盒子的。嗯，JS的重要的功能就是用来操作盒子的，也就是DOM操作，至于什么是DOM，还是自己谷歌/百度吧，或许你可以认为DOM就是这一大堆盒子。

不会JS就只能操作DOM吧？

当然不是，Javascript是一种脚本语言，是浏览器的解释器解析JS来进行逻辑控制、DOM操作等等的，但是在Web前端的工作里边，我们大多时候使用Javascript都是DOM操作。

 

JS With浏览器们

回到前面一个话题，我们说过了大家都在用各种各样的浏览器，每个厂商生产出来的东西对CSS理解是有差异的，同样，它们对JS的认识理解也是有很多不一样的地方。

有时候，我用我常用的火狐打开一个网站，然后发现它上边一团糟的时候，我就会在这头一边骂娘一边打开IE去访问它。

这些网站往往覆盖于那些不负责任、不会技术、不懂用户感受的公司/机构里边：

zf、银行（尤其是网银）、学校某某系统……

真的让人觉得他们很业余并且往往这些系统是最贵的，我想原因，大家都懂。

既然浏览器对JS解析不一致，我们得想办法让它一致起来，使得我们在进行开发Web应用的时候不用浪费一大堆时间去考虑浏览器的兼容问题（不过这个问题是必须考虑的，更多的是放在测试阶段吧）。

 

JS框架

什么是框架！？打个比方吧，JS就是一堆木头，我们可以使用木头来做很多事情吧，例如我们可以用它来雕刻、烧火、做把木剑玩玩也是可以的。那你想想，我每次都给你一堆木头，叫你雕刻一堆印章，这时候你会很想说：好惨，我得一直做重复的工作来完成这项任务，我要拿着刻刀不停地在这一堆形状各异的木头中制作一个摸样的印章。

这时候要是有个人来跟你说：我有个机器，我可以帮助你先预处理一下这堆木头。例如我可以把木头先处理成形状一样的圆柱体，然后你只需要在这个圆柱体下边刻上你想要刻的文字，你很快就能完成这项任务了。

于是你感动到鼻涕泪流。

这个机器就相当于前面所提的框架，我们可以用它来预处理一下JS脚本，使得我们不关心JS各种形状不一的东西（浏览器解析不一致的东西）获得一样的结果，然后只要对结果稍微处理一下就能很快达到目的。

无疑，它帮助我们完成快速开发，同时也保证了我们开发的应用有很好的结构，很好的扩展性。

当然，要记住一点，任何事情有利有弊。

框架首先加重了我们的一些负担：

1. 我们得先学习怎么让这个机器工作起来；
2. 你的应用到互联网的各个角落的时候必须都扛着这个机器去工作；
3. 机器坏了或者崩溃了，谁来为它产生的后果买单？

在JS里边，有很多很好的框架，最出名的当然是jQuery，还有YUI、Prototype、Dojo等等。

也许你会为选取哪个框架而发愁。

但是个人看法，一开始的JS学习不应该使用框架，更应该自己亲自去体会一下各个浏览器对JS有那些解析不一致的地方，除非你急着要做个应用没时间花很多精力在处理浏览器兼容性方面。要相信有付出一定会有回报，偷懒只会带来一些弊端。

说了那么多，貌似学习JS考虑浏览器兼容性很可怕的样子，其实在很多不兼容的处理都是在一些DOM操作上而已，对于普通的逻辑控制，语法解析基本是不会有差别的，SO无须那么畏惧。刚刚说那么多，只是为了要强调，一定要做好浏览器兼容性！不要让千千万万个我在这头访问你的应用时骂娘。

 

辅助工具

正所谓“工欲善其事必先利其器”，最后推荐一下一些工具，我采用的组合是：

1. 浏览器：IE Tester（用于测试IE6,7,8）、火狐、谷歌、Opera、Safari；
2. 辅助处理图片工具PhotoShop；
3. 调试工具：火狐底下的Firebug，Fiddler，HTTPWacth；
4. 文本编辑器：Notepad++；
5. 双显示器

工具的具体使用方式在网上很容易就找到，不废篇幅跟时间了。个人采用的工具以及方法有限，还望多推荐跟指正。

 

本篇总结

希望这几天写的几篇能够帮助到一些人吧，不想贴一些网上一大堆无聊的糟糕代码跟术语，因为个人认为有些东西需要联系实际的例子来引出概念会远远比说个术语更让人接受。

当有人跑来看你的文章，听你的演讲，然后没有收获，我就觉得这样的效果是非常糟糕的，我们会经常在学校讨论这个这个老师不会讲课之类之类的吗？我很欣赏那些善于演讲善于写作的人，听他们的演讲跟看他们的文章对听者读者是一种享受。

接下来会结合一些实际的例子来写一些关于技术细节的东西，当然我会继续保持这种风格，看看能不能帮助别人更好的理解，还望大牛们多多交流指正。