关于javascript 关于Web前端的一些小事2017-11-10 09:57:03

Web的无所不在是它的魅力。保证任何人都能无障碍地使用它,是一个最基本的原则。

 

   近年来,web技术日新月异。对于web开发人员来说,开发一个网站从某种意义上来说变得越来越简单。实际上并非如此,开发一个健壮的网站,还是需要我们付出巨大的努力的。本文将主要着重于讲述web开发中的前端部分。熟悉我的人都知道,我不擅长开发前端,相反前端是我最头疼的部分,我想很多程序员也与我类似。那么为什么本文要着重讲述前端呢?其实正是因为很多人不擅长前端,所以前端成了web开发中的重灾区。代码混乱,各种复制粘贴使网站变得臃肿和难以维护,甚至直接的影响了网站的可访问性和用户体验。

   本文并不会介绍前端的具体开发或是具体技术,更多的是介绍一些思想或是思路,也许会涉及一些简单的功能实现。主要是以javascript为基础。其实这些思想并不止局限于web开发,它更可以像是一种优秀的编程习惯。我想对于初涉web开发人员应该会有一些启示和帮助。  

   本文将会介绍前端中比较重要的思想,比如平稳退化,渐近增强。还有如何向后兼容,比如对象检测技术,浏览器嗅探技术。如何提高性能,比如减少http访问次数,合并脚本,压缩脚本,使用CDN。Ajax的优势和缺陷,如何在考虑可用性和可访问性使用Ajax。结构层、表示层和行为层的分离。另外还会提供一些javascript的经典代码,包含事件队列和一些动画效果的实现。

 

Web的分层

我们在浏览器里看到的网页其实是由以下三层信息构成的:

·       结构层

·       表示层

·       行为层

结构层是由HTML负责创建,标签对网页内容的语义和含义做出了描述。

表示层由CSS负责完成,CSS描述页面内容应该如何呈现。

行为层负责内容应该如何响应事件。主要由javascriptDOM实现。

在所有的产品设计活动中,选择最合适的工具去解决相应的问题是最基本的原则。

所以这三个层次尽可能的分离在开发健壮的网站中尤为重要,如何尽可能的分离在接下来的一些介绍都会有涉及。

平稳退化、渐近增强和向后兼容

  理论上讲,在如今的Web上有数十亿计的HTML文档,但事实上,只有一小部分有着良好的结构。质量不好的网站不仅影响用户的体验,有时候还会带来一些隐忧和后患。

易学易用的技术就像是一把双刃剑。因为容易学习和掌握,它们往往会在很短的时间内就为人们广泛接受,但也往往意味着缺乏高水平的质量控制措施。

   Javascript就是如此,许多网页设计者直接把一些现成的javascript代码直接剪贴到HTML文档里以使网页更加丰富多彩。实际上人们根本没考虑那些现成的javascript函数本身有没有漏洞,以及它们会不会给网页带来负面影响,不管你想通过javascript改变网页的什么行为,都一定要确认,为这个网页增加这种额外的行为是否确有必要?

平稳退化就是指如果正确的使用了javascript脚本,就可以让访问者在他们的浏览器不支持javascript的情况下仍能顺利得浏览你的网站。就是说,虽然某些功能无法使用,但最基本的操作仍能顺利完成。

  为网站用javascript添加新的功能,一定要考虑两个问题,第一个这么做会对用户的浏览体验产生什么样的影响,第二,如果用户的浏览器不支持javascript该怎么办?(网站的访问者完全有可能使用的是不支持javascript的浏览器,或者用户禁用了它。可能你会说现在这样的用户非常少,虽然确实如此,但这里面也许会存在非常重要的用户,比如爬虫,目前只有极少数的爬虫能够理解javascript,如果你的网站在没有了javascript下,不能访问,那么可能会严重影响网站在搜索引擎上的排名)

  实际上,我们可能还要考虑一种用户,他们使用屏幕读取软件来浏览网页。我们在设计网页时一定要注意到这种情况,自己的设计是不是会为特殊的用户带来困难。

  这里举个例子。比如我们想要打开一个新的浏览器窗口,我们会用到这个函数:

window.open(url,name,features)

 这里有一个链接

<a href=”#” onclick=”window.open(“http://www.example.com”);return false;”>LinkToExample</a>

如果在javascript有效的情况下在这里这个链接点击后会触发一个事件,打开一个新的浏览器窗口,这里的href属性是没有作用的,因为onclick事件中的return false会使浏览器对链接的本身事件失效。如果用户禁用了javascript,那么这个链接点击后显然什么也不会发生。在这个需求中实现平稳退化是比较简单的,只要补充好href即可。

<a href=” http://www.example.com” onclick=”window.open(“http://www.example.com”);return false;”> LinkToExample </a>

这样的话即使用户禁用javascript,这个链接仍然是有效的,这里代码可以简化为:

<a href=” http://www.example.com” onclick=”window.open(this.href);return false;”> LinkToExample </a>

 

内容就是一切

结构与样式分离

CSS(层叠样式表)是一项伟大的技术,它的最大的优点是能够帮助你将web文档的内容结构和版面设计分离开来。CSS 构成了一个表示层,为html文档里的元素添加各种各样的样式。这就是所谓渐近增强,用一些额外的信息去包裹原始数据。我们要注意保证即使没有这些额外信息,用户仍然可以顺利的看到原始数据。Javascript控制的是网站的行为,行为层的应用方式应该与表示层一样。

向后兼容

网站的用户来自于四面八方,所用的浏览器也是多种多样。大多数现代的浏览器或多或少支持javascript,但仍然存在古老的浏览器并不理解你的代码。针对这个问题的最简单的解决方案是,检查浏览器对javascript的支持程度。在javascript中一切都可视为对象,包括方法。所以最简单的方法就是把你要用的方法放在if语句中,如果方法存在则返回true,不存在则为false。这种方法就是对象检查。这么做就是为了让自己的代码有良好的向后兼容性。还有一种是浏览器嗅探技术,通过javascript来获取浏览器的品牌和版本信息,这种方法并不可靠,因为市面的浏览器众多,浏览器嗅探脚本会很复杂和冗长,而且有些浏览器会 “撒谎

 

关于性能

尽量少访问DOM和尽量减少标记

  访问DOM的方式会对脚本性能产生非常大的影响。不管什么时候,只要是查询DOM中的某些元素,浏览器都会搜索整个DOM树,从中查找可能匹配的元素。要是有多个函数重复做同一件事,同样会造成搜索浪费。在多个函数取得同一组类似元素,可以考虑重构代码,把搜索结果保存在全局变量里,或者把元素以参数形式传递给函数。

  在减少访问DOM的同时,还要注意尽量减少标记,这样就可以减少DOM树的规模,不仅可以提高浏览器渲染的速度,还可以提高搜索的速度。

合并和压缩脚本

  减少请求数量通常是在性能优化时首先要考虑的事情。尽可能避免在一个页面请求多次javascript脚本文件,可以将多个javascript脚本文件合并为一个。

  脚本在文档中的位置对页面初次加载的时间也有很大的影响。HTTP规范中说明,浏览器每次从同一个域名中最多只能同时下载两个文件,在下载脚本期间,浏览器不会下载其他文件,所有其他资源都要等待脚本加载完毕后才能下载。所以最好将脚本放置在文档末尾,</body>之前,避免放置在</head>之前。

  压缩脚本也是优化的一种重要方式,压缩指的是删除文档中所有不必要的字节,比如空格,注释,甚至是冗余代码。有许多现成的工具可以使用。我个人比较习惯用gulp。压缩后得到一个map文件和 js, css文件。map 文件其实相当于标志脚本具体代码位置的文件,通过该文件可以方便的在浏览器里调试你的样式和脚本。

这里推荐一个在线压缩javascript的网站 http://closure-compiler.appspot.com/home


 

不要被先进技术的光环左右了你的心智,必要时还要留一手。

结构化程序中的一条原则:函数应该只有一个入口和一个出口

 

一些比较重要的代码片段

addLoadEvent Simon Willison 编写。 在页面加载时执行多个函数,动态的绑定事件到window.onload事件上。

function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload !=’function’){
        window.onload=func;}
    else{
       window.onload=function(){
        oldonload();
        func();
       }
 }
}

这段代码将页面加载完毕时需要执行的函数创建为一个队列。如果有新的函数在页面加载时需要执行,则只需执行该方法即可。

 

位置

元素有一个属性是positionposition有四个可能的值:staticfixedrelativeabsoluteStaticposition的默认值,意思是将元素按照它们在标记里出现的先后顺序出现在浏览器窗口里。relative含义与static类似,不同的是relative可以通过float属性脱离文档的正常显示顺序。absolute可以将该元素摆放在容纳它的容器的任何位置。它的显示位置与文档的先后顺序无关,由topleftrightbottom等属性决定。

setTimeout(“function”,interval)

能够让某函数经过一段预定的时间之后才开始执行。

clearTimeout(variable)

取消正准备执行的函数。

CSS中的overflow属性:用来处理一个元素的尺寸超出其容器尺寸的情况

Overflow可可能取值有4种:visible- 不裁剪溢出内容、hidden-隐藏溢出内容、scroll-隐藏但显示滚动条、auto-溢出显示滚动条,不溢出不显示滚动条。





linweiyu

Something should be here;

0 Thoughts

Leave a Thought