官网

Github

Bit makes it easy to share and manage components between projects and apps at any scale.
It lets you isolate components from existing projects with 0 refactoring, with fully-automated dependancy definition/resolution and scalable versioning.
It lets you reuse individual components across projects, using your favorite package managers like npm and yarn through Bit’s component hub.
It lets you extend Git’s workflow to develop components from any consuming project , suggest updates and easily sync changes across your codebase.

最近在做一个中台框架的设计开发，在做了主框架的基础能力后，思考在框架落实真实业务需求过程中，需要对主框架功能有非常多的定制化内容存在。如果在主体框架中做了哪怕一点业务改动，都可能会对后面的拓展性及灵活性有所限制。

所以为了让主体框架做的更加灵活、扩展性更搞，在主框架有了基础能力后，就不再对主框架做任何非主框架能力的业务功能开发。

要为主框架不断的”开槽”

为了解决用户使用过程中的体验问题，我们团队进行了走访用户调研，在调研过程中发现：在一些配置较差的机器上存在拖动模型异常卡顿的情况。

从以上的交互动图中可以观察发现，在已经实现的功能中，家具拖动过程中包含有几种交互：

我最近主要在定位、解决当前项目中的一些性能相关问题。

在反馈的问题中，比较严重的问题之一是在户型预览编辑过程，电脑的 CPU 占用率高，及时什么都不做的情况下，CPU 占用也非常的高。

同样的，利用 Chrome 提供的 Performance 录制 ⏺ 了无任何操作的 JavaScript 调用火焰图，发现 Pixi 内部会利用浏览器的requestAnimationFrame接口，执行自身的 render 方法进行 2D 场景的绘制渲染。

随着图满意项目的不断迭代，功能的不断叠加，时不时会有一些用户反馈卡顿，甚至页面崩溃的情况出现。

为了解决和定位问题，我们特意做了用户调研，以及尝试做一些性能监控捕获异常。在调研过程中，我们发现在用户配置较低的电脑上对于 2D 下的一些缩放事件会出现明显的卡顿现象，帧率大概下降到 20fps。

在 2D 界面中，有一个背景网格一直在页面中显示。它的交互要求是：不论界面如何缩放，网格的线段粗细始终保持不变，否则将会出现非常不好看的粗线条以及细线条等。

在 Tumax 项目中，作为编辑器存在非常多的“视图交互”，其中关于显隐就是一块状态复杂、由多重因素影响的交互重灾区。

随着项目的不断迭代，业务需求的不断增多，隐藏的交互事件也逐渐增多（墙体隐藏，吊顶隐藏，地面模型隐藏，硬装下隐藏，选择房间后隐藏，挂墙、门窗跟随隐藏，不同路由显隐不同），这么多显隐逻辑混在一起，逐渐发现我们以前原有的显隐逻辑变得异常混乱。

设计模式，这一话题一直都是程序员谈论的”高端”话题之一。许多程序员从设计模式中学到了设计软件的灵感和解决方案。

有人认为设计模式只在 C++或者 Java 中有用武之地，JavaScript 这种动态语言根本就没有设计模式一说。

那么，什么是设计模式？

Vmo 是一个用于前端的数据模型。解决前端接口访问混乱，服务端数据请求方式不统一，数据返回结果不一致的微型框架。

Vmo 主要用于处理数据请求，数据模型管理。可配合当前主流前端框架进行数据模型管理 Vue,React,Angular。

能够有效处理以下问题：

相信很多  同事在刚刚接触图满意项目时，对项目中的数据流向和数据解析过程都很模糊， 不清楚数据到底是如何从一份 JSON 数据变为我们使用的数据对象。

这篇文章将会为你  介绍图满意项目中，数据的解析还原及数据流向，为你揭开这一神秘面纱。

通过这篇文章，你将会明白数据是如何通过接口返回的 JSON 一步步变为我们可以拿来使用的 Model，同时我会介绍为什么需要这样处理，如果不这样处理带来的  弊端是什么。

使用 Vuex 更贴合 Vue 项目，Vuex 支持响应 Vue 内部的响应事件，比如：当某状态改变时 Vue 会同时触发改变 computed,render 等。

但缺点是在其他库中缺无法观察响应 Vuex 中的变化，比如：当 Vuex 中的一个状态值改变，需要对应的触发响应到 ThreeJS 和 PIXI 中去改变摄像机的位置，则需要在某个在生命周期范围内的组件去处理响应事件，并通知到 ThreeJS 和 PIXI 中去改变响应数据。这样整个过程就变得十分麻烦。