扩展JavaScript功能的正确方法(译文)

 更新时间:2012年04月12日 12:00:48   作者:  
JavaScript已经内置了很多强大的方法,但有时你需要的某个功能在内置的方法中没有,我们怎么来优雅地扩展JavaScript功能呢

早上看到《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
});
}


  这种方式扩展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
});
}

相关文章

  • 解决layui弹框失效的问题

    解决layui弹框失效的问题

    今天小编就为大家分享一篇解决layui弹框失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 不使用jquery实现js打字效果示例分享

    不使用jquery实现js打字效果示例分享

    js打字效果示例js打字效果示例,data-period设置从打字返回删字的时间,data-rotate可加减中英文词语,不用jquery支持
    2014-01-01
  • JavaScript 判断指定字符串是否为有效数字

    JavaScript 判断指定字符串是否为有效数字

    最近在做一个ColdFusion的项目,有一个业务Check,需要用JavaScript实现:判断指定字符串是否为有效数字。
    2010-05-05
  • Javascript中的call()方法介绍

    Javascript中的call()方法介绍

    这篇文章主要介绍了Javascript中的call()方法介绍,本文讲解了Call() 语法、Call() 参数、Javascript中的call()方法、Call()方法的实例等内容,需要的朋友可以参考下
    2015-03-03
  • Sort()函数的多种用法

    Sort()函数的多种用法

    sort() 方法用于对数组的元素进行排序。接下来通过本文给大家介绍Sort()函数的多种用法,对sort函数的用法相关知识感兴趣的朋友一起学习
    2016-03-03
  • Javascript生成带参数的二维码示例

    Javascript生成带参数的二维码示例

    这篇文章主要给大家介绍了Javascript生成带有参树二维码的方法,实现的方法还是很简单的,有需要的朋友们可以参考借鉴。下面来一起看看吧。
    2016-10-10
  • 原生JS实现仿淘宝网左侧商品分类菜单效果代码

    原生JS实现仿淘宝网左侧商品分类菜单效果代码

    这篇文章主要介绍了原生JS实现仿淘宝网左侧商品分类菜单效果代码,可实现简单的鼠标滑过tab切换的功能,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • jQuery中 DOM节点操作方法大全

    jQuery中 DOM节点操作方法大全

    本文给大家介绍了jQuery中 DOM节点操作方法大全,感兴趣的朋友一起看看吧
    2017-10-10
  • JS实现的雪花飘落特效示例

    JS实现的雪花飘落特效示例

    这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形式详细分析了JavaScript结合时间函数动态操作页面元素的相关实现技巧,需要的朋友可以参考下
    2019-12-12
  • javascript实现扫雷简易版

    javascript实现扫雷简易版

    这篇文章主要为大家详细介绍了javascript实现扫雷简易版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08

最新评论