设计对浏览器更加友好的网站...-js 字符串转换成数字-JS完成代码前还可以做的5件事

当前位置: 编程技术>WEB前端

本页文章导读:

▪设计对浏览器更加友好的网站——整合搜索功能（针对Google Chrome）设计对浏览器友好的网站，是一个很大的话题。本篇文章想讨论一下的是，如何在Google Chrome中直接整合网站所带的搜索功能。很多网站都有搜索功能，例如以博客园的搜索中心地址是：http://.........

▪js 字符串转换成数字在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形式的.在网上找了一下js.........

▪JS完成代码前还可以做的5件事写在前面我们不得面对这样一个事实：许多程序员不会规划他们的JS代码。我们经常快速写完代码、运行、提交。但当我们继续开发遇到变量和函数时不得不再次回头查看它们代表的含义，麻.........

[1]设计对浏览器更加友好的网站——整合搜索功能（针对Google Chrome）

来源: 发布时间: 2013-11-15

设计对浏览器友好的网站，是一个很大的话题。本篇文章想讨论一下的是，如何在Google Chrome中直接整合网站所带的搜索功能。

很多网站都有搜索功能，例如以博客园的搜索中心地址是：http://zzk.cnblogs.com/

我们可以进入这个网页，然后输入关键字进行搜索，例如

这没有任何问题，但有时候可能你会想，为什么每次都要输入地址，然后进入到搜索页面，然后再输入关键字才能搜索呢？有没有更加简单的方法？

Google的Chrome浏览器在这方面有一些不错的创新，首先，它支持直接在地址栏输入内容，进行搜索，例如

此时他会调用默认的搜索引擎（我的本机设置为Bing)进行搜索

默认的搜索引擎肯定只有一个，那么我们是否有办法添加更多的搜索引擎，并且用某种方式在地址栏直接搜索呢？

在Google Chrome的设置页面中，你可以看到可以管理搜索引擎

点击“管理搜索引擎”按钮可以看到如下的界面

如果我们希望能快速地访问博客园的搜索功能，可以在“其他搜索引擎”中添加一个定义

第一个参数是一个描述名称，第二个参数是你可能会在地址栏中输入的地址，第三个字符串是将要访问的搜索页面的地址，用%s表示你的搜索关键字。

那么，这样定义好之后，如何使用它呢？

你可以在地址栏输入zzk.cnblogs.com（通常会自动补齐的），然后注意看右侧会有一个提示“按Tab可通过博客园进行搜索”

我按下Tab键，然后输入要找的关键字，例如CLR

回车之后就可以直接看到搜素结果了。

这样看起来就好了很多，节省了我们一些时间，这是一个聪明的设计。

再往深入里面想一下，这个做法是很好，但是如果要求所有人都去手工地添加这个搜索设置，可能也不是很方便。有没有更加智能的做法呢

其实Google Chrome在设计上已经考虑了这个问题，如果我们的网站想自动地在Google Chrome中注册搜索引擎设置，可以参考这里的说明

http://www.chromium.org/tab-to-search

我们需要在搜索中心的页面的头部中，添加一个链接定义

[2]js 字符串转换成数字

来源: 发布时间: 2013-11-15

在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形式的.在网上找了一下js字符串转数字的文章,这个比较全

方法主要有三种

转换函数、强制类型转换、利用js变量弱类型转换。

1. 转换函数：

js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)。

一些示例如下：

parseInt("1234blue"); //returns 1234
parseInt("0xA"); //returns 10
parseInt("22.5"); //returns 22
parseInt("blue"); //returns NaN

parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的，示例如下：

parseInt("AF", 16); //returns 175
parseInt("10", 2); //returns 2
parseInt("10", 8); //returns 8
parseInt("10", 10); //returns 10

如果十进制数包含前导0，那么最好采用基数10，这样才不会意外地得到八进制的值。例如：

parseInt("010"); //returns 8
parseInt("010", 8); //returns 8
parseInt("010", 10); //returns 10

parseFloat()方法与parseInt()方法的处理方式相似。
使用parseFloat()方法的另一不同之处在于，字符串必须以十进制形式表示浮点数，parseFloat()没有基模式。

下面是使用parseFloat()方法的示例：

parseFloat("1234blue"); //returns 1234.0
parseFloat("0xA"); //returns NaN
parseFloat("22.5"); //returns 22.5
parseFloat("22.34.5"); //returns 22.34
parseFloat("0908"); //returns 908
parseFloat("blue"); //returns NaN

2. 强制类型转换

还可使用强制类型转换（type casting）处理转换值的类型。使用强制类型转换可以访问特定的值，即使它是另一种类型的。
ECMAScript中可用的3种强制类型转换如下：
Boolean(value)——把给定的值转换成Boolean型；
Number(value)——把给定的值转换成数字（可以是整数或浮点数）；
String(value)——把给定的值转换成字符串。
用这三个函数之一转换值，将创建一个新值，存放由原始值直接转换成的值。这会造成意想不到的后果。
当要转换的值是至少有一个字符的字符串、非0数字或对象（下一节将讨论这一点）时，Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null，它将返回false。

可以用下面的代码段测试Boolean型的强制类型转换。

Boolean(""); //false – empty string
Boolean("hi"); //true – non-empty string
Boolean(100); //true – non-zero number
Boolean(null); //false - null
Boolean(0); //false - zero
Boolean(new Object()); //true – object

Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似，只是它转换的是整个值，而不是部分值。示例如下：

用　　法结　　果
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100

最后一种强制类型转换方法String()是最简单的，示例如下：

var s1 = String(null); //"null"
var oNull = null;
var s2 = oNull.toString(); //won’t work, causes an error

3. 利用js变量弱类型转换

举个小例子，一看，就会明白了。

上例利用了js的弱类型的特点，只进行了算术运算，实现了字符串到数字的类型转换，不过这个方法还是不推荐的

原文链接：http://blog.csdn.net/sam2007/archive/2009/04/01/4040427.aspx

本文链接

[3]JS完成代码前还可以做的5件事

来源: 发布时间: 2013-11-15

写在前面

我们不得面对这样一个事实：许多程序员不会规划他们的JS代码。我们经常快速写完代码、运行、提交。但当我们继续开发遇到变量和函数时不得不再次回头查看它们代表的含义，麻烦就从这里开始了。同样当我们在其他程序员手中获取脚本也会遇到类似的错误。因此，当我们说”this is done, I can go on”时最好对脚本做下列5件事情。

问题描述

现在我们想给每一个带有class属性为collapsible的DIV内部添加超链接A，来显示和隐藏DIV。

下面是用模块函数编写的实现代码：

上面的代码已经很准确的实现了我们想要的结果。但是我们还可以对上面的代码进一步的重构。

第一步：样式(CSS)与行为(JavaScript)分离

我们可以用添加一个CSS的class选择器来消除通过JS中设置的样式。这种现象在新手中经常遇到.

第二步：对代码进一步性能优化

这里我们可以做两件事情：1、循环语句中secs的length属性可以用变量保存。2、为事件处理器创建重用的函数。好处是减少事件处理器数量，减少内存占用。

第三步：添加配置对象

使用配置对象存放代码中的硬编码，如使用到的文本标签或自定义的属性名。有利于后续的维护。

var collapser = (function(){
var config = {
indicatorClass : 'collapsible',
collapsedClass : 'collapsed',
collapseLabel : 'collapse',
expandLabel : 'expand'
}
var secs = document.getElementsByTagName('div');
for(var i=0,j=secs.length;i<j;i++){
if(secs[i].className.indexOf(config.indicatorClass)!==-1){
secs[i].className += ' ' + config.collapse