1. Don't make any assumptions
(JavaScript is an unreliable assistant)
One of the most important features of JavaScript that may not be abrupt is that you have to stop any assumptions:
* Don't assume JavaScript is available, you'd better think it's very likely that it's not available, rather than relying on it directly.
* Do not assume that the browser supports them until you have tested and confirmed that some methods and properties are available.
* Don't assume the HTML code is as correct as you think, check it every time, and do nothing when it is unavailable.
* Make JavaScript's functionality independent of input devices
* Remember that other scripts may affect the functionality of your JavaScript, so make sure your scripts are as safe as possible.
The first thing to consider before starting to design your script is to check the HTML code you want to script it and see what can help you achieve your goal.
2. Find out the relationship between hook and node
(HTML is the cornerstone of scripts)
Before you start writing scripts, take a look at the HTML you want to write JavaScript for. If the HTML is unorganized or unknown, it is almost impossible for you to have a good scripting plan - it is likely that the following situation will occur: either you will create too many tags with JavaScript, or the application will rely too much on JavaScript.
There are some things to consider in HTML, that is, the hook and node relationship.
<1>.HTML hook
The initial and most important hook for HTML is ID, and ID can be accessed through the fastest DOM method - getElementById. If all IDs are unique in a valid HTML document (there is a bug in IE about name and ID, but some good class libraries solve this problem), using IDs is safe and reliable and easy to test.
Some other hooks are HTML elements and CSS classes. HTML elements can be accessed through the getElementsByTagName method, and in most browsers, CSS classes cannot be accessed through the native DOM method. However, there are many external class libraries that provide methods that can access CSS class names (similar to getElementsByClassName).
<2>.HTML node relationship
Another interesting thing about HTML is the relationship between tags. Think about the following questions:
* How can we reach the target node most easily and with the least amount of DOM traversal?
* By modifying what markers can you access as many child nodes that need to be modified as much as possible?
* What attributes or information does a given element have to be used to reach another element?
It is resource-intensive and slow to traverse the DOM, which is why you should try to use the technology you are already using in your browser to do this.
3. Leave the traversal to the experts
(CSS, traverse DOM faster)
It seems to confuse many people with scripts and methods or properties about DOM (getElementsByTagName, nextSibling, previousSibling, parentNode and others) to traverse the DOM. This is very interesting. What’s interesting is that we have actually done these things through another technology - CSS.
CSS is a technique that uses a CSS selector to access target elements and change their visual properties by traversing the DOM. A complex JavaScript using DOM can be replaced with a CSS selector:
var n = ('nav');
if(n){
var as = ('a');
if( > 0){
for(var i=0;as[i];i++){
as[i]. = ‘#369′;
as[i]. = ‘none';
}
}
}
/* The following code is the same as the above function */
#nav a{
color:#369;
text-decoration:none;
}
This is a very powerful technique that can be used well. You can do this by dynamically adding class to elements in high-level DOM or changing element IDs. If you use DOM to add a CSS class to the document's body, then the designer can easily define the static and dynamic version of the document.
JavaScript:
var dynamicClass = 'js';
var b = ;
= ? + ' js' : 'js';
CSS:
/* Static version */
#nav {
....
}
/* Dynamic version */
#nav {
....
}
4. Understand browsers and users
(Create what you need on existing usage patterns)
An important part of unbrupted JavaScript is understanding how browsers work (especially how browsers crash) and what users expect. Without considering the browser, you can easily create a completely different interface using JavaScript. The drag interface, folding area, scroll bar and slider can all be created using JavaScript, but this problem is not a simple technical problem. You need to think about the following questions:
* Can this new interface be independent of the input device? If not, what can you rely on?
* Does this new interface I created follow the guidelines of browsers or other rich interfaces (Can you switch directly in the multi-level menu with the mouse? Or do you need to use the tab key?)
* What functionality do I need to provide but is this functionality dependent on JavaScript?
The last question is not actually a problem, because if you need it, you can use DOM to create HTML out of thin air. An example of this is the "print" link. Since the browser does not provide a non-JavaScript printing document function, you need to use the DOM to create such links. Similarly, this is the case for a clickable title bar that implements the expansion and shrinking content module. The title bar cannot be activated by the keyboard, but the link can. So in order to create a clickable title bar you need to use JavaScript to add the link, and then all users who use the keyboard can shrink and expand the content module.
An excellent resource to solve this type of problem is the design pattern library. As for knowing what is in the browser that is independent of the input device, it depends on the accumulation of experience. The first thing you need to understand is the event handling mechanism.
5. Understand events
(Event processing will cause changes)
Event handling is the second step towards unabashed JavaScript. The point is not to make everything drag-and-drop, click-and-click, or add inline processing to them, but to understand that event processing is something that can be completely separated. We have separated HTML, CSS and JavaScript, but have not gone very far in the separation of event processing.
The event processor will listen for changes to elements that occur in the document. If an event occurs, the processor will find a very wonderful object (usually a parameter called e), which will tell the element what happened and what can be done with it.
For most event handling, what is really interesting is that it happens not only on the elements you want to access, but also on all elements at higher levels in the DOM (but not all events are like this, with focus and blur events being exceptions). For example, using this feature you can add only one event handler to a navigation list and use the event handler method to get the elements that actually trigger the event. This technology is called event delegation, and it has several benefits:
* You only need to check whether one element exists, not every element
* You can dynamically add or delete child nodes without deleting the corresponding event handler
* You can respond to the same event on different elements
Another thing to remember is that when the event is propagated to the parent element you can stop it and you can override the default behavior of HTML elements (such as links). Sometimes, though, this is not a good idea, because there is a reason why browsers give HTML elements to behaviors. For example, links may point to a target within the page, and not modifying them can ensure that users can also bookmark the current script status of the page.
6. Think about others
(namespace, scope and schema)
Your code is almost never the only script code in the documentation. Therefore, it is particularly important to ensure that there are no global functions or global variables that other scripts can cover in your code. There are some available patterns to avoid this problem. The most basic point is to use the var keyword to initialize all variables. Suppose we wrote the following script:
var nav = ('nav');
function init(){
// do stuff
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
The above code contains a global variable called nav and three functions with names init, show and reset respectively. These functions can access the nav variable and can be accessed by the function name:
var nav = ('nav');
function init(){
show();
if( === 'show'){
reset();
}
// do stuff
}
function show(){
var c = ;
// do stuff
}
function reset(){
// do stuff
}
You can encapsulate the code into an object to avoid the global encoding above, so that you can turn functions into methods in objects and global variables into properties in objects. You need to use the "name + colon" method to define methods and attributes, and you need to add a comma after each attribute or method as a splitter.
var myScript = {
nav:('nav'),
init:function(){
// do stuff
},
show:function(){
// do stuff
},
reset:function(){
// do stuff
}
}
(JavaScript is an unreliable assistant)
One of the most important features of JavaScript that may not be abrupt is that you have to stop any assumptions:
* Don't assume JavaScript is available, you'd better think it's very likely that it's not available, rather than relying on it directly.
* Do not assume that the browser supports them until you have tested and confirmed that some methods and properties are available.
* Don't assume the HTML code is as correct as you think, check it every time, and do nothing when it is unavailable.
* Make JavaScript's functionality independent of input devices
* Remember that other scripts may affect the functionality of your JavaScript, so make sure your scripts are as safe as possible.
The first thing to consider before starting to design your script is to check the HTML code you want to script it and see what can help you achieve your goal.
2. Find out the relationship between hook and node
(HTML is the cornerstone of scripts)
Before you start writing scripts, take a look at the HTML you want to write JavaScript for. If the HTML is unorganized or unknown, it is almost impossible for you to have a good scripting plan - it is likely that the following situation will occur: either you will create too many tags with JavaScript, or the application will rely too much on JavaScript.
There are some things to consider in HTML, that is, the hook and node relationship.
<1>.HTML hook
The initial and most important hook for HTML is ID, and ID can be accessed through the fastest DOM method - getElementById. If all IDs are unique in a valid HTML document (there is a bug in IE about name and ID, but some good class libraries solve this problem), using IDs is safe and reliable and easy to test.
Some other hooks are HTML elements and CSS classes. HTML elements can be accessed through the getElementsByTagName method, and in most browsers, CSS classes cannot be accessed through the native DOM method. However, there are many external class libraries that provide methods that can access CSS class names (similar to getElementsByClassName).
<2>.HTML node relationship
Another interesting thing about HTML is the relationship between tags. Think about the following questions:
* How can we reach the target node most easily and with the least amount of DOM traversal?
* By modifying what markers can you access as many child nodes that need to be modified as much as possible?
* What attributes or information does a given element have to be used to reach another element?
It is resource-intensive and slow to traverse the DOM, which is why you should try to use the technology you are already using in your browser to do this.
3. Leave the traversal to the experts
(CSS, traverse DOM faster)
It seems to confuse many people with scripts and methods or properties about DOM (getElementsByTagName, nextSibling, previousSibling, parentNode and others) to traverse the DOM. This is very interesting. What’s interesting is that we have actually done these things through another technology - CSS.
CSS is a technique that uses a CSS selector to access target elements and change their visual properties by traversing the DOM. A complex JavaScript using DOM can be replaced with a CSS selector:
Copy the codeThe code is as follows:
var n = ('nav');
if(n){
var as = ('a');
if( > 0){
for(var i=0;as[i];i++){
as[i]. = ‘#369′;
as[i]. = ‘none';
}
}
}
/* The following code is the same as the above function */
#nav a{
color:#369;
text-decoration:none;
}
This is a very powerful technique that can be used well. You can do this by dynamically adding class to elements in high-level DOM or changing element IDs. If you use DOM to add a CSS class to the document's body, then the designer can easily define the static and dynamic version of the document.
JavaScript:
Copy the codeThe code is as follows:
var dynamicClass = 'js';
var b = ;
= ? + ' js' : 'js';
CSS:
/* Static version */
#nav {
....
}
/* Dynamic version */
#nav {
....
}
4. Understand browsers and users
(Create what you need on existing usage patterns)
An important part of unbrupted JavaScript is understanding how browsers work (especially how browsers crash) and what users expect. Without considering the browser, you can easily create a completely different interface using JavaScript. The drag interface, folding area, scroll bar and slider can all be created using JavaScript, but this problem is not a simple technical problem. You need to think about the following questions:
* Can this new interface be independent of the input device? If not, what can you rely on?
* Does this new interface I created follow the guidelines of browsers or other rich interfaces (Can you switch directly in the multi-level menu with the mouse? Or do you need to use the tab key?)
* What functionality do I need to provide but is this functionality dependent on JavaScript?
The last question is not actually a problem, because if you need it, you can use DOM to create HTML out of thin air. An example of this is the "print" link. Since the browser does not provide a non-JavaScript printing document function, you need to use the DOM to create such links. Similarly, this is the case for a clickable title bar that implements the expansion and shrinking content module. The title bar cannot be activated by the keyboard, but the link can. So in order to create a clickable title bar you need to use JavaScript to add the link, and then all users who use the keyboard can shrink and expand the content module.
An excellent resource to solve this type of problem is the design pattern library. As for knowing what is in the browser that is independent of the input device, it depends on the accumulation of experience. The first thing you need to understand is the event handling mechanism.
5. Understand events
(Event processing will cause changes)
Event handling is the second step towards unabashed JavaScript. The point is not to make everything drag-and-drop, click-and-click, or add inline processing to them, but to understand that event processing is something that can be completely separated. We have separated HTML, CSS and JavaScript, but have not gone very far in the separation of event processing.
The event processor will listen for changes to elements that occur in the document. If an event occurs, the processor will find a very wonderful object (usually a parameter called e), which will tell the element what happened and what can be done with it.
For most event handling, what is really interesting is that it happens not only on the elements you want to access, but also on all elements at higher levels in the DOM (but not all events are like this, with focus and blur events being exceptions). For example, using this feature you can add only one event handler to a navigation list and use the event handler method to get the elements that actually trigger the event. This technology is called event delegation, and it has several benefits:
* You only need to check whether one element exists, not every element
* You can dynamically add or delete child nodes without deleting the corresponding event handler
* You can respond to the same event on different elements
Another thing to remember is that when the event is propagated to the parent element you can stop it and you can override the default behavior of HTML elements (such as links). Sometimes, though, this is not a good idea, because there is a reason why browsers give HTML elements to behaviors. For example, links may point to a target within the page, and not modifying them can ensure that users can also bookmark the current script status of the page.
6. Think about others
(namespace, scope and schema)
Your code is almost never the only script code in the documentation. Therefore, it is particularly important to ensure that there are no global functions or global variables that other scripts can cover in your code. There are some available patterns to avoid this problem. The most basic point is to use the var keyword to initialize all variables. Suppose we wrote the following script:
Copy the codeThe code is as follows:
var nav = ('nav');
function init(){
// do stuff
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
The above code contains a global variable called nav and three functions with names init, show and reset respectively. These functions can access the nav variable and can be accessed by the function name:
Copy the codeThe code is as follows:
var nav = ('nav');
function init(){
show();
if( === 'show'){
reset();
}
// do stuff
}
function show(){
var c = ;
// do stuff
}
function reset(){
// do stuff
}
You can encapsulate the code into an object to avoid the global encoding above, so that you can turn functions into methods in objects and global variables into properties in objects. You need to use the "name + colon" method to define methods and attributes, and you need to add a comma after each attribute or method as a splitter.
Copy the codeThe code is as follows:
var myScript = {
nav:('nav'),
init:function(){
// do stuff
},
show:function(){
// do stuff
},
reset:function(){
// do stuff
}
}
12Next pageRead the full text