wg_oEhiEEGG的博客_前端

插件化架构设计(3):前端可视化化平台插件架构-grafana实践

插件实践方案其实插件你就把它当一个组件来用就好。用起来就是异步组件加载。vue异步组件加载，看官方文档:https://cn.vuejs.org/v2/guide/components-dynamic-async.htmlreact异步组件加载，其实更好办：在Suspense里面渲染异步组件或者是通过state 渲染出加载的虚拟组件vue异步组件加载<template> &

加载

异步加载

Vue

插件化架构设计

原创 2023-03-18 16:37:00 381 阅读

storybook插件说明： integrations与addons推荐

一般安装完，官方默认给配了actions,插件和links插件，本篇文章把story的插件介绍一下。

storybook

原创 2023-03-18 12:32:30 145 阅读

target.closest妙用：UI(click/mousemove/drag/drop)事件元素查找捷径

首先看下MDN：https://developer.mozilla.org/en-US/docs/Web/API/Element/closest在jQuery时代，这个非常常见$( document ).bind("click", function( e ) { $( e.target ).closest("li").toggleClass("hilight");});closest

html

事件源

Web

原创 2023-03-18 12:21:28 138 阅读

vue2升级vue3: TSX Vue 3 Composition API Refs

v-for 中的 Ref 数组在tsx如何获取？this $refs gridlayout $children[index]; 在tsx 实现的解决方案

tsx

jsx

Ref

refs

原创精选 2022-07-30 23:14:52 340 阅读 yyds干货盘点

vue2升级vue3:单文件组件概述及 defineExpos/expose

像我这种react门徒被迫迁移到vue的，用管了TSX，地vue 单文件组件也不太感冒，但是vue3 单文件组件，造了蛮多api ，还不得去了解下https://v3.cn.vuejs.org/api/sfc-script-setup.html#单文件组件-script-setupdefineProps、defineEmits没有什么好说的，就是setup中定义 props 与 emits

html

显式

赋值

原创 2022-07-25 23:46:15 309 阅读 yyds干货盘点

vue2升级vue3: h、createVNode、render、createApp使用

h 函数本质就是 createElement() ，h函数其实是createVNode的语法糖，返回的就是一个Js普通对象。在createVNode API 在创建Vnode的时候，会对Vnode的props、children、ref、class、style等属性进行规范梳理或者合并。

原创 2022-07-25 23:33:51 4768 阅读 yyds干货盘点

vue2升级vue3：Vue Demij打通vue2与vue3壁垒，构建通用组件

如果你vue2的代码不是使用类组件（大部分应该都是vue-class-component vue-tsx-support ，官方停摆了，再次diss vue），而是使用@vue composition-api，那么用上Vue Demi 吧。

vue demij

vue2与vue3兼容

原创 2022-07-25 23:28:00 430 阅读 yyds干货盘点

vue2升级vue3：vue3 hooks库选用

vue，还是选择vue-use好点。VueUse 是一个基于 Composition API 的实用函数集, 与 Composition API 的配合相得益彰。可以省下很多事。

hooks

vueuse

ahooks

原创 2022-07-25 23:17:27 520 阅读 yyds干货盘点

vue2升级vue3：Vue Router报错，directly inside <transition> or <keep-a

vue2带缓存的路由重构为 vue3 + tsx，keep-alive 不生效，而且警告

router

tsx

jsx

原创 2022-07-25 23:11:44 346 阅读 yyds干货盘点

vue2升级vue3：vue3创建全局属性和方法

vue2 x挂载全局是使用Vue prototype $xxxx=xxx的形式来挂载，在vue3 x这种方法显然是不行了，vue3中在setup里面我们都获取不到this，官方提供了globalProperties

全局变量

html

原创 2022-07-25 23:09:32 529 阅读 yyds干货盘点

vue2升级vue3：composition api中监听路由参数改变

vue3 composition api 监听路由变化：onBeforeRouteUpdate、router.afterEach、 watch( () => route.params,()=>{})

ide

html

回调函数

原创 2022-07-25 23:00:00 1502 阅读 yyds干货盘点

自己搭建git服务器：linux自己Gitlab服务

github只能保存开源项目，私有项目要收费。公司的git不想上传个人项目，比如我的博客： https: www zhoulujun cn 、https: www zhouluju

git

gitlab

git私有仓库

git部署

原创 2022-07-12 09:55:19 377 阅读

新一代构建工具(1)：对比rollup/parcel/esbuild—esbuild脱颖而出

webpack无疑是现在使用最多的构建工具，但也是踩着grunt gulp fis上位的。新一代诸侯中rollup parcel esbuild，简要概括下他们的优缺点。

bundle

webpack

esbuild

parcel

rollup

原创精选 2022-06-25 18:39:49 850 阅读 yyds干货盘点

web内容如何保护：如何有效地保护 HTML5 格式的视频内容?

（Digital Rights Management）通过对数字内容进行加密和附件使用规则，对数字内容进行保护。提供了widevine、fairPlay、playReady等国际通用的保护机制。

DRM

数字版权保护

视频版权保护

视频防盗版方案

原创 2022-06-25 17:08:55 440 阅读

TML转义字符：xss攻击与HTML字符的转义和反转义

HTML常用转义字符对照表：最常用的字符实体 Character Entities、ISO 8859-1 (Latin-1)字符集、数学和希腊字母标志、重要的国际标记、JavaScript转义符、富文本通用转义字符、HTML特殊转义字符对照表

html

转义

转义字符

反转义

原创 2022-06-25 16:46:23 1966 阅读 yyds干货盘点

vue2升级vue3：webpack vue-loader 打包配置

虽然vite 很香，但是vite rollup 动态加载，多页面等问题比较难搞。webpack vue3需要升级的npm 包有：vue-loader vue-template-compiler "

html

css

vue-loader

webpack

vite

原创 2022-06-21 20:51:56 592 阅读 yyds干货盘点

vue2升级vue3：this.$createElement is not a function—动态组件升级

vue2 动态组件加载，this $createElement非常好使！return this $createElement(chartPanel, {props:{}})，但是到vue3如何操作呢？

json

html

原创 2022-06-21 20:47:14 2805 阅读 yyds干货盘点

vue2升级vue3：class component的遗憾

the Class API proposal is being dropped。之前class components组件升级vue3，还是用composite api重头再来^

@Options

@Component

class component

原创 2022-06-21 20:42:45 646 阅读 yyds干货盘点

vue2升级vue3：TypeScript下vuex-module-decorators/vuex-class to vuex4.x

因为vue2 下vue-property-decorator +vue-tsx-support +vuex-module-decorators vuex-class ，class components 用的爽的也

html

typescript

vuex

vuex-module-decorato

原创 2022-06-21 20:36:26 300 阅读

vue2升级vue3： Event Bus 替代方案

Vue3 removed $on, $off and $once methods from the instance completely $emit is still a part of the existing API as it s used to trigger event handlers declaratively attached by a parent component

html

Event Bus

原创 2022-06-21 20:30:58 785 阅读 yyds干货盘点

vue2升级vue3：全局变量挂载与类型声明

使用 ts 的情况下，挂载完全局变量后，在 vue 文件中，通过 this 对象出来不来提示的。

全局变量

jquery

文件名

原创 2022-06-21 20:22:48 441 阅读

vue2升级vue3：vue2 vue-i18n 升级到vue3搭配VueI18n v9

项目从vue2 升级vue3，VueI18n需要做适当的调整。主要是Vue I18n v8 x 到Vue I18n v9 or later 的变化，其中初始化：具体可以参看

json

html

vue-i18n

i18n

国际化

原创 2022-06-21 20:18:51 244 阅读 yyds干货盘点

vue2升级vue3：Vue2/3插槽——vue3的jsx组件插槽slot怎么处理

Vue3（其实从2 6开始）中引入了一个新的指令v-slot，用来表示具名插槽和默认插槽，可以在slot容器上使用v-slot来表示一个传入组件的插槽，通过指令参数来表示插槽的名称。 vue template中的slot插槽如何在JSX中实现呢？

插槽

作用域

数据

原创 2022-06-21 19:58:54 618 阅读

Vuex在TSX中的改造方案：TS改造Vue2项目Vuex如何处置？

vue2与vuex都无法无缝融入TS生态，所以需要vuex-class、vuex-module-decorators等库做对接

typescript

vuex

vuex-class

vuex-module-decorato

tsx

原创 2022-03-27 19:39:15 428 阅读

KCP协议：从TCP到UDP家族QUIC/KCP/ENET

KCP是一个快速可靠协议，能以比 TCP浪费10%-20%的带宽的代价，换取平均延迟降低 30%-40%，且最大延迟降低三倍的传输效果。TCP为了实现网络通信的可靠性，使用了复杂的拥塞控制算法，建立了繁琐的握手过程以及重传策略。

KCP

TCP

quick

网络加速

游戏加速

原创 2022-03-27 18:32:42 643 阅读 yyds干货盘点

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

周陆军的的博客

插件化架构设计(3):前端可视化化平台插件架构-grafana实践

storybook插件说明： integrations与addons推荐

target.closest妙用：UI(click/mousemove/drag/drop)事件元素查找捷径

vue2升级vue3: TSX Vue 3 Composition API Refs

vue2升级vue3:单文件组件概述及 defineExpos/expose

vue2升级vue3: h、createVNode、render、createApp使用

vue2升级vue3：Vue Demij打通vue2与vue3壁垒，构建通用组件

vue2升级vue3：vue3 hooks库选用

vue2升级vue3：Vue Router报错，directly inside <transition> or <keep-a

vue2升级vue3：vue3创建全局属性和方法

vue2升级vue3：composition api中监听路由参数改变

自己搭建git服务器：linux自己Gitlab服务

新一代构建工具(1)：对比rollup/parcel/esbuild—esbuild脱颖而出

web内容如何保护：如何有效地保护 HTML5 格式的视频内容?

TML转义字符：xss攻击与HTML字符的转义和反转义

vue2升级vue3：webpack vue-loader 打包配置

vue2升级vue3：this.$createElement is not a function—动态组件升级

vue2升级vue3：class component的遗憾

vue2升级vue3：TypeScript下vuex-module-decorators/vuex-class to vuex4.x

vue2升级vue3： Event Bus 替代方案

vue2升级vue3：全局变量挂载与类型声明

vue2升级vue3：vue2 vue-i18n 升级到vue3搭配VueI18n v9

vue2升级vue3：Vue2/3插槽——vue3的jsx组件插槽slot怎么处理

Vuex在TSX中的改造方案：TS改造Vue2项目Vuex如何处置？

KCP协议：从TCP到UDP家族QUIC/KCP/ENET