发布于 2016-08-21 06:40:37 | 101 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程,程序狗速度看过来!
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
public void ProcessRequest(HttpContext context)
{
int delay = 0;
if (!String.IsNullOrEmpty(context.Request["delay"]))
{
delay = Convert.ToInt32(context.Request["delay"]);
}
if (delay > 0)
{
System.Threading.Thread.Sleep(1000);
}
string filePath = context.Request["file"].ToString();
string fileContent = String.Empty;
using (StreamReader sr = new StreamReader(context.Server.MapPath(filePath)))
{
fileContent = sr.ReadToEnd();
}
if (filePath.EndsWith(".js"))
{
context.Response.ContentType = "application/x-javascript";
}
else
{
context.Response.ContentType = "text/plain";
}
context.Response.Write(fileContent);
}
<html>
<head>
<title></title>
<script src="./js/jquery-1.4.4.js"
type="text/javascript"></script>
<script src="./service.ashx?file=js/jquery-ui.js&delay=2000"
type="text/javascript"></script>
<script>
alert(typeof (jQuery.ui));
</script>
</head>
<body>
</body>
</html>
Firefox 3.6 |
|
IE 8 |
|
Chrome 10 |
|
Safari 4 |
|
Opera 11 |
可以看出各个主流浏览器的行为一致。虽然jQueryUI在服务器延迟了2秒钟再返回,但是后引入的内联JavaScript还是等待了2秒,等前面引入的JavaScript执行完毕才执行。这也是著名的JavaScript顺序执行的特性。
3. 通过JavaScript添加script标签(test3.htm)
我们首先定义一个addScript函数,用来引入外部或者内联JavaScript。test3.htm的页面源代码如下:
<html> <head> <title></title> <script src="./js/jquery-1.4.4.js" type="text/javascript"></script> <script> function addScript(url, inline) { var head = document.getElementsByTagName("head")[0]; var script = document.createElement('script'); script.type = 'text/javascript'; if (inline) { script.text = url; } else { script.src = url; } head.appendChild(script); } $(function () { addScript('./service.ashx?file=js/jquery-ui.js&delay=2000'); addScript('alert(typeof(jQuery.ui));', true); }); </script> </head> <body> <div id="container"> </div> </body> </html>
Firefox 3.6 |
|
IE 8 |
|
Chrome 10 |
|
Safari 4 |
|
Opera 11 |
可见,通过JavaScript在DOM加载完毕后再引入外部或者内联JavaScript时,Firefox和Opera的行为一致,能够确保JavaScript的执行顺序和引入顺序一致。但是IE8, Chrome, Safari 却不能保证这个执行顺序。
虽然各种浏览器在确保执行顺序方面不尽相同,不过这时的最大好处是多个JavaScript文件能够并行下载,这在所有浏览器中行为一致。当然这不是这篇文章的主题,可以Google更多细节。
如何解决各个浏览器的不一致性,下面提供了两个解决方案:
4. 方案一,如何在动态添加script标签时确保执行顺序
有时页面逻辑要求我们必须通过上面的方式动态执行JavaScript,那么如何确保所有浏览器下的执行顺序(目前只有Firefox和Opera确保执行顺序)。
其实解决方案很简单,我们为函数执行添加一个complete的回调函数就行了。下面的test4.htm给出了具体的解决方案:
<html> <head> <title></title> <script src="./js/jquery-1.4.4.js" type="text/javascript"></script> <script> function addScript(url, inline, callback) { var head = document.getElementsByTagName("head")[0]; var script = document.createElement('script'); script.type = 'text/javascript'; if (inline) { script.text = url; } else { script.src = url; script.onload = script.onreadystatechange = function () { if (!script.readyState || script.readyState === 'loaded' || script.readyState === 'complete') { if (callback) { callback(); } script.onload = script.onreadystatechange = null; }; }; } head.appendChild(script); if (inline && callback) { callback(); } } $(function () { addScript('./service.ashx?file=js/jquery-ui.js&delay=2000', false, function () { addScript('alert(typeof(jQuery.ui));', true); }); }); </script> </head> <body> <div id="container"> </div> </body> </html>
Firefox 3.6 |
|
IE 8 |
|
Chrome 10 |
|
Safari 4 |
|
Opera 11 |
<html> <head> <title></title> <script src="js/jquery-1.4.4.js" type="text/javascript"></script> <script> $(function(){ $('#container').html('<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text\/javascript"><\/script>' + '<script>alert(typeof(jQuery.ui));<\/script>'); }); </script> </head> <body> <div id="container"> </div> </body> </html>
Firefox 3.6 |
|
IE 8 |
|
Chrome 10 |
|
Safari 4 |
|
Opera 11 |