分析boostrap tags-input组件并进行二次封装开发-1

bootstrap-tagsinput 的官方地址 http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

我的项目地址为https://github.com/JackWuChengHao/boostrap-ui-components

现有的tagsinput但是感觉在开发过程中对于组件将添加事件写死感觉不太好，希望将添加tags事件接口暴露给开发人员使用所以在此组件上进行修改。

首先需要先分析一下组件的编写原理与方式

基于jquery开发组件的一般步骤

(function($){
//组件默认设置参数
var defaultOptions = {
...
};

//组件的构造函数
function ClassConstructor(element,options){

....

}
//组件类的原型及其实现
Class.prototype{

constructor:ClassConstructor,

//组件功能实现
action1:function(){
...
},
action2:function(){
...
},
//创建组件对象
build:function(options){
...
}
};
//将组件注册为juqery的插件
$.fn.classname = function(args){
...
};

$.fn.classname.constructor = ClassConstructor;

//为组件提供公用常量
var const_variable = ...;
//为组件提供公共的工具方法
function tools1(){
...
}
function tools2(){
...
}
function tools3(){
...
}
//启动组件的使用
 $(function() {
    $("input[data-role=...]").constructor();
  });

})(window.jQuery)

在上述的代码块中

1.使用匿名函数(function($){ })(window.jQuery)将window.jQuery在组件内变为$变量

2.设置defaultOptions

3.编写组件类的构造函数

4.编写组件类的实现函数

5.将组件注册为jquery插件，并为其绑定构造函数

6.启用并运行组件