October 10, 2005
Version 1.0
Introduction
This document will explain some important Javascript concepts and show the preferred way of handling common situations and problems. It should be read by anyone developing web applications and using javascript.
Square Bracket Notation
Objects properties in javascript can be accessed in two ways: Dot notation and Square bracket notation.
If a property name is being generated at run-time, the bracket notation is required. For example, if you have properties "value1", "value2", and "value3", and want to access the property using a variable i=2:
For convenience and consistency, using square-bracket-notation instead of dot-notation is a good practice to get into.
Referencing Forms And Form Elements
The correct way to reference a form input element is:
All forms should have a name attribute. Referencing forms using indexes, such as document.forms[0] is bad practice.
If you will be referencing multiple form elements within a function, it's best to make a reference to the form object first and store it in a variable.
var theform = document.forms["mainForm"];
theform.elements["input1"].value="a";
theform.elements["input2"].value="b";
Referencing Forms From Element Handlers
When you are validating an input field using onChange or similar event handlers, it is always a good idea to pass a reference to the input element itself into the function. Every input element has a reference to the form object that it is contained in.
<input type="text" name="address" onChange="validate(this)">
function validate(input_obj) {
// Reference another form element in the same form
if (input_obj.form.elements["city"].value=="") {
alert("Error");
}
}
By passing a reference to the form element, and accessing its form property, you can write a function which does not contain a hard reference to any specific form name on the page.
Problems With Concatenation
In javascript, the + operator is used for both addition and concatenation. This can cause problems when adding up form field values, since Javascript is a non-typed language. Form field values will be treated as strings, and if you + them together, javascript will treat it as concatenation instead of addition.
<form name="myform">
<input type="text" name="val1" value="1">
<input type="text" name="val2" value="2">
</form>
function total() {
var theform = document.forms["myform"];
var total = theform.elements["val1"].value + theform.elements["val2"].value;
alert(total); // This will alert "12", but what you wanted was 3!
}
To fix this problem, Javascript needs a hint to tell it to treat the values as numbers, rather than strings. Subtracting 0 from the value will force javascript to consider the value as a number, and then using the + operator on a number will perform addition, rather than concatenation.
<form name="myform">
<input type="text" name="val1" value="1">
<input type="text" name="val2" value="2">
</form>
function total() {
var theform = document.forms["myform"];
var total = (theform.elements["val1"].value-0) + theform.elements["val2"].value;
alert(total); // This will alert 3
}
Using onClick in <A> tags
When you want to trigger javascript code from an anchor tag, the onClick handler should be used. The javascript code that runs within the onClick handler needs to return true or false back to the tag itself. If it returns true, then the HREF of the anchor will be followed like a normal link. If it returns false, then the HREF will be ignored. This is why "return false;" is often included at the end of the code within an onClick handler.
Eval
Detecting Browser Versions
The better approach is to use feature detection. That is, before using any advanced feature that an older browser may not support, check to see if the function or property exists first, then use it. This is better than detecting the browser version specifically, and assuming that you know its capabilities. An in-depth article about this topic can be found at http://www.jibbering.com/faq/faq_notes/not_browser_detect.html if you want to really understand the concepts.
Don't Use document.all
document.all was introduced by Microsoft in IE and is not a standard javascript DOM feature. Although many newer browsers do support it to try to support poorly-written scripts that depend on it, many browsers do not.
There is never a reason to use document.all in javascript except as a fall-back case when other methods are not supported.
if (document.getElementById) {
var obj = document.getElementById("myId");
}else if (document.all) {
var obj = document.all("myId");
}
The rules for using document.all are
- Always try other standard methods first
- Only fall back to using document.all as a last resort
- Only use it if you need IE 5.0 support or earlier
- Always check that it is supported with "if (document.all) { }" around the block where you use it.
Getting And Setting Form Values
The method used to get and set form values depends on the type of form element. A detailed explanation of how to correctly access form controls can be found at http://www.jibbering.com/faq/faq_notes/form_access.html.
In general, it is a good practice to use generalized getInputValue() and setInputValue() functions to read and write values to form elements. This will make sure that it is always done correctly, and situations that otherwise might cause confusion and errors are handled correctly. For example, forms with only 1 radio button in a group, or multiple text inputs with the same name, or multi-select elements.
The getInputValue() and setInputValue() functions are part of the validations.js library from the Javascript Toolbox. The most current version of these functions and other validation functions can be found at http://www.javascripttoolbox.com/validations/.
Additional Resources
The comp.lang.javascript FAQ has many common questions and answers about javascript. It is a great resource to check if you have what you think might be a FAQ.
For general-purpose libraries and examples, see The Javascript Toolbox.
If you want to really exploit the javascript language and use advanced techniques, read about Javascript Closures.
end
相关推荐
JavaScript best practices
JavaScript的一些高级技巧,以及最佳实践。
You should know that React is maintained by developers at Facebook and hundreds of contributors within the JavaScript community. React is one of the most popular libraries for creating user ...
Best Practices for Using Modern JavaScript Syntax by M. David Green Flow Control in Modern JS: Callbacks to Promises to Async/Await by Craig Buckler JavaScript’s New Private Class Fields, and How to ...
Over the course of the book, author Frank Zammetti covers JavaScript best practices, Ajax techniques, and some of the most popular JavaScript libraries, such as Prototype, Script.aculo.us, and the ...
• JavaScript——你将获得忠告:理解Ajax性能、编写高效的JavaScript、创建快速响应的应用程序、无阻塞加载脚本等。 • 网络——你将学到:跨域共享资源、无损压缩图片大小,以及使用块编码加快网页渲染。 •...
JavaScript DOM编程艺术上的一个例子
Angular Best Practices guide In this guide, we are going to show what we consider to be the best practices in Angular while developing the client side project in this framework. During the development...
in the book Ajax Patterns and Best Practices. There are two implementations of the patterns; .NET and Java. For both implementations the same HTML pages are used. Following is an explanation of the ...
Learn to apply performance best practices, and how to quantify your results Who this book is for Pro JavaScript Performance is written for advanced JavaScript users and web developers. You will need a...
This book helps you answer that question with numerous JavaScript coding patterns and best practices. If you're an experienced developer looking to solve problems related to objects, functions, ...
Reflecting the latest versions of the JavaScript standard, the book offers well-proven techniques and best practices you’ll rely on for years to come. Effective JavaScript is organized around 68 ...
What's the best approach for developing an application with JavaScript? This book helps you answer that question with numerous JavaScript coding patterns and best practices.
由Yoni Goldberg撰写JavaScript和Node.js顾问 :green_book: 我的综合在线课程,包含多个,14种测试类型和40多种最佳实践翻译-用您自己的语言阅读 :China: -由 :South_Korea: -由 :Poland: -由 :
Reflecting the latest versions of the JavaScript standard, the book offers well-proven techniques and best practices you’ll rely on for years to come. Effective JavaScript is organized around 68 ...
loops, and best practices on using types and data structures, as well as the coding style and recommended code organization patterns in JavaScript. The book will also teach you how to use arrays and ...
loops, and best practices on using types and data structures, as well as the coding style and recommended code organization patterns in JavaScript. By the end of the module, you will understand how ...
The bestselling JavaScript guide, updated with current features and best practices Beginning JavaScript, 5th Edition shows you how to work effectively with JavaScript frameworks, functions, and ...