JavaScript备忘录

函数声明:

function 函数名称 (参数：可选){ 函数体 }

函数表达式：

function 函数名称（可选）(参数：可选){ 函数体 }


// 这是一个自执行的函数，函数内部执行自身，递归
function foo() { foo(); }


自执行函数表达式

(function () { /* code */ } ()); // 推荐使用这个

(function () { /* code */ })(); // 但是这个也是可以用的


分组操作符

(function () { /* code */ } ());

!function () { /* code */ } ();

~function () { /* code */ } ();

-function () { /* code */ } ();

+function () { /* code */ } ();


匿名闭包

(function () {
    // ... 所有的变量和function都在这里声明，并且作用域也只能在这个匿名闭包里
    // ...但是这里的代码依然可以访问外部全局的对象
}());
或：(function () {/* 内部代码 */})();


S.O.L.I.D五大原则

The Single Responsibility Principle（单一职责SRP）   类发生更改的原因应该只有一个


The Open/Closed Principle（开闭原则OCP）    软件实体（类，模块，方法等等）应当对扩展开放，对修改关闭，即软件实体应当在不修改的前提下扩展。


The Liskov Substitution Principle（里氏替换原则LSP）    派生类型必须可以替换它的基类型。


The Interface Segregation Principle（接口分离原则ISP）   不应该强迫客户依赖于它们不用的方法。


The Dependency Inversion Principle（依赖反转原则DIP）    高层模块不应该依赖于低层模块，二者都应该依赖于抽象；抽象不应该依赖于细节，细节应该依赖于抽象

var add = function(num1,num2){
function tmp(num3){
return num1+num3
}
return num2 ? tmp(num2) :tmp
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#animated_div{
76px;
height:47px;
background:#92B901;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:20px;
padding:10px;
animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-webkit-animation:animated_div 5s 1;
-o-animation:animated_div 5s 1;
border-radius:5px;
-webkit-border-radius:5px;
}

@-webkit-keyframes animated_div
{
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(20deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:500px;}
55% {-webkit-transform: rotate(0deg);left:500px;}
70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}

.animated_div{
60px;
height:40px;
background:#92B901;
color:#ffffff;
position:relative;
font-weight:bold;
font-size:15px;
padding:10px;
margin:5px;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-webkit-border-radius:5px;
-o-transition-property:width,height,-o-transform,background,font-size,opacity;
-o-transition-duration:1s,1s,1s,1s,1s,1s;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
border-radius:5px;
opacity:0.4;
}.animated_div:hover

{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
background:#1ec7e6;
90px;
height:60px;
font-size:30px;
}

#rotate2D,#rotate3D {
80px;
height: 70px;
color: white;
position:relative;
font-weight:bold;
font-size:15px;
padding:10px;
float:left;
margin-right:50px;
border-radius:5px;
border:1px solid #000000;
background:red;
margin:10px;
}
#rotate2D:hover{
-webkit-transform: rotate(180deg);
}
#rotate3D:hover{
-webkit-transform: rotateY(180deg);
}
.jiao{
position: relative;
height: 0px;
0px;
border-top: 60px solid red;
border-right: 100px solid black;
border-bottom: 60px solid blue;
top: 30px;
}
.jiao{
position: relative;
height: 0px;
0px;
border-top: 60px solid transparent;
border-right: 100px solid black;
border-bottom: 60px solid transparent;
}

.box{
border-bottom:1px solid #f00;
400px;
height:400px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
.box:before,.box:after{
content:"";
display: block;
400px;
height:400px;
box-sizing: border-box;
position: absolute;
}
.box:before{
border-left:1px solid #f00;
transform-origin: left bottom;
transform: rotate(30deg);
}
.box:after{
border-bottom:1px solid #f00;
transform: rotate(60deg);
transform-origin: right bottom;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="animated_div">CSS3<br><span style="font-size:10px">动画</span></div>
<div class="animated_div">CSS3<br><span style="font-size:50%">过渡</span></div>
<div style="height:80px;">
<div id="rotate2D">2D rotate</div>
<div id="rotate3D">3D rotate</div>
</div>
<div class="jiao">
</div>
<div class='box'>
</div>
</body>
</html>