Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the skills of beginners of JavaScript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Replace = with =

There are two different equality operators in JavaScript: = = |! = = and = = |! =. By contrast, the former is more recommended. Please try to use the former.

"if two comparison objects have the same type and value, = returns false."

-_ JavaScript: The Good Parts

However, if you use = and!, you may encounter some unexpected problems when working with different data types. Before making equality judgments, JavaScript tries to convert them to strings, numbers, or Boolean quantities.

two。 Avoid using Eval functions

The Eval function takes a string as an argument, executes the string as a JavaScript statement, and returns the result.

This function not only reduces the efficiency of your script execution, but also greatly increases the security risk because it gives too much power to parameters as text. Don't use it!

3. Don't use fast writing.

Technically, you can omit most of the curly braces and sentence ending semicolons, and most browsers can execute the following statements correctly:

If (someVariableExists) x = false

But what if it goes like this:

If (someVariableExists) x = false anotherFunctionCall ()

You might think it is equal to the following statement:

If (someVariableExists) {x = false; anotherFunctionCall ();}

Unfortunately, this is not the case. The reality is that it is equivalent to:

If (someVariableExists) {x = false;} anotherFunctionCall ()

As you have noticed, no matter how beautiful the indentation is, it is no substitute for this gorgeous bracket. Please write clearly the curly braces and the semicolon at the end of the sentence in all cases. It can be omitted occasionally when there is only one line of statement, although doing so is highly deprecated:

If (2 + 2 = = 4) return 'nicely done'

Think more about the future, son.

Suppose you need to add more commands to this if statement in the future development process? Don't you have to add parentheses then?

4. Make good use of JS Lint

JSLint is a debugger written by Douglas Crockford. You just need to paste your code, and it can quickly scan out any obvious errors and problems for you.

"JSLint scans the received code. Find the problem, describe the problem, and give its approximate location in the source code. Problems that can be found include, but are not limited to, grammatical errors, although grammatical errors are indeed the most common. JSLint also uses established conventions to check the formatting style of the code, as well as structural errors. Scanning through JSLint does not guarantee that your program will be completely correct. It just provides you with an extra pair of eyes to find mistakes. "

-JSLint document

Before you finish the code, check it in JSLint to quickly eliminate your careless mistakes.

5. Load a script at the bottom of the page

As shown in the following figure:

Remember-we need to do everything we can to make sure the client page loads as fast as possible. The browser will not be able to load the rest of the page until the script is loaded.

If your JS file is just adding some extra features-for example, binding events to click on a link-you can wait until the page loads basically. Put the JS file on the page *, before the closing tag of the body, and do so.

A better way to write it is

< p>

Now you know what kind of corn I like best.

< /p>

< script type="text/javascript" src="path/to/file.js">

< /script>

< script type="text/javascript" src="path/to/anotherFile.js">

< /script>

< /body>

< /html>

6. Declare variables outside the For statement

When you need to execute lengthy for statements, don't let the JavaScript engine repeat unnecessary actions every time. For example:

This is not good

For (var I = 0; I

< someArray.length; i++) { var container = document.getElementById('container'); container.innerHtml += 'my number: ' + i; console.log(i); } 这段代码每次都重新定义数组长度，每次都在遍历DOM寻找container元素 -- 太傻了！ 这样好多了 var container = document.getElementById('container'); for(var i = 0, len = someArray.length; i < len; i++) { container.innerHtml += 'my number: ' + i; console.log(i); } 7. 快速构建字串 要对一个数组或对象做循环操作时，不要老惦记着一表人才的for语句，拿点创意出来嘛！明明就还有很多更快的办法： var arr = ['item 1', 'item 2', 'item 3', ...]; var list = '< ul>

< li>

'+ arr.join ('

< /li>

< li>

') +'

< /li>

< /ul>

'

"there's not so much red tape bothering you; just trust me for once (or you can try it yourself)-it's really the quickest way to find it so far!

Use the rustic method, regardless of what is going on behind it. It is usually much faster than the elegant one. "

-James Padolsey, james.padolsey.com

8. Reduce global variables

"attributing your messy footprints to one person can significantly reduce the likelihood of conflicts with other apps, gadgets, or JS libraries."

-Douglas Crockford

Var name = 'Jeffrey'; var lastName =' Way'; function doSomething () {...} console.log (name); / / Jeffrey-it could also be window.name

A better way to write

Var DudeNameSpace = {name: 'Jeffrey', lastName:' Way', doSomething: function () {...}} console.log (DudeNameSpace.name); / / Jeffrey

Notice how we dramatize the "messy footprints" under the object "DudeNameSpace".

9. Write a good note

You may not feel necessary at first, but believe me, you will take the initiative to write comments on your code as well as possible in the future. Isn't it frustrating that when you look back at a project a few months later, it's hard to remember what was on your mind when you were writing something? Or what if a colleague wants to revise your code? Be sure to comment on important parts of your code.

/ / iterate through the array, outputting their respective names for (var I = 0, len = array.length; I)

< len; i++) { console.log(array[i]); } 10. 试试渐进增强 一定要记得为未启用JavaScript的情况提供替代方案。大家可能会认为，"大部分我的访客都启用了JavaScript的，我才不用担心"。这样的话，你可就大错特错了！ 11. 不要传递字串给 "setInterval" 或 "setTimeout" 看看下面的代码： setInterval( "document.getElementById('container')[xss_clean] += 'My new number: ' + i", 3000 ); 不仅执行不高效，而且和 eval 函数有着同样的高风险。千万不要把字串传递给 setInterval 和 setTimeout。恰当的做法是，传递一个函数名： setInterval(someFunction, 3000); 12. 不要使用with语句 初识之下，"with"语句似乎还挺好用的。它用于设置代码在特定对象中的作用域。其基本用法是提供深入到对象中处理元素的快速写法。例如： with (being.person.man.bodyparts) { arms = true; legs = true; } - 等价于 - being.person.man.bodyparts.arms = true; being.person.man.bodyparts.legs= true; 不幸的是，测试表明，若你要为对象插入新成员，with的表现非常糟糕，它的执行速度非常缓慢。替代方案是声明一个变量： var o = being.person.man.bodyparts; o.arms = true; o.legs = true; 13. 使用 {}，而不用New Object() 在JavaScript有多种方式能新建对象。最传统的方法是 new 语句，如下： var o = new Object(); o.name = 'Benhuoer'; o.lastName = 'Yang'; o.someFunction = function() { console.log(this.name); } 不过，这一方法读起来却比较糟糕。我强烈建议你采用下面这种在文字样式上更为强健的写法： 更好的写法 var o = { name: 'Jeffrey', lastName = 'Way', someFunction : function() { console.log(this.name); } }; 注意，如果你想新建一个空对象，用 {} 就能行： var o = {}; "对象字面符(Objects literals)帮助我们写出支持很多特性，同时又关联性强、简明直接的代码。没必要直接调用新建语句，然后再费心维护声明变量和传递变量的语句之间的正确顺序，等等。" - dyn-web.com 14. 使用[]，而不用New Array() 新建数组时的同类型运用。 行得通的写法 var a = new Array(); a[0] = "Joe"; a[1] = 'Plumber'; 更好的写法 var a = ['Joe','Plumber']; "在JavaScript编程中经常遇到的一个错误是，该用数组时却用了对象，该用对象时却用了数组。规则其实很简单：当属性名是小的连续整数时，你应该使用数组。其他情况，使用对象。" - Douglas Crockford 15. 一长列变量声明？别写那么多var，用逗号吧 var someItem = 'some string'; var anotherItem = 'another string'; var oneMoreItem = 'one more string'; 更好的写法 var someItem = 'some string', anotherItem = 'another string', oneMoreItem = 'one more string'; …不言自明。我不知道这样做能否提升代码执行速度，但是确实让你的代码干净许多。 17. 千万千万记得写分号 大部分浏览器都允许你不写句尾分号： var someItem = 'some string' function doSomething() { return 'something' } 之前已经说过，这样做会造成潜在的更大、更难以发现的问题： 更好的写法 var someItem = 'some string'; function doSomething() { return 'something'; } 18. "For in" 语句 遍历对象时，你可能会发现你还需要获取方法函数。所以遇到这种情况时，请一定记得给你的代码包一层 if 语句，用以过滤信息。 for(key in object) { if(object.hasOwnProperty(key) { ...这里做点什么... } } 引自 Douglas Crockford 所作： _JavaScript: The Good Parts 19. 使用Firebug的"Timer"功能优化你的代码 想要轻松地快速了解某项操作的用时吗？使用Firebug的timer功能来记录结果好了。 function TimeTracker(){ console.time("MyTimer"); for(x=5000; x >

0; xmuri -) {} console.timeEnd ("MyTimer");}

20. Read, read...

Although I am a big fan of Web development blog, I seem to have no choice but to read books before eating and going to bed. Put a good book developed by Web on your nightstand.

21. A function of self-determination

Compared to calling a function, it is very simple and convenient to let the function execute automatically when the page is loaded or when a parent function is called. You just need to wrap your function within your parents and add an extra parenthesis, which essentially triggers the function you define (learn more).

(function doSomething () {return {name: 'jeff', lastName:' way'};}) ()

twenty-two。 Native JavaScript is always faster than using a code base

JavaScript libraries such as jQuery and Mootools can save you a lot of time in the process of writing code-especially when AJAX operations are required. Keep in mind, however, that as long as your code is properly written, native JavaScript will always execute faster than using code base writing.

JQuery's "each" method is convenient for looping operations, but it is always much faster to use native for statements.

23. JSON.Parse of Crockford

By importing this code, you can create a new JSON global object and then process your .json file.

Var response = JSON.parse (xhr.responseText); var container = document.getElementById ('container'); for (var I = 0, len = response.length; I)

< len; i++) { container[xss_clean] += '< li>

'+ response.name +':'+ response.email +'

< /li>

';}

24. Remove "Language"

Many years ago, language was a required attribute for every script tag:

< script type="text/javascript" language="javascript">

...

< /script>

This is the end of the content of "what are the skills of beginners in JavaScript". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.