学习移动端的适配

深入学习回调函数

JS回调函数

何为回调函数，官方解释：当程序跑起来时，一般情况下，应用程序（application program）会时常通过API调用库里所预先备好的函数。但是有些库函数（library function）却要求应用先传给它一个函数，好在合适的时候调用，以完成目标任务。这个被传入的、后又被调用的函数就称为回调函数（callback function）。

通常将一个函数B传入另一个函数A，并且在 需要的时候再调用函数A。

说白了，回调就是回溯，先定义好将要使用的函数体，然后在使用使再调用这个函数，我们通常把callback作为一个参数传入先定义的那个函数。

原生JS页面初始化事件以及Jquery初始化页面加载事件

HTML是有执行顺序的，默认是自上而下执行。所以当我们的js代码在html代码下边的时候，可以正常执行，而当我们的js代码在html代码上边的时候，可以就无法正常执行了，这时，我们需要在文档加载完毕的时候才去执行js代码，所以通常我们会这样做：

一、当不引入jQuery框架，只写原生JS代码时，需要用window对象的onload事件

window.onload = function(){  //要执行的js代码段  }

（注：在使用时，window.onload可直接简写成onload，但是为了不发生歧义及造成不必要的错误，最好是把window写上）

二、在引入jQuery时，可以有多种写法，这里只列出一种最复杂（其他写法基本都是此种的变形）的，和2种最常见的写法

1、最复杂的一种写法：

;(function($,window,document,undefined){    //要执行的js代码段})(jQuery,window,document);

(1)、在最开始使用分号的目的是为了防止多个文件压缩合并时，因为其他文件最后一行语句没加分号，而引起合并后的语法错误（如果能确保不会有多个文件压缩合并的情况，可以不写这个分号）

(2)、这就是一个匿名函数的自执行，一般js库都采用这种自执行的匿名函数来保护内部变量

(3)、形参中的$是jQuery的简写，很多方法和类库也使用$，这里$接收jQuery对象，也是为了避免$变量冲突，保证多个插件之间可以正常运行（如果只引入了jQuery这一个插件，可以不写这个）

(4)、实参分别接收window，document这两个对象，window，document这两个对象都是全局环境下的，而在函数体内的window，document其实是局部变量，不是指全局的window，或是document对象。这样做有个好处就是可以提高性能，减少作用域的查询时间（如果在函数体内需要多次调用window，或是document对象，这样把window或是document对象作为参数传进去，是非常有必要的。如果代码中没有用到这两个对象，那么就不需要传这两个参数了）

(5)、使用undefined的原因：

①因为undefined是window的属性，声明为局部变量之后，在函数中如果再有变量与undefined做比较的话，程序就可以不用到window下搜索undefined，可以提高程序的性能

②undefined在有些版本较旧的浏览器是不被支持的，直接使用会报错，js框架就要考虑到兼容性问题，所以增加一个形参undefined

2、比较常用的写法：

$(document).ready(function(){    //要执行的js代码段});

（注：①在不确定是否只引入jQuery一个js框架的时候，代码中的$可以像复杂写法那样通过参数的形式传递，②代码中的document可省略）

3、最简单的一种写法：

$(function(){    //要执行的js代码段}); 

明天计划的事情：

1 优化代码

遇到的问题：

1 暂无

收获：

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。

上面的flexible方案就是模仿这种方案，因为早些时候vw还没有得到很好的兼容。

• vw(Viewport's width)：1vw等于视觉视口的1%
• vh(Viewport's height) :1vh 为视觉视口高度的1%
• vmin :  vw 和 vh 中的较小值
• vmax : 选取 vw 和 vh 中的较大值

• 如果视觉视口为375px，那么1vw = 3.75px，这时UI给定一个元素的宽为75px（设备独立像素）,我们只需要将它设置为75 / 3.75 = 20vw。

  这里的比例关系我们也不用自己换算，我们可以使用PostCSS的 postcss-px-to-viewport 插件帮我们完成这个过程。写代码时，我们只需要根据UI给的设计图写px单位即可

• px转换成vw不一定能完全整除，因此有一定的像素差

• 比如当容器使用vw，margin采用px时，很容易造成整体宽度超过100vw，从而影响布局效果。当然我们也是可以避免的，例如使用padding代替margin，结合calc()函数使用等等

3 rem随设备宽度自适应(根据dpr的值)，scale的值固定为1

4 rem随设备宽度做自适应，viewport标签进行缩放，scale的值不固定