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就初始化完成了。