标签为 "javascript" 的文章

javascript高效简洁代码的编写及优化技巧

三水清 2009-11-28 06:46:595 Comments

前言

随着互联网前端技术的革新，javascript越来越重要，并且js的轻便，非严格的写法，使越来越多的人掌握了js，可是谈到js的写法，很多人都觉得自己很熟悉，很了解，但是笔者在实践中发现js并非大家想象的那么简单，就像同事一句话：php会的很多，一抓一大把，而真正会js的却不多。仔细想想，原因很简单，js的加载到客户端运行的，不像php可以一个include就可以搞定，而且引入的文件中不用的函数可以放着不动，而js不同，如果加入很多很多无用的函数会大大的占有带宽，不利于用户体验。下面结合笔者实际开发过程中遇到的问题，以及自己收集的技巧，谈谈js高效简洁代码的编写及其优化的技巧。当然网上也有很多类似的文章，不过建议大家还是不要人云亦云，真正适合自己的技巧跟编写习惯才是最好的！

真假的判断

Javascript中有null、undefined、string、number、boolean五种基本的类型，一般判断真假或者为空的时候大家会使用下面的代码：

if(a==true){
    //doSomeTing();
}

但是这种方法很不简洁，我们完全可以使用1，0来判断，比如我们设定一个a，如果a为假，我们就改成真，而a在程序后面可能用于判断，最简单也是最好理解的方法就是下面的写法

var a=false;
if(a==false){
    a=true;
}

既然提到了0，1，肯定有人想到了第二种写法：

var a=0;
if(!a){
    a=1;
}

这个代码还可以进一步简写优化，就是使用js的三元运算符，也就是三目运算符：

var a=0;
!a?a=1?null;

还有一点，对于空字符串的判断，往往采用if（a==”"）,其实对于空字符本身就是false，下面我总结了下Javascript中的真假值，希望对大家有用
继续阅读全文……

jQuery浏览器判断一个bug，以及修改建议

三水清 2009-11-18 21:48:482 Comments

前几天在使用jQuery（1.3.2）的时候，想使用下浏览器判断$.browser，可是我在使用$.browser.safari的时候，发现一个问题：
就是chrome浏览器也走$.browser.safari的判断，查看了jQuery的源代码：

var userAgent = navigator.userAgent.toLowerCase();
jQuery.browser = {
	version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
	safari: /webkit/.test( userAgent ),
	opera: /opera/.test( userAgent ),
	msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
	mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

继续阅读全文……

14条JS代码编写时最佳规范

三水清 2009-11-09 08:56:141 Comment

写任何编程代码，不同的开发者都会有不同的见解。但参考一下总是好的，下面是来自Javascript Toolbox发布的14条最佳JS代码编写技巧，Sofish翻译(1,2)。

1. 总是使用 ‘var’

在JavaScript中，变量不是全局范围的就是函数范围的，使用”var”关键词将是保持变量简洁明了的关键。当声明一个或者是全局或者是函数级（function-level）的变量，需总是前置”var”关键词，下面的例子将强调不这样做潜在的问题。

不使用 Var 造成的问题

var i=0; // This is good - creates a global variable
function test() {
   for (i=0; i<10; i++) {
      alert("Hello World!");
   }
}
test();
alert(i); // The global variable i is now 10!

因为变量函数中变量 i 并没有使用 var 使其成为函数级的变量，在这个例子中它引用了全局变量。总是使用 var 来声明全局变量是一个很多的做法，但至关重要的一点是使用 var 定义一个函数范围的变量。下面这两个方法在功能上是相同的：

正确的函数

function test() {
   var i=0;
   for (i=0; i<10; i++) {
      alert("Hello World!");
   }
}
正确的函数
 
function test() {
   for (var i=0; i<10; i++) {
      alert("Hello World!");
   }
}

2. 特性检测而非浏览器检测

一些代码是写来发现浏览器版本并基于用户正使用的客户端的对其执行不同行为。这个，总的来说，是一个非常糟的实践。更好的方法是使用特性检测，在使 用一个老浏览器可能不支持的高级的特性之前，首先检测（浏览器的）是否有这个功能或特性，然后使用它。这单独检测浏览器版本来得更好，即使你知道它的性 能。你可以在 http://www.jibbering.com/faq/faq_notes/not_browser_detect.html找到一个深入讨论这个问题的文章。

例子：
继续阅读全文……

关于Ajax在浏览器中产生前进后退的实现方法

三水清 2009-10-30 12:44:016 Comments

关于Ajax在使用中要使浏览器产生前进后退的方法，网上比较多的方法有两种：一是采用hash值的方式，这是我们在地图preview版中使用的方法（采用jQuery的history插件）；二是使用iframe的方法，目前百度地图、Google地图采用。为使我们以后的mymap方便引用到博客等网页内容中去，并且给地图添加复制链接的方法，我们决定把地图中Ajax在浏览器产生前进后退的方法改变为iframe的方法。

实现的机制

主要使用的两个html：index.html，history.html（iframe src地址）。
主要代码参考index.html以及history.html的js部分:

现在说说实现的方式

Index.html中代码解释：
wHistory.init();
给body插入iframe跟一个表单（主要用于Safari浏览器、或者其他特殊使用，比如复制地址方面，直接取值input的value即可，不需要处理，而取iframe的src还要进行字符串的处理）

判断是否为Safari浏览器，如果是则特殊处理一下，根据不同的浏览器定义main函数

Callback函数处理返回的信息。
继续阅读全文……

第9页 / 共9页 456789
♦▐返回顶部