通过jQuery源码学习javascript

传入window变量原因:
  使window变量由全局变量变为局部变量,不需要将作用域链回退到顶层作用域,以便更快的访问window。
在参数列表中增加undefined原因:
  在自调用匿名函数的作用域内,确保undefined是真的未定义。
这样设计的好处:
  创建私有命名空间。函数体内的变量和方法,不会影响全局空间。不会与其他程序的变量发生冲突。

图片 1
上面的空函数就是所谓的构造函数,构造函数在面向对象语言中是类的一个基本方法。

输出结果
这是一个字符串对象,在使用for的时候,会出现上面的情况。

  在javascript代码中函数是个不可多得的人才。
    ♥ 它可以归置代码段,封装相对独立的功能。
    ♥ 它也可以实现类,注入OOP思想。
  jQuery就是一个函数,你也可以把它当成类(呵呵,本身就是类)。

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

(new jQuery()).test();

  第一个括号:创建一个匿名函数。
  第二个括号:立即执行。

图片 2

复制代码 代码如下:

复制代码 代码如下:

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

假想1:让jQuery函数体直接返回该对象——我用this

cQuery.fn.extend({
test : function() {
console.log(‘测试!’);
}
});
window.C = window.cQuery = cQuery;
})();
// 调用方式
C().test();

  上面的方法必须使用下面的方法才能进行调用,这样就会产生很多对象,从而浪费内存消耗。

  第一篇中有位博友提出了以下的问题,我也不太明白,如果有明白的,能否告知一、二。

(function(){
var jQuery = function() {
return this;
}
jQuery.fn = jQuery.prototype = {
// 扩展原型对象
jquery: “1.8.3”,
test: function() {
console.log(‘test’);
}
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery());

  暂时写到这里,如果大家有所补充,那最好不过了。——大家多交流互相学习下。

  javascript为所有函数绑定一个prototype属性,由这个属性指向一个原型对象。我们在原型对象中定义类的继承属性和方法等。

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

总结

输出结果

(function(){
var jQuery = function() {
// 函数体
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery);

对象url参数化param()

init()方法中的this作用域:this关键字引用了init()函数作用域所在的对象,同时也能够访问上一级对象jQuery.fn对象的作用。——这种思路会破坏作用域的独立性,对于jQuery框架来说,很可能造成消极影响。

您可能感兴趣的文章:

  • jQuery源码解读之addClass()方法分析
  • jQuery源码解读之hasClass()方法分析
  • jQuery源码解读之removeAttr()方法分析
  • jQuery源码分析之jQuery.fn.each与jQuery.each用法
  • 从JQuery源码分析JavaScript函数的apply方法与call方法
  • jQuery源码分析之jQuery中的循环技巧详解
  • 通过jQuery源码学习javascript(二)
  • jQuery中removeClass()方法用法实例
  • 使用JS实现jQuery的addClass, removeClass,
    hasClass函数功能
  • jQuery源码解读之removeClass()方法分析

(function(){
var jQuery = function() {
return new jQuery();
}
jQuery.fn = jQuery.prototype = {
// 扩展原型对象
jquery: “1.8.3”,
test: function() {
console.log(‘test’);
}
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery());

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

(function(){
var jQuery = function() {
// 函数体
return jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 扩展原型对象
jquery: “1.8.3”,
init: function() {
this.init_jquery = ‘2.0’;
return this;
}
}
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery().jquery);
console.log(jQuery().init_jquery);

复制代码 代码如下:

输出结果

总结

(function(){
var jQuery = function() {
// 函数体
return new jQuery.fn.init();
}
jQuery.fn = jQuery.prototype = {
// 扩展原型对象
jquery: “1.8.3”,
init: function() {
this.init_jquery = ‘2.0’;
return this;
}
}
jQuery.fn.init.prototype = jQuery.fn;
window.jQuery = window.$ = jQuery;
})();
console.log(jQuery().jquery);
console.log(jQuery().init_jquery);

对象url参数化:有利于结构化,易于维护。如果在url后面加一坨的参数列表,难道看着不眼晕吗?

复制代码 代码如下:

疑问

  原型对象是javascript实现继承的基本机制。

复制代码 代码如下:

巧妙3:使用工厂方法来创建一个实例

图片 3

巧妙2:扩展原型
  何为原型对象?我给出一篇博文大家可以去了解一下//www.jb51.net/article/32857.htm。

代码解析:

输出结果

自调用匿名函数(function(){})(window)

输出结果
图片 4
通过实例化init()初始化类型,限定了init()方法里的this,只在init()函数内活动,不让它超出范围。

好处:
  1、方便用户快速扩展jQuery框架的功能,不会破坏jQuery框架的原型结构。
  2、方便管理。
注意:
  通过prototype扩展的对象,我们必须通过实例化函数来调用(如cQuery().test(),而不能使用cQuery.test())

图片 5

图片 6

**思考1:init()方法返回的this作用域是什么?

复制代码 代码如下:

巧妙1:函数

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

**巧妙4:分隔作用域