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') !=
4000
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就初始化完成了。