1.jQuery是如何寻找到DOM或者很多方法
$符号选择标签，然后进行事件监听或者DOM操作
$('.class').on('click',function(){
$('#id').css('color',#000)；
});
可以把$，看成一个方法，$('node')就是调用一个方法把这个目标变成一个jQuery对象，然后这个对象就拥有了很多方法可以被调用
2.$调用时怎么实现的呢？
- JQ没有用new去新增，而是通过$和jQuery来实现的；
- $()就能找到对应的DOM，那么$应该是一个函数；
- 将选定的标签XX以字符串的形式传递进$()，就会得到一个XX的对象；
-
1. JQ的调用方式似乎就是这样哈，下面进行重现；
var xQuery = function(selector,content){
return ??? //返回实例
};
xQuery.prototype = {
sayHello:function(){
console.log('hello world');
}
};
window.xQuery = window.$ = xQuery;
$()的时候就可以调用函数，并且还可以使用原型中的方法了，但返回实例是什么呢？
-
2. 那么调用可以使用了，返回新对象如何解决呢？
- 1.this
var xQuery = function(selector,content){ return this; };
- 1.this
this是不行的，因为执行的xQuery赋值给了window.$，this指向了window，返回window自己就没有什么意义了；
- 2.new一个对象返回？
var xQuery = function(selector,content){ this.selector = new xQuery; return this; };
但是这样就会让xQuery陷入无尽的递归中
- 3.新建一个对象返回，或者返回prototype？
```
var xQuery = function(selector,content){
var obj = {};
return obj;
};
```
又或者
var xQuery = function(selector,content){ return xQuery.prototype; };
但是这样，通过这个你选择的对象标签就没有作用了无论是谁返回的都是一样的，而我们需要的是传入谁，就返回以谁为基础的JQ对象；
- 4.返回构造函数的实例
思路整理一下，我们需要的是传进来一个，然后在其送回去之后；他就拥有了xQuery这个的所有方法，我第一反应就是继承，但是随意选进来的DOM怎么会继承xQuery呢？人家又不是xQuery new出来的，不在原型链上，根本不能继承这些放在原型链上的方法；
var xQuery = function (selector, context) {
function CreateObject(selector,context) {
this.selector = selector;
}；
CreateObject.prototype = xQuery.prototype;
//CreateObject.prototype = Object.create(xQuery.prototype);
return new CreateObject (selector, context) ;
};
xQuery.prototype = {
say:function(){
console.log(this.selector);
}
};
window.xQuery = window.$ = xQuery;
我们已经知道xQuery的原型上有很多方法，如何让随便拉进来的一个DOM去继承就很重要了；所以就有了上述的方法；
- 5.jQuery是怎么做的呢？
var xQuery = function(selector, context) {
xQuery.prototype.init.prototype = xQuery.prototype;
return new xQuery.prototype.init(selector, context)
};
xQuery.prototype = {
init: function(selector, context) {
this.selector = selector;
return this;
},
say:function(){
console.log(this.selector);
}
};
window.xQuery = window.$ = xQuery;
将new和Object.create()的那个阶段放到了init里面
3.链式调用
JQ中，可以进行链式调用，这种方式让思路很连贯，这是因为JQ操作之后，返回的仍旧是这个JQ对象，所以并不是所有的JQ操作都可以链式，要集中在同一个对象上才可以；
$('foo').addClass('active').removeClass('active').say();
所以这个返回自身很重要
var xQuery = function(selector, context) {
xQuery.prototype.init.prototype = xQuery.prototype;
return new xQuery.prototype.init(selector, context)
};
xQuery.prototype = {
init: function(selector, context) {
this.selector = selector;
return this;
},
say:function(){
console.log(this.selector);
return this;
},
addClass:function(tag){
console.log(tag)
return this;
},
removeClass:function(tag){
console.log(tag)
return this;
}
};
window.xQuery = window.$ = xQuery;
4.插件接口
JQ也给了开发者一些拓展的接口，开发者可以通过jQuery.fn.extend()，来向jQuery中添加自己的新方法；
- 1：jQuery.extend()和jQuery.fn.extend两种方式，都不破坏JQ的结构，都可以拓展属性和方法，既然有两个，绝对是有区别的；
jQuery.extend = jQuery.fn.extedng = function(){
// TO DO
}
这么做是为什么呢？因为通过jQuery.extend()，可以实现对jQuery本身属性和方法的拓展，jQuery.fn.extend()是对jQuery原型的属性和方法的拓展，放的地方不一样而已;
其次，还有
jQuery.extend = jQuery.fn.extend = function() {}
都连等了，就是说两者都指向同一个函数，但是又能实现不同的功能，分别添加和拓展；那么这里就是因为有this
+ jQuery.extend 调用的时候，extend中的this指向了jQuery对象
+ jQuery.fn.extend调用的时候，这个this又指向了jQuery.fn，jQuery.fn和jQuery.prototype又指向同一个对象，所以扩展fn就是扩展jQuery.prototype原型对象；
- 2.举个栗子
jQuery.newFunc = function(){
console.log('new new new');
};
$.newFunc();
//这种就是直接在jQuery上动态的添加属性，属性的值时一个函数，达到一些目的；
当然还有这种
jQuery.prototype.newFunc = function(){
console.log('new new new');
return this;
};
$('node').newFunc();
最近在做一个音乐小DEMO，需要让所选的界面能够拖动，但是原来只是单纯的写一个JS模块，引入进页面，再选DOM进行初始化，让选择的DOM能够动，但是这种总是感觉很慢，感觉DOM的移动速度跟不上鼠标的速度，有时候文字还能被选中，正好做拿这个来做一下；
DEMO里面的拖拽重新用插件形式写了一下
网友评论