- 博客(60)
- 收藏
- 关注
RSS订阅原创 nginx配置
nginxnginx是高性能的http和反向代理服务器，特点占用内存少，并发能力强nginx是一个跨平台服务器，可以运行在Linux, Mac Os, windows等操作系统正向代理：客户端的多个请求到代理服务器，代理服务器将其转发到目标服务器，然后将目标服务器生成的响应返回给客户端。反向代理：代理服务器接受到多个请求，将其分配转发到多个服务器，然后将响应返回给客户端。负载均衡：将原来请求集中到单个服务器的情况改为请求分发到多个服务器。动静分离：把动态页面和静态页面交给不同的服务器来解析
2022-03-17 15:41:40
3308
原创 代码提交规范工具
husky（githooks）git使用的挂钩, git在特定事件(pre-commit commit-msg push receive)之后执行脚本功能安装huskynpm install husky -D在package.json配置husky钩子{ "husky": { "hooks": { "pre-commit": "lint-staged", "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
2021-12-10 18:10:20
780
原创 Web Worker
Web Workerweb worker的作用是为javascript创建多线程环境，允许主线程创建woker线程。javascript是单线程，在多核cpu的情况下，无法充分利用计算机的计算能力。基本用法// 主线程const myworker = new Worker('./myworker.js') // 创建Worker对象myworker.postMessage('the data') // 向Worker线程发送数据myworker.onmessage = function
2021-12-10 17:49:48
263
原创 跨域请求方法
跨域不同源的Ajax请求均为跨域, 即浏览器url和请求接口地址的协议+域名+端口有一个不相同的Ajax请求受浏览器的同源策略影响，浏览器会拒绝不同源的Ajax请求.同源策略是浏览器的基本安全策略，不能通过Ajax请求不同域的数据同源：协议+域名+端口相同解决：XSS、CSFR等攻击为什么需要跨域请求一个需求需要请求多个服务器的接口跨域请求方式1. jsonp使用script标签进行发起get请求，因为script标签请求不受同源策影响，script标签的get请求不
2021-12-08 17:51:05
725
原创 响应式布局
自适应布局 adaptive web design自适应布局：一个应用程序使用多种版本用户界面，针对不同屏幕，服务器返回不同版本的用户界面，供用户访问。响应式布局 response web design响应式布局：一套应用程序用户界面能响应不同设备窗口或屏幕并且内容展示良好。设计方法: 媒体查询 + 流式布局优点：适应pc和移动端，如果足够耐心，效果完美缺点：匹配足够多的屏幕，工作量大，代码不好维护自适应和响应式的一些区别自适应是多套用户界面，响应式是一套用户界面。自适应需要
2021-12-08 15:58:39
183
原创 强缓存和协商缓存
缓存静态资源访问时，正确设置资源的缓存可以提高用户体验和网站性能缓存的优点减少不必要的数据传输，节省宽带减少服务器的负担，提高网站性能提高客户端的加载网页速度缓存的缺点资源如果更新了，客户端端更新不及时会导致用户信息滞后强缓存和协商缓存强缓存过期或者不设置(即失效)，才进入协商缓存强缓存服务端设置response header的cache-controlcache-control: max-age=xxxx, public客户端和代理服务器都可以缓存该
2021-12-07 17:27:22
533
原创 前端项目设计
前端项目常用架构项目目录项目构建 webpack/vite代码规范 eslint styleint提交规范 husky/lint-staged/commitlint模块化公共库组件，业务组件公共方法ajax 请求接口列表路由, 权限路由store 数据仓库设计模式常用业务布局音频，视频，富文本，图表，地图表单组件请求接口上传文件菜单权限，功能权限用户检验，登录检验，token/cookie本地缓存，store仓库scoket通信node服务数据埋点字
2021-12-02 16:37:54
893
原创 前端命名规范-建议
文件项目名/目录使用中橫线-分割, hello-worldjs/css/vue/图片等文件名使用中横线-分割, hello-world.jsjs缩进使用2空格(一个tab符)方法，参数，成员变量，局部变量使用小写驼峰, getUserInfo()常量使用大写下滑线分割, MAX_COUNT每个代码块隔一个空行可不写分号枚举文件放在constants文件夹下css类名使用中横线-分割，使用类名控制样式, .btn-primaryid名使用小写驼峰，id名不用在控制样式，用在j
2021-12-02 16:16:30
660
原创 图解http
请求方法get 获取资源post 传输实体主体put 传输文件delete 删除文件head 获取报文首部options 获取支持的请求方法请求报文请求行: 请求方法 uri 协议版本请求首部字段空行请求主体响应报文响应行: 协议版本，响应状态码，状态码原因短语响应首部字段空行响应主体tcp三次握手建立连接客户端发送syn到服务端服务端发送syn/ack响应客户端客户端发送ack到服务器确认建立连接持久连接http1.1 一次tcp连接可发送多次
2021-10-09 11:43:31
84
原创 js模块化
commonJs定义模块：module.exports, 导出属性不需要声明变量定义模块：export, exports 指向module.exports加载模块：require()， 将一个文件当作一个导出对象引入进来服务器端，node，运行时加载，模块对象拷贝// common.jsmodule.exports.add = function(a, b) { return a + b}exports.add = function(a, b) { return a +
2021-10-05 10:52:36
68
原创 js 事件循环机制 event loop
javascriptjavascript 是一门单线程的非阻塞的脚本语言。单线程：js在执行任务的时候只有一个主线程来处理所有任务。原因：浏览器交互，如果是多线程，同时对同一个dom节点进行操作会出现问题非阻塞：js执行异步任务的时候，主线程会挂起这个任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的任务。javascript 代码执行时，会把变量存在内存不同位置：堆 heap 和 栈 stack。堆中存放着一些对象，栈中存放一些基础类型变量以及对象的指针。执行栈当我们调用一个方法的
2021-04-24 11:41:40
121
原创 web性能优化
一 减小资源（静态资源，后端加载的数据）大小压缩代码HTML/CSS/JSwebpack4 现在已经默认使用 uglifyjs-webpack-plugin 对代码做压缩Tree-Sharking 删除冗余代码Tree-Shaking 可以在编译的过程中获悉哪些模块并没有真正被使用，这些没用的代码，在最后打包的时候会被去除。开启 Gzip开启gzip压缩可以有效压缩资源体积，压缩比率在3到10倍左右，可以大大节省服务器的网络带宽，提高资源获取的速度并不是经过gzip压缩之后，所有文件都会变小
2021-04-18 23:17:41
767
4
原创 js 继承
原型继承说明：将子类的原型设置为父类实例缺点：子类new出来的实例，父类的属性没有隔离，会相互影响，引用同一地址；子类不能向父类传参数function Parent() { this.name = 'parent' }Parent.prototype.getName = function() { console.log(this.name)}function Child() { this.name = 'child'}Child.prototyp
2021-04-18 21:44:02
73
1
原创 vscode 常用插件
vscode 常用 插件基础Chinese (Simplified) Language Pack for Visual Studio Codevscode 中文包Path Intellisense路径自动补全Code Spell Checker代码拼写检查javaScript(ES6)code snippets：ES6代码片段Auto Rename Tag自动重命名配对的标签Highlight Matching Tag高亮显示匹对的开始和/或结束标签Int
2020-10-18 22:31:22
484
原创 git笔记
git项目区域工作区: 即个人克隆项目到本地后,项目所在的文件夹目录暂存区: 用于储存工作区中的变更(增删改等改动)的文件的地方.操作时使用 git add 会将本地所有的变更提交到暂存区中本地仓库: 用于储存工作区和暂存区中提交上来的文件, 使用 git commit -m ‘提交内容的描述’远程仓库: 将本地仓库的修改提交到远程， 使用 git push origin 远程分支名...
2020-04-30 14:46:39
148
原创 es6 笔记
1 默认参数var link = function(height=50, color='red'){ }2 模板字符串var name = `your name is ${first} ${last}`;${变量名}3 多行字符串var name = ` your name is $(fitst),and then his name is ${la...
2019-08-15 14:36:16
125
原创 前端实现下载文件
1. <a>标签 实现下载文件<a herf="下载文件的接口地址" download="my.png">// 给a标签添加download属性, download的值是下载后的文件名字2. window.ope() 实现下载文件$('#btn').click(function(){ window.open("下载文件的接口地址")})...
2018-10-19 17:04:34
1341
原创 vue axios 实现上传文件
1 新建一个用来上传文件的axios，不同普通请求后台的axios，因为上传文件不能手动设置请求头 var uploadAxios =axios.create({}), Vue.prototype.$uploadAxios = uploadAxios; 注意: 不要设置请求头headers： {'Content-Type': '......'}, 因...
2018-10-19 16:46:36
2219
1
原创 axios
现在react和vue经常用axios访问和请求后端服务器1下载axios包：npm install --save axios;2项目引入axiosimport Axios from 'axios'; var baseUrl = 'http://localhost:8080'; var axios = Axios.create({ bas...
2018-10-17 21:42:19
934
原创 vue 引入iconfont图标库
进入inconfont官网：http://www.iconfont.cn 选择想要的图标，将它添加到购物车 进去购物车，点击"添加至项目"，如果没有项目就新建一个 选择 Font class, 点击右上方的"更多操作"->"编辑项目“ 将”FontClass/Symbol 前缀“改为”icon“ 点击”下载至本地“，解压到我们项目的文件夹...
2018-10-14 12:03:07
403
原创 vue的生命周期
vue实例的生命周期有四个阶段create 组件创建的时候，准备工作，数据的初始化mount 组件挂载到domupdate 组件数据发生变化destory 组件销毁，清理工作（关闭定时器，集合清空）生命周期方法（不能用箭头声明生命周期方法，因为生命周期钩子自动绑定在this上下文到实例）beforeCreate： vue实例创建前调用created：vue实例创建...
2018-10-11 14:33:17
128
原创 封装函数
在js封装一些函数，可以全局调用，1 在自执行的函数里，声明一个构造函数(即想封装的函数)(function(){ var demo = function(options){ // dosomething }})()2 然后将构造函数暴露在全局(function(){ var demo = function(op...
2018-10-03 20:14:18
3056
原创 数据结构-二叉树
二叉树特点： 每个节点最多只能有两个子节点， 若左子节点不为空，左子节点小于其父节点 若右子节点不为空，右子节点大于其父节点function Tree(){ var root = null; // 根节点 var Node = function(key){ // 节点对象 ...
2018-09-21 11:37:32
100
原创 数据结构-链表
单向链表， 是链表的一种，特点是链表的链接方向是单向，访问链表每次都要从头开始 每个节点引用着下一个节点function LinkList(){ // 节点 var Node = function(element){ this.element = element; this.next = null; } ...
2018-09-21 11:33:30
106
原创 js常用数据结构
列表 列表是一个序列，用中括号[]表示，用逗号‘,’分隔, 列表的每个元素的类型可以是对象，数字，字符串，列表，布尔值等 三大特性： 有序性，异构性，本地可修改 var list = [1, "a", true, {b: "c"}]; 队列线性结构，先进先出， 就像银行排队办业务， 先排队的先办业务，办完就离开，后来的人插到最后排队 functi...
2018-09-20 11:57:52
4749
1
原创 chrome调试
在浏览器按下F12键或者在设置找到开发者工具，就会弹出调试功能Element可以调试电脑和手机的元素样式, 比如调试元素大小，盒子模型，定位，背景等css样式调试查看html节点树以及其样式Console输出js语句的console的内容，console日志方便我们解决bugconsole.log 在控制台输出，不会转换数据类型，可以输出任何数据类型console.er...
2018-09-15 15:25:14
143
原创 js DOM
一 什么是DOM DOM是文档对象模型，documet-object-modal document: 浏览器的内置对象，指的是整个网页 object: 浏览器把网页的每个节点都看成是一个对象 modal: 表示节点对象之间的关系(dom树)，js操作网页必须通过dom树。 js操作dom首先从根节点开始查找 ...
2018-09-15 09:31:31
115
原创 原型和原型链
####原型-构造函数：只有函数都有prototype属性对象-原型：构造函数有一个prototype属性，是一个对象，即原型对象。Person.prototype-实例：实例的__proto__属性指向对象原型的指针。person.__proto__===Person.prototype-contrucotr属性：constructor是原型指向构造函数的指针。Person.prototype.constructor===Person//构造函数fun...
2018-09-14 22:09:12
153
原创 canvas笔记
canvas 定义图形，描绘图形<canvas id="mycanvas" width="200px" height="100px"></canvas>canvas标签有两个属性width, height, 是描绘图形的容器js来绘制图像var mycanvas = document.getElementById('mycanvas');var ctx = m...
2018-09-14 13:59:07
139
原创 vue-router使用说明
安装vue-router包 npm install vue-router --save1 router.jsimport Vue from 'vue';import VueRouter from 'vue-routerVue.use(VueRouter)；const router = new VueRouter({ routes: [ {path...
2018-09-13 16:59:44
203
原创 vue基础笔记
v-指令 v-if，v-else-if, v-else： 根据条件是否插入元素 v-for 循环：对数据进行循环遍历，第一参数是值，第二个参数是下标 v-for:"item in datas", v-for:"(item, index) in datas" v-show: 是否显示元素 v-bind：绑定动态属性，缩写为...
2018-09-13 16:49:55
151
原创 cookie和session
cookie： cookie的数据保存在浏览器上， cookieb并不是很安全，别人可以分析本地的cookie 单个cookie的大小不能超过3k 客户端每次请求都会吧cookie发到服务器上，但跨域访问不发送到服务器上session: session的数据保存在服务器上， session在一定时间内保存在服务器上，当访问增多是，会减低服务器的性能...
2018-09-10 21:14:31
95
原创 盒子模型
网页是许多盒子通过不同排列堆积而成盒子模型：一个盒子由内容，填充，边框，边距组成 margin: border: padding: width: height: 盒子模型宽度方式 box-sizing: border-box: 元素宽度width = content+padding+bo...
2018-09-08 11:47:39
99
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人