一切福田，不離方寸，從心而覓，感無不通。

Daily Archives: 2017年10月1日

常见JS动画效果

在这里，我为大家提供几种常用的动画效果，虽然没有什么特别，不是很炫酷，但很常见也很便捷。 一、轮播图： 轮播图在网页中运用较广，经常使用于头部banner，使用于电商网站中，例如;淘宝、京东、天猫等购物平台都少不了。而轮播图有多种类型，这次就和大家说说其中的两款。轮播图的原理：点击上一张或下一张时，图片移动的距离为图片本身的宽度；点击图片下的原点导航时跳转到相应的图片位置。 1、一般的轮播图。这一类型的轮播图，在切换图片的过程中，图片会缓慢的滑动到达相应的位置，即可以看到图片到达相应位置的全过程。

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            img{
                width: 520px;
            }
            div.box{
                width: 520px;
                height: 280px;
                overflow: hidden;
                margin: 100px auto;
                position: relative;
            }
            ul.img{
                top: 0px;
                left: 0px;
                width: 1000%;
                position: absolute;
            }
            ul.img li{
                float: left;
                list-style: none;
            }
            ul.circle{
                left: 50%;
                bottom: 10px;
                margin-left: -75px;
                position: absolute;
            }
            ul.circle li{
                width: 20px;
                height: 20px;
                float: left;
                color: #666;
                cursor: pointer;
                margin: 0px 5px;
                list-style: none;
                text-align: center;
                border-radius: 10px;
                background: #e4e4e4;
                font: normal 12px/20px "conslas";
            }
 
            ul.arrow{
                top: 50%;
                width: 100%;
                position: absolute;
                margin-bottom: -25px;
            }
            ul.arrow li{
                width: 35px;
                height: 50px;
                color: #666;
                cursor: pointer;
                list-style: none;
                text-align: center;
                background: #ccc;
                font: 800 30px/50px "conslas";
            }
            ul.arrow li.left{
                float:left;
            }
            ul.arrow li.right{
                float: right;
            }
            ul.circle li.current{
                color:#fff;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul class="img">
                <li><img src="img/p1.jpg" alt="" /></li>
                <li><img src="img/p2.jpg" alt="" /></li>
                <li><img src="img/p3.jpg" alt="" /></li>
                <li><img src="img/p4.jpg" alt="" /></li>
                <li><img src="img/p5.jpg" alt="" /></li>
            </ul>
            <ul class="circle">
 
            </ul>
            <ul class="arrow">
                <li class="left"><</li>
                <li class="right">></li>
            </ul>
        </div>
 
        <script>
            var box=document.getElementsByTagName("div")[0];//轮播图容器
            var img=box.children[0];//图片容器
            var circle=box.children[1];//小圆点容器
            var arrow=box.children[2];//箭头容器
            var left=arrow.children[0];//左箭头
            var right=arrow.children[1];//右箭头
            var index=0;//当前显示的图片的索引
 
            //需求分析：
            //1、在最后一幅图后面添加第一幅图
            var addImg=img.children[0].cloneNode(true);
            img.appendChild(addImg);
 
            //2、动态添加小圆点，同时点亮第一个
            var circles=img.children;//小圆点的个数即所有图片的个数集合
            for(var i=1;i<circles.length;i++){
                var circleLi=document.createElement("li");
                circleLi.innerHTML=i;
                circle.appendChild(circleLi);
            }
 
            var points=circle.children;
            light();
 
            function light(){
                for(var i=0;i<points.length;i++){
                    points[i].className="";
                    if(index>4){
                        points[0].className="current";
                    }else{
                        points[index].className="current";
                    }
                }
            }
            //3、点击小圆点，ul移动到相应的图片,同时点亮小圆点
            for(var j=0;j<points.length;j++){
                points[j].index=j;
                points[j].onclick=function(){
                    index=this.index;
                    animate(img,-index*box.offsetWidth);
                    light();
                }
            }
 
            //4、左右箭头切换图片
          right.onclick=autoplay;
 
          function autoplay(){
            index++;
            if(index>circles.length-1){
                img.style.left=0;
                index=1;
            }
            animate(img,-index*box.offsetWidth);
            light();
          }
          left.onclick=function(){
             index--;
             if(index<0){
                img.style.left=-(circles.length-1)*box.offsetWidth+"px";
                index=circles.length-2;
             }
             animate(img,-index*box.offsetWidth);
             light();
          }
            //5、添加自动轮播功能
           box.timer=setInterval(autoplay,2000);
           box.onmouseover=function(){
            clearInterval(box.timer);
           }
           box.onmouseout=function(){
            clearInterval(box.timer);
            box.timer=setInterval(autoplay,2000);
           }
 
 
            function animate(obj,target){
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    var speed=(obj.offsetLeft>target?-20:20);
                    if(Math.abs(obj.offsetLeft-target)>20){
                        obj.style.left=obj.offsetLeft+speed+"px";
                    }else{
                        obj.style.left=target+"px";
                    }
                },20)
            }
        </script>
    </body>
</html>

  2、无缝轮播图。此类轮播图不会显示图片移动的全过程。

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                border: none;
                list-style: none;
            }
 
            img {
                width: 310px;
                height: 220px;
            }
 
            .slider {
                width: 310px;
                height: 265px;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
                cursor: pointer;
            }
 
            .slider-img {
                width: 310px;
                height: 220px;
            }
 
            ul {
                list-style: none;
            }
 
            li {
                position: absolute;
                top: 0;
                left: 0;
            }
 
            .slider-ctrl {
                text-align: center;
                padding-top: 10px;
            }
 
            .slider-ctrl-con {
                display: inline-block;
                width: 24px;
                height: 24px;
                background: url("img/icon.png") no-repeat -24px -780px;
                text-indent: -99999px;
                margin: 0 5px;
                cursor: pointer;
            }
 
            .slider-ctrl-con.current {
                background-position: -24px -760px;
            }
 
            .prev,
            .next {
                position: absolute;
                top: 40%;
                width: 30px;
                height: 35px;
                background: url("img/icon.png") no-repeat;
            }
 
            .prev {
                left: 10px;
            }
 
            .next {
                right: 10px;
                background-position: 0 -44px;
            }
        </style>
    </head>
 
    <body>
        <div class="slider" id="slider" style="overflow: hidden;">
            <div class="slider-img">
                <ul>
                    <li>
                        <a href="#"><img src="img/p1.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p2.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p3.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p4.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p5.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p6.jpg" alt="" /></a>
                    </li>
                </ul>
            </div>
            <div class="slider-ctrl">
                <span class="prev" id="prev"></span>
                <span class="next" id="next"></span>
            </div>
        </div>
        <script type="text/javascript">
            window.onload = function() {
                var slider = document.getElementById("slider"); //获取元素
                var ul = document.getElementsByTagName('ul')[0];
                var lis = ul.children;
                var per = document.getElementById('prev');
                var next = document.getElementById('next');
                var imgWidth = slider.offsetWidth; //获取图片的宽度作为缓动的距离
 
                for (var i = 0; i < lis.length; i++) { //添加span，用于点击跳转到指定图片
                    var span = document.createElement('span');
                    span.innerHTML = i;
                    span.className = "slider-ctrl-con "; //添加未选中状态
                    per.parentNode.insertBefore(span, per);
                    lis[i].style.left = imgWidth + "px";
                }
 
                var num = 0; //标记索引值
                var span = document.getElementsByTagName('span'); //获取span元素
                span[0].className += " current"; //为第一个span标签状态设置为选中状态
                lis[0].style.left = 0 + "px"; //为第一张图片设置显示位置
                for (var k = 0; k < span.length; k++) {
                    span[k].onclick = function() { //为所有span标签添加点击事件（包括左右按钮）
                        if (this.className == "prev") { //当点击的是向前播放按钮时
                            //要看上一张
                            animation(lis[num], imgWidth); //当前图片缓动到右边位置
                            num = --num < 0 ? lis.length - 1 : num; //索引值设置为前一张图片的索引，当索引值小于0时则等于最后一张的索引
                            lis[num].style.left = -imgWidth + "px"; //将前一张图片瞬间移动到左侧
                            animation(lis[num], 0); //将移动到左侧的图片，缓动到显示位置
                            light(); //点亮底部相应的span标签
                        } else if (this.className == 'next') { //当点击的是向后播放按钮时
                            //要看下一张
                            autoplay(); //按自动播放顺序播放
                        } else {
                            //获取当前被点击的盒子的索引值
                            var index = this.innerHTML;
                            //中间：left = 0；左边：left = -imgWidth+“px";右边：left = +imgWidth+”px“
                            //判断点击的span和当前的图片的索引，谁大谁小
                            if (index > num) { //当点击索引值大于当前播放图片的索引值时
                                lis[index].style.left = imgWidth + "px"; //该索引值对应的图片瞬间移动到右侧
                                animation(lis[num], -imgWidth); //当前播放图片缓动到左侧
                                animation(lis[index], 0); //再缓动至当前播放位置
                                num = index; //改变索引值
                                light(); //点亮底部相应的span标签
                            }
                            if (index < num) {
                                lis[index].style.left = -imgWidth + "px";
                                animation(lis[num], imgWidth);
                                animation(lis[index], 0);
                                num = index;
                                light();
                            }
                        }
 
                    }
                }
 
                function animation(obj, target) { //缓动
                    clearInterval(obj.timer); //为避免多个定时器同时运行带来的bug，在用定时器之前先清理定时器
                    obj.timer = setInterval(function() {
                        var speed = (target - obj.offsetLeft) / 10;
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //为确保能搞达到最终目标值，给speed取整
                        obj.style.left = obj.offsetLeft + speed + "px"; //赋值给当前元素
                        if (target == obj.offsetLeft) { //属性达到目标值时，清理定时器
                            clearInterval(obj.timer);
                        }
                    }, 20);
                }
 
                slider.timer = setInterval(function() { //当前无操作时自动播放
                    autoplay();
                }, 2000);
 
                slider.onmouseover = function() { //鼠标进入图片区域停止自动播放
                    clearInterval(slider.timer);
                }
 
                slider.onmouseout = function() { //鼠标离开图片区域恢复自动播放
                    clearInterval(slider.timer);
                    slider.timer = setInterval(function() {
                        autoplay();
                    }, 2000);
                }
 
                function light() {
                    for (var j = 0; j < span.length - 2; j++) {
                        span[j].className = "slider-ctrl-con ";
                    }
                    span[num].className += " current";
                }
 
                function autoplay() { //封装自动播放函数
                    animation(lis[num], -imgWidth);
                    num = ++num > lis.length - 1 ? 0 : num;
                    lis[num].style.left = imgWidth + "px";
                    animation(lis[num], 0);
                    light();
                }
            }
        </script>
    </body>
 
</html>

  二、旋转木马。顾名思义，旋转木马的动画效果和游乐园中旋转木马类似，因此而得名。旋转木马的原理和轮播图其实差不多，只是旋转木马需要设置每一张图片的z-index属性，且每一张的z-index的设置精准、满意需要一定的经验。

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
 
            .wrap {
                width: 1200px;
                margin: 10px auto;
            }
 
            .slider {
                height: 500px;
                position: relative;
            }
 
            .slider li {
                list-style: none;
                position: absolute;
                left: 200px;
                top: 0;
            }
 
            .slider li img {
                width: 100%;
                display: block;
            }
 
            .arrow {
                opacity: 1;
            }
 
            .prev,
            .next {
                width: 76px;
                height: 112px;
                position: absolute;
                top: 50%;
                margin-top: -56px;
                background: url(img/prev.png) no-repeat;
                z-index: 99;
            }
 
            .next {
                right: 0;
                background: url("img/next.png") no-repeat;
            }
 
            .prev {
                left: 0;
            }
        </style>
    </head>
 
    <body>
        <div class="wrap">
            <div class="slider">
                <ul>
                    <li><img src="img/1.jpg" /></li>
                    <li><img src="img/2.png" /></li>
                    <li><img src="img/3.jpg" /></li>
                    <li><img src="img/4.jpg" /></li>
                    <li><img src="img/5.jpg" /></li>
                </ul>
                <div class="arrow">
                    <div class="prev" id="prev"></div>
                    <div class="next" id='next'></div>
                </div>
            </div>
        </div>
        <script>
            var json = [{ //  0
                width: 400,
                top: 70,
                left: 50,
                opacity: 0.2,
                zIndex: 2
            }, { // 1
                width: 600,
                top: 120,
                left: 0,
                opacity: 0.8,
                zIndex: 3
            }, { // 2
                width: 800,
                top: 100,
                left: 200,
                opacity: 1,
                zIndex: 4
            }, { // 3
                width: 600,
                top: 120,
                left: 600,
                opacity: 0.8,
                zIndex: 3
            }, { //4
                width: 400,
                top: 70,
                left: 750,
                opacity: 0.2,
                zIndex: 2
            }];
            //根据json的内容把图片缓动到相应位置，同时缓动
            var liArr = document.getElementsByTagName('li');
            var next = document.getElementById('next');
            var prev = document.getElementById('prev');
 
            function move() {
                for (var i = 0; i < liArr.length; i++) {
                    animation(liArr[i], json[i]);
                }
            }
            move()
            next.onclick = function() {
                var last = json.pop();
                json.unshift(last);
                move()
            }
            prev.onclick = function() {
                var first = json.shift();
                json.push(first);
                move();
            }
 
            function animation(obj, json, fn) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function() {
                    var flag = true;
                    //json里面有几个属性就要执行几次
                    var target = 0; //记录目标位置
                    var leader = 0; //记录当前位置
                    var speed = 0; //记录速度
                    for (var key in json) {
                        if (key == 'opacity') {
                            target = Math.round(json['opacity'] * 100) //0-100
                            leader = getStyle(obj, 'opacity') * 100 //0-100
                        } else {
                            target = parseInt(json[key]);
                            leader = parseInt(getStyle(obj, key));
                        }
                        speed = (target - leader) / 10;
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        leader = leader + speed; //0-100
                        if (key == 'opacity') {
                            obj.style.opacity = leader / 100;
                            obj.style.filter = "alpha(opacity=" + leader + ")";
                        } else if (key == "zIndex") {
                            obj.style.zIndex = json['zIndex'];
                        } else {
                            obj.style[key] = leader + "px";
                        }
 
                        if (leader != target) {
                            flag = false
                        }
                    }
                    if (flag) {
                        clearInterval(obj.timer);
                        if (fn) {
                            fn();
                        }
                    }
 
                }, 20)
            }
 
            function getStyle(obj, attr) {
                if (window.getComputedStyle) {
                    return window.getComputedStyle(obj, null)[attr]
                } else {
                    return obj.currentStyle[attr];
                }
            }
        </script>
    </body>
 
</html>

  三、楼层跳跃。该动画效果也大多使用在电商网站，当点击到相应的标签时就会跳到该位置的内容。例如：当点击淘宝旁的楼层跳跃中的美妆/女装时就会跳到美妆/女装模块。

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
            ul.nav{
                position: fixed;
                top: 80px;
                left: 20px;
            }
            ul.nav li{
                width: 70px;
                height: 40px;
                color: #fff;
                cursor: pointer;
                background: #ccc;
                text-align: center;
                line-height: 40px;
                list-style: none;
                margin-top: 10px;
            }
            ul.nav .current{
                background: red;
            }
            ul.content{
                height: 500%;
            }
            ul.content li{
                height: 20%;
                text-align: center;
                font: 100px/200px "微软雅黑";
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <li>享品质</li>
            <li>服饰美妆</li>
            <li>家电手机</li>
            <li>电脑数码</li>
            <li>3C运动</li>
        </ul>
        <ul class="content">
            <li>享品质</li>
            <li>服饰美妆</li>
            <li>家电手机</li>
            <li>电脑数码</li>
            <li>3C运动</li>
        </ul>
 
        <script type="text/javascript">
            var color=['skyblue','yellowgreen','pink','cornflowerblue',' #87CEEB'];
            var navlis=document.getElementsByTagName("ul")[0].children;
            var contentlis=document.getElementsByTagName("ul")[1].children;
            for(var i=0;i<color.length;i++){
                contentlis[i].style.background=color[i];
            }
 
            for(var i=0;i<navlis.length;i++){
                navlis[i].index=i;
                navlis[i].onclick=function(){
                    for(var j=0;j<navlis.length;j++){
                        navlis[j].className="";
                    }
                    this.className="current";
 
                    var yPos=this.index*document.body.offsetHeight;
                    clearInterval(window.timer);
                    window.timer=setInterval(function(){
                        var speed=(yPos-scroll().top)/10;
                        speed=speed>0?Math.ceil(speed):Math.floor(speed);
                        window.scrollTo(0,scroll().top+speed);
                        if(scroll().top==yPos){
                            clearInterval(Window.timer);
                        }
                    },30)
                }
            }
 
            window.onscroll=function(){
                var num=scroll().top/document.body.offsetHeight;
                num=Math.ceil(num*2)/2;
                if(parseInt(num)!=num){
                    num=num-0.5;
                }
                for(var j=0;j<navlis.length;j++){
                    navlis[j].className="";
                }
                navlis[num].className="current";
            }
 
            function scroll(){
                return{
                    "top":document.body.scrollTop+document.documentElement.scrollTop,
                    "left":document.body.scrollLeft+document.documentElement.scrollLeft
                }
            }
        </script>
    </body>
</html>

  四、返回顶部。返回顶部严格来说并不算真正意义上的动画效果，通过锚点就可以实现返回顶部的效果，但此返回顶部效果是滚动条缓慢的回到顶部，这个动画效果几乎在每个网页都可以看到。

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html{
                height:100%;
            }
            body{
                height: 600%;
            }
            div{
                position: fixed;
                right: 30px;
                bottom: 20px;
                display: none;
 
            }
        </style>
    </head>
    <body>
        <div>
            <img src="Top.jpg" />
        </div>
 
        <script type="text/javascript">
            var div=document.getElementsByTagName("div")[0];
            var img=div.children[0];
            window.onscroll=function(){
                if(scroll().top>100){
                div.style.display="block";
            }else{
                div.style.display="none";
                }
            }
 
            img.onclick=function(){
                clearInterval(img.timer);
                img.timer=setInterval(function(){
                    var speed=(0-scroll().top)/10;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    window.scrollTo(0,scroll().top+speed);
                    if(scroll().top==0){
                        clearInterval(img.timer);
                    }
                },30)
            }
 
 
            function scroll(){
                return{
                   "top":document.documentElement.scrollTop+document.body.scrollTop,
                   "left":document.documentElement.scrollLeft+document.body.scrollLeft
                }
            }
        </script>
    </body>
</html>

  常见的JS动画效果还有许多更炫酷的，以上皆是一些比较普通的，但无论多炫酷的动画效果都是以以上的动画效果的原理为基础，以上动画虽然普通但性能方面没有太大问题。   from:https://my.oschina.net/sichunchen/blog/1544549

龙生   01 Oct 2017
View Details

支持响应式编程 Spring Framework 5.0 稳定版正式发布

Spring Framework 5.0 GA 稳定版已正式发布。 经过一年多的里程碑版和 RC 版，以及将近两年的开发，Spring Framework 5.0 GA 稳定版现已正式发布。可从 repo.spring.io 和 Maven Central 获得。 这个全新一代的框架带来了以下新特性： 支持 JDK 9 和 Java EE 8 级别的 API（如 Servlet 4.0） 与 Reactor 3.1, JUnit 5, 和 Kotlin 语言的全面集成 带来了许多函数式 API 变体 (functional API variants) 响应式堆栈 Web 框架 —— Spring WebFlux 此外，值得注意的是，整个 Spring Framework 5.0 代码库运行于 Java 8 之上。因此 Spring Framework 5.0 对环境的最低要求是 Java 8。 可以看到，Spring Framework 5.0 的亮点是响应式编程，这是一个重要的范式转变。随着响应式编程越来越受欢迎，我们可以期待越来越多的技术将实现响应式解决方案。 相关链接： Spring Framework 5.0 中的新功能 迁移到 Spring Framework 5.0 官方的 Spring Framework 5 FAQ 最新的参考文档 更多内容请参阅发布主页和详细更新说明。 Maven

1
2
3
4
5
6
7
<span class="hljs-tag">&lt;<span class="hljs-name">dependencies</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">dependency</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>org.springframework<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>spring-context<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">version</span>&gt;</span>5.0.0.RELEASE<span class="hljs-tag">&lt;/<span class="hljs-name">version</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">dependency</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">dependencies</span>&gt;</span>

Gradle

1
2
3
dependencies {
    compile <span class="hljs-string">'org.springframework:spring-context:5.0.0.RELEASE'</span>
}

下载地址： http://projects.spring.io/spring-framework/ Source code (zip) Source code (tar.gz) 相关链接 […]

龙生   01 Oct 2017
View Details

响应式编程

简称RP（Reactive Programming） 响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。 例如，在命令式编程环境中，a:=b+c表示将表达式的结果赋给a，而之后改变b或c的值不会影响a。但在响应式编程中，a的值会随着b或c的更新而更新。 电子表格程序就是响应式编程的一个例子。单元格可以包含字面值或类似"=B1+C1"的公式，而包含公式的单元格的值会依据其他单元格的值的变化而变化。 响应式编程最初是为了简化交互式用户界面的创建和实时系统动画的绘制而提出来的一种方法，但它本质上是一种通用的编程范式。 例如，在MVC软件架构中，响应式编程允许将相关模型的变化自动反映到视图上，反之亦然。

龙生   01 Oct 2017
View Details

php-fpm

PHP-FPM(FastCGI Process Manager：FastCGI进程管理器)是一个PHPFastCGI管理器，对于PHP 5.3.3之前的php来说，是一个补丁包[1]  ，旨在将FastCGI进程管理整合进PHP包中。如果你使用的是PHP5.3.3之前的PHP的话，就必须将它patch到你的PHP源代码中，在编译安装PHP后才可以使用。 相对Spawn-FCGI，PHP-FPM在CPU和内存方面的控制都更胜一筹，而且前者很容易崩溃，必须用crontab进行监控，而PHP-FPM则没有这种烦恼。

龙生   01 Oct 2017
View Details

Copyright © 2025 Longsheng All rights reserved