92java

【转】 div + css误区

92java — Thu, 01 Nov 2007 20:46:47 +0800

作者: 92java 链接：http://92java.javaeye.com/blog/137438 发表时间: 2007年11月01日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

重构”的春风吹遍大江南北，互联网一时间风声鹤唳，“div+CSS”俨然已成为一种“时尚”，难以尽数的网站都不约而同地开始了自己的“重构”。然而打开这形形色色网站的源代码，却时常令人哑然失笑——

　　我们看到有嵌套6、7层的div布局，有不用table的表格，有纯div+a构成的页面，有成百上千的表现层class……现在关于标准的书籍越来越多，除了少数几本标榜“高级技巧”的书籍以外，很少有人不会在自己著作的前几章强调这样一句话——“结构与表现分离”。然而这些书籍的读者们，又有多少人认认真真地读过前几章呢？还是更多地直接跳过那些乏味的结构讲解，一头扎到貌似高深的布局技巧与Hack中去？

　　其实div+CSS这个说法从一开始就误导了太多的人，急功近利的心态则更是造成这种现象的罪魁祸首。一个习惯了table布局的网页制作接触标准的第一步，不应该是去盲目寻求实现各种布局的CSS技巧，而是努力改变自己的思维方式。

　　下面将结合我的切身体会谈一谈顺应标准的思维方式，其中有不少是我曾经走过的弯路，希望对刚刚接触标准的XDJM们有些帮助：

　　1、“节省代码”是营销手段，不是宗旨

　　“使用div布局可以比table布局节省更多的代码”，我在很多书籍和网站上见到过这句话。这句话本身是没错的，可以“节省代码”的确是网页标准化所带来的好处之一。然而切记，它只是“好处之一”，而不是“唯一好处”，更不是宗旨。“节省代码”更多的时候是我们用来说服那些顽固不化的老板的营销手段。网页标准化的唯一宗旨是“结构与表现分离”，而绝不是为了节省代码而节省代码。我曾经因为网站边栏甚至主体内容的表现形式相同而采用了统一的 class （至今还有一些书是这样教的），这样的确比分别命名id更节省代码，然而这样做的代价是代码失去了良好的结构。失去良好结构的后果是：一、源代码没有了可读性；二、网站增加了未知的维护成本。试想，当某一块内容因为需要而作出表现形式的变动，例如链接的颜色等等，我们就不得不去修改页面源文件，增加额外的 class，工作量比起只需要调整id分组就大了许多。而且长此以往，结构将会越来越差，形成难以逆转的恶性循环。

　　还有一种情况，出现在id的命名方面，也是本人曾经犯过的错误。那时为了“节省代码”，而把主菜单命名为“mm”，二级菜单命名为“m2”，三级菜单为“m3”，结果严重降低了网页的可读性，使其他同事很难接手，图省事却累了自己。同理，文件及文件夹命名方面也不宜过简，象《网站重构》里建议把图片都用“i”目录存放，个人以为并不可取，除非你能为这种高度缩写的目录结构撰写详细说明并保证每个相关人员包括其他制作人员、开发、甚至懂行的老板……都能理解和执行，否则只会给你自己增添不必要的麻烦。

　　2、ID是狙击枪，class是双刃剑

　　想要做好网页结构，id与class都是必须熟练掌握的，所谓“两手抓，两手都要硬”。ID就象狙击枪一样，可以帮助我们精准地定位要想要加载样式的元素；而class则是侠客的佩剑，信手拈来更加轻盈灵便，两者的结合能够实现结构良好且表现丰富的页面。然而现在有一种错误的观点，就是id完全可以用class来取代，事实上许多网页源代码也的确如此，打开来通篇class，找不到一个id。造成这种现象的理由有很多种，然而自table时代传下来的根深蒂固的“class=CSS”的观念才是本因。的确，class比id用途更广更灵活，但也必须意识到，class对于构建良好的网页结构远不如id有效。id的强制唯一性使得我们可以很容易通过id检索到我们需要的任意模块，而class则没有这个优势。虽然我们可以为模块定义唯一的 class名，但前提是——只有制作者本人可以动网页样式。否则换一个稍微懒一些伙计，看到样式相同便直接把前面的class拿来套用，其结果就是我们发现网页里有十几个模块都叫做“gonggao”或者“xinwen”，以至于为了区分还不得不加上大量的html注释，这样的结果显然并不是我们想要的。再者就是前面提到的，通过通用class所节省下来的代码，又不得不在每个单独定义的class中挥霍掉。

　　ID是狙击枪，class是双刃剑，合则两利，分则两败。

　　3、并不是所有的内容都需要div做“容器”

　　主菜单究竟是用

在只包含了一个

”，也有人写做

或者< a>。在这些“容器”只包含了一个标签的时候，它们是否还有存在的必要？直接写成会破坏结构吗？会缺乏语义吗？会影响布局吗？换一种思路，你也许就会有不一样的收获。

　　4、工作上也做到“结构与表现分离”

　　关于这一点，网络上很多高手都是这样建议的，也就是先打开编辑器，把结构完整地写出来，再去CSS里写表现，而尽量不去动已经写好的结构。

　　然而以看书为主要学习方式的人却很难体会，因为关于标准的书籍多半是手把手来教的，也就是必然是结构表现结合，循序渐进。虽然有些书籍有这方面的建议，但短短的几句话远不如读书过程中的潜移默化。在制作人员能够对结构良好把握的时候，同时写结构与表现也不会对结果有太大的影响。但以我的经验，结构表现分离的工作方式，要比同时写结构与表现效率高很多，同时也不容易遗漏页面上的元素。

　　当然，所谓的“结构与表现分离”并不是完全不考虑表现，想要兼顾到表现，就要保证——在不破坏结构的前提下，CSS选择器能够选择到尽量多的内容。在哪些地方加class，或者用哪些标签来区分，是一个见仁见智的地方，相信每个人都有自己的体会。而结合不同的设计稿，有时候也需要做出相应的变化，然而这些变化都应该有一个同样的前提——不破坏代码的结构和可读性。

　　再就是，一定要意识到，任何可视化的工具都是魔鬼。它们可视化界面下所呈现的效果，往往与真实浏览器相差千里，而我们真正要兼容的是浏览器，不是编辑器的可视化界面。

　　5、CSS不是万能的，没有CSS也不是万万不能的

　　相比于CSS1.0时代，今天CSS可以完成更多的事情，然而需求永远是领先于技术的，CSS无法完成网页所有的表现层工作，有时候我们必须结合JS或者其他语言来实现一些效果。而另一些时候，用JS的方法比只靠CSS简单得多，并且代码结构更加良好——最典型的例子就是下拉菜单。这些时候，我们要说服自己，或者说服老板与客户，去采用更简单更合理的方式。因为DOM同样是网页标准的重要组成，并不是使用了JS我们的网页就降低了效率或是不再标准，恰恰相反，这是对JS最大的误解。说到这里不得不提一点，就是今天的时代，比以往更要求每个职业了解更多的相关知识，做设计的人要懂一点交互和制作，做制作的也必须了解设计和程序，尤其是JS这样的前端技术，只有这样，你和同事才能够更好地合作，个人的发展前景也会更加光明。

　　没有CSS，指的是当我们的网站因为各种未知的原因导致CSS文件载入失败，不要因此而慌乱，这是考验我们代码质量的最佳时机。在没有CSS的时候，如果网页仍旧保持良好的可读性，这成果要远比通过W3C验证更值得我们自豪。

学ajax后发现css很重要。于是买了本css的书在读。今天偶尔看到这篇文章。觉得完全是作者的经验之谈。。。于是贴出来。希望大家一起共享。

本文转载自http://www.wang48.com/jishubaodianview/?jsd_id=9957;

已有 1 人发表留言，猛击->>这里<<-参与讨论

JavaEye推荐

sql查询原理

92java — Fri, 27 Jul 2007 22:27:19 +0800

作者: 92java 链接：http://92java.javaeye.com/blog/106208 发表时间: 2007年07月27日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

一 sql语句的执行步骤
1）语法分析，分析语句的语法是否符合规范，衡量语句中各表达式的意义。
2）语义分析，检查语句中涉及的所有数据库对象是否存在，且用户有相应的权限。
3）视图转换，将涉及视图的查询语句转换为相应的对基表查询语句。
4）表达式转换，将复杂的 SQL 表达式转换为较简单的等效连接表达式。
5）选择优化器，不同的优化器一般产生不同的“执行计划”
6）选择连接方式， ORACLE 有三种连接方式，对多表连接 ORACLE 可选择适当的连接方式。
7）选择连接顺序，对多表连接 ORACLE 选择哪一对表先连接，选择这两表中哪个表做为源数据表。
8）选择数据的搜索路径，根据以上条件选择合适的数据搜索路径，如是选用全表搜索还是利用索引或是其他的方式。
9）运行“执行计划”

二 oracle 共享原理
ORACLE将执行过的SQL语句存放在内存的共享池(shared buffer pool)中，可以被所有的数据库用户共享
当你执行一个SQL语句(有时被称为一个游标)时,如果它和之前的执行过的语句完全相同, ORACLE就能很快获得已经被解析的语句以及最好的执行路径. 这个功能大大地提高了SQL的执行性能并节省了内存的使用
三 oracle 语句提高查询效率的方法
.1：.. where column in(select * from ... where ...);
2：... where exists (select 'X' from ...where ...);
第二种格式要远比第一种格式的效率高。在Oracle中可以几乎将所有的IN操作符子查询改写为使用EXISTS的子查询
使用EXIST，Oracle系统会首先检查主查询，然后运行子查询直到它找到第一个匹配项，这就节省了时间
Oracle系统在执行IN子查询时，首先执行子查询，并将获得的结果列表存放在在一个加了索引的临时表中

避免使用having字句
避免使用HAVING子句, HAVING 只会在检索出所有记录之后才对结果集进行过滤. 这个处理需要排序,总计等操作. 如果能通过WHERE子句限制记录的数目,那就能减少这方面的开销

已有 0 人发表留言，猛击->>这里<<-参与讨论

JavaEye推荐

加入阿里巴巴，发展潜力无限
Windows7在微软WinHEC 2008上揭开神秘面纱
搜狐网站诚聘Java、PHP和C++工程师

程序员十个必备素质

92java — Fri, 13 Jul 2007 20:46:02 +0800

作者: 92java 链接：http://92java.javaeye.com/blog/100836 发表时间: 2007年07月13日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

第一条：
不可抄袭他人之创意，不论有何前提；
Not to copy other’s creative work, under no circumstances;

第二条：
不可过分依赖电脑技术，切记，你是一名设计师，不是一名电脑修图员；
Not to rely completely on computer technology, it is a tool only and cannot
substitute your creativity. Remember, you are a designer, not a computer
graphic editor;

第三条：
不可一直追随流行设计风格，现在流行的，必是马上过时的；
Be a creator and not a fashion-follower because a trendy style today would
become an out-dated one tomorrow;

第四条：
各用10%的精力涉足十门设计学科，不如用100%的精力涉足于一门学科；
Trying ten design fields simultaneously but badly is worst than concentrating on one
field and master it;

第五条：
不可将自己都认为有问题的作品向公众发表；
Be professional and not to release any art works that you don’t like;

第六条：
不可因低价商业项目，而放低对作品的要求；
Not to lower the quality in view of low business value of an art work;

第七条：
不可凭主观意识评价他人作品；不可人云亦云；
Not to criticize other’s artwork merely on the ground of one’s preferences
nor just replicate comment from someone;

第八条：
不可闭门造车；了解一些历史、哲学和人文，将对你的作品大有好处；
Not to create artwork without any ground. Great works usually come from
the understanding of the culture, history and philosophy;

第九条：
不论身份高低，须保持歉虚的态度；
Keep yourself modest to people, no matter you are just a novice or a master;

第十条：
永远坚信：设计可以拯救你的国家，可以改变世界。
Always believe that design can save your country and change the world.
这是在网上逛博客(http://blog.d8in.com/posts/94.html)的时候看到的设计师十戒,但我认为一名好的程序员也应该具备这样的素质，希望以此为戒，当好名程序员。
注：如果这是你的博客上面的内容，而我没有及时和你练习，请你留言我马上处理。谢谢！

已有 0 人发表留言，猛击->>这里<<-参与讨论

JavaEye推荐

加入阿里巴巴，发展潜力无限
搜狐网站诚聘Java、PHP和C++工程师
Windows7在微软WinHEC 2008上揭开神秘面纱

xml学习笔记(DOM重要接口)

92java — Wed, 11 Jul 2007 18:29:52 +0800

作者: 92java 链接：http://92java.javaeye.com/blog/100180 发表时间: 2007年07月11日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

最近学习ajax，去年ajax技术已经热炒起来了，今年短短的半年就已经普及了，流行速度之快，令人咂舌。最近ajax技术如此之火，连我这个菜鸟也找本书来学习一下(跟下流行的风)
ajax是什么不用我在这里多废话了啊。。今天主要和大家一起交流下Dom接口，Dom是w3c定义的一组和程序，系统无关的规则，今天主要学习一下Dom的几个主要接口。
1：Document接口
Document接口代表了整个xml文档，提供了对文档中的数据进行访问和操作的入口。由于元素，文本节点，注释，处理指令等都不能脱离文档的上下文关系而独立存在，所有在Document结论提供了创建其他节点的对象的方法。通过该方法创建的节点对象都有一个ownerDocument属性，用来表明当前节点是由谁创建的以及节点同Document之间的联系
Document节点是Dom树中的根节点，也即对xml文档进行操作的入口节点，通过Document节点，可以访问到文档中的其他节点
属性：
Doctype DocumentType类型的只读属性，记录文档的类型声明
documentElement 为访问文档的根元素提供了一个简单的方法
方法
CreateAttribute 创建一个具有给定名称的属性节点然后可以利用setAttributeNode方法把改属性设置为某个元素的属性
createElement 创建一个指定类型的元素节点
createTextNode 创建一个具有指定的字符串内容的文本节点
getElementbyID 返回一个具有给定ID的元素节点，如果没有这样的元素存在就返回null
getElementByTagName 返回一个节点的集合(NodeList)该集合中所有的元素都具有参数中所给定的标记名，集合中的所有元素安装在Dom树中的前序排列进行排序
2：Node接口
Dom规范中有很大的一部分接口都是从Node接口继承过来的如：Element，attr，CDATASection等接口，都是从Node继承过来的
在DOM树中，一个node接口实例代表了树中的一个节点，DOM树中包含很多各种不同类型的节点，这些节点基本都是从Node继承过来的。Node接口定义了所有不同类型的节点都具有的属性和方法
node的属性：
attribute 只读属性如果当前节点是Element_Node(元素节点)类型的节点
，则NameNodeMap中包含了当前节点的所有属性，如果当前的节点不是Element_Node，这属性值为null
childNodes 包含了当前节点的所有子节点，如果当前节点没有字节点，nodeList中就不包含任何节点
firstChild 当前节点的第一个子节点
lastChild 当前节点的最后一个子节点
nextSibling 当前节点上午直接后继节点
nodename 当前节点的名字，对于不同的节点类型，有不同的取值
nodeType 当前节点的类型
nodeValue 当前节点的值，对于不同的节点类型，该属性具有不同的取值
parentNode 当前节点的父节点
perviousSibling 当前节点的直接前驱节点
方法：
appendChild 把参数中传递过来的newChild添加到当前接受的所有的子节点列表的最后
hasChildNodes 判断当前节点是否有字节点
createElement 创建一个指定类型的元素节点
insertBefore(node,newchild,node,refchild)把节点newChild插入到当前节点的子节点refChild之前
removeChild 从当前节点的子节点中删除oldChild节点并返回oldChild
3：NodeList集合
NodeList接口提供了对节点集合的抽象定义，NodeList用于表示有顺序关系的一组节点
在DOM中，nodelist 的对象是动态的，也就是说对文档的改变，会之间反映到相关的NodeList对象中
NodeList中的每个item都可以通过一个索引来访问，该索引值从0开始
NodeList的属性length表示改节点集合中的节点个数，访问集合中的节点的合法索引值为0到length-1之间的数
item，返回节点集合中的第index个节点
4：NameNodeMap
实现了NameNodeMap接口的对象中包含了可以通过名字来访问节点的集合
NameNodeMap并不是从NodeList继承过来，NameNodeMap所包含的节点是无序的，实现了NameNodeMap接口对象所包含的节点也可以通过索引进行访问
getNameItem(string name) 返回给定名称的节点,如果没有改节点集合中没有这样节点，就返回null
item(long index) 返回节点集合中的第index个节点，index的取值从0
removeNamedItem(string name) 删除给定名称的节点如果在当前节点集合中存在给定名称的节点，返回该节点
setNameItem(node arg) 把给定节点名的节点添加到当前节点集中，如果在当前节点集中已经存在相同节点明的节点了。那么就用现在节点替换已经存在的节点
最后，在Java中解析xml的时候要注意一点。Dom里面的主要几个类如Element，attribute，text 等类都死继承node接口(这是我学了好久才注意到的。希望大家不要象我那么笨)
好了，，就到这里吧(以上是我学习整理的笔记，如果侵犯了你的版权问题，请留言我马上处理)。

已有 1 人发表留言，猛击->>这里<<-参与讨论

JavaEye推荐

搜狐网站诚聘Java、PHP和C++工程师
Windows7在微软WinHEC 2008上揭开神秘面纱
加入阿里巴巴，发展潜力无限