1. Don't make any assumptions
(JavaScript is an unreliable helper)
One of the most important features of a potentially unobtrusive JavaScript is that you want to stop any assumption:
* Don't assume that JavaScript is available, you'd better think it's probably not useful, not directly dependent on it.
* Do not assume that browsers support them before you test to make sure that some methods and properties are available.
* Do not assume that the HTML code is as correct as you think, check it every time, and do nothing when it is not available.
* Make JavaScript function independent of input devices
* Remember that other scripts may affect the functionality of your JavaScript, so make sure your scripts are scoped as securely as possible.
The first thing to consider before you start designing your scripts is to check the HTML code that you want to write a script for, and see what you can do to help you achieve it.
2. Find the hook and node relationship
(HTML is the cornerstone of scripting)
Before you start writing scripts, take a look at the HTML you want to write JavaScript for. If HTML is not organized or unknown, it is almost impossible for you to have a good scripting scenario-it is possible that you will either create too many tags with javascript or the application is too dependent on JavaScript.
There are some things to consider in HTML, that is hook and node relationship.
<1>. HTML Hooks
The original and most important hook for HTML is the ID, and the ID can be accessed through the fastest Dom method--getelementbyid. If all IDs are unique in a valid HTML document (in IE there is a bug about name and ID, but some good class libraries solve the problem), using IDs is safe 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 it is not possible to access the CSS class through the native Dom method. However, there are many external class libraries that provide a way to access the CSS class name (similar to getelementsbyclassname).
<2>. HTML node Relationship
Another interesting point about HTML is the relationship between tags, thinking about the following questions:
* What is the easiest way to reach the target node through the least DOM traversal?
* By modifying what tags, you can access as much as possible to the child nodes that need to be modified?
* What attributes or information can be used by a given element to reach another element?
Traversing the DOM is very resource-intensive and slow, which is why you should try to use the technology already in use in your browser to do this thing.
3. Pass the traverse to the expert to do
(CSS, traverse dom faster)
It is interesting that the DOM scripts and the use of methods or properties (getElementsByTagName, nextSibling, PreviousSibling, ParentNode, and others) to traverse the DOM seem to confuse many people. Interestingly, we have already done these things through another technique--css--.
CSS is a technique that uses CSS selectors to access target elements and change their visual properties by traversing the DOM. A complex JavaScript that uses DOM can be replaced with a CSS selector:
Copy Code code as follows:
var n = document.getElementById (' nav ');
if (n) {
var as = N.getelementsbytagname (' a ');
if (As.length > 0) {
for (Var i=0;as[i];i++) {
As[i].style.color = ' #369;
As[i].style.textdecoration = ' None ';
}
}
}
/* The following code is the same as the above function * *
#nav a{
Color: #369;
Text-decoration:none;
}
This is a very powerful technique to take advantage of. You can do this by adding a class to the top-level elements in the DOM dynamically or by changing the element IDs. If you use DOM to add a CSS class to the body of the document, then the designer can easily define the static and dynamic versions of the document.
Javascript:
Copy Code code as follows:
var dynamicclass = ' js ';
var B = document.body;
B.classname = B.classname? B.classname + ' js ': ' JS ';
Css:
/* Static Version * *
#nav {
....
}
/* Dynamic Version * *
Body.js #nav {
....
}
4. Understanding Browsers and Users
(Create what you need on existing usage patterns)
An important part of the unobtrusive JavaScript is understanding how the browser works (especially how the browser crashes) and what the user expects. You can also easily use JavaScript to create a completely different interface without considering the browser. Drag and drop the interface, fold the area, scroll bars and sliders can 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 input devices? If not, what can be relied upon?
* Do I create a new interface that follows the browser or other rich interface criteria (can you switch directly through the multilevel menu with your mouse?). Or do you need to use the TAB key? ）
* What functions do I need to provide but is this feature dependent on JavaScript?
The last question is actually not a problem, because you can use DOM to create HTML from scratch if you need it. An example of this is the "print" link, because browsers do not provide a non-JavaScript print document feature, so you need to use the DOM to create such links. Similarly, a clickable title bar that implements the expand and shrink content modules is also the case. The title bar cannot be activated by the keyboard, but the link is ok. So in order to create a clickable title bar you need to use JavaScript to join the link, and then all users who use the keyboard can shrink and expand the content module.
An excellent resource for solving such problems is the design pattern library. As for knowing which things in the browser are independent of the input device, it is up to the experience to accumulate. The first thing you have to understand is the event-handling mechanism.
5. Understanding Events
(Event handling can cause changes)
Event handling is the second step toward an unobtrusive JavaScript. The point is not to have everything become drag-and-click or to add inline processing to them, but to understand that event handling is something that can be completely detached. We have separated html,css from JavaScript, but have not gone far in the separation of event handling.
The event handler listens for changes to the elements that occur in the document, and if an event occurs, the processor will find a fascinating object (typically an argument called E) that tells the element what happened and what it can do with it.
What's really interesting about most event handling is that it happens not only on the elements you want to access, but also on all the elements at a higher level in the DOM (but not all events are the same, focus and blur events are the exception). For example, with this feature you can add only one event handler for a navigation list and use the event handler method to get the element that really triggers the event. This technique, called an event delegate, has several advantages:
* You just need to check if an element exists without checking each element
* You can dynamically add or remove child nodes without having to delete the appropriate event handlers
* You can respond to the same events on different elements
Another thing to keep in mind is that you can stop an event when it propagates to the parent element and you can override the default behavior of HTML elements such as links. Sometimes this is not a good idea, however, because browsers give HTML elements the behavior for a reason. For example, a link might point to a target within a page and not modify it to ensure that the user can bookmark the current script state of the page.
6. For the sake of others
(namespaces, scopes, and patterns)
Your code is almost never the only script code in the document. So it's especially important to make sure that you don't have global functions or global variables that other scripts can overwrite in your code. There are some available patterns to avoid this problem, the most fundamental thing is to use the VAR keyword to initialize all the variables. Let's say we wrote the following script:
Copy Code code as follows:
var nav = document.getElementById (' 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 named Init,show and reset respectively. These functions can be accessed to the NAV variable and can be accessed through the function name:
Copy Code code as follows:
var nav = document.getElementById (' nav ');
function init () {
Show ();
if (Nav.classname = = ' Show ') {
Reset ();
}
Do stuff
}
Function Show () {
var c = nav.classname;
Do stuff
}
function Reset () {
Do stuff
}
You can encapsulate the code in an object to avoid the global encoding above, so you can turn the function into a method in the object and turn the global variable into an object property. You need to define methods and properties using the "First name + Colon" method, and you need to precede each property or method with a comma as a separator.
Copy Code code as follows:
var myScript = {
Nav:document.getElementById (' Nav '),
Init:function () {
Do stuff
},
Show:function () {
Do stuff
},
Reset:function () {
Do stuff
}
}
current 1/2 page
1 2 Next read the full text
