javascript 元编程之 method_missing

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 的类中。

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

posted @ 2019-08-17 10:57  htoooth  阅读(...)  评论(...编辑  收藏