造成跨域的两种策略

浏览器的同源策略会导致跨域，这里同源策略又分为以下两种

1. DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。

2. XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。

cookie

作用

cookie是纯文本，没有可执行代码。存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来向访问者电脑上存储数据，或者某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据（通常经过加密）

如何工作

当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动帮我们做。这个特点很重要，因为这关系到“什么样的数据适合存储在cookie中”。

Lodash 内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，其中部分是目前 ECMAScript 尚未制定的规范，但同时被业界所认可的辅助函数。

/*jQuery.fn = jQuery.prototype = { //添加实例属性和方法

jquery : 版本

constructor : 修正指向问题

init() : 初始化和参数管理

selector : 存储选择字符串

length : this对象的长度

toArray() :  转数组

get() :  转原生集合

<!--more-->

pushStack() :  JQ对象的入栈

each() :  遍历集合

ready() :  DOM加载的接口

slice() :  集合的截取

first() :  集合的第一项

last() :   集合的最后一项

eq() :   集合的指定项

map() :   返回新集合

end() :   返回集合前一个状态

push() :    (内部使用)

sort() :    (内部使用)

splice() :  (内部使用)

};*/

$.extend()
$.fn.extend()

当只写一个对象自变量的时候，JQ中扩展插件的形式

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

$.extend({     //扩展工具方法
	aaa : function(){
		alert(1);
	},
	bbb : function(){
		alert(2);
	}
});
$.fn.extend({     //扩展JQ实例方法
	aaa : function(){
		alert(3);
	},
	bbb : function(){
		alert(4);
	}
});
$.aaa();
$.bbb();
$().aaa();
$().bbb();
$.extend();  -> this -> $  -> this.aaa  ->  $.aaa()
$.fn.extend(); -> this -> $.fn -> this.aaa ->  $().aaa()*/

当写多个对象自变量的时候 , 后面的对象都是扩展到第一个对象身上

1
2
3
4
5

var a = {};
$.extend( a , { name : 'hello' } , { age : 30 } );
console.log( a );

还可以做 深拷贝(第一个参数为true) 和 浅拷贝(默认)

1
2
3
4
5
6
7
8
9
10

var a = {};
var b = {  name : { age : 30 } };
$.extend( true , a , b );
//a.name = 'hi';
a.name.age = 20;
alert( b.name.age );

源码分析：

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

jQuery.extend = jQuery.fn.extend = function(){
	定义一些变量
	if(){}   看是不是深拷贝情况
	if(){}   看参数正确不
	if(){}   看是不是插件情况
	for(){   可能有多个对象情况
		if(){}  防止循环引用
		if(){}   深拷贝
		else if(){}   浅拷贝
	}
};

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
36
37

jQuery.extend({
	expando  :  生成唯一JQ字符串(内部)
	noConflict()  :  防止冲突
	isReady  :  DOM是否加载完(内部)
	readyWait  :  等待多少文件的计数器(内部)
	holdReady()  :  推迟DOM触发
	ready()  :  准备DOM触发
	isFunction()  :  是否为函数
	isArray()  :  是否为数组
	isWindow()  :  是否为window
	isNumeric()  :  是否为数字
	type()  :  判断数据类型
	isPlainObject()  :  是否为对象自变量
	isEmptyObject()  :  是否为空的对象
	error()  :  抛出异常
	parseHTML()  :  解析节点
	parseJSON()  :  解析JSON
	parseXML()  :  解析XML
	noop()  :  空函数
	globalEval()  :  全局解析JS
	camelCase()  :  转驼峰(内部)
	nodeName()  :  是否为指定节点名(内部)
	each()  :  遍历集合
	trim()  :  去前后空格
	makeArray()  :  类数组转真数组
	inArray()  :  数组版indexOf
	merge()  :  合并数组
	grep()  :  过滤新数组
	map()  :  映射新数组
	guid  :  唯一标识符(内部)
	proxy()  :  改this指向
	access()  :  多功能值操作(内部)
	now()  :  当前时间
	swap()  :  CSS交换(内部)
});

DOMContentLoaded

JavaScript的 && 和 || 的短路运算

&& 可以当做“且”、“and”来理解
|| 可以当做“或”、“or”来理解

使用 && 的时候，只要有一个为假，则结果为假，只有全部为真的时候，结果才为真。
|| 相反，只要有一个为真，结果就为真，反之，只有全部为假的时候，结果才为假。

可以把 && 看做是找假运算。找到假，直接停止，将假返回；找到真，则会继续找，直到找到假才停止，并将假返回。如果都为真，则返回最后一个真。

看了冴羽大神的JavaScript深入之call和apply的模拟实现有所收获，顺便在此做个总结，首先贴上作者模拟实现的源码，其实看源码就很容易了解call和apply的实现机制。

事件监听

关于事件监听，W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。

起初Netscape制定了JavaScript的一套事件驱动机制（即事件捕获）。随即IE也推出了自己的一套事件驱动机制（即事件冒泡）。最后W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范。

新版弹性盒模型

display: flex;

flex-direction

设置主轴方向为水平方向
flex-direction: row;
设置主轴方向为垂直方向
flex-direction: column;
设置主轴方向为水平,元素排列为反序
flex-direction: row-reverse;
设置主轴方向为垂直,元素排列为反序
flex-direction: column-reverse;

####justify-content
元素在主轴开始位置 ，富裕空间在主轴的结束位置
justify-content: flex-start;
元素在主轴结束位置，富裕空间在主轴开始位置
justify-content: flex-end;
元素在主轴中间,富裕空间在主轴两侧
justify-content: center;
富裕空间平均分配在每两个元素之间
justify-content: space-between;
富裕空间平均分配在每个元素两侧
justify-content: space-around;

align-items

元素在侧轴开始位置，富裕空间在侧轴结束位置
align-items: flex-start;
元素在侧轴结束位置，富裕空间在侧轴开始位置
align-items: flex-end;
元素在侧轴中间位置，富裕空间在侧轴两侧
align-items: center;
根据侧轴方向上文字的基线对齐
align-items: baseline;

定义盒子的弹性空间

子级设置 flex-grow

元素的具体位置设置
子级设置 order

老版弹性盒模型

display: -webkit-box;

-webkit-box-orient

设置主轴方向为水平方向
-webkit-box-orient: horizontal;
设置主轴方向为垂直方向
-webkit-box-orient: vertical;
元素在主轴上排列为反序
-webkit-box-direction: reverse;
元素在主轴上排列为正序
-webkit-box-direction: normal;
元素在主轴的开始位置,富裕空间在主轴的结束位置
-webkit-box-pack: start;

-webkit-box-pack

元素在主轴结束位置，富裕空间在主轴开始位置
-webkit-box-pack: end;
元素在主轴中间,富裕空间在主轴两侧
-webkit-box-pack: center;
富裕空间平均分配在每两个元素之间
-webkit-box-pack: justify;

-webkit-box-align

元素在侧轴开始位置，富裕空间在侧轴结束位置
-webkit-box-align: start;
元素在侧轴结束位置，富裕空间在侧轴开始位置
-webkit-box-align: end;
元素在侧轴中间位置，富裕空间在侧轴两侧
-webkit-box-align: center;

定义盒子的弹性空间

子级设置 -webkit-box-flex

元素的具体位置设置
子级设置 -webkit-box-ordinal-group

常用的meta标签

viewport设置

1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />

避免IE使用兼容模式

1

<meta http-equiv="X-UA-Compatible" content="IE=edge">

uc强制竖屏

1

<meta name="screen-orientation" content="portrait">

QQ强制竖屏

1

<meta name="x5-orientation" content="portrait">

UC强制全屏

1

<meta name="full-screen" content="yes">

QQ强制全屏

1

<meta name="x5-fullscreen" content="true">

禁止识别电话号码

1

<meta name="format-detection" content="telephone=no" />

禁止识别邮箱号码

1

<meta name="format-detection" content="email=no" />

防止地址跳转到地图

1

<meta name="format-detection" content="address=no" />

防止日期被显示成别的格式

1

<meta name="format-detection" content="date=no" />

拨打电话和发邮件

1
2
3
4
5

href="tel:"  
href="mailto:"
<!--eg:-->
<a href="tel:8602188888888">+86 021 88888888</a>

清除点击阴影

1

a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}

消除按钮圆角

1

input，button{-webkit-appearance: none;border-radius: 0;}

iOS 浏览器横屏时会重置字体大小

1
2
3

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;

移动端字体

1

font-family: '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;

禁止复制、选中文本

1
2
3
4
5
6

Element {
 -webkit-user-select: none;
 -moz-user-select: none;
 -khtml-user-select: none;
  user-select: none;
}

Font Boosting

在一段文字没有给其设置高度的时候在webkit内核下文字的大小被浏览器放大 参考

Fixed 兼容问题

IOS的body的overflow问题（加overflow:hidden横向仍可以滚动）

transition过渡

语法：transition: property duration timing-function delay;

transition-property
（all || [attr] || none）
属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。

transition-duration
规定完成过渡效果需要花费的时间（以秒或毫秒计）

注：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

transition-timing-function
属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。

—— ease：（逐渐变慢）默认值
—— linear：（匀速）
—— ease-in：(加速)
—— ease-out：（减速）
—— ease-in-out：（先加速后减速）
—— cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）
transition-delay
规定过渡效果何时开始，值以秒或毫秒计。

过渡完成事件

Webkit内核： obj.addEventListener('webkitTransitionEnd',function(){},false);
firefox: obj.addEventListener('transitionend',function(){},false);

2D变换

transform

rotate(<angle>) 旋转函数 取值度数(deg度数)

skew(<angle>[,<angle>]) 倾斜函数 取值度数
该函数包含两个参数，分别用来定义X轴Y轴的坐标倾斜角度。
—— skewX()
—— skewY()

scale(<number>[,<number>]) 缩放函数 取值 正数、负数和小数
该函数包含两个参数，分别用来定义宽和高的缩放比例，如果第二个参数省略则第二个参数等于第一个参数。

translate(<translation-value>[,<translation-value>]) 位移函数
该函数包含两个参数，分别用来定义X轴和Y轴的坐标。
—— translateX()
—— translateY()

Transform-origin 旋转的基点
初始值为”50% 50%”，接受两个参数，它们可以是百分比、em、px等具体值，也可以是left、center、right或者top、middle、bottom等描述性关键字
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
该属性必须与 transform 属性一同使用。
语法transform-origin: x-axis y-axis z-axis;

Transform 执行顺序问题 — 后写先执行

matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现缩放

x轴缩放 a=x*a c=x*c e=x*e;
y轴缩放 b=y*b d=y*d f=y*f;

通过矩阵实现位移

x轴位移: e=e+x
y轴位移: f=f+y

通过矩阵实现倾斜

x轴倾斜: c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)

matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现旋转
—— a=Math.cos(deg/180*Math.PI);
—— b=Math.sin(deg/180*Math.PI);
—— c=-Math.sin(deg/180*Math.PI);
—— d=Math.cos(deg/180*Math.PI);
变换兼容IE9以下IE版本只能通过矩阵来实现
filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod='auto expand');
IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d

3d变换

transform-style（preserve-3d） 建立3D空间

规定如何在 3D 空间中呈现被嵌套的元素,该属性必须与 transform 属性一同使用。

语法：transform-style: flat|preserve-3d;

Perspective 景深

目前浏览器都不支持 perspective 属性。Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

语法：perspective: number|none;
Perspective- origin 景深基点

目前浏览器都不支持 perspective-origin属性。Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。

Transform 新增函数
—— rotateX()
—— rotateY()
—— rotateZ()
—— translateZ()
—— scaleZ()

animation

语法：animation: name duration timing-function delay iteration-count direction;

注：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

关键帧——keyFrames
类似于flash：只需指明两个状态，之间的过程由计算机自动计算
关键帧的时间单位
—— 数字：0%、25%、100%等
—— 字符：from(0%)、to(100%)

注：为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
格式(1)

@keyframes 动画名称
{
    动画状态
}

栗子：
@-webkit-keyframes move
{
    0%{
        width:100px;
    }
    100%
    {
        width:500px;
    }    
}

调用：
animation:2s move;

格式(2)

@keyframes  miaov_test
{
    from { background:red; }
    to { background:green; }
}

可以只有to

调用的标签(#div1、xxx:hover之类的)

必要属性
—— animation-name 动画名称（关键帧名称）
—— animation-duration 动画持续时间
例如：

-webkit-animation-name: ‘miaov';
-webkit-animation-duration: 4s;

animation-play-state 播放状态（ running 播放 和paused 暂停 ）

可选属性
animation-timing-function动画运动形式
—— linear 匀速。
—— ease 缓冲。
—— ease-in 由慢到快。
—— ease-out 由快到慢。
—— ease-in-out 由慢到快再到慢。
—— cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-delay 动画延迟
—— 只是第一次
animation-iteration-count 重复次数
—— infinite为无限次
animation-direction 播放前重置
—— 动画是否重置后再开始播放
—— alternate 动画直接从上一次停止的位置开始执行
—— normal 动画第二次直接跳到0%的状态开始执行

通过class
—— 在class里加入animation的各种属性
—— 直接给元素加-webkit-animation-xxx样式
animation的问题
—— 写起来麻烦
—— 没法动态改变目标点位置
obj.addEventListener('webkitAnimationEnd', function (){}, false);