开发自定义Jquery插件
这几年随着各种前端框架的出现，操作DOM被更多的封装起来，有些项目你甚至可以完全抛开jquery进行开发，但不可否认的是，jquery多年来作为前端工程师的必备基本功夫有其不可替代的作用，即使你不用jquery，你也应该掌握他:
- 大多数项目依然在采用jquery，虽然不作为框架，但作为操作DOM的库文件用；
- 编写小网站依然是不错的选择，尤其是数不清的优秀插件能为你所用，他能单独为你撑起一片天；
- jquery的编程思想，是理解javascript的很好的路子；
Begin（三种方式）
1. 构建js闭包
;(function($,window,document,undefined){
'use strict';
$('#app').html('hello world');
})(jQuery,window,document)
注意事项：
-
1.1' ; '的使用，放只前一个函数末尾没';',导致js解析错误；
var func = function{} (function($,window,document){ 'use strict'; $('#app').html('hello world'); })(jQuery,window,document)
控制台报错Uncaught SyntaxError: Unexpected token {
-
1.2 jquery,window,document放入局部作用域中，据说可以加快速度，未测试出来，聊胜于无嘛，加上得了，undefined是为了...还没弄清，应该是变量污染。
-
1.3 'use strict';采用严格模式，编写更规范化，将来向ES6容易过渡。
2. jquery插件模式（方式一）
;(function($,window,document){
'use strict';
$.fn.myPlugin = function(){
return($(this).html('hello world'))
}
})(jQuery,window,document)
//html code
<div id="app"></div>
...
<script type="text/javascript">
$('#app').myPlugin();
</script>
执行后DIV中会加入'hello world'.
jquery.fn 即 jquery.prototype
3. 对选中的元素遍历，jquery选择器的牛逼之处
$.fn.myPlugin = function(){
return this.each(function(){
var $this = $(this);
$this.html('hello world');
})
}
//html code
<div class="app"></div>
<div class="app"></div>
<script type="text/javascript">
$('.app').myPlugin();
</script>
4. 默认属性/方法保护
var defaults = {
100,
height:100
}
var defaultsFunc = {
getValue:function(ele,param){},
setValue:function(ele,param){}
}
var methods = {
'init':function(option){
option = $.extend({},defaults,option);
return this.each(function(){
var $this = $(this);
$this.html('hello world');
})
},
'destroy':function(){}
}
$.fn.myPlugin = function(){
return methods.init.apply(this);
}
通过apply隐藏内部结构，通过$.extend来合并默认配置和用户自定义配置，避免多个实例对默认属性造成变化
5.对用户输入进行判断
用户输入的可能为多种类型,其他输入默认为非法输入，抛出异常：
$(ele).myPlugin(); //按照默认配置初始化
$(ele).myPlugin(string); //调用方法
$(ele).myPlugin(object); //按照自定义配置初始化
$.fn.myPlugin = function(){
var args = arguments[0];
if(!args){
return methods.init.apply(this,arguments);
}else{
if(typeof(args) === 'object'){
return methods.init.apply(this,arguments);
}else if(typeof(args) === 'string'){
if(methods[args]){
return methods[args].apply(this,arguments);
}else{
throw new Error(args + 'is not a function of this plugin');
}
}else{
throw new Error('unvaliabled param');
}
}
}
至此，一个插件的基本功能就具备了，接下来看看插件的其他知识.
6. 对jquery的方法进行拓展
//公有方法，外部能进行修改，可用于对插件进行拓展
$.fn.sayHello = function(){
return {self:'self'}
}
or
$.fn.extend({
sayHello: function(){
return {self:'self'};
}
})
//私有方法，只有插件内部进行调用
function func(){...}
or
var func = function(){...}
7.定义插件的另一种方式（方式二）
//默认参数
var defaluts = {
foreground: 'red',
background: 'yellow'
};
$.fn.extend({
"highLight": function (options) {
//检测用户传进来的参数是否合法
if (!isValid(options))
return this;
var opts = $.extend({}, defaluts, options);
return this.each(function () {
var $this = $(this);
});
}
});
8.还有一种类似方式（方式三）
//默认参数
var defaluts = {};
var highLight = function(ele,options){
$(ele).html(options.value);
}
$.fn.selfHighLight = function(args){
return this.each(function(){
var hL = new highLight(this,args);
})
}