前端框架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 相关文章推荐
jQuery 一个图片切换的插件
Oct 09 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
vue实现百度搜索功能
Dec 28 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
vue实现虚拟列表功能的代码
Jul 28 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
深入php多态的实现详解
2013/06/09 PHP
JavaScript之自定义类型
2012/05/04 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
Python使用django搭建web开发环境
2017/06/09 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
python爬虫用mongodb的理由
2020/07/28 Python
Python:__eq__和__str__函数的使用示例
2020/09/26 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
质检部部长职责
2013/12/16 职场文书
销售经理工作职责
2014/02/03 职场文书
采购经理岗位职责
2014/02/16 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
师德师风的心得体会
2014/09/02 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
个人年终总结怎么写
2015/03/09 职场文书
工作简报怎么写
2015/07/21 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫