0%

之前写的图片轮播,在手机端的微信和QQ的内置浏览器中一直都有bug。

bug如下:

1.手指滑动图片时有点卡顿。

2.松开手指后,图片会闪动一下(显示白色),再继续滑动,但是这样的滑动没有卡顿。

这个问题首先让我想到的就是滑动图片用的方法。我是用translateX来移动图片的,但是我改用改变left值也是一样的问题,所以我就想到是不是js代码哪里有问题呢。

我google了这个问题,发现有个人和我的问题类似,是两个月前的,现在看他的代码发现已经解决了。

然后我就对比我俩的代码,发现没什么特别的地方,改了一些地方,但是都没有效果。。。。我也引用了他的js代码,但是依然有bug。

后来我就从css代码上入手,发现了这样的一条代码

1
backface-visibility: hidden;  

是放在ul中的,写入之后,两个bug都解决了。。。

MDN:backface-visibility 属性指定当元素背面朝向观察者时是否可见。元素的背面总是透明的,当其朝向观察者时,显示正面的镜像。

如下图,图片来自MDN。
backface-visibility.png
加上该样式之后问题解决。

Array.prototype.map()如果你使用了一段时间的JavaScript,你可能会遇到两个比较相似的数组方法:Array.prototype.map()Array.prototype.forEach()

所以,有什么不同呢?

####Map&ForEach的定义
首先让我们看一下在MDN上的定义:

  • forEach() —— 给每个数组元素执行一次提供的函数。
  • map() —— 创建一个新数组,再给每一个新数组元素执行一次提供的函数。

这到底意味着什么?

forEach()方法实际上不会返回任何东西(undefined)。它只是简单的在每个数组元素上执行你提供的函数。这个回调函数是被允许改变原有数组的。

map()方法也是在每个数组元素上执行你提供的函数。不同的是,map()会根据回调函数的返回值来返回一个相同大小的新数组。

代码示例

思考以下数组。如果我们想把每个数组元素乘以二,那map()或者forEach()都可以使用。

1
let arr = [1, 2, 3, 4, 5];

ForEach:
你将不会从forEach中得到一个返回值

1
2
3
arr.forEach((num, index) => {
return arr[index] = num * 2;
});

结果:

1
// arr = [2, 4, 6, 8, 10]

Map:

1
2
3
let doubled = arr.map(num => {
return num * 2;
});

结果:

1
// doubled = [2, 4, 6, 8, 10]

###速度
jsPerf是一个很好的用来测试不同JavaScript方法和函数执行速度的网站。
这是forEach()map()的测试结果:
1_aVOlJ0l02ymgVrQ8axIBrQ.png
正如你所看到的,在我的机器上,forEach()要比map()慢70%。
你的浏览器可能会不同。你可以试一下
###功能
如果你喜欢函数式编程,那使用map()可能会更好。
这是因为forEach()会影响和改变我们的源数组,然而map()会返回一个全新的数组——从而保证源数组不变。
###哪一个更好?
这取决于你想实现什么功能。
当你不会改变数组中的数据时,forEach()可能会更好,只是想对数组做些什么,比如存入到数据库或者日志中:

1
2
3
4
5
6
7
8
let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
console.log(letter);
});
// a
// b
// c
// d

当要改变数据时,map()可能会更好。不仅它更快,而且还会返回新的数组。这意味着我们能做很酷的事情,像链接其他方法(map(), filter(), reduce(), 等等)

1
2
3
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]

上面的代码中,我们首先做的是将数组中每个元素乘以2。在这之后,我们过滤了这个数组,就保存了比5大的元素。最终剩下了[6, 8, 10]这个数组arr2

原文:https://codeburst.io/javascript-map-vs-foreach-f38111822c0f

nginx

1
2
3
yum install nginx	//安装nginx
service nginx start //启动nginx服务
wget http://127.0.0.1 //测试nginx服务

php

1
2
3
4
5
6
yum install php php-fpm	//安装php
yum install php-mysql php-gd php-imap php-ldap php-odbc php-pear php-xml php-xmlrpc //安装php扩展,可以连接mysql
service php-fpm start //启动php-fpm服务
cat /etc/php-fpm.d/www.conf |grep -i 'listen =' //查看php-fpm配置
nginx -t //查找nginx配置文件
vi /etc/nginx/nginx.conf //修改nginx配置文件

配置如下

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
server {
listen 80;
root /usr/share/nginx/html;
server_name localhost;
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
location / {
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
location ~ .php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}
1
2
service nginx restart	//重启nginx服务
wget http://127.0.0.1 //测试nginx服务

mysql

Centos 7.2 安装 Mysql 5.7.13

1
2
3
4
5
wget http://repo.mysql.com/mysql57-community-release-el7-8.noarch.rpm	//下载mysql的repo源
rpm -ivh mysql57-community-release-el7-8.noarch.rpm --nodeps --force //安装mysql57-community-release-el7-8.noarch.rpm包
yum install mysql-server //安装mysql
service mysqld status //查看MySQL服务是否已启动
systemctl start mysqld //启动服务

重置root密码

MySQL5.7会在安装后为root用户生成一个随机密码,而不是像以往版本的空密码。

可以安全模式修改root登录密码或者用随机密码登录修改密码。下面用随机密码方式

MySQL为root用户生成的随机密码通过mysqld.log文件可以查找到:

1
grep 'temporary password' /var/log/mysqld.log

修改root用户密码:(MySQL的密码策略比较复杂,过于简单的密码会被拒绝)

1
2
3
4
mysql -u root -p
mysql> Enter password: (输入刚才查询到的随机密码)
mysql> SET PASSWORD FOR 'root'@'localhost'= 'Root-123';
mysql> exit

用root新密码登录:

1
mysql -u root -pRoot-123

如果上面的方式不能修改可以使用下面安全模式修改root:

关闭服务

1
2
systemctl stop mysqld.service
vi /etc/my.cnf

mysqld下面添加skip-grant-tables 保存退出启动服务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
systemctl start mysqld.service
mysql -u root //不用密码直接回车

use mysql

update user set authentication_string=password('Root-123') where User='root' and Host='localhost';

flush privileges;

exit;

vi /etc/my.cnf 把 skip-grant-tables 一句删除保存退出重启mysql服务

systemctl restart mysqld.service

再次登录即可

1
mysql -u root -pRoot-123

如果进行操作出现下面的提示:

You must reset your password using ALTER USER statement before executing this statement.

就再设置一遍密码

1
set password = password('Root-123');

开放3306端口

允许使用用户名root密码Root-123456从任何主机连接到mysql服务器

1
2
3
mysql>GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'Root-123456' WITH GRANT OPTION;
mysql>FLUSH PRIVILEGES;
mysql>exit;

开启防火墙mysql 3306端口的外部访问

1
2
firewall-cmd --zone=public --add-port=3306/tcp --permanent
firewall-cmd --reload

安装SSL证书

1.复制证书和KEY到nginx目录下 // /etc/nginx/

2.打开/etc/nginx/nginx.conf,增加代码如下

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
server {

listen 443;

server_name www.xuejichang.cn; #填写绑定证书的域名

ssl on;

ssl_certificate 1_www.xuejichang.cn_bundle.crt;

ssl_certificate_key 2_www.xuejichang.cn.key;

ssl_session_timeout 5m;

ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #按照这个协议配置

ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;#按照这个套件配置

ssl_prefer_server_ciphers on;

location / {

root /usr/share/nginx/html; #站点目录

index index.html index.htm;

}

location ~ .php$ {

fastcgi_pass 127.0.0.1:9000;

fastcgi_index index.php;

fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

include fastcgi_params;

}

}

此时nginx.conf中有两个server

3.在80端口的server中添加代码:

1
rewrite ^(.*) https://$host$1 permanent;	//将站点内的所有网站自动跳转到https链接

4.service nginx restart //重启nginx服务
开启文件共享


1
2
3
4
5
6
7
8
9
location /download {#访问地址

autoindex on; #开启共享

autoindex_exact_size off; #显示出文件的大概大小,单位是kB或者MB或者GB

autoindex_localtime on; #显示的文件时间为文件的服务器时间

}

去掉url中的html后缀

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

//添加上以下代码:

if (!-e $request_filename){

rewrite ^(.*)$ /$1.html last;

break;

}

}

安装Node.js 10

1
2
3
4
5
sudo yum clean all && sudo yum makecache fast

sudo yum install -y gcc-c++ make

sudo yum install -y nodejs