Block formatting context
不会JS中的OOP,你也太菜了吧!(第一篇)
一、你必须知道的
1) 字面量
2) 原型
3) 原型链
4) 构造函数
5) 稳妥对象(没有公共属性,而且其方法也不引用this的对象。稳妥对象适合用在安全的环境中和防止数据被其它程序改变的时候)
二、开始创建对象吧
<1>: 首先来看两种最基本的创建对象的方法
1> 使用Object创建对象
var o = new Object();
o.sname = 'JChen___1';
o.showName = function(){
return this.sname;
}
2> 使用对象字面量创建对象
var o = {
name: 'JChen___2',
getName: function(){
return this.name;
}
}
但是这两个方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码。
<2> 接下来看看几种创建对象的模式吧
1>工厂模式
function create(name){
var o = new Object();
o.name = name;
o.sayName = function(){
return this.name;
};
return o;
}
var p1 = create('JChen___');
工厂模式也有一个缺点:就是没有解决对象识别的问题(即怎样知道一个对象的类型)。
2> 构造函数模式
function create2(name){
this.name = name;
this.sayName = function(){
return this.name;
};
//this.sayName = sayName;
}
//function sayName(){ return this.name};
var p1 = new create2('JChen___4');
构造函数模式也有一个缺点:就是每个方法都要在每个实例上创建一遍。
当然我们可以用上面的两行注释掉了代码来屏蔽上面那个缺点。
但是……,我们又产生了一个新问题——全局变量。如果有很多方法,我们岂不是要定义很多个全局变量函数。这是个可怕的问题。
3> 原型模式
1) 普通方法
function create3(){}
create3.prototype.name = 'JChen___5';
create3.prototype.sayName = function(){
return this.name;
};
var p1 = new create3();
2) 原型字面量方法——我姑且这么称吧
function create3(){}
create3.prototype = {
constructor: create3, //我们要设置它的constructor,如果它很重要
name: 'JChen___5',
sayName: function(){
return this.name;
}
};
var p1 = new create3();
原型的缺点:
1): 不能传参
2): 共享了变量
4> 构造+原型(模式)
function create4(name){
this.name = name;
}
create4.prototype.sayName = function(){
return this.name;
}
var p1 = new create4('JChen___6');
这种模式是目前使用最广泛、认同度最高的一种创建自定义类型的方法。
5> 动态原型模式
function create5(name){
this.name = name;
if(typeof this.sayName != 'function'){
create5.prototype.sayName = function(){
return this.name;
}
}
}
var p1 = new create5('JChen___7');
这种方法确实也是十分完美的一种方法。
6> 寄生构造函数模式
function create6(name){
var o = new Object();
o.name = name;
o.sayName = function(){
return this.name;
}
return o;
}
var p1 = new create6('JChen___8');
注意那个return o。构造函数在不返回值的情况下,会返回新对象实例。而通过在构造函数的末尾加入return 语句,可以重写调用构造函数时返回的值。
这个种用法可以用在,假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改Array的构造函数,因此可以使用这个模式。
function specialArray(){
var values = new Array(); values.push.apply(values, arguments); values.join2 = function(){
return this.join('|');
}; return values;
}
var colors = new specialArray('red', 'blue', 'green');
colors.join2();//returned: red|blue|green
7>稳妥构造函数模式
稳妥构造函数遵循与寄生构造函数类似的模式,但是有两点不同:
一是新创建对象的实现方法不引用this
二是不使用new操作符调用构造函数。
function create7(name){
var o = new Object();
var age = 12; //私有变量
o.sayName = function(){ //私有方法
return name + ' ' + age;
}
return o;
}
var p1 = create7('JChen___9');
三、总结
对象(类)的创建方法大概就这9种了吧。
创建是没问题了,但是这是第一步,如何实现继承呢?且看下回分解。
Block formatting context(块级格式化上下文)
今天看到豆瓣面试官的一篇文章,讲到关于CSS中的一个知识点:Block formatting context ,感觉这个确实挺有用,同时我也挺赞同作者的一些观点的,这里就不展开谈我的感受了, 此文只聊聊技术。
1.什么是Block formatting context?
Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局,就是说处在于不同Block Formatting Context环境中的元素是互不侵犯的。
2.Block formatting context的触发条件?
- the root element or something that contains it
- floats (elements where
float
is notnone
) - absolutely positioned elements (elements where
position
isabsolute
orfixed
) - inline-blocks (elements with
display
: inline-block
) - table cells (elements with
display
: table-cell
, which is the default for HTML table cells) - table captions (elements with
display
: table-caption
, which is the default for HTML table captions) - elements where
overflow
has a value other thanvisible
- flex boxes (elements with
display
: flex
orinline-flex
)
3.Block formatting context有什么用?
Block Formatting Context可以阻止边距折叠(margin collapsing)。我们知道在一般情况下,两个上下相邻的盒子会折叠它们垂直方向接触到的边距,这种情况只会发生在同一个Block Formatting Context中。换句话说,在同一个布局环境中(Block Formatting Context)是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因(当然还有很多种情况也不会折叠)。
*{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;
} <div id="one"></div>
<div id="two"></div>
调试请猛戳这里
- Block Formatting Context可以包含内部元素的浮动。
<style type="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> <div id="c1">
<div id="red"></div>
<div id="orange"></div>
</div>
<div id="c2">
<div id="yellow"></div>
<div id="green"></div>
</div>
在上面的代码本意是做一个两行两列的布局,但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中,即便通过#c1, #c2这两个div划分,浮动之后它们还会一个接着一个排列,并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中,从而闭合浮动。通过上面的分析,让#c1形成新的Block Formatting Context就可以解决问题。
调试请猛戳这里
- Block Formatting Context可以阻止元素被浮动覆盖
这个就是上面提到的豆瓣的面试官用到的一个特性,我们来看一个实例:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="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>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
调试请猛戳这里
知道这个特性之后再来看豆瓣面试官的demo就清楚为什么会这样了!
=======================================
参考资料:Block formatting context的更多相关文章
- Block formatting context(块级格式化上下文)
今天看到豆瓣面试官的一篇文章,讲到关于CSS中的一个知识点:Block formatting context ,感觉这个确实挺有用,同时我也挺赞同作者的一些观点的,这里就不展开谈我的感受了, 此文只 ...
- 块级格式化上下文(block formatting context)
在CSS2.1中,有三种定位方案--普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素 ...
- 【转】关于Block Formatting Context--BFC和IE的hasLayout
转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS ...
- 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解
CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...
- 浅入“Block Formatting Context”
本文主要是针对BFC特性的应用,至于什么是BFC,可以参看MDN的简介: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_fo ...
- 关于Block Formatting Context--BFC和IE的hasLayout
转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...
- css Block formatting context BFC
w3c关于BFC解释: http://www.w3.org/TR/CSS21/visuren.html#block-formatting Mdn描述: A block formatting conte ...
- CSS BFC(Block Formatting Context)
BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...
- 什么是BFC(Block Formatting Context)
原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatt ...
随机推荐
- bigdata_hadoop集群配置_内存分配
haoop集群 做好内存管理跟重要,不然经常会给抛出个 OutMemory ,内存溢出 以horntonworks给出推荐配置为样本,给出一种常见的Hadoop集群上各组件的内存分配方案.配置时 ...
- 运行时间(Java版本)—转换毫秒到时分秒日期
第一种方式: import java.util.Calendar; import java.util.TimeZone; public class Test { /** * 将毫秒转换为年月日时分秒 ...
- paramiko socket.error: Int or String expected
paramiko socket.error: Int or String expected paramiko的环境: Python 2.6.6 paramiko==1.14.0 正常的paramiko ...
- oracle_利用闪回功能恢复数据
方便起见一般:执行如下即可不用往下看: ① 启用行移动功能 alter table tbl_a enable row movement; ② 闪回表数据到某个时间点 flashback table t ...
- php_常用操作_读取文件_数据库操作
作为php新手 ,把经常用到的phpcode,做个备份 1: 文件处理 //读取配置 启动是指定文件 $filepath=$argv[1]; if(null==$filepath){ echo&quo ...
- UIDocumentInteractionController 文件预览
//创建并从底部弹出来 - (void)viewDidLoad { [super viewDidLoad]; [self setupDocumentControllerWithURL:fileURL] ...
- IOS SDK相机的详细解释/画廊(默认+他们的高清摄像头接口)
原版的blog,转载请注明出处 blog.csdn.net/hello_hwc 前言: 新NSURLSession的UploadTask的,结果写那个Demo的时候想要写成拍照上传.然后就想到先写一个 ...
- MAC 命令行工具(Command Line Tools)安装
不过升级后安装命令行工具(Command Line Tools)时发现官网没有clt的下载安装包了,原来改了,使用命令在线安装. 打开终端,输入命令:xcode-select --install 选择 ...
- Go as continuous delivery tool for .NET
http://simon-says-architecture.com/2014/02/28/go-as-continuous-delivery-tool-for-net/ Following my p ...
- LeetCode——Spiral Matrix
Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...