Компоненты Angular 1.4 с директивами производительности - PullRequest
Новая
       41

Компоненты Angular 1.4 с директивами производительности

0 голосов
/ 03 декабря 2018

Фон

У нас есть старый проект, разработанный с помощью Angular 1.4.8.Например: 

// 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>

Нам требуется компонент в контроллере и мы используем его в представлении: 

// controller
define([
    'app/components/insCharSet/charSet'
], function () {...});

// view
<my-form label-width="labelWidth">
    <my-name-input></my-name-input>
    ...
</my-form>

Проблема

Мы можем разработать компоненты с директивами.Но производительность не очень хорошая.Сравните с представлением предыдущим способом, компоненты рендеринга будут медленнее.

У меня есть несколько вопросов:
1) почему пользовательские компоненты отображаются медленнее?
2) Хотя положение компонента my-name-input раньше, на самом деле он отображается после my-btn-radio-group, почему?
3) Рекомендуется ли использовать пользовательские компоненты с Angular 1.4?
4) Или как лучше?

1 Ответ

0 голосов
/ 03 декабря 2018

Каждый раз, когда вы разделяете свое приложение на кусочки компонентов, рендеринг занимает больше времени.AngularJS имеет множество скрытых действий в дополнение к наблюдателям (циклы переваривания, наследование областей и т.Чем больше компонентов вашей директивы create, тем медленнее будет выполняться рендеринг, тем больше вы получаете согласованности и удобства сопровождения.

Лучший совет, который я могу посоветовать, - это обновить ваше приложение по крайней мере до версии 1.5, чтобы иметь реальную "компонент "функции вместо использования директив, которые не предназначены для использования таким образом.

Если вы не можете, в зависимости от масштаба вашего приложения, это хорошая идея, чтобы преобразовать его в компоненты.Вы приобретете видимость, ремонтопригодность.Даже если вам придется потерять некоторое время рендеринга.

Полагаю, вы не потеряли огромное время рендеринга между двумя версиями?

...