您的位置：首页 > 其它

Block formatting context

2013-10-12 15:31 162 查看

不会JS中的OOP，你也太菜了吧！(第一篇)

一、你必须知道的

1)字面量

2)原型

3)原型链

4)构造函数

5)稳妥对象(没有公共属性，而且其方法也不引用this的对象。稳妥对象适合用在安全的环境中和防止数据被其它程序改变的时候)

二、开始创建对象吧

<1>:首先来看两种最基本的创建对象的方法

1>使用Object创建对象

varo=newObject();
o.sname='JChen___1';
o.showName=function(){
returnthis.sname;
}


2>使用对象字面量创建对象

varo={
name:'JChen___2',
getName:function(){
returnthis.name;
}
}


但是这两个方式有个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。

<2>接下来看看几种创建对象的模式吧

1>工厂模式

functioncreate(name){
varo=newObject();
o.name=name;
o.sayName=function(){
returnthis.name;
};
returno;
}
varp1=create('JChen___');


工厂模式也有一个缺点：就是没有解决对象识别的问题(即怎样知道一个对象的类型)。

2>构造函数模式

functioncreate2(name){
this.name=name;
this.sayName=function(){
returnthis.name;
};
//this.sayName=sayName;
}
//functionsayName(){returnthis.name};
varp1=newcreate2('JChen___4');


构造函数模式也有一个缺点：就是每个方法都要在每个实例上创建一遍。

当然我们可以用上面的两行注释掉了代码来屏蔽上面那个缺点。

但是……，我们又产生了一个新问题——全局变量。如果有很多方法，我们岂不是要定义很多个全局变量函数。这是个可怕的问题。

3>原型模式

1)普通方法

functioncreate3(){}
create3.prototype.name='JChen___5';
create3.prototype.sayName=function(){
returnthis.name;
};
varp1=newcreate3();


2)原型字面量方法——我姑且这么称吧

functioncreate3(){}
create3.prototype={
constructor:create3,//我们要设置它的constructor，如果它很重要
name:'JChen___5',
sayName:function(){
returnthis.name;
}
};
varp1=newcreate3();


原型的缺点：

1):不能传参

2):共享了变量

4>构造+原型(模式)

functioncreate4(name){
this.name=name;
}
create4.prototype.sayName=function(){
returnthis.name;
}
varp1=newcreate4('JChen___6');


这种模式是目前使用最广泛、认同度最高的一种创建自定义类型的方法。

5>动态原型模式

functioncreate5(name){
this.name=name;
if(typeofthis.sayName!='function'){
create5.prototype.sayName=function(){
returnthis.name;
}
}
}
varp1=newcreate5('JChen___7');


这种方法确实也是十分完美的一种方法。

6>寄生构造函数模式

functioncreate6(name){
varo=newObject();
o.name=name;
o.sayName=function(){
returnthis.name;
}
returno;
}
varp1=newcreate6('JChen___8');


注意那个returno。构造函数在不返回值的情况下，会返回新对象实例。而通过在构造函数的末尾加入return语句，可以重写调用构造函数时返回的值。

这个种用法可以用在，假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改Array的构造函数，因此可以使用这个模式。

functionspecialArray(){
varvalues=newArray();

values.push.apply(values,arguments);

values.join2=function(){
returnthis.join('|');
};

returnvalues;
}
varcolors=newspecialArray('red','blue','green');
colors.join2();//returned:red|blue|green


7>稳妥构造函数模式

稳妥构造函数遵循与寄生构造函数类似的模式，但是有两点不同：

一是新创建对象的实现方法不引用this

二是不使用new操作符调用构造函数。

functioncreate7(name){
varo=newObject();
varage=12;//私有变量
o.sayName=function(){//私有方法
returnname+''+age;
}
returno;
}
varp1=create7('JChen___9');


三、总结

对象(类)的创建方法大概就这9种了吧。

创建是没问题了，但是这是第一步，如何实现继承呢？且看下回分解。

Blockformattingcontext(块级格式化上下文)

今天看到豆瓣面试官的一篇文章，讲到关于CSS中的一个知识点：Blockformattingcontext，感觉这个确实挺有用，同时我也挺赞同作者的一些观点的，这里就不展开谈我的感受了，此文只聊聊技术。

1.什么是Blockformattingcontext？

　　BlockFormattingContext提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局，就是说处在于不同BlockFormattingContext环境中的元素是互不侵犯的。

2.Blockformattingcontext的触发条件？

therootelementorsomethingthatcontainsit

floats(elementswhere
float
isnot
none
)

absolutelypositionedelements(elementswhere
position
is
absolute
or
fixed
)

inline-blocks(elementswith
display
:inline-block
)

tablecells(elementswith
display
:table-cell
,whichisthedefaultforHTMLtablecells)

tablecaptions(elementswith
display
:table-caption
,whichisthedefaultforHTMLtablecaptions)

elementswhere
overflow
hasavalueotherthan
visible


flexboxes(elementswith
display
:flex
or
inline-flex
)

3.Blockformattingcontext有什么用？
BlockFormattingContext可以阻止边距折叠（margincollapsing）。我们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个BlockFormattingContext中。换句话说，在同一个布局环境中（BlockFormattingContext）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。　　

*{margin:0;padding:0}
body{width:100px;}
#one,#two{
float:left;/*去掉float:left上下div的之间的间距将折叠为10px*/
width:100px;
height:100px;
margin:10px;
}

#one{
background:red;
}
#two{
background:blue;
}

<divid="one"></div>
<divid="two"></div>


调试请猛戳这里

BlockFormattingContext可以包含内部元素的浮动。

<styletype="text/css">
html,body{
margin:0;
padding:0;
}
#red,#orange,#yellow,#green{
width:100px;
height:100px;
float:left;
}
#red{
background:red;
}
#orange{
background:orange;
}
#yellow{
background:yellow;
}
#green{
background:green;
}
</style>

<divid="c1">
<divid="red"></div>
<divid="orange"></div>
</div>
<divid="c2">
<divid="yellow"></div>
<divid="green"></div>
</div>


在上面的代码本意是做一个两行两列的布局，但是由于#red,#orange,#yellow,#green这四个div同在一个布局环境中，即便通过#c1,#c2这两个div划分，浮动之后它们还会一个接着一个排列，并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中，从而闭合浮动。通过上面的分析，让#c1形成新的BlockFormattingContext就可以解决问题。

调试请猛戳这里

BlockFormattingContext可以阻止元素被浮动覆盖

这个就是上面提到的豆瓣的面试官用到的一个特性，我们来看一个实例：

<!DOCTYPEhtml>
<html>
<head>
<title>Demo</title>
<styletype="text/css">
html,body{
margin:0;
padding:0;
}
#left{
width:100px;
height:100px;
background:red;
float:left;
}
#right{
overflow:hidden;
height:200px;
background:yellow;
}
</style>
</head>
<body>
<divid="left"></div>
<divid="right"></div>
</body>
</html>


调试请猛戳这里

知道这个特性之后再来看豆瓣面试官的demo就清楚为什么会这样了！

=======================================

参考资料：

Blockformattingcontext


白话BlockFormattingContext
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航