前端开发
关注
分享
扫一扫
文章平均质量分 54
从底层原理到实战应用，全方位解锁前端开发技巧，精准把握行业趋势，助力开发者进阶为技术先锋。
Thomas Kant
7年IT从业者，测试开发工程师，AI时代，研究人工智能技术，分享所想所得，你我共勉~
展开
-
前端动画巅峰之作：anime.js 终极指南与架构解密
anime.js 是一个轻量级（16KB）高性能 JavaScript 动画库原创 2025-04-09 09:00:00 · 1023 阅读 · 0 评论 -
2025年前端技术栈深度解析
2025年前端技术栈深度解析原创 2025-04-04 09:00:00 · 853 阅读 · 0 评论 -
Node.js - cnpm
了解cnpm之前，让我们先看一下npm那么cnpm1. 是什么？因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了。来自淘宝NPM镜像官网的说明：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”2. 怎么用？只需要在你的git bash或者m...原创 2019-11-22 11:13:25 · 247 阅读 · 0 评论 -
Node.js - console（控制台）
1. console.assert()2. console.group() & console.groupEnd( )3. console.trace()4. console.count()5. console.table()6. add style7. console.time()8. console HTML9. console.dir()10. console.memo...原创 2020-07-06 12:51:41 · 270 阅读 · 0 评论 -
React学习之路 - 准备工作
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。Vue 、 React、 Angular 是目前最主流的三大前端框架， React 便是其中的佼佼者。在很多的企业招聘信息中，你都会看到 React 的身影，可见，所有的前端初学者、开发者，已经到了不得不学习它的时刻。React的下载量远远高于另外两个框架。原创 2023-06-10 20:30:15 · 568 阅读 · 0 评论 -
React学习之路 - HTML5 新特性
原创 2023-09-30 16:29:59 · 190 阅读 · 0 评论 -
React学习之路 - 目录结构
node_modules — 存放项目依赖包public — 存放网站的静态资源文件src — 存放源代码，基于ES6规则的React代码gitignore — git的选择性上传的配置文件package.json — Webpack配置和项目包管理文件包含项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要改动。如果你对webpack了解，对这个一定也很熟悉。原创 2023-06-10 21:31:48 · 1768 阅读 · 0 评论 -
React学习之路 - 上传代码到GitCode
【代码】上传代码到GitCode。原创 2023-08-13 16:51:02 · 185 阅读 · 0 评论 -
Vue.js - Vuex mapState（State）
Object Spread OperatorNote thatmapStatereturns an object. How do we use it in combination with other local computed properties? Normally, we'd have to use a utility to merge multiple objects into one so that we can pass the final object tocomputed. Ho...原创 2021-04-01 10:21:13 · 206 阅读 · 0 评论 -
Vue.js - Vuex mapActions（Actions）
mapActionsDispatching Actions in ComponentsYou can dispatch actions in components withthis.$store.dispatch('xxx'), or use themapActionshelper which maps component methods tostore.dispatchcalls (requires rootstoreinjection):在组件中分发 Action你在组件中...原创 2021-04-01 10:45:57 · 289 阅读 · 0 评论 -
Vue.js - lru-cache
高速缓存安装npminstalllru-cache--save使用var LRU = require("lru-cache") , options = { max: 500 , length: function (n, key) { return n * 2 + key.length } , dispose: function (key, n) { n.close() } , maxAge: 10...原创 2021-04-01 17:09:28 · 1175 阅读 · 0 评论 -
Vue.js - axios 拦截器的使用
axiosGitHub地址: https://github.com/axios/axios中文网:http://www.axios-js.com/zh-cn/docs/拦截器在请求或响应被then或catch处理前拦截它们。// 添加请求拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config; }, function (error) { /...原创 2021-04-02 09:53:57 · 308 阅读 · 0 评论 -
Vue.js - VSCode（Visual Studio Code） 插件
插件Vue代码提示插件Vue 2 SnippetsVue中的代码高亮插件Vetur快捷键新建Vue模板https://blog.youkuaiyun.com/weixin_37263797/article/details/104514203Vue自动格式化代码https://blog.youkuaiyun.com/damishidai15/article/details/102560247创建VUE文件，自动添加注释https://blog.youkuaiyun.com/qq_34527715/arti原创 2021-04-21 15:37:49 · 200 阅读 · 0 评论 -
Vue.js - Event Modifiers
Vue.js事件处理事件修饰符调用event.preventDefault()或event.stopPropagation()在事件处理程序内部是非常普遍的需求。尽管我们可以轻松地在方法内部完成此操作，但最好是这些方法可以纯粹与数据逻辑有关，而不是必须处理DOM事件详细信息。为了解决这个问题，Vue公司提供事件修饰符的v-on。回想一下修饰符是用点表示的指令后缀。.stop .prevent .capture .self .once .passive<!-- the.原创 2021-04-01 13:40:44 · 377 阅读 · 0 评论 -
Vue：Vue 3.4 新特性
Vue 3.4 引入了自定义渲染器 API，允许开发者用自定义的方式渲染 Vue 组件，这为开发者提供了更高的灵活性和扩展性。Vue 3.4 是一个全面的更新，它在多个方面增强了 Vue 的能力，提高了开发效率和用户体验，是值得开发者关注和升级的版本。原创 2024-01-02 16:14:44 · 1411 阅读 · 0 评论 -
Vue.js - 界面设计工具和UI组件库
View UI Plus是一款基于Vue.js 3的企业级中后台UI组件库，它主要提供了一套丰富的组件，用于帮助开发人员更高效地完成界面设计和开发工作。总的来说，View UI Plus和类似的产品都是强大的UI组件库，能够帮助开发人员提高设计效率，实现界面设计和开发的自动化。总的来说，ViewDesign和类似的产品都是强大的界面设计工具，能够帮助设计师和开发人员提高设计效率，实现界面设计和开发的自动化。这些产品也提供了可视化的界面设计功能，具有丰富的设计元素和组件，支持在线协作，可以满足各种设计需求。原创 2023-12-09 21:14:00 · 925 阅读 · 0 评论 -
Vue.js - Vue Loader - Using Pre-Processors
使用预处理器在 webpack 中，所有的预处理器需要匹配对应的 loader。Vue Loader 允许你使用其它 webpack loader 处理 Vue 组件的某一部分。它会根据lang特性以及你 webpack 配置中的规则自动推断出要使用的 loader。Sass例如，为了通过 Sass/SCSS 编译我们的<style>标签：npm install -D sass-loader node-sass在你的 webpack 配置中：module.e...原创 2021-04-01 15:20:29 · 260 阅读 · 0 评论 -
Vue.js - vue-awesome-swiper
vue-awesome-swiper使用（韩文）https://negabaro.github.io/archive/vue-awesome-swiper参数（韩文）https://negabaro.github.io/archive/vue-awesome-swiper-option参考（中文）https://blog.youkuaiyun.com/dwb123456123456/article/details/82701740...原创 2021-04-01 13:04:35 · 163 阅读 · 0 评论 -
jQuery - 在最新版本使用已经被删除的在之前版本经常使用的方法
jQuery 经常更新版本。这样导致在最新版本，无法使用在之前版本经常使用的功能（方法）。这种情况，如果想在最新版本使用之前版本（1.9版本以下）的方法，安装 - Migrate plugin 。https://jquery.com/download/下载并保存到 js 文件夹在 HTML 的 <head> 领域里联动，如下：<head> ...原创 2020-03-12 11:37:32 · 250 阅读 · 0 评论 -
jQuery - 事件
Event 方法种类 区分 种类 语法 说明 loading load() $(selector).load(url) $(selector).load(url, data, function(response, status, xhr)) 从服务器加载数据， 并把返回的数据放置到指定的元素中 ready() ...原创 2020-03-13 20:08:23 · 155 阅读 · 0 评论 -
jQuery - 关于数组方法
关于数组方法的种类 种类 使用 说明 each() / $.each() $("被选元素").each(function) \ $.each($("被选元素"), function) 为每个匹配元素执行函数 $.map() $.map(Array, function) 把当前匹配数组中的每个元素传递给函数，返回值储存在新的数组中，返回新的数组对象 ...原创 2020-03-12 17:09:52 · 318 阅读 · 0 评论 -
jQuery - 选择器
基本选择器 区分 种类 使用 说明 直接选择器 全部选择器 $("*") 所有元素 id 选择器 $("#id_name") id="id_name" 的元素 class 选择器 $(".class_name") class="class_name" 的所有元素 元素选择器 $("element_name") ...原创 2020-03-12 14:37:14 · 164 阅读 · 0 评论 -
jQuery - 对象设置
设置属性方法 种类 使用 说明 html() html("新元素") $("被选元素").html(); $("被选元素").html("新元素"); 返回被选元素的下游元素（包括 HTML 标记） 删除所有被选元素的下游元素，在原来位置生成新元素 text() text("...原创 2020-03-12 21:14:02 · 350 阅读 · 0 评论 -
jQuery - mouseover与mouseenter、mouseout与mouseleave的区别
区别穿过mouseover与mouseenter不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。离开mouseout与mouseleave不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。...原创 2021-04-02 08:47:31 · 187 阅读 · 0 评论 -
jQuery - Ajax
简介AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。原创 2020-03-17 14:34:29 · 189 阅读 · 0 评论 -
jQuery - 效果和动画
效果方法种类 区分 种类 说明 隐藏 hide() 隐藏被选元素 fadeOut() 逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果） slideUp() 以滑动方式隐藏被选元素 显示 show() 显示隐藏的被选元素 fadeln() 使用淡入效果来显示被选元素，假如该元素是隐藏的 slideDown() ...原创 2020-03-13 21:09:23 · 155 阅读 · 0 评论 -
TypeScript - 简介
理论一、概念区分ECMAScript： 一个由 ECMA International 进行标准化，TC39 委员会进行监督的语言。通常用于指代标准本身。 JavaScript： ECMAScript 标准的各种实现的最常用称呼。这个术语并不局限于某个特定版本的 ECMAScript 规范，并且可能被用于任何不同程度的任意版本的 ECMAScript 的实现。 ECMAScript ...原创 2019-11-26 09:50:30 · 169 阅读 · 0 评论 -
TypeScript - class修饰符
一、访问修饰符（访问控制修饰符）Java中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。Java 支持 4 种不同的访问权限。 default(即默认，什么也不写）: 在同一包内可见，不使用任何修饰符。使用对象：类、接口、变量、方法。 private: 在同一类内可见。使用对象：变量、方法。注意：不能修饰类（外部类） public: 对所有类可见。使用对象：类、接口、变量、方法 protected: 对同一包内的类和所有子类可见。使用对象...原创 2021-03-30 16:01:07 · 1066 阅读 · 0 评论 -
在 TypeScript 中，两个看似相同的字符串用 `==` 比较返回 `false`
【代码】在 TypeScript 中，两个看似相同的字符串用 `==` 比较返回 `false`原创 2025-03-17 15:17:56 · 458 阅读 · 0 评论 -
TypeScript - 入门
runoob教程https://www.runoob.com/typescript/ts-tutorial.htmlw3cschool教程https://www.w3cschool.cn/typescript/typescript中文手册https://typescript.bootcss.com/typescript进阶 - 常见的typescript高级技巧https://www.pipipi.net/1537.html...原创 2021-03-29 10:48:28 · 137 阅读 · 0 评论 -
JavaScript - 入门
w3school教程https://www.w3school.com.cn/js/index.asprunoob教程https://www.runoob.com/js/js-tutorial.html原创 2021-03-29 10:39:09 · 144 阅读 · 0 评论 -
JavaScript - forEach、for in、for of 三者对比
forEachforEach专门用来循环数组，可以直接取到元素，同时也可以取到index值存在局限性，不能continue跳过或者break终止循环，没有返回值，不能returnlet arr = ['a', 'b', 'c', 'd']arr.forEach(function (val, index, arr) { console.log('index:'+index+','+'val:'+val) // val是当前元素，index当前元素索引，arr数组 console原创 2021-05-18 16:00:23 · 1093 阅读 · 0 评论 -
JavaScript - BOM(Browser Obejct Model)
window 对象的方法种类 种类 说明 open("URL", "新窗口名字", "新窗口options") 打开一个新的浏览器窗口或查找一个已命名的窗口 alert(data) 显示带有一段消息和一个确认按钮的警告框 prompt("提问", "答案") 显示可提示用户输入的对话框 confirm("提问", "内容") 显示带有一段消息以及确认...原创 2020-03-11 21:53:54 · 126 阅读 · 0 评论 -
JavaScript - 字符串转成数字的三种方法
1. 转换函数：js提供了parseInt()和parseFloat()两个转换函数parseInt("1234blue"); //returns 1234parseInt("0xA"); //returns 10parseInt("22.5"); //returns 22parseInt("blue"); //returns NaNparseInt("AF", 16); //returns 175parseInt("10", 2); //returns 2parseInt("10"原创 2021-08-19 14:10:54 · 692 阅读 · 0 评论 -
ECMAScript 6 - 常用关键字
ECMAScript 6 入门ES5 只有两种声明变量的方法：`var`命令和`function`命令。ES6 除了添加`let`和`const`命令，和另外两种声明变量的方法：`import`命令和`class`命令。所以，ES6 一共有 6 种声明变量的方法。varvar b = 1;JavaScript变量是用于存储数据值的容器。functionfunction ...原创 2019-11-22 13:24:47 · 988 阅读 · 0 评论 -
JavaScript - 截取字符串方法
JS提供三个截取字符串的方法：slice() substring() substr()slice()和substring()var stmp = "rcinn.cn"; 使用一个参数 alert(stmp.slice(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn"alert(stmp.substring(3));//从第4个字符开始,截取到最后个字符;返回"nn.cn"使用两个参数alert(stmp.slice(1,5))//从第2个字符开始，到第5个原创 2021-08-19 14:20:36 · 395 阅读 · 0 评论 -
JavaScript - 内部对象
关于日期的方法 获取日期情报（GET） 修改日期情报（SET） getFullYear() 获取年 setFullYear() 修改年 getMonth() 获取月(当前月 - 1) setMonth() 修改月(当前月 - 1) getDate() 获取日 setDate() 修改日 getDay() 获取星期(...原创 2020-03-11 19:34:26 · 170 阅读 · 0 评论