垂直居中

垂直居中一个块级元素

知道该块级元素的高

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

不知道该块级元素的宽高

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

使用 flexbox

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

垂直居中一个行内元素

单行文本

一般使 height 和 line-height 相同即可

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

若父元素高度未指定可设置上下 padding 相等

.text-center{
    width: 100px;
    background-color: pink;
    padding-top: 40px;
    padding-bottom: 40px;
}

多行文本

方案1

div {
   display: table;
}
div p {
   display:table-cell;
   vertical-align: middle;
}

方案2

<div class="flex-center">
  <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>

body {
  background: #f06d06;
  font-size: 80%;
}

div {
  background: white;
  width: 240px;
  margin: 20px;
}

.flex-center {
  background: black;
  color: white;
  border: 10px solid white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  resize: vertical;
  overflow: auto;
}
.flex-center p {
  margin: 0;
  padding: 60px;
}

方案3 - 诡异的方法

<div class="ghost-center">
  <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>

body {
  background: #f06d06;
  font-size: 80%;
}

div {
  background: white;
  width: 240px;
  height: 200px;
  margin: 20px;
  color: white;
  resize: vertical;
  overflow: auto;
  padding: 20px;
}

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
  width: 190px;
  margin: 0;
  padding: 20px;
  background: black;
}

水平居中

水平居中一个块级元素

.center-me {
  margin: 0 auto;
}

水平居中一个行内元素

.center-children {
  text-align: center;
}

垂直水平居中

固定宽高

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

不知道宽高

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用 flexbox

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

css居中各种方法

如何打包未签名 apk

cordova build –release android

可能会出现的错误

查看错误日志发现问题基本是 translation 错误，解决方法：
在 platforms/android/build.gradle 文件的android {} 节点中增加

lintOptions{
    abortOnError false
    checkReleaseBuilds false
}

参考

this 的指向

this 的指向大致可以分为以下4种

1. 作为对象的方法调用
2. 作为普通函数调用
3. 构造器调用
4. Function.prototype.call 或 Function.prototype.apply 调用

当函数作为对象的方法被调用时，this指向该对象：

1
2
3
4
5
6
7
8

var obj = {
	a: 1,
	getA: function(){
		alert(this == obj); //输出：true
		alert(this.a); //输出：1
	}
}
obj.getA();

作为普通函数调用

当函数不作为对象的属性被调用时，也就是我们常说的普通函数方式，此时的this总是指向全局对象。在浏览器的 javascript 里，这个全局变量是 window 对象。

1
2
3
4
5
6

window.name = 'globalName';
var getName = function(){
	return this.name;
}

console.log(getName()); //输出：globalName

或者

1
2
3
4
5
6
7
8
9
10

window.name = 'globalName';
var myObj = {
	name: 'sven',
	getName: function(){
		return this.name;
	}
}

var getName = myObj.getName;
console.log(getName()); //globalName

有时候我们会遇到一些困扰，比如在 div 节点的时间函数内部，有一个局部的 callback 方法，callback方法被作为普通的函数调用时，callback内部的this指向了window，但我们往往是想让它指向该div节点

1
2
3
4
5
6
7
8
9
10

window.id = 'window';

document.getElementById('div1').onclick = function(){
	alert(this.id); // tihs为该 div 节点，this.id = div1
	//var that = this; //保存引用 that.id 指向 div1
	var callback = function(){
		alert(that.id); //window
	}
	callback();
}

此时需用 that 保存下 div 节点的引用。

在 es5 的 strict 模式下，这种情况下的 this 已经被规定为不会指向全局对象，而是 undefined;

1
2
3
4
5
6

function func(){
	'use strict'
	alert(this); //undefined
}

func();

构造器调用

当用 new 运算符调用函数时，该函数总会返回一个对象，通常情况下，构造器里的 this 就指向返回的这个对象。

1
2
3
4
5
6

var myClass = function(){
	this.name = 'sven';
}

var obj = new myClass();
alert(obj.name); //sven

但用 new 调用构造器时，还需要注意一个问题，如果构造器显式地返回了一个 object 类型的对象，那么此次运算结果最终会返回这个对象，而不是我们之前期待的 this：

1
2
3
4
5
6
7
8
9

var myClass = function(){
	this.name = 'sven';
	return {
		name: 'anne'
	}
}

var obj = new myClass();
alert(obj.name); //anne

如果构造器不显式地返回任何数据，或者是返回一个非对象类型的数据，就不会造成上述问题。

1
2
3
4
5
6
7

var myClass = function(){
	this.name = 'sven';
	return 'anne';
}

var obj = new myClass();
alert(obj.name); //sven

Function.prototype.call 或 Function.prototype.apply 调用

这两个方法可以动态地改变传入函数的 this

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

var obj1 = {
	name: 'sven',
	getName: function(){
		return this.name;
	}
}

var obj2 = {
	name: 'anne',
}

console.log(obj1.getName());
console.log(obj1.getName.call(obj2));

获得多维数组中某个元素出现的次数

Q：获得下面数组中某元素出现的次数（例：1）

1

const arr = [1, [1, 2], [1, 2, 3, [1, 2]]]

A： Array.prototype.toString()

1
2
3
4
5

const getItemLength = (arr, item) => {
  return arr.toString().split(',').filter(i => i == item).length
}

console.log(getItemLength(arr, 1))

A：递归

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

const flattenedArray = []

const getFlattenedArray = item => {
  if (!Array.isArray(item)) {
     flattenedArray.push(item)
  } else {
    item.forEach(i => {
      getFlattenedArray(i)
    })
  }
}

getFlattenedArray(arr)

console.log(flattenedArray.filter(item => item == 1).length)

Array.prototype.toString() 方法工作原理：

For Array objects, the toString method joins the array and returns one string containing each array element separated by commas.

实时显示当时时间

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

(function getDate(){
	var date = new Date(),
	DateObj = {
		getTime: function(){
			var year = date.getFullYear(),
				month = (date.getMonth())+1, //月份从0开始
				day = date.getDate(),
				hour = this.addZero(date.getHours()),
			    min = this.addZero(date.getMinutes()),
				sec = this.addZero(date.getSeconds());

			alert(year+'年'+month+'月'+day+'日 '+hour+':'+min+':'+sec);
		},
		addZero: function(number) { //时分秒个位数补0
			return (number < 10 ? '0' : '') + number;
		}
	}

	DateObj.getTime();
})();

alert 中内容换行

1

alert('123\n456');

请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象

Q：编写方法 parseQueryString，把下面的 url 参数解析成对象

1

const url = 'http://www.taobao.com?item=10&key=12&productId=88'

A：for / forEach 循环

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

const parseQueryString = url => {
  const urlObj = {}
  const paramsUrl = url.split('?')[1]
  const keyValuePair = paramsUrl.split('&')

  // for loop
  for (let i = 0; i < keyValuePair.length; i++) {
    const key = keyValuePair[i].split('=')[0]
    const val = keyValuePair[i].split('=')[1]
    urlObj[key] = val
  }

  // forEach
  keyValuePair.forEach(pair => {
    const key = pair.split('=')[0]
    const value = pair.split('=')[1]
    urlObj[key] = value
  })

  return urlObj
}

console.log(parseQueryString(url))

A：Array.prototype.reduce

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

const parseQueryString = url => {
  const queryString = url.split('?')[1]
  const keyValuePair = queryString.split('&')
  return keyValuePair.reduce((acc, pair) => {
    const key = pair.split('=')[0]
    const value = pair.split('=')[1]
    acc[key] = value
    return acc
  }, {})
}

console.log(parseQueryString(url))

get 和 post 请求的本质区别

GET 请求

1. 参数都是体现在 url 上
2. 主要用于取（查询）数据
3. url 有最大长度限制
4. 便于浏览器缓存 ok to cache
5. 不应该去改变服务端的数据

POST 请求

1. 参数通过 body 传递
2. 用于更新数据
3. 没有长度限制
4. 不能做缓存 not ok to cache
5. 可以用作修改服务端数据

html5 有哪些新特性

1.canvas

2.data- 属性
使用data-可以解决自定义属性混乱无管理的现状

1

<div id="box" data-age="23"></div>

1
2
3
4
5

var b = document.getElementById('box');
console.log(b.dataset.age);

//jQuery
$('#box').data('age');

3.localStorage，sessionStorage

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

localStorage 和 sessionStorage 的区别：

• localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
• sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

localStorage 和 cookie 的区别：

• cookie 需要指定作用域，不可以跨域调用
• cookie 有时间限制，localStorage 是永久的

localStorage 用法

1
2
3
4
5
6

localStorage.setItem('name', 'xwill');
localStorage.getItem('name');  //xwill
localStorage.removeItem('name'); 
localStorage.clear();  //清除所有

//注意 localStorage 还可以 dot 方式使用 localStorage.name = 'xwill'，但 key，value 形式显然更容易维护。

4.表单属性
html5 增加了 placeholder 属性，另外 input 的 type 增加了：color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url。

5….

函数声明和函数表达式的区别

怎么记呢？有 ＝ 就是表达式～
函数声明：

1
2
3

function say(word){
	console.log(word);
}

函数表达式：

1
2
3

var say = function(word){
	console.log(word);
}

区别：
函数声明定义的函数可在定义前和后同时调用，而函数表达式定义的函数只能在定义代码下方调用。

哪种定义方式好？
函数声明，可参考 airbnb 的 javascript style guide

jsonp 跨域的原理和实现

jsonp的核心则是动态添加 script 标签来调用服务器提供的js脚本。

jsonp跨域的原理和实现