jquery插件select2源码解读(三) options

在这一小节，我们开始详细的阐述select2插件是怎么从初始化到生成的。

看代码：

define([
  'jquery',
  './options',
  './utils',
  './keys'
], function ($, Options, Utils, KEYS) {
//....
})

使用过requirejs的都知道define方法的使用。从上面的代码可以看出，该方法把依赖的模块jquery,options,utils,keys注入到下面的方法中，并且模块和参数是一一对应关系，并且顺序一致。jquery想必大家都很熟悉，那么后面三个模块我们看代码吧^^.

先看看整体结构：

var Select2 = function ($element, options) {//初始化插件
	 if ($element.data('select2') != null) {
	 $element.data('select2').destroy();
	 }
	//code…
	$element.data('select2', this);
  };
Utils.Extend(Select2, Utils.Observable);//观察者模式
Select2.prototype._generateId = function ($element) { };
Select2.prototype._placeContainer = function ($container) { };
//code select2原型链方法
//…
//…
 Select2.prototype.destroy = function () {}；
Select2.prototype.render = function () {}；
return Select2;//最后生成了select2

下面来细看整个生成过程：

 if ($element.data('select2') != null) {
      $element.data('select2').destroy();
    }

    this.$element = $element;

    this.id = this._generateId($element);

当我们定义的select控件元素属性中定义了data-select2,那么就销毁已生成的插件。

Select2.prototype._generateId = function ($element) {
    var id = '';

    if ($element.attr('id') != null) {
      id = $element.attr('id');
    } else if ($element.attr('name') != null) {
      id = $element.attr('name') + '-' + Utils.generateChars(2);
    } else {
      id = Utils.generateChars(4);
    }

    id = id.replace(/(:|\.|\[|\]|,)/g, '');
    id = 'select2-' + id;

    return id;
  };

这里this.id生成由'select2-'和id拼接的标识。接下来可以看到：

options = options || {};

    this.options = new Options(options, $element);

 这里初始化了options的信息，new了一下，看一下options这个依赖模块的：

define([
  'require',
  'jquery',
  './defaults',
  './utils'
], function (require, $, Defaults, Utils) {
  function Options (options, $element) {}
  Options.prototype.fromElement = function ($e) {};
  Options.prototype.get = function (key) {};
  Options.prototype.set = function (key, val) {};
return Options;
}

上面采用了同样的注入方式。这里主要看defaults和untils模块。那么先看options的初始化吧：（继续copy代码^_^~）

function Options (options, $element) {
    this.options = options;

    if ($element != null) {
      this.fromElement($element);
    }

    this.options = Defaults.apply(this.options);

    if ($element && $element.is('input')) {
      var InputCompat = require(this.get('amdBase') + 'compat/inputData');

      this.options.dataAdapter = Utils.Decorate(
        this.options.dataAdapter,
        InputCompat
      );
    }
  }

我们直接跳到this.options = Defaults.apply(this.options);于是我们就看到了select2默认的参数，依赖模块defaults:

  Defaults.prototype.apply = function (options) {
    options = $.extend(true, {}, this.defaults, options);

    if (options.dataAdapter == null) {
      if (options.ajax != null) {
        options.dataAdapter = AjaxData;
      } else if (options.data != null) {
        options.dataAdapter = ArrayData;
      } else {
        options.dataAdapter = SelectData;
      }
//.....
return options;
  };

这里把所有的依赖的模块以define的方式注入到defaults的options中

define([
  'jquery',
  'require',

  './results',

  './selection/single',
  './selection/multiple',
  './selection/placeholder',
  './selection/allowClear',
  './selection/search',
  './selection/eventRelay',

  './utils',
  './translation',
  './diacritics',

  './data/select',
  './data/array',
  './data/ajax',
  './data/tags',
  './data/tokenizer',
  './data/minimumInputLength',
  './data/maximumInputLength',
  './data/maximumSelectionLength',

  './dropdown',
  './dropdown/search',
  './dropdown/hidePlaceholder',
  './dropdown/infiniteScroll',
  './dropdown/attachBody',
  './dropdown/minimumResultsForSearch',
  './dropdown/selectOnClose',
  './dropdown/closeOnSelect',

  './i18n/en'
]

简单的看下有我们常用的单选下拉，多选下拉，placeholder,ajax...etc...

这样options就初始化完成了。