JavaScript的实用技巧(一)

JavaScript的成功让人津津乐道。为网页编写JavaScript代码是所有网页设计师的基本技能。这种有趣的语言包含了很多未知的东西，即使是多年的JavaScript程序员也没有完全理解。本文从七个方面讲述了JavaScript中你不熟悉但非常实用的技巧。缩写语句JavaScript可以使用缩写语句快速创建对象和数组，比如下面的代码：varcar=NewObject()；car.colour=' redcar . wheels=4；car.hubcaps=“旋转”；car . age=4；可以使用以下缩写语句：varcar={ colour : ' red '，wheels :4，hubcaps :' spinning '，age :4}在此创建对象汽车，但需要特别注意的是'；'在结束大括号之前不得添加。不然IE会有很多麻烦。创建数组的传统方法有：vararraytest=newarray ('test1 '，' test2 '，' test3 '，' test4 ')；使用缩写语句：vararraytest=['test1 '，' test2 '，' test3 '，' test4 ']；另一个可以使用删节语句的地方是条件判断语句：vardirectionif(x200){ direction=1；} else { direction=-1；}//可以缩写为：vardirection=x200？1:-1;JSON数据格式JSON是道格拉斯克洛克福特设计的“JavaScript对象符号”的缩写。JSON改变了JavaScript缓存复杂数据格式的困境。例如，如果要描述一个乐队，可以这样写：varband={ ' name ' : ' myname ist 1 '，' members ' :[{ ' name ' : ' name 1 '，' role' :' role1'}，{'name' :' name2 '，' role '。{'name' :' name3 '，' role' :' role3'}，{'name' :' name4 '，' role' :' role4'}]，' year' :' 2010'}您可以在JavaScript中直接使用JSON。下面的代码调用著名书签网站delicious.com的一个API，返回你在网站上的所有书签，并在自己的网站上显示：divid=' delicious '/divscriptfunctiondelicious(o){ varout=' ul '；for(vari=0；io.lengthI){ out=' lia href=' o[I]。u ''' o[i]。d '/a/Li '；} out='/ul '；document.getElementById('美味')。innerHTML=out}/script script src=' http://feeds . delicious.com/v2/JSON/code po8/JavaScript？Count=15 callback=美味'/脚本JavaScript本地函数(Math、Array和String) JavaScript有很多内置函数，有效使用时可以避免很多不必要的代码。比如传统的方法是：varnumbers=[3，342，23，22，124]；var max=0；for(vari=0；inumbers.lengthI){ if(numbers[I]max){ max=numbers[I]；} }警报(最大值)；使用内置函数更容易实现：varnumbers=[3，342，23，22，124]；numbers.sort(函数(a，b){ return B- a })；警报(数字[0])；另一种方法是使用Math.max()方法：Math.max(12，123，2，3，422，4)；//return422您可以使用此方法帮助检测browser var scroll top=math . max(doc . document element . scroll top，doc . body . scroll top)；这解决了IE浏览器中的一个问题。这样，您总是可以找到正确的值，因为浏览器不支持的值将返回undefined。还可以使用JavaScript内置的split()和join()函数来处理HTML对象的CSS类名。如果HTML对象的类名是由空格分隔的多个名称，则在为它们追加或删除CSS类名时应特别注意。如果对象没有类名属性，可以直接给它一个新的类名。如果类名已经存在，新添加的类名前必须有空格，这是通过传统的JavaScript方法实现的：functionaddclass (elm，new class){ varc=elm . class name；elm.className=(c==' ')？new class : c ' ' new class；}使用split和join方法要直观优雅得多：functionaddclass (elm，new class){ var class=elm . class name . split(')；class . push(new class)；elm . class name=class . join(')；}事件代理与其在HTML文档中设计一堆事件，不如直接设计一个事件代理。例如，如果您有一些链接，用户不希望在单击后打开链接，而是执行一个事件。HTML代码如下：。

传统的事件处理是遍历每个链接，添加自己的事件处理：。

使用事件代理，您可以直接处理它，而无需遍历：。

匿名函数和模块模式JavaScript的一个问题是，任何变量、函数或对象，除非在函数内部定义，否则都是全局的，这意味着同一网页上的其他代码可以访问和重写这个变量(ECMA的JavaScript 5改变了这种情况——翻译器)。您可以通过使用匿名函数来绕过这个问题。比如你有这样一段代码，很明显，变量的名字、年龄、状态都会变成全局变量。

为了避免这个问题，可以使用匿名函数：。

如果不调用这个函数，可以更直接：。

如果想访问对象或函数，可以：。

这就是所谓的Module模式或Singleton模式，这种模式得到了道格拉斯克洛克福特的高度赞扬，并在雅虎用户界面库YUI中得到了广泛应用。如果想调用其他地方的方法，又不想在调用前使用对象名myApplication，可以在匿名函数中返回这些方法，甚至可以简称为：。

代码配置当别人使用你写的JavaScript代码时，难免会改变一些代码，但会很难，因为不是每个人都能轻松读懂别人的代码。相反，最好创建一个代码配置对象，其他人只需要更改这个对象中的一些配置就可以实现代码更改。这里有一篇关于JavaScript配置对象的详细文章，简单说就是：在代码中创建一个名为configuration的对象，保存所有可更改的配置，比如CSS ID和类名、按钮的标签文本、描述性文本、本地语言设置。将对象设置为全局对象，以便其他人可以直接访问和重写它。你应该在最后一步做这项工作。下面是一篇参考代码前五件事的文章。与后台交互JavaScript是一种前台语言。您需要其他语言来与背景交互并返回数据。使用AJAX，您可以让JavaScript直接使用与后台的交互，并将复杂的数据处理移交给后台。JavaScript框架自己编写代码来适应各种浏览器完全是浪费时间。你应该选择一个JavaScript框架，让这些复杂的事情由框架来处理。