自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

欧阳的技术博客

专注于前端开发,多年开发及项目管理经验,Q:2567040816

  • 博客(96)
  • 资源 (1)
  • 收藏
  • 关注

原创 超级实用的vue小技巧,用了之后直呼好棒~

实用的vue小技巧,来源于真实企业实战1. 原型注入2. 对象冻结3.img 加载失败4. 递归组件1. 原型注入全局属性和方法可以这么定义方便调用和获取一般不定义很多(会污染原型,每次实例Vue都会带上)// main.js入口文件内import Vue from "vue";import router from "./router";import store from "./store";import dayjs from "dayjs";import App from "./

2021-07-15 08:42:07 1348 45

原创 如何让你的代码变得更优雅?这些代码规范和技巧必须知道(进阶必备,建议收藏)

如何做一名优秀的程序猿?从改善每一行代码开始1. 看你的代码就知道你几斤几两2. 编程标准3. 命名规范4. 松耦合,高复用1. 看你的代码就知道你几斤几两1.1 面试常会犯的错????‍♂️:面试者????‍⚖️:面试官面试前????‍♂️:先把简历写好,机构老师特别交代:一出去就要说三年工作经验????????‍♂️:面试题要背,工资不能要低了~????‍♂️:包装一下????‍♂️:…面试中????‍⚖️:问题回答的不错,可以看看你最近做的项目么?????‍♂️:

2021-07-12 08:51:40 9479 90

原创 什么样的程序员才算得上优秀,把导师曾对我说的话送给大家(比代码更重要的事)

优秀程序员的定义是什么?那些比写代码更重要的事情1. 说在前面2. 为什么选择了这行呢?:whale: (导师),:tropical_fish:(我)3. 如何才能成为一名优秀的程序猿呢?4. 大佬的代码层分享(通用)1. 说在前面为什么忽然想起这个话题呢?起因是最近不少人问到我,大都是对这个职业心存疑惑或是不太清楚,如何成长?如何突破?未来的路在哪里?很多人以为,程序猿的任务就是把需求实现,bug修好(这也是我几年前的思想)把之前导师(某大厂P7级别的大佬,现在已是P8)和我说的分享给大家,觉得

2021-06-28 08:21:09 20778 544

原创 javascript 代码技巧 (四) —— javascript获取坐标/滚动/宽高/距离

1. 坐标(鼠标/触摸)event.screenX 鼠标/触摸,相对于显示屏的X坐标event.screenY 鼠标/触摸,相对于显示屏的Y坐标event.clientX 鼠标/触摸,相对于浏览器视口的X坐标event.clientY 鼠标/触摸,相对于浏览器视口的Y坐标event.pageX.

2021-07-23 09:40:17 54 2

原创 react-native 加载动画 loading效果

react-native loading动画(加载动画)1. 组件代码(demo.js)2. 调用1. 组件代码(demo.js)import Taro, { PureComponent } from '@tarojs/taro'import { StyleSheet, View, Text, ActivityIndicator,} from 'react-native';export default class ActivityIndicatorDemo ext

2021-07-21 16:50:08 41 1

原创 react-native注意事项,开发前必读文档

react-native各种不同点总结1. 平台区别2. 样式处理及不同点3. 特殊注意点1. 平台区别组件文件区别index.js -> index.rn.jsindex.scss -> index.rn.scss路由页面区别 <请避免使用>index.js -> index.android.js index.ios.jsindex.scss -> index.android.scss index.ios.scsss

2021-07-19 12:05:42 77 8

原创 javascript 代码技巧 (三) —— 史上最全类型判断

1. typeof(不能区分复杂类型)console.log(typeof bool); //booleanconsole.log(typeof num); //numberconsole.log(typeof str); //stringconsole.log(typeof und); //undefinedconsole.log(typeof nul); //objectconsole.log(typeof arr); //objectconsole.log(typeof obj); .

2021-07-14 17:58:17 76 1

原创 javascript 代码技巧 (二) —— 运算符

1. 拓展运算符// 对象合并let obj = { a: 0 };let obj1 = { a1: 1 };let obj2 = { a2: 2 };// 方式一(繁琐)obj.a1 = obj1.a1;obj.a2 = obj2.a2;// 方式二(简洁)obj = { ...obj1, ...obj2 };// 数组合并let arr = [];let arr1 = [1, 2];let arr2 = [3, 4];// 方式一(繁琐)arr = arr.co.

2021-07-13 08:30:43 75 4

原创 javascript 代码技巧 (一) —— 操作符

1. && 操作符// 繁琐if (this.isTrue) { this.test();}// 简洁this.isTrue && this.test();2. || 操作符// 繁琐let num;if (this.value) { num = this.value;} else { num = 2;}// 繁琐let num = this.value ? this.value : 2;// 简洁let num = .

2021-07-12 17:07:08 77 10

原创 JavaScript经典算法(一)—— 排序类

1. 冒泡排序1.1 概述一般用于数组的排序比较相邻两个元素的大小,大的放在小的后面1.2 原理与实现需要两个for循环外层循环控制比较几轮,内层循环控制每轮比较几个元素let arr = [11,8,7,18,56,35,41,9]; for(let i = 0; i <= arr.length - 1; i++){ // 外层循环控制比较几轮 for(let j = 0; j <= arr.len.

2021-07-07 09:23:46 515 21

原创 react-native踩坑合集,来源于真实企业开发(建议收藏)

react-native踩坑合集1. 常见错误2. 注意事项1. 常见错误1. 1 call3,call7…错误接口出问题(后台)接口调用错误(前端)1. 2 代码未执行,效果不刷新代码中有错误,服务自动断掉了检查带有红色线的代码1.3 图标未找到(阿里字体图标库)出现这种情况一般是:项目的其他开发者加入了新图标,你只更新了代码,未更新图标解决方案关闭所有服务删除 rn_temp 文件运行 npm run dev:rn(此时不要执行node命令,让程序生成新的

2021-07-06 21:14:27 85 1

原创 JS基本功修炼,一文搞懂JavaScript数组

JavaScript 数组的全方位解析1. 数组概述2. 访问数组3. 二维及多维数组4. 数组的常用操作1. 数组概述1. 1 数组是什么?数组可以看成是一个容器,用来存放值举个例子:一整栋楼可以看成一个数组里面的每一个房间都是数组的元素,它们一起组成了整个数组1.2 数组的定义以下两种方式定义的数组是一样的:// 字面向量let arr = [1, 2, 3, 4];// new 关键字创建一个实例,继承至基类Arraylet arr2 = new Arra

2021-07-05 10:06:27 2793 77

原创 react+Trao框架数据回调问题(已解决)

1. 业务场景分析A页面带一个数组,传到B页面B页面会操作此数据(增删改查等)B页面操作完会返回此数组,A页面拿到操作后的值,草图如下:2. A页面操作componentDidMount()中添加如下代码:(装载完成,在render之后调用)async componentDidMount() { // 自定义事件名 Taro.eventCenter.on('EVENT_SLEECT_SCHOOL', (res) => { // 此处用于取参 B页面.

2021-07-03 11:50:18 107 9

原创 前端程序猿的天花板?react-native开发及调试方案(真实项目,建议收藏)

react-native开发及调试方案 —— 来源于真实企业项目1. React Native 概述2. 开发与调试工具3.package.json 文件4. FAQ1. React Native 概述将原生开发的最佳部分与 React 相结合。酌量添加,多少随意。随时都可以把 React Native 无缝集成到你已有的 Android 或 iOS 项目,当然也可以完全从头焕然一新地重写。这是目前很好的一款做APP的框架。(上手也有一定难度)个人认为,使用此框架和你的技术深浅关系不大,主要是

2021-07-02 08:33:41 530 68

原创 H5移动端常用事件,此中大有文章

移动端事件,封装自定义事件1. 移动端事件2. 封装移动端自定义事件3. FAQ1. 移动端事件首先,移动端不建议使用 click 事件因为它有300毫秒的延迟,对用户体验不太友好常用事件:touchstart(),touchend(),touchmove()HTML文件<!DOCTYPE html><html lang="ZH-cn"> <head> <meta charset="utf-8">

2021-06-25 11:32:44 216 11

原创 JavaScript常用事件集合,前端小白必备(写的很详细,建议收藏)

JavaScript入门级经典教程(无噱头,直接上干货)1. 文档加载事件2. 鼠标事件3. 获取浏览器类型,手机机型(容易出问题的地方)4. 事件冒泡与事件委托(面试重点)最近有很多粉丝小伙伴,说要一些基础教程,必须安排的明明白白后续做一个一整个JS教程(知识点 + 经典案例)新朋友可以关注一波(能三连是最好的了),本博主高产似奶牛1. 文档加载事件此事件使用频率很高,务必掌握文档加载完成之后会做的事情1.1 ready()ready(): 表示文档结构已经加载完成(不包含

2021-06-22 08:09:08 1078 76

原创 哄女朋友利器 —— 赶紧对她说我爱你,程序猿的专属浪漫(附源码)

女朋友生气了怎么办?哄她的利器来了(建议收藏)1. 文字表白 + 雪花动态效果2. canvas 绘制爱心程序猿同胞们经常被叫做“直男”(对此我们十分气愤)于是,我们准备制造一些浪漫,给女朋友的专属惊喜1. 文字表白 + 雪花动态效果1.1 效果展示1.2 html代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> &

2021-06-21 08:50:40 1999 103

原创 前端开发者的必备知识宝库 —— 史上最全JavaScript domAPI整理(建议收藏)

前端开发者的必备知识宝库 —— JavaScript domAPI整理1. 节点类型2. 原型与原型链3. this 指向问题4. new 关键字做了什么?5. 原生JS如何实现事件委托?6. 手写一个冒泡排序8. 如何一行代码实现数组去重?9. null与undefined有什么区别?对一般兼容性和特点做了标识(暖暖的,很贴心~)包含新出的各类API(简直不要太爽)1. 节点类型1.1 深拷贝与浅拷贝有什么区别?深拷贝和浅拷贝只针对象: Object, Array 这样的复杂对象(引

2021-06-17 08:39:55 853 107

原创 JavaScript保姆级教程 ——— 重难点详细解析(万字长文,建议收藏)

JavaScript保姆级教程 ——— 重难点详细解析(建议收藏)1. JS函数2. JS事件3. JavaScript 对象本文是整理了JS中的一些重点,难点,以及不好理解的知识点本文非常详细,深入的讲解,包学包会1. JS函数1.1 函数(Function)是什么?函数(方法)是由事件驱动的或者当它被调用时执行的可重复使用的代码块 —— 官方说明向来觉得官方的文档是有些生硬的,举个例子:函数可以看做是功能(以一辆汽车为例,如下图),这些都可以看做成是方法刹车油门鸣笛

2021-06-15 08:02:45 28674 253

原创 零基础也能学会,原生JS实现图片轮播(附源码,拿去即用)

JavaScript —— 原生JS实现图片轮播1. 项目效果图2. 基础布局(index.html)3. CSS 样式(index.css)5. JS部分(做了详细注释)6. FAQ首先,祝大家端午安康,发大财!一夜暴富1. 项目效果图技术栈(原生JS),真正高端的效果往往只需要简单质朴的JS就能实现可以点击左右箭头切换图片鼠标悬浮在数字上也可切换图片设置了定时器,会自动轮播用到了animate,效果非常丝滑2. 基础布局(index.html)这里非常简单,不做过多解释

2021-06-12 12:19:54 541 78

原创 被黑心商家坑了N次,探究抽奖背后的秘密 —— H5转盘小游戏完整实现(源码直接拿走)

原生JS实现H5转盘游戏 —— (揭秘黑心商家的肮脏套路)1. 基础的页面布局(index.html)2. 工具函数(用于调整概率)3. 传参及接收值配置4. dom 操作方法及具体逻辑处理5. FAQ(注意事项)本文是真实的实战项目,可以直接拿去用 —— 转盘抽奖可以自由调整概率,你也可以成为黑心商家项目效果是这样滴: H5小游戏 天儿也不早了,直接开干!1. 基础的页

2021-06-08 07:54:41 1302 105

原创 深夜爆肝JS好文!2021字节跳动春招面试题深度讲解

剑指offer —— 2021字节跳动春招面试题详解(JS篇)1. 深拷贝与浅拷贝5. 如何用CSS绘制如下三角形?6. BFC规范是什么?7. 怎么让Chrome支持小于12px 的文字?8. css 加载会造成阻塞吗?9. 1像素边框问题如何解决?10. CSS优化、提高性能的方法有哪些?本文选题都是字节跳动中一些 经典且有一定难度的JS面试题含金量杠杠的!,并且会进行深入的讲解,专业讲解分析,包教包会1. 深拷贝与浅拷贝1.1 深拷贝与浅拷贝有什么区别?深拷贝和浅拷贝只针对象:

2021-06-07 09:23:57 3311 117

原创 吊打面试官了解一下?2021年字节跳动春招面试题详解(附详细答案)

剑指offer —— 2021字节跳动春招面试题详解(CSS篇)1. padding 与 margin2. vw 与 % 有什么区别?3. 行内元素与块级元素有什么不同?4. 如何使一个div在body中快速居中对齐?5. 如何用CSS绘制如下三角形?6. BFC规范是什么?7. 怎么让Chrome支持小于12px 的文字?8. css 加载会造成阻塞吗?9. 1像素边框问题如何解决?10. CSS优化、提高性能的方法有哪些?本文选题都是字节跳动中一些 经典且有一定难度的面试题含金量杠杠的!,并且会进

2021-06-02 07:59:09 9514 105

原创 都2021年了,再不学ES6你就out了 —— 一文搞懂ES6

JS干货分享 —— 一文搞懂ES61. ES6是什么?用来做什么?功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入1. ES6是什么?用来做什么?ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一

2021-06-01 08:11:20 12451 170

原创 腾讯架构师带我写代码 —— vue真实企业实战分享

Vue.js+element ui构造后台管理系统阅读本文你会收获些什么?项目预览项目技术栈概览1. 路由配置2. 登录页配置3. API层配置(接口配置)4. 跨域处理5. 可以愉快的调接口了6. main.js中 你需要的配置7. 配置路由拦截8. 全局方法配置9. 父页面配置(home.vue)10. FAQ:你可能会碰到的问题及解决方案阅读本文你会收获些什么?不玩虚的,真实的企业项目实战技巧,可以直接拿过去用真实的接口调用,实现相关功能优秀的封装技巧(本项目在前腾讯前端架构师指导下构建)

2021-05-27 08:42:35 19626 169

原创 前端萌新看过来了—— 0基础1小时vue入门到实战

Vue.js+element ui从零开始一个项目项目概览1. 脚手架安装与搭建合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入项目概览Vue版本:V 2.6.element ui版本:V开发工具:vscode(推荐使用的前端开发工

2021-05-26 08:47:58 9797 60

原创 前端程序员不可不知的 —— 浏览器的那些事(全都是干货!!!)

文章目录浏览器对于前端程序员的重要性浏览器构成渲染内核浏览器工作流程浏览器解析与渲染(经典面试题分析)浏览器对于前端程序员的重要性面试必问点 ,现在的前端面试中,或多或少都会问到前端的底层不是JS,而是浏览器代码最终是在浏览器上跑的,不知道浏览器原理,没办法做优化对于前端程序猿底层技术功底的考验浏览器构成渲染内核渲染内核也称渲染引擎,主要有3种:Trident内核: IEWebkit内核:Chrome,SafariGecko内核:FireFox浏览器工作流程这里也涉及到一

2021-05-25 10:08:17 11023 58

原创 vue中的$nextTick()

$nextTick的定义

2021-05-14 10:47:32 154 4

原创 echarts 显示隐藏后宽度高度变小问题

正常情况下

2021-05-14 09:32:23 9266 3

原创 element el-cascader动态加载数据 (多级联动,落地方案)

前言最近需要用到element ui的这个插件做地区的四级联动,但是碰了一些问题:官网的说明太泛泛然,不易看懂 网上的教程乱七八糟,代码一堆一堆的 看这篇就对了!!! 效果图 =>点击确认后的值1. template <el-cascader size="mini" :props="props" @change="handleChange" v-model="value" style="w...

2021-05-13 21:17:13 9035 2

原创 react配置antd按需加载

安装与全局引用安装npm install antd --save 使用(以Button组件为例)importReactfrom'react'import'antd/dist/antd.css';classMyFirstComponentextendsReact.Component{state={text:"HelloReact",author:"欧阳"};/**组件生命周期钩子函数:在组件挂载完成后立即被调用*/...

2021-05-06 21:01:44 6484 7

原创 vue Cannot read property ‘0‘ of undefined“ 问题及解决方案

问题分析1. 当我们表单取值时,如下:2.多级取值,例如取的值是:Obj.class.student.img[0]报错:报错翻译是:render中出错:“TypeError:无法读取未定义的属性“0”更奇怪的时候,界面正常显示,我们也能正常取到值,但开发者工具会报错。那这就是很多强迫症患者不能忍的了,,,原因及解决方案原因:vue中模板在渲染时候,读取对象中的某个对象的属性值时,这个对象中的某个属性并不存在(可能仍然在等待请求后台赋值),所以报错,接口请求到数..

2021-04-21 14:28:13 4247

原创 Vue-cli3.0+ 打包优化(六种常用方案)

22222222222

2021-04-17 15:10:21 70680 5

原创 vue项目中使用echarts

1. 安装npm install echarts --savepackage.json中有此项,代表安装成功2.引入全部组件如果你项目里需要用到各种各样的图表,建议使用本条。main.js 中引入// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts使用export default { name: 'hello', data () { retu...

2021-04-03 10:52:22 11569 2

原创 react中constructor( )和super( )详解

前言如果大家经常使用 react() 做项目,像constructor( )与super( )肯定是司空见惯了,哪哪都有,但是很多人都是复制粘贴一把梭,并不知道这是干啥的与底层原理。实际上这不是 react()的专属玩意,而是JS自带的,原型链相关的知识,今天来把它撸一撸。constructor( )这是ES6对类(Class)的默认方法,一般用于数据初始化,通过 new 命令生成对象实例时自动调用该方法。并且,该方法是类中必须有的,如果没有显示定义,则会默认添加。ES5中,J..

2021-04-02 20:38:28 11656 1

原创 初探uniapp,做了第一个项目,总结下经验(一)

uniapp是个啥1.基于vue开发的(懂vue的朋友问题是不大的)2.跨端:小程序,H5,QQ小程序啥的都可以用(会有小坑,毕竟兼顾这么多端)3.4.没有啥效果很棒组件,几乎都要自己写,也不建议去用其它花里胡哨的,容易出问题(能简则简)5.uniapp是多页,vue是单页我的实战开发之旅1.文档是要看的,我看了大半天吧(常用组件以及事件机制等)2.开发工具用的VScode(npm构造),建议还是.hbuilderx,毕竟是官方推荐3.先下载个模...

2021-03-18 11:41:24 22530 1

原创 面试高频 —— 与浏览器相关的几道经典难题详解

1. 在浏览器中输入URL并回车后都发生了什么?(阿里真题)考察点:浏览器基础,TCP协议,网页解析过程解题过程:解析url,去域名系统里匹配IP(域名是真实IP的映射) 解析url过程(例:https://www.baidu.com): https ——传输协议,www ——服务器,baidu.com ——域名 如果是第二次访问某个网址,会先去浏览缓存里找是否有这个url,找到对应IP 浏览器与网站建立链接 (TCP三次握手,期间不携带任何真实数据) 请求数据...

2021-03-08 13:32:34 21910 3

原创 为什么做了三年、五年的程序员,薪资没有太大变化

程序员的发展现状首先声明一下,这不是一篇营销文。大家应该都还记得,刚入行的时候,一个个斗志昂扬、势不可挡:这程序猿我是干定了,耶稣也挡不住,我说的!前两年发展大都是很快的,薪资提升很快,从5k到8k,从8k到十几k,发展不快的估计就转行了。然而过了两三年,基本上都焉巴了,跳槽不断,加班没停过。但是薪资一直没有大的涨幅,要么找个轻松点的岗位混水摸鱼,要么继续准备下一次跳槽,循环往复,这当然不是应对之策。程序猿的自我评估任何人在职业内的高度都是由两个重要元素决定的,一是天赋..

2021-02-10 20:56:05 311 2

原创 前端应该怎么学?—— 给初学者的一些建议

说在前面最近,有个想转行做前端的朋友,问我前端怎么样,想要转行。我说还不错,他就自己去搜前端要学些什么,过了半晌,发给我一张图,如下:他问,是不是上面的都要学,我说差不多吧,他颤颤巍巍的...

2021-01-18 23:10:49 309

原创 纯JS实现贪吃蛇游戏 —— 可能是全网代码最优雅的实现

说在前面在网上看了许多的贪吃蛇这类游戏,效果基本还可以,功能也实现了,不过看代码大都是冗余或杂乱不堪的,难以维护。所以花了点时间,对整个游戏重构了一下,也算是站在各位前辈的肩膀上做的优化,希望对大家有帮助。效果图.gif功能描述生成一条蛇,可以上下左右移动,目标只有一个:吃食物。吃到一个食物蛇的身体增加一节,然后生成下一个食物,撞到地图就GG,game over。设计思路1. 整体实现采用原生JS,使用ES6的Class类构造,完美的诠释了面向对象编程的编程思想。.

2021-01-16 09:43:52 21237 32

vue-admin.zip

vue+element ui配置的管理系统(父子路由配置等一整套方案),简易轻便,拿来即用,vue2.x

2021-04-01

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除