搜索到
107
篇与
的结果
-
强大的Array.prototype.splice() 之所以会单独针对这个api写这么一篇博文，一方面是因为最近在一次面试中聊到了这个API，我没能完全说出它的用法；另一方面则是因为通过熟悉后觉得这个api确实很灵活很强大，充分体现了javascript的灵活性。所以写这么一篇博文，可以让自己更深刻地记住这个方法，也希望能让更多地同仁用这个方法让自己的javascript代码更加简洁，更加有效率。MDN Web Docs中对Array.prototype.splice()的描述信息如下splice(start, deleteCount, item1, item2, ...) 方法通过删除或替换现有元素和/或添加新元素来更改数组的内容。传参信息如下1. start 从什么位置开始修改当前数组，这个参数有如下几种情况0到数组长度-1，即当前数组的任意位置。大于数组长度-1，不报错，但是不会删除当前数组的元素，第二个参数无效。但是，如果这个时候传入了第三个，以及第四个。。。参数，那么，这些参数值会被添加到数组的末尾位置，也就类似于push方法。小于0，如果开始位置为负数，会从数组的末尾倒着查找，如，-1为最后一个元素，-2为倒数第二个元素。2. deleteCount 要删除的内容的长度，这个参数有如下几种情况0或负数 不删除数组元素。大于0并且小于start指定位置到数组最后一个元素的长度，则删除指定长度的元素。大于start指定位置到数组最后一个元素的长度，删除从start位置后面所有的元素，如splice(0, 99999999)会晴空长度小于99999999的数组3. 在start位置开始要添加或者替换的元素，可以有多个。针对上面的描述，我们一一验证它的所有用法。删除元素（第二个参数不为0，后续参数不传入，只删除）let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 1); // 从第二个位置开始删掉一个元素 console.log(ary); // ['a', 'c', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 2); // 从第二个位置开始删掉两个元素 console.log(ary); // ['a', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(-2, 1); // 删掉倒数第二个元素‘e’ console.log(ary); // ['a', 'b', 'c', 'd', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(0, ary.length); // 删掉所有元素 console.log(ary); // []添加元素(第二个参数为0，后续参数不为空，则只增加不删除)let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(ary.length, 0, 'x'); // 在数组末尾追加一个元素 console.log(ary); // ['a', 'b', 'c', 'd', 'e', 'f', 'x']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 0, 'x'); // 在数组第二个元素前插入一个元素 console.log(ary); // ['a','x', 'b', 'c', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(-2, 0, 'x'); // 在数组倒数第二个元素前插入一个元素 console.log(ary); // ['a', 'b', 'c', 'd', 'x', 'e', 'f']let ary = ['a', 'b', 'c']; let ary2 = ['d', 'e', 'f'] ary.splice(ary.length, 0, ...ary2); // 数组拼接 console.log(ary); // ['a', 'b', 'c', 'd', 'e', 'f']更新/替换元素（第二个参数不为0，后续参数不为空，这里需要注意的是，传入的替换元素的个数可以等于前面的长度，也可以不等于前端的长度）替换元素其实执行的是先删除再插入，所以一定要清楚传入参数的意义let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 1, 'x'); // 替换第二个元素‘b’为‘x’ (长度和传入的替换元素个数都为一) console.log(ary); // ['a', 'x', 'c', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 2, 'x'); // 删掉第二个和第三个元素‘b’ ‘c’，插入一个元素‘x’ (长度大于传入的替换元素个数) console.log(ary); // ['a', 'x', 'd', 'e', 'f']let ary = ['a', 'b', 'c', 'd', 'e', 'f']; ary.splice(1, 2, 'x', 'y', 'z'); // 删掉第二个和第三个元素‘b’ ‘c’，插入三个元素‘x’，‘y’， ‘z’ (长度小于传入的替换元素个数) console.log(ary); // ['a', 'x','y', 'z', 'd', 'e', 'f']上面这些就是我目前总结的常用的splice的用法，如有更多使用方法，欢迎留言讨论 -
一个来自create-react-app脚手架警告的思考 最近在开发一个react项目，项目是用create-react-app脚手架创建的，当我在我的项目的菜单栏中添加了一个打开一个外链的a标签时，我收到了一个来自create-react-app的警告信息，信息内容如下意思就是说“在没有rel="noopener noreferrer"属性的a标签中使用target="_blank"存在一定的风险”这个提示瞬间把我吸引了，以前关于a标签收到的提示都是没有设置alt属性啊什么的，但是也只是提示我说为了显示的友好什么的，这次竟然提示我有风险，面对这种问题，必须一探究竟啊。查阅了一些资料得到了如下关于a标签一个介绍当一个外部链接使用了target=_blank的方式，这个外部链接会打开一个新的浏览器tab。此时，新页面会打开，并且和原始页面占用同一个进程。这也意味着，如果这个新页面有任何性能上的问题，比如有一个很高的加载时间，这也将会影响到原始页面的表现。如果你打开的是一个同域的页面，那么你将可以在新页面访问到原始页面的所有内容，包括document对象(window.opener.document)。如果你打开的是一个跨域的页面，你虽然无法访问到document，但是你依然可以访问到location对象。不看不知道一看吓一跳有木有。主要是两个点是我以前从未在意的用target="_blank"方式打开的tab和原始页面占用同一个进程（UI进程）新打开的页面能获取到原始页面的document。第一个问题不用我说都知道是非常需要注意的，新的页面中的所有行为都会间接影响到原始页面的性能。这里主要研究第二个问题。为此，我做了小小的实验。上图解释：首先打开了第一个页面，第一个页面只有一个“打开一个新页面”的a标签点击这个链接，打开了一个新页面。新页面中有一个按钮，“告诉打开我的那个页面，我喜欢林志玲”。点击新页面的按钮然后回到第一个页面，发现第一个页面多出来了一排红色的文字“我喜欢林志玲”。停在第一个页面5s钟，第一个页面自动跳转到了百度首页。上面两个页面的代码分别如下：opener-test.html<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <a target="_blank" href="test-opener-2.html">打开一个新页面</a> </body> </html>opener-test-2.html<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h1>我是新打开的页面</h1> <button type="button" id="btn">告诉打开我的那个页面，我喜欢林志玲</button> <script> document.getElementById('btn').addEventListener('click', function() { var _opener = window.opener; var p = _opener.document.createElement('p'); p.innerHTML = "我喜欢林志玲"; p.style.color = "#f33"; _opener.document.body.appendChild(p); setTimeout(function() { _opener.location.href = "//www.baidu.com"; }, 5000) }); </script> </body> </html>新的页面不仅往原始页面添加了一段话，而且还让他离开了原来的页面。注：在上面的例子中，两个页面位于同一个域下面，如果两个页面位于不同的域，那上面的第一个效果就是不行的，因为不同域的情况下，新页面拿不到opener对象的document，但是location对象是可以拿到的，所以第二个效果任然有效。怎么禁止上面的行为呢？按照create-react-app的提示信息，给连接加上rel属性，如下：<a rel="noopener noreferrer" target="_blank" href="https://marvengong.github.io/fastmock-docs/book/">上面的rel属性值多了一个noreferrer它的作用和noopener是一样的，只是适用于低版本的浏览器。这样处理后，新打开的页面的window对象上就没有opener和referrer对象了。
-
nodejs ORM框架sequelize.js实体常用配置 请输入图片描述const sequelize = require('../db/sequelize'); const Sequelize = require('sequelize'); const User = sequelize.define('user', { id: { type: Sequelize.INTEGER, field: 'id', primaryKey: true, autoIncrement: true }, username: Sequelize.STRING, password: Sequelize.STRING, email: Sequelize.STRING, nickname: Sequelize.STRING, createdAt: { type: Sequelize.DATE, field: 'created_at' }, updatedAt: { type: Sequelize.DATE, field: 'updated_at' }, }, { // 实例对应的表名 tableName: 'user', // 如果需要sequelize帮你维护createdAt,updatedAt和deletedAt必须先启用timestamps功能 timestamps: true, // 将createdAt对应到数据库的created_at字段 createdAt: 'created_at', // 将updatedAt对应到数据库的updated_at字段 updatedAt: 'updated_at', // And deletedAt to be called destroyTime (remember to enable paranoid for this to work) deletedAt: false, //'deleted_at', // 删除数据时不删除数据，而是更新deleteAt字段 如果需要设置为true，则上面的deleteAt字段不能为false，也就是说必须启用 paranoid: false }); module.exports = User;
-
linux环境下redis安装和启动 redis安装redis下载方式进入到/usr/local目录后使用wget从网上下载redis安装包wget http://download.redis.io/releases/redis-4.0.1.tar.gz从官网下载 https://redis.io/download 拷贝到/usr/local 目录解压下载下来的压缩包cd /usr/local tar redis-4.0.1.tar.gz!进入目录安装cd /usr/local/redis-4.0.1 make test make install执行完上诉命令安装后，redis所有的相关文件都会安装到当前目录下，其中，可执行文件redis-server或者redis-cli等都位于src目录下。启动redis服务. 在src目录下直接执行redis-server即可启动服务，这种方式启动的redis服务是在前台运行的，退出命令行工具后，redis服务就停止了。我们希望redis在后台运行。[root@redis_01 redis]# redis-server /etc/redis/sentinel.conf --sentinel 7980:X 23 Nov 18:02:41.348 * Increased maximum number of open files to 10032 (it was originally set to 1024). _._ _.-``__ ''-._ _.-`` `. `_. ''-._ Redis 3.0.5 (00000000/0) 64 bit .-`` .-```. ```\/ _.,_ ''-._ ( ' , .-` | `, ) Running in sentinel mode |`-._`-...-` __...-.``-._|'` _.-'| Port: 26379 | `-._ `._ / _.-' | PID: 7980 `-._ `-._ `-./ _.-' _.-' |`-._`-._ `-.__.-' _.-'_.-'| | `-._`-._ _.-'_.-' | http://redis.io `-._ `-._`-.__.-'_.-' _.-' |`-._`-._ `-.__.-' _.-'_.-'| | `-._`-._ _.-'_.-' | `-._ `-._`-.__.-'_.-' _.-' `-._ `-.__.-' _.-' `-._ _.-' `-.__.-' 7980:X 23 Nov 18:02:41.355 # WARNING: The TCP backlog setting of 511 cannot be enforced because /proc/sys/net/core/somaxconn is set to the lower value of 128. 7980:X 23 Nov 18:02:41.355 # Sentinel runid is 43de323d55627d896b2caf1da2e305f0eb59dcee 7980:X 23 Nov 18:02:41.356 # +monitor master mymaster 127.0.0.1 6379 quorum 1 ^C7980:signal-handler (1448273325) Received SIGINT scheduling shutdown... 7980:X 23 Nov 18:08:45.618 # User requested shutdown... 7980:X 23 Nov 18:08:45.618 # Sentinel is now ready to exit, bye bye... . 通过nohub方式启动，nohub redis-server /etc/redis/sentinel.conf --sentinel >> /var/log/redis.log&启动服务后，命令行会退出，并且将日志文件输出到/var/log目录下的redis.log文件中. 修改配置文件在sentinel.conf文件中加入下面的配置daemonize yes logfile "/var/log/sentinel_log.log"然后通过sentinel启动redis-server /usr/local/redis-4.0.1/sentinel.conf --sentinel后面的两种启动方式都会以后台的方式启动。如果不需要--sentinel通过sentinel启动，修改的配置文件就是redis.conf
-
nodemon+cross-env+config实现支持热更新的能根据不同环境加载不同配置的nodejs环境 nodejs项目中我们经常会用到nodemon启动项目以使我们的项目在开发时支持热更新，修改了代码后不需要手动重启服务器；使用npm 的config模块实现不同的环境（一般是develop，production，test）；nodemon和config的使用方法这里不做详细介绍。cross-env的作用是不需要全局配置NODE_ENV在scripts脚本中修改NODE_ENV的值从而实现不同环境中proccess.env.NODE_ENV的不同，而config的工作原理就是基于NODE_ENV这个值的，所以推荐两者结合使用。先上三个工具结合使用后的配置文件。/package.json"scripts": { "dev": "nodemon ./bin/www --exec babel-node --presets es2015,stage-2", "start": "cross-env NODE_ENV=production babel-node ./bin/www --presets es2015,stage-2" }, "dependencies": { // ... other dependencies "config": "^3.0.1", "cross-env": "^5.2.0", // ... other dependencies }, "devDependencies": { // ... other devDependencies "nodemon"/nodemon.json{ "restartable": "rs", "ignore": [ ".git", "f2e", "node_modules/**/node_modules" ], "verbose": true, "execMap": { "js": "node --harmony" }, "events": { "restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'" }, "env": { "NODE_ENV": "develop" }, "ext": "js,json" }nodemon的配置文档介绍的可以在scripts中一一配置，也可以在上面的配置文件中配置，我们建议在配置文件中配置，清晰明了还好管理。nodemon.json中跟本文相关的配置就是env->NODE_ENV配置项，他的值就对应设置了node环境中proccess.env.NODE_ENV的值，当执行npm run dev 时，proccess.env.NODE_ENV对应的是nodemon的配置文件中的值当执行npm run start 时， proccess.env.NODE_ENV对应的是cross-env设置的参数的值
-
Linux环境下Nginx详细安装部署教程 一、Nginx简介Nginx是一个web服务器也可以用来做负载均衡及反向代理使用，目前使用最多的就是负载均衡，具体简介我就不介绍了百度一下有很多，下面直接进入安装步骤二、Nginx安装1、下载Nginx及相关组件(我的软件目录为/software)[root@localhost software]# wget http://nginx.org/download/nginx-1.10.2.tar.gz 省略安装内容... [root@localhost software]# wget http://www.openssl.org/source/openssl-fips-2.0.10.tar.gz 省略安装内容... [root@localhost software]# wget http://zlib.net/zlib-1.2.11.tar.gz 省略安装内容... [root@localhost software]# wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.40.tar.gz 省略安装内容...安装c++编译环境，如已安装可略过[root@localhost software]# yum install gcc-c++ 省略安装内容... 期间会有确认提示输入y回车 Is this ok [y/N]:y 省略安装内容...2、安装Nginx及相关组件openssl安装[root@localhost software]# tar zxvf openssl-fips-2.0.10.tar.gz 省略安装内容... [root@localhost software]# cd openssl-fips-2.0.10 [root@localhost openssl-fips-2.0.10]# ./config && make && make install 省略安装内容...pcre安装[root@localhost software]# tar zxvf pcre-8.40.tar.gz 省略安装内容... [root@localhost software]# cd pcre-8.40 [root@localhost pcre-8.40]# ./configure && make && make install 省略安装内容...zlib安装[root@localhost software]# tar zxvf zlib-1.2.11.tar.gz 省略安装内容... [root@localhost software]# cd zlib-1.2.11 [root@localhost zlib-1.2.11]# ./configure && make && make install 省略安装内容...nginx安装[root@localhost software]# tar zxvf nginx-1.10.2.tar.gz 省略安装内容... [root@localhost software]# cd nginx-1.10.2 [root@localhost nginx-1.10.2]# ./configure && make && make install 省略安装内容...3、启动Nginx先找一下nginx安装到什么位置上了whereis nginx进入nginx目录并启动(启动指令为nginx)如果报如下错误“error while loading shared libraries: libpcre.so.1: cannot open shared object file: No such file or directory，”按照下面方式解决1.用whereis libpcre.so.1命令找到libpcre.so.1在哪里 2.用ln -s /usr/local/lib/libpcre.so.1 /lib64命令做个软连接就可以了 3.用sbin/nginx启动Nginx 4.用ps -aux | grep nginx查看状态 [root@localhost nginx]# whereis libpcre.so.1 [root@localhost nginx]# ln -s /usr/local/lib/libpcre.so.1 /lib64 [root@localhost nginx]# sbin/nginx [root@localhost nginx]# ps -aux | grep nginx 进入Linux系统的图形界面，打开浏览器输入localhost会看到下图，说明nginx启动成功Welcome to nginx!If you see this page, the nginx web server is successfully installed and working. Further configuration is required.For online documentation and support please refer to nginx.org.Commercial support is available at nginx.com.Thank you for using nginx.nginx 基本操作启动 [root@localhost ~]# /usr/local/nginx/sbin/nginx 停止/重启 [root@localhost ~]# /usr/local/nginx/sbin/nginx -s stop(quit、reload) 命令帮助 [root@localhost ~]# /usr/local/nginx/sbin/nginx -h 验证配置文件 [root@localhost ~]# /usr/local/nginx/sbin/nginx -t 配置文件 [root@localhost ~]# vim /usr/local/nginx/conf/nginx.conf本文转载自https://www.cnblogs.com/taiyonghai/p/6728707.html
-
linux常用指令备忘 为node全局包（如：cnpm创建环境变量）$ sudo ln -s /usr/local/nodejs/bin/cnpm /usr/local/bin/ // 假设nodejs的安装目录为/usr/local/nodejs停止node服务ps -ef|grep node 找到node服务的进程信息root 3370 2822 0 16:21 pts/0 00:00:00 grep nodekill 3370 终止进程node后台启动nohup npm start& 通过这种方式启动，会在项目根目录生成nohup.out文件（如果本来不存在）并且跳出服务监控，服务的日志文件会写到nohup.out文件中forever工具，通过npm install -g forever安装。使用方法参考 https://www.npmjs.com/package/forever[1]: https://www.npmjs.com/package/forever
-
vue低版本浏览器兼容性（20181224更新） promise在低版本浏览器需要通过pollyfill处理不同浏览器对promise解析的差问题，处理方法为，在main.js里加入如下代码import promise from 'es6-promise'; promise.polyfill();webpack中的babel处理的目录是在webpack.base.conf.js中通过includes配置的，默认没有包含node_modules下的库文件，某些npm包没有做es6新语法的处理，我们的webpack又没有编译这部分文件，就会报错，最常见的就是let，const，因为很多浏览器都已经支持let，const，但是低版本浏览器不支持，所以我们需要在include中加上这些没处理的包，处理方法为：在includes中加上对应的node_modules包的目录名，切记不要直接加入node_modules,因为有些npm包不能通过webpack编译，而且也太了。build里面的webpack.base.conf.js的module中配置{ test: /\.js$/, loader: 'babel-loader', include: [ resolve('src'), resolve('test'), resolve('node_modules/_swiper@4.4.6@swiper'), resolve('node_modules/_dom7@2.1.2@dom7'), resolve('node_modules/webpack-dev-server/client' )] }
-
react学习笔记之react-router4.x中JS路由跳转 在react开发单页应用的时候，有时我们需要通过js触发路由的跳转而不是紧紧通过Link组件链接跳转。如：登录成功自动跳转到网站首页或者redirect页；在ajax请求中，通过公共方法验证登录token是否有效，如果无效跳转到登录页等等。针对上面的两种情况，就有两种路由跳转场景，第一种：在中间中触发路由跳转，第二种：在非Component组件的js中触发路由跳转，这两种场景的跳转方法分别为：一，组件中跳转到另一个路由组件：从react-router-dom中导入withRouter方法import { withRouter } from 'react-router-dom';使用withRouter方法加工需要触发路由跳转的组件export default withRouter(Login);通过withRouter加工后的组件会多出一个history props，这时就可以通过history的push方法跳转路由了。this.props.history.push('/home');二，非组件JS函数中触发路由跳转从history中导入createHashHistory方法（如果您的react应用使用的是history路由则导入createBrowserHistory）import { createHashHistory } from 'history'; // 如果是hash路由 import { createBrowserHistory } from 'history'; // 如果是history路由React-Router v4.0上已经不推荐使用hashRouter，主推browserRouter，但是因为使用browserRouter需要服务端配合可能造成不便，有时还是需要用到hashRouter。创建history实例const history = createHashHistory();跳转路由history.push('/login');
-
Mac电脑下查看某文件或者目下下的文件的代码行数工具（cloc） 1，通过homebrew安装cloc（若您的mac没有安装home_brew需要先安装home_brew,安装方法参考Homebrew安装）在Terminal中输入：brew install cloc 回车等待安装完成2，检查cloc是否安装成功在Terminal中输入：cloc -help 回车如果能打出一长串帮助文档，那就证明安装成功了3，使用在任意目录下 执行命令 cloc ./ 即可检测当前目录的所有文件的代码行数。查看其它目录，后面的路径按照以前的目录规则匹配即可，如果具体到某一文件的名称，则检测某一文件的代码行数。排除当前目录下的某个文件夹的代码，比较常见的是排除libs中的代码，因为libs中的一般为第三方库，所以这里以libs文件夹为例：cloc ./ --exclude-dir=libs检测结果如下图上面统计的是vue项目下的src目录下的代码行数，可以看到，cloc是可以统计vue组件文件的。4，其它用法查看cloc文档或者执行命令cloc -help查看帮助文档了解所有命令
