原副标题：两栖作战 | 如前所述Vue词汇的虚拟化后端合作开发构架Hui的应用领域科学研究
文 / 招商银行呼和浩特支行信息科学技术部 满师
随著后端技术的迅速发展，合作开发商业模式也在不断重构。早期的Web页面由服务端生成，插件负责展现出，其间端高度谐振，引致销售业务方法论与展现出方法论杂乱在一同，标识符可移植性差。Ajax（Asynchronous JavaScript And Xml，异步JavaScript和Xml）可视化式页面应用领域合作开发技术的再次出现给后端合作开发带来巨大的革新，其间端透过AjaxUSB展开可视化，社会分工更为明晰，这样的合作开发商业模式开始被广泛认可。但随著后端同时实现的功能越来越复杂，jQuery（JavaScript的构架）展开合作开发会使销售业务方法论、可视化方法论和UI结构设计杂乱在一同，引致标识符难以F83E43Se和维护，使后端合作开发技术难度加大。
为降低后端合作开发维数，MVVM(Model-View-ViewModel，数学模型-快照-快照数学模型)的构架商业模式不断涌现。MVVM构架商业模式将View和Model的并行方法论智能化，同时实现了单向的统计数据存取。如前所述Vue词汇的Hui构架就是如前所述这种商业模式，其间端职能划分明晰，后端须要的统计数据只需请求后端USB即可，同时实现了其间端更好的分立，有效地控制后端合作开发的维数，提升了工程项目的可移植性。MVVM构架商业模式其间端分立构架图如图1所示。
图1 MVVM构架商业模式其间端分立构架图
后端合作开发构架Hui构架中对适用性组件展开软件系统，提供更多详细的其间端可视化结构设计，合作开发人员能在构架的基础上展开工程项目构筑。事实证明该构架有较高的应用领域价值，能有效提升后端合作开发工作效率，减少后端技师的工作效率。
统计数据积极响应更为速
在以往的Web工程项目中，将统计数据在快照中展现，如果须要修改快照和统计数据的统一，只须要关注统计数据Data的变化。Hui构架的核心就是一个加速积极响应的统计数据存取系统，在建立存取之后，快照中的DOM将和Vue对象中的统计数据Data保持并行，标识符变得更为简约，更易理解。
构架应用组件化
如前所述Vue的Hui构架组件化的再次出现提供更多了一种捷伊观念方式，组件是Vue的一个中心思想，合作开发人员透过可宠信的组件来构筑大规模应用领域程序。利用组件化的特点，任何人PCB的标识符都能注册登记为条码，大大增加了重复合作开发，提升了合作开发工作效率和标识符宠信性。几乎任何人类型的应用领域可执行程序都能抽象化为组件树，组件树能由独立的可宠信组件组成。
常用功能插件化
Vue只提供更多了统计数据和快照存取以及组件化功能。如果合作开发人员用它来合作开发一个完整的应用领域程序，还须要使用一些其他功能Vue插件。Hui构架包含比较常用的插件有Vue-router、Axios和Vuex等。这三个插件能分别提供更多路由管理、异步通信和状态管理的功能。
1.Vue-router路由管理
Vue-router是给Vue提供更多路由管理的插件，透过路由的改变能动态加载组件，达到合作开发单页面程序的目的。以往，页面之间的跳转是由后端MVC中的控制层控制，透过超级链接向服务器发送请求模板，在插件端完成HTML的渲染，这有助于分立后端和后端，后端不依赖后端方法论，只须要后端提供更多统计数据USB。
2.Axios异步通信
单页面应用领域合作开发过程中，通常和后端会使用异步USB展开统计数据可视化。通常合作开发人员使用jQuery的Ajax方法来做异步请求。因为 Vue的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就须要额外使用一个通信构架与服务器可视化。Vue2.0版本之后，官方推荐使用Axios来同时实现Ajax请求，Axios是一个开源的，用在插件端和NodeJS的异步通信构架，同时实现后端与后端展开统计数据资源可视化。Vue整合Axios时，合作开发人员须要在页面中展现统计数据列表，因此须要在Vue生命周期函数
3.Vuex状态管理
利用Vue展开组件化工程项目合作开发时，经常须要将当前组件的状态传递给其他组件。一种方式是父子组件之间展开通信，当父组件传递统计数据给子组件时，通常会采用Props的方式同时实现统计数据传递。当子组件传递统计数据给父组件时，须要使用自定义事件来同时实现统计数据传递。父组件能像处理原生DOM事件一样透过v-on监听子组件实例的自定义事件，而子组件能透过调用内建的“emit()”方法并传入事件名称来触发自定义事件。另一种方式是非父子组件之间通信，如在一些大型工程项目应用领域程序中，单页面可能包含大量组件，并且统计数据结构非常复杂。当通信双方不是父子组件甚至没有任何人联系时，与多个组件共享一个状态将会非常麻烦，透过Vuex能够很好的解决上述状态管理问题。
一般情况下，每个组件都有自己的状态。有时其他组件的状态会须要随著某个组件的状态变化而变化。这时能使用Vuex保存要管理的状态值，修改该状态值后，所有引用该值的组件都将自动更新。
单页Web应用领域更简单
编写组件时，合作开发人员通常将组件的HTML、JavaScript、CSS放在三个不同的文件中，然后使用编译工具将这三个部分软件系统在一同，这种操作不利于后续标识符的维护。透过Webpack和Loader能将这些烦琐的操作简单化。合作开发人员以单文件组件的形式将一个组件的HTML、JavaScript、CSS应用领域各自的条码写在vue文件中。Webpack和Loader会将Vue文件中组件的三部分标识符分别编译成可执行的标识符。
1.Webpack打包工具
Webpack是一个开源的后端资源加载和打包工具。它能将各种资源(如JS、CSS样式、图片)等作为组件，然后根据一定的规则对这些组件展开打包，生成相应的静态资源。
2.Loader加载程序
Loader是基于Webpack的加载程序。Webpack本身只能处理JavaScript组件，如果要处理其他类型的组件，则须要使用Loader展开转换。如果想要在应用领域中添加CSS文件，就须要使用css-loader和style-loader加载器。css-loader加载器用于加载CSS文件，而style-loader加载器会将原来的CSS标识符插人页面中的一个style条码中。如果想要在应用领域中加载图片文件，就需要使用file-loader加载器。
多组件且各组件独立打包
由于所有子系统的标识符位于同一个工程（工程项目），共享公用的组件和资源相对容易，但编译、运行、打包，要有所区分才好，否则编译耗时，更新部署也不合理。一个子系统修改，其他子系统也被迫发布和更新，可能会带来意想不到的问题。就算是每个子系统独立部署，但部署的其实都是完整的工程项目，可能又有并行的问题。这就产生了多系统共享合作开发和独立打包的需求。Hui构架工程项目由一个主程序和若干个子系统构成。主程序标识符放置于外层，提供更多共享组件和功能。而子系统各自独立，仅包含私有标识符。运行时，既能整个工程项目软件系统运行，也能单个子系统运行，既能整体打包，也能单个子系统独立打包。
如前所述Vue的Hui构架的Web合作开发优势非常明显，利用其展开工程项目合作开发，能有效简化Web后端合作开发流程，提升合作开发工作效率，降低维护成本。通常情况下，合作开发人员在后端和后端分立的工程项目中使用Hui构架最合适，能够最大程度发挥Vue的优势和特性，能大大提升合作开发人员合作开发工作效率和标识符宠信率。
如何更好地将后端构架技术应用领域于软件工程项目的合作开发，以缩短软件工程项目合作开发的周期，确保软件工程项目的可靠性、可移植性以及可扩展性，须要合作开发人员持续不断的科学研究和探索。
