具有指令性能的Angular 1.4组件

时间:2018-12-03 11:44:03

标签: angular angularjs-directive custom-component

背景

我们有一个使用Angular 1.4.8开发的旧项目。例如:

Traceback (most recent call last):
  File "densenet169_loop_shared_weights_load_weights.py", line 366, in <module>
  File "/home/jenny/projects/test/my_env3/lib/python3.5/site-packages/keras/engine/topology.py", line 2506, in save
    save_model(self, filepath, overwrite, include_optimizer)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/site-packages/keras/models.py", line 106, in save_model
    'config': model.get_config()
  File "/home/jenny/projects/test/my_env3/lib/python3.5/site-packages/keras/engine/topology.py", line 2383, in get_config
    return copy.deepcopy(config)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 218, in _deepcopy_list
    y.append(deepcopy(a, memo))
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in _deepcopy_tuple
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in <listcomp>
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in _deepcopy_tuple
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in <listcomp>
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in _deepcopy_tuple
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in <listcomp>
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 218, in _deepcopy_list
    y.append(deepcopy(a, memo))
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 218, in _deepcopy_list
    y.append(deepcopy(a, memo))
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in _deepcopy_tuple
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in <listcomp>
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 218, in _deepcopy_list
    y.append(deepcopy(a, memo))
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy

...


  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in _deepcopy_tuple
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in <listcomp>
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 218, in _deepcopy_list
    y.append(deepcopy(a, memo))
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in _deepcopy_tuple
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in <listcomp>
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 218, in _deepcopy_list
    y.append(deepcopy(a, memo))
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 218, in _deepcopy_list
    y.append(deepcopy(a, memo))
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in _deepcopy_tuple
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 223, in <listcomp>
    y = [deepcopy(a, memo) for a in x]
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 182, in deepcopy
    y = _reconstruct(x, rv, 1, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 297, in _reconstruct
    state = deepcopy(state, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 155, in deepcopy
    y = copier(x, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 243, in _deepcopy_dict
    y[deepcopy(key, memo)] = deepcopy(value, memo)
  File "/home/jenny/projects/test/my_env3/lib/python3.5/copy.py", line 174, in deepcopy
    rv = reductor(4)

TypeError: cannot serialize '_io.TextIOWrapper' object

我们希望使用指令使用自定义组件来重构项目。以下是我们组件的代码。

// controller  
$scope.nameOpts = {
    ...
};
$scope.type = {
    ...
};


// view
<my-form label-width="labelWidth">
    <my-item >
        <my-item-label>
            <span class="form-title-txt fs-txt" ng-bind="i18n.name"></span>
        </my-item-label>
        <div class="clearfix">
            <div class="f-left">
                <input class="w311"
                    ng-style="{width: 2 * i18n.btn_width}"
                    ng-model="nameOpts.name"
                    ng-change="nameOpts.change(nameOpts.name)">
            </div>
        </div>
    </my-item>
    <my-item>
        <my-item-label>
            <span class="form-title-txt cmn-fs-txt" ng-bind="i18n.list_index"></span>
        </my-item-label>
        <div class="f-left" >
            <my-btn-radio-group
                items="type.items"
                selected-id="type.selectedId"
                change="type.change">
            </my-btn-radio-group>
        </div>
    </my-item>
    ...
</my-form>

我们需要控制器中的组件,并在视图中使用它:

// myNameInput component
define([], function () {
    function ctrl($scope) {
        $scope.nameOpts = {...};
        ...
    }

    return {
        templateUrl: 'name.html',
        replace: true,
        scope: {},
        controller: ctrl
    };
});

// name.html
<div>
   <my-item>
        <my-item-label>
            <span class="form-title-txt fs-txt" ng-bind="i18n.name"></span>
        </my-item-label>
        <div class="clearfix">
            <div class="f-left">
                <input class="w311"
                    ng-style="{width: 2 * i18n.btn_width}"
                    ng-model="nameOpts.name"
                    ng-change="nameOpts.change(nameOpts.name)">
            </div>
        </div>
    </my-item>
</div>

问题

我们可以使用指令开发组件。但是性能不好。与以前的视图相比,组件的渲染速度较慢。

我有几个问题:
1)为什么自定义组件的渲染速度较慢?
2)尽管组件// controller define([ 'app/components/insCharSet/charSet' ], function () {...}); // view <my-form label-width="labelWidth"> <my-name-input></my-name-input> ... </my-form> 的位置在my-name-input之后,但实际上却在my-btn-radio-group之后,为什么?
3)在Angular 1.4中使用自定义组件是一种好习惯吗?
4)或最佳做法是什么?

1 个答案:

答案 0 :(得分:0)

每次将应用划分成多个组件时,渲染时间将更长。除了观察者(消化周期,作用域继承等)外,AngularJS还具有许多隐藏行为。

使用新指令,angularjs必须创建一个新的作用域,并将其绑定到虚拟DOM等。create指令组件越多,渲染速度越慢,一致性和可维护性就越多。

我可以建议的最佳实践是至少将您的应用程序升级到angular 1.5,以具有真正的“组件”功能,而不要使用不打算以这种方式使用的指令。

如果不能,则根据您的应用程序规模,将其重构为组件是一个好主意。您将获得可见性,可维护性。即使您不得不花费一些渲染时间。

我想您在这两个版本之间没有浪费太多的渲染时间?