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{
width: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{
width: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;
width:90px;
height:60px;
font-size:30px;
}

#rotate2D,#rotate3D {
width: 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;
width: 0px;
border-top: 60px solid red;
border-right: 100px solid black;
border-bottom: 60px solid blue;
top: 30px;
}
.jiao{
position: relative;
height: 0px;
width: 0px;
border-top: 60px solid transparent;
border-right: 100px solid black;
border-bottom: 60px solid transparent;
}

.box{
border-bottom:1px solid #f00;
width:400px;
height:400px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
.box:before,.box:after{
content:"";
display: block;
width: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>

 
posted @ 2018-03-22 14:59  前端小栈  阅读(161)  评论(0编辑  收藏  举报