javascript与网页的配合之道

Javascript经常用来制作网页上的视觉特效,而这些效果都是它通过操作css属性实现的,比如移动,隐藏,显示,半透明等,都要通过css来实现。

使用JS来实现网页特效时,要注意一些地方,避免javascript越俎代庖,做出画蛇添足的事。

1,不要用js来生成html

除非情况很特殊,比如网站后台等不需要seo的地方,否则都不要使用js来生成html——因为js生成的html代码搜索引擎是抓取不到的。

我曾经下载过很多js做的图片幻灯片效果,其中有几个例子都是用的纯JS实现整个效果,包括图片列表,图片的超链接目标,alt值,都用JS生成。这种代码不是说不好,这样写反而增加了JS脚本的难度,显得作者水平不错,但让JS新手望而却步。而且得不偿失的是,这整个效果对搜索引擎来说都是一片空白,毫无作用。

一般网页上的图片切换,都是整个网页的一个重点,同时网页也希望搜索引擎能重点对待这个图片切换里面的代码,比如他的链接地址,是非常重要的。这时候你就用普通的html代码来搭建好网页结构,搜索引擎反而能良好的识别。

而且JS生成html代码,就是操作dom,是一件很需要技巧的事,因为JS操作DOM的速度实在不能称之为高效。如果不注意,可能导致整个网页都加载的很慢。

2,当javascript失效的时候,网页不能出现大变形

很多情况都会导致js失效,比如js写错了,或者冲突,或者网速太慢导致JS没加载下来。如果JS失效时,网页就变得连作者都认不出来,那是个很大的败笔。

会在失效的时候导致网页变形的JS代码,一般都是前面所说的那种JS——因为JS加载失败,所以他生成的HTML也就不见了,后面的结构不变才怪。

我们可以通过css约束html,比如设置超出范围就隐藏什么的,确保元素变得很大也不会挤开其他的元素。

如何才能保证js失效的时候网页不变形呢?最简单的方法就是先把网页写好,看到不会变形了,再加入javascript效果

3,慎用行内style,多用css类

比如用JS来操作一个表格,让他隔行变色。最直接的办法就是用JS设置tr的背景色,但这个方法不好。因为变色的tr可能不只是背景色不一样,可能边框啊,td的对齐方式什么的也会变,如果一股脑儿写在style里面,不仅不美观,而且给JS增加不必要的长度。

关键是,行内style是不能重用的,而且不能操作到他的子元素。

而css类就不同了,可以在一个class里面定义很多样式,如果有html元素需要这个样式,只要用JS给他附加上一个className即可,方便快捷又美观。而且给一个元素加上一个className后,可以通过在css里定义,来让此元素的子标签也跟着变动。

———————-总结———————

javascript与网页的配合之道,简单的总结就是,让html,css,和js各司其职,不要因为JS写得不错,就让他去代替html或css的功能,这样做肯定会得不偿失的。

发表评论

电子邮件地址不会被公开。