浅谈webpack下的AOP式无侵入注入


Posted in Javascript onNovember 12, 2017

说起来, 面向切面编程(AOP)自从诞生之日起,一直都是计算机科学领域十分热门的话题,但是很奇怪的是,在前端圈子里,探讨AOP的文章似乎并不是多,而且多数拘泥在给出理论,然后实现个片段的定式)难免陷入了形而上学的尴尬境地,本文列举了两个生产环境的实际例子论述webpack和AOP预编译处理的结合,意在抛砖引玉。当然,笔者能力有限,如果有觉得不妥之处,还请大家积极的反馈出来, 共同进步哈。

重要的概念

AOP: 面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。

Joint point:表示在程序中明确定义的点,典型的包括方法调用,对类成员的访问以及异常处理程序块的执行等等,它自身还可以嵌套其它 joint point。

Advice:Advice 定义了在 pointcut 里面定义的程序点具体要做的操作,它通过 before、after 和 around 来区别是在每个 joint point 之前、之后还是代替执行的代码。

通过前面的定义,我们可以提炼出一句更简单的定义,利用静/动态的方式使代码块在何时/何地运行。

性能统计

项目的背景是一个利用vue+webpack打造的多页面应用 (多入口点),她的结构大概是这个样子的

var baseConf = {
// code here
entry: {
index: 'src/index',
list: 'src/list',
detail: 'src/detail',
// and so on ...
},
// code here
}

然后以index入口点举例,大概代码为src/index/index.js

import Vue from 'vue'
import App from './app'
new Vue({
el: '#app',
render: h => h(App)
})

期望引入一个vue插件,能够自动的监控当前页面的性能,于是,代码看起来像是这个样子

import Vue from 'vue'
Vue.use(performance) //性能统计
import App from './app'
new Vue({
el: '#app',
render: h => h(App)
})

由于这种方式意味着每个入口点均需要进行修改,(实际上这个项目的入口点超过30个,而且随时可能继续增加下去)简直就是一个体力活。所以,让我们用AOP的思想来考虑一下如何处理这个问题

首先观察入口点逻辑

原:引入vue -> 引入app组件 -> 实例化vue组件

新:引入vue -> 应用性能统计组件 -> 引入app组件 -> 实例化vue组件

套用到我们的定义上,可以轻松的得到

Joint point(何处) 引入vue

advice(何时) 之后

这样理论上的东西似乎闭着眼睛都可以推论出来,但是如何将这样的步骤替换到每一个入口点就是一个大问题了orz。幸运的是这是一个import,而翻阅webpack的文档恰好有着这样一个神奇的属性--alias

resolve: {
alias: {
'vue$': resolve('src/vueHook.js')
}

src/vueHook.js

import vue from 'vue/dist/vue.common'
vue.use(performance)
export default vue

这样,我们就完成了一个vue的全局钩子模块,我们按照步骤归纳,并且找到注入的位置 ,最后利用替换的方式成功的完成了无侵入式的组件应用

code spliting

可能上面的例子有点小打小闹的感觉,那么我们换一个案例,再来体验一下这种静态替换式的注入的威力,我们采用官方支持较差的react作为参考(vue在code spliting方面做得真心是超级棒~)

import SingleImage from '../../component-modules/magic-single-image/src/index';
import DoubleImage from '../../component-modules/magic-double-image/src/index';
import ThreeImage from '../../component-modules/magic-three-image/src/index';
// many component here
switch (componentName) {
case 'SingleImage':
PreviewingComponent = SingleImage;
break;
case 'DoubleImage':
PreviewingComponent = DoubleImage;
break;
case 'ThreeImage':
PreviewingComponent = ThreeImage;
break;
// many component here
}
return(<PreviewingComponent></PreviewingComponent>)

一段中规中矩的代码,对吧?相信大家已经发现了,在上述的代码里面似乎并不是每个组件都是必须的,那么,基于以上的思考,可以对上面组件进行按需加载处理。 Bundle.jsx

import React, { Component, PropTypes } from 'react';
class Bundle extends Component {
static propTypes = {
load: PropTypes.func,
children: PropTypes.func,
}
state = {
mod: null,
}
componentWillMount() {
this.load(this.props);
}
componentWillReceiveProps(nextProps) {
if (nextProps.load !== this.props.load) {
this.load(nextProps);
}
}
load(props) {
this.setState({
mod: null,
});
props.load().then((mod) => {
this.setState({
// handle both es imports and cjs
mod: mod.default ? mod.default : mod,
});
});
}
render() {
return this.state.mod ? this.props.children(this.state.mod) : null;
}
}
export default Bundle;

以及相应的alias hook

export default (
<Bundle
load={() => import(/* webpackChunkName: "widget" */
`../../component-modules/magic-single-image/src/index`
)}
>
{Widget => <Widget {...props} />}
</Bundle>
)

思考,当组件多的时候每一个模块都需要一个人口点吗,可以从webpack.context角度简化这个问题吗?

以上两个例子均是模块引用作为join point来进行注入操作的,而且完成了无侵入式的功能增强,这得益于webpack将js模块作为一等公民。我们拥有着超多的权利完成静态式的注入工作。 本文并没有在技术上涉及太多,还是那句话,抛砖引玉哈~~~

以上这篇浅谈webpack下的AOP式无侵入注入就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
node错误处理与日志记录的实现
Dec 24 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 #Javascript
JS实现小球的弹性碰撞效果
Nov 11 #Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 #Javascript
JS Input里添加小图标的两种方法
Nov 11 #Javascript
fetch 使用及如何接收JS传值
Nov 11 #Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 #Javascript
You might like
改造一台复古桌面收音机
2021/03/02 无线电
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
可以在线执行PHP代码包装修正版
2008/03/15 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
删除节点的jquery代码
2014/01/13 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
Python解析nginx日志文件
2015/05/11 Python
windows下python和pip安装教程
2018/05/25 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
快速查找Python安装路径方法
2020/02/06 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
结婚典礼证婚词
2014/01/11 职场文书
招聘单位介绍信
2014/01/14 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
初一新生军训方案
2014/05/22 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
大学生自荐材料范文
2014/12/30 职场文书
2015年司法局工作总结
2015/05/22 职场文书
公司规章制度范本
2015/08/03 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
python tkinter模块的简单使用
2021/04/07 Python
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
TS 类型兼容教程示例详解
2022/09/23 Javascript