- 博客(69)
- 收藏
- 关注
RSS订阅原创 HTTP协议
TCP/IP协议族TCP/IP协议族是一个网络通信模型，以及一整个网络传输协议家族，为互联网的基础通信架构。该协议家族的两个核心协议：TCP（传输控制协议）和IP（网际协议），为该家族中最早通过的标准。这个协议族由互联网工程任务组负责维护。TCP/IP 协议族是Internet最基本的协议，HTTP协议是它的一个子集。TCP/IP协议族按层次分为以下5层。1、物理层（实体层）...
2020-03-24 00:12:24
622
原创 CSS3简单写个圆形进度条动画
圆圈转动完整代码html<div id="wrap"> <div class="box-left"> <div class="circle-left"></div> </div> <div class="box-right"> <div class="ci...
2020-01-17 21:39:06
1069
1
原创 Object.defineProperty和Proxy对比
Object.defineProperty(obj, prop, descriptor)MDN文档第三个参数的解释：configurable：属性是否可配置（重新defineProperty），是否可删除，默认falseenumerable：属性可否被遍历，默认falsewritable：配合value使用，可否修改value，默认falsevalue：默认undefine...
2019-12-29 23:59:47
617
原创 vue的一些知识点
数据更新列表却不重新渲染例如数组中一个对象中的一个字段数字变了，这时vue并不会更新视图。为什么呢？还是上面举的例子，用 this.$set 解决//购物车中某个商品数量加1了，这时再watch环境下if(this.goodsList.length > 0){//如果购物车列表有数据则寻找有没有已存在的 this.exist = this.goodsList.some...
2019-12-15 20:51:14
186
原创 JavaScript小妙招2
二、十、十六进制转换二进制十进制互转二进制转十六进制位运算符~、&、|、^、<<、>>链接位运算符是在数字底层（即表示数字的 32 个数位）进行操作的。~ 加一取反var a = 2;console.log(~a) //-3a = -9;console.log(~a) //8&...
2019-12-03 00:18:31
137
原创 Node.js爬取百度图片之解析objURL外加随手写个瀑布流
分析请求地址先来分析一下请求地址，我搜索的是“古力娜扎”https://image.baidu.com/search/acjson?tn=resultjson_com&ipn=rj&ct=201326592&is=&fp=result&queryWord=%E5%8F%A4%E5%8A%9B%E5%A8%9C%E6%89%8E&cl=2&a...
2019-10-14 22:13:40
1521
原创 AJAX封装
一些前置知识AJAX状态（readyState）0 ---------- unsent 刚开始创建XHR，还未发送1 ---------- opened 已经执行open这个操作2 ---------- headers_received 已经发送AJAX请求（AJAX任务开始），响应头信息已经被客户端接收（响应头中包含了：服务器的时间，返回的HTTP状态码...）3...
2019-10-05 23:20:27
280
原创 JS面向对象
封装工厂模式创建对象function createPerson(name, age){ let obj = {}; obj.name = name; obj.age = age; obj.sayHi= function(){ console.log('My name is '+ name +'!'); } return ob...
2019-09-24 23:08:06
167
原创 JS数组扁平化
本来是不想写的，想了一下还是写下来吧。数组扁平化意思就是将多维数组变成1维数组，在JS中要实现数组扁平化方法有很多种，下面随便列举几种。话不多说，往下看代码。方法1、最基础的for循环 + 递归var arr = [1,2,[3,4,5,[6,7,[8,9]]],10,[11,12]];function arrFlat(arr){ var temp = []; for...
2019-09-18 23:27:21
285
原创 JS正则
创建方式创建方式有两种//字面量方式，两个斜杠包起来一些正则元字符let reg = /\d+/g;//构造函数方式，注意斜杠转义let reg = new RegExp("\\d+", "g");两种创建方式的区别1、构造函数方式要特别注意反斜杠转义，因为在字符串中 \ 本来就特殊，比如你想输出"\"let str1 = '\' //会报错let str2 ...
2019-09-14 20:39:13
528
原创 HTML解析之DOMContentLoaded和onload
说在前面在很久很久以前，我在封装自己的JQuery库时就使用过DOMContentLoaded，觉得这个知识点看看别的文章就行了，不过现在我想把它记下来。JS代码与body标签的位置关系一个HTML初学时会遇到的问题，一个html页面中js代码应该放到哪里？<!--如果script标签在body前面--><head> ... <...
2019-09-12 00:01:45
1477
原创 用webpack4搭一个vue项目
平时一般都用vue-cli，今天自己来手动搭一个vue项目，当然基本项目结构还是参考vue-cli的。 引入vue包错误在js文件中直接 import Vue from 'vue' 导入vue之后使用可能会报一下错误webpack You are using the runtime-only build of Vue where the template compiler is ...
2019-01-29 20:50:57
309
原创 jwt原理及简单实现
cookies、session和jwt的一些优缺点先来说说cookies和session实际应用中的一些不足【缺点】cookies的安全性不好，攻击者可以通过获取本地cookies进行欺骗或者利用cookies进行CSRF攻击。 【缺点】使用cookies时，在多个域名下，会存在跨域问题。 【缺点】session在一定的时间里，需要存放在服务端，因此当拥有大量用户时，也会大幅度降低服务...
2019-01-19 22:25:54
1847
原创 canvas
我发现看自己的博客比查文档还快，所以就在这里写一下 canvas 基础的API。以及我自己封装的画笔，github地址基础API画线var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');ctx.moveTo(20, 20); //画笔移动到这个坐标开始画ctx.l...
2019-01-08 23:28:55
174
原创 小程序中使用阿里字体图标
相信有这个需求的都在其他项目中用过阿里图标，所以这里就跳过怎么去找阿里图标。1、找好了图标之后，直接下载到本地 2、点击查看在线连接复制代码 3、将刚才下载好的字体图标项目解压，找到 iconfont.css ，打开，然后上一步复制的代码覆盖下图红线部分 4、将修改后的 iconfont.css 全部内容复制到 wxss 中，然后在 ...
2018-12-25 19:00:49
330
原创 Vue服务端渲染之Nuxt.js上手
说在前头：本文主要简书Nuxt.js框架的基本使用，该框架集成度比较高，但文档比较全，主要参考官方文档。安装使用官方提供的脚手架。按照官方文档，使用npx命令安装。什么，你还不知到npx？npx create-nuxt-app <项目名>然后进行一些选择，比如选择什么服务端框架，这里我选了Koa还会让你选择UI框架，这里我选了Element其余的都是常...
2018-12-15 22:53:44
667
转载 你真的了解回流和重绘吗
转自掘金文章浏览器的渲染过程本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。（这个渲染过程来自MDN）从上面这个图上，我们可以看到，浏览器渲染过程如下：解析HTML，生成DOM树，解析CSS，生成CSSOM树 将DOM树和CSSOM树结合，生成渲染树(Render Tree) Layout(回流):根据生成的渲染树，进...
2018-12-11 22:44:41
265
原创 Node.js调用ip接口获取地理信息
最近项目中需要获取访问ip的地理信息。在网上找了一下，找到了一个阿里云的接口，免费的，登录阿里云购买就行了。购买之后，在阿里云控制台里就可以看到该项服务的AppKey、AppCode等信息回到购买页面，看看api使用方法，果然不出所料没有Node.js版本。没关系，可以点击调试去看看，其实就是用Node发起一个get请求而已，只需配置一下请求头，就像写爬虫一样。下面看代...
2018-11-20 20:00:44
1765
原创 分享几个平时可能会在后端用到的工具函数
生成uuidconst uuid = require('uuid');/** * @method 返回一个唯一符号 */exports.uuid = function(){ //v1是基于时间戳生成uuid，v4是随机生成uuid return uuid.v4().replace(/\-/g, '');} md5加盐加密const crypto = ...
2018-11-19 18:04:59
193
转载 手写koa2
原文地址koa源码中只有4个文件application.js：入口文件。 context.js：ctx对象相关。 request.js：请求对象相关。 response.js：响应对象相关。先来看application.jsKoa有一套错误处理机制,需要监听实例的error事件，所以要引入events模块继承EventEmitter。再引入另外三个自定义模块。app.liste...
2018-11-11 03:53:14
219
1
原创 PM2的简单使用
PM2是node进程管理工具，一般用来在服务器端启动以及监测Node.js服务，我的个人博客项目就是用pm2启动的。安装安装很简单npm install pm2 -g安装之后就可以在项目目录下执行命令启动服务pm2 start app.js相当于开发环境中node app.js 一些常用基本命令停止所有服务pm2 stop all查看所有服务...
2018-11-04 01:24:03
1336
原创 用log4js写一个koa2日志中间件
因为是koa中间件，所以最起码要先搭起一个koa服务。先来介绍一下log4js安装log4js模块npm install log4js --saveappenders说白了就是配置打印输出源type："type":"console"，即为控制台打印，多数用于开发测试。"type":"file"，表示日志输出为普通文件，在此种配置下日志会输出到目标文件夹的目标文件中...
2018-11-03 17:46:04
2829
1
原创 MongoDB常用操作
好像还没写过关于MongoDB的文章。有些命令没用久了还是要找文章查文档，所以还是记一下吧，先想到什么记什么。安装就不说了。命令行插入db.collection_name.insert({document})同时插入多个文档可以传入数组。例子：db.user.insert({name: 'Sam', age: 18})相当于SQL语句insert into...
2018-10-29 00:54:55
199
原创 JavaScript模块化
从前写js代码的时候都是直接写一个js文件然后在html页面中引入，但当项目越来越大需求越来越复杂时，这种做法就显得鸡肋，各种问题暴露，比如命名冲突，可维护性差等。所以，当项目越来越复杂时我们要怎么将业务逻辑代码分工协作，各功能块分开管理，互相独立，需要时按需引入呢？于是就有了JavaScript模块化。js模块化的好处1、避免命名冲突，减少全局污染。2、更好的分离，按需加载。3、...
2018-10-24 20:30:14
170
原创 Redux基本使用
话不多说，先上图依上图所示，简单分析redux工作流程。Store根据Reducer返回的state创建公共state仓库，组件中引入Store即可用store.getState()获取公共state；如果组件中想要改变公共state可以用store.dispatch(action)派发出一个动作通知Store，接到通知后的Store将这个动作以及原来的公共state传给Reduc...
2018-10-21 17:10:23
781
原创 generator函数与async函数
generator函数其实从我开始接触es6中的异步函数就是一直在用async await（这是es7的），所以generator基本没用过，不过作为曾经的异步解决方案还是用必要了解一下。generator函数的特点：1、generator函数又名生成器函数，与普通函数不同，普通函数一旦调用就会执行完，但generator函数中间可以暂停，执行一会歇一会。2、函数声明时带上 * ，...
2018-10-06 20:40:06
1017
原创 随便记一下用过的一些css效果
3d旋转的菜单选项<!-- html --><ul> <li> <a href="javascript:;"> <span>选项一</span> <span>option1</span> </a>...
2018-09-30 17:15:31
273
原创 用Node.js简单写个脚手架
1、初始化创建项目目录sam-clinpm init -y 初始化项目创建index.js文件使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明该命令行脚本是node.js写的#!/usr/bin/env node// 使用node开发命令行工具所执行JavaScript脚本必须在顶部加入 #!/usr/bi...
2018-09-25 00:10:47
1970
5
转载 HTTP缓存机制
文章出处前言Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说，仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并不是很清楚。在此，我会尝试用简单明了的文字，像大家系统的介绍HTTP缓存机制，期望对各位...
2018-09-22 22:51:04
113
原创 微信小程序
说在前面1、小程序没有DOM对象，一切基于组件化。2、在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面。3、微信官方提供屏幕适配方案：以iPhone6的物理像素为标准 750， iPhone6中 1rpx = 1物理像素 = 0.5px 1rpx = （设备视口宽度 / 750 ）px 默认已经做了 viewport 适配处理 开发前准备...
2018-09-10 00:41:19
242
原创 第一课 go本地环境配置以及vscode go插件安装
1、go下载安装下载地址：https://www.golangtc.com/download当前最新版本是 go1.9.2当前windows环境下选择 go1.9.2.windows-amd64.zip然后解压就可以了2、配置环境变量Golang在windows下需要配三个环境变量，如图点击计算机-->属性-->高级系统设置-->环...
2018-09-09 01:33:08
5717
原创 node.js多线程
用自己语言简单理解一下进程与线程。一台机器上可以同时运行多个程序，每个程序内可以开启多个进程，而每个进程内部又可以有多个线程（有些语言还可以在线程内部有多个纤程，但不具备代表性）。多进程与多线程基本区别多进程——重：有独立的存储空间 优点：安全（万一某一进程崩了，其他进程还在工作，不至于程序无法运行），简单 缺点：性能相对低点（开进程开销大）多线程——轻：同一进程内...
2018-08-14 00:06:21
2647
原创 移动端touch事件实现无缝滚动及下拉刷新
pc端的鼠标事件写多了，但移动端没有鼠标，所以来写写移动端的touch事件。touch事件主要用到touchstart，touchmove，touchend三个事件，事件没什么好说的，做效果是最主要用到的是touch事件对象给我们提供的几个属性touches 屏幕触点集合targetTouches touch事件绑定元素身上的触点集合changesTouches 发生...
2018-08-08 21:58:52
4924
原创 canvas做动图以及配合video标签操作视频
动图canvas的drawImage()方法很强大，第一个参数可以是图片，可以是canvas，还可以是video。做动图主要是用到它的裁剪效果，也就是传参的不同，裁剪效果有9个参数，drawImage(原图，从原图哪里开始裁剪x坐标，y坐标，裁剪宽度，裁剪高度，从画布哪里开始画x坐标，y坐标，缩放宽度（对比裁剪宽高），缩放高度)实现代码var canvas = document.ge...
2018-08-02 20:24:47
2471
原创 h5拖拽文件上传及进度条
html5实现拖拽的几个事件绑定在拖拽元素上的事件 ondragstart 开始拖拽元素触发 ondrag 拖拽时触发 ondragend 拖拽完成触发绑定在指定区域元素上的事件这里需要注意的是，如果dragover事件中不阻止默认事件，drop事件就不会触发var box = document.querySelec...
2018-08-01 23:09:37
1622
原创 promise原理及简单实现
谈谈promisepromise是es6提供的异步编程解决方案，相比之前的回调函数方案更加合理强大。promise是一种异步流程的控制手段，下面几个promise特点1、避免了回调地狱，可链式调用。2、支持多个并发请求，获取并发请求数据。3、promise可以解决异步的问题，但不能说promise本身就是异步的。4、promise三种状态：pending，resolved，...
2018-07-31 23:18:56
297
原创 随手画个饼状图及时钟
今天复习canvas，随手画了个饼状图及时钟。首先注意canvas中画圆用的是弧度而不是角度，但一般情况下角度对我们来说更直观，所以需要将角度转成弧度，很简单，一个圆角度为360，而弧度为2π，写个函数转换一下就行。//角度转弧度，angle to radianfunction a2r(angle){ return angle*Math.PI/180;}然后还有个注意事项...
2018-07-30 20:22:32
1127
原创 Node.js+socket.io
http无法轻松实现实时应用http协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。在websocket以前实现的方法长轮询客户端每隔很短一段时间就会想服务端发送请求，看是否有新的消息。只要间隔时间够短，就会给人造成交互是实时进行的假象。这种做法是无奈之举，实际上对服务器和客户端都造成了大量的性能浪费。长连接顾名思义，客户端与服务端只请求一...
2018-07-26 17:58:19
175
原创 简单实现express框架
只匹配路由向外暴露一个createApp函数，函数返回一个app对象。声明routes（路由表）存放路由。app.get()，app.post()，app.all()等方法会往routes中添加路由项，createApp函数内部创建一个http服务，app.listen()监听端口。当客户端请求是遍历routes路由表，如果有匹配的路由，则执行该路由项的handler函数。const h...
2018-07-21 03:29:48
278
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人