javascript - 尝试创建一个 select2 包装器

Question

我正在尝试创建一个围绕 select2 的包装器，它可以接受 url 或包含数据的数组。如果我将数据传递给包装器，那么我想禁止在输入每个字母后触发 ajax 请求。

如果传递数据然后禁用 ajax 请求，如何配置此行为(无需复制代码并使用 if)

基本上是以下代码

  SelectTwo.init = (el, text, url, data = []) ->
    @_url = url
    @_data = data

    el.select2
      placeholder: text
      minimumInputLength: 2
      data: @_data
      ajax:
        url: (term) =>
          @_url + '/' + term
        dataType: "json"
        results: (data, page) ->
          results: data

Answer 1

el.select2 的参数是一个选项对象，它不必是一个对象文字，只是一个对象。这意味着您可以根据 init 的参数逐段构建对象。

你可以这样做:

SelectTwo.init = (el, text, data_source = { }) ->
  select_opts =
    placeholder: text
    minimumInputLength: 2

  if(data_source.url)
    select_opts.ajax =
      url: (term) -> "#{data_source.url}/#{encodeURIComponent(term)}"
      dataType: "json"
      results: (data, page) ->
        results: data
  else if(data_source.data)
    select_opts.data = data_source.data
  else
    # handle this however you want

  el.select2 select_opts

一些兴趣点:

1. 我在搜索词周围添加了一个 encodeURIComponent 包装器，因为我很偏执，但这是一个好习惯。
2. 我改用字符串插值来构建搜索 URL，因为这比一堆 + 和引号更清晰。
3. AJAX url 函数不再需要与 => 绑定(bind)。
4. 根本不需要任何实例变量(当然，除非其他地方发生了事情)。

5. 我将参数切换到 init 以提供对象中的 URL 或数据数组，以便您可以说:

   SelectTwo.init(el, 'pancakes', url: '...')
   SelectTwo.init(el, 'pancakes', data: [ ... ])
   

   而不是(IMO)更麻烦:

   SelectTwo.init(el, 'pancakes', '...')
   SelectTwo.init(el, 'pancakes', undefined, [ ... ])
   

   我发现如果有两个以上的位置参数就会变得很丑陋，当有可选参数抑制早期的非可选参数时更是如此。