楼主最近在研究angularJs，并且使用angularJS开发了3个系统了，一些坑已经为大家都踩过了，于是就有点迫不及待的想和大家分享一些心得和经验。
从本篇文章开始，后续我将推送几篇angularJs开发相关的文章，以及angularjs的一些神奇特性的实例。不过在做angularjs开发之前，需要了解jquery的一些关键概念，如闭包，作用域，原型等。与其说大段的概念东西，不如直接上实例更直接些。下面是jquery闭包开发实例，及如何使用jquery开发自己的插件。通过这些实例，对大家后续学习angular语法会更有帮助。
本篇是一篇比较基础的文章，老司机可以直接绕过。。。
//使用命名空间.使用方式：$.myJS.show();
jQuery.myJS = {
show:function (){
alert("show....");
},
hide:function (){
alert("hide...");
}
};
//使用全局函数.使用方式：$.testA();
jQuery.testA = function (){
alert("global function....");
};
jQuery.testB = function (){
alert("global function....");
};
//闭包结构：(function($){$.fn.extend({ pluginName1:function(){},pluginName2:function(){} })})(jQuery);//对象级别,通过闭包.我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.使用方式：$("#test").pluginA();
(function($){
$.fn.extend({
pluginA:function(){
alert("pluginA....");
},
pluginB:function(){
alert("pluginB....");
}
});
})(jQuery);
//在JQuery名称空间下申明一个名字，使用方式：$("#test").pluginC();
$.fn.pluginC = function() {
alert("pluginC....");
};
//添加参数,使用方式：$("#test").pluginD(); 或 $("#test").pluginD({attr1:'attribute3'});
$.fn.pluginD = function(options) { var defaults = {
attr1:'attribute1',
attr2:'attribute2'
}; var opts = $.extend(defaults,options);
alert(opts.attr1);
};<html><head>
<title></title>
<meta charset="utf-8" />
<link href="my.css" type="text/css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="my.js"></script>
<script>
$(function(){
$("#show").click(function(){
$.myJS.show();
});
$("#hide").click(function(){
$.myJS.hide();
});
$("#global").click(function(){
$.testA();
});
$("#pluginA").click(function(){
$("#pluginA").pluginA();
});
$("#pluginC").click(function(){
$("#pluginC").pluginC();
});
$("#pluginD").click(function(){ //defult opts:$("#pluginD").pluginD();
$("#pluginD").pluginD({attr1:'attribute3'});
});
}); </script></head><body>
<div class='menu'>
<button type="button" id="show">show</button>
<button type="button" id="hide">hide</button>
<button type="button" id="global">global</button>
<button type="button" id="pluginA">pluginA</button>
<button type="button" id="pluginC">pluginC</button>
<button type="button" id="pluginD">pluginD</button>
</div></body> </html>button { width:100px; text-align:center; line-height:100%; padding-top:0.5em; padding-right:2em; padding-bottom:0.55em; padding-left:2em; font-family:Courier New,sans-serif; font-size:14px; font-style:normal; font-variant:normal; font-weight:normal; text-decoration:none; margin:0 10px 0 0; vertical-align:text-bottom; display:inline-block; cursor:pointer; zoom:1.2; /*元素大小*/
outline-width:medium; outline-color:invert; font-size-adjust:none; font-stretch:normal; border-top-left-radius:0.6em; /*设置圆角度数，越大表示越圆*/
border-top-right-radius:0.6em; border-bottom-left-radius:0.6em; border-bottom-right-radius:0.6em; box-shadow:0px 1px 2px rgba(0,0,0,0.2); text-shadow:0px 1px 1px rgba(0,0,0,0.3); color:#fefee9; border-top-color:#FFF; /*线的边框颜色*/
border-right-color:#FFF; border-bottom-color:#FFF; border-left-color:#FFF; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; background-image:none; background-attachment:scroll; background-repeat:repeat; background-position-x:0%; background-position-y:0%; background-size:auto; background-origin:padding-box; background-clip:padding-box; background-color:#f78d1d;
}button:hover { background: #f47c20;
}.menu { margin:50px 0 0 50px;
}4、一个比较完整的jquery闭包实例
// 创建一个闭包 (function($) {
// 插件的定义
$.fn.hilight = function(options) {
debug(this);
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// 私有函数：debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
// 定义暴露format函数
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
// 插件的defaults
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
}; // 闭包结束 })(jQuery);
5、补充：一个在线制作按钮样式的网站:http://buttoncssgenerator.com 可在线生成按钮css