简明现代魔法 -> JavaScript -> 吝啬你的 JavaScript 代码

吝啬你的 JavaScript 代码

2010-04-27

前端开发,要学会吝啬:

  1. 吝啬你的代码,用最少的代码做最合适的事情;
  2. 比如你的代码中用到了很多document.getElementById(),你是否考虑写一个简单的ID选择器。

    function $(Id)
    {
        return document.getElementById(Id);
    }
    
  3. 吝啬你的补丁,不要为了实现功能在现有框架上打补丁,而是框架扩展上写实现,如果框架不能扩展,是否考虑部分重构?
  4. 比如你已经拥有一套完整的表单正则验证框架,某天你发现某个表单在严重框架里找不到对应的正则,你可能的做法是追加一个if就能简单的实现,可为何不在验证框架里面扩展一个正则,保持代码的干净呢?

  5. 吝啬代码执行的步骤
  6. 比如我们在写ajax代码时,我们经常写如下的代码:

    var xmlObject;
    function createXMLHTTPRequest()
    {
    	if(window.ActiveXObject)
    	{   
    		xmlObject = new ActiveObject("Microsoft.XMLHTTP"); 
    	}
    	else
    	{   
    		xmlObject = new XMLHTTPRequest(); 
        }
    }
    

    但我们每生成一次对象就要进行一次判断,为何不在第一次生成对象后记忆下来,下次直接new呢?改进后如下:

    var _ajax = function(){
        _self = this;
    }
    _ajax.prototype = {
        /**
         * 构建http请求对象
         */
        _create: function(){
            var factories = [
    			function(){return new XMLHttpRequest();},	//非IE系列
    			function(){return new ActiveXObject("Microsoft.XMLHTTP");},		//IE
    			function(){return new ActiveXObject("Msxml2.XMLHTTP");}			//IE某些版本
    			];
            	for (var i = 0; i < factories.length; i++) 
                {
                	try 
                    {
                    if (factories[i]()) 
                    {
                        return factories[i];
                    }
                } 
                catch (e) {
                    continue;
                }
            }
            return factory[2];
        }(),
    }
    

这段代码看起来视乎比上面执行步骤多很多,但当第一次调用_ajax._create()后,_ajax._create已经被改变成一个兼容当前浏览器的匿名函数,以后的调用都不再会做判断。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们