1、在函数前面加 符号，如！，+，~, 等等，表示的是一个函数表达式 (IIFE)
如：

1
2
3

!function(){}() 相当于
var s = function(){}
s()

2、js 有变量提升，但是它是函数级作用域

1
2
3
4
5
6
7
8
9

function test() {
   var a;
   if (false){
      a = 1
   }
   alert(a); //undefined
}
test();
alert(a) //a is not defined

3、es5里面 块级作用域是怎么实现的

1
2
3
4
5
6
7
8
9
10
11
12
13
14

if(false){
   try {
      throw 1
   }catch (a){
      alert(a)
   }
}
alert(a)
相当于
if(false){
  let a;
}
alert(a)

4、with 会延长函数的作用域链

1
2
3
4
5
6
7
8
9
10

obj.a = 2;
obj.b = 3;
obj.c = 4;
相当于
with (obj) {
    a = 3;
    b = 4;
c = 5;
d = 8;
    }

注意，with只对对象中已有的值进行赋值，如果没有就会创建一个全局变量

5、函数变量提升的优先级要高于变量， 如果变量a没有值，直接被忽略。

1
2
3
4

function a() {}
    var a;
    alert(a) //function a() {}
    a = 1;

1
2
3
4
5
6
7
8

(function () {
    var a = b =1
    // 相当于, b是全局变量
     // var a = 1;
     // b = 1;
})()
alert(b); //1
alert(a);//is not defined

6、es6 是 es5的语法糖
如： class 就是function的原型链实现的
7、es6 里面一定要先定义再使用，如下出现暂时性死区

1
2
3
4
5
6
7

var i;
    if (true){
        i = 5;
        let i;
    }
    alert(i)
//  i is not defined

一、 陀螺仪角度

X（beta,作用域为-180, 180）
y（gamma，作用域为-90， 90）
z（alpha，作用域为0, 360）

1. deviceorientation
设备的物理方向信息，表示为一系列本地坐标系的旋角。
(获取旋转角度)

1
2
3

window.addEventListener("deviceorientation", function(event){
   // 处理 event.alpha、event.beta、event.gamma
}, true);

2. devicemotion
提供设备的加速信息。
（获取重力加速度）

1
2
3
4
5
6
7
8

window.addEventListener("devicemotion", function(event){
   // 处理event.acceleration
   // x(y,z): 设备在x(y,z)方向上的移动加速度值
   // event.accelerationIncludingGravity
   // 考虑了重力加速度后设备在x(y,z)
   // event.rotationRate
   // alpha, beta, gamma: 设备绕x，y，z轴旋转的角度
}, true);

3. compassneedscalibration
用于通知web站点使用罗盘信息校准上述事件。
（获取罗盘校准）

1
2
3
4

window.addEventListener("compassneedscalibration", function(event){
   alert('您的罗盘需要校准');
   event.preventDefault();
}, true);

简单的摇一摇触发代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var speed = 30; // speed
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData) {
   var acceleration = event.accelerationIncludingGravity;
   x = acceleration.x;
   y = acceleration.y;
   z = acceleration.z;
   //记录上一次设备在x,y,z方向上的加速度
   if ((!lastX) && (!lastY) && (!lastZ)) {
      lastX = acceleration.x;
      lastY = acceleration.y;
      lastZ = acceleration.z;
      return;
   }
   if (Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed ){
      // 简单摇一摇触发代码
      alert(1);
   }
}

二、 Touch事件

最基本的touch事件包括4个事件：
touchstart: 当在屏幕上按下手指时触发
touchmove: 当在屏幕上移动手指时触发
touchend: 当在屏幕上抬起手指时触发
touchcancel:
当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。

三、 Css核心技巧

1、 布局方式
圣杯布局，双飞翼布局，绝对定位布局，flex布局
（圣杯，双飞翼为了兼容早期的ie浏览器，兼容性最好）

2、 引用neat.css 处理一些兼容性问题
3、 Cssicon 图标

四、 css3D转换 transform

上面的translateZ, 当translateZ为正值的时候，元素会向其面对的方向走去；如果元素无旋转，就会朝显示器走来！！
r = 64 / Math.tan(20 / 180 * Math.PI) ≈ 175.8

一、 关于前端跨域

1）、同源：端口，域名，协议
2）、同源的目的：保证用户信息安全，防止恶意的网站窃取数据。
3）、浏览器不同域名不能访问对应的cookie，但内部表单不受限制，所以会造成跨站攻击。
4）、同源策略限制的对象：
Cookie，LocalStrorage 和IndexDB 无法读取。
DOM无法获得。
Ajax请求不能发送。
5）、突破同源策略
1.document.domain = ‘*.com’ //设置同域， 此方案仅限主域相同，子域不同的跨域应用场景。
2．Jsonp的原理，

二、 关于 WebSQl，IndexedDB

三、 关于 QPS

测试手机网速webapp页面，根据这个网速，可以给用户出一些网速比较慢的解决方案。比如跳转到简版的网页。
测试的代码：

1
2
3
4
5
6
7
8
9
10

var s = new Image();
var start = Date.now();
s.src = 'http://cdn-img.17weima.com/2018newyear/lottery/bitmap.png'; //例子 ...s.png = 3.33.5kb
s.onload = function (argument){
   var end = Date.now();
   t = end-start;
   v = (Math.round (3.33*1000)/t)+ 'kb/s';
   console.log(v)
}
s.onload()

三、 关于 html 语义化

使用div进行布局，不要用div进行无意义的包裹，尽可能少使用无语义的标签div和span
尽量少写html。
少写html可以减少dom的渲染时间，还可以避免浪费整个文件的大小。

1、this最终指向的是调用它的对象
2、这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象
3、如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

//示例一
function a(){
    var user = "yanzi";
    console.log(this.user)  //undefined
    console.log(this)  //Window
}
window.a();
//示例二
var o = {
    a: 10,
    b: {
        a: 12,
        fn: function(){
            console.log(this.a)  // 12
        }
    }
}
 o.b.fn();
 //示例三
 function fn(){
    this.user = "yanzi";
    return function(){};
 }
 var a = new fn;
 console.log(a.user); //undefined
 //示例四
  function fn(){
    this.user = "yanzi";
    return 1;
 }
 var a = new fn;
 console.log(a.user);  //yanzi

一、边框

1、圆角 border-radius：
2、阴影 box-shadow：
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

X轴偏移量：必填，水平阴影位置，允许负值。
Y轴偏移量：必填，垂直阴影位置，允许负值。
阴影模糊半径：可选， 模糊距离， 只能是正值。
阴影扩展半径：可选， 扩展尺寸。
阴影颜色：可选，省略默认黑色。
投影方式：可选，设置 inset时为内部阴影，省略为外部阴影。

3、边框应用图片 border-image：

二、颜色

1、RGBA：
RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。

1

background-color:rgba(100,120,60,0.5);

2、 渐变：

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。
linear-gradient(渐变方向, 颜色起始点和结束点、可以有两个至多个色值…)

1

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

三、文字

1、text-overflow 与 word-wrap：

text-overflow用来设置是否使用一个省略标记（…）标示对象内文本的溢出。
word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

1
2

text-overflow：clip（剪切）| ellipsis （省略标记）
word-wrap：normal (控制连续文本换行) | break-world （边界内换行）

2、嵌入字体@font-face：
3、文本阴影text-shadow

四、背景

1、background-origin
设置元素背景图片的原始起始位置。
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

1

background-origin ： border-box | padding-box | content-box;

2、background-clip
用来将背景图片做适当的裁剪以适应实际需要。
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

1

background-clip ： border-box | padding-box | content-box | no-clip

3、background-size
设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

1

background-size: auto | <长度值> | <百分比> | cover | contain

4、多重背景

五、选择器

1、属性选择器：

1
2
3
4
5
6
7
8
9
10
11
12

a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

2、 结构性伪类选择器—root：
:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。

3、结构性伪类选择器—not：
:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

4、结构性伪类选择器—empty：
:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
5、结构性伪类选择器—first-child：
:first-child选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
6、结构性伪类选择器—last-child：
:last-child选择器与:first-child选择器作用类似，不同的是:last-child选择器选择的是元素的最后一个子元素。
7、结构性伪类选择器—nth-child(n)：
:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中n是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
8、结构性伪类选择器—nth-last-child(n)
9、first-of-type选择器
:first-of-type选择器类似于:first-child选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
10、 nth-of-type(n)选择器
:nth-of-type(n)选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。
11、 last-of-type选择器
:last-of-type选择器和:first-of-type选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。
12、nth-last-of-type(n)选择器
13、only-child选择器
:only-child选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
14、 only-of-type选择器

15、 :enabled选择器
在Web的表单中，有些表单元素有可用:enabled和不可用:disabled状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器:enabled对这些表单元素设置样式。
16、 :disabled选择器
:disabled选择器刚好与:enabled选择器相反，用来选择不可用表单元素。
17、 :checked选择器
在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。而:checked表示的是选中状态。
18、 ::selection选择器
19、 :read-only选择器
:read-only伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了readonly=’readonly’。
20、:read-write选择器
:read-write选择器刚好与:read-only选择器相反，主要用来指定当元素处于非只读状态时的样式。
22、 ::before和::after
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和content配合使用，使用的场景最多的就是清除浮动。

img标签为什么会有上下间隙呢？
原因在于：img标签为inline元素，该元素默认垂直对齐方式为以父元素的baseline，但是展示时又是以bottomline为对齐方式，因此造成了上下两个img标签之间的间隙。有以下四种方案可以解决：

1、img{ display:block};
将其改变为block元素，但是该方法太过粗暴，相当于从根本上改变了img。
2、img{vertical-align:top;}
改变其垂直对齐方式
3、div{font-size:0};
把父元素的文字大小设置为0
4、div{ margin-bottom:-3px };
这个方法不推荐

最近写个移动端的项目，发现在Android和pc浏览器上都可以运行，但是在ios和Safari上效果没有呈现，最后找到原因是，“Safari与IOS对Date对象的兼容性问题”。

看下面代码：

1

var date =new Date("2017-12-27 08:00");

这段代码是获取字符中的指定日期，但是在Safari上就会报错。不过像下面这样写就不会报错：

1

var date =new Date("2017/12/27 08:00");

一般我们的日期格式都是这种“2017-12-27 08:00”，所以我们需要写个函数，替换一下，这样Android和IOS就能共用了呀！

1
2
3
4

getDateDiff(time) {
  //将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式
  return time.replace(/\-/g, "/");
}

git 切换分支的时候是否需求提交当前已经修改的内容？

当你当前分支又修改的情况下，切换分支，有三种方式：

1、先提交修改到当前分支，再切换

git add .
git commit
git checkout 分支名

2、不提交当前修改，先把修改暂存，再切换
git add .
git stash
git checkout 分支名

当再次checkout回来之后，再提交当前分子
git stash apply
git commit

3、 不提交当前修改，直接切换分支，，注意，这样的话会把当前修改记录到切换当分支下面
git add .
git commit
git checkout 分支名

一、页面栈的控制

官方规定小程序最多只能有 五个页面 同时存在，意思是在不关闭页面的情况，最多新开五个页面，页面深度为5。

但是目前一般来说，应用的业务场景和交互逻辑，远远不止5个页面栈。那如何用 五个页面 去实现更多复杂的流程呢？我们将从以下3个方面去进一步了解:

1. 小程序的4种导航跳转方式
2. 选择页面的跳转方式的选择
3. 页面传参