2024年最新前端提高篇(八十三)：简单了解jQuery框架封装，前端渲染页面

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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对象，这样就可以再一次调用原型上的方法：

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。