Coding Life

1.继承+性能

关于原型的继承网络上一堆文章，我就不吹了.

Js 秘密花园也有讲：http://bonsaiden.github.com/JavaScript-Garden/zh/#object.prototype
其实有个地方很多人都会误解:每实例化一个对象，对象都会实例化原型的方法跟属性，所以每个对象需要为它们开辟多原型所有的内存。这个是错的！所有实例对象将会公用同一个原型对象的方法，所以只会有一个方法的内存空间，但是这样又会促发另一个性能问题，就是当你要调用原型的方法时，它先在自身对象的找，没有就上原型链_pro_，看下这个属性有没有这个方法，所以会多一层查找。但是当有很多个实例时，相信内存更重要。

主要还是讲一下原型的利用，就是我所谓的小事啦

分享下我跟另一个partner写的扩展原型时很方便的方法。

var Utility={
        beget:function(obj){
                var f=function(){};
                f.prototype=obj;
                return new f();
        },
        extend:function(Sub,Super){
                Sub.prototype=this.beget(Super.prototype)
        },
        extendPro:function(obj,extendFun){
                if(typeof(obj)!==Object && !(obj instanceof Function))
                        return false;
                for(var i=0;i < extendFun.length;i++){                          obj.prototype[extendFun[i].funName]=extendFun[i].fun;           }       }  }  

让对象继承别的对象：

Utility.extend(Tower,Monster);   //表示让Tower继承于Monster，及Monster.prototype==Tower._pro_

批处理自身扩展：

//将要扩展的方法名跟方法作为一个对象放到扩展数组里面，这样逻辑分明，修改也超级简单
Utility.extendPro(extendObj,[
        {
            funName:"init",
            fun:function(initData){
                 //init code
           }
       },
       {
            funName:"getNews",
            fun:function(name){
                 //get news code
           }
       }
]);

原型是JS的精粹，原型链的精妙

关于对象，关于对象的构造，可以写好多好多东西，在网上也有好多，但给一些觉得很不错的牛人的翻译：

原型链可以无穷无尽，它也区别了脚本语言跟C++后台语言，让Js变得很富特色，更有味道。
具体可以看一些这张经典的原型图，还是非常清晰的。

先推荐网上不错的日期js库：http://momentjs.com/
其实这类资源网络上一抓一把，但是想要针对项目实用的还是不多，因为我接触的那类都经常在日期而非深入到hour、minute、second！所以想干脆自己编个小库吧，这样以后写代买将省力很多，在这里分享下，希望对大家有用！

接口+继承+代码优化思想

先分享下我觉得一个很不错的js编程小技巧，达到很大的代码共用性！
因为很多js库会在原生的对象上进行直接原型扩展，但这是很不好的习惯，不仅加重了每个新实例对象的内存消耗，而且容易造成污染性误解（以为有这东西）！而这也是建js库一个准则：尽量少的原型扩展，特别是越根部的对象！

js建库准则

js建库准则（Dean Edwards在开发base2时候的一些体会）翻译版：http://biaoge.me/2009/12/239
js建库学习好地方：http://ejohn.org/blog/building-a-javascript-library/
假如你有时间，再看一个建js库超级前沿的文档，包括css3，浏览器最新API（如querySelector） build-a-javascript-framework

用继承提高代码共用性

因为不在原生对象上进行扩展，所以需要一个对外的命名空间，而在这个对象下会有一些接口供外部调用，而为了提高本身js库的健壮性，需要在最大程度减小对外接口（最理想的就是只保存用户需要的接口）！
那么这里便有一个问题，我将它实例化吧：

   var namespace={
           IOfirst:function(){},
           IOsecond:function(){}
    }

在对象namespace下有个东西需要给IOfirst跟IOsecond共用，而又不想暴露这个接口！
我是通过继承将所有对外接口通过一个父接口包装，然后在一个init方法下统一赋值，而在init这方法下，由于闭包的作用，达到了代码的共用性！
具体做法：

动态添加对外接口，加强代码灵活性

Details »

其实让javascript这种发展了很多年的历史的语言，很多代码多让人写了，基本你要的问题在网上都能找到答案！但是浏览器在更新，浏览器对js的支持情况，以及浏览器自身扩展的一些属性的情况下，一些代码将不能用，而也有一些也不那么高性能了！所以很多优秀的Js库也才在不断更新！而这方面也是一个优秀的编程者应该注意到的地方，下面给出几个我在项目过程发现的一些不错的解决兼容性的但比我们之前的方法好的方法：

获取元素的所有子元素，不包含chrome以及firefox下空的textNode

因为chrome跟firefox较新版本的浏览器（而chrome跟firefox大家都会保持比较高地版本）引进了firstElementChild、childElementCount、nextElementSibling等新的属性，而通过这些属性获取将非常高效！所以下面是根据这些新属性写出的获取children的函数！

//getChildren function : because the empty textNodes were distinguished as a childNode but ie not!
//arguments declaration：
//parentNode--the parent of the elements you want to get;
//example:var parent=document.getElementById("par"); var childs=[]; childs=getChildren(parent);
                        function getChildren(parentNode){
                                var parentNode=parentNode||document.body;
                                if(document.all)
                                     return parentNode.child||parentNode.childNodes;
                                else
                                    {
                                    var childs=[];
                                    var len=parentNode.childElementCount;
                                    var firstElement=parentNode.firstElementChild;
                                    for(var i=len-1;i>=0;i--)
                                     {
                                           childs.push(firstElement);
                                           if(i!=0)
                                           firstElement=firstElement.nextElementSibling;
                                     }
                                    return childs;
                                }
                        }

当然大家也会有getFirstChild、getLastChild，getNextSibling的需求吧，其实看上面就知一通百了！

                          function getFirstChild(parentNode){
                                var parentNode=parentNode||document.body;
                                if(br.ie)
                                   return parentNode.firstChild;
                                else
                                   return parentNode.firstElementChild;
                  }
                        function getLastChild(parentNode){
                                var parentNode=parentNode||document.body;
                                if(br.ie)
                                   return parentNode.lastChild;
                                else
                                   return parentNode.lastElementChild;
                        }
                        function getNextSibling(node){
                                if(br.ie)
                                   return node.nextSibling;
                                else
                                   return node.nextElementSibling;
                        }

Details »