前端框架Vue.js构建大型应用浅析


Posted in Javascript onSeptember 12, 2016

真正的模块化

前端模块化很早就开始了,无论是 require.js,browserify 进行模块化打包, 还是 Angular 进行依赖注入,我们都可以把JS代码分成一个个小的模块并组装起来。然后我们还会通过 less 或者 sass 来把CSS文件也拆成一个个小的模块来写,甚至我们在CSS代码中感受到了 封装,继承,多态 等面向对象的特性。

然而,在 webpack 出来之前,我们所谓的模块化根本不能算作模块化。为什么这么讲,因为我们存在一个重要的问题没有解决,就是JS模块对CSS模块的依赖。

比如我们有一个JS模块 modal 那么我们直接导入并调用它就能弹出一个对话框吗?如下图所示可以吗?

理论上应该是这样的,但实际上这个 modal其实还依赖一个对应的CSS模块 modal.less ,如果不导入这个模块我们是无法弹出一个正常的对话框的,而且,导入这个CSS模块竟然不是和导入JS模块写在同一个地方,而是写在另一个CSS文件中。也就是说,其实依赖关系是这样的:

前端框架Vue.js构建大型应用浅析

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

那么我们的依赖关系就变成了:

前端框架Vue.js构建大型应用浅析

其中 modal.vue 包含了全部所需要的依赖,那么我们就不在需要自己去处理对应的 CSS 甚至 模板了。这才是模块化应该达到的效果。

创建 Vue 项目

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

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

然后我们就可以不用 纯JS来写模块了,而是借助 webpack 来把一个模块相关的所有内容全部写到一个文件中。以之前的 todo list 为例,其实上一章讲的只是component的用法所以那样写了。我们改成一个更好的写法如下:

List.vue:

<template>
 <ul>
 <li v-for='todo in list'>
  <label v-bind:class="{ done : todo.done }" >
  <input type="checkbox" v-model="todo.done"/>
  {{todo.title}}
  </label>
 </li>
 </ul>

</template>

<script>
export default {
 props: {
 initList: {
  type: Array
 }
 },
 data () {
 return {
  list: []
 }
 },
 events: {
 add (input) {
  if (!input) return false
  this.list.unshift({
  title: input,
  done: false
  })
 }
 }
}
</script>

<style lang="less" scoped>
ul {
 margin-left: 2rem;
 padding: 0;

 .done {
 text-decoration: line-through;
 }
}
</style>

Form.vue:

<template>
 <h1>{{username}}'s Todo List</h1>
 <form v-on:submit="add" v-on:submit.prevent>
 <input type="text" v-model="input"/>
 <input type="submit" value='add' />
 </form>
</template>

<script>
export default {
 props: {
 username: {
  type: String,
  default: 'Unnamed'
 }
 },

 data () {
 return {
  input: ''
 }
 },

 methods: {
 add () {
  this.$dispatch('add', this.input)
  this.input = ''
 }
 }
}
</script>

Todo.vue:

<template>

 <div id="todo">
 <todo-form username='Lily'></todo-form>
 <todo-list></todo-list>
 </div>

</template>

<script>
import Form from './Form.vue'
import List from './List.vue'

export default {
 components: {
 'todo-form': Form,
 'todo-list': List
 },

 events: {
 add (input) {
  this.$broadcast('add', input)
 }
 }
}

</script>

<style>
</style>

App.vue:

<template>
 <todo></todo>
</template>

<script>
import Todo from './components/Todo.vue'

export default {
 components: {
 'todo': Todo
 }
}
</script>

<style>
</style>

这样我们就把之前的 Todo List 按照 模块化 重写了一遍。模块化是构建大型应用的基础之一,但是这一点还不够,我们还需要做到:
 •更好的状态管理,把不同组件共享的 State 独立出来管理
 •自动化测试
 •路由等 

这里我们只做其中一个,就是把 State 独立成一个单独模块。很显然,对一个 Todo List 应用来说,保存 todo list 的数据结构就是不同组件共享的 State。
之前我们为什么需要进行事件广播,就是因为不同组件之间要操作的数据就保存在 List.vue 中,所以在 Form.vue 中想增加一条数据的时候需要通过事件的方式去通知 List.vue 来添加。
也就是其实这个数据不是 List.vue 私有的,应该至少是这两个组件公有的,现在被 List.vue 据为己有之后,Form.vue 没法修改它只好通过事件进行通知。
虽然事件的方式很优雅,但其实我们可以做的更好,就是把数据独立出来,这样 Form.vue 和 List.vue 都可以直接修改数据,而不用那么麻烦发通知。

这里我们增加一个 Store.js 文件:

export default {
 list: [
 ],

 add (title) {
 if (!title) return
 this.list.unshift({
  title: title,
  done: false
 })
 }
}

 然后 我们可以把 List.vue 改成这样,这里只贴出JS部分的代码:

import Store from '../Store.js'

export default {
 props: {
 initList: {
  type: Array
 }
 },
 data () {
 return Store
 }
}

 Form.vue 也不需要广播了,直接调用 Store.add 方法既可以添加:

import Store from '../Store.js'
export default {
 props: {
 username: {
  type: String,
  default: 'Unnamed'
 }
 },

 data () {
 return {
  input: ''
 }
 },

 methods: {
 add () {
  Store.add(this.input)
  this.input = ''
 }
 }
}

 这样一改之后,整个逻辑会清晰很多,并且应用越是复杂,越是应该抽出公有的 Store ,不然会出现广播事件满天飞的情况。
另外用这个项目模板之后,hot-reload 爽的不要不要的,刷新操作都省了。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解JavaScript中的对象 推荐
Jan 09 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
jQuery过滤选择器用法示例
Sep 12 #Javascript
强大Vue.js组件浅析
Sep 12 #Javascript
超详细的JS弹出窗口代码大全
Apr 18 #Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 #Javascript
关于javascript的一些知识以及循环详解
Sep 12 #Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 #Javascript
Javascript6中字符串的四个新用法分享
Sep 11 #Javascript
You might like
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
php微信支付之APP支付方法
2015/03/04 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
解决Django no such table: django_session的问题
2020/04/07 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
linux面试题参考答案(8)
2015/08/11 面试题
致全体运动员广播稿
2014/02/01 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
元旦活动感言
2014/03/08 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
大学生求职信
2014/06/17 职场文书
党员自评材料范文
2014/12/17 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
Python 键盘事件详解
2021/11/11 Python