前端提高篇(八十三)：简单了解jQuery框架封装

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了前端提高篇(八十三)：简单了解jQuery框架封装，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2868字，纯文字阅读大概需要5分钟。

内容图文

自己写一个类似jQuery的工具库
先看看jQuery()原本执行的样子：

console.log($('#dom'));
console.log($('#dom').text());

实际jQuery()执行的效果是这样子的：

部分原型方法：

jQuery还有一个链式操作的功能，可以让代码更加简洁，如：将div字体改成红色，并输出文本，原生js需要先设置颜色，再取文本，分开设置；jQuery只需一行搞定：

console.log( $('#dom').css('color', 'red').text() );

大概从以下几个特征看看jQuery的封装：
1.有特定的返回对象的类型(jQuery.fn.init)
2.返回对象包含索引及值、length属性，且不需要用户手动new
3.原型有很多方法
4.链式操作

讨论如下
1.封装好自己的作用域，全局使用jQuery的条件下，还防止定义的变量污染到用户环境
一般封装作用域有以下两种方式：
1.1 命名空间
1.2 闭包

jQuery使用的是闭包方式：

(function(){
	window.jQuery = window.$ = jQuery;//将jQuery()暴露在window环境下，别称$
    function jQuery(){
	//执行jQuery相关操作的代码
    }
})();

调用时：

jQuery('#id');

2.改变返回对象的类型
想要改变返回对象的类型，返回的应该是new出来的实例对象，否则jQuery()是由window对象调用，不论里面嵌套多少层函数，返回对象都是window

(function(){
    window.jQuery = window.$ = jQuery;
    function jQuery(id){
        return new init(id);//将返回类型从window改为init，且无需用户手动new
    }
    //模仿传入id选择器获取该dom元素的功能
    //将init方法设置在闭包里，也设置在原型上
    var init = jQuery.prototype.init = function (id){
        var dom = document.getElementById(id.slice(1));
        this[0] = dom;
        this.length = 1;
        return this;
    }
})();
console.log( jQuery('#dom') );

此时的效果：类型是jQuery.init

如果没有设置在原型上，是这样的：

function init(id) {
	var dom = document.getElementById(id.slice(1));
	this[0] = dom;
	this.length = 1;
	return this;
}

效果：类型是init：

此处只简单模仿了识别id选择器，没有判断传入的内容是什么
在jQuery()里又套了一层init()，jQuery()返回的是以init()为构造函数而new出来的对象，所以这个对象的类型是init；
如果不隔一层init，调用jQuery方法的是window，函数里的this指向的就是window，返回对象的类型也就是window

实际jQuery返回的对象要复杂得多，待我提升功力了再更新

3.设置原型及原型方法：

jQuery.prototype.text = function(){
	//执行text方法
	return 'text';
}//设置jQuery的原型
init.prototype = jQuery.prototype;
//将init的原型从Object，改成jQuery设置的原型

调用：

console.log( jQuery('#dom'));
console.log( jQuery('#dom').text() );

此时的效果：

执行jQuery('#dom')返回的是init的对象，但init本身和原型上均没有text的定义（init没有另外设置原型，默认原型是Object），就不能调用text()方法，而jQuery的原型是有指定text方法的，所以手动将init的原型改成jQuery的原型

这也提供了指定/修改原型的方法：直接赋值

4.链式操作
执行一次原型上的方法后，返回这个jQuery对象，这样就可以再一次调用原型上的方法：

jQuery.prototype.text = function(){
    //执行text方法
    console.log('text');
    return this;//这里的this指的是jQuery()返回的对象
}
jQuery.prototype.css = function(){
    //执行css方法
    console.log('css');
    return this;
}

jQuery('#dom').css().text();

效果：执行了text方法，后又执行了css方法，这里仅用简单的打印示意，并且源码中有判断何时return this ，何时不return，此处也没有呈现：

内容总结

以上是互联网集市为您收集整理的前端提高篇(八十三)：简单了解jQuery框架封装全部内容，希望文章能够帮你解决前端提高篇(八十三)：简单了解jQuery框架封装所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端