浅谈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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
JavaScript undefined及null区别实例解析
Jul 21 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
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
详解Django中的form库的使用
2015/07/18 Python
python中range()与xrange()用法分析
2016/09/21 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
python pillow模块使用方法详解
2019/08/30 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
先进集体获奖感言
2014/02/13 职场文书
学生安全教育材料
2014/02/14 职场文书
2014庆六一活动方案
2014/03/02 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
环保志愿者活动方案
2014/08/14 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis