jQuery源码学习一: 创建一个jquery实例
前言:
jquery是每个前端都会的基础技能,众所周知,jquery返回的是jquery实例方法,但是我们似乎是直接使用$就可以获取到jquery的方法啦,可以在浏览器中判断一下 window.$ 和window.jQuery,jQuery 之间的关系,就会发现他们之间是全等的;
不使用new方法调用
我们一般调用实例大部分是通过new方法,但是jquery却不是,而是直接调用,这是为什么呢
1. 创建实例方法:
(function(root){
var jQuery = function(){
console.log('创建实例啦')
}
root.jQuery = jQuery //这样赋值就可以调用啦
})(window)
2.返回时操作
但是现在页面上调用jQuery仍然不能使用$调用,于是简单修改代码
(function(root){
var jQuery = function(){
return new jQuery()
}
root.$ = root.jQuery = jQuery
})(this)
这样我们就可以不在外部调用new方法,因为jQuery在返回的时候就已经调用了new
原型共享
在之前的操作下,我们已经将new jQuery返回了出去,但是这样是有问题的。我们在jquery原型中定义一个init方法,并将init返回出去
1. 定义一个init
var jQuery = function(){
return new jQuery.prototype.init();
}
jQuery.prototype = {
init: function(){
}
}
但是这样我们虽然解决了报错问题,但是我们现在无法获取到jQuery中的原型方法,也就无法调用到jQuery的方法。
2. 原型共享
jQuery中有很重要的一行代码:
jQuery.prototype.init.prototype = jQuery.prototype
这就是原型共享,简单从代码来看,就是将jquery的原型赋值给jquery.prototype.init方法原型;
这样我们调用jquery时,虽然获取的是init方法,但是依然可以调用jquery中的原型方法。
3. 例子
我们在jquery上简单扩展方法,并打印jquery验证
jQuery.prototype = {
init: function(){
},
css: function(){},
}
结果:
jQuery源码学习一: 创建一个jquery实例的更多相关文章
- jquery源码学习笔记三:jQuery工厂剖析
jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...
- jquery源码学习(一)——jquery结构概述以及如何合适的暴露全局变量
jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦 我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jq ...
- jQuery源码学习扒一扒jQuery对象初使化
神奇的jQuery可以这样玩jQuery("#id").css()或 jQuery("#id").html() 这么玩jQuery("#id" ...
- jquery源码学习笔记二:jQuery工厂
笔记一里记录,jQuery的总体结构如下: (function( global, factory ) { //调用factory(工厂)生成jQuery实例 factory( global ); }( ...
- jquery源码学习(三)—— jquery.prototype主要属性和方法
上次我们学习了jquery中的主要对象jQuery和一些变量,现在我们开始学习jquery的原型 98行声明了jQuery.fn = jQuery.prototype = {} 285行jQuery. ...
- jquery源码学习(二)——jquery中的变量
jquery在 21-93 行提供了变量 var // A central reference to the root jQuery(document) rootjQuery, // The defe ...
- jquery源码学习(四)—— jquery.extend()
a.jQuery.extend( source ) b.jQuery.extend(destination, source1, source2, source3 ....) c.jQuery.exte ...
- jquery 源码学习(*)
最近在做日志统计程序,发现对方的程序是在Jquery基础上进行开发的,而公司的网站的框架是prototype.而且我也早就想了解一下Jquery源码,故决定研究Jquery源码,模拟它的方法 Jq ...
- jquery源码学习笔记(一)jQuery的无new构建
本人是一名.net程序员..... 你一个.net coder 看什么jQuery 源码啊? 原因吗,很简单.技多不压身吗(麻蛋,前端工作好高...羡慕). 我一直都很喜欢JavaScript,废话不 ...
- jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理
jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理 最近在看jquery源码分析的视频教学,希望将视频中学到的知识用博客记录下来,更希望对有同样对jquery源码有困惑 ...
随机推荐
- phpcms邮箱smtp配置163企业邮测试可用
前面我们给phpcms加了https,但是修改邮箱smtp配置一直提交不了,提示请填写接口地址,格式为:http://www.abc.com,结尾不包含"/",找了一下phpsso ...
- 基于react开发package.json的配置
项目依赖 react网页开发的3件套: react, react-dom, react-router-dom, redux, react-reduxreact的UI组件库: antd(pc端), an ...
- rpm 子包创建学习
rpm 在打包的时候,可以创建子包,这样可以清晰的进行软件包的拆分,以下是结合官方文档学习 的一个实践 预备条件 需要安装rpmdevtools spec 文件 内容 Name: foo Versio ...
- 函数$f(x+1)$和$f(x-1)$的奇偶性
前言 廓清认知 1.函数\(y=f(x)\)的奇偶性 ①\(y=f(x)\)为奇函数,则满足\(f(-x)+f(x)=0\),即关于点\((0,0)\)对称: ②\(y=f(x)\)为偶函数,则满足\ ...
- Linux中fork()函数详解(转载)
linux中fork()函数详解 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事, ...
- 第02组Alpha冲刺(4/4)
队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...
- [GXOI/GZOI2019]与或和(位运算,单调栈)
题目链接懒得放了. 题目大意懒得写了. 省选原题哪有找不到的…… 说实话,其实这题是个大水题,被我十秒钟内口胡出来了. 首先位运算除了拆位还能干啥?以下以与为例,或是差不多的. 我们考虑有多少个子矩阵 ...
- iptables man手册翻译
概要 iptables [-t table] -[AD] chain rule-specification [options]iptables [-t table] -I chain [rulenum ...
- react-native 设置启动模拟器
react-native 设置启动模拟器 查看iOS可选设备: xcrun simctl list devices iPhone7 Plus启动(下次启动会默认使用最后一次选择设备,直接启动npx r ...
- ASP.Net Core使用分布式缓存Redis从入门到实战演练
一.课程介绍 人生苦短,我用.NET Core!缓存在很多情况下需要用到,合理利用缓存可以一方面可以提高程序的响应速度,同时可以减少对特定资源访问的压力. 所以经常要用到且不会频繁改变且被用户共享的 ...