underscore

在 2016年9月7日上张贴由 BestLove

# 文档地址
http://underscorejs.org/#collections

// 提供一系列函数式编程接口，与jQuery的$类型，把自身绑定到唯一的全局变量_上
// 集合类是指Array和Object，暂不支持Map和Set
_.map({a:1,b:2}, (v,k) => k+'='+v);                 // ['a=1', 'b=2']
_.map([1, 2], (x) => x*x);                          // [1, 4]
_.mapObject({a:1,b:2}, (v,k) => k+'='+v);           // {a:'a=1', b:'b=2'}
_.filter([1,2,3,99], function(x) {                  // [1, 2, 4]
    if (x > 10) {
        return false;
    }
    return true;
});

// _.every(集合内所有元素满足条件返回true)
// _.some(集合内任一元素满足条件返回true)
// _.max _.min 空集合会返回Infinity和-Infinity Object只能作用于value，不能作用于key

// _.groupBy分类
// {A:[100, 200], B:[10, 20], C:[1, 2], undefined:[-1]}
var groups = _.groupBy([1,2,10,20,100,200,-1], function(x) {
    if (x >= 100) {
        return 'A';
    } else if (x >= 10) {
        return 'B';
    } else if (x >= 1) {
        return 'C';
    }
});

// _.shuffle用洗牌算法随机打乱一个集合
// _.sample随机选择一个或多个元素

# underscore为Array提供了许多工具类方法
// _.first(arr); _.last(arr);
// _.flatten接收一个array，无论它多少维，整成一维
// [1, 2, 3, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3]
_.flatten([ 1, [2, 3], 2, 3, [4, [5, 6, [7, 8]]], [1, 2, 3] ]);

// _.zip把两个或多个数组按索引对齐合并
// [['Adam', 85], ['Lisa', 92], ['Bart', 59]]
var names = ['Adam', 'Lisa', 'Bart'];
var scores = [85, 92, 59];
var rs = _.zip(names, scores);
// _.unzip则是反过来(但是它返回的不是多个数组，外层有一个大数组包裹)
// [['Adam', 'Lisa', 'Bart'], [85, 92, 59]]
_.unzip(rs);

// _.object(只接收两个参数)
_.object(names, scores);    // {Adam: 85, Lisa: 92, Bart: 59}
// _.range
_.range(10);    // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

// _.bind
// 以下这种写法会报错
var log = console.log;
log('Hello, world!');
// 需要使用call，传入this
log.call(console, 'Hello world!');
// 使用_.bind可以直接绑定
var log = _.bind(console.log, console);
log('Hello, world!');

// _.partial(偏函数)
var pow2N = _.partial(Math.pow, 2);         //pow2N(3);2的三次方=8           pow2N(4);2的四次方=16
var powN3 = _.partial(Math.pow, _, 3);      //powN3(2);2的三次方(_是占位符)  powN3(4);4的三次方=64

// _.memoize(有些开销大的函数可以用它缓存结果)
// 该函数一般配合递归调用使用，可以把每次递归的结果缓存

// _.once(保证某个函数只执行一次)

// _.delay(和setTimeout()效果一样)
_.delay(alert, 2000, 'param');

# underscore为Object提供了许多工具类方法
_.keys(obj);            //返回对象所有的key，但不包括从原型链上继承下来的
_.allKeys(obj);         //返回对象所有的key，包括从原型链上继承下来的
_.values(obj);          //返回对象所有的值，但不包括从原型链上继承下来的
_.invert(obj);          //把对象的key、value互换

// _.extend 如果有相同的key，后面的object的value将覆盖前面的object的value
var a = {name: 'Bob', age: 20};
// 返回并且a的内容也变成 {name: 'Bob', age: 88, city: 'Beijing'}
_.extend(a, {age: 15}, {age: 88, city: 'Beijing'});
// _.extendOwn与_extend类似，但获取属性时忽略从原型链继承下来的属性

_.clone(obj);           //克隆对象，浅复制

# _.isEqual 比较对象和数组
// _.isEqual 对两个object进行深度比较，如果内容完全相同，则返回true
var o1 = { name: 'Bob', skills: { Java: 90, JavaScript: 99 }};
var o2 = { name: 'Bob', skills: { JavaScript: 99, Java: 90 }};
o1 === o2;                  // false
_.isEqual(o1, o2);          // true

# 链式调用
// 因为每一步返回的都是包装对象，所有最后一步需要调用value方法获取值
_.chain([1, 4, 9, 16, 25])
 .map(Math.sqrt)
 .filter(x => x % 2 === 1)
 .value();

100

101

102

103

# 文档地址

http://underscorejs.org/#collections

// 提供一系列函数式编程接口，与jQuery的$类型，把自身绑定到唯一的全局变量_上

// 集合类是指Array和Object，暂不支持Map和Set

_.map({a:1,b:2}, (v,k) => k+'='+v); // ['a=1', 'b=2']

_.map([1, 2], (x) => x*x); // [1, 4]

_.mapObject({a:1,b:2}, (v,k) => k+'='+v); // {a:'a=1', b:'b=2'}

_.filter([1,2,3,99], function(x) { // [1, 2, 4]

if (x > 10) {

return false;

}

return true;

});

// _.every(集合内所有元素满足条件返回true)

// _.some(集合内任一元素满足条件返回true)

// _.max _.min 空集合会返回Infinity和-Infinity Object只能作用于value，不能作用于key

// _.groupBy分类

// {A:[100, 200], B:[10, 20], C:[1, 2], undefined:[-1]}

var groups = _.groupBy([1,2,10,20,100,200,-1], function(x) {

if (x >= 100) {

return 'A';

} else if (x >= 10) {

return 'B';

} else if (x >= 1) {

return 'C';

}

});

// _.shuffle用洗牌算法随机打乱一个集合

// _.sample随机选择一个或多个元素

# underscore为Array提供了许多工具类方法

// _.first(arr); _.last(arr);

// _.flatten接收一个array，无论它多少维，整成一维

// [1, 2, 3, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3]

_.flatten([ 1, [2, 3], 2, 3, [4, [5, 6, [7, 8]]], [1, 2, 3] ]);

// _.zip把两个或多个数组按索引对齐合并

// [['Adam', 85], ['Lisa', 92], ['Bart', 59]]

var names = ['Adam', 'Lisa', 'Bart'];

var scores = [85, 92, 59];

var rs = _.zip(names, scores);

// _.unzip则是反过来(但是它返回的不是多个数组，外层有一个大数组包裹)

// [['Adam', 'Lisa', 'Bart'], [85, 92, 59]]

_.unzip(rs);

// _.object(只接收两个参数)

_.object(names, scores); // {Adam: 85, Lisa: 92, Bart: 59}

// _.range

_.range(10); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

// _.bind

// 以下这种写法会报错

var log = console.log;

log('Hello, world!');

// 需要使用call，传入this

log.call(console, 'Hello world!');

// 使用_.bind可以直接绑定

var log = _.bind(console.log, console);

log('Hello, world!');

// _.partial(偏函数)

var pow2N = _.partial(Math.pow, 2); //pow2N(3);2的三次方=8 pow2N(4);2的四次方=16

var powN3 = _.partial(Math.pow, _, 3); //powN3(2);2的三次方(_是占位符) powN3(4);4的三次方=64

// _.memoize(有些开销大的函数可以用它缓存结果)

// 该函数一般配合递归调用使用，可以把每次递归的结果缓存

// _.once(保证某个函数只执行一次)

// _.delay(和setTimeout()效果一样)

_.delay(alert, 2000, 'param');

# underscore为Object提供了许多工具类方法

_.keys(obj); //返回对象所有的key，但不包括从原型链上继承下来的

_.allKeys(obj); //返回对象所有的key，包括从原型链上继承下来的

_.values(obj); //返回对象所有的值，但不包括从原型链上继承下来的

_.invert(obj); //把对象的key、value互换

// _.extend 如果有相同的key，后面的object的value将覆盖前面的object的value

var a = {name: 'Bob', age: 20};

// 返回并且a的内容也变成 {name: 'Bob', age: 88, city: 'Beijing'}

_.extend(a, {age: 15}, {age: 88, city: 'Beijing'});

// _.extendOwn与_extend类似，但获取属性时忽略从原型链继承下来的属性

_.clone(obj); //克隆对象，浅复制

# _.isEqual 比较对象和数组

// _.isEqual 对两个object进行深度比较，如果内容完全相同，则返回true

var o1 = { name: 'Bob', skills: { Java: 90, JavaScript: 99 }};

var o2 = { name: 'Bob', skills: { JavaScript: 99, Java: 90 }};

o1 === o2; // false

_.isEqual(o1, o2); // true

# 链式调用

// 因为每一步返回的都是包装对象，所有最后一步需要调用value方法获取值

_.chain([1, 4, 9, 16, 25])

.map(Math.sqrt)

.filter(x => x % 2 === 1)

.value();

jQuery

在 2016年9月7日上张贴由 BestLove

// jquery下载地址
http://jquery.com/download/
// 输出jquery版本
alert('jQuery版本：' + $.fn.jquery);
// jquery把所有功能封装在jQuery中，$是jQuery的别名
window.jQuery;      // jQuery(selector, context)
window.$;           // jQuery(selector, context)
$ === jQuery;       // true
typeof($);          // 'function'
// 如果$被占用，使用noConflict排除冲突
jQuery.noConflict();
// 根据id查找
var div = $('#abc');
// 根据标签查找
var ps = $('p');
// 根据class查找
var divs = $('.red');
// 根据属性查找
var texts = $('[type="text"]');
// 属性值以xxx开头
var icons = $('[name^="icon"]');
// 属性值以xxx结尾
var names = $('[name$=with]');
// 组合查找，定位更精确
$('input[name="email"]');
$('tr.red');
// 多项选择器，选择更广泛
$('p,div');
$('p.red,p.green');
// 层级选择器(p1包含在div1中)
$("div.div1 p.p1");
// 子选择器(跟层级选择器类似，但是div1和p1必须是父子关系，不能是爷孙关系)
$("div.div1>p.p1");
// 过滤器(一般不单独使用，附加在选择器上)
$('div1 p:first-child');
$('div1 p:last-child');
$('div1 p:nth-child(2)');           //选出第N个元素，N从1开始
$('div1 p:nth-child(even)');        //选出序号为偶数的元素
$('div1 p:nth-child(odd)');         //选出序号为奇数的元素
$('div:visible');
$('div:hidden');
// 表单相关
$(':input');                //input textarea select button
$(':file');
$(':checkbox');
$(':radio');
$(':focus');                //被选中的input
$(':checked');
$(':enabled');
$(':disabled');
// 查找和过滤
var ul = $('ul.lang');
var dy = ul.find('.dy');
var swf = ul.find('#swift');
var hsk = ul.find('[name=haskell]');
// 查找父节点
var parent = div1.parent("div.red");
// 同级节点查找
div1.next();
div1.next('name="zhangsan"');
div1.prev(".green");
// 过滤
var div = $('div');
div.filter('#div1');
div.filter(function(){
    // this指向DOM对象(不是jQuery) 返回S开头的节点
    return this.innerHTML.indexOf("s") === 0;
});
// map()将jquery对象包含的若干DOM转换成其他对象
div.map(function(){
    //假设有3个div，内容分别为 php javascript swift
    return this.innerHTML;
}).get();   //用get获取包含的string ['php','javascript','swift']
div.first();
div.last();
div.slice(1,2);
// 获取设置text、html
div1.text();
div2.html();
div1.text('php');
div2.html('javascript');
div.text('language');           //可以操作多个
// css
div.css('color');       //获取
div.css('background-color', '#ffd351').css('color', 'red');     //设置(驼峰不驼峰都行)
div.css('color', '');   //清除
// 操作class改变样式，优先级没有css高
div.hasClass('highlight');
div.addClass('highlight');
div.removeClass('highlight');
// 显示/隐藏
div.show();
div.hide();
// 浏览器可视窗口大小,需要加上<!DOCTYPE html>，否则可能解析后跟document无差别
$(window).width();
$(window).height();
// 整个HTML文档大小(一个页面高度不够显示整个上下文时，document.height>window.height）
$(document).width();
$(document).height();
// div的宽度和高度
div1.width();
div1.height();
div1.width(400);        //设置css宽度400px，是否生效要看css是否生效
div1.height('200px');   //设置css高度200px，是否生效要看css是否生效
// 获取、设置、删除属性
div.attr('name');
div.attr('name', 'zhangsan');
div.removeAttr();
// prop跟attr类似，但是有些情况下不同
radio.attr('checked');  //checked
radio.prop('checked');  //true
radio.is(':checked');    //true,当然还可以用is判断(同理 :selected)
// 添加DOM append添加到最后、prepend添加到最前
// 字符串
ul.append('<li><span>Haskell</span></li>');
// DOM对象，如果要添加的DOM节点已经存在于HTML中，会先删除后添加
var li1 = document.createElement('li');
li1.innerHTML = '<span>Haskell</span>';
ul.append(li1);
// jQuery对象
ul.append($("#li2"));
// 匿名函数，返回字符串或DOM对象或jQuery对象 function(index, html)
// 对一组节点进行添加时，可以传入函数差别处理
// before添加到指定节点前、after添加到指定节点后
$("#div1").after("<p>aaa</p>");
// 删除节点
li.remove();        //所有li节点全部删除
// 事件 x.on('eventName', function(e){...});
// 鼠标事件 click dblclick mouseenter mouseleave mousemove(e){e.pageX e.pageY} hover(mouseenter+mouseleave)
// 键盘事件 keydown keyup keypress
// 其他事件 focus blur change submit ready
// $(document).on('ready', function (){}); 通常简写为 $(function(){...});

// 取消事件绑定 x.off('eventName', 'functionName'); 
// 第2个参数只能函数名不能是匿名函数(匿名函数A!==匿名函数A) 或者不写第2个参数取消绑定所有指定事件

// 事件的触发总是由用户操作引发的，比如:通过JS修改了某个text的内容不会触发change监听
// 可以使用代码进行触发 text.change();相当于text.trigger('change'); form.submit();
// 有些敏感函数只能由用户触发，不能使用代码触发 如：window.open();

// 动画
div1.hide(3000);        //3秒内逐渐消失
div1.show('slow');      //慢慢显示 fast快快显示
div1.toggle('fast');    //根据当前状态决定是show还是hide
div1.slideUp(3000);     //show和hide是从左上角逐渐开或缩 slideUp slideDown slideToggle是垂直方向开或缩
div1.fadeIn(1000);      //淡入淡出 fadeIn fadeOut
// animate
div1.animate(
    {
        opacity: 0.25,                  //一些css变化
        width: '256px',
        height: '256px'
    },
    3000,                               //逐渐变化的总时间3秒
    function() {
        console.log('animate over');    //结束后的回调
    }
);
// 串行、暂停(delay)动画
div1.slideDown(2000).delay(1000).animate({...}, 2000).delay(400).animate({...},1000,function(){});
// 缓慢删除，需要回调，因为动画执行需要时间，直接调用remove()就没有动画效果了
div1.hide(2000, function(){$(this).remove()});
// AJAX 3.0以后版本移出了success,error等方法
// .ajax   .post .get .getJSON
$.ajax('url', {
    async:true,                                                         //默认true
    method:'post',                                                      //默认get
    //post请求的格式，也可以指定text/plain、application/json
    contentType:'application/x-www-form-urlencoded; charset=UTF-8',
    data:'发送的数据',                                                  //可以是字符串、数组、对象
    headers:{'Cache-Control':'no-cache'},                               //只能是对象
    //接收的数据类型html、xml、json、text，默认根据Content-Type猜测
    dataType:'json',
    jsonp: 'callback'                                                   //使用jsonp跨域
}).done(function(data) {
    ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function() {
    ajaxLog('请求完成: 无论成功或失败都会调用');
});
// 扩展(编写jquery插件)
$.fn.highlight1 = function(options) {
    // this已绑定为当前jQuery对象
    // 要考虑到各种情况 1.options为undefined 2.options只有部分key
    var bgcolor = options && options.backgroundColor || '#fffceb';
    var color = options && options.color || '#d85030';
    this.css('backgroundColor', bgcolor).css('color', color);
    return this;
};
// 上面这种做法用户不能设置默认值，每次都得动态传入(或者用写死的默认值)
//  $.extend把默认值和用户传入的options合并到对象{}中并返回
$.fn.highlight = function (options) {
    // 合并默认值和用户设定值
    var opts = $.extend({}, $.fn.highlight.defaults, options);
    this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
    return this;
}
// 设定默认值
$.fn.highlight.defaults = {
    color: '#d85030',
    backgroundColor: '#fff8de'
}
// 也可以这样设置
$.fn.highlight.defaults.color = 'red';

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

// jquery下载地址

http://jquery.com/download/

// 输出jquery版本

alert('jQuery版本：' + $.fn.jquery);

// jquery把所有功能封装在jQuery中，$是jQuery的别名

window.jQuery; // jQuery(selector, context)

window.$; // jQuery(selector, context)

$ === jQuery; // true

typeof($); // 'function'

// 如果$被占用，使用noConflict排除冲突

jQuery.noConflict();

// 根据id查找

var div = $('#abc');

// 根据标签查找

var ps = $('p');

// 根据class查找

var divs = $('.red');

// 根据属性查找

var texts = $('[type="text"]');

// 属性值以xxx开头

var icons = $('[name^="icon"]');

// 属性值以xxx结尾

var names = $('[name$=with]');

// 组合查找，定位更精确

$('input[name="email"]');

$('tr.red');

// 多项选择器，选择更广泛

$('p,div');

$('p.red,p.green');

// 层级选择器(p1包含在div1中)

$("div.div1 p.p1");

// 子选择器(跟层级选择器类似，但是div1和p1必须是父子关系，不能是爷孙关系)

$("div.div1>p.p1");

// 过滤器(一般不单独使用，附加在选择器上)

$('div1 p:first-child');

$('div1 p:last-child');

$('div1 p:nth-child(2)'); //选出第N个元素，N从1开始

$('div1 p:nth-child(even)'); //选出序号为偶数的元素

$('div1 p:nth-child(odd)'); //选出序号为奇数的元素

$('div:visible');

$('div:hidden');

// 表单相关

$(':input'); //input textarea select button

$(':file');

$(':checkbox');

$(':radio');

$(':focus'); //被选中的input

$(':checked');

$(':enabled');

$(':disabled');

// 查找和过滤

var ul = $('ul.lang');

var dy = ul.find('.dy');

var swf = ul.find('#swift');

var hsk = ul.find('[name=haskell]');

// 查找父节点

var parent = div1.parent("div.red");

// 同级节点查找

div1.next();

div1.next('name="zhangsan"');

div1.prev(".green");

// 过滤

var div = $('div');

div.filter('#div1');

div.filter(function(){

// this指向DOM对象(不是jQuery) 返回S开头的节点

return this.innerHTML.indexOf("s") === 0;

});

// map()将jquery对象包含的若干DOM转换成其他对象

div.map(function(){

//假设有3个div，内容分别为 php javascript swift

return this.innerHTML;

}).get(); //用get获取包含的string ['php','javascript','swift']

div.first();

div.last();

div.slice(1,2);

// 获取设置text、html

div1.text();

div2.html();

div1.text('php');

div2.html('javascript');

div.text('language'); //可以操作多个

// css

div.css('color'); //获取

div.css('background-color', '#ffd351').css('color', 'red'); //设置(驼峰不驼峰都行)

div.css('color', ''); //清除

// 操作class改变样式，优先级没有css高

div.hasClass('highlight');

div.addClass('highlight');

div.removeClass('highlight');

// 显示/隐藏

div.show();

div.hide();

// 浏览器可视窗口大小,需要加上<!DOCTYPE html>，否则可能解析后跟document无差别

$(window).width();

$(window).height();

// 整个HTML文档大小(一个页面高度不够显示整个上下文时，document.height>window.height）

$(document).width();

$(document).height();

// div的宽度和高度

div1.width();

div1.height();

div1.width(400); //设置css宽度400px，是否生效要看css是否生效

div1.height('200px'); //设置css高度200px，是否生效要看css是否生效

// 获取、设置、删除属性

div.attr('name');

div.attr('name', 'zhangsan');

div.removeAttr();

// prop跟attr类似，但是有些情况下不同

radio.attr('checked'); //checked

radio.prop('checked'); //true

radio.is(':checked'); //true,当然还可以用is判断(同理 :selected)

// 添加DOM append添加到最后、prepend添加到最前

// 字符串

ul.append('<li><span>Haskell</span></li>');

// DOM对象，如果要添加的DOM节点已经存在于HTML中，会先删除后添加

var li1 = document.createElement('li');

li1.innerHTML = '<span>Haskell</span>';

ul.append(li1);

// jQuery对象

ul.append($("#li2"));

// 匿名函数，返回字符串或DOM对象或jQuery对象 function(index, html)

// 对一组节点进行添加时，可以传入函数差别处理

// before添加到指定节点前、after添加到指定节点后

$("#div1").after("<p>aaa</p>");

// 删除节点

li.remove(); //所有li节点全部删除

// 事件 x.on('eventName', function(e){...});

// 鼠标事件 click dblclick mouseenter mouseleave mousemove(e){e.pageX e.pageY} hover(mouseenter+mouseleave)

// 键盘事件 keydown keyup keypress

// 其他事件 focus blur change submit ready

// $(document).on('ready', function (){}); 通常简写为 $(function(){...});

// 取消事件绑定 x.off('eventName', 'functionName');

// 第2个参数只能函数名不能是匿名函数(匿名函数A!==匿名函数A) 或者不写第2个参数取消绑定所有指定事件

// 事件的触发总是由用户操作引发的，比如:通过JS修改了某个text的内容不会触发change监听

// 可以使用代码进行触发 text.change();相当于text.trigger('change'); form.submit();

// 有些敏感函数只能由用户触发，不能使用代码触发如：window.open();

// 动画

div1.hide(3000); //3秒内逐渐消失

div1.show('slow'); //慢慢显示 fast快快显示

div1.toggle('fast'); //根据当前状态决定是show还是hide

div1.slideUp(3000); //show和hide是从左上角逐渐开或缩 slideUp slideDown slideToggle是垂直方向开或缩

div1.fadeIn(1000); //淡入淡出 fadeIn fadeOut

// animate

div1.animate(

{

opacity: 0.25, //一些css变化

width: '256px',

height: '256px'

3000, //逐渐变化的总时间3秒

function() {

console.log('animate over'); //结束后的回调

}

);

// 串行、暂停(delay)动画

div1.slideDown(2000).delay(1000).animate({...}, 2000).delay(400).animate({...},1000,function(){});

// 缓慢删除，需要回调，因为动画执行需要时间，直接调用remove()就没有动画效果了

div1.hide(2000, function(){$(this).remove()});

// AJAX 3.0以后版本移出了success,error等方法

// .ajax .post .get .getJSON

$.ajax('url', {

async:true, //默认true

method:'post', //默认get

//post请求的格式，也可以指定text/plain、application/json

contentType:'application/x-www-form-urlencoded; charset=UTF-8',

data:'发送的数据', //可以是字符串、数组、对象

headers:{'Cache-Control':'no-cache'}, //只能是对象

//接收的数据类型html、xml、json、text，默认根据Content-Type猜测

dataType:'json',

jsonp: 'callback' //使用jsonp跨域

}).done(function(data) {

ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));

}).fail(function (xhr, status) {

ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);

}).always(function() {

ajaxLog('请求完成: 无论成功或失败都会调用');

});

// 扩展(编写jquery插件)

$.fn.highlight1 = function(options) {

// this已绑定为当前jQuery对象

// 要考虑到各种情况 1.options为undefined 2.options只有部分key

var bgcolor = options && options.backgroundColor || '#fffceb';

var color = options && options.color || '#d85030';

this.css('backgroundColor', bgcolor).css('color', color);

return this;

};

// 上面这种做法用户不能设置默认值，每次都得动态传入(或者用写死的默认值)

// $.extend把默认值和用户传入的options合并到对象{}中并返回

$.fn.highlight = function (options) {

// 合并默认值和用户设定值

var opts = $.extend({}, $.fn.highlight.defaults, options);

this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);

return this;

}

// 设定默认值

$.fn.highlight.defaults = {

color: '#d85030',

backgroundColor: '#fff8de'

}

// 也可以这样设置

$.fn.highlight.defaults.color = 'red';

Promise

在 2016年9月6日上张贴由 BestLove

// "承诺将来会执行"的对象在JavaScript中称为Promise对象
// new Promise(function (resolve, reject) {});
// then回调resolve catch回调reject
// Math.random() * 2 < 1 会走then的回调，反之走catch的回调
<div id="test-promise-log">
    <p>Log:</p>
</div>
'use strict';
var logging = document.getElementById('test-promise-log');
function log(s) {
    var p = document.createElement('p');
    p.innerHTML = s;
    logging.appendChild(p);
}
var p = new Promise(function (resolve, reject) {
    var ran = Math.random() * 2;
    log('the random num is ' + ran);
    setTimeout(function(){
        if (ran < 1) {
            resolve('quick');
        } else {
            reject('slow');
        }
    }, ran * 1000);
});
p.then(function(data) {
    log('good:' + data);
}).catch(function(data) {
    log('bad:' + data);
});

// 若干异步任务，任务1完成->任务2完成->任务3... 任何一个点失败->异常处理
// job1.then(job2).then(job3).catch(handleError);
// job1、job2、job3...都是promise对象
// 5 * 5 -> 25 + 25 -> 50 * 50 -> 2500 + 2500 = 5000
function multiply(input) {
    return new Promise(function(resolve, reject) {
        log('calculating ' + input + ' x ' + input + '...');
        setTimeout(resolve, 500, input * input);
    }); 
}
function add(input) {
    return new Promise(function(resolve, reject){
        log('calculating ' + input + ' + ' + input + '...');
        setTimeout(resolve, 500, input + input);
    });
}
var p = new Promise(function(resolve, reject){
    log('start to calculat');
    resolve(5);
});
p.then(multiply)
 .then(add)
 .then(multiply)
 .then(add)
 .then(function(result) {
    log('result=' + result);
 });

// 除了串行执行若干异步任务外，Promise还可以并行执行异步任务
var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2，并在它们都完成后执行then
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});
// 有些时候，多个异步任务是为了容错，可以使用race获取先返回的结果
Promise.race([p1, p2]).then(function (result) {
    console.log(result);  // 'P1'
});

// "承诺将来会执行"的对象在JavaScript中称为Promise对象

// new Promise(function (resolve, reject) {});

// then回调resolve catch回调reject

// Math.random() * 2 < 1 会走then的回调，反之走catch的回调

</div>

'use strict';

var logging = document.getElementById('test-promise-log');

function log(s) {

var p = document.createElement('p');

p.innerHTML = s;

logging.appendChild(p);

}

var p = new Promise(function (resolve, reject) {

var ran = Math.random() * 2;

log('the random num is ' + ran);

setTimeout(function(){

if (ran < 1) {

resolve('quick');

} else {

reject('slow');

}

}, ran * 1000);

});

p.then(function(data) {

log('good:' + data);

}).catch(function(data) {

log('bad:' + data);

});

// 若干异步任务，任务1完成->任务2完成->任务3... 任何一个点失败->异常处理

// job1.then(job2).then(job3).catch(handleError);

// job1、job2、job3...都是promise对象

// 5 * 5 -> 25 + 25 -> 50 * 50 -> 2500 + 2500 = 5000

function multiply(input) {

return new Promise(function(resolve, reject) {

log('calculating ' + input + ' x ' + input + '...');

setTimeout(resolve, 500, input * input);

});

}

function add(input) {

return new Promise(function(resolve, reject){

log('calculating ' + input + ' + ' + input + '...');

setTimeout(resolve, 500, input + input);

});

}

var p = new Promise(function(resolve, reject){

log('start to calculat');

resolve(5);

});

p.then(multiply)

.then(add)

.then(multiply)

.then(add)

.then(function(result) {

log('result=' + result);

});

// 除了串行执行若干异步任务外，Promise还可以并行执行异步任务

var p1 = new Promise(function (resolve, reject) {

setTimeout(resolve, 500, 'P1');

});

var p2 = new Promise(function (resolve, reject) {

setTimeout(resolve, 600, 'P2');

});

// 同时执行p1和p2，并在它们都完成后执行then

Promise.all([p1, p2]).then(function (results) {

console.log(results); // 获得一个Array: ['P1', 'P2']

});

// 有些时候，多个异步任务是为了容错，可以使用race获取先返回的结果

Promise.race([p1, p2]).then(function (result) {

console.log(result); // 'P1'

});

浏览器操作、AJAX、跨域

在 2016年9月4日上张贴由 BestLove

# window对象不但充当全局作用域，而且表示浏览器窗口
// 获取浏览器窗口的内部宽度和高度(IE<=8不支持)
// 内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高
// 对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高
window.innerWidth;
window.innerHeigth;

# navigator
// navigator对象表示浏览器的信息，最常用的属性包括
navigator.appName                  //浏览器名称
navigator.appVersion               //浏览器版本
navigator.language                 //浏览器设置的语言
navigator.platform                 //操作系统类型
navigator.userAgent                //浏览器设定的User-Agent字符串
// navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的
// 所以不要使用下面这种判断方式
var width;
if (getIEVersion(navigator.userAgent) < 9) {
    width = document.body.clientWidth;
} else {
    width = window.innerWidth;
}
// 充分利用 || 和 undefined 来做浏览器兼容
var width = window.innerWidth || document.body.clientWidth;

# screen对象表示屏幕的信息，常用的属性有
screen.width                //屏幕宽度，以像素为单位
screen.height               //屏幕高度，以像素为单位
screen.colorDepth           //返回颜色位数，如8、16、24

# location
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.protocol;              // 'http'
location.host;                  // 'www.example.com'
location.port;                  // '8080'
location.pathname;              // '/path/index.html'
location.search;                // '?a=1&b=2'
location.hash;                  // 'TOP'
location.assign('/discuss');    // 加载一个新页面
location.reload();              // 重新加载

# document对象表示当前页面
// 由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点
document.title = '努力学习JavaScript!';
var div1 = document.getElementById('div1');     //定位唯一的一个DOM节点
div1.tagName;                                   //div
div1.children;                                  //所有直属子节点 .length获取节点数组长度
div1.parentElement;                             //父节点
div1.firstElementChild;                         //第一个子节点
div1.lastElementChild;                          //最后一个子节点
div1.innerHTML;
div1.innerText;
p.style.fontSize = '20px';                      //设置css样式，驼峰
document.getElementsByTagName('div');           //返回一组DOM节点
document.getElementsByClassName('class1');      //返回一组DOM节点
// 如果服务器设置cookie时使用httpOnly，那么cookie将不能被js读取
// 为了安全起见，建议服务器设置httpOnly
document.cookie;

# appendChild
/*  
    只是移动，并不是添加
    操作前：
    <div id="div2">bbbb</div>
    <div id="div1">aaaa</div>
    操作后：
    <div id="div1">aaaa
        <div id="div2">bbbb</div>
    </div>
*/
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.appendChild(div2);
// 添加
var div3 = document.createElement('div');
div3.id = 'div3';
div3.innerText = 'cccc';
div1.appendChild(div3);
// 添加样式
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerHTML = 'div { color: red }';
document.getElementsByTagName('head')[0].appendChild(s);
// 把newElement插入指定的referenceElement之前
parentElement.insertBefore(newElement, referenceElement);
// 在DOM树中删除子节点div2，其实还是保存在内存中，可以随时恢复removed
var removed = div1.removeChild(div2);

# 文件
// enctype="multipart/form-data" method="post"
// 或使用 HTML5 File API File和FileReader两个主要对象
<input type="file">

# AJAX(Asynchronous JavaScript and XML)
// 同源策略 域名要相同 协议要相同(http和https不同) 端口号要相同
var request;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {    //兼容低版本IE
    request = new ActiveXObject('Microsoft.XMLHTTP');
}

# 跨域
// JSONP 
// 服务端代理转发(如:/proxy?url=http://www.sina.com.cn)
/*
   CORS 需要浏览器支持HTML5并且服务端同意 Access-Control-Allow-Origin:你的域名或*
   包括GET、HEAD和POST
   POST的Content-Type类型仅限application/x-www-form-urlencoded、multipart/form-data和text/plain
   并且不能出现任何自定义头（例如，X-Custom: 12345）
   对于PUT、DELETE以及其他类型如application/json的POST请求
   在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）
   OPTIONS /path/to/resource HTTP/1.1
   Host: bar.com
   Origin: http://my.com
   Access-Control-Request-Method: POST
   服务器必须响应并明确指出允许的Method，符合要求才会发送，否则会抛出一个错误
   HTTP/1.1 200 OK
   Access-Control-Allow-Origin: http://my.com
   Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
   Access-Control-Max-Age: 86400
*/

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

# window对象不但充当全局作用域，而且表示浏览器窗口

// 获取浏览器窗口的内部宽度和高度(IE<=8不支持)

// 内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高

// 对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高

window.innerWidth;

window.innerHeigth;

# navigator

// navigator对象表示浏览器的信息，最常用的属性包括

navigator.appName //浏览器名称

navigator.appVersion //浏览器版本

navigator.language //浏览器设置的语言

navigator.platform //操作系统类型

navigator.userAgent //浏览器设定的User-Agent字符串

// navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的

// 所以不要使用下面这种判断方式

var width;

if (getIEVersion(navigator.userAgent) < 9) {

width = document.body.clientWidth;

} else {

width = window.innerWidth;

}

// 充分利用 || 和 undefined 来做浏览器兼容

var width = window.innerWidth || document.body.clientWidth;

# screen对象表示屏幕的信息，常用的属性有

screen.width //屏幕宽度，以像素为单位

screen.height //屏幕高度，以像素为单位

screen.colorDepth //返回颜色位数，如8、16、24

# location

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

location.protocol; // 'http'

location.host; // 'www.example.com'

location.port; // '8080'

location.pathname; // '/path/index.html'

location.search; // '?a=1&b=2'

location.hash; // 'TOP'

location.assign('/discuss'); // 加载一个新页面

location.reload(); // 重新加载

# document对象表示当前页面

// 由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点

document.title = '努力学习JavaScript!';

var div1 = document.getElementById('div1'); //定位唯一的一个DOM节点

div1.tagName; //div

div1.children; //所有直属子节点 .length获取节点数组长度

div1.parentElement; //父节点

div1.firstElementChild; //第一个子节点

div1.lastElementChild; //最后一个子节点

div1.innerHTML;

div1.innerText;

p.style.fontSize = '20px'; //设置css样式，驼峰

document.getElementsByTagName('div'); //返回一组DOM节点

document.getElementsByClassName('class1'); //返回一组DOM节点

// 如果服务器设置cookie时使用httpOnly，那么cookie将不能被js读取

// 为了安全起见，建议服务器设置httpOnly

document.cookie;

# appendChild

只是移动，并不是添加

操作前：

操作后：

<div id="div1">aaaa

</div>

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

div1.appendChild(div2);

// 添加

var div3 = document.createElement('div');

div3.id = 'div3';

div3.innerText = 'cccc';

div1.appendChild(div3);

// 添加样式

var s = document.createElement('style');

s.setAttribute('type', 'text/css');

s.innerHTML = 'div { color: red }';

document.getElementsByTagName('head')[0].appendChild(s);

// 把newElement插入指定的referenceElement之前

parentElement.insertBefore(newElement, referenceElement);

// 在DOM树中删除子节点div2，其实还是保存在内存中，可以随时恢复removed

var removed = div1.removeChild(div2);

# 文件

// enctype="multipart/form-data" method="post"

// 或使用 HTML5 File API File和FileReader两个主要对象

# AJAX(Asynchronous JavaScript and XML)

// 同源策略域名要相同协议要相同(http和https不同) 端口号要相同

var request;

if (window.XMLHttpRequest) {

request = new XMLHttpRequest();

} else { //兼容低版本IE

request = new ActiveXObject('Microsoft.XMLHTTP');

}

# 跨域

// JSONP

// 服务端代理转发(如:/proxy?url=http://www.sina.com.cn)

CORS 需要浏览器支持HTML5并且服务端同意 Access-Control-Allow-Origin:你的域名或*

包括GET、HEAD和POST

POST的Content-Type类型仅限application/x-www-form-urlencoded、multipart/form-data和text/plain

并且不能出现任何自定义头（例如，X-Custom: 12345）

对于PUT、DELETE以及其他类型如application/json的POST请求

在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）

OPTIONS /path/to/resource HTTP/1.1

Host: bar.com

Origin: http://my.com

Access-Control-Request-Method: POST

服务器必须响应并明确指出允许的Method，符合要求才会发送，否则会抛出一个错误

HTTP/1.1 200 OK

Access-Control-Allow-Origin: http://my.com

Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS

Access-Control-Max-Age: 86400

typeof、包装对象、Date、JSON

在 2016年9月4日上张贴由 BestLove

# typeof关键字
// number string boolean function undefined
typeof 123;                     // 'number'
typeof NaN;                     // 'number'
typeof 'str';                   // 'string'
typeof true;                    // 'boolean'
typeof undefined;               // 'undefined'
typeof Math.abs;                // 'function'
typeof null;                    // 'object'
typeof [];                      // 'object'
typeof {};                      // 'object'
// 判断是否是Array
Array.isArray(arr)
// 判断是否是null
myVar === null
// 判断某个全局变量是否存在
typeof window.myVar === 'undefined'
// 函数内部判断某个变量是否存在
typeof myVar === 'undefined'
// 任何对象都有toString()方法 除了null和undefined
// number使用toString()会报错，可以使用..或()
123..toString()             //'123'
(123).toString()            //'123'

# 包装对象
// 尽量不要去用包装对象，没撒卵用
// 如果没有加new关键字 Number() Boolean() String() 就是普通的强制转换函数
// 如parseInt() parseFloat() object.toString() 
var n = new Number(123);        // 123,生成了新的包装类型    object
var b = new Boolean(true);      // true,生成了新的包装类型   object
var s = new String('str');      // 'str',生成了新的包装类型  object

# Date对象
// Date获取的时间是根据客户端操作系统的时间来的，所以未必准确
var now = new Date();
now;                        // Sun Sep 04 2016 21:10:22 GMT+0800 (中国标准时间)
now.getFullYear();          // 2016, 年份
now.getMonth();             // 8, 月份，注意月份范围是0~11，8表示九月
now.getDate();              // 4, 表示4号
now.getDay();               // 0, 表示星期天
now.getHours();             // 21, 24小时制
now.getMinutes();           // 10, 分钟
now.getSeconds();           // 22, 秒
now.getMilliseconds();      // 13, 毫秒数
now.getTime();              // 1472994622013, 以number形式表示的时间戳
// 可以传入时间戳(精确到毫秒数)
var oneDay = new Date(1472994622013);

# JSON
var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};
// 第2个参数可以进行筛选和处理格式化后的json值，第3个参数指定缩进距离
JSON.stringify(xiaoming, null, '    ');
/*
    {
        "name": "小明",
        "age": 14
    }
*/
JSON.stringify(xiaoming, ['name', 'age'], '    ');
function convert(key, value) {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    if (key == 'skills') {
        return '';
    }
    return value;
}
/*
    {
      "name": "小明",
      "age": 14,
      "gender": true,
      "height": 1.65,
      "grade": null,
      "middle-school": "\"W3C\" MIDDLE SCHOOL",
      "skills": ""
    }
*/
JSON.stringify(xiaoming, convert, '  ');
// 如果我们还想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON()的方法
var xiaoming = {
    name: '小明',
    age: 14,
    gender: true,
    height: 1.65,
    grade: null,
    'middle-school': '\"W3C\" Middle School',
    skills: ['JavaScript', 'Java', 'Python', 'Lisp'],
    toJSON: function () {
        return { // 只输出name和age，并且改变了key
            'Name': this.name,
            'Age': this.age
        };
    }
};
// 反序列号JSON
JSON.parse('[1,2,3,true]');                   // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}');       // Object {name: '小明', age: 14}
JSON.parse('true');                           // true
JSON.parse('123.45');                         // 123.45
// 可以接收一个函数，用来转换解析出的属性
JSON.parse('{"name":"小明","age":14}', function (key, value) {
    if (key === 'name') {
        return value + '同学';
    }
    return value;
}); // Object {name: '小明同学', age: 14}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

# typeof关键字

// number string boolean function undefined

typeof 123; // 'number'

typeof NaN; // 'number'

typeof 'str'; // 'string'

typeof true; // 'boolean'

typeof undefined; // 'undefined'

typeof Math.abs; // 'function'

typeof null; // 'object'

typeof []; // 'object'

typeof {}; // 'object'

// 判断是否是Array

Array.isArray(arr)

// 判断是否是null

myVar === null

// 判断某个全局变量是否存在

typeof window.myVar === 'undefined'

// 函数内部判断某个变量是否存在

typeof myVar === 'undefined'

// 任何对象都有toString()方法除了null和undefined

// number使用toString()会报错，可以使用..或()

123..toString() //'123'

(123).toString() //'123'

# 包装对象

// 尽量不要去用包装对象，没撒卵用

// 如果没有加new关键字 Number() Boolean() String() 就是普通的强制转换函数

// 如parseInt() parseFloat() object.toString()

var n = new Number(123); // 123,生成了新的包装类型 object

var b = new Boolean(true); // true,生成了新的包装类型 object

var s = new String('str'); // 'str',生成了新的包装类型 object

# Date对象

// Date获取的时间是根据客户端操作系统的时间来的，所以未必准确

var now = new Date();

now; // Sun Sep 04 2016 21:10:22 GMT+0800 (中国标准时间)

now.getFullYear(); // 2016, 年份

now.getMonth(); // 8, 月份，注意月份范围是0~11，8表示九月

now.getDate(); // 4, 表示4号

now.getDay(); // 0, 表示星期天

now.getHours(); // 21, 24小时制

now.getMinutes(); // 10, 分钟

now.getSeconds(); // 22, 秒

now.getMilliseconds(); // 13, 毫秒数

now.getTime(); // 1472994622013, 以number形式表示的时间戳

// 可以传入时间戳(精确到毫秒数)

var oneDay = new Date(1472994622013);

# JSON

var xiaoming = {

age: 14,

gender: true,

height: 1.65,

grade: null,

'middle-school': '\"W3C\" Middle School',

skills: ['JavaScript', 'Java', 'Python', 'Lisp']

};

// 第2个参数可以进行筛选和处理格式化后的json值，第3个参数指定缩进距离

JSON.stringify(xiaoming, null, ' ');

{

"name": "小明",

"age": 14

}

JSON.stringify(xiaoming, ['name', 'age'], ' ');

function convert(key, value) {

if (typeof value === 'string') {

return value.toUpperCase();

}

if (key == 'skills') {

return '';

}

return value;

}

{

"name": "小明",

"age": 14,

"gender": true,

"height": 1.65,

"grade": null,

"middle-school": "\"W3C\" MIDDLE SCHOOL",

"skills": ""

}

JSON.stringify(xiaoming, convert, ' ');

// 如果我们还想要精确控制如何序列化小明，可以给xiaoming定义一个toJSON()的方法

var xiaoming = {

age: 14,

gender: true,

height: 1.65,

grade: null,

'middle-school': '\"W3C\" Middle School',

skills: ['JavaScript', 'Java', 'Python', 'Lisp'],

toJSON: function () {

return { // 只输出name和age，并且改变了key

'Name': this.name,

'Age': this.age

};

}

};

// 反序列号JSON

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]

JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}

JSON.parse('true'); // true

JSON.parse('123.45'); // 123.45

// 可以接收一个函数，用来转换解析出的属性

JSON.parse('{"name":"小明","age":14}', function (key, value) {

if (key === 'name') {

return value + '同学';

}

return value;

}); // Object {name: '小明同学', age: 14}

prototype原型、原型链、class

在 2016年9月4日上张贴由 BestLove

# 原型
// js中没有class的概念，所以需要使用prototype(原型)来模拟
// 把Studuent理解为一个抽象的class，但其实它就是个实例
var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};
var xiaoming = {
    name: '小明'
};
// 将小明的原型指向Student，看上去好像小明继承了Student
xiaoming.__proto__ = Student;
xiaoming.name;          // 小明
xiaoming.run();         // 小明 is running...

// 实际编写中，不要直接使用__proto__去改变一个对象的原型
function createStudent(name) {
    // 基于Student原型创建一个新对象:
    var s = Object.create(Student);
    // 初始化新对象:
    s.name = name;
    return s;
}
var xiaoming = createStudent('小明');
xiaoming.run();                         // 小明 is running...
xiaoming.__proto__ === Student;         // true

// JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。
// 当我们定义obj.xxx访问一个对象属性时，如果没找到，就会去它的原型对象上找
// 如果一直没找到，就会上溯到Object.prototype对象
// 如果还没有，就返回undefined，下面是arr的原型链例子(类似于php中的多重继承)
// arr ----> Array.prototype ----> Object.prototype ----> null

// 除了用{}创建对象外，还可以使用构造函数创建对象，这种写法更像class的写法了
// Student看上去就是一个普通函数，但是使用new关键字后，就变成了构造函数
// 它绑定的this指向新创建的对象，并默认返回this
function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}
// xiaoming -> Student.prototype -> Object.prototype -> null
var xiaoming = new Student('小明');
xiaoming.hello();

// 用new Student()创建的对象还从原型上获得了一个constructor属性，它指向函数Student本身：
xiaoming.constructor === Student.prototype.constructor;     // true
Student.prototype.constructor === Student;                  // true
Object.getPrototypeOf(xiaoming) === Student.prototype;      // true
xiaoming instanceof Student;                                // true

// 上面的写法其实还是有一些问题的，如果再创建小红、小张、小李...
// 都会创建各自的hello方法，这样太浪费内存了，可以让他们共享一个hello
function Student(name) {
    this.name = name;
}
Student.prototype.hello = function() {
   alert('Hello, ' + this.name + '!'); 
};

// 漏下new在strict模式下会报错，非strict模式下可以会造成意想不到的结果
// 所以规定构造函数首字母应该大写，一般函数首字母应该小写
// 这样使用jslint检查工具可以检测到漏下new关键字

// 一个常用的编程模式像这样，好处是可以不写new，而且参数比较灵活
// 可以不传参数，也可以分开传
function Student(props) {
    this.name = props.name || '匿名';     // 默认值为'匿名'
    this.grade = props.grade || 1;       // 默认值为1
}
Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};
function createStudent(props) {
    return new Student(props || {})
}
var xiaoming = createStudent({
    name: '小明'
});
xiaoming.grade;     // 1

# 原型继承
'use strict';
function Student(props) {
    this.name = props.name || 'Unnamed';
}
Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}
// PrimaryStudent构造函数
function PrimaryStudent(props) {
    // 在Student的构造函数中绑定this变量(调用父类构造函数)
    Student.call(this, props);
    this.grade = props.grade || 1;
}
// 调用了父类的构造函数不等于继承了父类，因为原型链没有改变
// new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null
// 利用空函数桥接，可以使得原型链变为如下
// new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null
function inherits(Child, Parent) {
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}
inherits(PrimaryStudent, Student);
// 继续在PrimaryStudent原型（就是new F()对象）上定义方法
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};
var xiaoming = new PrimaryStudent({
    name: '小明',
    grade: 2
});
// 验证
alert(xiaoming.__proto__ === PrimaryStudent.prototype); // true
alert(xiaoming.__proto__.__proto__ === Student.prototype); // true
alert(xiaoming instanceof PrimaryStudent); // true
alert(xiaoming instanceof Student); // true

# ES6新增了class关键字
// 有了class关键字，可以更方便地定义类和继承了
// 但是浏览器支持可能还不太好
// 可以试试Babel这个工具将class代码转换成prototypte代码
class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('Hello, ' + this.name + '!');
    }
}

class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

# 原型

// js中没有class的概念，所以需要使用prototype(原型)来模拟

// 把Studuent理解为一个抽象的class，但其实它就是个实例

var Student = {

height: 1.2,

run: function () {

console.log(this.name + ' is running...');

}

};

var xiaoming = {

};

// 将小明的原型指向Student，看上去好像小明继承了Student

xiaoming.__proto__ = Student;

xiaoming.name; // 小明

xiaoming.run(); // 小明 is running...

// 实际编写中，不要直接使用__proto__去改变一个对象的原型

function createStudent(name) {

// 基于Student原型创建一个新对象:

var s = Object.create(Student);

// 初始化新对象:

s.name = name;

return s;

}

var xiaoming = createStudent('小明');

xiaoming.run(); // 小明 is running...

xiaoming.__proto__ === Student; // true

// JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象。

// 当我们定义obj.xxx访问一个对象属性时，如果没找到，就会去它的原型对象上找

// 如果一直没找到，就会上溯到Object.prototype对象

// 如果还没有，就返回undefined，下面是arr的原型链例子(类似于php中的多重继承)

// arr ----> Array.prototype ----> Object.prototype ----> null

// 除了用{}创建对象外，还可以使用构造函数创建对象，这种写法更像class的写法了

// Student看上去就是一个普通函数，但是使用new关键字后，就变成了构造函数

// 它绑定的this指向新创建的对象，并默认返回this

function Student(name) {

this.name = name;

this.hello = function () {

alert('Hello, ' + this.name + '!');

}

// xiaoming -> Student.prototype -> Object.prototype -> null

var xiaoming = new Student('小明');

xiaoming.hello();

// 用new Student()创建的对象还从原型上获得了一个constructor属性，它指向函数Student本身：

xiaoming.constructor === Student.prototype.constructor; // true

Student.prototype.constructor === Student; // true

Object.getPrototypeOf(xiaoming) === Student.prototype; // true

xiaoming instanceof Student; // true

// 上面的写法其实还是有一些问题的，如果再创建小红、小张、小李...

// 都会创建各自的hello方法，这样太浪费内存了，可以让他们共享一个hello

function Student(name) {

this.name = name;

}

Student.prototype.hello = function() {

alert('Hello, ' + this.name + '!');

};

// 漏下new在strict模式下会报错，非strict模式下可以会造成意想不到的结果

// 所以规定构造函数首字母应该大写，一般函数首字母应该小写

// 这样使用jslint检查工具可以检测到漏下new关键字

// 一个常用的编程模式像这样，好处是可以不写new，而且参数比较灵活

// 可以不传参数，也可以分开传

function Student(props) {

this.name = props.name || '匿名'; // 默认值为'匿名'

this.grade = props.grade || 1; // 默认值为1

}

Student.prototype.hello = function () {

alert('Hello, ' + this.name + '!');

};

function createStudent(props) {

return new Student(props || {})

}

var xiaoming = createStudent({

});

xiaoming.grade; // 1

# 原型继承

'use strict';

function Student(props) {

this.name = props.name || 'Unnamed';

}

Student.prototype.hello = function () {

alert('Hello, ' + this.name + '!');

}

// PrimaryStudent构造函数

function PrimaryStudent(props) {

// 在Student的构造函数中绑定this变量(调用父类构造函数)

Student.call(this, props);

this.grade = props.grade || 1;

}

// 调用了父类的构造函数不等于继承了父类，因为原型链没有改变

// new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null

// 利用空函数桥接，可以使得原型链变为如下

// new PrimaryStudent() ----> PrimaryStudent.prototype ----> Student.prototype ----> Object.prototype ----> null

function inherits(Child, Parent) {

var F = function(){};

F.prototype = Parent.prototype;

Child.prototype = new F();

Child.prototype.constructor = Child;

}

inherits(PrimaryStudent, Student);

// 继续在PrimaryStudent原型（就是new F()对象）上定义方法

PrimaryStudent.prototype.getGrade = function () {

return this.grade;

};

var xiaoming = new PrimaryStudent({

grade: 2

});

// 验证

alert(xiaoming.__proto__ === PrimaryStudent.prototype); // true

alert(xiaoming.__proto__.__proto__ === Student.prototype); // true

alert(xiaoming instanceof PrimaryStudent); // true

alert(xiaoming instanceof Student); // true

# ES6新增了class关键字

// 有了class关键字，可以更方便地定义类和继承了

// 但是浏览器支持可能还不太好

// 可以试试Babel这个工具将class代码转换成prototypte代码

class Student {

constructor(name) {

this.name = name;

}

hello() {

alert('Hello, ' + this.name + '!');

}

class PrimaryStudent extends Student {

constructor(name, grade) {

super(name);

this.grade = grade;

}

myGrade() {

alert('I am at grade ' + this.grade);

}

唐晓锋–BLOG

This is just a personal note.

分类：javascript

underscore

jQuery

Promise

浏览器操作、AJAX、跨域

typeof、包装对象、Date、JSON

prototype原型、原型链、class