Function.prototype.bind实现
JS中的call、apply、bind方法
thisObj的取值有以下4种情况：
（1） 不传，或者传null,undefined， 函数中的this指向window对象
（2） 传递另一个函数的函数名，函数中的this指向这个函数的引用
（3） 传递字符串、数值或布尔类型等基础类型，函数中的this指向其对应的包装对象，如 String、Number、Boolean
（4） 传递一个对象，函数中的this指向这个对象
Function.prototype.bind实现：Javascript中bind()方法的使用与实现
简单实现
Function.prototype.bind = function(context){
self = this; //保存this，即调用bind方法的目标函数
return function(){
return self.apply(context,arguments);
};
};
考虑到函数柯里化的情况，我们可以构建一个更加健壮的bind()
Function.prototype.bind = function(context){
var args = Array.prototype.slice.call(arguments, 1),
self = this;
return function(){
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
return self.apply(context,finalArgs);
};
};
基本包装类型
浅谈 javascript 中基本包装类型
为了便于操作基本类型值，ECMAScript 还提供了 3 个特殊的引用类型：Boolean、Number 和String。这些类型与本章介绍的其他引用类型相似，但同时也具有与各自的基本类型相应的特殊行为。实际上，每当读取一个基本类型值得时候，后台就会创建一个对应的基本包装类型的对象，从而让我们能够调用一些方法来操作这些数据。
var s1="some text";
var s2=s1.substring(2);
这个例子中的变量 s1 包含一个字符串，字符串当然是基本类型值，而下一行代码调用了 s1的 substring() 方法，并将返回的结果保存在了 s2 中。我们知道，基本类型值不是对象，因而从逻辑上讲它们不应该有方法（尽管如我们所愿，它们确实有方法）。其实，为了让我们实现这种直观的操作，后台已经自动完成了一系列的处理。当第二行代码访问 s1 时，访问过程处于一种读取模式，也就是呀从内存中读取这个字符串的值。而在读取模式中访问字符串时，后台都会自动完成下列处理。
- 创建 String 类型的一个实例；
- 在实例上调用指定的方法；
- 销毁这个实例。
可以将以上三个步骤想象成是执行了下列 ECMAScript 代码。
var s1=new String("some text");
var s2=s1.substring(2);
s1=null;
经过此番处理，基本的字符串值就变得跟对象一样了，而且，上面这三个步骤也分别适用于Boolean 和 Number 类型对应的布尔值和数字值。
引用类型与基本包装类型的主要区别就是对象的生存期。使用 new 操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象，则只存在于一行代码的执行瞬间，然后立即被销毁。这意味着我们不能再运行时为基本类型值添加属性和方法。
var s1="some text"
s1.color="red";
alert(s1.color);//undefined
试图为字符串s1添加一个 color 属性。但是，当第三行代码在此访问 s1时，其 color 属性不见了。问题的原因就是第二行创建的 String 对象在执行第三行代码时已经被销毁了。第三行代码又创建自己的 String 对象，而该对象没有 color 属性。
[1,2,3]<[1,2,4]//true
运算符
比较运算符可以比较各种类型的值，不仅仅是数值。
除了相等运算符号和精确相等运算符，其他比较运算符的算法如下。
如果两个运算子都是字符串，则按照字典顺序比较（实际上是比较Unicode码点）。
否则，将两个运算子都转成数值，再进行比较（等同于先调用Number函数）。
如果运算子是对象，必须先将其转为原始类型的值，即先调用valueOf方法，如果返回的还是对象，再接着调用toString方法。
两个对象之间的比较也是如此。
[2] > [1] // true
// 等同于 [2].valueOf().toString() > [2].valueOf().toString()
// 即 '2' > '1'
[2] > [11] // true
// 等同于 [2].valueOf().toString() > [11].valueOf().toString()
// 即 '2' < '11'
{x: 2} >= {x: 1} // true
// 等同于 {x: 2}.valueOf().toString() >= {x: 1}.valueOf().toString()
// 即 '[object Object]' >= '[object Object]'
再谈mobile web retina 下 1px 边框解决方案
本文实际上想说的是ios8下 1px解决方案。 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px，在iphone 6 plug 下，更显示成3px。由其影响美感。
再谈mobile web retina 下 1px 边框解决方案
JS生成随机的由字母数字组合的字符串
function randomString(len) {
len = len || 32;
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
var maxPos = $chars.length;
var pwd = '';
for (i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
arr.reduce()
var arr = [2,1,3];
var a = arr.reduce(function(a,b){
return Math.pow(a,b)
})
console.log(a);//8
详解CSS外部引用之link与@import的区别
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
*** 差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
*** 差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
*** 差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
*** 差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
大致就这几种差别了（如果还有什么差别，大家告诉我，我再补充上去），其它的都一样，从上面的分析来看，还是使用link标签比较好。
Bootstrap响应式栅格系统的设计原理
-
Bootstrap采取12列的栅格体系，根据主流设备的尺寸进行分段，每段宽度固定，通过百分比和媒体查询实现响应式布局。
-
Bootstrap划分了四种尺寸：超小屏（手机）、小屏（平板竖屏）、中屏（平板横屏）和大屏（PC），每一类中顶层包含块container的宽度都是固定的。还可以使用.container-fluid将固定宽度转换为连续的宽度（width=100%）。
-
所有列宽均设置为百分比，根本不考虑具体数值。
-
Bootstrap将所有列的position都设成了relative，就在于可对列进行定位或排序，比如要将某一个列定位到12分之3处（即从第三、四列交界处开始），可以设置left:25%或者right:75%。Bootstrap已经预设好了相应的类名：
列偏移的不同之处在于使用margin，而被margin挤占的区域没办法安放其它的列。
网友评论