WEB前端

Internet Explorer 8 简体中文正式版悄悄发布。以下链接为IE8 for windows xp地址：
http://www.microsoft.com/windows/internet-explorer/default.aspx

其实对于我们前端开发的来说，他增加了什么功能不是非常重要，最重要的是他是否像IE6一样，还存在很多bug，是否对CSS2，3有更好的支持。这才是最重要的，如果这一切都做得比较好，对于他是否自带什么工具，我们都已经不在乎啦！

安装过程大概需要十分钟左右，整个安装过程非常简单，下面是安装过程截图，安装完成以后，比较麻烦的是需要重新启动计算机ie才可正常使用。

IE8安装过程1

IE8安装过程1

注：此文章适合刚刚学习的js的同学阅读。

在标准的DOM中，如果要获取对象属性我们可以使用getAttribute;
eg:获取对象o的title的值，我们将他的值保存到bute中：
var o = document.getElementById(”o”);
var bute = o.getAttribute(”title”);

如果要对对象重新设置属性的话，在标准DOM中，使用setAttribute;
eg：现在对对象o重新设置title属性的值：
o.setAttribute(”title”,”abc”);

但是html dom的方法是对象后直接跟属性即可。
比如要获取和设置对象的属性title：
bute = o.title;
o.title = “abc”;

上面说了关于如何获取对象的属性值，其实在很多书籍中及网站上都有说到，在这里说的目的最后是想告诉大家的是：
IE在setAttribute()上存在很大的问题：有时候会存在为对象重新设置新属性后并不是预期你所想得到的，在现在需要兼容多浏览器的时候，如果你需要设置属性的话，建议使用html dom方法。方法并非一种，也有其他的方法，只是觉得此方法更加简单一些，比如if(isIE)的方法也是可行的。也就是为ie专门写一条语句。

css sprites：我对他的中文理解是，将CSS中用到的背景图片进行整合，通过背景坐标定位（位移）的方式来实现背景的显示。
在这里，我们主要讨论的是关于背景整合的方法及在样式中具体使用方法：
一、背景整合：从事前端开发的你都应该非常清楚，我们在使用背景的时候一般情况下有四种平铺方式：平铺，横向平铺，纵向平铺与不平铺，正因为有这几种平铺方法，所以我们在做背景整合的时候，也需要根据平铺方式不同，所整合的方法也就不同，很多人在最开始的时候，都以为是将用到的所有背景全部整合成一张图片，这是不正确的认为，就算可以，但是在无形大大的增加了图片的大小。
1、完全平铺的背景：单独使用，像这种情况下一般情况很少，也就一到两张左右；
2、横向平铺
（1）有固定高度的：一般情况下，是宽1px的图片重复使用，所以我们可以做一张为宽1px，将这种情况的每张图片纵向排下来，至到排完为止，保存。
（2）高度无限增加，不固定：只能像完全平铺一样，单独使用。
3、纵向平铺
（1）有固定宽度的：一般情况下，是高1px的图片重复使用，所以我们可以做一张为高1px，将这种情况的每张图片横向排过去，至到排完为止，保存。
（2）宽度无限增加，不固定：只能像完全平铺一样，单独使用。
4、不平铺
（1）固定大小：这种情况可以不用过多考虑他们之间的间距，因为大小固定，不会将其他的图片内容过多的显示出来；
（2）不固定大小：这种情况下，我需要简单的描述一下，其实我对他的理解也还不够深刻，我可以举个简单的例子，比如我们经常看到的圆角，比如一个导航的左边和右边都是圆角，中间可以平铺，但是如果我们将左边的圆角切下来，按照上面固定大小的方式不考虑太多，直接在图片的后面跟着一张图片，当我们在使用的时候，就会出现一个问题，就是当内容过长的时候，其他地方就将出现后面的一些图片内容，我下面将举例说明。
但是我们会将不平铺的所有图片整合在一张图片上。弄我们使用，只是我们会考虑他们之间的一些间距。

上面我们说了关于背景整合的多种方式,我下面将分别举例说明，在说明之前，我将简单讲讲他的使用方法：
一、使用方法
在这里我使用了淘宝的网站为例子，他的背景图片地址如下：
http://assets.taobaocdn.com/app/fp/2009/hd_20090313.png

下面是淘宝的一个关于背景的定义：

#site-nav, #site-nav .quick-link li, #site-nav .cart a, #site-nav .help a, .skin-yellow .rc-tp, .skin-yellow .rc-tp span, .skin-yellow .rc-bt, .skin-yellow .rc-bt span, .nav-box .bd, .nav-box .rc-tp, .nav-box .rc-tp span, .nav-box .rc-bt, .nav-box .rc-bt span, .select-search li, .select-search .selected a, .search-form, .nav-box dd li, .nav-box .news dt, li#MenuHome a, li#MenuHome a span, .mytaobao-entra {
background:transparent url(http://assets.taobaocdn.com/app/fp/2009/hd_20090313.png) no-repeat scroll 0 0;
}

上面是将所以需要此背景的图片的样式全部写在一起。

.mytaobao-entra {
background-position:-302px -59px;
padding-right:16px;
}

上面的就是通过坐标得到相应的背景图片，这里的这个样式是实现淘宝首页左上角我的淘宝链接旁边的那个向下的图标。

好，关于使用方法，就说到这里，如果你对此感兴趣，可以试试。

下面说说他的益处与不良之处：他的最好的好处就是我们经常提到的减少http请求数，他的不良之处在于，如果需要更换背景图片，相对而言，会麻烦一些。

那我们在整合的时候的注意事项是什么呢？一般情况下建议保存为png-8的格式，因为他的透明部分是不计算大小的，但是有时候也是根据具体情况而决定的，也可能保存为gif或者jpg。

关于他的更多内容，我将在下一时段写出，需要工作了。

随着社会的发展，现在各行各业的分工也越来越细，互联网行业也不例外，不过并不是所有的公司都这样，也有一部门个人的或者比较小的公司，还存在一个人需要干多个人的工作，就拿网站建设的公司来说吧，一个人即要做交互设计，也要做视觉设计，还要做前端开发，也要做后台程序员，嘿嘿，这样的公司还是存在的，我在这里谈的流程呢是关于互联网产品的流程，不管是一个人做还是几个人做，我们也可以对他进行分解，在些我只能非常佩服那些一个人可以当多个人使用的同行们。
产品的实现：我的理解是，由于社会的需要，通过人们对他进行一系列的思考，通过生产，而出现的。我的理解应该是比较片面的，嘿嘿，如果你对我的理解不赞助和补充，希望留言告知。
那么在互联网行业中所提到的产品是什么呢？其实我们可以理解成是网站，至于网站中的内容，还有什么功能，还是根据我们所针对的人群来考虑的，在这里不多叙述。
刚才提到了，产品是需要社会的需要，通过一系列思考而开始的，那么首先流程就从这里开始了：
1、需要做什么产品；
2、产品的功能的策划；
3、信息架构（交互设计）
4、视觉设计
5、前端开发
6、后台程序员（功能的实现）
7、编辑添加相应的内容

其实这七个步骤，有几个步骤是可以同步进行的，我们通过下图来让大家看清楚：

由于本人功力不够，所以画出来的图比较糟糕，大概的意思就是当产品经理提出需求以后，交互设计师与后台的开发人员可以同时开始做自己的工作了，包括编辑，当交互设计师完成原型设计以后，视觉设计师和前端开发可以同时做自己的相关工作了，当视觉设计师将视觉设计稿完成以后，在由前端开发实现表现与行为的相关工作，前端开发完成以后，在交给后台程序员。就是这样一个流程。

那么在这个流程中，他们要考虑的，现在在各个行业中经常听到的就是：用户体验。

最近一两年来，WEB标准在国外互联网行业中越吵越热，大家都知道在WEB标准中提出了关于结构与表现、行为相分离的原则。故而在国外出现大量网站改版的情况，几大互联网巨头（新浪，腾讯，网易，搜狐，淘宝）也不例外。虽然他们也已经秉承了WEB标准中所提到了表现与表现分离的原则，但是在这里却出现了一个我不能理解的问题，就是在实现分离以后，究竟应该选择内部样式表，还是外部样式表的问题。
在同行中，有人觉得，采用内部样式表的好处就是减少http请求数，防止页面裸奔，给用户不好的印象，但是有时候如果你的网站长时间连内容都不能显示出来，你觉得用户还会等吗？
我一直认为，采用外部样式表是比较正确的做法，因为这样更能将结构清晰化，能够更快的加载页面内容，在当今内容为王的时候，内容才是第一嘛，而且从维护方面方面也更加容易，只需要简单的修改相关的样式文件，我们即可修改页面，不需要为了一个简单的修改，去打开多个文件挨个修改，就算现在已经有很多CMS系统，但是也需要去编辑每一个模板文件呀！这样不是又费时又费劲吗？有人提到了，如果我有很多专题页面，难道我需要建立几千个css文件，嘿嘿，这又另当别论了嘛？但是如果我们在WEB前端开发这一步是分离的，又有什么不好呢，只需要在发布的时候，将他放入到页中，采用内部样式表即可嘛，因为专题页一般情况下只使用一次的嘛。而且使用的时候不是很长。过了推广期，一般情况下就撤下来了，但是主要内容部分不一样，不可能三天一大改版吧，就算需要修改了，也是局部的嘛！
虽然我上面说了这么多我自己的看法，也就是我还是赞成，并且双手支持外部样式表引用，如果双脚可以举起来的话，我还想把双脚也举起来，但是通过对几大巨大头的观察，除了搜狐与中国雅虎采用了外部样式表以外，其他几个网站都采用的是内部样式，故而产生了疑惑，希望同行的前辈们，及几大巨头中采用内部样式表的同行，前辈们能够告诉我一下理由，本人在此谢过。
下面是他们源代码抓图：

1、新浪

2、腾讯

3、网易

4、搜狐

5、淘宝

6、中国雅虎

淘宝网，互联网行业电子商务的龙头老大，日访问量上百万的网站，在2009年3月13日21：50前后首页页面中只有出现头部和尾部的情况，我在前面的文章中已经提到，当时我还猜测以为他们改版，发力搜索。没想到的，差不多30分钟后，页面又恢复了和原来一样，只是唯一不同的是，在页面源代码中多了一些样式。
这么大的一个网站，用户量这么庞大，而且今天是周末，正是大家积极访问此网站的时候，居然出现这种情况 ，事先没有任何通知，淘宝一向提倡用户体验，有专门的UED团队，有专门的用户研究员，怎么会犯这样的错误，难道是有人对淘宝不满，对淘宝的服务器发起了攻击，删除了主要内容部分的代码？还是因为工作人员的失误？如果真的是失误，怎么会长达30分钟？难道淘宝的员工还不如一个用户关心自己公司的网站？难道18:00下班以后，大家都不在关心淘宝？不得而知，究竟什么情况，我们还是等淘宝自己给用户，给大众一个答案吧！

30分钟过去了，在刷新淘宝看看，页面开始恢复正常啦！不过好奇心作怪，查看了一下原代码，这次与今天早上的代码唯一不同的地方就是不仅引用了外部样式，而且还有直接在页面中的样式。
嘿嘿，这一切究竟是怎么回事呢？刚刚不是说淘宝准备发力做搜索了吗？现在又改回来了，看来是我错了，是因为我太相信淘宝的工作人员了，不过，人无完人嘛，有时候犯犯错也是允许的。有可能这次是淘宝的工作人员和行业内的朋友和他的用户开了一个玩笑呢？淘宝的工作人员淘宝人自己称他们为店小二，这次店小二给大家开了一个玩笑而以，没事！

但是我真诚的希望淘宝的店小二不要和我们开这种玩笑！

今天上午打开淘宝的时候，还和原来一样，是比较突出搜索，但是下面的内容，比如一些商品信息都还存在，就刚才，打开居然淘宝的网站改版啦，只留下了搜索框和导航，和其他一些信息。
很早之前就已经传言淘宝要做搜索，从这次他的改版，足已证明，以前的传言是真实的。下面将现在改版的页面图片上传。

以下是两张图片，一张是淘宝显示页面，另外一张是我通过firebug查看工具查看代码的效果，这张效果足已证明这是淘宝内部自己将代码去掉的。

面向对象，现在应该是对开发人员最基本的要求，如果你已经阅读完我上次给大家推荐的两本书以后，你应该知道javascript也是可以面向对象的，他具备了面向对象所有的特殊。这里就不用在过多讨论。如果你现在正在为自己还不是javascript高手而烦恼，因为你的代码还是面向过程，而不被你觉得的好公司录用，等等的话。那么现在可以让你成为高手的工具已经出现，那就是javascirpt 设计模式。
程序员都非常清楚，在他们的开发过程中使用设计模式有多大的好处，我相信你也应该了解，如果你不了解，可以去书店或者网上看看设计模式的好处，对你有什么帮助，当你了解清楚以后，你就可以开始学习设计模式了。以前，关于javascript设计模式的书几乎没有，javascript的工作者都是靠查看其他开发语言的设计模式来得到一些结果，今天javascript关于设计模式的书出来啦。

JavaScript设计模式
【原 书 名】 Pro JavaScript Design Patterns
【原出版社】 Apress
【作　　者】(美)Ross Harmes;Dustin Diaz [同作者作品]
【译　　者】 谢廷晟[同译者作品]
【丛 书 名】 图灵程序设计丛书.Web开发系列
【出 版 社】 人民邮电出版社 【书 号】 9787115191281

web前端开发中，现在最困难的一门技术，也是必须会的一门技术，那就是javascript了，在很多朋友看来，javascript学习是非常有难度的，其实我也是这样认为的，但是只要你能够坚持不懈，有恒心，找到一个好的学习方法，我相信你会发现他的乐趣，而且会学有所成的。我在这里向大家推荐一下我的学习方法：
首先我向大家推荐几本书，他们都是由国外的工程师书写的，哈哈，也许大家会说，国外的工程师都是写的英文的书，我们怎么看得懂呢？嘿嘿，不要急嘛，由于他们是好书，而且我们中国人需要，所以已经由国人翻译，图灵出版社已经出版啦，现在已经有中文版啦，哈哈，不罗嗦啦，直接告诉大家是那些书吧！我在这里推荐两本：
1、javascript DOM 编程艺术
2、javascript 高级程序设计
按照上面的顺序阅读这两本书，一定要仔细哟，如果你记不住，就多看几次，在看完第一本书以后，希望你能多做做实例。这样有助于记忆和提高。
当你看完这两本书以后，相信你应该大有进步了哈！其实看书的目的是掌握他的一些基础知识和一些思想，最重要的还是要多练习。下面就给你一点任务吧！
看完第一本书后以后，你应该能写出：
1、tab选项卡
2、简单的动画
3、动态插入内容
4、可重用的函数
看完第二书以后，你的水平已经达到一个境界：
1、表单的验证
2、常用的动画效果
3、拖动
4、排序
5、ajax
6、面向对象的代码。