浅谈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 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
js窗口震动小程序分享
Nov 28 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 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
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
python 构造三维全零数组的方法
2018/11/12 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
Puppeteer使用示例详解
2019/06/20 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
机关门卫的岗位职责
2014/04/29 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
政风行风建设整改方案
2014/10/27 职场文书
志愿者事迹材料
2014/12/26 职场文书
五年级小学生评语
2014/12/26 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
关于使用Redisson订阅数问题
2022/01/18 Redis