示例代码托管在:http://www.github.com/dashnowords/blogs

博客园地址:《大史住在大前端》原创博文目录

华为云社区地址:【你要的前端打怪升级指南】

分享一篇尤大大演讲镇楼:「2019 JSConf.Asia - 尤雨溪」在框架设计中寻求平衡

一.框架的定位

框架通常只是一种设计模式的实现,它并不意味着你可以在开发中避免所有分层设计工作。

SPA框架几乎都是基于MVCMVVM设计模式而建立起来的,这些模式都只是宏观的分层设计,当代码量开始随着项目增大而增多时,问题就会越来越多。许多企业内部的项目仍然在使用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等函数工具来加工和重组自己需要的数据,即使最初后台传给你的数据不需要加工,也可以保留一个透传函数或是模块说明以提醒其他协作开发者在面对这种场景时采用类似的做法,它的功能就是为逻辑层提供直接可用的数据。当前端代码越来越重时,TransformerRequest部分可以很方便地移动到中间层。

4. 善用computed和filters处理数据展示

对原始数据的转换并不能覆盖所有场景,这就需要在定制展示的场景中利用computedfilters,它们都可以用来在不改变数据的情况下更改展示结果,例如将数据中的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点建议的更多相关文章

  1. vue 中 命名视图的用法

    今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...

  2. vue中显示原网页代码--codemirror

    在项目中遇到了一个需求,后台返回string类型的html源码,要求前端这边按照codeview这种类型把这个源码展示出来.现总结如下 1.如果没啥样式的需求,只是要求该缩进缩进的话,可以直接使用in ...

  3. asp.netMVC中,视图层和控制器层的传值

    Asp.Net Mvc 控制器与视图的数据传递 摘要:本文将讨论asp.net mvc框架中的数据传递. 数据传递也就是控制器和视图之间的交互,比如在视图中提交的数据,在控制器怎么获取,或者控制器从业 ...

  4. web项目中,视图层中关于相对路径和绝对路径

    1.在jfinal项目中 因为一直使用的jfinal,没感觉路径问题. 举个栗子,项目名字叫做test.访问一个Controller的映射为/user/add.这样,在浏览器地址栏直接:localho ...

  5. Python - 关于代码阅读的一些建议

    初始能力 让阅读思路保持清晰连贯,主力关注在流程架构和逻辑实现上,不被语法.技巧和业务流程等频繁地阻碍和打断. 建议基本满足以下条件,再开始进行代码阅读: 具备一定的语言基础:熟悉基础语法,常用的函数 ...

  6. 在vue中使用import()来代替require.ensure()实现代码打包分离

    最近看到一种router的写法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const login = ...

  7. vue中修改了数据但视图无法更新的情况[转载]

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...

  8. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  9. 在vue中继续使用layer.js来做弹出层---切图网

    layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...

随机推荐

  1. (ps2018)Adobe Photoshop CC 2018 中文版破解版

    ps2018新功能 1.更紧密连接的 Photoshop.全新的智慧型锐利化. 2.智慧型增加取样.内含 Extended 功能.Camera RAW 8 和图层支援 3.可编辑的圆角矩形.多重形状和 ...

  2. springboot定时任务之旅

    springboot定时任务 假设场景:单体应用的定时任务,假设我们已经有了一个搭建好的springboot应用,但是需要添加一个定时执行的部分(比如笔者遇到的是定时去请求一个接口数据来更新某个表), ...

  3. [NOIP2016]换教室 题解(奇怪的三种状态)

    2558. [NOIP2016]换教室 [题目描述] 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有2n节课程安排在n个时间段上.在第i(1< ...

  4. Appium+python自动化(二十一)- 让猴子按你指令大闹手机,让你成为耍猴高手 - Monkey(猴子) - MonkeyScript(超详解)

    简介 一年一度的暑假如期而至,每年必不可少的,便是<西游记>这部经典电视连续剧的播出,作为一名90后,对于这部经典剧的情谊,就是观看已成为一种习惯.依然深刻的记得,小时候妈妈为了催促我睡觉 ...

  5. python基础知识六 文件的基本操作+菜中菜

    基础知识六 文件操作 ​ open():打开 ​ file:文件的位置(路径) ​ mode:操作文件模式 ​ encoding:文件编码方式 ​ f :文件句柄 f = open("1.t ...

  6. Hybrid App从概念到实战

    最近一直在准备找工作,看了很多公司的招聘介绍,有相当一部分直接写:熟悉 Hybrid App 开发加分!正好,我司开发的就有这种 Hybrid App--使用WebViewJavascriptBrid ...

  7. 洛谷P4995 跳跳!题解

    求关注,求赞,求评论QAQ 题目:https://www.luogu.org/problemnew/show/P4995 简单描述一下吧,就是说有n块石头,起始可以跳到任何一块上面,接着也是,只不过每 ...

  8. python面向过程编程 - ATM

    前面程序整合加自定义日志 1.文件摆放 ├── xxxx │ ├── src.py │ └── fil_mode.py │ └── data_time.py │ └── loading.py │ └─ ...

  9. 2019牛客多校第二场D-Kth Minimum Clique

    Kth Minimum Clique 题目传送门 解题思路 我们可以从没有点开始,把点一个一个放进去,先把放入一个点的情况都存进按照权值排序的优先队列,每次在新出队的集合里增加一个新的点,为了避免重复 ...

  10. zabbix3.4汉化

    1.管理员用户登入zabbix页面,更改语言为Chinese(zh_CN),点击Update 2.解决zabbix页面中文乱码 2.1在windows的C:\Windows\Fonts找到字体文件si ...