![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 82
幽月之格
web前端学习者、英语学习者
展开
-
【jenkins】从零打造前端自动化工作流
本文主要记录从零搭建jenkins环境,并与gitlab结合自动化部署前端项目。原创 2022-12-24 18:13:14 · 321 阅读 · 0 评论 -
Github Actions 自动部署前端项目
GitHub Action持续集成服务,目前已经免费开放使用,由于大部分人的个人项目都是放在Github上,那么使用它来发布、测试、部署,是非常方便的。最近写了一个基于Vue3 + Vant4 的移动端模板,由于每次想查看线上效果都要手动去打包部署,就去学习了一下Github actions 自动打包发布 项目地址 欢迎 star (_)如果对 Github actions 还不了解的可以看一下阮一峰老师这篇文档 参考文档修改部署配置在package.json中添加一个homepage字段"h原创 2022-05-19 14:24:25 · 311 阅读 · 0 评论 -
Vue 3 + Vite + Eslint + prettier + husky + lint-staged 搭建基础项目
项目搭建参考vite官网:https://vitejs.cnpnpm create vite代码规范集成 editorconfig 配置EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格(tab | spac原创 2022-04-27 17:44:38 · 749 阅读 · 0 评论 -
2022三四月前端面试总结
说啥也不能浪费金三银四啊最近出去面试了几次,想着出去试试这一年的学习成果,结果。。。html、css相关盒模型标准盒模型:盒子总宽度/高度 = width/height + padding + border + margin。( 即 width/height 只是内容高度,不包含 padding 和 border 值 )IE盒子模型:盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin。( 即 wid原创 2022-04-01 19:48:45 · 138 阅读 · 0 评论 -
野路子中高级前端进阶之路
前端入门请移步=>前端学习路线如果你感觉到焦虑,每天都想学点啥,确不知道从何学起 别担心这是正常的,因为我也经历过每次计划一个小的技术范围逐个击破,例如:我想话3天把webpack再深入一下,2天把git搞搞,学习完后尽量整理一篇技术文章,我说的是尽量哈,毕竟我也没有这么做(狗头。。。)先申明一下,我个人学习的方式是视频结合书籍或文档的方式,一般我会先看视频过一遍然后再通过书籍或文档复习一边之所以叫野路子是因为这是我自己学习的方法东拼西凑起来的为什么说中高级,3年了大哥,还说初级有点不合适吧原创 2022-03-22 14:13:29 · 1374 阅读 · 0 评论 -
docker+nginx部署vue项目
打包vue项目 npm run build / yarn build 此时工程根目录下多出一个 dist 文件夹, 其它项目也可以只要打包好静态文件就行Nginx 是一个高性能的 HTTP 和反向代理服务器,此处我们选用 Nginx 镜像作为基础来构建我们的vue应用镜像。在项目根目录下创建 nginx 文件夹,该文件夹下新建文件 default.conf, 写入如下配置proxy_pass 需改成请求的地址,如果请求地址没有api就重写为空,否则不用 rewriteserver { .原创 2021-12-28 18:13:21 · 1554 阅读 · 0 评论 -
docker部署eggjs项目,搭建数据库环境 mysql, redis
使用docker部署eggjs项目,看这篇文章之前建议您熟悉一下docker的基本命令安装 redis# 拉取redis镜像docker pull redis# 启动容器docker run -itd --name redis-server -p 6379:6379 redis安装 mysql# 拉取mysql镜像docker pull mysql:5.7# 启动容器docker run -itd --name mysql -p 3306:3306 -e MYSQL_ROOT_PASS原创 2021-12-28 10:16:34 · 814 阅读 · 0 评论 -
前端书籍推荐
前端书籍推荐如果是刚入门的话,还是建议先看视频学习。等有点基础了看书会得心应手一点。(个人经验,喜欢看书学习例外)推荐入门学习视频书的顺序不分先顺序后哟(虽然标了序号),但建议先看一下 JavaScript 高级程序设计在看其它的一、书名: JavaScript 高级程序设计(第 3 版/第 4 版)作者: [美] 马特 • 弗里斯比2012 年是这本被誉为 JavaScript“红宝书”的著作第 3 版出版的时间。生逢其时,第 3 版狂销几十万册,影响深远,甚至改变了很多人的命运(包括本书译者原创 2021-02-03 17:16:17 · 410 阅读 · 0 评论 -
js 基础算法题(二)
一、判断一个数是不是质数(素数)质数又称素数。一个大于 1 的自然数,除了 1 和它自身外,不能被其他自然数整除的数叫做质数;否则称为合数。0 和 1 既不是质数也不是合数,最小的质数是 2function isPrime(num) { // 这里特殊处理了一下小于等于3的数,因为小于等于3的自然数只有2和3是质数。 if (num <= 3) return n > 1 // 循环2到num之间的数,不能超过num for (let i = 2; i <原创 2020-11-11 14:19:54 · 602 阅读 · 0 评论 -
js 基础算法题(一)
一、转驼峰user-top-info-name 变为驼峰 userTopInfoName方法 1-利用数组function toCamelCase(str) { if (!str) return '' // 首先将字符串转换为小写 str = str.toLowerCase() // 使用 split 将字符串转换为数组 let strArr = str.split('-') // 使用 map 遍历数组,数组第一个不用转,其它的都转 /* strArr =原创 2020-11-10 09:30:46 · 413 阅读 · 0 评论 -
asyn/await 的语法和使用
一、 async 函数函数的返回值为 promise 对象promise 对象的结果由 async 函数执行的返回值决定async function fn() { // return 1 返回一个成功的promise,值为 1 // throw 2 返回一个失败的promise,值为 2 // return Promise.reject(3) 返回一个失败的promise,值为 3 return Promise.resolve(4) // 返回一个成功的promise,值为 4}原创 2020-11-04 16:36:42 · 639 阅读 · 0 评论 -
手写 promise
一、 Promise 的理解Promise 是 JS 中进行异步编程的新解决方案promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值promise 有 3 种状态,pending、resolved、rejectedpromise 的状态改变(只有 2 种, 只能改变一次),pending 变为 resolved, pending 变为 rejected二、Promise 构造函数/* Promise构造函数 */const PENDING = 'pending'原创 2020-11-04 12:32:12 · 105 阅读 · 0 评论 -
原生 ajax 封装
一、AJAX 简介AJAX 全称为 Asynchronous Javascript And XML,就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。AJAX 不是新的编程语言,不是新的一门独立的技术,而是一种使用现有标准的新方法。二、AJAX 的工作原理Ajax 的工作原理相当于在用户和服务器之间加了一个中间层(Ajax 引擎),使用户操作与服务器响应异步化。三、AJAX 的特点AJAX 的优点可以无需刷新页面而与服原创 2020-11-03 09:05:26 · 245 阅读 · 0 评论 -
Vue 实现 Switch 组件-通过vue.use()注册
组件封装代码 components/switch/switch.vue<template> <div class="sun-switch" :class="{'sun-switch-on':value,'sun-switch-disabled':disabled}" :style="{fontSize:size,backgroundColor:CalBgColor}" @click="handleChange" > <div原创 2020-09-21 10:07:51 · 742 阅读 · 0 评论 -
js深拷贝和浅拷贝
浅拷贝与深拷贝的区别解释:浅拷贝: 只是复制了对象属性或数组元素本身(只是引用地址值)深拷贝: 不仅复制了对象属性或数组元素本身, 还复制了指向的对象(使用递归)举例:浅拷贝: 只是拷贝了每个 person 对象的引用地址值, 每个 person 对象只有一份深拷贝: 每个 person 对象也被复制了一份新的浅拷贝实现利用 ES6 语法function shadowClone1(target) { // 如果是数组 if (target instanceof原创 2020-09-09 09:02:49 · 254 阅读 · 0 评论 -
js数组去重
一、理解根据当前数组产生一个去除重复元素后的新数组如: [6,9,8,7,2,5,6,5,4,5,6,4,5] ==> [6,9,8,7,2,5,4]二、实现代码forEach()和indexOf() 说明: 本质是双重遍历, 效率差些 /* 接收一个数组为参数,返回一个去重的数组 */ function unique (array) { // 定义一个空数组 const resultArr = [] // 循环遍历未去重的数组 a原创 2020-09-04 08:54:43 · 566 阅读 · 0 评论 -
数组声明式系列方法:map、reduce、filter、some等的实现
map() Array.prototype.myMap = function (callback) { const arr = [] // 遍历当前数组每个元素, 调用callback得到一个结果数据, 添加arr for (let index = 0; index < this.length; index++) { const element = this[index]; const result = callback(element, inde原创 2020-09-03 09:20:49 · 176 阅读 · 0 评论 -
函数的节流(throttle)与防抖(debounce)
一、事件频繁触发可能造成的问题?一些浏览器事件:window.onresize、window.mousemove等,触发的频率非常高,会造成浏览器性能问题如果向后台发送请求,频繁触发,对服务器造成不必要的压力二、如何限制事件处理函数频繁调用函数节流函数防抖三、函数节流(throttle)理解:在函数需要频繁触发时: 函数执行一次后,只有大于设定的执行周期后才会执行第二次适合多次事件按时间做平均分配触发场景:窗口调整(resize)页面滚动(scroll)DOM原创 2020-09-01 09:37:41 · 211 阅读 · 0 评论 -
call、apply、bind的区别和自定义
区别call()/apply()/bind()call(obj)/apply(obj): 调用函数, 指定函数中的this为第一个参数的值bind(obj): 返回一个新的函数, 新函数内部会调用原来的函数, 且this为bind()指定的第一参数的值注意: 如果obj是null/undefined, this为window应用call()/bind()应用: 根据伪数组生成真数组bind(): react中组件的自定义方法 / vue中的事件回调函数内部自定义call()/apply(原创 2020-08-31 09:51:28 · 138 阅读 · 0 评论