Learn javascript through jQuery source code (3)_jquery

Questions

In the first article, a blogger asked the following questions. I don’t quite understand them. If you understand them, can you tell me one or two.

Copy code The code is as follows:

var str = "test" ;
for(var a in str){
console.log(a ":" str[ a ]);
}

Output result
This is a String object, when using for, the above situation will occur.

Self-calling anonymous function (function(){})(window)

Copy code Code As follows:

(function(window, undefined){
// jquery code
})(window);

Code analysis:

The first bracket: Create an anonymous function.
The second bracket: execute immediately.

The reason for passing in the window variable:
It changes the window variable from a global variable to a local variable. There is no need to return the scope chain to the top-level scope for faster access to the window.
Reasons for adding undefined to the parameter list:
Within the scope of a self-calling anonymous function, ensure that undefined is truly undefined.
Benefits of this design:
Create a private namespace. Variables and methods within the function body will not affect the global space. Will not conflict with variables of other programs.

Function extension extend()

According to general design habits, it can be implemented directly through dot (.) syntax, or by adding an attribute to the prototype object structure. . ——The jQuery framework implements function expansion through the extend() function.
Let’s do a similar method. ——Copy all properties contained in the specified parameter object to the cQuery or cQuery.prototype object.

Copy code The code is as follows:

(function(){
var
_cQuery = window.cQuery,
cQuery = function(){
return new cQuery.fn.init();
};

cQuery.fn = cQuery.prototype = {
init : function () {
return this;
}
};
cQuery.fn.init.prototype = cQuery.fn;

cQuery.extend = cQuery.fn .extend = function( obj ) {
for (var prop in obj) {
this[ prop ] = obj[ prop ];
}
return this;
}

cQuery.fn.extend({
test : function() {
console.log('Test!');
}
});
window.C = window. cQuery = cQuery;
})();
// Calling method
C().test();

Benefits:
1. Convenient for users to quickly expand The functions of the jQuery framework will not destroy the prototype structure of the jQuery framework.
2. Convenient management.
Note:
For objects extended by prototype, we must call them through instantiation functions (such as cQuery().test(), but cannot use cQuery.test())

Object url parameterized param()

Copy code The code is as follows:

(function (){
var
_cQuery = window.cQuery,
cQuery = function(){
return new cQuery.fn.init();
};

cQuery .fn = cQuery.prototype = {
init : function () {
return this;
}
};

cQuery.param = function(obj) {
var prefix, s = [];
for ( prefix in obj ) {
s[ s.length ] = encodeURIComponent( prefix ) "=" encodeURIComponent( obj[ prefix ]);
}
return s.join( "&" );
}


cQuery.fn.init.prototype = cQuery.fn;
window.C = window.cQuery = cQuery;
})();

var param = cQuery.param({"name":"chuanshanjia", "age":30});
console.log( param );

Output results

Object url parameterization: conducive to structuring and easy maintenance. If you add a parameter list after the URL, wouldn't you feel dizzy?

Summary

I’m writing this here for the time being. It would be great if you have something to add. ——Let’s communicate more and learn from each other.