javascript 元编程之 method_missing

引言

要说元编程 ruby 中技巧太多了,今天来写的这个技术也来自于 ruby 中的灵感。

method_missing 这个在 ruby 中对象调用方法如果没有调到就会去调用这个方法。

这个功能在 javascript 中怎么实现,现在 proxy 出现了,这个就有思路了。

实现

class Base {
constructor () {
return new Proxy(this, {
get (target, property) {
if (Reflect.has(target, property)) {
return Reflect.get(target, property)
} else {
return function () {
if (target.method_missing) {
return target.method_missing(property, ...arguments)
} else {
throw new ReferenceError('Property "' + property + '" does not exist.')
}
}
}
}
})
}
}

代码解释一下, 用了 class, Proxy 的功能。

怎样使用呢?

我说一下应用场景,在前端单页面中,有很多的 ajax 接口,如果你想使用一般情况下会怎么做呢?

会先把网络库(jquery, axios) 封一层变成 http ,然后再把请求分一层,变成 request,最后对每个接口封一层,把调用方法变成一个一个的方法,放到一个文件夹中管理 api,然后在别的地方引用。

这样当然能工作。问题在于接口信息太冗余,接口的信息放在三个地方,url 中,参数中,方法名,如果有一个要改,可能三个地方都要改。

而且是要对每个函数都要做一遍这个工作。

下面举例:


// http 方法 import $ from 'jquery' window.jQuery = $ $.ajaxSetup({
cache: false,
dataType: 'json'
}) // request 方法
export function request (url, setting) {
return new Promise((resolve, reject) => {
$.ajax(url, setting)
.then(resolve)
.fail(reject)
})
} export function get (url, params) {
return request(url, {
method: 'GET',
data: params
})
} export function post (url, params) {
return request(url, {
method: 'POST',
data: params
})
} // 具体的方法
import { post } from '@/lib/http' export function getPermission (params = {}) {
return post('/passport/permission', params)
}

我们可以看到具体的方法中,函数名和 url 其实都在表达一个意思,而且如果再来接口我还要这么干。

如果20多个接口,都是这种重复代码,不应该这么干。

实现

怎么做?

上面写的 method_missing 方法上场了,我们不封方法了,直接写函数,然后委托 method_missing 方法进行统一的调用,让我们从重复的封方法中解脱出来,干点别的什么事。

import Base from './base'
import { request } from './http'
import * as _ from 'lodash' let METHOD = {
GET: ['get', 'show'],
POST: ['post', 'update', 'change', 'create', 'delete', 'remove']
} class ApiService extends Base {
constructor () {
super()
this.baseURL = '/api/web'
} method_missing (property, ...args) {
let [url, setting] = args if (_.isObject(url)) {
setting = {
data: url
} // 这里通过方法名生成 url
const url_parts = property.split('_')
const method = url_parts[0].toLowerCase() if (METHOD.GET.includes(method)) {
setting.method = 'GET'
url_parts.shift()
} else if (METHOD.POST.includes(method)) {
setting.method = 'POST'
url_parts.shift()
} else {
setting.method = 'GET'
} url = '/' + url_parts.join('/')
} return request(this.baseURL + url, setting)
}
} export default new ApiService() // 执行代码
import apiService from './api-service' // 调用,神奇的代码
apiService.get_passport_permission({
})

从执行代码来看,我并没有定义这个方法,这个方法会落到 apiserver 中的 method_missing 中去。

拿到方法名和参数列表,我就能干事情,跟据方法名去生成 url,然后参数加上,就能发请求了。

结论

这个方法在代码上如果你接口特别多的话,可以节省太多的样板代码,而且是越是通用的代码,越好,如果有特例的代码,可以加到实现 method_missing 的类中。

这样通用的代码和特例的代码都能兼顾,当然兼容性还是要考虑的。

javascript 元编程之 method_missing的更多相关文章

  1. Javascript元编程之Annotation

    语言的自由度 自由度这个概念在不同领域有不同的定义,我们借鉴数学中构成一个空间的维数来表达其自由度的做法,在此指的是:解决同一个问题彼此不相关的设计方法学数量. 例如,解决一个比如商品打折的问题,如何 ...

  2. Javascript异步编程之setTimeout与setInterval详解分析(一)

    Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...

  3. 【转】Javascript异步编程之setTimeout与setInterval

    Javascript异步编程之setTimeout与setInterval 转自:http://www.tuicool.com/articles/Ebueua 在谈到异步编程时,本人最主要会从以下三个 ...

  4. JavaScript模块化编程之AMD - requireJS基础使用

    JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...

  5. JavaScript模块化编程之require.js与sea.js

    为什么要模块化:当今,网站以不再是一个简单的页面,JavaScript也不再是做一些简单的脚本验证,随着WEB.20时代到来,前端工程师面临的必将是越来越庞大的JavaScript代码,越来越复杂的内 ...

  6. 我也来谈javascript高级编程之:javascript函数编译过程

    前言 题目有点大,其实也就是手痒...跟大家来扯一下javascript编译过程. 那么到底什么是“编译”呢 这个...本人文笔太差,我还是直接举例子吧. 相信玩过js童鞋应该都看过下面这样一个面试题 ...

  7. Javascript模块化编程之Why

    说到模块化编程,大家比较容易想到Java, C++等语言,感觉这事和Javascript沾不上一丁点边.虽说Javascript看上去好像同Java有莫大的关系,但那也只是一厢情愿,不过是挂羊头卖狗肉 ...

  8. JavaScript模块化编程之AMD

    简单的说一下AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义".它采用异步方式加载模块,模块的加载不影响它 ...

  9. Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解

    JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...

随机推荐

  1. WampServer 下载以及安装问题 以及配置远程连接MYSQL

    WampServer 3.0 下载: http://dl.pconline.com.cn/download/52877-1.html 碰到的问题DDL无法添加,解决方法:MSVCR110.DLL fo ...

  2. html5 iphone input 输入法 弹窗将页面顶起 解决办法

    给 input 添加失焦事件,然后滚动视图 input.search(type="text",@blur="scrollTop") scrollTop(){ w ...

  3. python 学习记录1

    存储 序号   分类    技术      用途 01      存储     Number  数字(不可变) String     字符串(不可变) List          列表 Tuple   ...

  4. MariaDB知识点总结03--从主+多主集群

    一.从主架构 1.从主复制原理 从库生成两个线程,一个I/O线程,一个SQL线程: i/o线程去请求主库 的binlog,并将得到的binlog日志写到relay log(中继日志) 文件中:主库会生 ...

  5. Openstack知识点总结

    Openstack: 一.云计算+openstack概念: 1.云计算是一种按使用量付费的模式,这种模式提供可用的,便捷的,按需的访问,通过互联网进入可配置的计算资源共享池(资源包括网络,计算,存储, ...

  6. LCA cogs 2450 2048 1588

    t1 2450距离 链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=vSNNNVqga [题目描述] 在一个村子里有N个房子,一些双向的路连接 ...

  7. 【Java开发】Maven那点事儿(Eclipse版)

    Maven那点事儿(Eclipse版) 前言: 由于最近工作学习,总是能碰到Maven的源码.虽然平时工作并不使用Maven,但是为了学习一些源码,还是必须要了解下.这篇文章不是一个全面的Maven解 ...

  8. linux-32bit-内存管理

    一.进程与内存 进程如何使用内存? 毫无疑问所有进程(执行的程序)都必须占用一定数量的内存,它或是用来存放从磁盘载入的程序代码,或是存放取自用户输入的数据等等.不过进程对这些内存的管理方式因内存用途不 ...

  9. Node数据库入门(登录注册功能)

    1.安装 (1).mysql模块安装 npm i mysql -D (2).co-msql模块安装(该模块不是一个独立的模块,而是mysql的封装,他可以把普通接连封装成一个可以做异步调用的连接) n ...

  10. [转帖]postgres 创建新用户并授权-- 非常好的

    postgres 创建新用户并授权 https://blog.csdn.net/XuHang666/article/details/81506297 原作者总结的挺好的 可以用来学习一下. grant ...