【问题标题】:Where and how should I extend the String prototype in an Angular application?我应该在哪里以及如何在 Angular 应用程序中扩展 String 原型?
【发布时间】:2019-01-21 16:35:03
【问题描述】:

我想扩展 String 原型并在我的 Angular 5 应用程序的一个或多个组件中使用它。主要原因是我有一系列对象,它们的属性有时会被填充,有时不会。示例:customer.address 有时是 string(地址的 _id),有时它被填充,它是一个 Address 对象,具有 _id 属性。

我想要的基本上不用担心customer.address是否填充,只需访问_id即可。我知道根据其他一些回复here,它被认为是 Javascript 反模式,但我想做这样的事情:

String.prototype._id = function () {
    return String.prototype.valueOf()
}

不管这个想法有多糟糕——已经在其他问题中得到了回答——这是否是一种实现方式,我应该在哪里声明?有没有更好的方法来解决这个问题?

谢谢。

PS。我知道我也可以在我的Address 类中覆盖toString 方法并获得类似的结果,调用customer.address.toString() 来获得_id,但我觉得它不清晰,我想探索其他选项首先。

【问题讨论】:

  • 我仍然认为你根本不应该这样做 :-) 但如果你坚持,你可能想要一个 getter 而不是添加到 String.prototype 的函数。
  • 感谢您的评论!我很可能不会这样做,但我仍然很好奇什么是最好的方法,什么是缺点。最后,也许我会创建某种实用函数。

标签: javascript angular


【解决方案1】:

根据this 和我的经验,如果你的申请是AngularJS,我建议你这样写:

yourApp.run(function() { 
   String.prototype._id = function () {
     return String.prototype.valueOf()
   } 
}); 

对于 Angular 2+,您可以查看 thisthis stackoverflow post,它们会告诉您如何在 Typescript 上扩展 String 属性。

【讨论】:

    【解决方案2】:

    您可能想考虑使用 Proxy 来包装您的对象并提供一种捕获缺失值的方法等等。

    下面的示例展示了如何在不扩展任何内置类型的情况下实现所需的功能。

    let customer1 = {
      address: 'some string'
    }
    
    let customer2 = {
      address: {
        _id: '12345'
      }
    }
    
    
    let proxyCustomer = customer => new Proxy(customer, {
      get: (target, name) => {
        // define the properties to catch and their functions
        let propHandlers = {
          address: () => {
            a = target.address
            // decide what you want to do
            // in this example a string value is returned as a dummy object with an _id.
            return typeof a === 'string' || a instanceof String ?
              {_id: a} : a
          }
        }
    
        // default action - return prop
        let def = () => target[name]
    
        // assign function to handleProp if it exists or use the default (return named prop)
        let handleProp = propHandlers[name] || def
    
        // return result of handle call
        return handleProp();
      }
    })
    
    // wrap customer objects in proxy
    customer1 = proxyCustomer(customer1)
    customer2 = proxyCustomer(customer2)
    
    // test
    console.log(customer1.address._id)
    console.log(customer2.address._id)

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-08-05
      • 1970-01-01
      • 2011-03-22
      • 1970-01-01
      相关资源
      最近更新 更多