重构JS / jQuery代码

Question

前提：

我正在创建一个包含许多HTML选项的页面，其中包含Product-> SubProduct-> Task之类的关系。 Task取决于SubProduct，而Product依赖于$each加载。

我在javascript中多次重复我的代码。

问题：

我一再尝试更改此代码，但我有很多变量。我尝试创建一个函数，但因为我使用$("#ProductId").change(function () { $("#SubProductId").empty(); $("#TaskId").empty(); $("#SubProductId").append('<option value="0">[Select ...]</option>'); $.ajax({ type: 'POST', url: urlGetSubProducts, dataType: 'json', data: { productId: $("#ProductId").val() }, success: function (data) { $.each(data, function (i, data) { $("#SubProductId").append('<option value="' + data.SubProductId + '">' + data.Name + '</option>'); }); ValidateFilledFields(); }, error: function (ex) { alert('Fail to find subproduct.' + ex); } }) return false; }) return false; })

而徒劳无功

我接受任何以任何身份重构此代码的建议。

代码：

<div>
	@Html.LabelFor(m => m.ProductId, "Product")
	@Html.DropDownList("ProductId", null, htmlAttributes: new { @class = "form-control", required = "required" })
</div>

ProductId

说明：

a是上面HTML中的属性ID

Answer 1

使用字符串插值

可以改进代码的唯一方法

               $("#VersionId").append(`<option value="
                 ${data.VersionId}">
                ${data.VersionName}</option>`);

注意：省略了县 - ＆gt;州 - ＆gt;因为与ajax无关的城市段落

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 2

提案：

您可以轻松地设计逻辑，以遵循这样的结构化方法：

const getCountries = _ => new Promise((res,rej) => $.ajax({
    ...yourNormalConfigData,
    success: res,
    fail: rej,
})).then(d => d.countries) // Get contries from response 

const getStates = country => new Promise((res,rej) => $.ajax({
    url: `/foo/bar/get/States?country=${country}`,
    ...yourNormalConfigData,
    success: res,
    fail: rej,
}).then(d => d.states) // Get states from response 

const getCities = state => new Promise((res,rej) => $.ajax({
    url: `/foo/bar/get/Cities?state=${state}`,
    ...yourNormalConfigData,
    success: res,
    fail: rej,
}).then(d => d.cities) // Get cities from response

const injectOptions = elem => arr => {
  const html = arr.map(c => `<option>${c}</option>`).join('')
  elem.html(html)
}

const el = {
  country: $('#Countries'),
  state: $('#States'),
  city: $('#Cities'),
}
getCountries().then(injectOptions(el.country))

el.country.change(e => {
  getStates(el.country.val()).then(injectOptions(el.state))
})

el.state.change(e => {
  getCities(el.state.val()).then(injectOptions(el.city))
})

<select id='Countries'>
</select>
<select id='States'>
</select>
<select id='Cities'>
</select>

说明：

这是利用promises和大量代码重复使用，以便您可以使用相同的组件动态加载和配置数据。我尽量不要偏离你的代码库。它还具有用于整洁的承诺逻辑流程的curried函数！