代码改变世界

Javascript 关于平稳退化、性能考虑

2016-08-10 09:41  yojiaku  阅读(220)  评论(0)  编辑  收藏  举报

open.html 文件，两个打开弹窗的拙劣方法

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
</head>
<body>
	<!-- use psseudo-protocol invoking function popUp() ,however, this method is not good -->
	<a href="javascript:popUp('http://www.baidu.com/');"> Example </a>
	<!-- you can use follow method to invoke popUp() , we should set aside retreat for javascript coding because numbers of searchbots can not understand javascript -->
	<a href="http://www.baidu.com/" onclick="popUp('http://www.baidu.com'; return false;"> Example </a>
	<!-- you can also use this :
	<a href="http://www.baidu.com/" onclick="popUp(this.getAttibute('href'); return false;"> Example </a>
	-->

<script type="text/javascript">
	/* window.open(url,name,features):
		url : the address of the new web page, if you ignore it, it will open a blank page;
		name : the name of the new web page, you can use this name connect with new window;
		features : a string .
	 */
	 function popUp(winURL)
	 {
	 	window.open(winURL,"popup","width=320,height=480");
	 }
</script>
<!-- The safest and most useful method is put all the javascript codings out of html file, amd use "src" to invoke javascript functions . Please look example.html & example.js to find how to use this function-->
</body>
</html>

　　

example.html & example.js 文件，相较open.html文件使用的方法更好的方法：

example.html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Example</title>
</head>
<body>
<a href="http://www.baidu.com/" class="popup"> Example </a>
<script src="example.js"></script>
</body>
</html>

　　

example.js:

window.onload = preparelinks;
function preparelinks()
{
	var links = document.getElementsByTagName("a");  // put every <a> tags into an array in order to loop through the data
	for(var i = 0;i < links.length;i++)  
	{
		if(links[i].getAttribute("class") == "popup")  // if it accords with requirement
		{
			links[i].onclick = function()
			{
				popUp(this.getAttribute("href"));
				return false;
			}
		}
	}

	function popUp(winURL)
	{
		window.open(winURL,"popup","width=320,height=480");
	}	
}

　　

运行结果：

 

Summary:

In this unit, we know the concept of "graceful degralation", because many searchbots can not understand what is javascript.

We should put javascript codings into another file and use src to invoke it into html file, just like CSS.

And we must know how to do "object detection", for example:
if three is a function using getElementById(), we can invoke getElementById() to check user's browser whether it supports this method, be attention that when you check this method , you ought to delete the "()" after the getElementById , if not, what you check is the result of using this method, no matter whether this method exists.
==> 
function myFunction()
{
    if(document.getElementById)
    {
        statements using getElementById
    }
}
Hence, if the browser does not support getElementById(), it will never carry out the statements which function uses this method.

Another point is "Script file compression".
Some tools:
Douglas Crockford 's JSMin (http://www.crockford.com/javascript/jsmin.html);
Yahoo‘ YUI Compressor (http://developer.yahoo.com/yui/compressor); 
Google's Closure Compiler (http://closure-compiler.appspot.com/home ).

平时写网页的时候没有注意到性能优化和平稳退化，对象检测之类的东西，看来以后有必要注意这一点。