jquery做手机网站(jquery 手机)

　　前言

　　本文是来自腾讯SNG前端工程师@蓝邦珏的投稿。这是一系列文可以期待作者娓娓道来。

　　正文从这开始～

　　从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅途，在整个系列的实践中，我们会把 jQuery 的主要功能模块都了解和实现一遍。

　　这会是一段很长的历程，但也会很有意思 —— 作为前端领域的经典之作，jQuery 里有着太多奇思妙想，如果能够深入理解它，对于我们稳固js基础、提升前端大法技能来说大有裨益。

　　另外，本系列的相关代码均可以从 我的github 上获取到。

　　1. 免 new 实现

　　我们在使用很多插件的时候，都需要使用 new XXX() 的写法来实例化一个引用:

　　jQuery 同样作为一个面向对象的工具库，在我们创建一个实例时却无需使用 new 语法，节省了一些代码量：

　　这种便捷的形式依赖了工厂模式，其实现非常简单，把 new 封装在库内即可，让每次调用 jQuery() 时自行在内部进行一次实例化：

　　留意这里我们走的 IIFE 形式，让 jQuery 代码库形成自己的作用域，避免污染外部变量。

　　于是乎以上就是咱写的第一个 JQ 雏形，简单跑一下：

　　别忘了后续我们还希望能通过 $.extend / $.fn.extend 来扩展 JQ 的静态方法和原型方法，我们把出口方法抽出来增加这个 extend 的API：

　　这样我们也能直接通过 $.fn.jquery 来获取当前 JQ 版本号了。

　　如果希望可以通过 $.prototype 直接访问 jQuery 的原型对象，再修改下这句代码即可：

　　2. 写法优化

　　事实上我们不太喜欢再写多一个冗余的 Factory 构造函数来作为 window.jQuery 的引用，也不喜欢（在模块内部）使用 Factory.extend() 来扩展 JQ，它听起来和 JQ 没有半毛钱关系。

　　如果可以，直接把 jQuery 方法作为接口输出，且在模块内部能以 jQuery.extend() 的形式来调用扩展接口，这样的形式更佳。

　　也就是说我们希望代码应该是这样写的：

　　“直接把 jQuery 方法作为接口输出”意味着我们要把工厂模式挪入 jQuery 方法中，显然我们不能这样改：

　　这样死循环了，调用栈会直接爆掉~

　　于是我们可以抽出一个 init 方法来做初始化处理（比如简单地注入检索到的元素到JQ对象中），把 jQuery 方法中的内容更改为 return new init(selector) 就行了。

　　保证两个前提：

this 指向 jQuery 上下文

其原型指向 jQuery 的原型

　　第一点很好理解，方便我们直接在 init 方法中通过对 this 的操作来处理 JQ 实例上下文，如：

　　针对这点，我们不妨把 init 作为 jQuery.prototype 的属性方法来实现：

　　然而这时候存在一个问题 —— JQ实例对象无法访问原型属性/方法：

　　原因很简单——我们还未实现上述提及的第二个前提——“init 原型指向 jQuery 的原型”

　　在 js 中，实例的内部原型（__proto__）总是指向其构造函数的原型（prototype），而经过我们这番修改，JQ实例的构造函数已经变成了 jQuery.fn.init ，而其原型并非指向 jQuery 的原型，这导致 JQ 实例无法顺其原型链爬取到 jQuery.prototype。

　　要实现这个条件，只需要做小小改动——把 jQuery.fn.init 的原型指向 jQuery 的原型（jQuery.prototype / jQuery.fn）即可：

　　这里贴下完整代码：

　　3. 链式写法实现

　　JQ 里一个很大的亮点是，它支持链式写法，调用起来非常方便：

　　其实现其实非常简单 —— 确保每个调用的方法尾部均返回自身即可，这里我们新增两个实例方法做示例：

　　链式调用：

　　效果如下，杠杠的：

　　4. 冲突处理

　　存在某些情况，用户可能并不想拿 window.$ 甚至 window.jQuery 来引用 JQ 接口，或者已经有其它库使用了 window.$ 这个变量，如果我们粗暴地改变其引用肯定是不合理的。

　　so 我们来实现 JQ 中冲突处理的静态接口 jQuery.noConflict，这意味着在代码段开始时，就得先保存下当前 window.$ 和 window.jQuery 两个变量：

　　然后是实现 noConflict 方法，退耕还林，把保存的变量吐回去即可：

　　deep 参数类型为 Boolean，若为真，表示要求连window.jQuery 变量都需要吐回去。

　　留意在尾部我们返回了 jQuery 的接口引用，这意味着我们可以以

　　的形式来把它赋予新的变量。

　　接着在外部运行如下代码：

　　输出如下：

　　第一篇就写到这里，相关的代码可以从 我的github 上下载到。

　　下次我们会试着实现模块化的写法，并与时俱进，改用 ES6解构赋值语法 + Rollup 来进行打包以减少可能存在的冗余代码段。

　　最后

　　发现竟然是第二篇分享jQuery的，之前的是【第647期】如何做到 jQuery-free？

　　关于本文

　　作者：@蓝邦珏

　　原文链接：https://www.cnblogs.com/vajoy/p/5510743.html

　　欢迎投稿到前端早读课

投稿邮箱：181422448@qq.com