JavaScript插件封装主要分成两类:
* 类级别封装-相当于jQuery类的静态函数
* 对象级别封装
一. 类级别封装方法
1.单个方法封装
- //封装
- jQuery.alert = function(name) {
- alert(name);
- }
- //调用$.alert('aa')或jQuery.alert('aa')
- $.alert('Mike');
2.多个方法封装,调用$.warn('aa')或者jQuery.warn('aa')
- <!DOCTYPE html>
- <html>
- <head>
- <script src="/jquery/jquery-1.11.1.min.js">
- </script>
- <script>
- $(document).ready(function(){
- $("p").click(function(){
- jQuery.warn('Mike');
- });
- });
- //封装
- jQuery.extend({
- alert: function(name) {
- alert("alert:" + name);
- },
- warn: function(name) {
- alert("warn:" + name);
- }
- });
- </script>
- </head>
- <body>
- <p>如果您点击我,我会消失。</p>
- <p>点击我,我会消失。</p>
- <p>也要点击我哦。</p>
- </body>
- </html>
3.域名调用,并封装多个方法
- <!DOCTYPE html>
- <html>
- <head>
- <script src="/jquery/jquery-1.11.1.min.js">
- </script>
- <script>
- $(document).ready(function(){
- $("p").click(function(){
- //调用
- jQuery.messager.warn('Mike');
- });
- });
- //封装
- jQuery.messager = {
- alert: function(name) {
- alert("alert:" + name);
- },
- warn: function(name) {
- alert("warn:" + name);
- }
- }
- </script>
- </head>
- <body>
- <p>如果您点击我,我会消失。</p>
- <p>点击我,我会消失。</p>
- <p>也要点击我哦。</p>
- </body>
- </html>
二. 对象级别的插件开发
形式1:
- <!DOCTYPE html>
- <html>
- <head>
- <script src="/jquery/jquery-1.11.1.min.js">
- </script>
- <script>
- $(document).ready(function(){
- $("p").click(function(){
- //重要:$.extend(obj)扩展的为jQuery类的静态方法调用可采用如$.alert() 或直接alert()
- //$.fn.extend(obj)扩展的为对象的方法,因此调用不能用$.alert(),要直接alert()
- //调用
- alert('Mike');
- //报错
- //$.alert('Mike');
- });
- });
- //声明一个函数并立即执行函数,用$(形参)代替jQuery实参
- $(function($) {
- $.fn.extend({
- alert: function(name) {
- alert(name);
- }
- });
- }(jQuery));
- </script>
- </head>
- <body>
- <p>如果您点击我,我会消失。</p>
- <p>点击我,我会消失。</p>
- <p>也要点击我哦。</p>
- </body>
- </html>
形式2
- <!DOCTYPE html>
- <html>
- <head>
- <script src="/jquery/jquery-1.11.1.min.js">
- </script>
- <script>
- $(document).ready(function(){
- $("p").click(function(){
- //正确调用方式
- $('body').jAlert('Mike');
- //报错
- //$.jAlert('aa');
- //报错
- //jAlert('aa');
- });
- });
- //声明一个函数并立即执行函数,用$(形参)代替jQuery实参
- $(function($) {
- //这种方式使得调用方式为$(element).jAlert('aaa'),其他方式$.jAlert('aa')或者jAlert('aa')都会出错
- $.fn.jAlert = function(name){
- alert(name)
- }
- }(jQuery));
- </script>
- </head>
- <body>
- <p>如果您点击我,我会消失。</p>
- <p>点击我,我会消失。</p>
- <p>也要点击我哦。</p>
- </body>
- </html>
3.options控制插件
- <!DOCTYPE html>
- <html>
- <head>
- <script src="/jquery/jquery-1.11.1.min.js">
- </script>
- <script>
- $(document).ready(function(){
- $("p").click(function(){
- //正确调用方式
- $(this).jAlert();
- });
- });
- //声明一个函数并立即执行函数,用$(形参)代替jQuery实参
- $(function($) {
- $.fn.jAlert = function(options){
- var defaults = {
- color: '#fff',
- background: '#000'
- };
- options = $.extend({}, defaults, options);
- //$(this).css({'color': options['color')});
- $(this).css({'color': "" + options['color'], 'background': "" + options['background']});
- };
- }(jQuery));
- </script>
- </head>
- <body>
- <p>如果您点击我,我会消失。</p>
- <p>点击我,我会消失。</p>
- <p>也要点击我哦。</p>
- </body>
- </html>
3.暴露设置、暴露函数、私有设置、私有函数
暴露与暴露函数使得插件可扩展
暴露设置,用户使用时可设置如$.fn.hilight.defaults.color
暴露函数,用户可重写暴露的函数如$.fn.hilight.format = function(){}
有一点注意:
调用插件时$(element).hilight(), 则插件内操作元素如设置样式等,都是针对该element,在插件内通过$(this)获取element,
经过调试,如hilight插件,return this.each(function(...))是指对每个符合要求的element操作,如$('p'),对所有<p>标签操作,如果插件内不用return this.each,也会对标签内的所有<p>操作,但是方法只执行了一次
- // 创建一个闭包
- (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);