7 JavaScript Tips

I have been writing JavaScript code for a long time, and I can’t even remember when I started. I'm very excited about what JavaScript has accomplished in recent years; I've been lucky enough to be a beneficiary of these achievements. I've written quite a few articles, chapters, and a book dedicated to it, and yet I'm still discovering new things about the language. What follows is a description of programming techniques that have made me say "Ah!" in the past, techniques that you should try now instead of waiting to stumble upon them sometime in the future.

Concise writing

One of my favorite things in JavaScript is the shorthand method for generating objects and arrays. In the past, if you wanted to create an object, you would do this:

1 var car = new Object();
2 car.colour = 'red';
3 car.wheels = 4;
4 car.hubcaps = 'spinning';
5 car.age = 4;

The following would achieve the same effect:

1 var car = {
2 colour:'red',
3 wheels:4,
4 hubcaps:'spinning',
5 age:4
6 }

Much simpler, you don’t need to reuse the name of the object. In this way, car is defined. Maybe you will encounter the problem of invalidUserInSession. This will only happen when you use IE. Just remember one thing, do not write a comma in front of the closing brace, and you will not have trouble.

Another very convenient abbreviation is for arrays. The traditional way of defining an array is as follows:

1 var moviesThatNeedBetterWriters = new Array(
2 'Transformers','Transformers2','Avatar','IndianaJones 4'
3 );

The abbreviated version is as follows:

1 var moviesThatNeedBetterWriters = [
2 'Transformers','Transformers2','Avatar','IndianaJones 4'
3 ];

For arrays, there is a problem. In fact, there is no graph group function. But you will often find people defining car above like this

1 var car = new Array();
2 car['colour'] = 'red';
3 car['wheels'] = 4;
4 car['hubcaps'] = 'spinning';
5 car['age'] = 4;

Arrays are not omnipotent; it is not written correctly and it will make people confused. Graph groups are actually functions of objects, and people confuse the two concepts.

Another very cool shorthand method is to use the ternary conditional notation. You don't have to write it like this...

var direction;
if(x < 200){
	direction = 1;
} else {
	direction = -1;
}

You can simplify it using the ternary conditional notation:

var direction = x < 200 ? 1 : -1;

When the condition is true, take the value after the question mark, otherwise take the value after the colon.

　Storing data in JSON form

　Before I discovered JSON, I used all kinds of crazy methods to store data in JavaScript’s inherent data types, such as arrays and strings, mixed with easy-to-split flags. symbols and other nasty stuff. Everything changed when Douglas Crockford invented JSON. Using JSON, you can use JavaScript's own functions to store data into complex formats, and it can be directly accessed and used without any additional conversion. JSON is the abbreviation of "JavaScript Object Notation", which uses the two abbreviations mentioned above. So, if you wanted to describe a band, you might write it like this:

01 var band = {
02 "name":"The Red Hot Chili Peppers",
03 "members":[
04 {
05 "name":"Anthony Kiedis",
06 "role":"lead vocals"
07 },
08 {
09 "name":"Michael 'Flea' Balzary",
10 "role":"bass guitar, trumpet, backing vocals"
11 },
12 {
13 "name":"Chad Smith",
14 "role":"drums,percussion"
15 },
16 {
17 "name":"John Frusciante",
18 "role":"Lead Guitar"
19 }
20  ],
21 "year":"2009"
22 }

You can use JSON directly in JavaScript, encapsulate it in a function, or even use it as a return value from an API. We call this JSON-P, and many APIs use this format.

　You can call a data provider and return JSON-P data directly in the script code:

01 <div id="delicious"></div><script>
02 function delicious(o){
03 var out = &#39;<ul>&#39;;
04 for(var i=0;i<o.length;i++){
05 out += &#39;<li><a href="&#39; + o[i].u + &#39;">&#39; +
06 o[i].d + &#39;</a></li>&#39;;
07 }
08 out += &#39;</ul>&#39;;
09 document.getElementById(&#39;delicious&#39;).innerHTML = out;
10 }
11 </script>
12 <script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"></script>

　This is to call the Web service function provided by the Delicious website to obtain the recent unordered bookmark list in JSON format.

　Basically, JSON is the most portable way to describe complex data structures, and it can run in the browser. You can even run it in PHP using the json_decode() function. One thing that surprised me about JavaScript's built-in functions (Math, Array and String) is that after I studied the math and String functions in JavaScript, I found that they can greatly simplify my programming work. Using them, you can save complex loop processing and conditional judgment. For example, when I need to implement a function to find the largest number in an array of numbers, I used to write the loop like this, like this:

1 var numbers = [3,342,23,22,124];
2 var max = 0;
3 for(var i=0;i<numbers.length;i++){
4 if(numbers[i] > max){
5 max = numbers[i];
6 }
7 }
8 alert(max);

We can also implement it without a loop:

1 var numbers = [3,342,23,22,124];
2 numbers.sort(function(a,b){return b - a});
3 alert(numbers[0]);

Things to note Yes, you cannot sort() a numeric character array, because in that case it will only sort alphabetically. If you want to know more usage, you can read this good article about sort().

　Another interesting function is Math.max(). This function returns the largest number among the numbers in the parameter:

Math.max(12,123,3,2,433,4); // returns 433

Since this function can check the number and return the largest one, you can use it to test the browser's support for a certain feature:

1 var scrollTop=Math.max(
2 doc.documentElement.scrollTop,
3 doc.body.scrollTop
4 );

　This is used to solve IE problems. You can get the scrollTop value of the current page, but depending on the DOCTYPE on the page, only one of the above two properties will store this value, and the other property will be undefined, so you can get this by using Math.max() number. Read this article to learn more about using math functions to simplify JavaScript.

　 Another pair of very useful functions for manipulating strings are split() and join(). I think the most representative example is writing a function to attach CSS styles to page elements.

　　是这样的，当你给页面元素附加一个CSS class时，要么它是这个元素的第一个CSS class，或者是它已经有了一些class, 需要在已有的class后加上一个空格，然后追加上这个class。而当你要去掉这个class时，你也需要去掉这个class前面的空格(这个在过去非常重要，因为有些老的浏览器不认识后面跟着空格的class)。

　　于是，原始的写法会是这样：

1 function addclass(elm,newclass){
2 var c = elm.className;
3 elm.className = (c === '') ? newclass : c+' '+newclass;
4 }

　　你可以使用 split() 和 join() 函数自动完成这个任务：

1 function addclass(elm,newclass){
2 var classes = elm.className.split(' ');
3 classes.push(newclass);
4 elm.className = classes.join(' ');
5 }

　　这会确保所有的class都被空格分隔，而且你要追加的class正好放在最后。

　　事件委派

　　Web应用都是由事件驱动运转的。我喜欢事件处理，尤其喜欢自己定义事件。它能使你的产品可扩展，而不用改动核心代码。有一个很大的问题（也可以说是功能强大的表现），是关于页面上事件的移除问题。你可以对某个元素安装一个事件监听器，事件监听器就开始运转工作。但页面上没有任何指示说明这有个监听器。因为这种不可表现的问题 (这尤其让一些新手头疼) ，以及像IE6这样的”浏览器“在太多的使用事件监听时会出现各种的内存问题，你不得不承认尽量少使用事件编程是个明智的做法。

　　于是 事件委托 就出现了。

　　当页面上某个元素上的事件触发时，而在 DOM 继承关系上，这个元素的所有子元素也能接收到这个事件，这时你可以使用一个在父元素上的事件处理器来处理，而不是使用一堆的各个子元素上的事件监听器来处理。究竟是什么意思？这样说吧，页面上有很多超链接，你不想直接使用这些链接，想通过一个函数来调用这个链接，HTML代码是这样的：

1 <h2>Great Web resources</h2>
2 <ul id="resources">
3 <li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>
4 <li><a href="http://sitepoint.com">Sitepoint</a></li>
5 <li><a href="http://alistapart.com">A List Apart</a></li>
6 <li><a href="http://yuiblog.com">YUI Blog</a></li>
7 <li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>
8 <li><a href="http://oddlyspecific.com">Oddly specific</a></li>
9 </ul>

　　常见的做法是通过循环这些链接，将每个链接上附加一个事件处理器：

01 // 典型的事件处理例子
02 (function(){
03 var resources = document.getElementById('resources');
04 var links = resources.getElementsByTagName('a');
05 var all = links.length;
06 for(var i=0;i<all;i++){
07 // Attach a listener to each link
08 links[i].addEventListener(&#39;click&#39;,handler,false);
09 };
10 function handler(e){
11 var x = e.target; // Get the link that was clicked
12 alert(x);
13 e.preventDefault();
14 };
15 })();

　　我们用一个事件处理器也能完成这项任务：

01 (function(){
02 var resources = document.getElementById('resources');
03 resources.addEventListener('click',handler,false);
04 function handler(e){
05 var x = e.target; // get the link tha
06 if(x.nodeName.toLowerCase() === 'a'){
07 alert('Event delegation:' + x);
08 e.preventDefault();
09 }
10 };
11 })();

　　因为点击事件就发生在这些页面元素里，你要做的就是比较它们的 nodeName，找出应该回应这个事件的那个元素。

　　免责声明：上面说的这两个关于事件的例子，在所有浏览器里都能运行，除了IE6，在IE6上你需要使用一个事件模型，而不是简单的W3C的标准实现。这也就是我们推荐使用一些工具包的原因。

　　这种方法的好处并不是仅限于把多个事件处理器缩减为一个。你想想，举个例子，你需要动态的往这个链接表里追加更多的链接。使用事件委托后，你就不需要做其它修改了；否则的话，你需要重新循环这个链接表，重新给每个链接安装事件处理器。

　　匿名函数和模块化

　　在JavaScript里最令人懊恼的事情是变量没有使用范围。任何变量，函数，数组，对象，只要不在函数内部，都被认为是全局的，这就是说，这个页面上的其它脚本也可以访问它，而且可以覆盖重写它。

　　解决办法是，把你的变量放在一个匿名函数内部，定义完之后立即调用它。例如，下面的写法将会产生三个全局变量和两个全局函数：

1 var name = 'Chris';
2 var age = '34';
3 var status = 'single';
4 function createMember(){
5 // [...]
6 }
7 function getMemberDetails(){
8 // [...]
9 }

　　如果这个页面上的其它脚本里也存在一个叫 status 的变量，麻烦就会出现。如果我们把它们封装在一个 myApplication 里，这个问题就迎刃而解了：

01 var myApplication = function(){
02 var name = 'Chris';
03 var age = '34';
04 var status = 'single';
05 function createMember(){
06 // [...]
07 }
08 function getMemberDetails(){
09 // [...]
10 }
11 }();

　　但是，这样一来，在函数外面就没有什么功能了。如果这是你需要的，那就可以了。你还可以省去函数的名称：

01 (function(){
02 var name = 'Chris';
03 var age = '34';
04 var status = 'single';
05 function createMember(){
06 // [...]
07 }
08 function getMemberDetails(){
09 // [...]
10 }
11 })();

　　如果你想在函数外面也能使用里面的东西，那就要做些修改。为了能访问 createMember() 或 getMemberDetails(),你需要把它们变成 myApplication的属性，从而把它们暴露于外部的世界:

01 var myApplication = function(){
02 var name = 'Chris';
03 var age = '34';
04 var status = 'single';
05 return{
06 createMember:function(){
07 // [...]
08 },
09 getMemberDetails:function(){
10 // [...]
11 }
12 }
13 }();
14 //myApplication.createMember() 和
15 //myApplication.getMemberDetails() 就可以使用了。

　　这被称作 module 模式或 singleton。Douglas Crockford 多次谈到过这些，Yahoo User Interface Library YUI 里对此有大量的使用。但这样一来让我感到不便的是，我需要改变句式来使函数和变量能被外界访问。更甚者，调用时我还需要加上myApplication 这个前缀。所以，我不喜欢这样做，我更愿意简单的把需要能被外界访问的元素的指针导出来。这样做后，反倒简化了外界调用的写法：

01 var myApplication = function(){
02 var name = 'Chris';
03 var age = '34';
04 var status = 'single';
05 function createMember(){
06 // [...]
07 }
08 function getMemberDetails(){
09 // [...]
10 }
11 return{
12 create:createMember,
13 get:getMemberDetails
14 }
15 }();
16 //现在写成 myApplication.get()和 myApplication.create() 就行了。

　　我把这个称作 “revealing module pattern.”

　　可配置化

　　一旦我把所写的JavaScript代码发布到这个世界上，就有人想改动它，通常是人们想让它完成一些它本身完成不了的任务—但通常也是我写的程序不够灵活，没有提供用户可自定义的功能。解决办法是给你的脚本增加一个配置项对象。我曾经写过一篇深入介绍JavaScript配置项对象的文章，下面是其中的要点：

Add an object called configuration to your script.

In this object, all the things that people often change when using this script are stored:

CSS ID and class name;

Button names, label words, etc.;

Values ​​such as "number of images displayed per page" , the value of "image display size";

location, location, and language settings.

Return this object to the user as a public property so that the user can modify and overwrite it.

Normally this is the last step in your programming process. I summarized these in an example: "Five things to do to a script before handing it over to the next developer."

In fact, you also want your code to be easy for people to use, and according to the Each of them requires some changes. If you implement this feature, you'll receive fewer confusing emails from people complaining about your script, telling you that someone modified your script and it works great.

Interacting with the backend

In so many years of programming experience, one of the important things I have learned is that JavaScript is an excellent language for developing interface interactions, but if it is used to process numbers or access data sources, then It's just a bit out of control.

　Initially, I learned JavaScript to replace Perl, because I hated having to copy the code to the cgi-bin folder to make Perl run. Later, I understood that I should use a background work language to process the main data, instead of letting JavaScript do everything. What's more important is that we have to consider security and language features.

　If I access a Web service, I can get the data in JSON-P format, and I do various data conversions on it in the client browser, but when I have a server, I have more There are many ways to convert data. I can generate data in JSON or HTML format on the server side and return it to the client, as well as cache data and other operations. If you understand and prepare these beforehand, you will benefit in the long run and save yourself a lot of headaches. Writing programs that work for every browser is a waste of time, use a toolkit!

When I first started to engage in web development, I struggled for a long time with the question of whether to use document.all or document.layers when accessing a page. I chose document.layers because I like the idea of ​​any layer being its own document (and I was writing too many document.writes to generate elements). Layers pattern eventually failed, so I started using document.all. I was happy when Netscape 6 announced support for the W3C DOM model only, but users didn't really care. The user just sees that this browser cannot display something that most browsers can display properly - it is a problem with our coding. We write short-sighted code that can only run in the current environment, and unfortunately, our operating environment is constantly changing.

　I have wasted too much time dealing with compatibility issues with various browsers and versions. Being good at handling such problems provides me with a good job opportunity. But now we don't have to endure this pain anymore.

　Some toolkits, such as YUI, jQuery and Dojo, can help us deal with this kind of problem. They deal with various browser problems by abstracting various interface implementations, such as version incompatibility, design defects, etc., saving us from pain. Unless you want to test a beta version of the browser, never add code to fix the browser's flaws in your program, because you are likely to forget to delete your code when the browser has fixed the problem. code.

On the other hand, relying solely on toolkits is also short-sighted. Toolkits can help you develop quickly, but if you don't understand JavaScript deeply, you can also do things wrong.