- 博客(52)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 移动端适配方案——px自动转vw
移动设备的普及使得移动端适配成为现代 Web 开发的关键一环。为了确保你的网站在各种屏幕尺寸上都能够提供出色的用户体验，使用相对单位来代替固定单位（如像素）是一个重要的技术选择。本文将为你详细介绍将像素（px）转换为视口宽度单位（vw）的史上最全方案，从手动计算到使用插件，从CSS变量到循环媒体查询，让你在移动端适配中能够游刃有余。
2023-08-08 15:36:49
2886
原创 如何去除 JavaScript 对象中的空值和空对象
在 JavaScript 开发中，我们经常需要处理对象数据，但有时这些对象可能包含一些空值或空对象。在处理数据时，通常需要将这些空值或空对象去除，以便得到更干净、更紧凑的数据结构。本文将介绍几种方法，教你如何去除 JavaScript 对象中的空值和空对象。
2023-08-04 15:09:57
4045
原创 玩转TypeScript高级类型：从小白到大神！
在前面的文章中，我们已经掌握了TypeScript的基本语法和类型注解，现在是时候迈入更高级的领域，发现TypeScript的强大潜力！在本文中，我们将深入探索TypeScript高级类型的世界，并通过实例代码演示如何解决实际开发中的难题。
2023-08-03 19:17:53
157
原创 前端性能优化大揭秘：让网页飞起来！
嘿，前端魔法师们！今天我要和你们扒一扒前端性能优化的绝佳方法，让我们的网页飞起来！优化网页性能可不止是闲聊哦，它能提升用户体验，缩短加载时间，让用户一秒变粉！咱们一起来揭开前端性能优化的神秘面纱吧！
2023-08-01 15:11:38
220
原创 前端魔法进阶：Vue 3源码解析与新特性对比！
在本篇博客中，我将带你踏上一段探索Vue 3源码之旅，解析这个前端魔法的奥秘，让你深入了解Vue 3的核心原理！同时，我们还将探讨Vue 3与ES6、ES2023等新特性之间的对比，看看它们如何共同构建了前端魔法的世界！
2023-07-28 16:07:41
247
原创 前端特效必备！打造酷炫马赛克和灰色滤镜，让你的图片变得与众不同！
前端特效必备就在这里！通过Canvas和算法实现马赛克和灰色滤镜，让您的图片变得与众不同！希望本篇博客能够帮助您更好地理解图像处理的魅力，并在前端开发中尝试更多的炫酷特效！继续探索前端图像处理的更多应用场景和技巧，让您的前端项目更上一层楼！🌈。
2023-07-27 16:57:37
571
原创 深入浅出理解vue2/vue3响应式原理
Vue 2和vue3 简易版响应式原理对比： 虽然我们手写的简易版响应式原理不如Vue 2的实现复杂和完善，但基本思想是一致的。Vue 2使用Object.defineProperty拦截属性的读取和设置操作，而我们使用Proxy来达到同样的效果。Vue 2和我们的简易版响应式原理都利用了JavaScript的特性，实现了数据双向绑定的效果。Vue 2的实现更加完善，支持更多的特性和优化。
2023-07-26 16:00:38
388
原创 前端自动化测试框架Cypress之基础知识
前端自动化测试框架Cypress之基础知识，介绍了项目实战中cypress的安装、环境搭建、目录结构、常遇到的报错方案等等。重点总结了cypress对dom操作的api，及其闭包里环境变量，常用的should、expect、assert断言语法，及利用jquery访问dom元素属性，案例的编写机制等等，非常实用。
2020-07-19 18:57:20
3196
原创 vue项目开发之样式篇——postcss插件
vue项目开发之样式篇——postcss插件一、postcss插件简介及安装二、插件介绍1.postcss-advanced-variables2.postcss-partial-import3.postcss-px-to-viewport三、配置一、postcss插件简介及安装二、插件介绍1.postcss-advanced-variables2.postcss-partial-import3.postcss-px-to-viewport适合于移动端开发，将px单位转化成vh,vw百分比三、
2020-05-18 10:18:14
6581
1
原创 前端vue实战项目结构、常用编辑器vs code 配置
以企业大型vue项目为参考，大规模开发实战，vs code常用插件及配置，解析项目目录结构，并附带项目代码
2019-06-06 17:33:03
1625
原创 兼容ie8及现代浏览器的多种方案实现自适应布局
css布局研究之响应式、自适应、移动端布局一、响应式布局（一）、介绍（二）、响应式布局技术1. viewport技术2.@media媒体查询二、自适应布局（一）、描述（二）实现技术1.float+absolute布局2.flex布局一、响应式布局（一）、介绍响应式布局是一种兼容pc、移动端等多种终端的样式布局。即根据屏幕的大小自适应布局，或者变化布局样式，（屏幕在拉伸时显示不同的效果比如一行...
2019-04-24 19:42:01
2656
2
原创 前端面试——浏览器兼容问题
前端面试——浏览器兼容问题一、css样式兼容性问题一、css样式兼容性问题ie8浏览器不支持css3，像：ie8对选择器支持情况ie8支持:first-child,但不支持:last-child、:last-of-type、:first-of-type、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last...
2019-03-26 23:23:28
15477
原创 解惑三兄弟：Next.js、NestJS和Nuxt.js - 选择最适合你的全栈开发工具
在现代 Web 开发领域，有许多技术工具和框架涌现出来，给开发者提供了更多的选择。然而，有时候一些名称相似的工具可能会让人感到困惑，特别是对于初学者。Next.jsNestJS和Nuxt.js，帮助你更好地理解它们的用途和优势，以便在你的项目中做出明智的选择。
2023-08-08 17:35:29
6197
2
转载 web前端之浏览器篇——http协议知识汇总
http协议以及有关其的知识一览一现_关注0.0742017.08.29 00:22:51字数 11,800阅读 913 http协议有http0.9，http1.0，http1.1和http2三个版本，但是现在浏览器使用的是http1.1的标准，本篇文章着重介绍关于http1.1的版本，同时穿插了解一下http2的一些新特性。一 介绍 介绍不多说，HTTP是Hyper Text Transfer Protocol（超文本协议），是一个基于TCP/IP的应用层协议，主要用...
2020-08-24 16:20:52
1177
转载 WebView全面解析
WebView全面解析TokyoZ关注62018.08.24 00:48:46字数 3,468阅读 83,965WebView全面解析简介WebView是android中一个非常重要的控件，它的作用是用来展示一个web页面。它使用的内核是webkit引擎，4.4版本之后，直接使用Chrome作为内置网页浏览器。作用显示和渲染网页； 可与页面JavaScript交互，实现混合开发。使用介绍使用WebView之前，不要忘记在清单文件中声明访问网络权限：<use
2020-07-30 15:45:39
1427
原创 ES6新特性篇之解构赋值（Destructuring）及在项目实际中的应用
ES6新特性篇之解构赋值（Destructuring）及在项目实际中的应用简介一、对象的解构1.**基本赋值**2.**无声明赋值**3.**给新的变量名赋值**4.**默认值**5.**给新的变量命名并提供默认值**6.对象属性计算名和解构二、数组的解构1.基本用法2.左右两边都是变量3.**默认值**4.**交换变量**5.**忽略某些返回值**6.**将剩余数组赋值给一个变量**三、函数中的解构1.基本用法2.在es6箭头函数中的用法四、vue项目实战中应用1.对象合并属性及提取变量2.在实际项目中i
2020-06-05 11:05:51
462
原创 JavaScript面试篇之正则表达式：“get-element-by-id”如何转化成驼峰，常用邮箱、身份证、QQ号等信息如何校验等等
JavaScript面试篇之正则表达式：如何校验邮箱、身份证等信息；前言一、简介二、匹配规则三、正则截取、替换字符串四、正则校验字符串场景（一）、校验数字（二）、校验字符（三）、实际中特殊场景前言一、简介正则表达式(Regular Expression)是一种文本模式，用于匹配字符串。其包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。二、匹配规则三、正则截取、替换字符串四、正则校验字符串场景（一）、
2020-06-04 15:37:53
782
原创 JavaScript终极面试题之字符串：“105”大于“44”吗，“123b”转Number为多少，slice、substring、substr可以传负数吗等等
JavaScript常踩字符串误区："105">"44"是false，"123b"转Number为NaN等等一、字符串的比较二、字符串转Number三、字符串相加减四、字符串截取、替换等常见操作1.截取2.替换3.对象转字符串4.字符串正则5.转译场景一、字符串的比较二、字符串转Number三、字符串相加减四、字符串截取、替换等常见操作1.截取2.替换3.对象转字符串4.字符串正则5.转译场景...
2020-05-29 11:15:47
603
转载 JS加法运算全解析
JS加法运算全解析夏知更关注0.0592018.08.14 21:22:11字数 2,554阅读 3,879终极命题：在JS中：[]+[]、[]+{}、{}+[]、{}+{}的结果分别是什么？一、JS中的类型基本类型 JS的基本类型包括Undefined、Null、Boolean、Number和String五种。Undefined类型和Null类型的都只有一个值，即undefined和null；Boolean类型有两个值：true和false；Number类型的值有很多很多；St
2020-05-27 10:38:05
3288
原创 JavaScript终极面试题：null == undefined、[]+{}、{}+{}等结果多少呢？看完遍打通了奇经八脉任何对象的运算都会了
介绍‘==’和‘===’的区别，以及两者实现的本质，及项目开发实际中遇到的误区
2020-05-26 16:06:28
300
原创 兼容各种浏览器常用的原生js工具类：获取浏览器滚动条宽高、事件、局部打印等等
web前端之浏览器——兼容各种浏览器常用的原生js工具类一、获取浏览器可见域的宽高（不包括滚动条和被卷去）二、事件的添加与移除三、获取滚动条宽一、获取浏览器可见域的宽高（不包括滚动条和被卷去）ieE<=8 不支持innerWidth和innerHeight属性，ie6支持document.documentElement.clientHeight，其他ie版本用document.body.clientHeightexport function getWinHeight() { var win
2020-05-25 15:42:45
270
原创 javascript设计模式篇之工厂设计模式
javascript设计模式篇之工厂设计模式一、简介二、设计思路1.工厂函数的实现2. 工厂类的实现三、案例1.vue项目开发实例2.elementUI框架实例一、简介JavaScript是一门弱类型语言，一种 解释性脚本语言，无需编译即可以运行，它的特征是抽象、封装、继承、多态。而工厂设计模式体现了封装的特性，通过关键词new实现了同一封装，抽象出具体一类事物。二、设计思路对象的封装，通过工厂设计模式实现创建1.工厂函数的实现通过函数创建对象的私有变量，或者说对象的具体特征，通过原型链prot
2020-05-21 15:47:29
182
转载 web前端之浏览器篇——知识汇总
web前端之浏览器： 知识汇总一、URL到页面**准备阶段： **输入URL，Enter进入查找浏览器在本地查找host文件，匹配对应的IP； 找到返回浏览器并缓存没有，则进入路由查找； 找到返回浏览器并缓存再没有，再进入公网DNS根目录 ； 找到返回浏览器并缓存进入，等待发送请求，建立tcp/ip 传输连接，若没有等候的请求，则直接发送**服务器阶段： **根据请求，查找数据，返回数据渲染阶段：逐行解析HTML， 遇到同步的请求代码，则发送数据请求，cssLi.
2020-05-20 15:43:17
432
原创 web前端之浏览器篇——compatMode混杂模式和标准模式
web知识浏览器篇之compatMode混杂模式和标准模式一、介绍二、compatMode兼容性三、区别一、介绍浏览器解析文档时会按document.compatMode属性来渲染。其值是个枚举值，如下：“BackCompat”：怪异模式，也称混杂模式“CSS1Compat”：标准模式或者准标准模式。另外，准标准模式已和标准模式相同，两者已被标准模式代替。二、compatMode兼容性具体兼容浏览器版本如下：三、区别IE对css样式盒模型的渲染在 Standards Mode和Quir
2020-05-20 15:35:56
814
转载 箭头函数与普通函数的区别
箭头函数与普通函数的区别箭头函数：let fun = () => { console.log('lalalala');}普通函数：function fun() { console.log('lalla');}箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return。箭头函数是匿名函数，不能作为构造函数，不能使用ne
2020-05-19 15:52:35
164
转载 神奇的 Workbox 3.0 让你的 Web 站点轻松做到离线可访问
神奇的 Workbox 3.0让你的 Web 站点轻松做到离线可访问Posted by zoumiaojiang on 2018-01-16PeaceHOME ABOUT ARCHIVES TAGSworkbox是 GoogleChrome 团队推出的一套 Web App 静态资源和请求结果的本地存储的解决方案，该解决方案包含一些 Js 库和构建工具，在 Chrome S...
2020-04-26 15:08:17
1742
1
原创 vue.js进阶之路——传值方式总结
vue.js进阶之路——传值方式总结一、父子组件之间传值（一）、父传子1.props2.$refs（二）、子传父1.$emit2.$parent二、兄弟组件之间传值（一）、通过同一个父类（二）、通过事件机制三、嵌套更深组件之间传值（一）、全局变量（二）、vuex（三）、$bus总线（四）、localStorage、cookie、sessionStorage四、页面之间传值（一）、route（二）、...
2020-04-22 11:08:08
202
原创 vue之项目实战elementUI经验之谈
vue之项目实战elementUI经验之谈vue项目编译搭建一、babel预编译1.导出模块报错vue项目编译搭建一、babel预编译1.导出模块报错编译module.exports.default = *** 报错方案解决：...
2020-04-21 14:46:06
778
原创 自制-前端面试题
vue前端面试题一、简答题二、深入一、简答题介绍最近一份项目经验，从js技术框架、ui框架、css预编辑器，项目使用平台，编辑器开发工具等Vue实现兄弟组件间传值有几种方式及父子之间传值，访问方法（）$children $parent）v-if和v-show的区别。vue中 keep-alive用法。（include .exclude）vuex中四大模块怎么传递的，componen...
2020-03-12 14:19:54
237
转载 eggjs全栈开发规范
eggjs全栈开发规范编码规范编码格式与语法代码注释函数/方法注释单行注释代码分段及缩进使用空格作为缩进代码块符号空白行分隔命名规则文件命名变量与常量命名函数/方法命名引号分号项目规范项目生成安装第三方库项目运行项目开发运行项目部署运行项目docker运行项目相关文件说明extend配置文件MiddlewareServiceControllerrouter.js路由文件安全配置Sequelize安...
2020-01-24 16:39:22
994
原创 vue 之深入浅出各生命周期函数
vue 之各组件间生命周期函数执行顺序一、vue 生命周期函数二、父子孙组件间各生命周期函数一、vue 生命周期函数vue实例的创建都需要经历过一系列生命周期钩子函数，比如实例初始化、数据监听、数据渲染、实例挂载、数据更新等等。周期函数执行案例：<template> <div class="test-demo"> <button @click="c...
2019-12-31 16:26:40
206
原创 vue.js进阶之路——深入响应式原理
vue.js进阶之路——深入响应式原理vue响应式原理Dom元素渲染更新机制检测不到对象的添加和删除检测不到数组的变化vue中props data 更新的顺序vue响应式原理vue框架属于vm框架一种，关注于v视图层和m数据模型层，数据层的变化会引起关联组件的视图层变化，故前端开发专注于数据data的开发。Dom元素渲染更新机制vue更新dom元素是异步执行的，数据data发生变化就会开启...
2019-09-07 19:55:43
171
原创 JavaScript进阶篇之高级程序设计
JavaScript高级程序设计一、ECMAScript二、文档对象模型（DOM）（一）、getBoundingClientRect三、浏览器对象模型（BOM）一、ECMAScript二、文档对象模型（DOM）（一）、getBoundingClientRectgetBoundingClientRect()用于获取某个元素相对于视窗的位置对象。对象中有top, right, bottom, ...
2019-05-09 15:50:10
368
转载 JS魔法堂：函数节流（throttle）与函数去抖（debounce）
JS魔法堂：函数节流（throttle）与函数去抖（debounce）一、前言 以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。 1. window对象的resize、scroll事件 2. 拖拽时的mousemove事件 3. 射击游戏中的mous...
2019-05-08 10:10:50
108
原创 webpack之开发常见配置及应用
webpack之开发常见配置及应用一、require.context二、postcss三、gitHooks一、require.context二、postcss三、gitHooks//package.json文件{"gitHooks":{ "pre-commit":"lint-staged"},"lint-staged":{ "*.js":[ "vue-cli-service...
2019-05-07 15:19:07
105
原创 javascript进阶之路——深度拷贝
javascript进阶之路——深度拷贝一、深度拷贝妙用二、深度拷贝方法（一）Object.assign一、深度拷贝妙用二、深度拷贝方法（一）Object.assignObject.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。详情请参考这个...
2019-05-07 13:52:40
146
转载 JS计算两个日期时间差，天 小时 分 秒格式
JS计算两个日期时间差，天 小时 分 秒格式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...
2019-04-29 16:20:18
4404
转载 前端页面适配的rem换算 为什么要使用rem
前端页面适配的rem换算 为什么要使用rem之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。但直接这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和re...
2019-04-24 19:06:43
391
怎样在eclipse上安装插件maven
2016-06-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人