有这样一个场景:如何让img自适应容器（div）图片，必须等比缩放

1
2
3
4

 <div>
  <img src="xxx.jpj" />
</div>

网上文章虽多，大多复制粘贴，且晦涩难懂，我希望能够通过这篇文章，能够清晰的提升对apply、call、bind的认识，并且列出一些它们的妙用加深记忆。

apply、call

　　在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。
　　JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。
　　先来一个栗子：

1
2
3
4
5
6
7
8
9
10
11

function fruits() {}

fruits.prototype = {
    color: "red",
    say: function() {
        console.log("My color is " + this.color);
    }
}

var apple = new fruits;
apple.say();    //My color is red

在一次面试中遇到了这样的一个问题：

题目如下

• 请问关于setTimeout中this作用域是怎么样的

其实在之前看了大量的关于this左右域的问题，但是在回答此问题时还是回答得不够清晰，经过下来资料的查到，进行了再次学习

我们来看下面的分析

有一个函数是这样：在setTimeout中正确输出函数testThis中a的值

1
2
3
4
5
6
7
8
9

function testThis(){
  this.a = 123;
  setTimeout(function(){
    console.log(this.a)
  },1000)
}

test()

在浏览器中运行这个函数我们得到的结果是”undefined”

vorlon.js 是微软推出的一款移动端调试工具

主要功能：加载、检查、测试及调试任何设备上使用Web浏览器运行的JavaScript代码

使用方法

• 从npm安装vorlon.js服务器：$ npm i -g vorlon

• 运行vorlon.js服务器：$ vorlon，此时可以在浏览器中打开http://IP:1337，查看仪表盘页面

• 向应用添加script标签，启用vorlon.js：<script src="http://IP:1337/vorlon.js"></script>

然后我们就可以通过打卡手机页面，在vorlon中查看手机上展示的情况！

如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues

前往LEE的github给他一个Start鼓励一下吧

原创转载请标注出处：https://leehongqiang.github.io

一年之之初，假期过来，静下心，调整状态，进入工作模式！

2017年的计划

• 涨薪涨薪涨薪，重要的事情说三遍

• 深入VUE，并且在不同项目中灵活运用

• 进入前端工程化模式，webpack、es6、sass

• 对前端性能进行深入的实践和运用

• 生一个可爱的宝宝

• 出一次国，旅几次行

去掉16年的所有霉运，加油2017！GO GO GO!

你遇到过性能很差的网页吗？

这种网页响应非常缓慢，占用大量的CPU和内存，浏览起来常常有卡顿，页面的动画效果也不流畅。

你会有什么反应？我猜想，大多数用户会关闭这个页面，改为访问其他网站。作为一个开发者，肯定不愿意看到这种情况，那么怎样才能提高性能呢？
本文将详细介绍性能问题的出现原因，以及解决方法。

浏览器是怎样渲染一个页面的？

我们从浏览器渲染页面的大概过程开始说起：

由从服务器接收到的 HTML 形成 DOM（文档对象模型）。
样式被加载和解析，形成 CSSOM（CSS 对象模型）。
紧接着 DOM 和 CSSOM 创建了一个渲染树，这个渲染树是一些被渲染对象的集合（ Webkit 分别叫它们”renderer”和”render object”，而在Gecko 引擎中叫”frame”）。除了不可见的元素（比如 head 标签和一些有 display:none 属性的元素），渲染树映射了 DOM 的结构。在渲染树中，每一个文本字符串都被当做一个独立的 renderer。每个渲染对象都包含了与之对应的计算过样式的DOM 对象（或者一个文本块）。换句话说，渲染树描述了 DOM 的直观的表现形式。
对每个渲染元素来说，它的坐标是经过计算的，这被叫做“布局(layout)”。浏览器使用一种只需要一次处理的“流方法”来布局所有元素（tables需要多次处理）。
最后，将布局显示在浏览器窗口中，这个过程叫做“绘制(painting)”。

今天在做项目的时候遇到一个问题
客户反馈：他在使用签到（基于高德地图上下班打卡的移动HTML5应用）的过程中定位不准的问题.通过网络搜索发现IOS使用的是地心坐标，而高德地图的是火星坐标，所以直接使用ios手机GPS定位的坐标在高德上就会出现误差,Android定位不需要进行转换，因为她自己就是使用的火星坐标，更多详细信息请

查看

经过测试误差在：300+米

这样肯定是不行的

下面直接给出解决方法:http://blog.csdn.net/xiaobaismiley/article/details/37576303
通过对此博客代码的研究，将其C++程序修改为JavaScript程序。
另外高德地图提供了一个API可以进行直接转换：但是会发送一次网络请求。

如下代码是es6编写，如果要兼容所有浏览器需要进行babel转码，下来代码中讲2种方法都进行了封装

当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？

按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px的高度。

而跟W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。

水平居中

水平居中的方法大家都知道其实很简单

如果是对块级元素

html

1

<div class="content"></div>

css

1
2
3
4
5

.content {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

如果是对文本居中直接使用：text-algin: center;