- 博客(43)
- 收藏
- 关注
RSS订阅转载 通过javascript进行unicode 与 UTF-8编码
javascript的字符集：javascript程序是使用Unicode字符集编写的。Unicode是ASCII和Latin-1的超集，并支持地球上几乎所有的语言。ECMAScript3要求JavaScript必须支持Unicode2.1及后续版本，ECMAScript5则要求支持Unicode3及后续版本。所以，我们编写出来的javascript程序，都是使用Unicode编码的。UTF-8UTF-8（UTF8-bit Unicode Transformation Format）是一种针对Uni.
2020-10-19 13:57:27
1443
原创 vue-cli项目发布新版本，微信缓存了旧版本文件，导致页面白屏
案发小现场小前端加班加点的终于把当前迭代的东西做好，并且无bug的通过测试，心情美滋滋。非常自信的更新到了生产环境。不到半小时的时间，大领导走到前端部门吼道：“怎么线上页面挂了”。我默默打开手机一看，不是正常么，没有挂啊。事后得知部分用户才会出现白屏问题，什么情况下会复现，我就不得而知了，有知道的小伙伴可以留言相告。问题描述：vue-cli项目线上发布了新版本后，部分手机微信，出现页面白屏或者点击页面无法交互了。问题解析：微信缓存了旧版本的文件，导致文件404。解决方案：ps：之前看过很多方案，全
2020-06-12 11:38:20
1385
1
原创 linux环境npm包私有化部署
背景：公司内部有很多个项目，其中有一些通用的组件或者插件，要在多个项目中共享，那要怎么办？ copy ? copy ? copy ?那行copy吧，等你把所有的公用的东西都copy完成后，发现某一个地方修改了，那你是不是又要到每一个项目进行修改同步，整个人直接裂开！！解决思路：我们可以将公共的模块发布到npm上去，这样要用到的项目直接用npm命令安装即可。但是我又不想把公司的代码放到外网去...
2019-12-23 19:51:46
1763
原创 解决微信浏览器页面可以随意拉伸，导致页面内部滚动条滚动体验不好的问题
很多情况，我们页面局部可以滚动，但是由于微信浏览器整个页面可以拉伸，导致页面内部的滚动体验不好。所以我们可以把整个页面的滑动事件给禁用掉，然后让页面的某一个区域可以正常的滑动，就可以达到我们理想的效果。具体实现法案如下： const overscroll = function(el) { el.addEventListener('touchstart', function() ...
2019-06-28 14:42:26
2355
1
原创 监听浏览器被切换到后台或者手机锁屏再次唤起事件
H5有一个事件叫 visibilitychange ，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，代码如下：document.addEventListener("visibilitychange", () => { if(document.hidden) { // 页面被挂起 } else { // 页面呼出...
2019-06-28 14:20:23
5818
原创 linux用npm全局安装的模块，使用模块命令时提示command not found
对于某些node模块我们需要全局安装它，方便使用。在linux中我们我们会遇到这个的一个问题，我们全局安装了一个模块，但是该模块的命令无法在全局中正常使用。如：npm install -g sinopia用命令：sinopia 时会提示 sinopia: command not found原因：模块安装成功后，环境变量没有添加设置，导致无法正常使用该命令。解决方案：echo -e "ex...
2019-06-04 14:47:45
3911
2
原创 移动端页面弹窗后，底部页面还能继续滑动解决方案
背景：页面本身具备滚动条，弹窗后，还是能继续滑动底部的页面，体验不好。解决方案一：弹窗后将底部页面设置overflow:hide;当弹窗结束后又重新设置回overflow:auto/scroll。这个方案大家都比较熟悉，虽然能解决问题，但是又存在的另外一个问题。那就是但你页面浏览到底部的时候，你页面设置overflow:hidden;页面瞬间回到了顶部。这样的体验感觉也是够奇怪的了~所以我们还...
2019-05-20 17:51:43
3624
转载 vscode前端常用插件推荐
vscode是微软开发的的一款代码编辑器，就如官网上说的一样，vscode重新定义（redefined）了代码编辑器。当前市面上常用的轻型代码编辑器主要是：sublime，notepad++，editplus，atom这几种。比起notepad++、editplus，vscode集成了许多IDE才具有的功能，比起它们更像一个代码编辑器；比起sublime，vsco...
2019-04-09 17:02:20
1699
原创 nuxt以按需引入组件的方式使用ui框架
这里不对nuxt进行一个介绍，我们这里只介绍下如何在nuxt下以按需引入方式，来加载我们所要的ui框架，如：vant-ui 、element-ui等。我们以vant-ui按需引入为例，在vant-ui官网中，按需引入步骤如下：1、npm i vant -S2、npm i babel-plugin-import -D3、.babelrc 中配置// 注意：webpack 1 无需设置 li...
2019-04-08 12:27:59
5828
3
原创 linux端口被占用
两步解决linux下端口被占用的问题：1、查看端口被哪个进程占用lsof -i :3000 //查看3000端口被哪个进程占用2、杀掉占用端口的进程kill -9 进程id（PID） //PID为步骤1信息所得...
2019-04-06 22:26:30
214
转载 Vue-cli 将px转化为rem，适配移动端（vue-cli2.x 和 vue-cli3中的使用）
一. Vue-cli2.x中的用法1.下载lib-flexible我使用的是vue-cli+webpack，所以是通过npm来安装的npm i lib-flexible --save2.引入lib-flexible在main.js中引入lib-flexibleimport 'lib-flexible/flexible'3.设置meta标签通过meta标签，设置设备宽度以及缩放比例...
2019-03-13 21:22:58
1453
原创 webpack升级到4版本遇到的坑
问题一：CommonsChunkPlugin插件的报错，因为webpack4已经把该插件移除了，用optimization.splitChunks替代报错信息如下：Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead. ...
2019-03-13 15:29:01
5080
原创 webpack中hash、chunkhash和contenthash三者的区别
在webpack中有三种的方式生成哈希值，分别为hash、chunkhash和contenthash。这三种方式有着不同的用处，或者说在webpack的不同环境中，会使用不同的方式生成哈希值。那为什么要这样的一个区分呢？我们一起探讨下：hash主要用于webpack的开发环境，在项目构建编译中根据文件是否更改，生成一个统一的hash值。就是说只要构建编译过程中只要一个文件修改了，则整个项目的h...
2019-03-12 13:40:43
1092
1
原创 webpack的extract-text-webpack-plugin插件
今天要和大家分享的webpack的插件extract-text-webpack-plugin。我们先聊聊webpack的一个打包机制，webpack本来只能能打包处理.js文件，但是通过强大的loader之后，可以打包处理各种类型的文件。比如：.css文件等。表面上webpack通过loader可以打包各种文件了，已经完美了。但是在某些场景中也存在着问题的，比如我们的css的内容都被打包到bun...
2019-03-12 10:51:59
23136
1
原创 js根据数组中对象的某个属性进行排序
js数组排序大家会想到sort()方法，是的今天我们也是用该方法来实现数组中是对象，根据对象中的某一个属性进行数组的排序。上代码： let arr = [ {name: '张三',age: 18}, {name: '李四',age: 9}, {name: '王五',age: 28} ] const handle = (prop...
2019-01-10 10:35:58
6472
3
转载 linux系统防火墙
1、Centos中iptables和firewall防火墙开启、关闭、查看状态、基本设置等https://blog.csdn.net/bbwangj/article/details/745029672、解决CentOS7关闭/开启防火墙出现Unit iptables.service failed to load: No such file or directory.https://blog....
2019-01-08 10:53:43
450
原创 浏览器上禁止用户用调试方式打开页面
今天分享一个有趣的东西，我们浏览器可以通过F12或者鼠标右键的形式打开html页面，然后就可以看到页面的的信息，如dom结构，加载文件、请求信息等。那有没有办法禁止掉这一行为呢？要相信方法总比问题多，哈哈~分析：使页面进入调式模式的方法有哪些？1、按F122、鼠标右键，然后。。。3、提前打开浏览器处于调试模式，然后输入要调试的地址通过分析我们做出相对应的处理方法即可：步骤一：禁掉F12...
2019-01-03 17:40:24
5184
1
原创 js数组去重
js数组去重的是方法很多，网上一搜一大堆，但是都是要对数组进行各种遍历来实现。这里就分享一种快捷的素组去重方法，使用的是es6的Set，非常简单就实现数组去重。只要两步，如下：const arr = [1,2,3,1,2,3]; //需要去重的数组const set = new Set(arr); // （第一步）const handleArr = [...set]; //或者 Ar...
2018-12-19 16:14:36
133
1
原创 js的节流和防抖
在项目开发过程中，我们通常会遇到这种需求，需要对某一行为进行js方法监听并且做出相应的业务处理，但是该行为变化的频率有可能是非常的频繁的，比如滚动条滚动、input框数值变化等。我们都知道一个web项目性能很重要，性能好的项目能给用户留下好的印象，否则用户就会很自然的放弃这个应用，到那时我们的开发出来的东西，已经没有什么很大的价值了，因为不被认可。好了bb完一堆废话，我们进入正题。今天要说的就...
2018-12-19 10:21:36
238
原创 简单理解javascript原型链
js的原型链是剪不断理还乱，下面我们用简单的表达式，来理一理他们之间的继承关系： Object.prototype = null; //原型链顶端为null Function.prototype = new Object.prototype; Array.prototype = new Object.prototype; Boolean.prototype ...
2018-12-12 15:20:48
260
原创 javascript小数点的四则运算精度丢失处理
js在进行小数点的四则运算，结果可能会出现有偏差，看一下几个例子： console.log(0.1 + 0.2); //0.30000000000000004 console.log(-0.09999999 - 0.00000001); //-0.09999999999999999 console.log(0.012345 * 0.000001); //1.2344999999999999...
2018-12-07 21:56:20
798
原创 服务端与浏览器cookie
大家都知道cookie的作用很大，因为http是无状态协议，很多情况我们都是通过设置cookie，来实现业务上的需求，如登录。只是说不同的技术方案和不同的业务需求，我们的对cookie的操作有所差别，但都是基于cookie。服务端和前端均能对cookie进行设置，但是涉及隐私数据，还是建议由后端同学进行操作。下面描述的是两个问题：1、服务端向客户端设置cookie失效2、客户端向服务端请求数据...
2018-12-05 15:26:58
1095
原创 redis设置密码和修改端口
安装了redis如果是放到内网，设不设置密码倒是无所谓。但是如果是放到外网去的话，设置密码还是很有必要的，特别是安装redis的时候是root权限下。这样服务器被攻击是分分钟的事情，所以底下介绍下给redis设置密码的一种方式：1、初始化Redis密码：在配置文件中有个参数： requirepass 这个就是配置redis访问密码的参数；比如 requirepass test123；（P...
2018-11-17 16:56:33
20448
原创 linux被攻击了
之前在阿里云买了云服务器linux系统，主要平时写写demo所用。但是这样的服务器也被攻击了，真的一脸懵逼。故事：早上阿里云短信和邮件狂发，说服务器被攻击了。开始我以为没什么，反正我这也是自己写写demo的服务器，无非就是一些小警告不打紧。到中午的时候，和往常一样打开了xshell进行一些操作，但是发现输入命令变得异常的卡顿，用top命令一看竟然有进程使用cpu 99.9%。这进程也是调的一，...
2018-11-17 16:12:23
2726
1
原创 linu下pm2的安装
在linux环境下，安装pm2 node进程管理工具，步骤如下：1、执行命令：npm install -g pm2然后用pm2 list 验证是否有效，如果是提示 -bash: pm2: command not found，则表明需要添加软连接，才能全局使用pm2命令2、执行命令：sudo ln -s nodeJS的目录/bin/pm2 /usr/local/bin/pm2 。这里的nod...
2018-11-04 22:46:50
184
原创 中文域名在nginx配置中踩的一个坑
这里分享一个采坑经历，希望能帮助到要踩坑的你。。。前不久在阿里云看到了中文域名，觉得好玩就买了一个来玩玩（主要因为便宜）。买了域名备案了，也解析了多个子域名，想通过ngxin实现多个网站的对应多个子域名。那故事来了我的部分配置大致如下：http { include mime.types; default_type application/octet-stream...
2018-10-30 15:31:29
906
1
原创 cnpm安装报错
解决方法： 1、注册模块镜像npm set registry https://registry.npm.taobao.org2、node-gyp 编译依赖的 node 源码镜像npm set disturl https://npm.taobao.org/dist3、清空缓存npm cache clean --force4、正常安装npm insta...
2018-06-24 19:26:59
5863
原创 用浏览器来调试node代码
作为前端开发，对于浏览器的调试我想大家都比较熟悉了。但是在开发node这种运行在服务器的javascript那又该如何调试呢？像平时一样直接console.log() ？ 或者来个alert() ?这些是行不通的，console.log的信息你不能直接像开发页面一样，可以在浏览器的控制台看到。alert()那是浏览器的方法，所以也是用不了。那有的人会说，断点调式想必也走不通了吧？ 今天我就来分享...
2018-05-16 10:29:02
1865
原创 Symbol是什么
Symbol的诞生，也就是Symbol存在的意义之前我们的对象属性的数据类型都是字符串，没有其他的了。所以会导致属性名重复，导致属性值被覆盖的情况。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法，在添加的操作就很容易覆盖了原有的方法。所以需要一个独一无二的数据类型来完成这个使命。所以Symbol出来主持大局了。Symbol的介绍1、唯一性Symbol这个英文单词表示...
2018-05-15 18:19:13
13413
原创 正则对象的lastIndex属性
今天在写一个循环里面，通过正则方法test()来验证字符串，遇到了一个坑。在此分享一下采坑过程，也给自己加深个印象。贴上我的一部分代码：var str1 = '我是在测试';var p = /[\u4E00-\u9FA5]/g; //匹配中文正则var arr = str1.split('');for(var i = 0; i < arr.length; i++) { ...
2018-04-19 16:36:50
483
原创 linux安装git
一、安装依赖和清理1、安装依赖yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMaker2、删除原有的gityum remove git二、下载和安装1、下载压缩包wget https://www.kernel....
2018-02-26 14:12:50
168
原创 添加子域名和nginx的基础配置
通过购买了服务器和域名，经过TCP备案，假设我们所买的域名为：abc.com。我们可以直接在浏览器访问abc.com，此时abc.com就解析成我们所购买服务器的外网ip了（如我们服务器的外网ip为：1.1.1.1），也就是说我们浏览器发起abc.com请求时，已经就是请求我们的外网ip：1.1.1.1，并且访问的端口默认为80。那这么说，我直接在80启一个服务，然后把项目放进去（这里只指前端
2018-02-02 16:45:56
1064
原创 linux下安装nginx的安装和配置
一. gcc 安装 安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境，如果没有 gcc 环境，则需要安装：yum install gcc-c++二. PCRE pcre-devel 安装 PCRE(Perl Compatible Regular Expressions) 是一个Perl库，包括 perl 兼容的正则表达式库。nginx 的 http 模块使用
2018-01-31 09:47:35
209
原创 linux下mongoDB安装和基本用法
安装mongoDB1、下载：wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.0.6.tgz2、解压：tar -zxvf mongodb-linux-x86_64-3.0.6.tgz3、将解压出来的文件放到，指定的文件下（/usr/local/mongodb）mv mongodb-linu
2018-01-23 16:11:52
323
原创 linux下node环境安装
今天一起分享下linux下安装node环境下载node压缩包：wget https://nodejs.org/dist/v8.9.3/node-v8.9.3-linux-x64.tar.xz如果是centos没有wget命令，可以用：sudo yum -y install wget 进行安装wget命令解压：tar -Jxv -f node-v8.9.3-linux-
2018-01-19 22:03:31
2649
原创 移动端点击返回键，页面不刷新解决方案
今天分享下，在浏览器中点击返回或者前进按钮时，页面不刷新的问题。这个问题存在于移动端居多，尤其是苹果手机。我们一起看看这到底是怎么一回事！ 如果是移动端下，可能有两种情况： 第一种是在自己的app下点击返回的时候页面不刷新，这有可能是你们原生开发人员，只是关闭了当前的一个窗口，也就是说那个窗口是新开的。这种解决方案，老夫只能说找你们的原生开发吧。第二种则是在微信、uc这类的浏览器出现，这是
2018-01-16 14:44:09
12549
原创 浏览器的缓存机制
一提到浏览器缓存你想到什么？我们这‘大前端’的岂能被难倒是吧？让我列一列，常用的有localStorage 、sessionStorage、cookie…..等等。一点儿都没有错，这些很常用，我们通常会用这些缓存来储存各种变量啥的。但是提个疑问，我们打开一个页面，里面加载的css文件，js文件，图片这些静态资源呢？那他们是怎么样缓存的？我想最常听到的一个答案应该是，“浏览器的缓存机制”。噢！浏
2018-01-12 17:14:53
238
原创 用webstorm提交git时，密码输入错误也被webstorm记住密码了
直接使用webstorm来管理git确实方便了不少，但是今天我也碰到了这样的坑。在首次用git提交代码的时候，webstorm会让开发者输入git的密码，但是不管你输入的密码是正确还是错误，webstorm都是很智能的把它保存起来。等你下次再提交你就不用再输入密码了。 所以如果你输入的密码是错误的，那你之后的提交你就等webstorm给你报用户或者密码错误无法push到远程仓库。所以我们遇到这种
2018-01-11 14:52:12
9138
1
原创 解决html换行引起的空格
我们在写html的时候，经常会碰到标签的换行，或者是内容的换行，在界面中是会出现空格的间隙。如： 这样的写法，在界面上的效果是这样： 解决方法： 效果： 总结：父级设置font-size: 0; 子类设置好 font-size属性，方可解决
2018-01-09 08:47:35
6580
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人