写了一个vueswitch组件件,基于vuex,看看这样思路对么

Flux是一种前端状态管理架构思想,专门解决软件的结构问题。
基于Flux的设计思想,出现了一批前端状态管理框架。
他们给出了一些库用于实现Flux的思想,并在Flux的基础上做了一些改进。
在这些框架里,当前最热门的莫过于Redux和Vuex了。


Flux数据流的顺序是:

  • 新增state角色,代表每个时间点store对应的值,对状态的管理更加明确

Redux数据流的顺序是:

}

ByteBuf对ByteBuffer做了大量的优化,比如说内存池,零拷贝,引用计数(不依赖GC),本文主要是分析这些优化,学习这些优化思想,学以致用,在实际工程中,借鉴这些优化方案和思想。

首先先讲一下这里面需要用的基础知识,在JVM中 内存可分为两大块,一个是堆内存,一个是直接内存。这里简单介绍一下

堆内存是Jvm所管理的内存,相比方法区,栈内存,堆内存是最大的一块。所有的对象实例实例以及数组都要在堆上分配。

Java的垃圾收集器是可以在堆上回收垃圾。

JVM使用Native函数在堆外分配内存,之后通过 堆中的DirectByteBuffer对象作为这块内存的引用进行操作。直接内存不会受到Java堆的限制,只受本机内存影响。

Java的GC只会在老年区满了触发Full GC时,才会去顺便清理直接内存的废弃对象。

在NIO中,所有数据都是用缓冲区处理的。读写数据,都是在缓冲区中进行的。缓存区实质是是一个数组,通常使用字节缓冲区——ByteBuffer。

ByteBuffer可以申请两种方式的内存,分别为堆内存和直接内存,首先看申请堆内存。

ByteBuffer HeapbyteBuffer = ty在不同的内存泄漏检测级别情况下,采样概率是不一样的,在Simple情况下出现了Leak,要设置“-ty中的内存泄露检测是通过对ByteBuf对象进行装饰,利用虚引用和引用计数来对非池中的直接内存和内存池中内存进行跟踪,判断是否发生内存泄露。

即包装出来的ByteBuf和byte[]数组指向了同一个存储空间。因为值引用,所以bytes修改也会影响 byteBuf 的值。

本文很长很长,博主陆陆续续写了有一个月的时间。但是只是窥探Netty内存池中的冰山一角,更多是要在实际项目中进行验证才能起到效果。

}

开发之前先看看官网的 

我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入,就像这样:

开发组件的文件结构如下,参考了一下  不过我们这个是简易版,仅供分享和自己使用

好了,到这里准备工作做好了,我们可以开始开发组件了,接着上面的例子,下面开始开发一个 switch 组件。

这个文件是组件源码,我这里就不放源码了,这里就说一下我个人认为最重要的点吧,这也是封装表单类组件最为重要的点:

这个文件没什么好说的就是将该组件作为 Vue 插件,代码就三行这里就放在这吧:

好了基本完成了,但是为了将所有的组件集中起来比如我还有 select、 input、 button 等组件,那么我想要统一将他们放在一个文件这中便于管理

所以在 App.vue 同级目录我新建了一个 index.js 文件,内容也没啥好说的看看就懂了:

好了到这里我们的组件就开发完成了;下面开始说怎么打包发布到 npm 上

发布命令其实就是两句话

完成之后我们就可以在项目中安装使用了

写的比较简单,主要还是提供思路。用习惯了开源的组件自己总得了解一下嘛,有的时候在开发的过程中我们找不到合适的开源组件就需要自己开发了,这个时候我们把自己写的一些精致的小插件开源出来挺好的...

哦,对了README,不想写了...哈哈

}

我要回帖

更多关于 vueswitch组件 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信