[译]扩展JavaScript功能的正确方法

更新时间：2022-09-08 15:10:12

　　早上看到《JavaScript 每周导读》【第三期】一文，里面发现一篇文章(Extending JavaScript – The Right Way)，觉得还不错，翻译过来跟大家共享，本文并不是逐字逐句进行翻译，尽量说得通俗易懂。

　　原文地址：Extending JavaScript – The Right Way

以下是译文

　　JavaScript已经内置了很多强大的方法，但有时你需要的某个功能在内置的方法中没有，我们怎么来优雅地扩展JavaScript功能呢。

　　例如我们想增加一个capitalize()方法来实现首字母大写，通常我们这样写：

if(!String.prototype.capitalize)
{
    String.prototype.capitalize = function()
    {
        return this.slice(0,1).toUpperCase() + this.slice(1).toLowerCase();
    }
}

　　上面的代码可以正常使用，但如果在某个地方有下面的代码：

var strings = "yay";
for(i in strings) console.log(i + ":" + strings[i]);

　　我们得到的结果是这样的：

0: y
1: a
2: y
capitalize: function () { return this.slice(0, 1).toUpperCase() + this.slice(1).toLowerCase(); }

　　这显然不是我们想要的结果，输出了我们增加的方法的原因是我们增加的方法的enumerable属性默认为true。

　　我们可以通过简单地把枚举属性(enumerable)设置为false避免这个问题，使用defineProperty方法进行功能的扩展：

if(!String.prototype.capitalize)
{
    Object.defineProperty(String.prototype, 'capitalize',
    {
       value: function()
       {
           return this.slice(0,1).toUpperCase() + this.slice(1).toLowerCase();
       },
       enumerable: false
    });
}

　　现在我们再运行这段代码：

var strings = "yay";
for(i in strings) console.log(i + ":" + strings[i]);

　　我们得到的结果是：

0: y
1: a
2: y

　　要注意的是，用循环没有输出的并不代表不存在，我们可以通过下面的代码查看到定义：

var strings = "yay";
console.log(strings.capitalize)

　　会输出：

function () { return this.slice(0, 1).toUpperCase() + this.slice(1).toLowerCase(); }

　　用这种方式扩展JavaScript功能比较灵活，我们可以用这种方式来定义我们自己的对象，并设置一些默认值。

　　以下是另外几个扩展方法，你可以在自己的项目中使用：

　　String.pxToInt()

　　把"200px"这样的字符串转换为数字 200 :

if(!String.prototype.pxToInt)
{
    Object.defineProperty(String.prototype, 'pxToInt',
    {
        value: function()
        {
            return parseInt(this.split('px')[0]);
        },
        enumerable: false
    });
}

　　String.isHex()

　　判断一个字符串是否是16进制表示的，如"#CCC" 或 "#CACACA"

if(!String.prototype.isHex)
{
    Object.defineProperty(String.prototype, 'isHex',
    {
        value: function()
        {
            return this.substring(0,1) == '#' &&  
                   (this.length == 4 || this.length == 7) && 
                   /^[0-9a-fA-F]+$/.test(this.slice(1));
        },
        enumerable: false
    });
}

　　String.reverse()

　　字符串反转：

if(!String.prototype.reverse)
{
    Object.defineProperty(String.prototype, 'reverse',
    {
        value: function()
        {
            return this.split( '' ).reverse().join( '' );
        },
        enumerable: false
    });
}

　　String.wordCount()

　　统计单词数量，用空格分开

if(!String.prototype.wordCount)
{
    Object.defineProperty(String.prototype, 'wordCount',
    {
        value: function()
        {
            return this.split(' ').length;
        },
        enumerable: false
    });
}

　　String.htmlEntities()

　　html标签如<和>编码为特殊字符

if(!String.prototype.htmlEntities)
{
    Object.defineProperty(String.prototype, 'htmlEntities',
    {
        value: function()
        {
            return String(this).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
        },
        enumerable: false
    });
}

　　String.stripTags()

　　去掉HTML标签：

if(!String.prototype.stripTags)
{
    Object.defineProperty(String.prototype, 'stripTags',
    {
        value: function()
        {
            return this.replace(/<\/?[^>]+>/gi, '');
        },
        enumerable: false
    });
}

　　String.trim()

　　去掉首尾空格：

if(!String.prototype.trim)
{
    Object.defineProperty(String.prototype, 'trim',
    {
        value: function()
        {
            return this.replace(/^\s*/, "").replace(/\s*$/, "");
        },
        enumerable: false
    });
}

　　String.stripNonAlpha()

　　去掉非字母字符：

if(!String.prototype.stripNonAlpha)
{
    Object.defineProperty(String.prototype, 'stripNonAlpha',
    {
        value: function()
        {
            return this.replace(/[^A-Za-z ]+/g, "");
        },
        enumerable: false
    });
}

　　Object.sizeof()

　　统计对象的大小，如{one: “and”, two: “and”}为2

if(!Object.prototype.sizeof)
{
    Object.defineProperty(Object.prototype, 'sizeof',
    {
        value: function()
        {
            var counter = 0;
            for(index in this) counter++;
            
            return counter;
        },
        enumerable: false
    });
}

PS

　　这种方式扩展JS原生对象的功能还是挺不错的，但除非必要(项目中用的很多)，不建议直接在原生对象上扩展功能，会造成全局变量污染。

　　另外，文中的pxToInt()方法是没什么必要的，JS中的parseInt()可以直接完成这样的功能：parsetInt("200px")===200

　　htmlEntities方法貌似有问题，下面另提供一个：

if(!String.prototype.htmlEntities)
{
    Object.defineProperty(String.prototype, 'htmlEntities',
    {
        value: function()
        {
            var div = document.createElement("div");
            if(div.textContent){
                div.textContent=this;
            }
            else{
                div.innerText=this;
            }
            return div.innerHTML;
        },
        enumerable: false
    });
}

本文转自Artwl博客园博客，原文链接：http://www.cnblogs.com/artwl/，如需转载请自行联系原作者

上一篇 : ：《JavaScript高级程序设计》阅读笔记（十七）：事件下一篇 : Levenshtein算法的JavaScript实现

[译]扩展JavaScript功能的正确方法

以下是译文

PS

本文转自Artwl博客园博客，原文链接：http://www.cnblogs.com/artwl/，如需转载请自行联系原作者

相关阅读

推荐文章