1. Namespace :
The namespace in js is expanded using the properties of the object. For example, a user defines an A object, with B attributes and C attributes under the A object, and B attributes and C attributes are objects. Therefore, A={B:{},C:{}}, then the user can define the same method and attribute in the B object and the C object. Therefore, B and C belong to different namespaces. When we call the methods in the B and C objects, we can call them through ABlike() and AClike(). Of course A is a property in the window object.
But there is a situation, for example: the boke.js page introduces jquery.js and prototype.js (they will add $ attributes to the window object), and a conflict occurs.
Therefore, there is noConflict() in jquery.js to handle conflicts. Execution process: The page first introduces prototype. At this time, the prototype will occupy the $ attribute of the window. Then when jquery is introduced, jquery will store the $ attribute of the previous window in _$, and then use the $ attribute by itself. At this time, you can call the jquery method through $. When you don't need to use jquery but want to use prototype, you can call $.noConflict(), and then $ will be restored to a prototype object. At this time, you can use the prototype method through $.
The code copy is as follows:
var _$ = window.$, _jQuery= window.jQuery;
noConflict:function(deep){
window.$ = _$;
if(deep) window.jQuery = _jQuery;
return jQuery; //Return value, you can assign value to other variable names, such as Chaojidan, so that you can call methods in jQuery through Chaojidan.
}
2. Object extension :
If the namespace object has, we need to extend the function. For example: I need to copy all the properties and methods of object A into object B. I don't have to write code one by one in B objects.
The code copy is as follows:
function mix(target, source){
var args = [].slice.call(arguments),i=1,
isCover = typeof args[args.length-1] =="boolean" ? args.pop():true; //Not written, default is true, default is overridden.
if(args.length == 1){
target = !this.window? this:{};
//If there is only one object parameter, extend this object. For example: I call mix(B) in the context of object A, then this is A at this time, so the properties and methods of B will be added to object A. However, if mix(B) is called in window, the properties and methods in the B object will be added to an empty object and return this empty object to prevent overwriting properties and methods of the same name in the window object. (Only window objects have window properties)
i =0;
}
while((source = args[i++])){
for(key in source){
if(isCover || !(key in target)) //If overwrite, directly assign the value. If not overwrite, first determine whether the key exists in the target object. If it exists, no value will be assigned.
{
target[key] = source[key];
}
}
}
return target;
}
Interviewers from large companies like to check the arrays. You can check it out. Each item in the array can be an object, and even if object A and object B have the same properties and methods, they are not equal. Strings and numbers, such as 123 and "123", can be found in a complete way by searching online.
3.Arrayization :
There are many class array objects in the browser, arguments, document.forms, document.links, form.elements, document.getElementsByTagName, childNodes, etc. (HTMLCollection,NodeList).
There is also a custom object with a special writing style
The code copy is as follows:
var arrayLike = {
0:"a",
1:"b",
length:2
}
This object is written as the jQuery object.
We need to convert the above-mentioned class array object into an array object.
[].slice.call method can be solved. However, the HTMLCollection and NodeList in the old version of IE are not subclasses of Object, and the [].slice.call method cannot be used.
Therefore we can override a slice method.
The code copy is as follows:
A.slice = window.dispatchEvent ? function(nodes,start,end){ return [].slice.call(nodes,start,end); }
//If the window has the dispatchEvent property, it proves that it supports the [].slice.call method and ability detection.
:function(nodes,start,end){
var ret = [],n=nodes.length;
if(end == undefined || typeof end === "number" && isFinite(end)){ //&& priority is higher than ||, so end is not written, or end is a finite number and enter
start = parseInt(start,10) || 0; //If start does not exist or is not a number, then the value is assigned to 0.
end = end == undefined ? n:parseInt(end,10); //If end does not exist, the value is n.
if(start < 0) start + = n;
if(end< 0) end + = n;
if(end>n) end = n;
for(var i = start;i<end;i++){
ret[i-start] = nodes[i]; //Low version IE uses array assignment form
}
}
return return;
}
4. Type judgment :
There are five simple data types of js: null, undefined, boolean, number, string.
There are also complex data types: Object, Function, RegExp, Date, custom objects, such as: Person, etc.
typeof is generally used to judge boolean, number, string, instanceof is generally used to judge object types. But they all have flaws. For example: the array instance in the fireme is not an instance of Array in the parent window, calling instanceof will return false. (This question was asked during the 360 campus recruitment). typeof new Boolean(true) // "object" , wrap the object. Boolean, number, and string are three types of packaging objects, which are discussed in js advanced program programming.
Many people use typeof document.all to determine whether it is IE. In fact, this is very dangerous. Because Google and Firefox also like this property, this situation occurs under Google Chrome: typeof document.all //undefined However, document.all //HTMLAllCollection, using typeof to determine it is undefined, but this property value can be read.
But now you can use the Object.prototype.toString.call method to determine the type. This method can directly output [[Class]] inside the object. However, IE8 and below window objects cannot use this method. You can use window == document // true document == window // false IE6,7,8.
nodeType (1: Element 2: Attribute 3: Text Text 9: document)
Methods for judging types in jquery:
The code copy is as follows:
class2type ={}
jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(i,name){
class2type [ "[object " + name + "]" ] = name.toLowerCase();
//class2type = {"[object Boolean]":boolean,"[object Number ]":number ,"[object String ]":string ,"[object Function ]":function ,"[object Array ]":array ......}
});
jQuery.type = function(obj){ //If obj is null, undefined, etc., the string "null", "undefined". If not, call the toString method, judge if it can be called, and if it is possible, return the object (window, Dom and other ActiveXobject objects in the lower version of IE)
return obj == null ? String(obj) : class2type [ toString.call(obj) ] || "object";
}
5.domReady
When operating the dom node by js, the page must build the dom tree. Therefore, the window.onload method is usually used. However, the onload method will not be executed after all resources are loaded. In order to make the page respond to user operations faster, we only need to use js operations after the dom tree is built. Instead of waiting for all resources to be loaded (image, flash).
Therefore, the DOMContentLoaded event occurs, which is triggered after the Dom tree is built. However, the old version of IE does not support it, so there is a hack.
The code copy is as follows:
if(document.readyState === "complete"){ //In case the js file is loaded only after the Dom document is loaded. At this time, the fn method (the method you want to execute) is executed through this judgment. Because after the document is loaded, the value of document.readyState is complete
setTimeout(fn); //Execute asynchronously, let the code behind it be executed first. This is the usage in jQuery, you don't need to understand it.
}
else if(document.addEventListener){//Support DOMContentLoaded event
document.addEventListener("DOMContentLoaded",fn,false); //Bubbles
window.addEventListener("load",fn,false); //In case the js file is loaded after the DOM tree is built. This time, the DOMContentLoaded event will not be triggered (the trigger has been completed), it will only trigger the load event
}
else{
document.attachEvent("onreadystatechange",function(){//For the security of iframes under IE, onload execution will be given priority, and sometimes not.
if(document.readyState ==="complete"){
fn();
}
});
window.attachEvent("onload",fn); //It will always play a role in case other listening events are not retrieved, so at least the fn method can be triggered by the onload event.
var top = false;//See if it is in the iframe
try{//window.frameElement is the iframe or frame object containing this page. If not, it is null.
top = window.frameElement == null && document.documentElement;
}catch(e){}
if(top && top.doScroll){ //If there is no iframe, and it is IE
(function doScrollCheck(){
try{
top.doScroll("left");//In IE, if the Dom tree is built, you can call the doScroll method of html
}catch(e){
return setTimeout(doScrollCheck,50); //If it has not been built yet, continue to listen
}
fn();
})
}
}
The fn method must contain removing all binding events.
Of course, IE can also use script defer hack. The principle is: the script specified by defer will be executed only after the DOM tree is built. However, this requires adding additional js files and is rarely used in separate libraries.
Principle of use: add script tags to the document and use script.src = "xxx.js" to listen for script's onreadystatechange event. When this.readyState == "complete", the fn method is executed.
In other words, only after the DOM is built will xxx.js be executed, and its this.readyState will become complete.
The above are the reading notes for the first chapter of JavaScript framework design. The content is relatively simple, which makes it easier for everyone to better understand the basic content of this chapter.