我想创建一堆通用组件(angular 1.5),其中包含多个可选绑定,可在多个应用程序中使用.

我担心它会为不使用大多数可选绑定的应用程序创建许多不必要的观察者.

例:

组件声明:

let dateRangeComponent = {
    bindings: {
        label: '@',
        name1: '@',
        name2: '@',
        model1: '>?',
        model2: '>?',
        extra1: '>?'
    },
    template: `<div ng-if="$ctrl.model1>stuff</div>
               <div ng-if="$ctrl.model2>stuff</div>
               <div ng-if="$ctrl.extra1>stuff</div>`
};

组件使用示例:

<date-rage-component label="Pretty Date" name1="Start" name2="end"/>

我的问题是,是否可以自动查看与未使用的可选绑定相关的所有内容,知道它们在编译时未定义？

例如,想象一下我想在我的应用程序中使用一个组件,它不需要任何可选的Binding,angular会创建许多不必要的观察者来保持ng-if更新,当我们知道它们总是假的时候.

我是否在不需要时进行早期性能优化或误解任何概念？

我虽然在创建一个costum包装器指令,以利用角度1.5中的延迟转换编译

像这样的东西(伪代码,未经过测试):

<optional-binding-once ng-if="::attrs.model1">
  <div ng-if="attrs.model1">
      stuff
  </div>
</optional-binding-once>

通过这种方式,我认为只有在ng-if为真时才会编译optional-binding-once中的代码,因此如果没有定义绑定,则会减少一个观察者.

(EDIT)经过一些测试和研究后的一些结论

嗯,我想当没有填充可选绑定时,没有一个简单的解决方案来减少组件内的观察者数量.

我通过角度的$ digest阶段运行了一些测试,以检查这类观察者的数量增加是否真的有问题.

这是我的结果:

针对最坏情况的测试,其具有888个具有4个可选绑定的组件.

Chrome - 没有可选绑定(888组件,总观察者889)

• 总观察者:889
• 最后摘要周期时间:0.9950000000026193
• 最后1004个摘要周期的平均时间:1.0544920318724353 ms
• 开始dom加载(400ms)

Chrome - 带可选绑定(888个组件,4个可选绑定,总观察者4441)

• 总观察者:4441
• 最后的摘要周期时间:1.1549999999988358
• 最后1001个摘要周期的平均时间:1.6851748251747816 ms
• 开始dom加载(600ms)

Safari - 没有可选绑定(888组件,总观察者889)

• 总观察者:889 …