1.display:flex
1.1 flex:1涉及三个层面的设置
1) flex-grow 根据弹性盒子元素所设置的扩展因子作为比率来扩展空间
flex-grow:数值(2、3等)
2) flex-shrink 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间
flex-shrink 的默认值为1,即
flex-shrink:1
3) flex-basis 指定flex元素在主轴方向上的初始大小
flex-basis:18px(em)
flex-basis:auto
1.2 order 元素顺序
order 决定flex内的子元素的顺序
当调节转行或列的方向还不够时,这时候可以设置单个元素的order属性
元素order属性的默认值为0
注意:可以设置为正数或者负数
1.3 flex-flow简写
是flex-direction和flex-wrap两个一起使用时候的简写,两个值中间用空格隔开
代码书写:
flex-flow: <flex-direction> <flex-wrap>;
2.bind源码
this apply call bind
其中apply、call、bind都可以改变this的指向
判断this指向的代码
var name = "windowsName";
function a() {
var name = "Cherry";
console.log(this.name); // windowsName
console.log("inner:" + this); // inner: Window
}
a();
console.log("outer:" + this) // outer: Window
apply:传入的参数是包含多个参数的数组
call:传入的参数是若干个参数列表
bind:是创建一个新的函数
模拟bind源码
// 所有的函数都可以使用的属性
// function test(){} -> Function
// test.__proto__ -> Function.prototype
Function.prototype.newBind = function(target){
// 1.记录函数调用bind后 要改变的指向
target = target || window;
// 2. 保留调用newBind时 从下标1开始的传递的参数
var args = Array.prototype.slice.call(arguments,1);
// 3. 保留调用newBind的函数 a
var that = this;
return function f(){
// 4.将后续参数与第一次传递参数 拼接
var _args = args.concat([].slice.call(arguments));
// console.log(_args);
// console.log(that);
// 5. 如何判断当前函数f是否通过new调用
if(new.target){
// console.log(this);
// new 调用
that.apply(this,_args);
}else{
that.apply(target,_args);
}
}
}
//
var f = a.newBind(obj,10);
f(20); // this -> obj
new f(20); // this -> {}