博客园_Artwl

[转]Javascript 绝句

2012-05-04T04:40:00Z

像诗一样的 Javascript 代码。

1. 取整同时转成数值型：

'10.567890'|0
//结果: 10
'10.567890'^0
//结果: 10
-2.23456789|0
//结果: -2
~~-2.23456789
//结果: -2

2. 日期转数值：

var d = +new Date(); //1295698416792

3. 类数组对象转数组：

var arr = [].slice.call(arguments)

4. 漂亮的随机码：

Math.random().toString(16).substring(2); //14位
Math.random().toString(36).substring(2); //11位

5. 合并数组：

var a = [1,2,3];
var b = [4,5,6];
Array.prototype.push.apply(a, b);
uneval(a); //[1,2,3,4,5,6]

6. 用0补全位数：

function prefixInteger(num, length) {
return (num / Math.pow(10, length)).toFixed(length).substr(2);
}

7. 交换值：

a= [b, b=a][0];

8. 将一个数组插入另一个数组的指定位置：

var a = [1,2,3,7,8,9];
var b = [4,5,6];
var insertIndex = 3;
a.splice.apply(a, Array.concat(insertIndex, 0, b));
// a: 1,2,3,4,5,6,7,8,9

9. 删除数组元素：

var a = [1,2,3,4,5];
a.splice(3,1);

10. 快速取数组最大和最小值

Math.max.apply(Math, [1,2,3]) //3
Math.min.apply(Math, [1,2,3]) //1

(出自http://ejohn.org/blog/fast-javascript-maxmin/)

11. 条件判断：

var a = b && 1;
//相当于
if (b) {
a = 1;
} else {
a = b;
}

var a = b || 1;
//相当于
if (b) {
a = b;
} else {
a = 1;
}

12. 判断IE（两种方法）:

var ie = /*@cc_on !@*/false;
var ie = !-[1,];

原文地址：http://www.benben.cc/blog/?p=391

本文链接

[转]Javascript 中 String.replace( ) 的妙用

2012-05-04T03:51:00Z

String.replace( ) 简介

语法：

string.replace(regexp, replacement)

regexp ：您要执行替换操作的正则表达式，如果传入的是一个字符串，那就会当作普通字符来处理，并且只会执行一次替换操作；如果是正则表达式，并且带有 global (g) 修饰符，则会替换所有出现的目标字符，否则，将只执行一次替换操作。

replacement ：您要替换成的字符。

返回值是执行替换操作后的字符串。

String.replace( ) 的简单用法

var text = "javascript 非常强大！";
text.replace(/javascript/i, "JavaScript");
// 返回：JavaScript 非常强大！

String.replace( ) 替换所有出现的目标字符

var text= "javascript 非常强大！JAVASCRIPT 是我最喜欢的一门语言！";
text.replace(/javascript/ig, "JavaScript");
// 返回：JavaScript 非常强大！JavaScript 是我最喜欢的一门语言！

String.replace( ) 实现调换位置

var name= "Doe, John";
name.replace(/(\w+)\s*,\s*(\w+)/, "$2 $1");
// 返回：John Doe

String.replace( ) 实现将所有双引号包含的字符替换成中括号包含的字符

var text = '"JavaScript" 非常强大！';
text.replace(/"([^"]*)"/g, "[$1]");
// 返回：[JavaScript] 非常强大！

String.replace( ) 将所有字符首字母大写

var text = 'a journey of a thousand miles begins with single step.';
text.replace(/\b\w+\b/g, function(word) {
return word.substring(0,1).toUpperCase( ) +
word.substring(1);
});

// 返回：A Journey Of A Thousand Miles Begins With Single Step.

以上转自：http://www.codebit.cn/javascript/javascript-replace.html

String.replace() 参数解释

当第一个参数为正则表达式时，第二个参数为一个function时，第二个参数中的function的参数中 $表示正则匹配的字符串，$1,$2...为分组的内容：

"abc {name} test".replace(/{(.*?)}/img,function($,$1){
console.log($,$1);//output {name} name
return $1;
});

本文链接

jQuery1.7.2正式发布了

2012-04-23T09:40:00Z

下载地址

jQuery1.7.2正式发布了，下载地址：

http://code.jquery.com/jquery-1.7.2.min.js (minified, production)
http://code.jquery.com/jquery-1.7.2.js (unminified, debug)

注：如果你正在使用jQuery Mobile，请使用最新的jQuery 1.7.2和jQuery Mobile 1.1这两个版本，因为之前的jQuery Mobile版本还基于jQuery core 1.7.1或更早的版本。

更新内容

Ajax

#4624: Charset in default ajaxSettings.contentType
#10978: jQuery.param() should allow non-native constructed objects as property values
#11264: evalScript() uses defaults set by ajaxSetup()
#11426: jQuery.ajax() always fails when requesting JPG images in IE

Attributes

#5571: Allow chaining when passing undefined to any setter in jQuery
#10828: attr(“coords”) returns undefined in IE7
#10870: Incorrect behaviour of $.removeAttr(“selected”)
#11316: Consider looking through valHooks by element type first, then by nodeName instead of the other way around

Build

#10692: Configure the jshint options to more accurately match the style guide
#10693: generalize the “test something in an iframe” code in unit tests
#10901: have unit tests fail if the tester is running from file:// or doesn’t have PHP
#10902: ability to test a built version of jQuery in unit tests
#10931: Unit tests shouldn’t require internet access

Core

#10466: jQuery.param() mistakes wrapped primitives for deep objects

Css

#10639: outerWidth(true) and css(‘margin’) returning % instead of px in Webkit
#10754: have jQuery.swap return the return of the callback instead of just executing it
#10782: Incorrect calculating width
#10796: Bug in IE7 with $(‘#el’).css.(‘background-position’)
#10858: css.js regular expressions are incomplete
#11119: The curCSS function only need 2 arguments

Data

#11309: hexadecimal-formatted data-* attributes parsed incorrectly

Deferred

#11306: calling .disable() or .lock() on a $.Callbacks object breaks its fired() status

Dimensions

#3838: $(document).height() incorrect in IE6

Effects

#8498: Animate Hooks
#10006: method show is not working as expected in all browsers when called for document fragment
#10848: Animation toggling loses state tracking in certain atomic edge cases
#11415: Silently ignore negative CSS values where they are illegal
#11469: Negative margin in animations (.animate)

Event

#8165: .live(‘click’, handler) fires on disabled buttons with child elements in Chrome
#10819: Eliminate “this.on.call(this, “
#10878: $(“select”).live(“change”, function(){ …broken in IE8 in jQuery 1.7
#10961: Error in XRegExp using jQuery 1.7.1 in IE6-9
#10970: The .on() selector parameter doesn’t work with :not(:first) selector
#10984: Cannot off() custom events ($.event.special)
#11021: Hover hack mangles a namespace named “hover”
#11076: .clone(true) loses delegation filters
#11130: jQuery.fn.on: binding map with null selector ignores data
#11145: $(document).on() not working with name=”disabled”

Manipulation

#9427: Passing undefined to .text() does not trigger setter
#10753: inline the evalScript function in manipulation.js as it’s only used once
#10864: text() method on a document fragment always returns the empty string
#11055: Update HTML5 Shim elements list to support latest html5shiv
#11217: Append problem with webkit
#11291: Cloning XMLDoc’s with HTML5 nodeName’s breaks on IE
#11323: script tags with type=”text/ecmascript” leak into the DOM
#11356: safeFragment memory leak

Misc

#10952: .fired() doesn’t work on Callbacks object when it is flagged with “once”
#11257: Wrong path to source files in test suite if PHP missing

Queue

#10967: .promise() does not attach methods onto target

Support

#7986: Bug in $.support.boxModel if page has DIV-element CSS
#11048: Support Tests affect layout for positioned elements in IE6-9
#11337: Bug in $.support.reliableMarginRight

Traversing

#11370: $(‘<div>’).siblings() throws exception

本文链接

分享一个自定义的 console 类，让你不再纠结JS中的调试代码的兼容

2012-04-18T11:10:00Z

问题的产生

在写JS的过程中，为了调试我们常常会写很多 console.log、console.info、console.group、console.warn、console.error代码来查看JS的运行情况，但发布时又因为IE不支持console，又要去掉这些代码，一不小心就会出错。

本文分享自己昨晚写的一个console类来试图解决这一问题。当然，更好的做法是把测试代码分开写，那样就不会有这个问题。

解决思路

如何解决IE下不兼容的问题呢，那就是我们自己定义一个console类来覆盖浏览器提供的console功能，这样只要在页面中引用此JS文件就可以了。

另外，此类还提供了查看输出的调试信息功能，console 定义了哪些功能呢，我们可以在这里看到：http://getfirebug.com/wiki/index.php/Console_API，我们可以看到这里提供了很多方法，我们常用的有 console.log、console.info、console.group、console.warn、console.error、console.profile、console.time，最后两个是分析代码性能的，比较复杂，本文没有实现。

代码解析

第一步，当然是搭一个结构，覆盖浏览器(firebug、chrome)提供的console功能，这样直接引用此JS文件即可保证浏览器(主要是IE)中不出错：

var console={
assert:function(){
},
clear:function(){
},
count:function(){
},
debug:function(){
},
dir:function(){
},
dirxml:function(){
},
error:function(){
},
exception:function(){
},
group:function(name){
},
groupCollapsed:function(){
},
groupEnd:function(){
},
info:function(){
},
log:function(){
},
memoryProfile:function(){
},
memoryProfileEnd:function(){
},
profile:function(){
},
profileEnd:function(){
},
table:function(){
},
time:function(){
},
timeEnd:function(){
},
timeStamp:function(){
},
trace:function(){
},
warn:function(){
}
};

第二步，实现 console.log方法。在所实现的几个方法中这个是最复杂的。

从firebug的API中我们可以看到，console.log不仅仅可以输出信息，还提供了类似 string.Format的功能，直接引用原文如下：

Here is the complete set of patterns that you may use for string substitution:
Pattern Type
%s String
%d, %i Integer (numeric formatting is not yet supported)
%f Floating point number (numeric formatting is not yet supported)
%o Object hyperlink
%c Style formatting

Pattern	Type
%s	String
%d, %i	Integer (numeric formatting is not yet supported)
%f	Floating point number (numeric formatting is not yet supported)
%o	Object hyperlink
%c	Style formatting

其中的%c比较特殊，是给输出添加样式的，比如我们在firebug中这样写：

console.log('%cTest output', 'color:white; background-color:blue');

运行后的结果是这样的：

这里%c也可以跟 %s、%d等混用。

所以，在代码中我直接用replace进行替换，由于JS中的replace默认只替换第一个匹配项，这里刚好，代码如下：

由于console.log可以接受多个参数，且个数不确定，所以这里直接没有写形参。对于%c虽然firebug中写在中间也是有效的，这里为了简单直接只对写在开头的有效。代码中先把参数转换为数组，然后对数组进行分情况处理。

当参数个数大于1时，对后面的参数用replace进行替换，然后把剩下的参数连接(join)起来进行输出。

当参数个数为1时，还要分两种情况，一是数组，二是方法。对于数组，按firebug中的格式，在两端加中括号，对于函数，把字的颜色变为绿色

当参数个数为0时，直接输出空字符串

后面的consoleHelper.showlog是为了输出方便另外写的一个方法，在这个方法中把各种调试信息的结果显示在页面上的一个div(如果存在)中。

其他几个方法的思路跟这个差不多，只是样式不同，功能比这个简单，直接把参数连接起来输出即可。

整个console类代码如下：

consoleHelper代码如下：

注：如果想在页面中看到调试信息，直接在页面上添加一个id 为 showconsole 的隐藏的div即可。

样式(尽量跟FireBug保持一致)：

.console_log{
border:1px solid #CCC;
color:#333;
padding:0px 5px;
min-height:24px;
line-height:24px;
margin-bottom:-1px;
}
.console_info{
border:1px solid #CCC;
color:#333;
padding:0px 5px;
min-height:24px;
line-height:24px;
margin-bottom:-1px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAEEklEQVQ4jbWUW0wcZRTH/998szO7O8ByWa7WmBVKE1EpjUCt1hZsk1pCqsFL6mufauJDTQypTYHY2KbGmChp+mBsfDBtNFJDArWVWlAJsqxpKYGYsiJpKVso2y3sZXZnZ2aPDyNkl23Vl05ykvnO5Tdn/ufMMCLCo7iER0IFIP5Xgru2LS8ai9cRUQUAMMYCOYrjWvB6T/jf6tjDpHBubKkxnRVH3ZUNLU9W1+Q48koAAPHwXfw1PRUNzoz1czVwTPX3T/0v8MHD3ezL7356L++ZN05sbd5nKylQ4LAxKLIVj2pATCPcW1ExOtirhye+PXzg9Zc/PX3i3QxQhhQ9F37BmfM/Hyva+cGRF7c+hzKXgMqi7G4IDH5ZgbPlLduvhVWfnDn/cf6u7bVH2/a+9OCO5cqWfXL9oe937GxiJXkcjxdY/hc8QO1j1v3A8HX4qRYAsBgB5pdTGBq8TJrvs9e0mf7eVdbaVmxo2C+xsvqT1VuaWNzgcDmASMKyW4srGPV6Mer1YnLiKsIaENYAhwRwLqC6romxsvqTGxr2S1lSLN1b3iY9v3tTocKRNIG7EUAWAS4AE0EXZLHRGl5lI0JhIGEATglgAApzOGye3ZuWfvNuAzCUASZR2eMo3wzOATKBuWWrSOLAO9uBV5+18r745jK+XtllHWJWjkMS4CjfDE1U9mSBmdPtkR1OMALs67Y7lTZvMuJZcUaA7HCCOd2eLClWAZwDEsssFNO+TwbAYcuMm5T58Ewp1OCsFlcBUmCX1iWlgxlgXweOaYAWV0FqcHbVt1bCjNhFbWEcIdUqTDfOMzteHw+pgLYwDmbELmaBi4vyR/TZgRs3QwQi63VXLb1jgWXGiICbIYI+O3CjuCh/JAt8e+xckhZ87cv+KzQxb22DXbQskdAQCNxBIHAH4XB4zS9xYGIeWPZfIVrwtd8eO5fM0hgAzna397596PPjM/aCIyLfgh1VgI0DQ37Chd91qxO5CTk2QDeB4T+BmT+uQr92+qOz3e296Sze1dW1dnhq4xMIBBYHfZe+ioRUNM0aldwp21CUKyI/3wUl1wUm5WImCPw4GcctX4+evHqq/UBb0/H3D76ZMdCH/zar9j5tOis6eEXjK7bimhxHnhsAEA8HoS9NRc2A9weuBj6cGjg16fF4surZyMgIOjs7+fT0tBiJRKRkMimZpimlUikbEdnI5iogu7uOBLEcAFjKWGCJpXGmh0OMMV0QBF0QhKQkSUlFUZIej0fv6OgwRV3XoaoqDMNgpmkKRLRqHIBI2v0EtPs+BvB/ts0kwABjIoAUEaWISDBNUzAMg6mqyqLR6IOl6OvrY8PDw5ibm2OhUIipqopEIsEAwG63kyzLcLvdVFpaSs3NzWhtbc2C/A18nMDdJnOGEAAAAABJRU5ErkJggg==") no-repeat scroll 0 1px #EBF5FF;
padding-left:30px;
}
.console_warn{
border:1px solid #CCC;
color:#333;
padding:0px 5px;
min-height:24px;
line-height:24px;
margin-bottom:-1px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAD/ElEQVQ4jbWUX2gcVRSHv3tndmaTTbJJSJNWaXVNCUVjFbEWlb4U9aEYjRYURHwqKIIvgqX0oZEi+CIqCBYUjVhE8aW0xAfxSQhpSaVqETWpDdhtbWvS/NvZ2dm5c+/xIUmTdlN86oUDw71zvnvu7xx+SkS4HUvfFirg3/Lk/Lcw9tp2l9lBE8ujzrBBaWK/iT+8UI+osPMHXpxKbpWu1pNCjnZtsXH6fm2xddAWd3iqow/d3I5YgyxegpnThHpqMiiq/Xpw/DjFvv8Huy86dtTn7PF6ftem4P7nULkmCAso7YEIklQQEbLyGeT8V66wITmsd75zWPe/IbcE2+HOu+vz2UlT3LMx2PYEKNAB5LY9gy50YzPDX99/wF1dnYgFO3cR+8sRCj3J6/6+hSNrwdebZ0+/rbI4+yjV/RuD3p34YUTYHhG2RmhtlyQCrF4gbI8IWiP89iJ667Mkc7yXfdp597pgd+bDHWkU7An6dhG2V8nlI7SLwEQgdjUjq6GyCE9HhMUq4ebN2KC32Rq7f31wJnspbtX5DQpNFbI1IW4NOAZTBVNFZVVyzTFBaTs2YTD9vDdY+e36uNlUHg96N6OJwdzU4pWKRcAmS5etNAkIu1upTbVsktpsCZi4AYx4PX5b01JFN6/lPZPW0GYeFq+CqYDS0HQH2m9BtxaRuNrdCFYkykVgwkZwMg1AdWGa5sppCL3Vs2oZOh5A6wznqDdIgbMTMjvRT2cJ1HKiOMiqpJdHubLQxJW/f2Nr3uMGJxCBhQmkNmsEf6oBLKK+swvX9nragBcCArYOOLzFYdpqn9EGtBVyDQ9yaYKrmfH8yz/ONFas88eyhdq7fmtzz2o9CvDwtjxNe74bcZbs3FG0tzolApi5CGc5onseXMWtfBTevDpvU4bS6XmcFcBbjd5XYPsB7H1vce4K1/dFPGwlwszXxlTxnm/WvuIGd/P7Bj4xEyceVurffbliEZVvQSnFzO8nuFw/ibMZTRoEjZgUV52nfq1eFpd7oeXVn+1aVoMJVYaf1HJp/HCuRQ4EbdpTuTx4wdJoIeAyxCTY2JAuMm5dsLd4cObizbqva5vTF/5EDz/2kO9lB3PNPOWFtC6bGzbFmhpnTaI+nsmVvgxeOpaWSqUGhhobG2NoaMibnJz0K5VKkKZpYK0NnHM5Eck9cqdqf/5e3d/RpLpqRuo//ePOfX1WLljBKKWM1tpordMgCNJCoZCWSiVz6NAh6xtjiOOYLMuUtVaLyEp4gH+qbOunyvbX5Y4pwAK+UkoAJyJORLS1VmdZpuI4VlEUrS/FyMiIGh0dpVwuq9nZWRXHMUmSKIB8Pi9hGNLV1SU9PT2ye/duBgYGGiD/AVNZApv23zD/AAAAAElFTkSuQmCC") no-repeat scroll 0 1px #FFFFC8;
padding-left:30px;
}
.console_error{
border:1px solid #CCC;
color:#FF0000;
padding:0px 5px;
min-height:24px;
line-height:24px;
margin-bottom:-1px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACYQAAAmEBwTBV+gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAQHSURBVDiNtZVtbxRVFMd/596ZnS1L210otMB2t62gmKA2gVLtC5UgaGi0Eg2JfgY+AdAWWq0fgKJGE33ZqCQF5EFqCIoJ0RoTXpRATHjY0hYa2i6d7XZ2u7tzfbHttlgKiYn/5M5N7j33N+fMOfeMGGP4P2Q9yyCxSloUxBAioCKIyviW1R9/5N152jlZyeORkOwz6A5VVdWsa2uxamOAonB/hPzoCH4yOahE922acHsxJv9M8L2QbETbp/SmaNOqtv1Yz20BgeJD5ichf+c23oWzFMbHB4IZ82HVw4epFcET66R8Nu9cKdv9diNbnsefm6Ns46YSbCk4OzmF0gpz+xaZ3369ZgK6tfbm8NgCSy2+QixPVp8MNr/WmF+zlqnECNlwFVODg/gpF991i3PKJTV0HXdiisnbCfIVYZztOxoV1qmlHpfAo9Xhg1a8fm+hJorrptnyzbfE2ttRL71C8q9r+KkUJpVi5ubfeNqm4Xgvm7/6GncySWFdNToWbxp5+YV9y8DGtj+26hvw3WnKtr6ICgYBiB1pR2/fwaOh68zcukUmVM7mE58jWqMch+DWrRSmXaxYHB1wOh4DJ+pq6iUcaUIUAccmd+ki944dLYUV6zyKtfNVsmvWsfmLL0HrYqK7jpH/7RecUBkoBRWVzWMtO1tgvo4tJ7BftMafngbbYnWkEvfsGRKFAvGu7iK8qxt8vwgAhjs7mLv0MxWxKH46Db6PaI2xVAy4WrwglhM0+Rz5sVEktAoVClERqcQ908/dQoG6T3vm4ytC7x4+TG7gAhXRDZjZWUw2g8lmAUE5gUjJYyydFKVAFORy+G6qCMnlyD94AIVCKfxiQgwmmynaLZSiZYEojKhFsAScZNFAFY2UYnY6hX5zNw3He0ueLqiup4eEVqR+PEV5TTUoQUQWwJnFqrDVMHYAbBuxbdKpNNa+d2noPbEY/qFD3D18qASPd39CsO0DZianEMsGuziU2P2w5Obdf6Pld5Q0Z9Oz8NY71PV8VoIk2o+QPXcGEJzW94h3dy/udXTA1Ss4kTCIDNZ839/8WB2LY3dh20gwSObGDXzPm89+J9mfzlFRG6UiFiU7cJ7ho50A+J6Hd30IFQwiWiNK9ZV4S3vFg9Y9g4hqyqZm8Naup2zbNuYuXqA8uuGx7z8zeh979x68oSHK0i7BcCVgBqrHk61cvpxfBp5o27uxoALnjEjjnOdh8gWcSBj5V/IAMo+mUZZFYHUIkGvay71edfp0qcMta5sTbW3lBUefRMneZbQn608t+fer+k6PLV18cqPftcsar15zEOEjDDtXAP5hjHTVfHfy/JM2V/yDLGj8wIF6Uf5+IyYoRpIGPymih9f3/XD1aeeeCf6v+gfLYZXwkd5f2QAAAABJRU5ErkJggg==") no-repeat scroll 0 1px #FFEBEB;
padding-left:30px;
}
.console_group{
margin-top:20px;
font-size:16px;
font-weight:bolder;
}
.console_log_function{
color:green;
}

这里为了演示方便，三个小图标直接用的是base64格式的图片，就是上面代码中的三个长字符串，大家用时可以换成图片地址。

运行效果

小结

写这个JS一方面是工作中有这方面的需求，另外也是因为在博问中看到有人问 JavaScript中如何获得console.log的值？，前段时间有个国外学编程网站可以把console.log的结果直接显示在页面上，不知道是不是用了本文类似的方案。

欢迎大家留言讨论。

本文链接

《JavaScript高级程序设计》阅读笔记（十六）：javascript检测浏览器和操作系统-detect.js

2012-04-16T13:47:00Z

检测浏览器的方式

1、对象特征检测法：判断浏览器能力的通用方法。如果更关注浏览器的能力而不在乎它的实际身份，就可以使用这种检测方法。常见的原生Ajax写法中就用这种方法来创建XMLHttpRequest：

IXHR: function(){
if(window.ActiveXObject){
XHR=new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
XHR=new XMLHttpRequest();
}else{
return null;
}
}

2、user-agent字符串检测法：通过能浏览器的user-agent字符串进行解析来判断，判断方法在下文的detect.js中

检测平台/操作系统

通过navigator折platform属性和user-agent字符串来判断，判断方法在下文的detect.js中

检测浏览器和操作系统-detect.js

本文链接

Levenshtein算法的JavaScript实现

2012-04-15T12:58:00Z

Levenshtein算法

Levenshtein算法定义及算法原理见这篇文章：一个快速、高效的Levenshtein算法实现

JavaScript实现

本文链接

递归求嵌套数组中最大值

2012-04-15T02:30:00Z

今早在 https://attachments.me/hirehack/public/computer.html 做题，有一题是递归求嵌套数组中最大值:

/*
This challenge requires that, given as input an array which may contain:
- integer values.
- inner-arrays of integer values.
- any recursive combination thereof.
Return the largest value contained in the array or any of its sub-arrays.

Input: [1, [2, [3, 4]], [5, [6, 7]]]

Output: 7
*/

分享一下我的代码：

欢迎交流。

本文链接

《JavaScript高级程序设计》阅读笔记（十五）：浏览器中的JavaScript

2012-04-14T04:51:00Z

Window对象

窗口操作

Window对象对操作浏览器窗口非常有用，开发者可以移动或调整浏览器窗口的大小。可用四种方法实现这些操作：

moveBy(dx,dy)：把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。dx值为负左移，dy为负上移。

moveTo(x,y)：移动浏览器窗口，使它的左上角位于用户屏幕的(x,y)处。可以使用负数，不过这样会把部分窗口移出屏幕的可视区域。

resizeBy(dw,dh)：相对浏览器窗口当前大小，把窗口的宽度调整dw个像素，高度调整dy个像素。dw、dy为负时缩小窗口。

resizeTo(w,h)：把窗口的宽度调整为w，高度调整为h，不能使用负数。

注，FireFox跟Chrome默认不允许进行此操作，要在安全设置里更改

效果(在IE浏览器中有效果)：

导航和打开新窗口

导航和打开新窗口用 window.open() 方法，该方法接受四个参数，即要载入新窗口的页面的URL，新窗口名字，特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般只用前三个参数，最后一个参数只有在window.open()打不开新窗口时才有效。

第三个参数可选值如下：

top=pixels窗口的 y 坐标。

left=pixels	窗口的 x 坐标。以像素计。
height=pixels	窗口文档显示区的高度。以像素计。
width=pixels	窗口的文档显示区的宽度。以像素计。
resizable=yes\|no	窗口是否可调节尺寸。默认是 yes。
scrollable=yes\|no	是否显示滚动条。默认是 yes。
location=yes\|no	是否显示地址字段。默认是 yes。
status=yes\|no	是否添加状态栏。默认是 yes。
toolbar=yes\|no	是否显示浏览器的工具栏。默认是 yes。

特性字符串是以逗号分隔的，所以在逗号或等号后不能有空格。

示例：

document对象

用document的open、write、close等方法可以向新打开的窗口中写入内容，如下所示：

location对象

location对象可以用来解析URL，例如 URL为：http://www.cnblogs.com/artwl/archive/2012/04/14/2446762.html#top?id=1，则:

hash:#top

host:www.cnblogs.com

hostname:www.cnblogs.com

href:http://www.cnblogs.com/artwl/archive/2012/04/14/2446762.html#top?id=1

pathname:/artwl/archive/2012/04/14/2446762.html

port:空白

protocol:http:

search:?id=1

本文链接

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

2012-04-12T03:01:00Z

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

本文链接

JavaScript单元测试ABC

2012-04-09T07:41:00Z

前言

当前,在软件开发中单元测试越来越受到开发者的重视,它能提高软件的开发效率,而且能保障开发的质量。以往，单元测试往往多见于服务端的开发中，但随着Web编程领域的分工逐渐明细，在前端Javascript开发领域中，也可以进行相关的单元测试，以保障前端开发的质量。

在服务器端的单元测试中，都有各种各样的测试框架，在JavaScript中现在也有一些很优秀的框架，但在本文中，我们将自己动手一步步来实现一个简单的单元测试框架。

JS单元测试有很多方面，比较多的是对方法功能检查，对浏览器兼容性检查，本文主要谈第一种。

本文检查的JS代码是我以前写的一个JS日期格式化的方法，原文在这里(javascript日期格式化函数，跟C#中的使用方法类似)，代码如下：

Date.prototype.toString=function(format){
var time={};
time.Year=this.getFullYear();
time.TYear=(""+time.Year).substr(2);
time.Month=this.getMonth()+1;
time.TMonth=time.Month<10?"0"+time.Month:time.Month;
time.Day=this.getDate();
time.TDay=time.Day<10?"0"+time.Day:time.Day;
time.Hour=this.getHours();
time.THour=time.Hour<10?"0"+time.Hour:time.Hour;
time.hour=time.Hour<13?time.Hour:time.Hour-12;
time.Thour=time.hour<10?"0"+time.hour:time.hour;
time.Minute=this.getMinutes();
time.TMinute=time.Minute<10?"0"+time.Minute:time.Minute;
time.Second=this.getSeconds();
time.TSecond=time.Second<10?"0"+time.Second:time.Second;
time.Millisecond=this.getMilliseconds();

var oNumber=time.Millisecond/1000;

if(format!=undefined && format.replace(/\s/g,"").length>0){
format=format
.replace(/yyyy/ig,time.Year)
.replace(/yyy/ig,time.Year)
.replace(/yy/ig,time.TYear)
.replace(/y/ig,time.TYear)
.replace(/MM/g,time.TMonth)
.replace(/M/g,time.Month)
.replace(/dd/ig,time.TDay)
.replace(/d/ig,time.Day)
.replace(/HH/g,time.THour)
.replace(/H/g,time.Hour)
.replace(/hh/g,time.Thour)
.replace(/h/g,time.hour)
.replace(/mm/g,time.TMinute)
.replace(/m/g,time.Minute)
.replace(/ss/ig,time.TSecond)
.replace(/s/ig,time.Second)
.replace(/fff/ig,time.Millisecond)
.replace(/ff/ig,oNumber.toFixed(2)*100)
.replace(/f/ig,oNumber.toFixed(1)*10);
}
else{
format=time.Year+"-"+time.Month+"-"+time.Day+" "+time.Hour+":"+time.Minute+":"+time.Second;
}
return format;
}

这段代码目前没有发现比较严重的bug，本文为了测试，我们把 .replace(/MM/g,time.TMonth) 改为 .replace(/MM/g,time.Month)，这个错误是当月份小于10时，没有用两位数表示月份。

现在有这么一句话，好的设计都是重构出来的，在本文中也一样，我们从最简单的开始。

第一版：用最原始的alert

作为第一版，我们很偷懒的直接用alert来检查，完整代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8"/>
</head>
<body>
<script type="text/javascript">
Date.prototype.toString=function(format){
var time={};
time.Year=this.getFullYear();
time.TYear=(""+time.Year).substr(2);
time.Month=this.getMonth()+1;
time.TMonth=time.Month<10?"0"+time.Month:time.Month;
time.Day=this.getDate();
time.TDay=time.Day<10?"0"+time.Day:time.Day;
time.Hour=this.getHours();
time.THour=time.Hour<10?"0"+time.Hour:time.Hour;
time.hour=time.Hour<13?time.Hour:time.Hour-12;
time.Thour=time.hour<10?"0"+time.hour:time.hour;
time.Minute=this.getMinutes();
time.TMinute=time.Minute<10?"0"+time.Minute:time.Minute;
time.Second=this.getSeconds();
time.TSecond=time.Second<10?"0"+time.Second:time.Second;
time.Millisecond=this.getMilliseconds();

var oNumber=time.Millisecond/1000;

if(format!=undefined && format.replace(/\s/g,"").length>0){
format=format
.replace(/yyyy/ig,time.Year)
.replace(/yyy/ig,time.Year)
.replace(/yy/ig,time.TYear)
.replace(/y/ig,time.TYear)
.replace(/MM/g,time.Month)
.replace(/M/g,time.Month)
.replace(/dd/ig,time.TDay)
.replace(/d/ig,time.Day)
.replace(/HH/g,time.THour)
.replace(/H/g,time.Hour)
.replace(/hh/g,time.Thour)
.replace(/h/g,time.hour)
.replace(/mm/g,time.TMinute)
.replace(/m/g,time.Minute)
.replace(/ss/ig,time.TSecond)
.replace(/s/ig,time.Second)
.replace(/fff/ig,time.Millisecond)
.replace(/ff/ig,oNumber.toFixed(2)*100)
.replace(/f/ig,oNumber.toFixed(1)*10);
}
else{
format=time.Year+"-"+time.Month+"-"+time.Day+" "+time.Hour+":"+time.Minute+":"+time.Second;
}
return format;
}

var date=new Date(2012,3,9);
alert(date.toString("yyyy"));
alert(date.toString("MM"));
</script>
</body>
</html>

运行后会弹出 2012 和 4 ，观察结果我们知道 date.toString("MM")方法是有问题的。

这种方式很不方便，最大的问题是它只弹出了结果，并没有给出正确或错误的信息，除非对代码非常熟悉，否则很难知道弹出的结果是正是误，下面，我们写一个断言(assert)方法来进行测试，明确给出是正是误的信息。

第二版：用assert进行检查

断言是表达程序设计人员对于系统应该达到状态的一种预期，比如有一个方法用于把两个数字加起来，对于3+2，我们预期这个方法返回的结果是5，如果确实返回5那么就通过，否则给出错误提示。

断言是单元测试的核心，在各种单元测试的框架中都提供了断言功能，这里我们写一个简单的断言(assert)方法：

function assert(message,result){
if(!result){
throw new Error(message);
}
return true;
}

这个方法接受两个参数，第一个是错误后的提示信息，第二个是断言结果

用断言测试代码如下：

运行后会弹出如下窗口：

第三版：进行批量测试

在第二版中，assert方法可以给出明确的结果，但如果想进行一系列的测试，每个测试都要进行异常捕获，还是不够方便。另外，在一般的测试框架中都可以给出成功的个数，失败的个数，及失败的错误信息。

为了可以方便在看到测试结果，这里我们把结果用有颜色的文字显示的页面上，所以这里要写一个小的输出方法PrintMessage：

function PrintMessage(text,color){
var div=document.createElement("div");
div.innerHTML=text;
div.style.color=color;
document.body.appendChild(div);
delete div;
}

下面，我们就写一个类似jsTestDriver中的TestCase方法，来进行批量测试：

测试代码：

结果为：

这样我们一眼就可以看出哪个出错了。但这样是否就完美了呢，我们可以看到最后那个测试中 var date=new Date(2012,3,9)是放在testCase外面定义的，并且整个testCase的测试代码中共用了date，这里因为各个方法中没有对date的值进行修改，所以没出问题，如果某个测试方法中对date的值修改了呢，测试的结果就是不准确的，所以在很多测试框架中都提供了setUp和tearDown方法，用来对统一提供和销毁测试数据，下面我们就在我们的testCase中加上setUp和tearDown方法。

第四版：统一提供测试数据的批量测试

首先我们添加setUp和tearDown方法：

testCase("date toString",{
setUp:function(){
this.date=new Date(2012,3,9);
},
tearDown:function(){
delete this.date;
},
yyyy:function(){
assert("yyyy should return 2012",this.date.toString("yyyy")==="2012");
},
MM:function(){
assert("MM should return 04",this.date.toString("MM")==="04");
},
dd:function(){
assert("dd should return 09",this.date.toString("dd")==="09");
}
});

由于setUp和tearDown方法不参与测试，所以我们要修改testCase代码：

运行后的结果跟第三版相同。

小结及参考文章

上面说了，好的设计是不断重构的结果，上面的第四版是不是就完美了呢，远远没有达到，这里只是一个示例。如果大家需要这方面的知识，我后面可以再写写各个测试框架的使用。

本文只是JS单元测试入门级的示例，让初学者对JS的单元测试有个初步概念，属于抛砖引玉，欢迎各位高人拍砖补充。

本文参考了《测试驱动的JavaScript开发》(个人觉得还不错，推荐下)一书第一章，书中的测试用例也是一个时间函数，不过写的比较复杂，初学者不太容易看懂。

本文链接