YouGuess

2018-03-10T06:08:29.417Z

title: js中的页面间通信
date: 2016-8-10
tag: javascript

js中的页面间通信

本来准备找实习了，由于暑假回家学车，学完后回不去学校，(⊙﹏⊙)。
一些找前端实习的小伙伴都被问到了页面间通讯的问题，所以做了一点了解。
页面间通信涉及到跨域与不跨域，不跨域的通信比较简单,而跨域通信的方法也有,不过每一种也都有限制。

不跨域的通信

1.1 iframe嵌套

有些页面会通过iframe标签嵌套页面，嵌套页面即作为子页面。父与子页面之间的通信很简单。

                                                            这里是getMessage.html

代码:

在父页面中的input中输入内容,点击发送,在子页面中就会显示对应内容。
当然,如果父页面中存在多个iframe,只需通过window.frame找到对应的ifrmae,如上传递内容就可以了。

1.2 跨标签页通信 window.open

有时候,当在一个页面中点击链接，打开了一个新的页面，两个页面在相同的域下，可以实现标签页之间的通讯.

                        点击

代码:

当在postMessage.html页面里点击链接,通过window.open方法打开一个新的页面,如父子页面满足”同源策略”则该方法会返回创建窗口的window对象的引用。getMessage.html添加侦听load事件,通过window.opener获取创建该窗口的window对象的引用,通过该引用可以控制该页面里元素。

关于window.open()和window.opener()参见MDN的window.open和window.opener。

跨域通信

有时候我们希望能够在不同的域名之间传递数据,但由于浏览器的“同源策略”,不同域之间的通信只能通过一些技巧来实现。以下是对是否是同源情况的判断:

编号
URL
说明
是否允许通信

1
http://www.a.com/a.js
http://www.a.com/b.js
同一域名下
允许

2
http://www.a.com/a/a.js
http://www.a.com/b/b.js
同一域名下不同文件夹
允许

3
http://www.a.com:8000/a.js
http://www.a.com/b.js
同一域名，不同端口
不允许

4
http://www.a.com/a.js
https://www.a.com/b.js
同一域名，不同协议
不允许

5
http://www.a.com/a.js
http://127.0.0.1/b.js
域名和域名对应ip
不允许

6
http://www.a.com/a.js
http://will.a.com/b.js
主域相同，子域不同
不允许

7
http://www.a.com/a.js
http://a.com/b.js
同一域名，不同二级域名（同上）
不允许（cookie这种情况下也不允许访问）

8
http://www.a.com/a.js
http://www.b.com/b.js
不同域名
不允许

一般跨域传递数据有3种方法,jsonp、document.domain、window.name来实现。不过，这三种方法都有各自的限制。

####2.1 jsonp实现
jsonp全称是”json padding”，json想必已经很清楚了,如果忘了就点击自己重新复习吧。JSONP是一种使用JSON数据的方式，返回的不是JSON对象，是包含JSON对象的javaScript脚本。
由于常规使用XMLHttpRequest请求只允许同域下的资源,但是script标签加载js文件却可以跨域加载，比如img标签也可以。通过使用script标签来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递 javascript对象。即在跨域的服务端生成JSON数据，然后包装成script脚本回传，就不用突破同源策略的限制，解决了跨域访问的问题。

服务器端的响应代码:

'这是请求的数据'    );    echo $req."(json_encode($data))";?>

这其实就是JSONP的简单实现。客户端创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。即将服务器的json数据填充(padding)作为回调函数的参数。
jsonp方式跨域也有缺陷,首先只能是通过GET方式请求数据,若操作成功,就顺利执行。出现失败则不会有提示,例如不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。当然超时后就不用管他了。同时也需要服务器相应的配合,处理请求才行。

####2.2 document.domain
每一个页面都有document.domain属性,调用这个属性,返回当前文档的域名。也可以对该属性进行赋值，不过值必须是包含基础域名的值(必须属于同一个基础域名!而且所用的协议，端口都要一致)。
例如：

//http://willing.a.com/a.html与http://will.a.com/b.html//a.html                            //b.html

两个页面处于同一个基础域名下不同子域名下,他们之间js跨域(子域)相互调用，需要在head标签中显式设置同一基础域名,否则会失败。
通过这种方式，可以实现跨子域的数据传递，而无法实现跨基础域名的数据传递。
另外,Html5的localStorage也可以通过设置document.domain实现跨子域的数据传递。

####2.3 window.name
每个标签在打开的时候都会存在window.name属性,若没有设置一般为空。window.open函数调用时传递的第二参数即为指定创建窗口的name值。
浏览器中当一个标签页打开到关闭之间,window.name的值不变,即使在期间访问了不同域名的网站,name值都是空或手动设置的值。在浏览器控制台输入代码:

window.name = 'YouGuess';location.href = 'http://www.qq.com';

在一个页面中通过iframe嵌入的跨域页面,也可以实现跨域传值,不过该值的大小有所限制(大约2M)。

代码：

当在iframe中的页面设置好name的值,点击父页面的按键,即可显示子页面的name属性。

###3. HTML5的postMessage
HTML5提供了postMessage方法，该方法既可以跨域通信也可以用来不跨域的通信，不过在IE中目前只支持IE8+，其他浏览器基本全面支持。

otherWindow.postMessage(data,origin)
-targetSrc指目标窗口或iframe
-data指要传递的数据，html5规范可以使js的任意基本类型和可复制对象(ie8、9除外)
-origin指明目标窗口的源(协议+主机+端口号[+URL]，URL会被忽略，所以可以不写)定和当前窗口同源的话设置为”/“,若”*”则代表任何页面。

Vue组件的data的函数

2018-03-09T16:00:00.000Z

Vue组件的data的函数

在使用vue开发时，data通常都是一个Object。而在创建Vue组件时，官文文档要求data必须是一个函数，并推荐以下形式：

    data(){        return {}    }

开始不是很明白，官方给了例子。说实话因为自己反应比较慢，开始没怎么理解意思。后面看了别人的分析才明白。

其实官方例子的意思是：Vue组件中，如果data是一个对象，多个组件在使用时，就相当于引用了同一个data对象，这样的话组件之间数据就会共享，并会相互影响。而当我们通过函数返回一个对象，这样组件之间数据是有各自作用域，而不会相互影响。而尤大这样做，也是因为js语言自己的问题。

js的继承

Vue组件的使用，是需要通过Vue组件实例的Component进行注册。在注册后，自定义组件对象会被构造成Vue组件。而在相同的Vue中注册的组件，他们被相同的构造器构造，继承的特性也一样。js的继承是原型继承，不同的实例继承相同的对象，那不同实例之间继承的属性就会共享，一个修改另一个也被修改。


let Component = function(){}
Component.prototype.data = {}

let cp1 = new Component(),
cp2 = new Component()

cp1.data === cp2.data // true

此时,cp1和cp2内部的data就是共用的。
而当使用函数时,原型上的data是函数，并将各自的实际data对象赋予实例对象。


let Component = function(obj){
    // 对需要构造的组件对象进行处理
    this.data = obj.data()
}
Component.prototype.data = function(){
    return {}
}

let cp1 = new Component({ data: function(){ return {} } }),
cp2 = new Component({ data: function(){ return {} } })

cp1.data === cp2.data // false

这样不同的实例data引用不同，不会共享。
Vue的data原文

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

转盘的简单实现

2018-02-24T16:00:00.000Z

转盘的简单实现

通过代码实现抽奖的转盘，使用html、css、js实现(并未使用canvas)。参考例子：JS写的一个抽奖小Demo从普通写法到设计模式再向ES6的进阶路程。

实现

样式实现

ul是转盘部分，将转盘划分成12份。pointer则是点击转动部分。主要的html结构如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    开始抽奖
    
实现的效果如图：

ul相对定位后，li设为绝对定位。li样式使用border做成三角形，父元素设置overflow: hidden。然后再对每个li进行rotate变换就可以实现如图的形状。再将开始按钮放置到中间盖住中心部分，就实现如图的整体效果。

转盘转动实现

其实在点击的时候，就已经确定好指针要指向的部分。转盘分为12份，则随机一个1-12的数，每一部分在圆中所占据的角度是30°。例如：第一部分(1)占据了345-15°，则12占据了16-45°…以此类推。
因为要制作一个转动的过程，所以需要再随机一个数，这个数就代表要转的圈数，圈数乘上360，加上选中的数所在的度数，即

转盘转动的总度数 = 圈数 * 360° + 度数

但由于每一部分占据的是一个范围，所以指针最后所在的区间范围(以12为例)：

max度数 = 圈数 360° + 45°
min度数 = 圈数 360° + 16°

这里肯可能有疑问：12在圆中为什么是16-45°，而不是316-345°。原因是：转盘是按顺时针方向进行转动的，所以当转盘转动时，1过后指针指向的是12、11、10、9…。所以在计算对应位置时，是按1、12、11…的顺序进行的。同时由于1占据345-15°这样一个范围，为了方便计算，我们将其范围设为-16-15°。同时，为了避免指针在转动结束时指向两个部分的交界处，显示不明显，所以我们在左右各设置一个缓冲区，让指针最后不会停留在缓冲区。如图：

指针最后只会落在红线之间。

为了转盘在开始转动和结束时带有速度递增与递减的效果，需要设置一个加速度、减速度，还要计算出在减速过程中所需要转过的度数，得到开始减速的度数

min度数 - 减速过程中转过的度数 = 开始减速的度数

数据预处理的逻辑如下：
>
function prepareData(number){
// 默认12格
number ? ‘’ : number = 12;
let everyDeg = 360 / number,
bufferDeg = 8, // 左右各缓冲4deg
numbersDeg = [];
// 每格所占的度数
let initCount = (everyDeg-bufferDeg)/2;

    numbersDeg[1] = [-initCount , initCount];    for(let i=number ; i >= 2 ; i--){        numbersDeg[i+''] = [initCount+bufferDeg+1 , initCount+everyDeg];        initCount += everyDeg;    }    let randomValue = Math.floor(Math.random()*number)+1, // 随机被选中的数        rotateCount = Math.floor(Math.random()*3)+6, // 旋转6-8圈        maxStep = Math.floor(Math.random()*3)+6, // 最大转速为6-8(deg)        stepPlus = 0.05, // 转动的加速度        stepLess = 0.02, // 转动的减速度        step = 0, // 初始变化的角度        initDeg = 0; // 初始转过角度    let totalDeg = rotateCount * 360,        maxDeg = totalDeg + numbersDeg[randomValue][1],        minDeg = totalDeg + numbersDeg[randomValue][0],        // 每次变化的角度在衰减过程中是等差数列，则在衰减过程中会转过的度数之和        // 公式 ((startStep + maxStep) * n) / 2        restDeg = (maxStep * (maxStep / stepLess)) /2;    return {        result: randomValue,        maxDeg: maxDeg,        minDeg: minDeg,        maxStep: maxStep,        step: 0,        initDeg: 0,        stepPlus: stepPlus,         stepLess: stepLess,         restDeg: restDeg,        rotateState: 'stop' // 当前转盘状态['plus','less','stop']     };}

开始抽奖，通过js代码改变转盘的rotate度数，就可以实现转盘的转动。不过还要考虑加速、减速、停止。

function rotate(){    turntable.style.transform = "rotateZ("+data.initDeg+"deg)";    // 计算下一次转盘的度数    data.initDeg += data.step;

    // 加速    if(data.step < data.maxStep && data.rotateState == 'plus'){        data.step += data.stepPlus;    }    // 减速    else if(data.initDeg >= data.minDeg - data.restDeg){        data.step -= data.stepLess;        data.rotateState = 'less';    }    if(data.initDeg >= data.minDeg && data.initDeg <= data.maxDeg && data.step < 0){        alert(data.result);        resetTurntable();        console.log(`step: ${data.step}, deg: ${data.initDeg}`);    }else{        window.requestAnimationFrame(rotate);    }}

以上便是一个转盘实现的大致逻辑与代码。最后转动的效果如图：

es6函数参数

2017-11-16T16:00:00.000Z

在阮一峰的《es6入门》中，关于函数参数存在默认值时，有如下的代码

// 代码1var x = 1;function foo(x, y = function() { x = 2; }) {  var x = 3;  y();  console.log(x);}foo() // 3x // 1

这里按理说开始以为y内部的x指向的是外部环境下的x,即x=1。然而实际却不是。这是作用域的原因。在es6标准标准中，关于函数参数预设值的实现：>看规范9.2.12 FunctionDeclarationInstantiation部分 If default value parameter initializers exist, a second Environment Record is created for the body declarations. 步骤 27Else, 1.NOTE A separate Environment Record is needed to ensure that closures created by expressions in the formal parameter list do not have visibility of declarations in the function body. 2.Let varEnv be NewDeclarativeEnvironment(env). 3.Let varEnvRec be varEnv's EnvironmentRecord.大致意思就是在函数的参数存在预设值的时候，会创建一个独立的作用域，整个参数部分都会包含其中。若不存在预设值，则不会创建参数的作用域。

// 代码2let foo = 'outer';function bar(func = () => foo) {  let foo = 'inner';  console.log(func());}bar(); // outer

在上面这种情况下，func = () => foo。由于func内并没有定义foo，在调用func时func会沿着作用域链在外部环境中找foo，所以func()返回outer。而在代码1中，函数参数的作用域中，存在定义的变量x，故foo()执行时，接收赋值的变量是参数作用域中的x而不是foo函数体内定义的x变量。回到代码1中，函数参数所在的作用域和函数内部的作用域相互独立，所以实际上存在3个变量x。

// 代码3var x = 1;function foo(x=2, y = function(){ console.log(x); }) {  var x = 3;  y();  console.log(x);}foo() // 2       // 3x;    // 1

还有一个问题是关于作用域。js中，作用域是静态(词法)作用域，即函数和变量的作用域在它们被定义的时候就已经决定了。


// 代码4
var x = 1;
function outer(){
    console.log(x);
}
function foo() {
  var x = 3;
  var f1 = function(){
      return x;
  }

outer();
return f1;
}
var func = foo(); // 1
func(); // 3

当一个函数内输出或返回一个变量值时，会现在函数内部查找对应的变量，存在即返回。若不存在，则会通过保存的作用域链向外部作用域查找。由于js是静态作用域，所以outer无论在哪儿调用，输出的都是全局作用域下的x(1),f1函数返回的则是foo函数内部定义的x(3)。如果是动态作用域，则outer应该输出3。

参考：
ES6中函数参数默认值为函数的问题？

Viewport

2017-11-16T16:00:00.000Z

Viewport学习记录

在开发移动端项目时，以前都只知道在head中添加以下代码就可以使得在web的页面在移动端也显示的相对好看点，但具体不是很清楚原理。

最近项目上写了一个移动端的小项目，为了兼容移动端的样式，使用了手淘的flexible.js，rem单位取代px。
rem我知道是以根元素(html)的字体宽度作为基准进行计算。
参考了以下两篇博文:
viewport探索 flexible.js解读
 移动端高清、多屏适配方案

物理像素、独立像素、设备像素比

屏幕通常由很多像素点构成，我们经常说的分辨，例如19201080，就是指屏幕有1920\1080个像素构成，是最小的单位，也是厂商定好的，无法更改。
设备的独立像素也称css像素，可以认为是将屏幕分成坐标系，每一个点代表一个css像素点，单位是px。独立像素和css像素之间的计算由相关系统计算，存在一定的对应关系。
设备像素比，定义了物理像素和css像素的关系，代表了1个css可以代表多少个物理像素点。计算公式：

设备像素比 = 物理像素 / css像素

目前，js可以通过window.devicePixelRatio获取到设备像素比，css可以使用-webkit-device-pixel-ratio(其他的内核使用对应的标志)获得并配合media query使用。

两个像素的关系

在PC上浏览器的宽度的调整并且宽度计算是通过物理像素，这使得在页面不缩放(100%)的情况下，1个css像素等于1个物理像素.放大到200%，一个css像素等于4个物理像素，css像素数减半。

1px==1px

100%时，1css像素大小与设备像素相等

拉伸

放大过程,css像素被拉伸

缩小

缩小过程,css像素被缩小

viewport

浏览器中，百分比宽都是通过父元素的宽计算得到的。body的宽取自html,而html则是取自viewport,而viewport则取自浏览器窗口。viewport是用来约束顶级元素html的，它并不是一个html结构。

screen.width
winodw.innerWidth
document.documentElement.clientWidth
document.documentElement.offsetwidth

innerWidth获取浏览器可见内容区域的宽度(包含滚动条)

clientWidth获取viewport的宽(不包含滚动条)

offsetwid获取html的宽，之前说过viewport是限制html的内容区域，未修改时，html的宽都是100%继承viewport的宽。
在PC上，我们一般不会太关注这些。因为PC浏览器viewport由浏览器窗口大小决定，而移动端则会有明显的问题。

移动端的viewport

在移动端显示PC的网页，实际情况如下图，这个viewport称为布局视口(layout viewport)。而网页显示在屏幕可视区域的部分成为视觉视口(visual viewport)。

。
默认情况下，大多数移动端浏览器会将视觉视口这个框缩放到与布局视口相同，则会看到一下情况：

关于这两个视口的解释：

把layout viewport想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架，你通过它来看这张大图。（译者：可以理解为「管中窥豹」）这个小框架的周围被不透明的材料所环绕，这掩盖了你所有的视线，只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架（缩小）来看整个图片的时候，你可以不用管大图，或者你可以靠近一些（放大）只看局部。你也可以改变框架的方向，但是大图（layout viewport）的大小和形状永远不会变。
visual viewport是页面当前显示在屏幕上的部分。用户可以通过滚动来改变他所看到的页面的部分，或者通过缩放来改变visual viewport的大小。

在移动端，布局视口仍然是用来限制网页布局部分的视口，其大小仍然可以用clientWidth/Hieght得到。而视觉视口的大小则可以用innerWidth/height获取，并且取到的都是css像素。

######理想视口(ideal viewport)
所谓理想视口，就是在页面初始渲染好后，不经过用户缩放或拖动页面就能完美显示网页内容的视口。理想视口在不同的设备是一个不同的值，一般有设备设置，可通过这个链接查询不同机型的理想视口。

viewport meta标签

为了解决移动端视口，苹果最先引入了viewport meta以解决这个问题。属性：

width：用来设置 layout viewport 的宽度，可以设为字符串device-width。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

因为布局视口是限制html布局的，所以只要给是布局视口设一个合适的值，视觉视口自动缩放在屏幕上就能合理的显示所有内容。我们一般设置width=device-width，浏览器会自动设置布局视口为理想视口，但还有一个initial-scale=1。
之前提到过，视觉视口会自动缩放到匹配布局视口，使得完整显示整个网页，但这样内容往往很小，需要放大才能看清。理想视口与视觉视口、缩放值之间的关系为：

visual viewport width = ideal viewport width / zoom factor

所以initial-scale=1，所做的事就是使得视觉视口、理想视口、布局视口三者保持一致。同时，由于某些安卓设备只有在initial-scale=1的情况下才会计算出视觉视口，并设置成理想视口，所有安卓设备下会手动设置为1。

缩放

设备像素比（dpr），代表的是1个css像素在某个方向上能占据的物理像素点个数。
理想视口在设备是提供的，视觉视口中的像素是相对于它缩放得到的。放大时，视觉视口的css像素变少，反之则增多。而缩放的实质也是在改变一个css像素包含的设备像素个数。
理想视口有设备提供，其宽度也就是设备的独立像素。

由以上公式可知: 视觉视口 / 理想视口 = 1 / scale

当在设置了meta viewport之后，

布局视口的宽==视觉视口的宽\==屏幕的宽

故可知：dpr == 1 / scale

知道这些基础知识后，再去看flexible.js差不多应该就会理解工作原理了。

获取网页中元素所有的宽、高获取方式

2017-10-25T16:00:00.000Z

###获取网页中元素所有的宽、高获取方式

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

初识块级格式化上下文(Block Formatting Contexts)

2017-10-25T16:00:00.000Z

#初识块级格式化上下文(Block Formatting Contexts)

##前言
html文档中元素的定位有3种方式(普通流、绝对定位、浮动)，除普通流以外，浮动与绝对定位都会导致元素脱离普通流，按照各自的方式进行定位。
带有BFC属性的容器属于普通流的一种。

##块级格式化上下文 (BFC)
块格式化上下文是页面 CSS 视觉渲染的一部分。它是用于决定块盒子的布局及浮动相互影响范围的一个区域。

BFC是元素在拥有某些特定属性才显示的一种属性，有BFC特性的元素和其他普通流中的元素在样式上没有区别。但在功能上，具有BFC的容器内部与外部隔离，即容器内部的元素不会再布局上影响外部元素。

有BFC属性的容器可以包含浮动元素、会阻止外边距折叠、可以阻止元素被浮动元素覆盖。

##如何触发BFC
满足下面任意一个条件的元素会触发BFC:

根元素或其它包含它的元素
浮动 (元素的 float 不为 none)
绝对定位元素 (元素的 position 为 absolute 或 fixed)
行内块 inline-blocks (元素的 display: inline-block)
表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
overflow 的值不为 visible的元素
弹性盒 flex boxes (元素的 display: flex 或 inline-flex)

以上是 MDN 上引发BFC属性的条件。

需要注意的是，”display:table” 本身并不产生 BFC，而是由它产生匿名框，匿名框中包含 “display:table-cell” 的框会产 BFC。总之，对于 “display:table” 的元素，产生 BFC 的是匿名框而不是 “display:table”。

##BFC特性

###1. BFC可以包含浮动元素
通常，浮动的元素会脱离普通流，不仅会影响兄弟元素，也会影响父容器以及父容器兄弟元素。对于父容器，最直观的就是会使父容器高度塌陷

浮动

给父容器添加overflow:hidden属性，使其引起BFC属性.

这里写图片描述

###2. 阻止外边距折叠
两个相连的 div 在垂直上的外边距会发生叠加。

详细的解释：仅当两个块级元素相邻并且在同一个块级格式化上下文时，它们垂直方向之间的外边距才会叠加。也就是说，即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。因此，阻止外边距折叠只需产生新的 BFC 。

这里父容器的上下设置了20px的外边距，而p元素有1em的上下外边距。可以看到第一个p元素与父容器顶部没有间距，两者外边距产生重叠。

外边折叠

父容器添加overflow:hidden属性，使其引起BFC属性.这里仅第一个p元素与父容器的外边距未折叠，p元素之间外边距折叠。

p元素外边距未折叠

将中间的p元素用一个div包裹，并添加overflow:hidden属性，使其引起BFC属性.

这里写图片描述

###3. 阻止元素被浮动元素覆盖
上面说过，浮动元素会对兄弟元素造成影响。若兄弟元素是块级元素，则会与浮动元素重叠，位于浮动元素之下。若为内联元素，则依次从左至右排列。

覆盖

未覆盖

但是若子元素display:inline-block，则子元素宽度之和大于父容器宽度，则最后宽度相加超过父容器宽度的子元素换行显示。

##BFC处理浮动
通常我们清除浮动，方法有几种：

1. 设置空div
在父容器末尾添加空div,并设置clear:both清除浮动。这样很方便，但违背结构与表象分离的原则。
1. 设置overflow
虽然设置其他属性也能引发BFC属性，但会对布局造成一些影响。设置overflow:hidden的影响相对较小，但在子元素的过大时，超出部分会被覆盖掉，设置auto或scroll又会产生滚动条。
1. :after伪元素
通过为容器添加:after伪元素，并给伪元素设置overflow属性，添加IEhack，实现清除浮动。也是网上使用比较多的方法。
.clearfix{(zoom: 1;}
.clearfix:after{content:’’;height:0;display:block; clear:both;/overflow:hidden; /\clear,overflow二选其一*/}

##IE6、7下的BFC
由于早期IE6、7对于不支持BFC,所以需要通过IEhack解决。在IE6、7中，通过触发hasLayout私有属性实现BFC效果。从使用上看，hasLayout私有属性和BFC触发方式都是通过特有属性触发，IE6、7中大多通过设置zoom:1;触发，zoom用于设置或检索元素缩放比例，值1表示元素实际尺寸，所以设置1不会对元素显示造成影响。

Call Apply 和 Bind小结

2016-07-25T16:00:00.000Z

#Call Apply 和 Bind小结

###1.Call()
call()方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.

fun.call(thisArg[, arg1[, arg2[, ...]]])

该方法接受的第一个参数为指定的替换对象，在非严格模式下若值为null或undefined,则会默认指向全局对象window.后面接受一连串的值作为参数,不能使数组或其他对象.
call()的调用即在调用thisArg对象时，可以调用fun的属性和方法.

#####示例代码
function product(name, price) {
var pName = name;
var pPrice = price;
return pName+’的价格是’+pPrice+’元/斤’;
}
function food(name, price) {

}var apple = product.call(food,'apple',3.5); console.log(apple()); #"apple的价格是3.5元/斤"

一般使用call方法可以用来调用父构造函数、调用匿名函数、指定上下文的this指向.
详细内容参考MDN的call()部分.

###Apply()
apply方法的作用和call方法作用一样，接受的第一个参数一样，后一个参数以数组或类数组对象的形式添加.

fun.apply(thisArg[, argsArray])

详细内容参考MDN的apply()部分.

###Bind()
bind()方法会创建一个新函数，当这个新函数被调用时，它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数.

fun.bind(thisArg[, arg1[, arg2[, ...]]])

#####参考代码
this.x = 9;
var module = {
x: 81,
getX: function() { return this.x; }
};
module.getX(); // 81
var retrieveX = module.getX;
retrieveX(); // 9
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81
即创建一个新的函数boundGetX,当调用该函数时this指向的是module对象,则this.x值为81.
详细内容参考MDN的bind()部分.

js调用百度地图API

2016-03-15T16:00:00.000Z

前几天被要求在页面中调用地图并显示指定地点位置。虽然之前没弄过，但觉的应该很简单，毕竟按着别人的API调用就好。
在国内google地图是用不了了，只能选了百度地图。

首先需要引用百度地图的API

此处的v=1.3是指API的版本，目前百度地图API最高是2.0，而且自1.5版本以后的API，调用时需要到官方申请一个开发者的密钥，即为

设置1个div用于显示地图，然后再api下开始调用。最后大致如下：

以上就实现简单的调用，并显示在坐标处显示标志，如图

这里写图片描述

确实不难(毕竟不是自己实现-_-!)。

第一次用肯定会遇到一些小问题的….
百度地图查询地址需要的地点坐标

var baidu_Point = new BMap.Point(104.066561,30.669561);  //经纬度坐标

如上，接收1个经纬度位置。其实也可以接收一个字符串，即查询地。比如

var baidu_Point = new BMap.Point('成都市金牛区');  //地点字符串

我在使用时地点太详细好像有点问题，最后使用经纬度查询。但开始没找到如何获取详细经纬度，所以只好找了google的地图获取了经纬度，但设置好后发现显示位置有偏差！看了官方介绍 ,才知道百度使用的坐标不是GPS坐标

国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密。百度坐标在此基础上，进行了BD-09二次加密措施,更加保护了个人隐私。百度对外接口的坐标系并不是GPS采集的真实经纬度，需要通过坐标转换接口进行转换。

好吧，原来还要进行地址转换。

//谷歌坐标var x = 116.32715863448607;var y = 39.990912172420714;var ggPoint = new BMap.Point(x,y);//地图初始化var bm = new BMap.Map("allmap");bm.centerAndZoom(ggPoint, 15);bm.addControl(new BMap.NavigationControl());    //坐标转换完之后的回调函数translateCallback = function (data){  if(data.status === 0) {       bm.setCenter(data.points[0]);  }}setTimeout(function(){    var convertor = new BMap.Convertor();    var pointArr = [];    pointArr.push(ggPoint);    convertor.translate(pointArr, 3, 5, translateCallback)}, 1000);

以上是官方demo 代码，很简单。

后来百度发现原来百度自己有坐标拾取器 -_-!用来直接获取经纬度，简直醉了，智商堪忧！
附一下百度地图API地址，demo的代码很详细，复制粘贴就能直接使用。
虽然不难，学着用用总是好的，在此记录一下！