资讯专栏INFORMATION COLUMN

可想实现一个自己的简单jQuery库?(六)

Warren / 677人阅读

摘要:这个版本新增个方法先给出代码我们要仔细分辨下这个方法在中返回的都是什么对象到底是对象还是对象明白了这个后就很容易能写出这个方法首先我们知道一般都会这样写查找下的返回的是数组对象而不是原生的对象那么我们就可以换个思路因为我们能拿到这个

Lesson-5

这个版本新增6个方法,find(),first(),last(),eq(),get(),ajax

先给出代码

</>复制代码

  1. find : function(selector) {
  2. if(!selector) return;
  3. var context = this.selector;
  4. return new Kodo(context + " " + selector);
  5. },
  6. first : function() {
  7. return new Kodo(this[0])
  8. },
  9. last : function() {
  10. var num = this.length - 1;
  11. return new Kodo(this[num]);
  12. },
  13. eq : function(num) {
  14. var num = num < 0 ? (this.length - 1) : num;
  15. console.log(num);
  16. return new Kodo(this[num]);
  17. },
  18. get : function(num) {
  19. var num = num < 0 ? (this.length - 1) : num;
  20. console.log(num);
  21. return this[num];
  22. }

我们要仔细分辨下,这4个方法在jQuery中返回的都是什么对象?到底是dom对象还是jQuery对象.

明白了这个后就很容易能写出这4个方法

</>复制代码

  1. find : function(selector) {
  2. if(!selector) return;
  3. var context = this.selector;
  4. return new Kodo(context + " " + selector);
  5. }

首先find, 我们知道一般都会这样写 $("div").find("span") 查找div下的span,返回的是span数组对象,而不是原生的dom对象

那么我们就可以换个思路,因为我们能拿到 $("div") 这个selector对吧? 也就是 div

既然又要find("span"),我们的selector就可以写成 ("div span"),之后直接返回新的数组对象不就好了吗??

var context = this.selector; 先缓存当前的selector上下文,之后拼接我们find的selector

所以最后return 就变为 new Kodo(context + " " + selector); 虽然效率不一定高,总是一种解决思路不是吗?

</>复制代码

  1. first : function() {
  2. return new Kodo(this[0])
  3. },
  4. last : function() {
  5. var num = this.length - 1;
  6. return new Kodo(this[num]);
  7. },
  8. eq : function(num) {
  9. var num = num < 0 ? (this.length - 1) : num;
  10. console.log(num);
  11. return new Kodo(this[num]);
  12. },
  13. get : function(num) {
  14. var num = num < 0 ? (this.length - 1) : num;
  15. console.log(num);
  16. return this[num];
  17. }

find方法比较难解决,之后这4个就很容易了,first,last,eq,分别返回的都是封装后的对象,只有get返回的是原生 dom对象.

我们根据之前的思路,直接取数组对象的index,return下新的即可,是不是很简单? :)

之后是ajax部分

之前说过之所以,可以用$.ajax直接调用,是因为可以把方法直接挂在在构造函数上,作为静态方法

所以我们只需要写好ajax最后把你想要公开的接口放在Kodo上即可

</>复制代码

  1. Kodo.get = function(url,sucBack,complete) {
  2. var options = {
  3. url : url,
  4. success : sucBack,
  5. complete : complete
  6. };
  7. ajax(options);
  8. };
  9. Kodo.post = function(url,data,sucback,complete) {
  10. var options = {
  11. url : url,
  12. type : "POST",
  13. data : data,
  14. sucback : sucback,
  15. complete : complete
  16. };
  17. ajax(options);
  18. };
  19. function ajax(options) {
  20. var defaultOptions = {
  21. url: false, //ajax 请求地址
  22. type : "GET",
  23. data : false,
  24. success: false, //数据成功返回后的回调方法
  25. complete: false //ajax完成后的回调方法
  26. };
  27. for (i in defaultOptions) {
  28. if (options[i] === undefined) {
  29. options[i] = defaultOptions[i];
  30. }
  31. }
  32. var xhr = new XMLHttpRequest();
  33. var url = options.url;
  34. xhr.open(options.type, url);
  35. xhr.onreadystatechange = onStateChange;
  36. if (options.type === "POST") {
  37. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  38. }
  39. xhr.send(options.data ? options.data : null);
  40. function onStateChange() {
  41. if (xhr.readyState == 4) {
  42. var result,
  43. status = xhr.status;
  44. if ((status >= 200 && status < 300) || status == 304) {
  45. result = xhr.responseText;
  46. if (window.JSON) {
  47. result = JSON.parse(result);
  48. } else {
  49. result = eval("(" + result + ")");
  50. }
  51. ajaxSuccess(result, xhr)
  52. } else {
  53. console.log("ERR", xhr.status);
  54. }
  55. }
  56. }
  57. function ajaxSuccess(data, xhr) {
  58. var status = "success";
  59. options.success && options.success(data, options, status, xhr)
  60. ajaxComplete(status)
  61. }
  62. function ajaxComplete(status) {
  63. options.complete && options.complete(status);
  64. }
  65. }

在这我就不细讲ajax的具体过程,我也实现了一个比较简单的ajax,就公开了get和post方法.大家可以实现一个更加复杂好用的ajax替换我这段代码

你说你都耐心的翻到这了? 不给我一个star说的过去么你?

github地址: https://github.com/MeCKodo/forchange/tree/master/lesson-5
可想实现一个自己的简单jQuery库?(五):http://segmentfault.com/a/1190000004001281

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86246.html

相关文章

  • 可想实现一个自己简单jQuery?()

    摘要:这个版本新增个方法先给出代码我们要仔细分辨下这个方法在中返回的都是什么对象到底是对象还是对象明白了这个后就很容易能写出这个方法首先我们知道一般都会这样写查找下的返回的是数组对象而不是原生的对象那么我们就可以换个思路因为我们能拿到这个 Lesson-5 这个版本新增6个方法,find(),first(),last(),eq(),get(),ajax 先给出代码 find : funct...

    whinc 评论0 收藏0
  • 可想实现一个自己简单jQuery?(七)

    摘要:这个版本完善和方法新增和链式测试在我们上一个版本中没有对方法传对象进行解析在这我们要进行完善刚刚好我们现在已经有了方法直接用上吧在我们的循环中要先判断下传入的参数是字符串还是对象如果是字符串我们就按照这样的方式处理如果是对象首先我们缓存下 Lesson-6 这个版本完善hasClass和css 方法. 新增 attr和data css: function(attr, val) { /...

    stackfing 评论0 收藏0
  • 可想实现一个自己简单jQuery?(七)

    摘要:这个版本完善和方法新增和链式测试在我们上一个版本中没有对方法传对象进行解析在这我们要进行完善刚刚好我们现在已经有了方法直接用上吧在我们的循环中要先判断下传入的参数是字符串还是对象如果是字符串我们就按照这样的方式处理如果是对象首先我们缓存下 Lesson-6 这个版本完善hasClass和css 方法. 新增 attr和data css: function(attr, val) { /...

    gplane 评论0 收藏0

发表评论

0条评论

Warren

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<