Exemple détaillé d'AngularJS implémentant une liaison infinie menu

Les menus de liaison à plusieurs niveaux sont des composants frontaux courants, tels que la liaison province-ville, la liaison université-collège-majeure, etc. Bien que les scénarios soient courants, après une analyse minutieuse, la mise en œuvre d’un menu universel de liens hiérarchiques infinis n’est peut-être pas aussi simple qu’on l’imagine. Par exemple, nous devons nous demander si le sous-menu est chargé de manière synchrone ou asynchrone ? Le remplissage des valeurs initiales se produit-il sur le front-end ou sur le back-end ? En cas de chargement asynchrone, existe-t-il une définition stricte du format de retour de l'API backend ? Est-il facile de réaliser une coexistence synchrone et asynchrone ? Peut-il prendre en charge de manière flexible diverses dépendances ? Y a-t-il une option de valeur nulle dans le menu ? …Une série de questions doivent être traitées avec soin.

Après avoir cherché avec ces exigences, sans surprise, je n'ai pas trouvé de plug-in ou d'instruction très approprié dans l'écosystème AngularJS. J'ai donc dû essayer d'en mettre en œuvre un moi-même.

L'implémentation de cet article est basée sur AngularJS, mais les idées sont générales et les étudiants qui connaissent d'autres bibliothèques de framework peuvent également le lire.

Tout d'abord, j'ai réorganisé les exigences. Puisque le rendu d'AngularJS se fait sur le front-end, la solution précédente consistant à obtenir les options des menus à tous les niveaux en fonction des valeurs existantes dans le back-end et à les rendre dans la couche modèle n'est pas très adaptée, et comme beaucoup d'étudiants, personnellement, je n'aime pas cette implémentation : plusieurs fois, même si le premier pull de l'option et le remplissage de la valeur initiale sont terminés sur le backend, car le chargement du sous-menu dépend de l'API, le frontend doit également écouter l'événement onchange et effectuer une interaction ajax. En d'autres termes, un simple menu de liaison de deuxième niveau nécessite de diviser la logique entre le front-end et le back-end. de louange.

Concernant les méthodes de chargement synchrone et asynchrone, bien que la plupart du temps toute l'étape soit asynchrone, pour certains menus de liaison avec peu d'options, une API peut également extraire toutes les données, les traiter, les mettre en cache et les fournir au sous -menu Utilisé pour le rendu. Par conséquent, les méthodes de rendu synchrones et asynchrones doivent être prises en charge.

En ce qui concerne le problème du format de retour de l'API, si vous travaillez sur un nouveau projet, ou si les programmeurs back-end peuvent répondre rapidement aux changements de la demande, ou si les étudiants front-end eux-mêmes sont full-stack, ce problème peut ne pas être le cas. être si important ; mais souvent, l'API avec laquelle nous interagissons a été utilisée par d'autres parties du projet. Pour des raisons de compatibilité et de stabilité, ajuster le format de json n'est pas une décision facile, par conséquent, dans cet article, l'acquisition ; des données des options de sous-menu sont. Elles seront découplées de la directive elle-même et traitées par une logique métier spécifique.

Comment implémenter la prise en charge des dépendances flexibles ? En plus des dépendances linéaires les plus courantes, les dépendances arborescentes, les dépendances pyramidales inversées et même les dépendances réseau complexes doivent également être prises en charge. En raison de l’existence de ces scénarios métier, le codage en dur des dépendances dans la logique est complexe. Après les compromis, les composants communiquent via des événements.

Les exigences sont résumées comme suit :

* Prise en charge du remplissage de la valeur initiale sur le front-end
* Prise en charge de l'acquisition synchrone et asynchrone des options de menu de sous-ensembles
* Prise en charge des dépendances flexibles entre les menus (telles que la dépendance linéaire, la dépendance arborescente, la dépendance pyramidale inversée, la dépendance maillée)
* Option de valeur vide du menu Support (option[value=""])
* La logique d'acquisition du menu sous-ensemble est découplée du composant lui-même
* Les menus événementiels à tous les niveaux sont logiquement indépendants les uns des autres et ne s'influencent pas

Étant donné que le menu de liaison multi-niveaux est plus intrusif dans le comportement original de la balise select dans AngularJS, afin de faciliter la programmation ultérieure et de réduire les conflits potentiels, cet article utilisera

1. Tout d'abord, réfléchissons à la première question, comment remplir la valeur initiale sur le front-end

La caractéristique la plus évidente des menus de liaison multi-niveaux est qu'une fois le menu de niveau supérieur modifié, le menu de niveau inférieur sera restitué (de manière synchrone ou asynchrone). Dans le processus de remplissage des valeurs, nous devons remplir étape par étape, et ce processus ne peut pas être terminé instantanément lorsque la page est chargée (ou la route chargée, le composant chargé, etc.). Surtout dans AngularJS, le processus de rendu de l'option doit avoir lieu avant le rendu de ngModel. Sinon, même s'il existe une valeur correspondante dans l'option, l'option correspondante ne sera pas trouvée.
La solution consiste d'abord à enregistrer la valeur initiale du modèle dans la phase de liaison de l'instruction, à lui attribuer une valeur nulle (vous pouvez appeler $setViewValue), puis à la réattribuer de manière asynchrone à la valeur d'origine une fois le rendu terminé.

2. Comment découpler la logique spécifique de l'acquisition de sous-options et prendre en charge les méthodes synchrones et asynchrones

Vous pouvez utiliser l'attribut de classe "=" dans la portée pour exposer une fonction externe à la méthode link de la directive. Chaque fois après l'exécution de cette méthode, il est jugé s'il s'agit d'une instance de promesse (ou si elle possède une méthode then), et le rendu synchrone ou asynchrone est décidé en fonction du résultat du jugement. Grâce à un tel découplage, les utilisateurs peuvent facilement décider de la méthode de rendu dans la fonction externe transmise. Afin de rendre la fonction de rappel moins moche, nous pouvons également encapsuler le retour synchrone en tant qu'objet avec une méthode then. Comme indiqué ci-dessous :

// scope.source为外部函数
var returned = scope.source &#63; scope.source(values) : false;
!returned || (returned = returned.then &#63; returned : {
then: (function (data) {
return function (callback) {
callback.call(window, data);
};
})(returned)
}).then(function (items) {
// 对同步或异步返回的数据进行统一处理
}

Copier après la connexion

3. 如何实现菜单间基于事件的通信

大体上还是通过订阅者模式实现，需要在directive上声明依赖；由于需要支持复杂的依赖关系，应该支持一个子集菜单同时有多个依赖。这样在任何一个所依赖的菜单变化时，我们都可以通过如下方式进行监听：

scope.$on('selectUpdate', function (e, data) {
// data.name是变化的菜单，dependents是当前菜单所声明的依赖数组
if ($.inArray(data.name, dependents) >= 0) {
onParentChange();
}
});
// 并且为了方便上文提到的source函数对于变动值的调用，可以对所依赖的菜单进行遍历并保存当前值
var values = {};
if (dependents) {
$.each(dependents, function (index, dependent) {
values[dependent] = selects[dependent].getValue();
});
}

Copier après la connexion

4. 处理两类过期问题

容易想到的是异步过期的问题：设想第一级菜单发生变化，触发对第二级菜单内容的拉取，但网速较慢，该过程需要3秒。1秒后用户再次改变第一级菜单，再次触发对第二级菜单内容的拉取，此时网速较快，1秒后数据返回，第二级菜单重新渲染；但是1秒后，第一次请求的结果返回，第二级菜单再次被渲染，但事实上第一级菜单此后已经发生过变化，内容已经过期，此次渲染是错误的。我们可以用闭包进行数据过期校验。
不容易想到的是同步过期（其实也是异步，只是未经io交互，都是缓冲时间为0的timeout函数）的问题，即由于事件队列的存在，稍不谨慎就可能出现过期，代码中会有相关注释。

5. 支持空值选项的细节问题

对于空值的支持本来觉得是一个很简单的问题，即可，但实际编码中发现，在directive的link中，由于此option的link过程并未开始，option标签被实际上移除，只剩下相关注释占位。AngularJS认为该select不含有空值选项，于是报错。解决方案是弃用ng-if，使用ng-show。这二者的关系极其微妙有意思，有兴趣的同学可以自己研究~

以上就是编码过程中遇到的主要问题，欢迎交流~

directive('multiLevelSelect', ['$parse', '$timeout', function ($parse, $timeout) {
// 利用闭包，保存父级scope中的所有多级联动菜单，便于取值
var selects = {};
return {
restrict: 'CA',
scope: {
// 用于依赖声明时指定父级标签
name: '@name',
// 依赖数组，逗号分割
dependents: '@dependents',
// 提供具体option值的函数，在父级change时被调用，允许同步/异步的返回结果
// 无论同步还是异步，数据应该是[{text: 'text', value: 'value'},]的结构
source: '=source',
// 是否支持控制选项，如果是，空值的标签是什么
empty: '@empty',
// 用于parse解析获取model值（而非viewValue值）
modelName: '@ngModel'
},
template: ''
// 使用ng-show而非ng-if，原因上文已经提到
+ '<option ng-show="empty" value="">{{empty}}</option>'
// 使用朴素的ng-repeat
+ '<option ng-repeat="item in items" value="{{item.value}}">{{item.text}}</option>',
require: 'ngModel',
link: function (scope, elem, attr, model) {
var dependents = scope.dependents &#63; scope.dependents.split(',') : false;
var parentScope = scope.$parent;
scope.name = scope.name || 'multi-select-' + Math.floor(Math.random() * 900000 + 100000);
// 将当前菜单的getValue函数封装起来，放在闭包中的selects对象中方便调用
selects[scope.name] = {
getValue: function () {
return $parse(scope.modelName)(parentScope);
}
};
// 保存初始值，原因上文已经提到
var initValue = selects[scope.name].getValue();
var inited = !initValue;
model.$setViewValue('');
// 父级标签变化时被调用的回调函数
function onParentChange() {
var values = {};
// 获取所有依赖的菜单的当前值
if (dependents) {
$.each(dependents, function (index, dependent) {
values[dependent] = selects[dependent].getValue();
});
}
// 利用闭包判断io造成的异步过期
(function (thenValues) {
// 调用source函数，取新的option数据
var returned = scope.source &#63; scope.source(values) : false;
// 利用多层闭包，将同步结果包装为有then方法的对象
!returned || (returned = returned.then &#63; returned : {
then: (function (data) {
return function (callback) {
callback.call(window, data);
};
})(returned)
}).then(function (items) {
// 防止由异步造成的过期
for (var name in thenValues) {
if (thenValues[name] !== selects[name].getValue()) {
return;
}
}
scope.items = items;
$timeout(function () {
// 防止由同步（严格的说也是异步，注意事件队列）造成的过期
if (scope.items !== items) return;
// 如果有空值，选择空值，否则选择第一个选项
if (scope.empty) {
model.$setViewValue('');
} else {
model.$setViewValue(scope.items[0].value);
}
// 判断恢复初始值的条件是否成熟
var initValueIncluded = !inited && (function () {
for (var i = 0; i < scope.items.length; i++) {
if (scope.items[i].value === initValue) {
return true;
}
}
return false;
})();
// 恢复初始值
if (initValueIncluded) {
inited = true;
model.$setViewValue(initValue);
}
model.$render();
});
});
})(values);
}
// 是否有依赖，如果没有，直接触发onParentChange以还原初始值
!dependents &#63; onParentChange() : scope.$on('selectUpdate', function (e, data) {
if ($.inArray(data.name, dependents) >= 0) {
onParentChange();
}
});
// 对当前值进行监听，发生变化时对其进行广播
parentScope.$watch(scope.modelName, function (newValue, oldValue) {
if (newValue || '' !== oldValue || '') {
scope.$root.$broadcast('selectUpdate', {
// 将变动的菜单的name属性广播出去，便于依赖于它的菜单进行识别
name: scope.name
});
}
});
}
};
}]);

Copier après la connexion

Exemple détaillé d'AngularJS implémentant une liaison infinie menu_AngularJS