- 大家好，我是CoderBin，本文总结了React中的一些常用技巧，相信看完本文的小伙伴都能从中有所收获💪。 创作不易，你们的点赞收藏留言就是我最大的动力💓 如果文中有不对、疑惑的地方，欢迎各位小伙伴们在评论区留言指正🌻 大家好，我是CoderBin，本文总结了React中的一些常用技巧，相信看完本文的小伙伴都能从中有所收获💪。 创作不易，你们的点赞收藏留言就是我最大的动力💓 如果文中有不对、疑惑的地方，欢迎各位小伙伴们在评论区留言指正🌻
- 前言一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题，但是主题定制需求永远都存在，所以组件库一般都会允许使用者自定义主题，我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的，新体系下还做到了动态换肤，因为皮肤本质上是一种静态资源（CSS文件和字体文件），所以只需要约定一种方式来每次动态请求加载不同的文件就可以了，为了方便这一需求，还配套开... 前言一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题，但是主题定制需求永远都存在，所以组件库一般都会允许使用者自定义主题，我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的，新体系下还做到了动态换肤，因为皮肤本质上是一种静态资源（CSS文件和字体文件），所以只需要约定一种方式来每次动态请求加载不同的文件就可以了，为了方便这一需求，还配套开...
- 开头9月19号，万众期待的vue3.0如期而至，事实上很多人很早就已经体验过了，但是本人比较懒，再加上没有正式发布也不能在项目上使用，所以一直没去尝试，只在一些零星的文章上看到了它大概会有一些什么新功能，现在它的正式发布意味着已经推荐在新项目上使用它了，毕竟相对于2.0，它的优点还是非常明显的，虽然现在配套的一些工具还没完成，但是在一些小项目上使用应该没有什么问题。目前我还没有实际的去使用... 开头9月19号，万众期待的vue3.0如期而至，事实上很多人很早就已经体验过了，但是本人比较懒，再加上没有正式发布也不能在项目上使用，所以一直没去尝试，只在一些零星的文章上看到了它大概会有一些什么新功能，现在它的正式发布意味着已经推荐在新项目上使用它了，毕竟相对于2.0，它的优点还是非常明显的，虽然现在配套的一些工具还没完成，但是在一些小项目上使用应该没有什么问题。目前我还没有实际的去使用...
- 游戏简介汉诺塔是源于印度一个古老传说的益智游戏，传说大梵天创造世界的时候顺便搞了三根柱子，一根柱子上摞着一堆从大到小的圆环，他命令婆罗门把圆环全部移动到另一个柱子上，依旧是从大到小，且移动规则如下：1.一次只能把一个圆环从一根柱子移动到另一根柱子上2.圆环的上面不能放比它大的圆环详细介绍及解法请参考文章：汉诺塔与递归。最终的成果示例请点击：汉诺塔小游戏。温馨提示：本篇教程属于从头到尾面面俱... 游戏简介汉诺塔是源于印度一个古老传说的益智游戏，传说大梵天创造世界的时候顺便搞了三根柱子，一根柱子上摞着一堆从大到小的圆环，他命令婆罗门把圆环全部移动到另一个柱子上，依旧是从大到小，且移动规则如下：1.一次只能把一个圆环从一根柱子移动到另一根柱子上2.圆环的上面不能放比它大的圆环详细介绍及解法请参考文章：汉诺塔与递归。最终的成果示例请点击：汉诺塔小游戏。温馨提示：本篇教程属于从头到尾面面俱...
- 开头饼图，很常见的一种图表，使用任何一个图表库都能轻松的渲染出来，但是，我司的交互想法千奇百怪，布局捉摸不透，本身饼图是没啥可变的，但是配套的图例千变万化，翻遍ECharts配置文档都还原不出来，那么有两条路可以选，一是跟交互说实现不了，说服交互按图表库的布局来，但是一般交互可能会对你灵魂拷问，为什么别人都能做出来，你做不出来？所以我选第二种，自己做一个得了。用canvas实现一个饼图很简... 开头饼图，很常见的一种图表，使用任何一个图表库都能轻松的渲染出来，但是，我司的交互想法千奇百怪，布局捉摸不透，本身饼图是没啥可变的，但是配套的图例千变万化，翻遍ECharts配置文档都还原不出来，那么有两条路可以选，一是跟交互说实现不了，说服交互按图表库的布局来，但是一般交互可能会对你灵魂拷问，为什么别人都能做出来，你做不出来？所以我选第二种，自己做一个得了。用canvas实现一个饼图很简...
- 前言女朋友常逛的设计网站这两天页面上多了下雪的效果，于是问我我的网站能下雪吗，作为一个程序员我一般会说实现不了，但是作为男朋友，不能说不行。 雪雪我们可以使用span标签和css的径向渐变简单意思一下：.snow { display: block; width: 100px; height: 100px; background-image: radial-gradient(#fff... 前言女朋友常逛的设计网站这两天页面上多了下雪的效果，于是问我我的网站能下雪吗，作为一个程序员我一般会说实现不了，但是作为男朋友，不能说不行。 雪雪我们可以使用span标签和css的径向渐变简单意思一下：.snow { display: block; width: 100px; height: 100px; background-image: radial-gradient(#fff...
- 开篇文本划线是目前逐渐流行的一个功能，不管你是小说阅读网站，还是卖教程的的网站，一般都会有记笔记或者评论的功能，传统的做法都是在文章底部加一个评论区，优点是简单，统一，缺点是不方便对文章的某一段或一句话进行针对性的评论，所以出现了划线及评论的需求，目前我见到的产品有划线功能的有：微信阅读APP、极客时间：InfoQ写作平台：等等，这个功能看似简单，实际上难点还是很多的，比如如何高性能的对各... 开篇文本划线是目前逐渐流行的一个功能，不管你是小说阅读网站，还是卖教程的的网站，一般都会有记笔记或者评论的功能，传统的做法都是在文章底部加一个评论区，优点是简单，统一，缺点是不方便对文章的某一段或一句话进行针对性的评论，所以出现了划线及评论的需求，目前我见到的产品有划线功能的有：微信阅读APP、极客时间：InfoQ写作平台：等等，这个功能看似简单，实际上难点还是很多的，比如如何高性能的对各...
- 简介大家好，我是一个闲着没事热衷于重复造轮子的不知名前端，今天给大家带来的是一个代码在线编辑预览工具的实现介绍，目前这类工具使用很广泛，常见于各种文档网站及代码分享场景，相关工具也比较多，如codepen、jsrun、codesandbox、jsbin、plnkr、jsfiddle等，这些工具大体分两类，一类可以自由添加多个文件，比较像我们平常使用的编辑器，另一类固定只能单独编辑html、... 简介大家好，我是一个闲着没事热衷于重复造轮子的不知名前端，今天给大家带来的是一个代码在线编辑预览工具的实现介绍，目前这类工具使用很广泛，常见于各种文档网站及代码分享场景，相关工具也比较多，如codepen、jsrun、codesandbox、jsbin、plnkr、jsfiddle等，这些工具大体分两类，一类可以自由添加多个文件，比较像我们平常使用的编辑器，另一类固定只能单独编辑html、...
- 相识console一定是各位前端er最熟悉的小伙伴了，无论是console控制台，还是console对象，做前端做久了，打开一个网页总是莫名自然的顺手打开控制台，有些调皮的网站还会故意在控制台输出一些有意思的东西，比如招聘信息，像百度的：其他的不说，真的每年都更新，看着还挺让人热血沸腾。另外输出一些花里胡哨的字符图形也是很常见的，比如天猫的：也有一些网站可能不喜欢被人调试，只要打开控制台就... 相识console一定是各位前端er最熟悉的小伙伴了，无论是console控制台，还是console对象，做前端做久了，打开一个网页总是莫名自然的顺手打开控制台，有些调皮的网站还会故意在控制台输出一些有意思的东西，比如招聘信息，像百度的：其他的不说，真的每年都更新，看着还挺让人热血沸腾。另外输出一些花里胡哨的字符图形也是很常见的，比如天猫的：也有一些网站可能不喜欢被人调试，只要打开控制台就...
- 命令前面的代码已经涉及到几个命令了，我们把会修改节点状态的操作通过命令来调用，每调用一个命令就会保存一份当前的节点数据副本，用来回退和前进。命令类似于发布订阅者，先注册命令，然后再触发命令的执行：class Command { constructor() { // 保存命令 this.commands = {} // 保存历史副本 this.history = [... 命令前面的代码已经涉及到几个命令了，我们把会修改节点状态的操作通过命令来调用，每调用一个命令就会保存一份当前的节点数据副本，用来回退和前进。命令类似于发布订阅者，先注册命令，然后再触发命令的执行：class Command { constructor() { // 保存命令 this.commands = {} // 保存历史副本 this.history = [...
- 简介思维导图是一种常见的表达发散性思维的有效工具，市面上有非常多的工具可以用来画思维导图，有免费的也有收费的，此外也有一些可以用来帮助快速实现的JavaScript类库，如：jsMind、KityMinder。本文会完整的介绍如何从头实现一个简易的思维导图，最终成果预览：https://wanglin2.github.io/mind-map/。 技术选型这种图形类的绘制一般有两种选择：sv... 简介思维导图是一种常见的表达发散性思维的有效工具，市面上有非常多的工具可以用来画思维导图，有免费的也有收费的，此外也有一些可以用来帮助快速实现的JavaScript类库，如：jsMind、KityMinder。本文会完整的介绍如何从头实现一个简易的思维导图，最终成果预览：https://wanglin2.github.io/mind-map/。 技术选型这种图形类的绘制一般有两种选择：sv...
- 如果以前问我ES5的继承和ES6的继承有什么区别，我一定会自信的说没有区别，不过是语法糖而已，充其量也就是写法有区别，但是现在我会假装思考一下，然后说虽然只是语法糖，但也是有点小区别的，那么具体有什么区别呢，不要走开，下文更精彩！本文会先回顾一下ES5的寄生组合式继承的实现，然后再看一下ES6的写法，最后根据Babel的编译结果来看一下到底有什么区别。 ES5：寄生组合式继承js有很多种继承... 如果以前问我ES5的继承和ES6的继承有什么区别，我一定会自信的说没有区别，不过是语法糖而已，充其量也就是写法有区别，但是现在我会假装思考一下，然后说虽然只是语法糖，但也是有点小区别的，那么具体有什么区别呢，不要走开，下文更精彩！本文会先回顾一下ES5的寄生组合式继承的实现，然后再看一下ES6的写法，最后根据Babel的编译结果来看一下到底有什么区别。 ES5：寄生组合式继承js有很多种继承...
- 我司的APP是一个典型的混合开发APP，内嵌的都是前端页面，前端页面要做到和原生的效果相似，就避免不了调用一些原生的方法，jsBridge就是js和原生通信的桥梁，本文不讲概念性的东西，而是通过分析一下我司项目中的jsBridge源码，来从前端角度大概了解一下它是怎么实现的。 js调用方式先来看一下，js是怎么来调用某个原生方法的，首先初始化的时候会调用window.WebViewJavas... 我司的APP是一个典型的混合开发APP，内嵌的都是前端页面，前端页面要做到和原生的效果相似，就避免不了调用一些原生的方法，jsBridge就是js和原生通信的桥梁，本文不讲概念性的东西，而是通过分析一下我司项目中的jsBridge源码，来从前端角度大概了解一下它是怎么实现的。 js调用方式先来看一下，js是怎么来调用某个原生方法的，首先初始化的时候会调用window.WebViewJavas...
- 背景笔者开源了一个小项目code-run，类似codepen的一个工具，其中代码编辑器使用的是微软的Monaco Editor，这个库是直接从VSCode的源码中生成的，只不过是做了一点修改让它支持在浏览器中运行，但是功能基本是和VSCode一样强大的，所以在笔者看来Monaco Editor等于VSCode的编辑器核心。另外笔者是一个颜控，不管做什么项目，都热衷于配套一些好看的皮肤、主题... 背景笔者开源了一个小项目code-run，类似codepen的一个工具，其中代码编辑器使用的是微软的Monaco Editor，这个库是直接从VSCode的源码中生成的，只不过是做了一点修改让它支持在浏览器中运行，但是功能基本是和VSCode一样强大的，所以在笔者看来Monaco Editor等于VSCode的编辑器核心。另外笔者是一个颜控，不管做什么项目，都热衷于配套一些好看的皮肤、主题...
- 笔者早期开发了一个导航网站，一直想要重构，因为懒拖了好几年，终于，在了解到微前端大法后下了决心，因为工作上一直没有机会实践，没办法，只能用自己的网站试试，思来想去，访问量最高的也就是这个破导航网站了，于是用最快的时间完成了基本功能的重构，然后准备通过微前端来扩展网站的功能，比如天气、待办、笔记、秒表计时等等，这些功能属于附加的功能，可能会越来越多，所以不能和导航本身强耦合在一起，需要做到能独... 笔者早期开发了一个导航网站，一直想要重构，因为懒拖了好几年，终于，在了解到微前端大法后下了决心，因为工作上一直没有机会实践，没办法，只能用自己的网站试试，思来想去，访问量最高的也就是这个破导航网站了，于是用最快的时间完成了基本功能的重构，然后准备通过微前端来扩展网站的功能，比如天气、待办、笔记、秒表计时等等，这些功能属于附加的功能，可能会越来越多，所以不能和导航本身强耦合在一起，需要做到能独...
上滑加载中
推荐直播
0.5
-
基于开源鸿蒙+海思星闪开发板：嵌入式系统开发实战（Day1）2025/03/29 周六 09:00-18:00
华为开发者布道师
本次为期两天的课程将深入讲解OpenHarmony操作系统及其与星闪技术的结合应用，涵盖WS63E星闪开发板的详细介绍、“OpenHarmony+星闪”的创新实践、实验环境搭建以及编写首个“Hello World”程序等内容，旨在帮助学员全面掌握相关技术并进行实际操作
回顾中 -
华为云软件开发生产线（CodeArts）1月&2月新特性解读2025/03/18 周二 19:00-20:00
阿星 华为云高级产品经理
不知道产品的最新特性？没法和产品团队建立直接的沟通？本期直播产品经理将为您解读华为云软件开发生产线1月&2月发布的新特性，并在直播过程中为您答疑解惑。
回顾中 -
基于能力图谱的openGauss项目闯关2025/03/20 周四 19:00-20:30
华为开发者布道师
想成为顶级数据库开发者吗？本次直播将从银行业务系统的数据库设计出发，带你逐步掌握openGauss的建库表、数据封装、密态技术、性能调优及AI应用。通过实战案例，全面展示openGauss的强大功能，助你提升技能，为未来的职业发展打下坚实基础。立即报名，开启你的数据库进阶之旅！
回顾中 -
基于开源鸿蒙+海思星闪开发板：嵌入式系统开发实战（Day1）
2025/03/29 周六 09:00-18:00
华为开发者布道师
本次为期两天的课程将深入讲解OpenHarmony操作系统及其与星闪技术的结合应用，涵盖WS63E星闪开发板的详细介绍、“OpenHarmony+星闪”的创新实践、实验环境搭建以及编写首个“Hello World”程序等内容，旨在帮助学员全面掌握相关技术并进行实际操作
回顾中 -
华为云软件开发生产线（CodeArts）1月&2月新特性解读
2025/03/18 周二 19:00-20:00
阿星 华为云高级产品经理
不知道产品的最新特性？没法和产品团队建立直接的沟通？本期直播产品经理将为您解读华为云软件开发生产线1月&2月发布的新特性，并在直播过程中为您答疑解惑。
回顾中
热门标签
