- 博客(26)
- 收藏
- 关注
RSS订阅原创 群晖docker安装jd脚本工具（jd_base）
年底了，电商平台的活动越来越多，原本手动的点击的，现在发现根本点击不过来，于是就想写一下这次在群晖上的docker上的安装教程在群晖套件中找到docker套件，点击安装安装完成之后，点击docker套件，进入注册表页面，搜索栏中输入jd，并下载如下容器。下载完成之后点击来到映像页面，点击刚下载好的docker image，在点击启动启动后，点击高级设置，来到高级设置页面。把启动自动重新启动勾上，再来点击到卷页面来到卷页面之后，点击添加文件夹，将入下两个文件夹装载到群
2021-01-23 22:34:35
17360
18
原创 前端性能优化
性能优化原则多使用内存，缓存或其他方法减少CPU计算量，减少网络加载耗时（适用于所有百年城性能优化，空间换时间）让加载更快减少资源体积：压缩代码减少访问次数：合并代码，SSR服务端渲染缓存使用更快的网络：CDN让渲染更快CSS放在head中，JS放在body最下面尽早开始执行JS，用DOMContentLoaded触发懒加载（图片懒加载，上滑加载更多）对DOM查询进行缓存频繁DOM操作，合并到一起插入DOM结构节流throttle，防抖debounce thrott
2020-11-07 11:11:11
201
原创 浏览器的渲染过程
浏览器的渲染过程根据HTML代码生成DOM Tree根据CSS代码生成CSSOMDOM Tree和CSSOM整合行程Render Tree根据Render Tree渲染页面遇到<script>则暂停渲染，优先加载并执行JS代码，完成再继续直至把Render Tree渲染完成优秀博文请查看：https://www.jianshu.com/p/e6252dc9be32...
2020-11-07 10:56:54
148
原创 前端优化总结
资源合并// 未合并<script src="a.js"></script><script src="b.js"></script><script src="c.js"></script>// 合并之后，可以减少请求<script src="abc.js"></script>缓存[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ur7aGgCN-1604557969
2020-11-05 14:33:20
173
原创 Restful API
现在的methodsget：获取数据post：新建数据patch/put：更新数据delete：删除数据Restful API一种新的API设计方法传统API设计：把每个url当做一个功能Restful API设计：把每个url当做唯一的资源如何设计成一个资源尽量不用url参数用method表示操作类型例如：传统API设计：/api/list?pageIndex=2Restful API设计：/api/list/2用method表示操作类型（传统API设计）
2020-11-04 11:50:35
120
原创 HTTP常见状态码
状态码分类1xx：服务器收到请求2xx：请求成功，如2003xx：重定向，如3024xx：客户端错误，如4045xx：服务端错误，如500常见状态码200：请求成功301：永久重定向302：临时重定向304：资源未被修改403：没有权限，例如 未登录，没有用户权限404：资源未找到500：服务器错误504：网关超时...
2020-11-04 11:27:46
111
原创 浏览器的同源策略
浏览器的同源策略ajax请求时，浏览器要求当前网页和server必须同源（安全）同源：协议，域名，端口，三者必须一致例： client：http://taobao.com:8080 server：https://alibaba.com:443/api/加载图片css js 可以无视同源策略<link rel="stylesheet" href="">可使用CDN，CDN一般都是外域<script src=""></script>可实现JSO
2020-11-03 16:54:44
242
原创 手写简易的ajax请求
### 手写简易的ajax// 第一步需要new一个XMLHttpRequest对象 const xhr = new XMLHttpRequest() // 第二步使用传入请求方式，请求路径，同步还是异步 // 最后的一个参数，true是代表异步请求，false是代表同步请求，默认是异步 xhr.open('GET', '/api', true) // 当状态改变的时候发送请求 xhr.onreadystat
2020-11-03 15:16:53
590
原创 事件绑定与事件监听
编写一个通用的事件监听函数function bindEvent(elem, type, selector, fn) { if (fn == null){ fn = selector selector = null } elem.addEventListener(type, event => { const target = eve..
2020-11-03 15:15:28
172
原创 JavaScript中的异步
JS如何执行？从前到后，一行一行执行如果某一行执行报错，则停止下面代码的执行先把同步代码执行完，再执行异步宏任务与微任务event loop 浏览器总结event loop过程同步代码，一行一行的放在Call Stack执行遇到异步，会先‘记录’下，等待时机（定时，网络请求等）时机到了，就移动到Callback Queue如果Call Stack为空（即同步代码执行完）Event Loop开始工作轮询查找Callback Queue，如有则移动到Call Stack执行然后
2020-11-02 14:00:29
144
原创 闭包与this
闭包作为返回值，在程序中返回的函数，由外面的变量引用了，所以不会销毁，从而形成了闭包，help得到的是一个函数，当函数执行的时候，函数会去找执行上下文中的a，即函数app中的afunction app() { let a = 10010; return function () { console.log(a); } } const help = app(); let a = 10086; hel
2020-10-31 21:10:06
143
原创 深克隆与原型原型链
乞版深克隆<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body><script&
2020-10-31 12:13:29
210
原创 NodeJS中的包
完全符合CommonJS规范的包目录一般包含如下这些文件package.json：包描述文件bin：用于存放可执行二进制文件的目录lib：用于存放javascript代码的目录doc：用于存放文档的目录在NodeJS中通过npm命令来下载第三方的模块（包）https://www.npmjs.com/package/silly-datetime自动在生成package.jsonnpm init --yesnpm init -y这里在mac下遇到一个坑，如果遇到文件夹是中文就会报错[
2020-10-12 14:05:58
468
原创 http,url.supervisor模块
HTTP模块var http = require('http');http.createServer(function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain'}); response.end('Hello World');}).listen(8081);console.log('Server running at http://127.0.0.1:8081/');var
2020-10-12 12:17:42
157
原创 CommonJs和NodeJs关系
什么是CommonJs？ JavaScript是一个强大的面向对象语言，它有很多快速高效的解释器，然而JavaScript标准定义的API是为了构建基于浏览器的应用程序，并没有定制一个用于更广泛的应用程序的标准库。commonJS规范的提出，主要是为了弥补当前JavaScript没有标准库的缺陷。它的终极目标就是：提供一个类似Python，Ruby和Java语言的标准库，而不只是让JavaScript停留在小脚本程序的阶段。用CommonJS API编写出的应用，不仅可以利用JavaScript开发客
2020-10-12 12:16:34
1909
原创 swiper6和vue-awesome-swiper4填坑
swiper6和vue-awesome-swiper4填坑今天在 npm 安装swiper和vue-awesome-swiper的时候没指定版本，默认安装了最新的swiper6和vue-awesome-swiper4，然后就出现了各种效果调试不出来，各种报错，折腾了好一会儿这里总结一下爬坑过程，要想使用vue-awesome-swiper4那就需要配合swiper5来使用，要使用vue-awesome-swiper3那就需要配合swiper4来使用，要使用vue-awesome-swiper3那就需要
2020-08-31 14:16:34
1300
原创 配置Mock
开发阶段，为了提高效率。需要提前Mock本地加载请求静态json文件的形式（这里的跟目录是指的public目录）this.axios.get('/mock/user/login.json').then((res) => { this.res = res})通过easy-mock平台实现数据mock，点我进入官网this.axios.get('/user/login').then((res) => { this.res = res})通过安装插件mo..
2020-08-29 15:20:27
812
原创 接口环境设置
开发上线的不同阶段，需要不同的配置不同的跨域方式，配置不同打包的时候统一注入环境参数，统一管理环境，输出不同的版本包在scr目录新建一个env.js文件来配置不同的环境下，使用不同的参数let baseURL// 在node中有一个process.env.NODE_ENV进程，可以取到环境变量中的参数switch (process.env.NODE_ENV) { case 'development': baseURL = 'http://dev-xx-xxx.com/..
2020-08-29 12:42:15
405
原创 sessionStorage的封装
Cookie，localStorage，sessionStorage三者区别？cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存存储大小：cookie数据大小不能超过4ksessionStorage和localStorage虽然也有存储大小的限制，但比coo
2020-08-28 20:16:59
1176
原创 前端跨域解决方案
什么是前端跨域？跨域是浏览器为了安全而做出的限制策略浏览器请求必须遵循同源策略：同域名，同端口，同协议怎么解决前端跨域？CORS跨域CORS跨域-服务端设置，前端直接调用说明：后台允许前端某个站点进行访问JSONP跨域JSONP跨域 - 前端适配，后台配合说明：前后端同时改造JSONP不是一个XHR请求，只是一段脚本而已代理跨域接口代理：通过修改nginx服务器配置来实现说明：前端修改，后台不动最常用的方式在项目根目录下新建一个vue.c
2020-08-28 17:44:09
136
原创 仿小米商城的路由配置，插件安装，项目结构
未登录统一拦截首先需要安装axios和vue-axios安装好了之后需要在main.js中引入import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)根据前端的跨域方式做调整（此处使用的是proxy做代理）axios.defaults.baseURL = '/api'对请求超时做处理（优化用户体验）axios.defaults.timeout = 8000..
2020-08-28 17:42:56
221
原创 JS作用域和闭包核心面试题
说一下对变量提升的理解JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。说明this几种不同的使用场景第一种情况: 全局下thisfunction fn1 (){ return this}console.log(fn1()) //window注意: 在严格模式下 “use strict” this是undefined第二种情况:构造函数当函数作为构造函数调用时,t..
2020-08-26 10:25:54
278
原创 js变量类型和原型
变量类型和计算js中使用typeof能得到的哪些类型typeof undefined //undefinedtypeof “abc” //stringtypeof 123 //numbertypeof true //booleantypeof {} //objecttypeof null //objecttypeof [] //objecttypeof console.log //function何时使用===
2020-08-25 14:01:02
299
原创 HTML和CSS面试题总结
HTML面试题如何理解HTML语义化？让人更容易读懂（增加代码的可读性）让搜索引擎更容易读懂（利于SEO）默认情况下，哪些HTML标签是块级元素，哪些是内联元素？display: block/table; 有div h1-h5 table ul ol p等display: inline/inline-block; 有 a b em strong i span img input button等CSS面试题布局 盒模型宽度计算：<!DOCTYPE html><
2020-08-24 21:03:29
254
原创 VScode常用插件记录
插件作用Chinese (Simplified) Language Pack for VS Code中文（简体）语言包Open in Browser右击选择浏览器打开html文件JS-CSS-HTML Formatter每次保存，都会自动格式化js css 和html 代码Auto Rename Tag自动重命名配对的HTML / X...
2020-05-09 09:10:33
208
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人