- 博客(29)
- 收藏
- 关注
RSS订阅原创 mac通过终端code 命令打开vscode
对于mac用户来说，每次打开项目代码都要先打开vscode然后command+o 寻找项目文件夹，然后才能打开，不知你是否也觉得这样比较麻烦。我们可以通过两种方法设置终端，然后就可已通过 vscode . 命令直接在vscode中打开项目代码，设置的方法有两种方法1：打开VSCode –> command+shift+p –> 输入shell command –> 点击提示Shell Command: Install ‘code’ command in PATH运行这种方法简单快
2020-06-17 09:44:15
15090
原创 浏览器事件循环
浏览器事件循环一、为什么要有事件循环浏览器运行过程中会同时面对多种任务，用户交互事件（鼠标、键盘）、网络请求、页面渲染等。而这些任务不能是无序的，必须有个先来后到，浏览器内部需要一套预定的逻辑来有序处理这些任务，因此浏览器事件循环诞生了，再次强调，是浏览器事件循环，不是javascript事件循环，js只是浏览器事件循环的参与者。二、事件循环是什么浏览器把任务区分成了 宏任务 和 微任务 或者叫 外部任务 和 内部任务 ，内部任务可以理解为js内部处理的任务，外部任务可以认为是浏览器处理的任务。外
2020-05-14 08:07:36
1052
原创 微信公众号开发——signature、access_token、jsapi_ticket的获取
微信公众号开发——那些令前端同学迷惑的微信校验微信公众号开发中几个阶段的权限校验，相对于前端同学来说（特别是没有nodejs基础的同学来说）可能相当费解，不过话说回来，现代前端不会nodejs可能会混的相当难受。咱们今天把这些烦人的 access_token、 jsapi_ticket、signature 一次盘明白，本文所有操作都基于公众号的测试号，因此在开始 bibi 前需要先申请一个公众...
2020-05-04 12:21:40
1688
原创 前端自动化单元测试——should.js、mocha是啥？
上周我们了解了node Assert 断言库，但是自动化测试要跑起来光靠node Assert肯定是不够的，文章标题中的这些工具会让你的单元测试真正成为自动的并且更加得心应手。那么我们先来看看它们都是些什么东西。should.js对于shouldjs，npm官方的解释是一款富有表现力、可读、框架无关的断言库。它的主要目的是让测试断言更富表现力，并对你的测试更有帮助。shouldjs有助于你...
2019-03-24 12:02:03
1026
原创 前端单元测试-从node assert 开始
测试对于任何一门技术和工程来说都是不可或缺的重要步骤，这是非常容易理解的。但似乎很多前端的同学对测试都没有足够的认识，更谈不上使用（这里面当然也包括我自己~捂脸）。做一件事情一般需要有两个前提： 1、认识到这件事情的重要与必然性。 2、敢于接受挑战，学习新的东西并且开始实施。对于其中一部分同学来说，是没有认识到测试的重要性，因此谈不上动机。那么这里有一个反例，也许对你认识前端单元测试的重要性有...
2019-03-17 11:35:13
353
原创 node+socket.io 实现一个聊天室
我们只做简单的实现，不接入数据库，nodejs也不使用express和koa等框架因此依赖只有两个：1、socket.io2、mime（用于获取静态资源时获取文件的mime类型） 安装命令：npm install socket.io mime --save其他的就不赘述了 先描述一下文件目录结构静态 js 和 css 文件放在 public 下面的相应目...
2019-01-06 16:23:59
1115
1
原创 那些可以访问javascript解析引擎的方法
我们日常写bug的时候很有时候会用到解析javascript语句字符串的功能，比如我们有时候可能希望函数把一些字符串当成javascript语句执行。像以前比较老的模板语法很多就使用的Function或eval()等方法在这方面的能力比如下面的代码let fun = new Function('var name = "小明"; console.log(name);');fun();...
2018-12-08 12:51:22
237
原创 learning how to learn：coursera经典课程学习笔记
“Learning How To Learn” 是 coursera 非常有名且经典的课程，之前在某篇博客上看到介绍，并且有人在使用其中的学习方法觉得非常有效，我很受震撼。作为 IT 人，终生学习是一种基础意识，但是我们常常受困于学习效率不高、或者受困于拖延症，且痛于找不到合适的学习方法。而“Learning How To Learn” 这门课程依据神经科学的研究以及众多实验，为广大低效率的学...
2018-11-11 11:17:48
5417
原创 谈谈javascript中的多线程
不存在的，javascript中根本不存在多线程......先不要慌，没有多线程我们可以模仿多线程呀！定时器、web workder等等。 存在即合理，为啥javascript需要多线程？ javascript对于现如今的web应用是不可或缺的，js在其中肩负了所有的交互和逻辑运算。由于浏览器在执行页面的javascript期间无法响应其他的用户事件，当页面中某部分js代码不可...
2018-09-19 21:04:41
625
原创 HTTP1.1头部字段汇总
HTTP/1.1是目前HTTP协议使用最广泛的版本HTTP首部字段是构成HTTP报文的要素之一。在客户端和服务器的交互中传递重要的交互信息。首先首部字段类型分为四种：1、通用首部字段(General Header Feilds)即请求报文和响应报文双方都会使用的首部2、请求首部字段（Request Header Fields）从客户端向服务器发送请求时使用的首部。补充了请求...
2018-09-09 15:54:39
2490
原创 解决webpack中css独立成文件后图片路径错误的问题
说明：此配置针对webpack4+使用webpack构建项目时将css文件独立出来是常见的做法，在webpack4.0以前是使用extract-text-webpack-plugin，webpack4.0以后使用mini-css-extract-plugin，这里要讲的是后者我在mini-css-extract-plugin的filename配置加入了css/路径：new Min...
2018-08-27 09:42:52
6920
3
原创 url-loader不能处理html中引入的图片问题的解决方案
在我们使用webpack进行项目构建的时候，url-loader是个非常有用的工具，与file-loader相比，url-loader能将图片大小在limit限定值之内的图片转译成base64格式的字符串，这样能直接减少很多不必要的http请求，在应用性能提升上的效益还是非常可观的。 我们项目中引入图片的方式基本上可以分为三种：1、在js中import图片然后赋值给图片的src...
2018-08-26 17:29:27
5025
4
转载 TCP三次握手和四次挥手过程
由于对于http建立连接的过程中的三次握手最近有点记忆模糊，因此上网查了一下相关知识，发现一篇讲的非常详细的文章，这里转到自己博客分享给大家，博客原文地址（作者：Andya）：TCP三次握手和四次挥手过程以下是正文内容：1、三次握手（1）三次握手的详述首先Client端发送连接请求报文，Server段接受连接后回复ACK报文，并为这次连接分配资源。Client端接收到ACK报文后也...
2018-08-22 23:13:44
228
原创 IE兼容问题之 “SCRIPT5：拒绝访问” (document.domain)
你可能也遇到过IE下报：SCRIPT5:：拒绝访问 的错，说实话，这真的是我见过最恶心的兼容问题之一了，效果如下：那么出现这个问题的原因是啥呢？报这个错的原因是你的页面使用了iframe嵌入页面，同时在父窗口或者子窗口设置了document.domain为某个域，但是设置的不一样，或者父窗口设置了，但是子窗口没有设置。这样不仅会导致部分js代码无法执行而且可能会导致已经发出去的aj...
2018-08-17 17:18:02
16156
4
原创 git删除commit方法和误删commit后的恢复方法
如果你在git上提交了错误的commit，不要慌，通过下面的方法可以回退到之前的commit1）通过git log可以查看我们之前提交的commit_id：2）复制你需要回滚的commit_id。不过windows下的命令行是不能复制文本的，为此你可以到github上查看仓库的commit历史，上面是可以直接复制的：复制好后在命令行执行：git reset --hard c......
2018-08-09 10:28:11
34317
11
原创 执行git add . 后仍然报changes not staged for commit错误的解决方法
如果你的git仓库下面还有另外一个clone过来的git仓库，那么当你正常git add . 然后git commit的时候一定会得到如下图的报错：并且上传到仓库的文件夹是空的这个时候如果你去网上查找解决方案，可能10个人有九个人会告诉你是因为commit之前没有执行git add导致的，最后一个人可能知道原因，但是提供的方法可能并不能很好的解决问题这里给出完整的解决方案：1、...
2018-08-08 09:32:12
31591
6
原创 通过File对象的slice()方法实现文件分片上传
上传大文件时由于各种原因突然中断，然后整个文件都要从头开始上传，这种情况真的是非常让人抓狂，而文件分片上传也许能避免这种尴尬 文件分片上传就是把文件分成一个个小块然后逐个上传，以文件的md5码作为文件的唯一标识，这样即使上传到一半中断了，等到下次再上传的时候我们通过对比文件的md5来确认是否是相同文件，确认后就可以在上次的基础上继续上传。 说到md5，我之前有一篇文章介绍了一个计算...
2018-08-07 10:37:46
15624
1
原创 与浏览器缓存相关的expires，cache-control，last-modified，Etag等头部信息
浏览器缓存对于现代网页是非常有用的功能，它能将大部分改变频率不大的应用组件缓存到本地以加速用户下次访问时页面的响应时间。 而与浏览器缓存相关的头有 expires，cache-control等等（如标题中提到的）这些头信息分别代表什么呢？由浅入深。首先来我们来说说条件 GET 请求。一般我们向服务器发送http请求获取资源时服务器的响应头中一般会包含如下的一个头部信息：La...
2018-07-28 16:28:22
682
1
原创 多页项目的webpack配置
在我们使用vue，angular等框架开发的时候，大多数都是构建单页项目。而且，像这样的框架都有对应的命令一步生成webpack配置（比如vue的vue init webpack my-project之类）。 但是如果我们要开发多页面项目的时候就没有这么方便了，你必须要自己配置webpack。 单页项目和多页项目的区别在于单页项目所有的js，css等资源只需要在入口html文件中引...
2018-07-19 11:05:31
1217
原创 babel-loader，babel-core，babel-polify，babel-plugin-transform-runtime之间的关系
babel-core在npm官网中的解释是Babel compiler core.也就是Babel编译器的核心，因此意味着如果要使用babel-loader进行es6的转码你首先必须得安装babel-corenpm install --save-dev babel-corebabel-core安装了就行，无需手动配置和引入。搞懂了babel-loader和babel-core的关系，那babel-...
2018-07-15 17:36:06
3383
原创 本地仓库每次向github提交代码都需要输入账号密码的解决方法
当我们向github远程仓库push代码的时候可能会出现每次都要求输入账号密码的问题。其实会出现这个问题的原因只是因为你在添加origin的时候使用的是https的方式，最简单的解决办法就是移除https的方式，添加ssh的方式：首先在命令行执行：git remote rm origin然后到git仓库页面，如上图、点击Use SSH切换，复制下面框中的地址在命令行输入：git remote ad...
2018-07-03 21:20:06
4691
1
原创 windows通过wamp apache实现代理及反向代理
wamp是一款基于windows平台的AMP（Apache/MySQL/PHP）集成软件。安装和使用都非常简便，可以让我们避免由于缺乏AMP的知识而无法正确设置环境。下载安装：首先可以到官网下载合适版本的wampServer下载，双击安装，这是一个全自动化的过程，一直点next就行了，不多做解释。官网地址：http://www.wampserver.com/en/安装后双击应用图标开启服务，在浏览...
2018-06-29 22:31:03
3509
原创 一次搞懂javascript原型链和继承
javascript原型链是个很容易被新手前端忽略的重要概念，在初级编程工作中绝大部分人可能会觉的原型链似乎没啥用、因此非常容易被忽略。我自己刚入行那会儿就被面试官问懵过（知道这个东西、却说不清楚）。1、原型链直入主题，原型链是js中实现对象继承的主要方法。基本思想是利用原型让一个对象继承另一个对象的属性和方法。首先对象的构造函数其实就是普通的函数，只是使用方式不一样（构造函数一般用和new操作符...
2018-06-28 09:52:57
411
原创 知识星球公开课第一天听课收获
1.背景昨天凌晨在博客上分享了一个知识星球报名的入口，不过鉴于自己的影响力，很可惜——没有人通过我的入口报名 |-_-|不过这并不影响我分享我听课的收获，希望看到的人能一起成长 2.说说课程首先，公开课是以音频和图片的方式直播的（模式和知乎的Live一样），至于音频由于版权问题恕不能分享。但是图片还是可以分享几张的昨天晚上分享的老师是亦仁——前阿里运营、知识星球“生财有道...
2018-06-27 12:59:34
2235
原创 知识星球首次社群公开课，也给自己一次成长的机会
本来也是深夜了，睡前浏览了一下微信。在某公众得知识星球在搞一个公开课。之前只知道很多人通过知识星球赚了很多钱，甚至超过自己的工资，也是很好奇很激动。作为一个程序猿，也想窥探一下捡钱的秘诀。于是立即加入了课程。如果你也有强烈的求知欲，那就一起来吧！通过下面图片中的二维码即可获取课程页面...
2018-06-26 00:36:35
727
原创 前端通过spark-md5.js计算本地文件md5
背景：说到本人第一次使用spark-md5.js还是差不多一年以前的时候了，当时后台老大说要搞一个文件分片上传的功能。我当时就心想：what？啥是文件分片上传，完全没听过好吗？至于我当时内心那个慌就不多描述了，总之文件分片上传需要一个识别文件的唯一标识，而md5是非常合适的。spark-md5.js就是前端在文件上传前在本地计算md5的很可靠的方案spark-md5.js是由外国人写的，如果英文底...
2018-06-20 16:58:15
20313
5
原创 关于jquery的click()和trigger(‘click‘)方法的一点问题
在原生js中如果要模拟事件其实比较麻烦的事情，因为要考虑到各个浏览器对dom标准的兼容，同时还要进行多个步骤（创建event对象、初始化、正式触发等步骤）。不过jquery就有一个非常简单好用的click()或者trigger('click')方法来模拟点击事件这两个方法可以说是非常简单好用了。但是这里我其实要说的是这个方法的一点问题。问题出现的场景是：当某个元素的点击事件...
2018-06-20 00:46:57
16209
6
原创 用div模拟文本域实现高度自动撑开以及相关问题的解决方法
前段时间项目里面用到了一个高度随着内容自动撑开的文本域效果，这一点传统的textarea标签是满足不了的，而我们要做的只是在div中加一个contenteditable="true"的属性，以下是现实效果。 但是接下来就遇到了问题，当你在模拟的文本域中复制内容再粘贴到相同类型的文本域里面时问题就出现了 没错，你复制的内容在接下来粘贴时会带有html标签和对应的样式内容，...
2018-05-10 16:57:15
1526
1
原创 用input type=file调取手机照相机以及相册选择照片上传
最近由于在写一个车贷的webapp项目，其中要求调取手机照相机以及手机相册来获取照片，而我之前一直是用cordova等打包工具调取手机硬件、于是也到网上找了下解决方案。其中h5提供的type="file"属性是一个相当简便且有效的方法。<input type="file">除了可以选择照片，默认情况下是可以选择文档的为了防止用户误选文档我们可以给 input 标签添加 acce...
2017-04-05 22:27:21
51318
14
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人