Contoh terperinci AngularJS yang melaksanakan menu pautan tak terhingga_AngularJS

Menu pautan berbilang peringkat ialah komponen bahagian hadapan yang biasa, seperti hubungan wilayah-bandar raya, hubungan universiti-kolej-utama, dsb. Walaupun senario adalah perkara biasa, selepas analisis yang teliti, melaksanakan menu pautan hierarki tak terhingga universal mungkin tidak semudah yang dibayangkan. Sebagai contoh, kita perlu mempertimbangkan sama ada submenu dimuatkan secara serentak atau tidak segerak? Adakah pengisian semula nilai awal berlaku di bahagian hadapan atau di bahagian belakang? Jika dimuatkan secara tidak segerak, adakah terdapat takrifan ketat bagi format pemulangan API bahagian belakang? Adakah mudah untuk mencapai kewujudan bersama segerak dan tak segerak? Bolehkah ia menyokong pelbagai kebergantungan secara fleksibel? Adakah terdapat pilihan nilai nol dalam menu? …Serangkaian isu perlu ditangani dengan teliti.

Selepas mencari-cari dengan keperluan ini, tidak menghairankan, saya tidak menemui pemalam atau arahan yang sangat sesuai dalam ekosistem AngularJS. Jadi saya terpaksa mencuba untuk melaksanakannya sendiri.

Pelaksanaan artikel ini adalah berdasarkan AngularJS, tetapi ideanya adalah umum, dan pelajar yang biasa dengan perpustakaan rangka kerja lain juga boleh membacanya.

Pertama sekali, saya menyusun semula keperluan Memandangkan pemaparan AngularJS berlaku di bahagian hadapan, penyelesaian sebelumnya untuk mendapatkan pilihan menu di semua peringkat berdasarkan nilai sedia ada di bahagian belakang dan menjadikannya dalam. lapisan templat tidak begitu sesuai, dan seperti kebanyakan pelajar, , saya secara peribadi tidak menyukai pelaksanaan ini: berkali-kali, walaupun tarikan pertama pilihan dan pengisian semula nilai awal selesai di bahagian belakang, kerana pemuatan daripada sub-menu bergantung pada API, bahagian hadapan juga perlu mendengar peristiwa perubahan dan melakukan interaksi ajax Dalam erti kata lain, menu pautan peringkat kedua yang mudah memerlukan pemisahan logik antara hujung depan dan belakang daripada pujian.

Berkenaan kaedah pemuatan segerak dan tak segerak, walaupun kebanyakan masa keseluruhan langkah adalah tidak segerak, untuk sesetengah menu pautan dengan beberapa pilihan, API juga boleh menarik semua data, memprosesnya, menyimpannya dalam cache dan memberikannya kepada sub -menu Digunakan untuk rendering. Oleh itu, kedua-dua kaedah pemaparan segerak dan tak segerak harus disokong.

Bagi isu format pemulangan API, jika anda sedang mengusahakan projek baharu, atau pengaturcara bahagian belakang boleh bertindak balas dengan cepat terhadap perubahan permintaan, atau pelajar bahagian hadapan sendiri adalah timbunan penuh, isu ini mungkin tidak menjadi sangat penting; tetapi banyak kali, API yang kami berinteraksi telah digunakan oleh bahagian lain projek demi keserasian dan kestabilan, melaraskan format json bukanlah keputusan yang mudah, dalam artikel ini, pemerolehan daripada data pilihan sub-menu ialah Ia akan dipisahkan daripada arahan itu sendiri dan diproses oleh logik perniagaan tertentu.

Bagaimana untuk melaksanakan sokongan untuk kebergantungan fleksibel? Sebagai tambahan kepada kebergantungan linear yang paling biasa, kebergantungan pokok, kebergantungan piramid terbalik dan juga kebergantungan rangkaian kompleks juga harus disokong. Disebabkan kewujudan senario perniagaan ini, kebergantungan pengekodan keras ke dalam logik adalah rumit. Selepas pertukaran, komponen berkomunikasi melalui acara.

Keperluan diringkaskan seperti berikut:

* Menyokong pengisian semula nilai awal pada bahagian hadapan
* Menyokong pemerolehan segerak dan tak segerak bagi pilihan menu subset
* Menyokong kebergantungan fleksibel antara menu (seperti kebergantungan linear, kebergantungan pokok, kebergantungan piramid terbalik, kebergantungan mesh)
* Menyokong pilihan nilai kosong menu (option[value=""])
* Logik pemerolehan menu subset dipisahkan daripada komponen itu sendiri
* Didorong oleh acara, menu di semua peringkat secara logiknya bebas antara satu sama lain dan tidak menjejaskan satu sama lain

Memandangkan menu pautan berbilang peringkat lebih mengganggu gelagat asal teg pilih dalam AngularJS, untuk memudahkan pengaturcaraan seterusnya dan mengurangkan kemungkinan konflik, artikel ini akan menggunakan {{item.text}} bukannya ngOptions.

1 Mula-mula, mari kita fikirkan soalan pertama, bagaimana untuk mengisi semula nilai awal di bahagian hadapan

Ciri paling jelas bagi menu pautan berbilang peringkat ialah selepas menu peringkat atas ditukar, menu peringkat bawah akan dipaparkan semula (secara serentak atau tak segerak). Dalam proses mengisi semula nilai, kita perlu mengisi semula langkah demi langkah, dan proses ini tidak dapat diselesaikan serta-merta apabila halaman dimuatkan (atau laluan dimuatkan, komponen dimuatkan, dsb.). Terutamanya dalam AngularJS, proses pemaparan pilihan harus berlaku sebelum pemaparan ngModel Jika tidak, walaupun terdapat nilai yang sepadan dalam pilihan, pilihan padanan tidak akan ditemui.
Penyelesaiannya adalah dengan terlebih dahulu menyimpan nilai awal model dalam fasa pautan arahan, tetapkan nilai nol (anda boleh memanggil $setViewValue), dan kemudian secara tak segerak memberikannya kembali kepada nilai asal selepas rendering selesai.

2. Bagaimana untuk memisahkan logik khusus pemerolehan sub-pilihan dan menyokong kedua-dua kaedah segerak dan tak segerak

Anda boleh menggunakan atribut kelas "=" dalam skop untuk mendedahkan fungsi luaran kepada kaedah pautan arahan. Setiap kali selepas melaksanakan kaedah ini, ia dinilai sama ada ia adalah contoh janji (atau sama ada ia mempunyai kaedah kemudian), dan pemaparan segerak atau tak segerak diputuskan berdasarkan keputusan penghakiman. Melalui penyahgandingan sedemikian, pengguna boleh dengan mudah memutuskan kaedah pemaparan dalam fungsi luaran yang diluluskan. Untuk menjadikan fungsi panggil balik kurang hodoh, kita juga boleh merangkum pulangan segerak sebagai objek dengan kaedah kemudian. Seperti yang ditunjukkan di bawah:

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

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();
});
}

4. 处理两类过期问题

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

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

对于空值的支持本来觉得是一个很简单的问题，{{empty}}即可，但实际编码中发现，在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
});
}
});
}
};
}]);