js
关注
分享
扫一扫
文章平均质量分 74
欧阳呀
早一批“吃螃蟹”的人。多年前端开发及项目管理经验，擅长vue，原生js，react。v: ouyang_Allen，承接毕设
展开
-
八年前端开发之路中遇到的一些实用技巧分享——代码思路及通用场景
【代码】八年前端开发之路中遇到的一些实用技巧分享——代码思路及通用场景。原创 2024-05-14 20:25:01 · 419 阅读 · 0 评论 -
重学JavaScript高阶知识点（三）—— 详解Js中的内存管理
很多底层语言一般都有底层的内存管理接口，比如 C语言，可以调用对应的API去创建和释放内存空间。意思是需要手动去创建和释放内存空间，很明显，这不够高级~JavaScript 是在创建变量（对象，字符串等）时自动进行了分配内存，并且在不使用它们时“自动”释放。这个过程叫做**内存回收。**嘿！所以这很高级，但是高级会产生混乱。这意味着，程序可能在我们需要用的时候就已经回收了变量，导致访问不到某个变量，所以就出现了闭包（用于延长变量的生命周期）。原创 2024-05-12 23:34:51 · 1233 阅读 · 0 评论 -
重学JavaScript核心知识点（二）—— 详解Js中的模块化
【代码】重学JavaScript核心知识点（二）—— 详解Js中的模块化。原创 2024-05-12 22:34:57 · 819 阅读 · 1 评论 -
猿创征文｜前端进阶必备——WebSockt实现聊天室（附源码）
【代码】猿创征文｜前端进阶必备——WebSockt实现聊天室（附源码）原创 2022-09-02 14:20:52 · 1422 阅读 · 7 评论 -
js正则表达式系统讲解（全面的总结）
前端工程师必须知道的正则表达式（收藏即学会）原创 2022-06-27 08:45:02 · 15998 阅读 · 0 评论 -
重学JavaScript，推翻你的固有认知 —— 数据类型和数据结构
重学JavaScript，数据类型和数据结构1. 什么叫动态类型2. 数据类型3. 原始值1. 什么叫动态类型JavaScript 是一种弱类型或者说动态语言。我们不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据let a; // 初始不给任何类型a = 11; // a此时是number类型a = "二大爷"; // a 变成了字符串类型a = true; // a 变成了布尔类型实际应用过程中并不推荐这原创 2021-08-25 14:41:11 · 2233 阅读 · 22 评论 -
经典面试题分析——原生JS如何实现事件委托
原生JS实现事件委托1. 什么是事件委托2. 实现事件委托（第一步，基本结构）3. 编写一个添加节点的方法先4. 实现事件委托1. 什么是事件委托官方文档事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理某一类型的所有事件。———— JS高程举个例子我们将快递寄到公司，但是可能快递到的时候，我们人却没在，便可以委托前台小姐姐代收。第一：现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的第二，新员工也是可以被前台MM代为签收的，可能人还没到，快递先到了，即程序原创 2021-08-07 10:19:32 · 1071 阅读 · 5 评论 -
在JS中，new关键字做了什么
new关键字1. 先看代码2. 内部具体实现如下1. 先看代码 function Person(){ this.name = '朱小明'; this.fn = function(){ console.log('名字是:' + this.name) } } let person1 = new Person(); // person1 拥有Person的属性和方法 person1.fn()在这原创 2021-08-06 19:48:32 · 762 阅读 · 2 评论 -
javascript 代码技巧 (四) —— javascript获取坐标/滚动/宽高/距离
1. 坐标（鼠标/触摸）event.screenX 鼠标/触摸，相对于显示屏的X坐标event.screenY 鼠标/触摸，相对于显示屏的Y坐标event.clientX 鼠标/触摸，相对于浏览器视口的X坐标event.clientY 鼠标/触摸，相对于浏览器视口的Y坐标event.pageX.原创 2021-07-23 09:40:17 · 961 阅读 · 2 评论 -
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 · 723 阅读 · 10 评论 -
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 · 503 阅读 · 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 · 339 阅读 · 5 评论 -
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 · 386 阅读 · 11 评论 -
如何让你的代码变得更优雅？这些代码规范和技巧必须知道（进阶必备，建议收藏）
如何做一名优秀的程序猿？从改善每一行代码开始1. 看你的代码就知道你几斤几两2. 编程标准3. 命名规范4. 松耦合，高复用1. 看你的代码就知道你几斤几两1.1 面试常会犯的错????♂️：面试者????⚖️：面试官面试前????♂️：先把简历写好，机构老师特别交代：一出去就要说三年工作经验????????♂️：面试题要背，工资不能要低了~????♂️：包装一下????♂️：…面试中????⚖️：问题回答的不错，可以看看你最近做的项目么？????♂️：原创 2021-07-12 08:51:40 · 27934 阅读 · 90 评论 -
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 · 3598 阅读 · 78 评论 -
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 · 876 阅读 · 13 评论 -
JavaScript常用事件集合，前端小白必备（写的很详细，建议收藏）
JavaScript入门级经典教程（无噱头，直接上干货）1. 文档加载事件2. 鼠标事件3. 获取浏览器类型，手机机型（容易出问题的地方）4. 事件冒泡与事件委托（面试重点）最近有很多粉丝小伙伴，说要一些基础教程，必须安排的明明白白后续做一个一整个JS教程（知识点 + 经典案例）新朋友可以关注一波（能三连是最好的了），本博主高产似奶牛1. 文档加载事件此事件使用频率很高，务必掌握文档加载完成之后会做的事情1.1 ready()ready(): 表示文档结构已经加载完成（不包含原创 2021-06-22 08:09:08 · 1908 阅读 · 77 评论 -
哄女朋友利器 —— 赶紧对她说我爱你，程序猿的专属浪漫（附源码）
女朋友生气了怎么办？哄她的利器来了（建议收藏）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 · 6220 阅读 · 106 评论 -
前端开发者的必备知识宝库 —— 史上最全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 · 1411 阅读 · 109 评论 -
JavaScript保姆级教程 ——— 重难点详细解析（万字长文，建议收藏）
JavaScript保姆级教程 ——— 重难点详细解析（建议收藏）1. JS函数2. JS事件3. JavaScript 对象本文是整理了JS中的一些重点，难点，以及不好理解的知识点本文非常详细，深入的讲解，包学包会1. JS函数1.1 函数(Function)是什么？函数（方法）是由事件驱动的或者当它被调用时执行的可重复使用的代码块 —— 官方说明向来觉得官方的文档是有些生硬的，举个例子：函数可以看做是功能（以一辆汽车为例，如下图）,这些都可以看做成是方法刹车油门鸣笛原创 2021-06-15 08:02:45 · 99228 阅读 · 271 评论 -
零基础也能学会，原生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 · 1177 阅读 · 80 评论 -
被黑心商家坑了N次，探究抽奖背后的秘密 —— H5转盘小游戏完整实现（源码直接拿走）
原生JS实现H5转盘游戏 —— （揭秘黑心商家的肮脏套路）1. 基础的页面布局（index.html）2. 工具函数（用于调整概率）3. 传参及接收值配置4. dom 操作方法及具体逻辑处理5. FAQ（注意事项）本文是真实的实战项目，可以直接拿去用 —— 转盘抽奖可以自由调整概率，你也可以成为黑心商家项目效果是这样滴： H5小游戏 天儿也不早了，直接开干！1. 基础的页原创 2021-06-08 07:54:41 · 2339 阅读 · 106 评论 -
都2021年了，再不学ES6你就out了 —— 一文搞懂ES6
JS干货分享 —— 一文搞懂ES61. ES6是什么？用来做什么？功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入1. ES6是什么？用来做什么？ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一原创 2021-06-01 08:11:20 · 63927 阅读 · 208 评论 -
腾讯架构师带我写代码 —— 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 · 20965 阅读 · 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 · 13934 阅读 · 61 评论 -
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 · 7796 阅读 · 7 评论 -
前端应该怎么学？—— 给初学者的一些建议
说在前面最近，有个想转行做前端的朋友，问我前端怎么样，想要转行。我说还不错，他就自己去搜前端要学些什么，过了半晌，发给我一张图，如下：他问，是不是上面的都要学，我说差不多吧，他颤颤巍巍的...原创 2021-01-18 23:10:49 · 1689 阅读 · 0 评论 -
纯JS实现贪吃蛇游戏 —— 可能是全网代码最优雅的实现
说在前面在网上看了许多的贪吃蛇这类游戏，效果基本还可以，功能也实现了，不过看代码大都是冗余或杂乱不堪的，难以维护。所以花了点时间，对整个游戏重构了一下，也算是站在各位前辈的肩膀上做的优化，希望对大家有帮助。效果图.gif功能描述生成一条蛇，可以上下左右移动，目标只有一个：吃食物。吃到一个食物蛇的身体增加一节，然后生成下一个食物，撞到地图就GG，game over。设计思路1. 整体实现采用原生JS，使用ES6的Class类构造，完美的诠释了面向对象编程的编程思想。.原创 2021-01-16 09:43:52 · 22826 阅读 · 32 评论 -
原生JS实现图片懒加载
原理与概述概述：如网页中需要加载N张图片，为了提升用户体验，减少用户的等待时间，兼顾加载性能。只加载当前视口的图片（也称作一屏），其余图片等用户向下滑动的时候再进行加载（滚动条向下滚动的时候）。原理：获取用户设备当前高度，循环图片，获取其距离顶部的距离，处在第一屏的图片先加载，当滚动条发生滚动，继续加载。html 实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">.原创 2020-12-27 09:58:35 · 9744 阅读 · 2 评论 -
git常用操作
git 工作流程创建 / 拉取仓库git init 初始化仓库git clone (url) 拉取远程仓库（常用）代码提交git add 添加文件到仓库 “git add .” 新增本地所有修改（常用）git status 查看仓库当前的状态，显示有变更的文件（常用）git diff 比较文件的不同，即暂存区和工作区的差异git commit 提交暂存区到本地仓库，加 -m ‘备注文字’（常用）git reset 回退版本。git rm 删除工作区文件git mv .原创 2020-12-17 10:14:13 · 7796 阅读 · 0 评论 -
阿里 OSS图片上传 —— 原生JS中使用
前言这是最近开发遇到的一个坑,"可爱"的前辈们留下来的宝贵财产,很不幸的是,一行注释都没给,所以开心(被迫)的去研究了一下文档.然而发现官方文档又臭又长,于是自己捣鼓了下,总算是搞出来了.这里给出两个方案:原生JS(包括jQuery)里如何使用OSS图片上传 二是Vue项目如何使用OSS图片上传(晚点写)OSS 简介及应用场景介绍1. 全称: Object Storage Service，简称 OSS，是阿里云提供的海量、安全、低成本、高可靠的云存储服务。2. 它具..原创 2020-09-21 10:22:25 · 9280 阅读 · 4 评论 -
js 代理模式妙用 —— 优化大图加载时用户体验
什么是代理模式代理模式是为一个对象提供一个代用品或占位符，以便控制对它的访问。举个例子：明星与经纪人的关系，明星是请求的本体，经纪人就是代理proxy如何实现代理模式代理对象内部含有对本体对象的引用，因而可以与调用本体的相关方法；同时，代理对象提供与本体对象相同的接口，方便在任何时刻代理本体对象。代理模式经典的应用场景 —— 大图加载缓冲大家都应该经历过这种情况：网页内加载图片的时候（无论是手机端还是PC端），当网络情况不佳或是图片过大时，就会出现图片一截一截的慢慢出现，如图.原创 2020-08-11 19:28:48 · 979 阅读 · 0 评论 -
学Node.js之前，哪些是我们必须知道的？ —— 学不会算我输
Node.js 是什么？很多同学都以为Node.js是一门独立的语言，这是大家的一个误区。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，让JavaScript 运行在服务端的开发平台。实际上它是对Google Chrome V8引擎进行了封装，它主要用于创建快速的、可扩展的网络应用。使用了一个事件驱动、非阻塞式 I/O 的模型，使其变得轻微和高效，非常适合构建运行在分布式设备的数据密集型实时应用。Node.js 能做些什么？Ja..原创 2020-07-30 16:36:47 · 11843 阅读 · 5 评论 -
剑指 offer —— js闭包面试通杀秘籍
前言说到js闭包，早已不是什么新鲜事。几乎是前端面试时必问的一道题，到如今已是烂大街的存在，但不可否认的是，仍然有一些人没有搞懂，只知其然不知其所以然，那么我们今天就好好的捋一捋。从作用域说起说的通俗一点，作用域就是：生效的区域。比如说，我们的身份证只在国内生效，出国就得用护照了。1. JS 局部作用域（只在当前函数生效，函数外部无法访问）2. JS全局作用域（在整个Script标签内生效，函数内可以访问）3. 从浏览器底层谈本质区别可以看到：1....原创 2020-07-25 15:48:16 · 313 阅读 · 1 评论 -
美团经典面试题解析 —— 如何手写一个Promise
前言手写实现Promise是一道经典的前端面试题。比如在美团，Promise几乎就是必考题，在其它互联网一线大厂也是高频题目。Promise的实现相对比较复杂，考虑的逻辑也比较多，下面带着大家逐一分析，找到其关键点、以及如何手写一个Promise。（本文实现遵循promise/A+规范）1. Promise 基本结构我们知道实例化Promise对象时传入一个函数作为执行器，有两个参数（resolve和reject）分别将结果变为成功态和失败态。据此我们可以写出基本结构：..原创 2020-07-08 15:46:44 · 12069 阅读 · 2 评论 -
四面腾讯与华为，大厂前端面试都问些什么问题？
今年算是经历颇多的一年了，腾讯和华为都走了几趟（一共面试了四个部门），拿了两个offer。（开心.png），但还是挂了两次，有点遗憾。面试题总结 面试完之后，赶紧总结了一波，前端这个岗位，这两家大厂的面试思路和面试问题其实都差不多：1. JS底层：说一说js的原型与继承。 分析一下优秀的前端框架源码，这么写的优缺点在哪。 this指向问题，this的深拷贝如何实现，这个也是高频率被问到的问题。 js事件流是怎么样体现的。 柯里化函数...原创 2020-05-21 18:51:09 · 1194 阅读 · 1 评论 -
深入了解js原型与原型链——继承
导语说到 js原型、原型链、继承，是个令人头疼的问题，说懂吧，只懂一点，说不懂，倒是知道一点。看到网上很多关于这几个知识点的文章，不过大都会把人讲懵，今天你刷到我，那么你就舒服了。js 原型话不多说，先上代码：function Person(){ } Person.prototype.name = "养猪的王某人"; Person.prototype.age = 18;...原创 2020-04-26 19:02:49 · 8334 阅读 · 0 评论 -
js经典面试题之 Object.create(null)
说在前面之前腾讯面试的时候，问了这个问题：对象字面量创建对象与 Object.create(null)创建对象有什么区别？一开始是有点懵的，不都是创建对象么，能有啥不同，后面我去试了一下，结果发现还蛮有意思：不同点 var obj = {}; var obj2 = Object.create(null); console.log(obj); consol...原创 2019-12-30 18:55:29 · 9416 阅读 · 2 评论 -
cssTransform.js 优化版三
终极版，减少参数传递，降低耦合度function Transform(element) { var transform = {}; var transformValue = ''; var props = ['scaleX', 'scaleY','rotate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', '...原创 2019-12-29 23:52:58 · 630 阅读 · 1 评论 -
js闭包的实用性----应用场景
上篇文章说了闭包的形成以及原理。这篇说一说闭包的实用性。应用场景一：事件节流与事件防抖这里讲一个事件防抖的例子，在监听input值发生变化的时候，定时发送请求，预防请求过多，服务器性能过载。function antiShake(fn, wait) { let timeOut = null; return args => { if (timeO...原创 2019-11-26 17:54:41 · 10649 阅读 · 1 评论