手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

电信网通双线站点使用JavaScript实现自动选择

Submitted by gouki on 2009, May 25, 11:53 AM

说实话，这种切换方式，我真的没有考虑过。所以感到特别有新意。。。

原文：http://xinsync.xju.edu.cn/index.php/archives/5013
内容：

网站打开的速度快是相当重要的，不管你是用的什么网络，都打开的很快。我们且不谈论所做产品的初期发展用户人群因为这没有多大意义，如果你定位为学生，那么根据我们自身大学四年的经验，同学中间用电信、校园网的比例基本上变数太大。

值 得庆幸的是，现在我们已经实现电信、网通双线北网通、南电信是我们国家的一个特色。更甚至07年春节爆出电信与网通内部协议，内容大概是南北互不侵犯各自 的领域。因此，如果要立足做一个成功的互联网产品，必须不要管用户来自于哪里，用的什么网络环境。这最后的解决方案就是电信、网通双线。还有个间隙–校 园网，比较好的是校园网跟网通有很宽的光纤直连，物理环境可以用米来解决。

技术处理
<img src=”http://www.xinsync.com/notexist” width=”1″ height=”1″ onerror=”javascript:top.location=’http://www.xinsync.com’”>
<img src=”http://cnc.xinsync.com/notexist” width=”1″ height=”1″ onerror=”javascript:top.location=’http://cnc.xinsync.com’”>

这是电信、网通自动选择的核心代码，天哪，太神奇了，竟然是js实现的。

解 释： src里边放的是一个不存在的地址，这样2个img打开的时候都会出错，都会触发onerror事件,但是你的浏览器对这2个img加载、判断出错有个先 后顺序，而这个先后顺序取决于你的浏览器去连2个url的快慢程度，这就表现为http请求两个域名的快慢。
假如你是校园网或者网通，同时去连 www.xinsync.com(这个域名是绑定到电信的一个ip)、cnc.xinsync.com(这个域名是绑定到网通的一个ip)
当然就会先触发onerror=”javascript:top.location=’http://cnc.xinsync.com’”
这样就打开了http://cnc.xinsync.com

电信同理，最后就实现了校园网、网通用户打开的是http://www.xinsync.com/notexist，电信用户打开的是http://www.xinsync.com/notexist

Javascript | 评论:1 | 阅读:16330

addEventListener attachEvent用法

Submitted by gouki on 2009, May 23, 12:09 PM

半夜看书的时候，莫莫问我如何bind事件，我告诉他jquery直接bind就可以了。但莫莫告诉我说，是直接用原生代码。由于没有接触过，只能问google了。

查下来，几乎所有的文章都是大同小异。看来在国内ctrl+C,ctrl+v是蔚然成风（当然，我也经常这么做，给大家带来的不便，实在抱歉）

顺手看到一篇英文的介绍，发现挺不错。原文地址为：http://www.captain.at/howto-addeventlistener-attachevent-parameters.php

国内的文章都着重于介绍怎么绑定。如何绑定多个，但，对于绑定的元素本身的事件却没有介绍。比如我绑定在ID为xxx的元素上的click事件怎么办。

例子都是用alert来举例，比如：

JavaScript代码
  1. function test()  
  2. {  
  3.     alert('test');  
  4. }  
  5. document.getElementById('xx').addEventListener('click',test,false);  
几乎都是这样的例子，就是没有一篇文章介绍，如果test方法有参数怎么办。

那篇英文的就介绍的很详细。

假设绑定事件为：

JavaScript代码
  1. if(window.addEventListener){ // Mozilla, Netscape, Firefox  
  2.     object.addEventListener('mouseover', testevent, false);  
  3.     object.addEventListener('click', testevent, false);  
  4.     object.myflag = "test";  
  5.     object.mydata = "123";  
  6. } else { // IE  
  7.     object.attachEvent('onmouseover', testevent);  
  8.     object.attachEvent('onclick', testevent);  
  9.     object.myflag = "test";  
  10.     object.mydata = "123";  
  11. }  
触发的testevent如下：
JavaScript代码
  1. function testevent(evt){  
  2.     var e_out;  
  3.     var ie_var = "srcElement";  
  4.     var moz_var = "target";  
  5.     var prop_var = "myflag";  
  6.     // "target" for Mozilla, Netscape, Firefox et al. ; "srcElement" for IE  
  7.     evt[moz_var] ? e_out = evt[moz_var][prop_var] : e_out = evt[ie_var][prop_var];  
  8.     alert(e_out);  
  9.     prop_var = "mydata";  
  10.     evt[moz_var] ? e_out = evt[moz_var][prop_var] : e_out = evt[ie_var][prop_var];  
  11.     alert(e_out);  
  12. }  
看这个例子就可以很明显的知道，第一个参数就是event，自身ID，就是event["target"]或者event["srcElement"]（这个与IE和FF有关）。

而这个event["target"]其实就相当于document.getElementById("xxx")，剩下的操作就与原来一样了。

介绍的有点乱，大概意思就是这样

 

Javascript | 评论:2 | 阅读:19325

js Loader

Submitted by gouki on 2009, May 22, 4:41 PM

Javascript的后加载，很多人都写过，这是为了防止最初加载的JS过多影响网速 。看到风雪之隅写了一个，看上去挺漂亮就转载了一下。。。

原文：http://www.laruence.com/2009/05/21/829.html

示例：

JavaScript代码
  1. var loader = Loader;  
  2.   loader.onReady = function(){  
  3.      alert('全部载入完成');  
  4.   }  
  5.       
  6.   loader.on('onLoad', function(name) {  
  7.       alert(name + '载入完成');  
  8.   });  
  9.   loader.load([  
  10.       'http://www.laruence.com/1.js',  
  11.       'http://www.laruence.com/test.js',  
  12.       'http://www.laruence.com/main.js'  
  13.     ]  
  14.   );  


源码：

JavaScript代码
  1. /** 
  2.  * Eve Js Loader 
  3.  * @version 1.0.1 
  4.  * @author laruence<laruence at yahoo.com.cn> 
  5.  * @copyright (c) 2009 www.laruence.com 
  6.  */  
  7.    
  8. /** 
  9.  * a global object instance, you can easily change to a class definition 
  10.  */  
  11. var Loader = {  
  12.     /** 
  13.      * @var onLoad  when load a individual file completed , 
  14.      * this event will be fired * @param string name  loaded script file name 
  15.      */  
  16.     onLoad : function(name){},  
  17.     /** 
  18.      * @var onReady when all scripts loaded, this event will be fired 
  19.      */  
  20.     onReady : function(){},  
  21.     /** 
  22.      * a empty constructor 
  23.      */  
  24.     init : function(container) {  
  25.     },  
  26.     /** 
  27.      * a empty error handler 
  28.      */  
  29.     handlerError : function(e) {  
  30.         alert(e);  
  31.     },  
  32.     /** 
  33.      * event register 
  34.      * @param string evt  event name 
  35.      * @param function handler 
  36.      */  
  37.     on : function(evt, handler) {  
  38.         switch ( evt.toLowerCase() ) {  
  39.             case 'load' :  
  40.                 this.onLoad = handler;  
  41.             break;  
  42.             case 'ready' :  
  43.                 this.onReady = handler;  
  44.             break;  
  45.             default :  
  46.             break;  
  47.         }  
  48.         return true;  
  49.      },  
  50.     /** 
  51.      * private method 
  52.      */  
  53.     _load : function(path, callback) {  
  54.         try {  
  55.             var script = document.createElement('script');  
  56.             script.src = path;  
  57.             script.type = "text/javascript";  
  58.             document.getElementsByTagName("head")[0].appendChild(script);  
  59.             if( script.addEventListener ) {  
  60.                 script.addEventListener("load", callback, false);  
  61.             } else if(script.attachEvent) {  
  62.                 script.attachEvent("onreadystatechange", function(){  
  63.                         if(script.readyState == 4  
  64.                             || script.readyState == 'complete'  
  65.                             || script.readyState == 'loaded') {  
  66.                             callback();  
  67.                         }  
  68.                 });  
  69.             }  
  70.         } catch(e) {  
  71.             this.handlerError(e);  
  72.             callback();  
  73.         }  
  74.     },  
  75.     /** 
  76.      * start loding process 
  77.      * @param array scripts  files want to be loaded 
  78.      */  
  79.     load : function(scripts) {  
  80.         var total = scripts.length;  
  81.         var _self  = this;  
  82.         var indicator = arguments[1] || 0;  
  83.         if ( indicator >= total ) {  
  84.             _self.onReady();  
  85.             return true;  
  86.         }  
  87.    
  88.         var callee = arguments.callee;  
  89.         var script = scripts[indicator];  
  90.         this._load(script, function() {  
  91.             _self.onLoad(script);  
  92.             callee.apply(_self, [scripts, ++indicator]);  
  93.         });  
  94.         return true;  
  95.     }  
  96. }  


说到这里，其实，又让我想起了code.google.com提供的googleapi的加载方式，他提供了一些常用JS类库的加载，首先，它加载了googleapi：http://www.google.com/jsapi，然后就可以调用了

XML/HTML代码
  1. <script src="http://www.google.com/jsapi"></script>  
  2. <script>  
  3.   // Load jQuery  
  4.   google.load("jquery", "1");  
  5.   
  6.   // on page load complete, fire off a jQuery json-p query  
  7.   // against Google web search  
  8.   google.setOnLoadCallback(function() {  
  9.     $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&v=1.0&callback=?",  
  10.   
  11.       // on search completion, process the results  
  12.       function (data) {  
  13.         if (data.responseData.results &&  
  14.             data.responseData.results.length > 0) {  
  15.           var results = data.responseData.results;  
  16.             
  17.           for (var i=0; i < results.length; i++) {  
  18.             // Display each result however you wish  
  19.             alert(results[i].titleNoFormatting);  
  20.           }      
  21.         }  
  22.           
  23.       });  
  24.     });  
  25. </script>  

方式和原理差不多。仅作参考吧。。。

Tags: loader

Javascript | 评论:0 | 阅读:17964

jQuery性能优化指南（3）

Submitted by gouki on 2009, May 20, 5:20 PM

原文来自：https://docs.google.com/View?docID=dft4vhq9_23cnccgwc7&revision=_latest

8，尽量使用ID代替Class。
 

前面性能优化已经说过，ID选择器的速度是最快的。所以在HTML代码中，能使用ID的尽量使用ID来代替class。
看下面的一个例子：

CSS代码
  1. // 创建一个list  
  2. var $myList = $('#myList');  
  3. var myListItems = '<ul>';  
  4. for (i = 0; i < 1000; i++) {  
  5.      myListItems += '<li class="listItem' + i + '">This is a list item</li>'; //这里使用的是class  
  6.  }  
  7. myListItems += '</ul>';  
  8. $myList.html(myListItems);  
  9. // 选择每一个 li  
  10.  for (i = 0; i < 1000; i++) {  
  11.     var selectedItem = $('.listItem' + i);  
  12. }   

 

在代码最后，选择每个li的过程中，总共用了5066毫秒，超过5秒了。

接着我们做一个对比，用ID代替class：

JavaScript代码
  1. // 创建一个list  
  2. var $myList = $('#myList');  
  3. var myListItems = '<ul>';  
  4. for (i = 0; i < 1000; i++) {  
  5.     myListItems += '<li id="listItem' + i + '">This is a list item</li>'; //这里使用的是id  
  6. }  
  7. myListItems += '</ul>';  
  8. $myList.html(myListItems);  
  9.  // 选择每一个 li  
  10. for (i = 0; i < 1000; i++) {  
  11.      var selectedItem = $('#listItem' + i);  
  12. }   
 

在上段代码中，选择每个li总共只用了61毫秒，相比class的方式，将近快了100倍。
 
 

 

9，给选择器一个上下文
 

jQuery选择器中有一个这样的选择器，它能指定上下文。
jQuery( expression, context );

通过它，能缩小选择器在DOM中搜索的范围，达到节省时间，提高效率。
普通方式：
$('.myDiv')
改进方式：
$('.myDiv' , $("#listItem") )
 
 

10，慎用 .live()方法（应该说尽量不要使用）
 

这是jQuery1.3.1版本之后增加的方法，这个方法的功能就是为 新增的DOM元素 动态绑定事件。
但对于效率来说，这个方法比较占用资源。所以请尽量不要使用它。
例如有这么一段代码:

XML/HTML代码
  1. <script type="text/javascript" >  
  2. $(function(){  
  3.     $("p").click(function(){  
  4.          alert( $(this).text() );  
  5.      });  
  6.     $("button").click(function(){  
  7.         $("<p>this is second p</p>").appendTo("body");  
  8.     });  
  9. })   
  10. </script>  
  11. <body>  
  12.     <p>this is first p</p> <button>add</button>  
  13. </body>  

运行后，你会发现 新增 的 p元素，并没用被绑定click事件。

你可以改成.live("click")方式解决此问题，代码如下：

JavaScript代码
  1. $(function(){  
  2.     $("p").live("click",function(){ //改成live方式  
  3.          alert( $(this).text() );  
  4.      });  
  5.     $("button").click(function(){ $("<p>this is second p</p>").appendTo("body"); });  
  6. })  

但我并不建议大家这么做，我想用另一种方式去解决这个问题，代码如下：

JavaScript代码
  1. $(function(){  
  2.     $("p").click(function(){  
  3.         alert( $(this).text() );  
  4.     });  
  5.     $("button").click(function(){  
  6.         $("<p>this is second p</p>").click(function(){  //为新增的元素重新绑定一次  
  7.                 alert( $(this).text() );  
  8.         }).appendTo("body");  
  9.     });  
  10. })  

虽然我把绑定事件重新写了一次，代码多了点，但这种方式的效率明显高于live()方式，
特别是在频繁的DOM操作中，这点非常明显。


 

11，子选择器和后代选择器

 

后代选择器经常用到，比如：$("#list  p");
后代选择器获取的是元素内部所有元素。

而有时候实际只要获取 子元素，那么就不应该使用后代选择器。
应该使用子选择器，代码如下：
$("#list > p");

 

 

12，使用data()方法存储临时变量

 

下面是一段非常简单的代码， 

JavaScript代码
  1. $(function(){  
  2.     var flag = false;  
  3.     $("button").click(function(){  
  4.         if(flag){  
  5.             $("p").text("true");  
  6.             flag=false;  
  7.         }else{  
  8.             $("p").text("false");  
  9.             flag=true;  
  10.         }  
  11.     });  
  12. })  

改用data()方式后，代码如下：

JavaScript代码
  1. $(function(){  
  2.     $("button").click(function(){  
  3.         if( $("p").data("flag") ){  
  4.             $("p").text("true");  
  5.             $("p").data("flag",false);  
  6.         }else{  
  7.              $("p").text("false");  
  8.              $("p").data("flag",true);  
  9.         }  
  10.     });  
  11.   
  12. })  
jQuery性能优化指南(3)到此结束。
 
相信你也有你的idea，请共享出来吧。 Email : cssrain@gmail.com
 
我的blog：http://www.cssrain.cn

Tags: jquery

Javascript | 评论:0 | 阅读:18054

jQuery性能优化指南（2）

Submitted by gouki on 2009, May 20, 5:04 PM

原文来自：https://docs.google.com/View?docID=dft4vhq9_22g93szvdd&revision=_latest

4，对直接的DOM操作进行限制
 
这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM 。
这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。

例如，你想动态的创建一组列表元素，千万不要这样做,如下所示：

JavaScript代码
  1. var top_100_list = [...], // 假设这里是100个独一无二的字符串  
  2. $mylist = $("#mylist"); // jQuery 选择到 <ul> 元素  
  3. for (var i=0, l=top_100_list.length; i<l; i++){  
  4.    $mylist.append("<li>" + top_100_list[i] + "</li>");  
  5. }  

我们应该将整套元素字符串在插入进dom中之前先全部创建好，如下所示：

JavaScript代码
  1. var top_100_list = [...],$mylist = $("#mylist"), top_100_li = ""; // 这个变量将用来存储我们的列表元素  
  2. for (var i=0, l=top_100_list.length; i<l; i++){  
  3.    top_100_li += "<li>" + top_100_list[i] + "</li>";  
  4. }  
  5. $mylist.html(top_100_li);  
注：记得以前还看过一朋友写过这样的代码：
JavaScript代码
  1. for (i = 0; i < 1000; i++) {  
  2.     var $myList = $('#myList');  
  3.     $myList.append('This is list item ' + i);  
  4. }   

呵呵，你应该已经看出问题所在了。既然把#mylist循环获取了1000次！！！
 

5，冒泡
 

除非在特殊情况下, 否则每一个js事件(例如:click, mouseover等.)都会冒泡到父级节点。
当我们需要给多个元素调用同个函数时这点会很有用。

代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次。

比如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class

传统的做法是，直接选中input，然后绑定focus等，如下所示：

JavaScript代码
  1. $("#entryform input").bind("focus", function(){  
  2.     $(this).addClass("selected");  
  3. }).bind("blur", function(){  
  4.     $(this).removeClass("selected");  
  5. });  

当然上面代码能帮我们完成相应的任务，但如果你要寻求更高效的方法，请使用如下代码：

JavaScript代码
  1. $("#entryform").bind("focus", function(e){  
  2.     var $cell = $(e.target); // e.target 捕捉到触发的目标元素  
  3.     $cell.addClass("selected");  
  4. }).bind("blur", function(e){  
  5.     var $cell = $(e.target);  
  6.     $cell.removeClass("selected");  
  7. });  
通过在父级监听获取焦点和失去焦点的事件，对目标元素进行操作。
在上面代码中，父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件。
如果你发现你给很多元素绑定了同一个事件监听, 那么现在的你肯定知道哪里做错了。
 
同理，在Table操作时，我们也可以使用这种方式加以改进代码：
普通的方式：
JavaScript代码
  1. $('#myTable td').click(function(){  
  2.     $(this).css('background', 'red');  
  3. });   

 

 改进方式：

JavaScript代码
  1. $('#myTable').click(function(e) {  
  2.      var $clicked = $(e.target);  
  3.      $clicked.css('background', 'red');  
  4. });   

假设有100个td，在使用普通的方式的时候，你绑定了100个事件。
在改进方式中，你只为一个元素绑定了1个事件，
至于是100个事件的效率高，还是1个事件的效率高，相信你也能自行分辨了。
 
 

6，推迟到 $(window).load
 

jQuery对于开发者来说有一个很诱人的东西, 可以把任何东西挂到$(document).ready下。
尽管$(document).rady 确实很有用， 它可以在页面渲染时，其它元素还没下载完成就执行。
如果你发现你的页面一直是载入中的状态，很有可能就是$(document).ready函数引起的。

你可以通过将jQuery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率。
它会在所有的html(包括<iframe>)被下载完成后执行。

JavaScript代码
  1. $(window).load(function(){  
  2.     // 页面完全载入后才初始化的jQuery函数.  
  3. });  

一些特效的功能，例如拖放, 视觉特效和动画, 预载入隐藏图像等等，都是适合这种技术的场合。
 

7，压缩JavaScript
 
压缩和最小化你的JavaScript文件。
 
在线压缩地址: http://dean.edwards.name/packer/
压缩之前，请保证你的代码的规范性，否则可能失败，导致Js错误。
 
 
 
jQuery性能优化指南(2)到此结束，指南(3)正在进行中....
 
相信你也有你的idea，请共享出来吧。 Email : cssrain@gmail.com
 
 
英文原文：http://www.artzstudio.com/2009/04/jquery-performance-rules/
中文翻译：http://rlog.cn/350 & http://cssrain.cn

 

Tags: jquery

Javascript | 评论:0 | 阅读:17195

Records:305«‹41424344454647484950›»