alan89757 / jquery-analysis

jquery源码分析

• 👋 Hi, I’m @alan89757
• 👀 I’m interested in react/vue/nodejs
• 🌱 I’m currently learning react
• 💞️ I’m looking to collaborate on bussiness
• 📫 How to reach me e-mail: [email protected]

jquery-analysis's Issues

jQuery有哪些选择器

你知道自定义事件吗？jQuery里的fire函数是什么意思，什么时候用？

jQuery UI怎样自定义组件？

jQuery的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

jQuery是如何链式调用的？

jquery的所有方法返回this(对象本身)

jQuery是通过哪个方法和Sizzle选择器结合的？

jQuery中如何将数组转化为json字符串，然后再转化回来？

jquery异步编程解决方案

deferred => ES6 promise => Generator => async

jquery中extend的用法

（1）任意对象扩展

  var obj1 = {name: "alan"};
  var obj2 = {age: 20};
  $.extend(obj1, obj2);

（2）jquery本身扩展

  $.extend({
    world: function() {
      console.log('hello world');
    }
  })

（3）jquery实例对象扩展

  $.fn.extend({
    css1: function() {
      console.log("css1")
    }
  })

jquery实现类数组转数组

简单概括一下jquery的实现原理？

jQuery的选择器有哪些？

jQuery和Zepto的区别？各自的使用场景？

你有写过jQuery的扩展吗？都有哪些写法？

针对jQuery性能的优化方法有哪些？

show slide animate 等频繁修改 dom 很耗性能，可采用 jquery.transit 插件等
使用单个 id 或 class 选择器当然也是优化点咯，元素选择器是真的会卡
每次调用 $() 其实都是生成一个超大的对象，还是尽量存为变量吧
用 jquery 写事件委托是最爽的，优点也是非常明显的

jQuery中Deferred的用法

var def = $.Deferred();
  var wait = function(def) {
    var test = function() {
      console.log("test开始")
      def.resolve()
    }
    setTimeout(test, 5000);
    return def;   // 返回def给when函数使用
  }

  $.when(wait(def)).done(function(data) {
    console.log("执行成功")
  }).fail(function() {
    console.log("执行失败")
  }).done(function() {
    console.log("再次执行成功")
  });

jQuery的attr和prop方法有什么区别？

prop获取元素本身自带的属性，比如a中的href,input中的type
attr获取用户自己给元素添加的属性，即自定义属性

Zepto的点透问题如何解决？

jQuery的队列是如何实现的？队列可以用在哪些地方？

jQuery与jQuery UI有啥区别？

你知道js和jQuery是什么关系吗？

jquery.extend与jquery.fn.extend的区别？

jquery实现Callbacks

jQuery.extend({
    Callbacks: function(options) {
      options = typeof options === "string" ? ( optionsCache[options] || createOptions(options)) : {};  // options保存options.split后的对象 {mermory: true, stopOnFalse: true}
      var memory, start, index, firing, length, testing;
      var list = [];  // 回调列表
      // 执行回调列表
      var fire = function( data ) {
        memory = options.memory && data;  // 获取参数值
        index = start || 0;   // 第一次进来直接从0开始执行回调列表，后面进来index从上一次执行完length（list.length）开始
        length = list.length;  // 记录上次执行的length
        firing = true;
        testing = true;  // 如果参数有once 回调函数已经调用过了
        for( ; index < length; index++) {
          if(list[index].apply( data[0], data[1]) === false && options.stopOnFalse ) {  // 判断执行结果是否为false，给stopOnFalse使用
            break;
          }
        }
        start = 0;  // 执行完成重置start, 处理参数不传的情况，memory直接执行fire函数
        firing = false;
      }
      // 工厂模式
      var self = {
        add: function() {
          var startlen = list.length;
          jQuery.each( arguments, function(i, value) {
            if(jQuery.isFunction(value)) {
              list.push(value);
            }
          })
          if(firing) {  // 执行完回调才能去获取回调函数的长度作为新起始点
            start = list.length;
          } else 
          if(memory) {
            start = startlen;  // add之前的回调列表函数
            fire(memory);    // 如果是memory，fire之后的add立即执行
          }
        },
        fireWith: function(context, args) {
          args = [ context, args ];
          if(!options.once || !testing) {  // 没有once || 是once，但是第一次调用
            fire( args );
          }
        },
        fire: function() {
          self.fireWith( this, arguments);
          return this;
        }
      }
      return self;
    }
  })

jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

谈一下Jquery中的bind(),live(),delegate(),on()的区别？