- 前言女朋友常逛的设计网站这两天页面上多了下雪的效果，于是问我我的网站能下雪吗，作为一个程序员我一般会说实现不了，但是作为男朋友，不能说不行。 雪雪我们可以使用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的编辑器核心。另外笔者是一个颜控，不管做什么项目，都热衷于配套一些好看的皮肤、主题...
- 笔者早期开发了一个导航网站，一直想要重构，因为懒拖了好几年，终于，在了解到微前端大法后下了决心，因为工作上一直没有机会实践，没办法，只能用自己的网站试试，思来想去，访问量最高的也就是这个破导航网站了，于是用最快的时间完成了基本功能的重构，然后准备通过微前端来扩展网站的功能，比如天气、待办、笔记、秒表计时等等，这些功能属于附加的功能，可能会越来越多，所以不能和导航本身强耦合在一起，需要做到能独... 笔者早期开发了一个导航网站，一直想要重构，因为懒拖了好几年，终于，在了解到微前端大法后下了决心，因为工作上一直没有机会实践，没办法，只能用自己的网站试试，思来想去，访问量最高的也就是这个破导航网站了，于是用最快的时间完成了基本功能的重构，然后准备通过微前端来扩展网站的功能，比如天气、待办、笔记、秒表计时等等，这些功能属于附加的功能，可能会越来越多，所以不能和导航本身强耦合在一起，需要做到能独...
- 通过Vue CLI可以方便的创建一个Vue项目，但是对于实际项目来说还是不够的，所以一般都会根据业务的情况来在其基础上添加一些共性能力，减少创建新项目时的一些重复操作，本着学习和分享的目的，本文会介绍一下我们Vue项目的前端架构设计，当然，有些地方可能不是最好的方式，毕竟大家的业务不尽相同，适合你的就是最好的。除了介绍基本的架构设计，本文还会介绍如何开发一个Vue CLI插件和preset预... 通过Vue CLI可以方便的创建一个Vue项目，但是对于实际项目来说还是不够的，所以一般都会根据业务的情况来在其基础上添加一些共性能力，减少创建新项目时的一些重复操作，本着学习和分享的目的，本文会介绍一下我们Vue项目的前端架构设计，当然，有些地方可能不是最好的方式，毕竟大家的业务不尽相同，适合你的就是最好的。除了介绍基本的架构设计，本文还会介绍如何开发一个Vue CLI插件和preset预...
- 笔者不久前翻译了一篇介绍树布局算法的文章【译】绘制一棵漂亮的树，但是那篇文章对于算法只是大致介绍了实现的思路，属于启发式文章，虽然有完整的代码，但是要理解起来还是有一定难度，并且要基于该算法实现思维导图也需要进行一定修改，所以本文会通过图解的方式一步步的分解该算法，并最终实现一个思维导图布局。阅读本文前推荐先阅读一下译文，方便理解文中提到的一些概念。 算法图解节点类如下，请务必仔细看一下ri... 笔者不久前翻译了一篇介绍树布局算法的文章【译】绘制一棵漂亮的树，但是那篇文章对于算法只是大致介绍了实现的思路，属于启发式文章，虽然有完整的代码，但是要理解起来还是有一定难度，并且要基于该算法实现思维导图也需要进行一定修改，所以本文会通过图解的方式一步步的分解该算法，并最终实现一个思维导图布局。阅读本文前推荐先阅读一下译文，方便理解文中提到的一些概念。 算法图解节点类如下，请务必仔细看一下ri...
- 场景复现笔者最近给自己的项目CodeRun增加了一个直接在浏览器上使用ES模块的功能，之前使用一个包前需要先找到它的在线CDN地址然后引进来，就像这样：现在可以直接这样：那么这是怎么实现的呢，很简单，使用Skypack，上图中的导入语句实际上最终会变成这样：import rough from 'https://cdn.skypack.dev/roughjs'这个转换是通过babel实现的，... 场景复现笔者最近给自己的项目CodeRun增加了一个直接在浏览器上使用ES模块的功能，之前使用一个包前需要先找到它的在线CDN地址然后引进来，就像这样：现在可以直接这样：那么这是怎么实现的呢，很简单，使用Skypack，上图中的导入语句实际上最终会变成这样：import rough from 'https://cdn.skypack.dev/roughjs'这个转换是通过babel实现的，...
- 前言笔者最近闲来无事给自己做了一个在线文档平台，支持白板、思维导图、文档、电子表格、PPT、流程图、Markdown等，界面是这样的：其实现在市面上有很多这种在线文档平台，笔者为什么要自己做一个呢，且听笔者短话长说。最开始笔者只是想在开源白板项目excalidraw的基础上增加云端存储的功能，因为它的云端保存版是要收费的，况且加个数据库的增删改查也不是什么难事，做完以后想到自己做了一个开源... 前言笔者最近闲来无事给自己做了一个在线文档平台，支持白板、思维导图、文档、电子表格、PPT、流程图、Markdown等，界面是这样的：其实现在市面上有很多这种在线文档平台，笔者为什么要自己做一个呢，且听笔者短话长说。最开始笔者只是想在开源白板项目excalidraw的基础上增加云端存储的功能，因为它的云端保存版是要收费的，况且加个数据库的增删改查也不是什么难事，做完以后想到自己做了一个开源...
- 《代码安全 第三篇》 《代码安全 第三篇》
上滑加载中
推荐直播
-
GaussDB管理平台TPOPS，DBA高效运维的一站式解决方案2024/12/24 周二 16:30-18:00
Leo 华为云数据库DTSE技术布道师
数据库的复杂运维，是否让你感到头疼不已？今天，华为云GaussDB管理平台将彻底来改观！本期直播，我们将深入探索GaussDB管理平台的TPOPS功能，带你感受一键式部署安装的便捷，和智能化运维管理的高效，让复杂的运维、管理变得简单，让简单变得可靠。
回顾中 -
DTT年度收官盛典：华为开发者空间大咖汇，共探云端开发创新2025/01/08 周三 16:30-18:00
Yawei 华为云开发工具和效率首席专家 Edwin 华为开发者空间产品总监
数字化转型进程持续加速，驱动着技术革新发展，华为开发者空间如何巧妙整合鸿蒙、昇腾、鲲鹏等核心资源，打破平台间的壁垒，实现跨平台协同？在科技迅猛发展的今天，开发者们如何迅速把握机遇，实现高效、创新的技术突破？DTT 年度收官盛典，将与大家共同探索华为开发者空间的创新奥秘。
回顾中
热门标签