传送门
渐进式重构（一）——思路
前言
旧项目主要指的是大量使用jquery操作节点为方法主要构成的项目。这些项目如果继续用原有代码使用jquery，必然会造成日后越来越难维护的问题。Vue“渐进式”重构则是解决这种问题的办法，由于Vue可以直接在原生js环境下使用，所以我们可以此去对旧项目做需求的迭代。在迭代的过程中，新增的功能，或者原有功能的修改，我们使用Vue的做法去实现，这样项目内的jq代码占比会渐渐减少，Vue渐渐增多，解决了重构和需求迭代同时进行所带来的苦恼。
基本原则
当前维护的项目大部分以Jquery搭建，考虑项目的开发效率，日后重构的便利性，和组件库生态的互通。需要尽量使用Vue去维护旧项目。
一、新需求，新页面（弹窗）
通过在旧项目使用iframe，把Vue项目链接嵌入。其中JQ页面和Vue页面iframe之间通讯规范：
JQ页：在window下挂载对象，命名以"props_"开头 + vue页面命名
parent.html(JQ):
window.props_son = {
form: {
input: '',
select: ''
},
successCallback: () => {
},
errorCallback: () => {
}
}
son.vue(Vue):
<template>
<div>
<input v-model="props.form.input" />
<select v-model="props.form.select"></select>
</div>
<tamplate>
export default {
data() {
return {
props: window.parent.props_son
}
},
methods: {
success() {
this.props.successCallback();
},
error() {
this.props.errorCallback();
}
}
}
二、新需求，旧页面
旧页面使用Jquery和Vue共存的方式，处理新的需求迭代，但并非都适合，面对需求，建议从三个方向考虑：
- Vue实例代码和旧页面js解耦，不在同一份js中同时使用Vue和Jquery
- 在旧页面中使用Vue，不会加重原有代码的维护难度，不会影响开发效率
- 增加的Vue代码部分，日后重构能大部分直接复用
如果满足这三个要求，才可以使用Vue。如不满足建议采用原有方式实现
JQ和Vue共存规范：
- 原有html中新建一个节点用于挂载vue实例。
- 原有js的目录下新建components目录，用于存放组件代码。
- 挂载节点，组件文件，命名均以'vue_' + 组件名称
- vue相关资源，所有项目使用同一CDN链接，以减少jq和Vue同时加载所带来的负担
例子：
login.html:
<!-- vue的挂载节点 -->
<body>
<div class="jquery-part">
<input />
</div>
<div id="vue_demo"></div>
<button class="submit-btn">提交</button>
<script src="/vue.js"></script>
<script src="jquery.js"></script>
<script src="login.js"></script>
</body>
pages/login.js:
import vue_demo from './components/vue_demo.js';
const vue_demo = vue_demo({
el: '#vue_demo',
data: {
util: this.util
}
});
function submit() {
const vueFormData = vue_demo.formData;
const jqFormData = $('.jquery-part input').val();
// ...
}
$('.submit-btn').on('click', submit);
/pages/components/vue_demo.js:
export default function({
el,
data
}) {
return new Vue({
el,
data() {
return Object.assign({
formData: {}
}, data)
},
template: `<div></div>`
})
}
传送门
渐进式重构（一）——思路
前言
旧项目主要指的是大量使用jquery操作节点为方法主要构成的项目。这些项目如果继续用原有代码使用jquery，必然会造成日后越来越难维护的问题。Vue“渐进式”重构则是解决这种问题的办法，由于Vue可以直接在原生js环境下使用，所以我们可以此去对旧项目做需求的迭代。在迭代的过程中，新增的功能，或者原有功能的修改，我们使用Vue的做法去实现，这样项目内的jq代码占比会渐渐减少，Vue渐渐增多，解决了重构和需求迭代同时进行所带来的苦恼。
基本原则
当前维护的项目大部分以Jquery搭建，考虑项目的开发效率，日后重构的便利性，和组件库生态的互通。需要尽量使用Vue去维护旧项目。
一、新需求，新页面（弹窗）
通过在旧项目使用iframe，把Vue项目链接嵌入。其中JQ页面和Vue页面iframe之间通讯规范：
JQ页：在window下挂载对象，命名以"props_"开头 + vue页面命名
parent.html(JQ):
son.vue(Vue):
二、新需求，旧页面
旧页面使用Jquery和Vue共存的方式，处理新的需求迭代，但并非都适合，面对需求，建议从三个方向考虑：
如果满足这三个要求，才可以使用Vue。如不满足建议采用原有方式实现
JQ和Vue共存规范：
例子：
login.html:
pages/login.js:
/pages/components/vue_demo.js: