写点什么

100 行代码让您学会 JavaScript 原生的 Proxy 设计模式

作者:Jerry Wang
  • 2021 年 12 月 17 日
  • 本文字数:3337 字

    阅读完需:约 11 分钟

100行代码让您学会JavaScript原生的Proxy设计模式


面向对象设计里的设计模式之 Proxy(代理)模式,相信很多朋友已经很熟悉了。


其实和 Java 一样,JavaScript 从语言层面来讲,也提供了对代理这个设计模式的原生支持。我们用一个不到 100 行代码的例子来看看吧。


下面的代码创建了一个名叫 Jerry 的 Employee 对象,然后用函数 hireEmployee 雇用该 Employee 进行 JavaScript 开发:


function Employee(name){
this.name = name;
};
Employee.prototype.work = function(language){
console.log(this.name + " is developing with: " + language);
}
let jerry = new Employee("Jerry");
function hireEmployee(employee, language){
employee.work(language);
}
hireEmployee(jerry, "JavaScript");
复制代码



打印输出:


Jerry is developing with: JavaScript


现在 Jerry 在他的业余时间里想学习一些其他的编程语言,但是不想影响自己的本职工作。用技术语言来讲,就是希望 Employee 原型方法 work 执行时,打印一行额外的信息,但是不允许修改 Employee 函数和 Employee.prototype.work 本身。这时 Proxy 这种代理模式就派上用场了。


我们为 work 方法创建一个代理逻辑:


var proxyLogic = {get: function(target, name) {  if( name == "work"){    var oriFun = target[name].bind(target);    return function(language){      oriFun(language);      console.log("and also study other language in spare time");    }  }}};
复制代码


重点看第二行的 get 方法。两个输入参数,target 和 name。Target 代表当前执行方法的实例,即方法调用者。Name 代表具体的方法名称。第 4 行我们把原始方法取出来,存放到变量 oriFun 里。第五行返回一个新的 JavaScript 函数,该函数体的实现逻辑为首先在第六行调用原始方法,然后在第七行执行额外的逻辑。



大家在回忆我之前介绍 Java InvocationHandler 实现动态代理的文章:


Java动态代理之InvocationHandler最简单的入门教程


是不是思路完全一样?都是在代理逻辑里调用原始方法,然后再执行额外的代码。



这个 proxyLogic 生成后,怎么把它同我们原始的需要被代理的代码关联起来呢?


只需要 1 行代码:


var jerryProxy = new Proxy(jerry, proxyLogic );


Proxy 函数是 JavaScript 提供的原生代理构造器,需要两个输入参数:



第一个输入参数是我们的 Employee 实例,即需要被代码的对象实例,第二个输入参数是我们开发好的代理逻辑。返回的即是装配好的代理对象,该代理对象的 work 方法实现在第二个输入参数里。


现在我们再次调用 hireEmployee,传入 Proxy 构造器返回的代理对象:


hireEmployee(jerryProxy, "JavaScript");


打印输出,代理逻辑生效了:



和 Java 的 Invocation 一样优雅地实现了代理设计模式。


我们部署在某些云平台或者 Web 服务器上的前端应用,既可以用 PC 端浏览器访问,也可以用手机上的浏览器访问。


在前端应用里,有时候我们需要根据运行环境的不同做出对应处理。比如下面这段逻辑,如果判断出应用当前是运行在手机上,则需要设置对应的 viewport。



if (this.isMobile()) {
var viewport = document.querySelector("meta[name=viewport]");
if (viewport) {
viewport.setAttribute('content', 'width = ' + window.innerWidth + ', height = ' + window.innerHeight + ', maximum-scale = 1.25, minimum-scale = 1.25');
}
}
复制代码



那么如何实现 isMobile 函数呢?


我们打开 Chrome 开发者工具,在 console 标签页输入 navigator,回车,会发现这个对象包含了非常多的有用信息。



其中有个字段 platform: 我如果在安装了 Windows 系统的电脑上使用 Chrome,该值为 Win32。



另一个重要的字段为 userAgent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36


下面这段不到 100 行的 JavaScript 代码通过使用正则表达式处理 navigator 对象中的 platform 和 userAgent 字段来判断当前前端应用运行的环境,支持 Windows/Linux/Macintosh 三种操作系统,iOS/Android/BlackBerry/Windows Phone 等移动平台。


代码如下。您也可以在我的 github 上找到这段代码。执行后,会弹出检测出的运行环境和版本号。


https://github.com/i042416/KnowlegeRepository/blob/master/practice/264_getOS.html




< html >
< script >
var OS = {
"WINDOWS": "win",
"MACINTOSH": "mac",
"LINUX": "linux",
"IOS": "iOS",
"ANDROID": "Android",
"BLACKBERRY": "bb",
"WINDOWS_PHONE": "winphone"
};
var result = getOS();
alert(JSON.stringify(result));
function getOS() {
var userAgent = navigator.userAgent;
var platform, result;
function getDesktopOS() {
var pf = navigator.platform;
if (pf.indexOf("Win") != -1) { // 说明当前是Windows操作系统
var rVersion = /Windows NT (d+).(d)/i;
var uaResult = userAgent.match(rVersion);
var sVersionStr = "";
if (uaResult[1] == "6") {
if (uaResult[2] == 1) {
sVersionStr = "7"; // 说明当前运行在Windows 7 中
} else if (uaResult[2] > 1) {
sVersionStr = "8"; // 说明当前运行在Windows 8 中
}
} else {
sVersionStr = uaResult[1];
}
return { "name": OS.WINDOWS, "versionStr": sVersionStr };
} else if (pf.indexOf("Mac") != -1) {
return { "name": OS.MACINTOSH, "versionStr": "" }; // Macintosh操作系统
} else if (pf.indexOf("Linux") != -1) {
return { "name": OS.LINUX, "versionStr": "" }; // 说明当前运行在Linux操作系统
}
return null;
}
platform = /Windows Phone (?:OS )?([d.]*)/; // windows phone的正则表达式
result = userAgent.match(platform);
if (result) {
return ({ "name": OS.WINDOWS_PHONE, "versionStr": result[1] });
}
// BlackBerry 10
if (userAgent.indexOf("(BB10;") > 0) {
platform = /sVersion/ ([d.] + ) s / ; // BlackBerry的regular expression
result = userAgent.match(platform);
if (result) {
return { "name": OS.BLACKBERRY, "versionStr": result[1] };
} else {
return { "name": OS.BLACKBERRY, "versionStr": '10' };
}
}
// iOS, Android, BlackBerry 6.0+:
platform = /(([a-zA-Z ]+);s(?:[U]?[;]?)([D]+)((?:[d._]*))(?:.*[)][^d]*)([d.]*)s/;
result = userAgent.match(platform);
if (result) {
var appleDevices = /iPhone|iPad|iPod/;
var bbDevices = /PlayBook|BlackBerry/;
if (result[0].match(appleDevices)) {
result[3] = result[3].replace(/_/g, ".");
return ({ "name": OS.IOS, "versionStr": result[3] }); // iOS操作系统
} else if (result[2].match(/Android/)) {
result[2] = result[2].replace(/s/g, "");
return ({ "name": OS.ANDROID, "versionStr": result[3] }); // Android操作系统
} else if (result[0].match(bbDevices)) {
return ({ "name": OS.BLACKBERRY, "versionStr": result[4] }); // Blackberry
}
}
//Android平台上的Firefox浏览器
platform = /((Android)[s]?([d][.d]*)?;.*Firefox/ [d][.d] * /;
result = userAgent.match(platform);
if (result) {
return ({ "name": OS.ANDROID, "versionStr": result.length == 3 ? result[2] : "" });
}
// Desktop
return getDesktopOS();
}
</script>
</html>
复制代码



要获取更多 Jerry 的原创技术文章,请关注公众号"汪子熙"。

发布于: 2 小时前阅读数: 6
用户头像

Jerry Wang

关注

个人微信公众号:汪子熙 2017.12.03 加入

SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使。

评论

发布
暂无评论
100行代码让您学会JavaScript原生的Proxy设计模式