用前端框架Vue.js构建大规模应用的分析

真正的模块化

前端模块化起步很早。无论是require.js的模块化打包、browserify还是Angular的依赖注入，我们都可以将js代码划分成小模块，进行组装。然后我们将CSS文件拆分成小模块通过less或者sass进行编写，甚至我们感受到了CSS代码中的封装、继承、多态等面向对象的特性。

然而，在webpack问世之前，我们所说的模块化根本不能算作模块化。为什么这么说，因为我们有一个重要的问题没有解决，那就是JS模块依赖CSS模块。

比如我们有一个JS模块模态，可以直接导入并调用它弹出对话框吗？如下图所示可以吗？

理论上应该是这样的，但实际上这个模态还是依赖于一个对应的CSS模块modal.less如果不导入这个模块，就无法弹出一个正常的对话框。而且导入的CSS模块是写在另一个CSS文件中，而不是导入的JS模块。也就是说，实际上，依赖关系是这样的：

为了使用一个模块，我们需要分别在两个文件中进行导入操作。这其实是一件非常奇怪和不合理的事情！为什么我们需要模块化？就是封装一个模块，导入后可以使用，它是如何实现的，有什么依赖关系，完全由模块自己处理，也就是上图中对modal.css的依赖应该由modal.js自己处理。但是，我们在N年的前端一直在写模块，并不是因为他是对的，而是因为我们习惯了这种错误的方式。现在，有了Vue，我们可以完全封装一个模块的所有依赖关系，无论是模板、CSS还是JS，我们都不需要再关心了，只需要引入这个模块来使用就可以了，模块的依赖关系都是自己处理的。

那么我们的依赖就变成了：

其中，modal.vue包含了所有需要的依赖项，所以我们不需要自己去处理相应的CSS甚至模板。这就是模块化应该达到的目标。

创建Vue项目

Vue提供了一个工具vue-cli来创建一个项目模板：https://github.com/vuejs/vue-cli

在这里，我首先尝试了另一个模板项目：https://github.com/vuejs-templates/webpack

然后我们就可以在没有纯JS的情况下编写一个模块，并借助webpack将一个模块相关的所有内容写入一个文件中。以待办事项为例。其实上一章只讲了组件的用法，所以是这样写的。让我们用一种更好的方式来描述它，如下所示：

List.vue:

模板ul li v-for='列表中的待办事项'标签v-bind : class=' { done : todo . done } '输入类型=' checkbox ' v-model=' todo . done '/{ { todo . title } }/标签/li /ul/templatescriptexport默认{ prop 3360 { initlist : { type 3: Array } }，data(){ return { list 3:[]}，events: { add (input) { if(！input)返回false this . list . unshift({ title : input，done : false })} }/script style lang=' less ' scopedio { margin-left : 2 rem；padd : 0；done { text-decoration : line-through；} }/样式

Form.vue:

模板h1{{username}} '的Todo List/h1表单v-: submit=' add ' v-: submit .阻止输入类型=' text ' v-model=' input '/input type=' submit ' value=' add '/form/templatescript export default { prop 3360 { username : { type : String，default: 'Unnamed' }，data(){ return { input 3: ' ' }，methods:$dispatch('add '，this . input)this . input=' ' } } }/script todo . vue :

模板div id=' todo ' todo-Form username=' Lily '/todo-Form todo-list/todo-list/div/templatescriptimport Form from '。/Form.vue“从导入列表”。/List . vue ' export default { components : { ' todo-Form ' : Form，' todo-list': List }，events: { add (input) { this。$broadcast('add '，input)} } }/script style/style app . vue :

模板待办事项/待办事项/模板脚本从“”导入待办事项。/components/Todo . vue ' export default { components : { ' Todo ' : Todo } }/script style/style，所以我们根据模块化重写了之前的Todo List。模块化是构建大规模应用的基础之一，但这还不够。我们还需要做更好的状态管理，分离不同组件共享的状态来管理自动测试路由，等等

这里我们只做其中一个，就是把国家分成一个模块。显然，对于待办事项应用程序，保存待办事项的数据结构是不同组件共享的状态。我们之前之所以需要广播事件，是因为不同组件之间要操作的数据都存储在List.vue中，所以当我们想要在Form.vue中添加一条数据时，需要通过事件通知List.vue进行添加。也就是说，这些数据对于List.vue来说不是私有的，但至少应该由这两个组件共享。现在归List.vue所有，Form.vue不能修改，所以要通过事件通知。虽然事件的方式很优雅，但其实我们可以做得更好，就是把数据分开，这样Form.vue和List.vue都可以直接修改数据，而不用费心发通知。

这里我们添加了一个Store.js文件：

导出默认值{ list: [ ]，添加(title) { if(！标题)还这个。名单。unshift ({title : title，done : false})}}然后我们可以这样更改List.vue，这里只贴JS的代码：

从“”导入存储./store . js ' export default { props : { init list : { type : array } }，data () {return store}} form.vue不需要广播，可以直接调用Store.add方法添加3360。

从“”导入存储./store . js ' export default { prop s : { username : { type : String，default: 'Unnamed' }，data () { return { input: '' }，methods : { add(){ store . add(this . input)this . input=' ' } }

这个改动之后，整个逻辑会清晰很多，应用越复杂，就越应该把public Store拉出来，否则就会出现广播事件满天飞的情况。此外，使用此项目模板后，不需要热重新加载，并且保存了刷新操作。

上面的源代码在这里：https://github.com/lihongxun945/vue-webpack-todo-list

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。