- 博客(49)
- 收藏
- 关注
RSS订阅原创 [JS]面向对象ES6
静态: 通过static关键字定义静态属性和方法, 所谓静态就是只能通过类调用, 不能通过实例调用。私有: 类属性在默认情况下是公有的, 可以通过 前缀 # 定义私有字段, 声明和访问时都需要。extends关键字用于类声明或者表达式中, 以创建一个类, 该类是另一个类的子类。super关键字用于访问对象字面量或类的原型上的属性, 或调用父类的构造函数。通过接口, 在不改变类的情况下, 增强类的功能和灵活性。ES6是基于 class关键字 创建类。
2024-07-03 10:14:22
143
原创 [JS]彻底搞定this
在绝大多数情况下, 函数的调用方式决定了this的值(运行时绑定), this不能在执行期间被赋值, 并且每次函数被调用this的值都可能会不同。修改this的方法有两类: 调用时修改, 创建时修改。
2024-07-02 08:46:04
173
原创 [JS]正则表达式
正则表达式是定义匹配字符串的规则, 在JS中, 正则表达式也是对象, 通常用于查找或替换符合规则的文本许多语言都支持正则表达式, 在前端中常见的场景就是表单验证和敏感词替换。
2024-07-01 08:52:26
1000
原创 [JS]BOM操作
BOM(Browser Object Model)是浏览器对象模型window对象是一个全局对象, 也是JS中的顶级对象通过var定义在全局作用域中的变量和函数都会变成window对象的属性和方法window对象下的属性和方法调用时一般省略window。
2024-06-30 11:29:44
598
原创 [JS]M端适配
1, <script src="fastclick.js"></script> //引入文件。//对于不需要窗口放大的项目,直接禁止,就可以解决问题。作用: fastclick用来解决移动端300ms延迟问题, 用于需要窗口放大的项目。移动端有自己独特的地方, 比如触摸事件(touch), android和IOS都有。zy.media.js: 移动端视频插件, 可以实现不同浏览器视频样式的一致化。触摸事件对象: 描述手指在触摸屏幕的状态的变化.4,打开demo实例文件,查看需要引入的相关文件。
2024-06-29 08:54:35
411
原创 [JS]节点操作
使开发者可以根据节点的关系获取元素, 而不是只能依赖选择器, 提高了编码的灵活性。childrenNodes: 获取所有的子元素节点(包括文本节点, 注释节点等)nodeTyoe: 节点的类型 (元素节点的nodeTyoe=1)语法: 父元素.insertBefore(元素, 哪个元素前面);children: 获取所有子元素节点, 返回一个伪元素。语法: 父元素.removeChild(要删除的元素);语法: 父元素.appendChild(元素)作用: 把元素插入到父元素的最后面。
2024-06-28 08:47:46
403
原创 [JS]DOM事件
offset翻译过来就是偏移量, 主要用来获取元素相对于父元素的位置 或者 元素的真实宽高。事件流就是事件完整执行的过程, 分为事件捕获阶段, 处于目标阶段, 事件冒泡阶段。利用事件冒泡的特点, 把事件注册在父元素身上, 让子元素通过冒泡触发父元素的事件。事件三要素: 事件源(谁的事件) 事件类型(如何触发) 事件处理程序(做什么)移入移出事件: hover //写两个函数,,逗号隔开,用来区分悬停和离开。当一个元素触发事件后, 会依次向上调用所有父级元素的同名事件。
2024-06-27 08:42:53
994
原创 [JS]语句
代码分类表达式: 可以被求值的代码称为表达式, 可以用于赋值语句: 一段可执行的代码, 可以有结果, 可以没有结果, 不能用于赋值语句分类代码从上往下执行, 称为顺序结构代码按照条件选择执行, 称为分支结构某些代码被重复执行, 成为循环结构。
2024-06-23 13:12:07
339
原创 [JS]数据类型
在计算中一切事物都是数据, 为了提高数据的存储和使用效率, 要对数据进行类型的分类栈(操作系统): 由操作系统自动分配释放函数的参数值, 局部变量的值等, 其操作方式类似于数据结构中的栈;基本数据类型存放在栈里面堆(操作系统): 储存复杂类型(对象), 一般由程序员分配释放, 若程序员不释放,由垃圾回收机制回收;引用数据类型存放在堆里面。
2024-06-22 09:17:06
2381
原创 [JS]数组
数组是一种可以按顺序保存数据的数据类型//1.声明数组 (构造函数)let arr = new Array() //创建空数组let arr = new Array(1,2,3,4) //创建数组并赋值。//2.声明数组 (数组字面量)let arr = [] //创建空数组let arr= [1,2,3,4] //创建数组并赋值//3.访问数组// 通过下标获取数组数据// 数组名[下标]arr[0]//4.获取数组长度 (length)arr.length。
2024-06-21 10:36:14
184
原创 [JS]变量
最开始JavaScript是使用var关键字声明变量, ES6之后统一使用let关键字声明变量。程序在内存中申请的一块用来存放数据的小空间。使用const声明的变量称为"常量"变量就是计算机储存数据的"容器"建议, 业内通识和最佳实践。必须遵守, 不然报错。
2024-06-20 08:57:52
361
原创 [JS]学习前言
求职 -> 简历/面试 -> 晋升 -> 团队管理 -> 职业发展 -> 副业 -> 创业。页面 -> 组件化 -> 工程化 -> 全栈 -> 跨端跨栈 -> 架构。💡 Tips：不谋全局者不足以谋一域。了解职业规划和技术发展。💡 Tips：重要节点。
2024-06-18 23:27:48
286
原创 Git快速上手
初识Git是一个免费开源, 分布式的代码版本控制系统, 帮助开发团队维护代码作用: 记录代码内容,切换代码版本,多人开发时高效合并代码内容Git和GitHubGit是一个软件, Github是一个网站,两者的功能都是提供版本控制服务.官网: GitHub: Let’s build from here · GitHub安装Git官网: https://git-scm.com/ 快速下载: CNPM Binaries Mirror 下载安装包后, 双击安装, 全部默认下一
2024-06-18 22:41:34
1265
原创 [vue3]大事件-admin
pnpm是最新的包管理器, 比同类工具快2倍, 更节省磁盘空间官网 https://www.pnpm.cn/安装 npm install -g pnpm创建项目 pnpm create vue。
2024-06-18 08:56:14
1368
原创 [vue3]掌握pinia
页面直接访问数据不方便时, 可能会考虑解构数据, 但是直接解构仓库的数据, 会让数据失去响应式。pinia支持选项式和组合式2种写法, 选项式可以使用this, 组合式没有this。Pinna是vue的最新状态管理工具, 用来替代vuex。
2024-06-17 08:48:52
517
原创 [vue3]组件通信
父组件中给子组件绑定属性, 传递数据给子组件, 子组件通过props选项接收数据props传递的数据, 在模版中可以直接使用{{ message }}, 在逻辑中使用props.messagedefineProps是编译器宏函数, 就是一个编译阶段的标识, 实际编译器解析时, 遇到后会进行编译转换父组件中给子组件标签绑定自定义事件, 子组件通过emit方法触发事件, 传递数据给父组件。
2024-06-16 13:59:18
1664
1
原创 [vue3]极速上手
vue3官网:Vue.js - 渐进式 JavaScript 框架 | Vue.js在vue3中, 自定义指令的钩子函数有所改变// 在模板中启用 v-focus</script><template>其他钩子。
2024-06-15 13:05:42
939
原创 [vue2]智慧商城app
当打包构建应用时, JS的会被打包在一起,文件就会很大, 影响页面加载, 可以把不同路由对应的组件分割成不同的代码块,然后当路由被访问时, 才加载对应的代码, 这样加载效率大大提高。图形验证码本质就是一个请求回来的图片, 作用就是强制人机交互, 可以抵御机器自动化攻击, 比如通过批量请求爆破接口, 恶意刷票,论坛灌水等。所有的请求, 都可能出现错误,, 可以单独处理, 但是更好的建议是, 通过响应拦截器, 统一处理接口错误。vue脚手架只是开发过程中, 协助开发的工具, 开发完成后, 脚手架不参与上线。
2024-06-14 08:59:27
490
原创 [vue2]深入理解vuex
vuex是一个vue的状态管理工具, 状态就是数据场景某个状态在很多个组件使用 (个人信息)多个组件 共同维护 一份数据 (购物车)优势数据集中式管理数据响应式变化stata提供唯一的公共数据源, 所有共享的数据都要统一放在store的state中存储... ...// 创建仓库// 严格模式 (有利于初学者，检测不规范的代码 => 上线时需要关闭)// 通过 state 可以提供数据 (所有组件共享的数据)state: {title: '仓库大标题',})访问数据。
2024-06-13 08:49:14
1434
原创 [vue2]插槽
定义slot插槽的同时, 是可以传值的, 给插槽上绑定数据, 使用组件时可以接收数据。一个组件内有多处结构, 需要外部传入标签, 进行定制, 需要使用具名插槽。封装组件时, 可以为预留的插槽提供默认内容。让组件内部的一些结构 支持自定义。
2024-06-11 08:47:20
475
原创 [Vue2]组件通信
Vue采用异步更新DOM的方案 (提升性能), 如果要保证本轮DOM更新后, 操作最新的DOM, 使用$nextTick。prop就是组件上注册的一些自定义属性, 作用就是向子组件传递数据, 组件可以传递任意类型和数量的prop。不同的prop写法有不同的特点, 数组写法最简单, 基础写法可以限制数据类型, 完整写法可以有更多限制规则。除了进行表单的双向数据绑定, 也可以实现父子组件通信 (简化表单组件的封装)组件的数据是独立的, 无法直接访问其他组件的数据,想要其他组件的数据, 就要使用组件通信技术。
2024-06-09 11:58:52
1792
原创 [Vue2]核心概念
Vue生命周期过程中, 会自动运行一些函数, 称为生命周期钩子, 让开发者可以在特定阶段处理业务。计算属性默认的简写,只能读取访问, 不能修改, 如果需要修改, 要写计算属性的完整写法。基于现有的数据, 计算出来的新属性, 依赖的数据变化, 自动重新计算。使用: 和普通属性一样使用 {{ 计算属性名 }}作用: 给实例提供一个方法, 调用以处理业务逻辑。作用: 封装了一段对数据的处理, 求得一个结果。使用: 作为属性直接使用 {{ 计算属性 }}创建 -> 挂载 -> 更新 -> 销毁。
2024-06-07 09:01:28
427
原创 [Vue2]快速上手
vue2官网:Vue.jsvue是用于构建用户界面的渐进式框架💡 Tips： 构建用户界面 -> 数据驱动视图💡 Tips： 渐进式 -> 学一部分就能用一部分。
2024-06-05 09:03:05
642
原创 Webpack
内容分发网络, 就是一组分布在各个地区的服务器. 把静态资源文件/第三方库放在CDN网络中的各个服务器中, 供用户就近请求获取, 减轻自己服务器请求压力, 就近请求物理延迟低, 配套缓存策略。css代码提取后没有被压缩, 通过css-minimizer-webpack-pligin插件, 压缩自己的css文件。webpack5内置资源模块(字体,图片等)打包模块, 无需额外的loader, 只需要一些配置即可。静态模块: 编写代码过程中的, html, css, js, 图片等固定内容的文件。
2024-06-04 09:23:22
2016
2
原创 前端模块化
定义在Node.js中, 每个文件都被视为一个单独的模块, 方便项目的管理CommonJS模块是Node.js打包JS代码的原始方式, 一般用于Node.js项目中Node.js还支持浏览器和其他JS运行时使用的ECMAScript模块标准, 一般用在前端项目中说明项目就是由多个模块文件组成的好处是提高代码复用性, 实现按需加载,文件是独立的作用域模块之间使用导入导出语法关联Node.js默认使用CommonJS规范CommonJS规范语法。
2024-06-03 08:49:27
1111
原创 Node.js基础
Node.js是一个跨平台JavaScript运行环境, 使开发者可以搭建服务端的JavaScript应用程序作用编写数据接口, 提供网页资源浏览功能前端工程化, 后续的Vue和React框架都是工程化项目工程化项目从开发到上线, 把这个过程中的所有工具和技术集中管理, 称为前端工程化Node.js是前端工程化的基础(因为Node.js可以主动读取前端代码的内容)宿主环境浏览器能执行JS代码, 是因为浏览器内核中集成了V8引擎(C++程序)
2024-06-02 15:04:34
1137
原创 hm头条-admin
介绍头条数据管理平台: 对IT资源移动网站的数据进行管理移动网站(演示):极客园主要功能登录和权限判断查看文章内容列表(筛选, 分页)编辑文章(数据回显)删除文章发布文章(图片上传, 富文本编辑器)技术选型基于Bootstrap搭建网站标签和样式集成wangEditor插件, 实现富文本编辑器使用原生JS完成增删改查业务基于axios进行前后端交互使用axios拦截器进行权限判断项目准备html, css, js, 图片, 第三方插件目录结构。
2024-06-01 09:47:16
966
原创 JS事件循环
概念事件循环(EventLoop)负责执行代码, 收集和处理事件以及执行队列中的子任务原因JS是单线程语言, 要防止耗时代码阻塞主线程的任务, 就设计了事件循环模型过程同步任务直接在调用栈中执行异步任务交给宿主环境(浏览器)执行, 执行完毕后, 加入到任务队列中排队一旦调用栈空闲, 就会读取任务队列中的任务, 继续执行案例使用事件循环模型, 分析代码执行过程<script>/*** 目标：阅读并回答执行的顺序结果* 1 5 3 2 4 点击document打印6*/}, 0)
2024-05-31 09:02:11
1060
原创 JS异步/同步
在async函数中允许使用await关键字, 取代then函数, 等待获取Promise对象的结果, 更方便的实现链式调用。异步代码提高了程序的执行效率, 调用后耗时, 但不阻塞代码继续执行, 异步任务完成后, 通过触发回调函数, 得到执行结果。正常情况下, 浏览器按照顺序执行代码, 上一行代码执行完毕再执行下一行代码 , 这就是同步代码。then()方法会返回一个新的Promise对象,可以继续串联下一环任务, 直到任务结束。语句标记可能出错的语句,出错后捕获错误信息, 并执行catch中的代码。
2024-05-30 09:00:33
571
原创 Promise
Promise对象用于管理异步任务, 拿到异步操作的状态和结果优势逻辑更清晰, 不同的状态(成功/失败)关联不同的处理程序了解axios函数内部的运作机制能解决回调函数地狱问题基本使用<script>/*** 目标：使用Promise管理异步任务*/// 1, 创建Promise对象/*** 2, 执行异步任务成功调用resolve()失败调用reject()*/// resolve('模拟成功的异步任务')reject(new Error('模拟失败的异步任务'))
2024-05-29 10:00:28
477
原创 Bootstrap图书管理
Bootstrap是一款简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。form-serialize插件，帮助我们快速收集表单元素值。
2024-05-27 13:38:38
320
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人