如如jQuery般易用的般易用的api风格代码分享风格代码分享
回到正题，如jQuery般易用的api风格？那到底是什么样的风格呢？个人觉得比较重要的有两点，一是对dom操作的链式调
用，并且都呈队列状态，不仅仅使代码的可读语义变得通俗易懂，而且省去了对同一dom元素的多个链式操作时的回调中嵌回
调的方式，这是很重要的一点。
二是对元素的批量操作，这是建立在它强大的选择器上的。jq选择器很强大，这是人所众知的，就不多说了。而且肯定也不是
一两天就能实现的了的，所以下面就对我所说的这两点谈谈我的看法。
基于它强大的选择器，jquery所有的dom操作都依赖于根据它选择器取到的一个数组，很多人喜欢把这叫做jq对象。那咱们暂
时也先这样叫吧。然后所有的dom操作都是依赖于这个jq对象中每一个元素并发批量执行的。具体到每一个dom操作，大部分
的都是呈链式回调的状态，也就是说在这个方法链里面，直接根据方法调用在链中的先后顺序就能知道他们执行的顺序。这种
方法链并且串行的形式是它的一大特色。
以至于很多人喜欢用jquery，基本就看中它两点，选择器确实很强大，链式调用确实很方便很易用，代码逻辑瞬间变得简单。
正因为他把很多的代码逻辑都放到自己内部去处理了，留给编码者考虑的问题就少了很多，所以一方面你觉得好用的同时，也
就失去了一次锻炼编码逻辑的机会。因此我不建议初学者直接学习使用jquery或者其他的框架，因为他们会让你对js的理解越
来越少。我的观点是所有的框架或者库都是拿来使用的，拿来提高开发效率和管理便利度的，而不是拿来学习的。（当然，研
究源码的除外）。
那么，既然觉得jquery的api风格好用，那我们何尝不尝试一下构建这种类似的api风格呢？（声明：以下尝试都仅仅是提供一
种思路，代码并不完善…）
代码如下:
var get = function (ids) {
var d = document, a = -1;
this.elements = [];
if (typeof ids != ‘string’ && !!ids.length) {
for (var i=0; i<ids.length; i++) {
var id = ids[i], o;
o = typeof id == ‘string’ ? d.getElementById(id) : id;
this.elements.push(o);
}
} else {
while (typeof arguments[++a] == ‘string’) {
this.elements.push(d.getElementById(arguments[a]));
}
}
}
然后为它扩展一些操作dom的方法
代码如下:
get.prototype = {
each : function () {},
animate : function () {}
}
当然，这种方式和jQuery看起来不太一样，但能理解就行，jquery可能是这个样子：
代码如下:
jQuery = window.jQuery = window.$ = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {}
}
接下来对获取的队列进行批量操作，不可避免的就需要一个each的遍历方法。
代码如下:
each : function (fn) {
for (var i=0; i<this.elements.length; i++) {
fn.call(this, this.elements[i])
}
return this;
},
each为get.prototype扩展出的方法，提供一个参数function，并且遍历dom列表，把function绑定到每一个元素上。然后让它返
回get.prototype，因为prototype本身具有类似于“超类”的性质，所以凡是返回给prototype对象的方法都能继续调用prototype扩
展出来到方法。
为了使这个尝试更有意义一点，接下来来做一个animate的函数吧。这个函数是jquery对dom操作很常用的一个方法，有了
它，大部分的动画都变得那么简单和容易了。下面会是一个简单的实现：
代码如下:
animate: function (config) {
剩余8页未读，继续阅读
资源评论
weixin_38728360
- 粉丝: 4
- 资源: 926
最新资源
- 车辆船只人员检测3-YOLO（v5至v9）、COCO、CreateML、Darknet、Paligemma、TFRecord、VOC数据集合集.rar
- 物流数据相关标准清单.xlsx
- python语言kssppxhb爬虫程序代码xQZQ.txt
- python语言kssphb爬虫程序代码QZQ.txt
- python语言kssppxhb爬虫程序代码xQZQ1.txt
- python语言kssp爬虫程序代码ZQ.txt
- python语言kssp爬虫程序代码QZQ.txt
- python语言kssp爬虫程序代码QZQ1.txt
- python语言kuaishoushiping爬虫程序代码QZQ.txt
- Python项目开发流程及其各环节注意事项详解
- 汽车-车联网数据相关标准清单.xlsx
- 车辆船只检测4-YOLO（v5至v9）、COCO、CreateML、Darknet、Paligemma、TFRecord、VOC数据集合集.rar
- 基于51单片机的数码管多种波形发生器设计(protues仿真)-毕业设计
- 四足机器人步态控制算法解析与代码实现
- 四足机器人步态控制算法及Python实现
- 四足机器人步态控制算法的技术原理及Python实现
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
