最近在做一个项目，其中包括了一个图片在线裁剪功能，于是找到了cropperjs，cropperjs的裁剪功能丰富，满足了各种需求，预览链接：cropperjs预览

裁剪图片的两种思路：

1.在前端裁剪，通过html5的HTMLCanvasElement.toBlob方法，把裁剪后的图片通过表单方式用ajax提交给后台，或者使用HTMLCanvasElement.toDataURL 把图片转换为base64提交到后台。

2.在后台裁剪，在前端裁剪后把裁剪的坐标和裁剪之前的原图发送到后台，让后台执行裁剪，把裁剪后的图片返回

以上两种方法使用cropperjs都是支持的，自己选择了第一种方案，减轻后台工作。

- 阅读剩余部分 -

属性相关

常用的nodeType返回值

节点.nodeType用来获取当前节点的节点类型，一共有12种不同的类型，具体如下

其中，常用的有元素节点，属性节点和文本节点

- 阅读剩余部分 -

 function A() {
    this.arr = [1,2];
}

A.prototype.showName = function () {
    console.log(this.arr);
}

function  B() {
   A.call(this);
}

var F = function(){};
F.prototype = A.prototype;
B.prototype = new F();
B.prototype.constructor = B;

var b = new B();
b.arr.push(4);
b.showName();

console.log(b.constructor)

var b2 = new B();
b2.showName();

最近在看jQuery源码的时候发现通过Object下面的toString()方法判断数据类型非常好使，大概是这样的

var arr = [];
console.log(Object.prototype.toString.call(arr)=='[object Array]');//true

var obj = {};
console.log(Object.prototype.toString.call(obj)=='[object Object]');//true

var date = new Date();
console.log(Object.prototype.toString.call(date)=='[object Date]');//true

var reg = new RegExp();
console.log(Object.prototype.toString.call(reg)=='[object RegExp]');//true

var oNull = null;
console.log(Object.prototype.toString.call(oNull)=='[object Null]');//[true

- 阅读剩余部分 -

script元素主要的属性

• async:可选，表示立即下载脚本（异步），但是不影响页面的其他操作，只对引入外部脚本文件有效

• defer：可选，表示脚本延时到文档完全被解析和显示后再执行，相当于告诉浏览器立即下载，延时执行。只对引入的外部脚本文件有效

• src:表示包含要要执行的外部文件

注意

1.当有多个脚本设置了defer属性的时候，脚本延时执行仍然按照脚本引入的先后顺序执行

2.当有多个脚本设置了async属性的时候，脚本的执行顺序不一定按照脚本引入的先后顺序执行

<script src = "XXX.js" defer = "defer" ></script>

<script src = "XXX.js" async ></script>

在网页上实现拖拽分三步：

1.当鼠标按下的时候，触发onmousedown事件，计算出当前鼠标位置距离拖拽目标的左边和上边距离

2.鼠标移动的时候，触发onmousemove事件，计算鼠标移动的距离，然后把距离赋值给拖拽目标，实现拖拽

3.鼠标抬起的时候，触发onmouseup事件，注销onmousemove和onmouseup

下面是实现的代码：

- 阅读剩余部分 -