Vue中拆分视图层代码的5点建议
示例代码托管在:http://www.github.com/dashnowords/blogs
博客园地址:《大史住在大前端》原创博文目录
华为云社区地址:【你要的前端打怪升级指南】
分享一篇尤大大演讲镇楼:「2019 JSConf.Asia - 尤雨溪」在框架设计中寻求平衡
一.框架的定位
框架通常只是一种设计模式的实现,它并不意味着你可以在开发中避免所有分层设计工作。
SPA
框架几乎都是基于MVC
或MVVM
设计模式而建立起来的,这些模式都只是宏观的分层设计,当代码量开始随着项目增大而增多时,问题就会越来越多。许多企业内部的项目仍然在使用angularjs1.X
,你会发现许多controller
的体积大到令人发指,稍有经验的团队会利用好angularjs1
构建的controller
,service
,filter
以及路由和消息机制来完成基本的拆分和解耦,这已经能让他们的开发能力中等体量的项目,往往只有掌握了angularjs1
玩法精髓——directive
的队伍,才能够在应付大型项目时使代码保持足够的清晰度,当然这只是在代码形态和模块划分上的工作,相当于代码的骨骼,想要让业务逻辑本身更加清晰,就需要更高级的建模设计知识来对业务逻辑进行分层,例如领域驱动模型。如果你仍然在使用angularjs1.x
的版本进行开发,可以参考【如何重构Controller】进行基本的分层拆分设计。
有趣的是一些团队认为无法承载大型项目是angularjs1.x
的原罪,与他们的开发水平无关,于是将希望寄托于拥有自动化工具加持的现代化SPA
框架,然而如果有机会观察你就会发现,许多项目对新框架的使用方式和之前并没有本质的差别,只不过是把以前臃肿到不行的代码又换了一种形式塞进了前端工程里,然后借着ES6
语法和新型框架本身的简洁性,开始沾沾自喜地认为这是自己重构的功劳。
请记住,如果不进行结构设计,即便使用最新版本的最热门的框架,写出来的代码依旧会是一团乱麻。
二. Vue开发中的script拆分优化
以Vue
框架为例,在工程化工具和vue-loader
的支撑下,主流的开发模式是基于*.vue
这种单文件组件形态的。一个典型的vue
组件包含如下几个部分:
<template>
<!--视图模板-->
</template>
<script>
/*编写组件脚本*/
export default {
name:'component1'
}
</script>
<style>
/*编写组件样式*/
</style>
script
的部分通常包含有交互逻辑,业务逻辑,数据转换以及DOM操作,如果不加整理,很容易变得混乱不堪。*.vue
文件的本质是View层代码,它应该尽可能轻量并包含与视图有关的信息,即特性声明和事件分发,其他的代码理论上都应该剥离出去,这样当项目体量增大后,维护起来就更容易聚焦关键信息,下面就如何进行脚本代码拆分提供一些思路,有一些可能是很基本的原则,为尽可能完整就放在一起,你并不需要从最开始就采纳所有的建议。
1.组件划分
这是View层减重的基础,将可共用的视图组件剥离出去,改为消息机制进行通信,甚至直接剥离出包含视图和业务代码的业务逻辑组件,都可以有效地拆分View层,降低代码的复杂度。
2.剥离业务逻辑代码
script
中最大的一部分一般是业务逻辑,首先将业务逻辑代码剥离为独立的[name].business.js
模块,这样做的直观好处就是减轻了View层,另一方面是解除了业务逻辑和页面之间的强绑定关系,如果其他页面也涉及到这块业务逻辑中的个别方法,就可以直接进行复用,最后就是当项目逐渐复杂,你决定引入vuex
来进行状态管理时View层会相对更容易修改。
一段包含基本增删改查逻辑的组件大概是下面的样子:
<script>
export default{
name:'XXX',
methods:{
handleClickCreate(){},
handleClickEdit(){},
handleClickRefresh(){},
handleClickDelete(){},
sendCreate(){},
sendEdit(){},
sendGetAll(){},
sendDelete(){}
}
}
</script>
简易的剥离方式是将交互逻辑保留在视图层,将业务逻辑部分代码放在另一个模块中,然后利用ES6
扩展运算符将其加入到组件实例的方法中,如下所示:
<script>
import OrderBusiness from './Order.business.js';
export default{
name:'XXX',
methods:{
...OrderBusiness,
handleClickCreate(){},
handleClickEdit(){},
handleClickRefresh(){},
handleClickDelete(){},
}
}
</script>
这种方式只是一种形态上的模块化拆分,并没有对业务逻辑本身进行梳理。另一种方式是构建独立的业务逻辑服务,保留在View层中的代码很容易转换为使用vuex
时的编码风格:
<script>
import OrderBusiness from './Order.business.js';
export default{
name:'XXX',
methods:{
handleClickCreate(){
OrderBusiness.sendCreate();
},
handleClickEdit(){
OrderBusiness.sendEdit();
},
handleClickRefresh(){
OrderBusiness.sendGetAll();
},
handleClickDelete(){
OrderBusiness.sendDelete();
}
}
}
</script>
笔者的建议是,前面三个示例随着项目体量的增长可以实现渐进式的修改。
3. 剥离数据转换代码
在前后端分离的开发模式下,前端所需要的数据支持需要从后端请求获得,但请求来的原始数据通常都是无法直接使用的,甚至有可能引发代码报错,例如时间可能是以时间戳形式传过来的,或者你的代码需要取用某个对象属性时,后台同学却在该属性上挂了一个默认值NULL
等,另一方面,开发过程中的接口改动是无法避免的,所以在代码结构的设计上,应该尽可能将可能变化的部分聚合起来。
比较实用的做法就是为每一个接口建立一个Transformer
函数,从后台请求来的数据先经过Transformer
函数变换为前台能够流通使用的数据结构,并在必要的属性上添加适当的默认值防止报错,你可以尽情地在此使用Lodash.js
等函数工具来加工和重组自己需要的数据,即使最初后台传给你的数据不需要加工,也可以保留一个透传函数或是模块说明以提醒其他协作开发者在面对这种场景时采用类似的做法,它的功能就是为逻辑层提供直接可用的数据。当前端代码越来越重时,Transformer
和Request
部分可以很方便地移动到中间层。
4. 善用computed和filters处理数据展示
对原始数据的转换并不能覆盖所有场景,这就需要在定制展示的场景中利用computed
和filters
,它们都可以用来在不改变数据的情况下更改展示结果,例如将数据中的0或1转换为未完成
和已完成
,或者是将时间戳和当前时间作比较后改为可读性更高的刚刚
,1分钟前
,1小时前
,1天前
等等,这些开发场景中是不能采用强行赋值来处理的,这是就可以使用计算属性computed
或过滤器filters
来处理,它们的区别是computed
一般用于组件内部,不具有通用性,而filters
一般用于可复用的场景,可以通过下面的形式来定义一个展示效果为首字母大写的全局过滤器:
Vue.filter('capitalize', function (value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
})
当项目中使用vuex
来进行状态管理时,computed
通常会等价替换为state
中的getter
。
5. 使用directive处理DOM操作
尽管Vue
提供了refs
这个接口来实现在逻辑层直接操作DOM
,但我们应当尽可能避免将复杂的DOM
操作放在这里,有时候页面上DOM
变化的场景较多,将每个变化都使用数据驱动的方式显然是不合理的,这时就需要用到指令特性directive
,它常用来补充实现一些业务逻辑无关的DOM
变化(业务逻辑相关的变化大都通过数据绑定进行了自动关联)。directive
的基本用法可以直接参考【官方指南】,需要注意的是许多初级开发者都不太在意内存泄漏的问题,在directive
的使用中需要格外注意这一点,通常我们会在bind
事件钩子中绑定事件并使用属性持有这个监听函数,并在unbind
钩子中解除对同一个监听函数的绑定,即使没有使用自定义指令,你也需要建立在必要时解绑监听器的编码习惯:
Vue.directive('clickoutside',{
bind:function (el, binding){
//定义监听器
function handler(e) {
if (el.contains(e.target)) {
return false;
}
if (binding.expression){
binding.value(e);
}
}
el.__clickOutSide__ = handler;
document.addEventListener('click', handler);
},
unbind:function (el) {
document.removeEventListener('click',el.__clickOutSide__);
delete el.__clickOutSide__ ;
}
});
demo
中提供了一个简单的directive
示例,你可以用它来做练习。
Vue中拆分视图层代码的5点建议的更多相关文章
- vue 中 命名视图的用法
今天主要记录 vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...
- vue中显示原网页代码--codemirror
在项目中遇到了一个需求,后台返回string类型的html源码,要求前端这边按照codeview这种类型把这个源码展示出来.现总结如下 1.如果没啥样式的需求,只是要求该缩进缩进的话,可以直接使用in ...
- asp.netMVC中,视图层和控制器层的传值
Asp.Net Mvc 控制器与视图的数据传递 摘要:本文将讨论asp.net mvc框架中的数据传递. 数据传递也就是控制器和视图之间的交互,比如在视图中提交的数据,在控制器怎么获取,或者控制器从业 ...
- web项目中,视图层中关于相对路径和绝对路径
1.在jfinal项目中 因为一直使用的jfinal,没感觉路径问题. 举个栗子,项目名字叫做test.访问一个Controller的映射为/user/add.这样,在浏览器地址栏直接:localho ...
- Python - 关于代码阅读的一些建议
初始能力 让阅读思路保持清晰连贯,主力关注在流程架构和逻辑实现上,不被语法.技巧和业务流程等频繁地阻碍和打断. 建议基本满足以下条件,再开始进行代码阅读: 具备一定的语言基础:熟悉基础语法,常用的函数 ...
- 在vue中使用import()来代替require.ensure()实现代码打包分离
最近看到一种router的写法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const login = ...
- vue中修改了数据但视图无法更新的情况[转载]
我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...
- 在Vue中使用layer.js弹出层插件
layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...
- 在vue中继续使用layer.js来做弹出层---切图网
layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...
随机推荐
- 灵雀云CTO陈恺应邀出席国泰君安信息产业投资峰会,探讨全球科技产业新格局
2019年7月9-10日,国泰君安信息产业投资峰会在上海陆家嘴举办.作为国内容器PaaS领域的龙头公司,灵雀云受邀出席本次大会,在“数字化转型从云做起”的论坛中,CTO陈恺发表了<云原生助力企业 ...
- Docker笔记(二):Docker管理的对象
原文地址:http://blog.jboost.cn/2019/07/14/docker-2.html 在Docker笔记(一):什么是Docker中,我们提到了Docker管理的对象包含镜像.容器. ...
- Linux安装httpd
一.相关下载 1.httpd下载 官网下载:http://httpd.apache.org/ 或者 百度网盘链接: https://pan.baidu.com/s/1JPdU28tv6rePKJanB ...
- Linux 文件系统的基本结构
Linux文件系统为一个倒置的树状结构,所有文件或文件夹均包含在一个根目录/中. Linux系统严格区分大小写所以在Linux中:一个名为“A”的文件夹和一个名为“a”的文件夹是不同的两个文件夹,这点 ...
- JAVA包装类解析和面试陷阱分析
包装类 什么是包装类 虽然 Java 语言是典型的面向对象编程语言,但其中的八种基本数据类型并不支持面向对象编程,基本类型的数据不具备“对象”的特性——不携带属性.没有方法可调用. 沿用它们只是为了迎 ...
- Contiki源码分析--CPU为cc253x里的uart0.c
我所使用的Contiki系统是contiki-sensinode.理解该文需要有cc2530里uart的相关知识,具体寄存器的用法不做介绍. 先放上所有代码,然后再仔细分析. #include < ...
- android_activity_研究(一)
android中活动的概念(activity)是一个很重要的东东.这里有很多东东值得好好研究.最好的研究来源当然是官网啦,所以本人这里写一点对官网文章的研究心得. 一.活动(activity)的概念 ...
- ISTQB名词辨析
测试规程说明(Test Procedure Specification) 规定了执行测试的一系列行为的文档,也称为测试脚本或测试剧本.
- [原创]实现MongoDB数据库审计SQL语句的脚本
功能:实现具体显示mongodb数据库表操作语句的状态和情况,使用awk和shell实现抓取和分析处理.脚本内容如下: #!/bin/bash if [ $# == 0 ];then echo &qu ...
- 【CYH-02】NOIp考砸后虐题赛:坐标:题解
代码: 这道题也并不难,用排序+简单动规即可.因为@Kevin_Wa 大佬放的是c++,所以我来一发Pascal. var min,max,i,a1,b1,c1,d1,n:longint; a,b,c ...