All methods and properties can be accessed from both outside and inside by using the "class name + dot operator".
Copy the codeThe code is as follows:
var myScript = {
nav:('nav'),
init:function(){
();
if( === 'show'){
();
}
// do stuff
},
show:function(){
var c = ;
// do stuff
},
reset:function(){
// do stuff
}
}
The disadvantage of this pattern is that every time you access other methods or properties from one method, you must prefix the object's name, and everything in the object can be accessed from the outside. If you just want some of the code to be accessed by other scripts in the document, consider the following module pattern:
Copy the codeThe code is as follows:
var myScript = function(){
// These are private methods and properties
var nav = ('nav');
function init(){
// do stuff
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
//Public methods and properties are wrapped in return statements using object syntax
return {
public:function(){
},
foo:'bar'
}
}();
You can access the returned public properties and methods in the same way as the previous code. In this example, you can access it in this example: () and . But there is another thing that makes people feel uncomfortable: when you want to access a public method from the outside or from an internal private method, you still have to write a lengthy name (the name of the object can be very long). To avoid this, you need to define them as private and return only one alias in the return statement:
Copy the codeThe code is as follows:
var myScript = function(){
// These are private methods and properties
var nav = ('nav');
function init(){
// do stuff
}
function show(){
// do stuff
// do stuff
}
function reset(){
// do stuff
}
var foo = 'bar';
function public(){
}
return {
public:public,
foo:foo
}
}();
This ensures consistency in the code style and you can use a shorter alias to access methods or properties.
If you don't want to expose any methods or properties to the outside, you can wrap all the code into an anonymous method and execute it immediately after its definition is finished:
Copy the codeThe code is as follows:
(function(){
// these are all private methods and properties
var nav = ('nav');
function init(){
// do stuff
show(); // No class name prefix is needed here
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
})();
This pattern is very good for code modules that only execute once and have no dependencies on other functions.
By following the above rules, your code works better for users, and it can also enable your code to run better on the machine and get along with other developers' code. However, there is another group that needs to be considered.
7. Consider for the developers who take over
(Make maintenance easier)
The final step to making your script truly unobtrusive is to double-check it after writing the code and take care of the developers who want to take over your code once the script goes live. Consider the following questions:
* Are all variables and function names reasonable and easy to understand?
* Is the code reasonably organized? Is it smooth from beginning to end?
* Are all dependencies obvious?
*Are comments added in places that may cause confusion?
The most important thing is to realize that HTML and CSS code in documents is more likely to be changed relative to JavaScript (because they are responsible for the visual effects). So don't include any class and IDs in the script code that can be seen by the end user, but separate them and put them into an object that holds the configuration information.
Copy the codeThe code is as follows:
myscript = function(){
var config = {
navigationID:'nav',
visibleClass:'show'
};
var nav = ();
function init(){
show();
if( === ){
reset();
};
// do stuff
};
function show(){
var c = ;
// do stuff
};
function reset(){
// do stuff
};
}();
This way the maintainer knows where to modify these properties without changing other codes.
Previous page12Read the full text