标签：
现在，通过一个select插件，来介绍一下js插件的构建过程。
1.先上效果图
2.目录构建
（1）这个select插件，我给它起名交hongselect，所以呢，首先建个hongselect的文件夹。
（2）接着建一个src目录来放源码。
（3）我想把源代码托管到github上，所以呢，再建一个README.md文件，来写这个插件的一个说明文档。
（4）然后建一个.gitignore文件，来说明那些文件或文件夹是不需要加入代码版本管理的。
（5）该插件依赖于jQuery，我们要下载它，对于js依赖，我们可以使用bower来管理，并使用bower来发布我们的插件。
（6）使用bower，新建一个bower.json来配置。
（7）最后代码的打包工作，使用grunt来对js，css，和img文件进行压缩。
（8）使用grunt，新建一个package.json来配置。
最终的目录结构如下（上面没提到的文件接下来会介绍）：
3.源码书写
在src中，再建两个文件夹，一个css文件夹，用来放样式文件；一个img文件夹，用来放图片文件。
（1）JavaScript部分
在src中，新建一个hongselect.src.js文件。
源码如下：
(function ($) {
var defaultOptions = {
theme: "default"
};
//select object
var HongSelect = function (element, options) {
var that = this;
that.origin = $(element);
that.origin.hide();
that.options = $.extend({}, defaultOptions, options);
that.render();
};
HongSelect.prototype = {
render: function () {
var that = this;
var theme = that.options.theme;
that.container = that.container || that.origin.after("<div>").next();
that.container.addClass(theme + "_hongselect");
that.container.empty();
var infoSpan = that.container.append("<span>").find("span");
infoSpan.addClass(theme + "_info_span");
var dl = that.container.append("<dl>").find("dl");
dl.addClass(theme + "_dl");
$(that.origin).find("option").each(function (i, option) {
if (i == 0) {
infoSpan.text(option.text);
}
dl.append("<dd data-val=" + option.value + ">" + option.text + "</dd>");
});
//show selected value
infoSpan.text($(that.origin).find(‘option:selected‘).text());
//hide dd items
dl.hide();
var dd = dl.find("dd");
dd.addClass(theme + "_dd");
dd.hover(function () {
$(this).addClass(theme + "_dd_hover");
}, function () {
$(this).removeClass(theme + "_dd_hover");
});
//show and hide
infoSpan.click(function (e) {
e.preventDefault();
e.stopPropagation();
dl.show();
});
dd.each(function () {
$(this).click(function () {
infoSpan.text($(this).text());
$(that.origin).val($(this).attr("data-val"));
$(that.origin).trigger("change");
});
});
//click blank hide
$(document).click(function () {
dl.hide();
});
},
setSelectVal: function (value) {
this.origin.val(value);
this.render();
},
refresh: function () {
this.render();
}
};
$.fn.hongselect = function (option) {
var args = Array.apply(null, arguments);
args.shift();
this.each(function () {
var $this = $(this),
data = $this.data(‘hongselect‘),
options = typeof option == ‘object‘ && option;
if (!data) {
$this.data(‘hongselect‘, (data = new HongSelect(this, options)));
}
if (typeof option == ‘string‘ && typeof data[option] == ‘function‘) {
data[option].apply(data, args);
}
});
return this;
};
})(jQuery);
代码解释：
1）全局隔离函数
(function ($) {
//...
})(jQuery);
使用这样的一个立即执行的function的作用是什么呢？这样做是为了把我们插件的代码与全局代码隔离开，全部都在function这个作用域里，从而防止全局变量的污染。
2）扩展jQuery
$.fn.hongselect = function (option) {
var args = Array.apply(null, arguments);
args.shift();
this.each(function () {
var $this = $(this),
data = $this.data(‘hongselect‘),
options = typeof option == ‘object‘ && option;
if (!data) {
$this.data(‘hongselect‘, (data = new HongSelect(this, options)));
}
if (typeof option == ‘string‘ && typeof data[option] == ‘function‘) {
data[option].apply(data, args);
}
});
return this;
};
这个是个jQuery扩展一个hongselect的方法。$.fn这个是什么呢？这个fn既是JavaScript中的prototype，jQuery只是用fn来替代prototype，这样你就能明白为什么$.fn.hongselect这样就能够使用$(‘选择器‘).hongselect()这样的方式来使用了。
其他的代码就比较简单，不一一详解了。
（2）接下来是写css了
在css中新建一个hongselect.css文件。
.default_hongselect {
width: 150px;
position: absolute;
}
.default_info_span {
cursor: pointer;
text-indent: 10px;
color: #666;
display: block;
padding-right: 20px;
height: 30px;
line-height: 25px;
background: url(../img/arrow.png) no-repeat right center;
position: relative;
border: 1px solid #ccc;
text-overflow: ellipsis;
overflow: hidden;
}
.default_dl {
border-bottom: 1px solid #ccc;
margin: 1px 0 0;
}
.default_dd {
cursor: pointer;
height: 30px;
line-height: 25px;
color: #666;
white-space: normal;
padding: 0 10px;
background: #f1f1f1;
margin: 0;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
text-overflow: ellipsis;
overflow: hidden;
}
.default_dd_hover {
background: #fff;
}
（3）将图片放入img文件
OK，代码书写完毕。
4.测试
配置bower.json
{
"name": "hongselect",
"version": "0.0.1",
"homepage": "https://github.com/liuhongqiang/hongselect",
"authors": [
"liuhongqiang <liuhongqiang@live.cn>"
],
"description": "A simple web select.",
"main": "src/hongselect.src.js",
"keywords": [
"select"
],
"license": "MIT",
"ignore": [
"node_modules",
"bower_components"
],
"devDependencies": {
"jquery": "2.1.4"
}
}
在命令行使用命令下载jQuery，具体使用方法见bower官网。
bower install
调用命令后，就会在当前目录下创建一个bower_components的文件夹，并将我们依赖的js下载到该目录。
然后我们就可以引用它来做测试了，我们建一个doc/example来放我们的测试文件。
<html lang="en">
<head>
<meta charset="utf-8">
<title>HongSelect</title>
<link rel="stylesheet" type="text/css" href="../../src/css/hongselect.src.css">
<script type="text/javascript" src="../../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../src/hongselect.src.js"></script>
<script type="text/javascript">
$(function(){
$("#myselect").hongselect();
$("#btn_setval").click(function(){
$("#myselect").hongselect("setSelectVal","1");
});
});
</script>
</head>
<body>
<select id="myselect">
<option value="1">one</option>
<option value="2" selected>two</option>
<option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
</select>
<button id="btn_setval">set value = 1</button>
</body>
</html>
5.打包
好了，项目测试好之后我们就可以打包插件了。
我们用grunt来打包它，grunt配置如下，具体使用方法见官网。
1）package.json
{
"name": "hongselect",
"version": "0.0.1",
"description": "A simple web select.",
"dependencies": {
"grunt": "^0.4.5",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-clean":"~0.6.0",
"grunt-contrib-cssmin":"~0.10.0",
"grunt-contrib-imagemin": "~0.7.0"
}
}
2)Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
clean: {
build: {
src: ["dist/**"]
}
},
uglify: {
build: {
src: "src/hongselect.src.js",
dest: "dist/hongselect.min.js"
}
},
cssmin: {
build: {
src: "src/css/hongselect.src.css",
dest: "dist/css/hongselect.min.css"
}
},
imagemin: {
build: {
src: "src/img/arrow.png",
dest: "dist/img/arrow.png"
}
}
});
//注册插件
grunt.loadNpmTasks("grunt-contrib-clean");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-imagemin");
// 默认被执行的任务列表。
grunt.registerTask("default", ["clean", "uglify", "cssmin", "imagemin"]);
};
用命令行调用grunt就会将压缩好的js、css、img放入dist目录。
grunt
6.发布
通过bower命令发布
bower register <my-package-name> <git-endpoint>
发布后可以在bower.io上查找到：
7.托管
通过git将代码托管到github上。
git add git commit git push
地址：https://github.com/liuhongqiang/hongselect
标签：
原文地址：http://www.cnblogs.com/xiaoxiaoyiran/p/4701817.html
