玩转前端JavaScript
关注
分享
扫一扫
玩转前端JavaScript
高热度网
主要技能：前端、小程序、网站开发，NodeJS全栈技术开发，欢迎交流
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
ReactPress - 一个基于Next.js 的CMS&博客系统
ReactPress-一个基于Next.js 的CMS&博客系统.原创 2025-03-07 20:30:09 · 516 阅读 · 0 评论 -
ReactPress 标签云实现原理和代码解析
ReactPress的标签云实现通过纯JavaScript和DOM操作，实现了标签的初始化、位置计算和动画效果。这种实现方式虽然灵活，但在React项目中，更推荐将逻辑封装为React组件，利用React的状态管理和生命周期方法，实现更简洁和可维护的代码结构。通过本文的介绍，希望读者能够理解标签云的实现原理，并能在此基础上进行自定义和优化，以适应不同的应用场景。原创 2024-12-22 16:49:05 · 880 阅读 · 0 评论 -
ReactPress 1.6.0：重塑博客体验，引领内容创新
ReactPress 1.6.0版本的发布，标志着我们在博客平台的发展道路上又迈出了坚实的一步。我们深知，每一次更新都离不开用户的支持和反馈。因此，我们诚挚地邀请广大用户试用新版本，并提出宝贵的意见和建议。我们相信，在大家的共同努力下，ReactPress一定能够成为更加优秀、更加受欢迎的博客平台。未来，我们将继续致力于技术创新和用户体验优化，为博主和用户提供更加便捷、高效、美观的博客解决方案。让我们携手共进，共同打造更加美好的数字世界！ReactPress，让博客创作与分享变得更加简单、快乐！原创 2024-12-22 13:15:27 · 1317 阅读 · 0 评论 -
深入探索：JavaScript中实现乱序函数的艺术
乱序函数在JavaScript编程中具有广泛的应用场景，而Fisher-Yates洗牌算法则是实现这一功能的最常用和最可靠的算法之一。通过理解算法的原理和实现方法，我们可以轻松地编写出高效且可靠的乱序函数，并在实际项目中加以应用。同时，我们也可以考虑使用第三方库来简化代码和提高代码的可维护性。希望本文能够帮助你深入理解JavaScript中的乱序函数，并在你的编程实践中发挥出更大的作用。原创 2024-11-23 23:36:17 · 594 阅读 · 0 评论 -
JavaScript 高级—模拟实现私有变量（面试必备技能）
在 JavaScript 中模拟私有变量虽然需要一些额外的技巧，但通过使用闭包和Symbol，我们可以实现类似的效果。这些技巧不仅有助于提升代码的安全性，还能在面试中展示出你对 JavaScript 的深入理解。无论你是初学者还是经验丰富的开发者，掌握这些技巧都将对你的编程技能产生积极的影响。原创 2024-11-19 18:49:10 · 444 阅读 · 0 评论 -
JavaScript 高级—求数组的最大值与最小值
Math.max和Math.min配合apply或扩展运算符是最简单和推荐的方式，而手动遍历数组的方法则提供了更多的灵活性和可定制性。无论你选择哪种方法，都可以轻松地在 JavaScript 中找到数组的最大值和最小值。希望这篇文章能帮助你更好地理解数组操作，并在实际编程中加以应用。原创 2024-11-19 18:45:27 · 588 阅读 · 0 评论 -
Javascript高级：深度解析与多种实现方式数组扁平化
在JavaScript编程中，数组扁平化是一个常见的操作，指的是将一个多维数组转换成一个一维数组。这个过程中，所有嵌套的数组元素都会被“拉平”到同一个层级。数组扁平化在处理嵌套数据结构时非常有用，比如解析多层嵌套的JSON数据，或者处理从函数返回的嵌套数组结果。综上所述，数组扁平化是处理嵌套数据结构的重要操作之一。通过选择合适的方法，可以高效地实现数组扁平化，从而简化数据处理过程。通过递归函数，可以遍历每一层数组，并将其元素添加到结果数组中。方法也可以用来实现数组扁平化，结合递归可以处理任意深度的嵌套。原创 2024-11-18 20:19:59 · 262 阅读 · 0 评论 -
Javascript高级—数组去重的5种方式
数组去重是 JavaScript 编程中的一个常见需求，有多种方法可以实现。Set数据结构因其简洁和高效，通常是首选的方法。filterindexOfreduceforEach+ 临时对象以及Map也可以实现数组去重，但各有优缺点。选择哪种方法取决于具体的需求和性能考虑。在实际开发中，可以根据具体情况选择最适合的方法来实现数组去重。原创 2024-11-17 17:29:21 · 194 阅读 · 0 评论 -
Javascript高级—Promise的模拟实现
使用Javascript模式Promise的模拟实现。原创 2024-11-16 21:55:08 · 226 阅读 · 0 评论 -
Javascript高级—Arguments参数如何使用？
arguments的应用其实很多，在下个系列，也就是 JavaScript 专题系列中，我们会在 jQuery 的 extend 实现、函数柯里化、递归等场景看见 arguments 的身影。原创 2024-11-16 21:53:54 · 194 阅读 · 0 评论 -
Javascript高级—Arguments参数如何使用？
arguments的应用其实很多，在下个系列，也就是 JavaScript 专题系列中，我们会在 jQuery 的 extend 实现、函数柯里化、递归等场景看见 arguments 的身影。原创 2024-11-15 20:22:15 · 161 阅读 · 0 评论 -
Javascript高级—this指向深度解析
深度解析Javascript中的this指向问题。原创 2024-11-15 20:21:15 · 322 阅读 · 0 评论 -
Javascript高级—搜索算法
使用Javascript实现搜索算法。原创 2024-11-14 23:10:29 · 303 阅读 · 0 评论 -
Javascript高级—多种排序算法
使用Javascript实现多种排序算法。原创 2024-11-14 23:09:31 · 274 阅读 · 0 评论 -
Javascript高级—闭包问题
循环中赋值为引用的问题解决方法有3种第一种，使用立即执行函数方式第二种，使用ES6的第三种，使用setTimeout的第三个参数。原创 2024-11-13 22:03:44 · 226 阅读 · 0 评论 -
Javascript高级—如何实现一个类型判断函数？
之所以要先判断是否为基本类型是因为：虽然Object.prototype.toString.call()能判断出某值是：number/string/boolean，但是其实在包装的时候是把他们先转成了对象然后再判断类型的。 但是JS中包装类型和原始类型还是有差别的，因为对一个包装类型来说，typeof的值是object。原创 2024-11-13 22:01:18 · 380 阅读 · 0 评论 -
Javascript高级—DOM树的深度遍历和广度遍历
Javascript高级—DOM树的深度遍历和广度遍历。原创 2024-11-12 23:14:03 · 308 阅读 · 0 评论 -
ReactPress与WordPress：一场内容管理系统的较量
ReactPress和WordPress各有千秋，选择哪个平台取决于具体需求和场景。ReactPress以其现代的前后端技术栈、高效的技术整合与优化、卓越的可扩展性设计以及可靠的安全与稳定性设计，成为追求高性能和现代化用户体验的首选。它适合那些需要复杂功能、高并发访问和SEO优化的网站。而WordPress则以其易用性、广泛的插件支持和丰富的主题选择，成为那些希望快速搭建网站、注重内容发布和管理的用户的理想选择。WordPress适合个人博客、小型企业网站和初创公司等需要快速上线和灵活调整的场景。原创 2024-11-12 23:11:30 · 899 阅读 · 0 评论 -
ReactPress：基于React + AntDesign 5.0 的简约时尚的博客&CMS内容发布系统
此项目是基于 React + antd + NestJS + NextJS + MySQL 的，项目已经开源，项目地址在 github 上，喜欢的，欢迎给个 star。原创 2024-11-11 21:42:21 · 2469 阅读 · 0 评论 -
JavaScript 观察者设计模式
观察者模式:观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。而js中最常见的观察者模式就是事件触发机制。原创 2024-11-10 16:39:44 · 830 阅读 · 0 评论 -
ReactPress – An Open-Source Publishing Platform Built with React
ReactPress is an open-source publishing platform developed using the React. Users can set up their own blogs and websites on servers that support React and MySQL databases. ReactPress can also be used as a content management system (CMS).原创 2024-11-08 22:11:57 · 1182 阅读 · 0 评论 -
ReactPress：构建高效、灵活、可扩展的开源发布平台
在当今数字化时代，内容管理系统（CMS）已成为各类网站和应用的核心组成部分。ReactPress，作为一款融合了现代Web开发多项先进技术的开源发布平台，正以其卓越的性能、灵活性和可扩展性，赢得了广大开发者和内容创作者的青睐。原创 2024-11-08 21:50:36 · 1141 阅读 · 0 评论 -
【JavaScript高级】ES6中需要深入理解掌握的18个关键点总结笔记
1. let关键字<body><button>测试1</button><br><button>测试2</button><br><button>测试3</button><br><!--***le原创 2018-12-01 21:29:47 · 537 阅读 · 0 评论 -
【JavaScript知识总结一】JS中的变量类型、变量计算和内置函数的使用及注意点总结
1.JS中的变量类型 var a = 100; // 值类型不会因为赋值而相互干预 var b = a; a = 200; console.log(b); // 100// 注意点：不仅仅是js对象{} 可以由自己的属性，JS中的数组和函数也都是可以有自己的属性的 var a = {age: 20}; var b...原创 2019-01-03 12:55:36 · 262 阅读 · 0 评论 -
【JavaScript知识总结二】全方位从5个方面深入理解JS中的原型和原型链
1. 所有的引用类型（数组，对象，函数），都是具有对象特性的，即可以自由扩展属性（除了null以外） // 1.引用类型可以扩展属性 var obj = {}; obj.a = 100; // 对象属性的扩展 var arr = []; arr.a = 100; // 数组属性的扩展 function fn() {...原创 2019-01-03 21:54:29 · 195 阅读 · 0 评论 -
【JavaScript进阶】parseInt()和Math.floor()两个函数的区分
测试一个二分搜索算法中，用到这个parseInt，发现结果计算也是正确的。// 在一个有n个元素的arr数组里面，寻找target的值对应的数组下标function binarySearch(arr, n, target){ // 1. 设置初始的边界范围 var l = 0, r = n - 1; // 在数组的[l, r]区间范围内寻找target // 2. 开始进...原创 2019-02-21 21:44:17 · 1276 阅读 · 0 评论 -
【Javascript高级】使用HTML5中的Web Woker来处理大数据量下主线程（UI线程）阻塞问题
具体的测试代码如下，包括index.html(UI线程), worker.js（子线程）和一个script1.js文件（可以在worker中导入的js文件）。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Worker使用&l...原创 2019-06-18 11:09:54 · 1165 阅读 · 0 评论 -
【Vue高级知识】如何使用Vue CLI-3.0脚手架工具分别配置项目的开发环境和部署环境下的环境变量
1. cli-3.0总共提供了四种方式来制定环境变量：在根目录添加.env文件，配置所有情况下都会用到的配置（不知道这个存在的意义，所有的都需要的也就不需要配置了吧）。 在根目录添加.env.local文件，配置所有情况下都会用到的配置，与.env的区别是只会在本地，该文件不会被git跟踪。 在根目录添加.env.[mode]文件，配置对应某个模式下的配置,比如：.env.develo...原创 2019-05-21 12:45:54 · 1240 阅读 · 1 评论 -
【Vue高级知识】细谈Vue 中三要素（响应式+模板+render函数）
Vue 中三要素的是什么？响应式： // 如何让实现响应式的呢？ let obj = {}; let name = 'zhangsan'; Object.defineProperties(obj, name, {get : function() { console.log('name' , name) }, set : function() {...原创 2019-06-22 10:33:05 · 2123 阅读 · 0 评论 -
【Vue高级知识】梳理Vue源码的整个实现流程
Vue的整个实现流程源码解读？？？（总结点）解析模板成render函数 <template></template> --->>> render 函数with函数的使用模板中的所有信息都被render函数包含模板中用到的data中的属性，都变成了JS变量模板中的v-model v-for v-on都变成了JS逻辑render函数返回v...原创 2019-06-22 10:45:28 · 407 阅读 · 0 评论 -
【Vue高级知识】如何使用Vue劫持对象或数组的属性
Vue创建一个实例 <div id="app">{{msg}}</div> <script src="node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:'#app',...原创 2019-06-22 11:09:16 · 1368 阅读 · 1 评论 -
【JavaScript游戏开发】JavaScript+HTML5封装的苏拉卡尔塔游戏（包含源码）
/** 苏拉克尔塔游戏 * 思路： * 1.棋盘设置：使用HTML5的canvas标签绘制整个棋盘 * 2.点击事件：当页面被点击时，获取点击的x,y像素点,根据此像素点进行判断，再在合适位置绘制黑红棋子，棋子均是使用canvas绘制的 * 3.保存落子记录：将数据存入一个二维数组，x和y表是落子坐标，1为白棋，2为黑棋，0代表此处无棋子，只有没有棋子的才能落子 * 4.判断输赢：每次...原创 2018-08-23 12:35:33 · 2459 阅读 · 5 评论 -
【JavaScript】不使用正则表达式和字符串的方式来解析浏览器的URl地址信息
1.比如我们要获取的网站URl地址是：https://music.163.com/#/playlist?id=2384581760一般我们能够想到的方式是直接使用正则表达式获取使用字符串直接解析的方式来一步步解析，但是如何有没有能够更高效率的方法呢？答案是有的。第一步：创建一个a标签对象（动态创建）var a = document.createElement('a')第二步：...原创 2018-09-08 19:38:24 · 536 阅读 · 0 评论 -
【VIP视频网站项目一】搭建视频网站的前台页面（导航栏+轮播图+电影列表+底部友情链接）
首先来直接看一下最终的效果吧：项目地址：https://github.com/xiugangzhang/vip.github.io在线预览地址：https://xiugangzhang.github.io/vip.github.io/index.html目前视频网站已经实现了前台页面所有数据从后台数据库的读取，由于Github上面只能查看到静态的页面，对于动态网站还是不支持的，这个等待...原创 2018-09-09 12:31:01 · 10628 阅读 · 3 评论 -
【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果，基本上轮播效果和主流网站的一致，但是我也在上面优化了一些效果，可以在线预览效果：https://vip.52tech.tech/目前项目代码已经全部开源：项目地址：https://github.com/xiugangzhang/vip.github.io 下面就来介绍一些实现思路吧： //首页轮播图效果开始----------------------...原创 2018-09-11 12:41:56 · 1745 阅读 · 0 评论 -
【JavaScript游戏开发】使用HTML5 canvas开发的网页版中国象棋项目
//V1.0 : 实现棋子的布局，画布及游戏场景的初始化//V2.0 : 实现棋子的颜色改变//V3.0 ：实现所有象棋的走棋规则//V4.0 : 实现所有棋子的吃子功能完整的项目源码已经开源：https://github.com/xiugangzhang/ChineseChess项目在线预览地址：http://htmlpreview.github.io/?https://gi...原创 2018-08-21 12:41:10 · 1690 阅读 · 1 评论 -
【JavaScript游戏开发】使用HTML5+Canvas+JavaScript 封装的一个超级马里奥游戏（包含源码）
这个游戏基本上是建立在JavaScript模块化的开发基础上进行封装的，对游戏里面需要使用到的游戏场景进行了封装，分别实现了Game,Sprite,enemy,player, base,Animation 等游戏类，后续代码还可以继续优化，最终实现的效果如下：其他的所有核心代码已经开源：https://github.com/xiugangzhang/SuperMarioGame在线预览...原创 2018-08-22 12:19:01 · 3622 阅读 · 1 评论 -
【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享（单文件版本）
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧，最终实现了一个大概30%的JQuery功能的框架版本，但是里面涉及的知识点也是非常多的，总共的代码加上相关的注释大概在3000行左右吧，但也只是对JQuery的里面的知识点了解了大概，后续希望能更深层次的理解JQuery里面涉及的知识点，从而写出高质量的代码，特此记录一下这一段时间学习的点滴。/** @Author: 我爱科技论...原创 2018-07-22 16:58:50 · 845 阅读 · 0 评论 -
【JavaScript框架封装】使用原生js封装的类似于JQuery的框架及核心源码分享（多文件版本）
这个版本的JQuery是对上一个版本的JQuery，使用了require.js进行了二次封装，基本上把前面的每一个框架封装成为一个单独的模块，最终的目录结构如下：由于代码量和目录比较多，这个封装好的代码和目录已经全部上传到GitHub上面，需要的同学可以前往下载哈。https://github.com/xiugangzhang/JavaScript-Xframe【main.js】这...原创 2018-07-22 17:42:38 · 2425 阅读 · 0 评论 -
【JavaScript框架封装】在实现一个自己定义类似于JQuery的append()函数的时候遇到的问题及解决方案
主要问题：在刚开始创建了这个函数之后，使用的时候，总是会出现一个问题，就是按照正常步骤给一个ID选择器添加子节点的时候正常，但是到了给一个class选择器的元素添加的时候始终只能添加一个。下面是我自己定义的Append（）函数：/** * 向现有的元素节点中添加dom节点(对使用选择器获取的一系列元素都添加孩子节点child) * @param c...原创 2018-07-17 20:09:53 · 802 阅读 · 0 评论