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挤占的区域没办法安放其它的列。