Bootstrapkm之路–008 jquery 001 插件开发 规范

取名规范

普普通通情况下用下面的模式开展命名:

jquery.pluginName.js

min版则应用与之接近的命名规划,并累加一个min标记:

jquery.pluginName.min.js

扩充jquery的老三种方式

  1. 经过一个简练的、jquery函数prototype属性的号(jquery.fn)进行扩展

这种方式其是确实上加一个函数,例如each、ajax这样的

  1. 使用jquery.extend()方法

眼看是凡使用的主意

  1. 下jquery ui widget factory进行扩张

立是jquery ui中之,不过它可退出jquery
ui运行。这种方式可以创建有状态的插件。

 

之前写的叠面板

css

 1 .km-accdion{
 2     width: 100%;
 3     overflow: hidden;
 4 }
 5 
 6 .km-accdion ul{
 7     margin: 0;
 8     padding: 0;
 9 }
10 
11 .km-accdion ul li{
12     margin: 0;
13     padding: 0;
14     list-style: none;
15 }
16 
17 .km-accdion-menu{
18     border-top: 1px solid #cccccc;
19     border-bottom: 1px solid #cccccc;
20 }
21 
22 .km-accdion-menu a{
23     display: block;
24     color: #555;
25     text-decoration: none;
26     background-color: #aaaaaa;
27     padding: .5em 1em;
28 }
29 
30 .km-accdion-menu a:hover{
31     color: white;
32 }
33 
34 .km-accdion-menu-item{
35     display: none;
36 }
37 
38 .km-accdion-menu-item a{
39     display: block;
40     color: #555;
41     text-decoration: none;
42     background-color: #dddddd;
43     padding: .5em 1em;
44     border-width: 1px;
45     border-color: transparent;
46     border-top-style: solid;
47     background-clip: padding-box;
48 }
49 
50 .km-accdion-menu-item a:hover{
51     color: #fff;
52     background-color: #cccccc;
53 }
54 
55 .km-accdion-menu-item-show{
56     display: block !important;
57 }
58 
59 .km-accdion-menu-item-show a{
60     display: block;
61     color: #555;
62     text-decoration: none;
63     background-color: #dddddd;
64     padding: .5em 1em;
65 }
66 
67 .km-accdion-menu-item-show a:hover{
68     color: #fff;
69     background-color: #cccccc;
70 }

 

js

 1 /**
 2  * 手风琴插件
 3  * TODO 多层嵌套
 4  * TODO 前面加小图标
 5  * TODO 去除对 reset.css 的依赖
 6  */
 7 ;(function ($) {
 8     'use strict';
 9 
10     /**
11      * 默认配置
12      * event : 触发手风琴切换的事件名称
13      * onlyOneMenuItem : 是否只显示一个菜单,true 表示只显示一个,false 表示每个菜单都可单独打开与关闭
14      * @type {{event: string, onlyOneMenuItem: boolean}}
15      */
16     var defaultOption = {
17         event: 'click',
18         onlyOneMenuItem : true
19     };
20 
21     var accdionClass = {
22         accdionItem : '.km-accdion-item',
23         accdionItemStr : 'km-accdion-item',
24 
25         accdionMenu : '.km-accdion-menu',
26         accdionMenuStr : 'km-accdion-menu',
27 
28         accdionMenuItem : '.km-accdion-menu-item',
29         accdionMenuItemStr : 'km-accdion-menu-item'
30     };
31 
32     /**
33      * 隐藏其它菜单
34      * @param currentItem 当前所在的 $('.km-accdion-item') 对象
35      */
36     function hideOtherMenuItem( currentItem ){
37         /**
38          *
39          * 其它菜单隐藏
40          * 思路:
41          * 1. 每次点击当前item的时候为其设置一个唯一ID,值为 currentMenuItemId + 时间戳 + 一个随机数,如:currentMenuItemId1513119262000578
42          * 2. 通过 $.siblings方法查找当前插件实例中的每个item,并加上not过滤,过滤值为当前item的id
43          * 3. 通过slideUp方法隐藏
44          *
45          */
46         var currentItemId = 'currentMenuItemId' + Date.parse(new Date().toDateString()) + Math.round(Math.random() * 10000);
47         currentItem.attr('id',currentItemId);
48         currentItem.siblings(accdionClass.accdionItem).not('#'+currentItemId).find(accdionClass.accdionMenuItem).slideUp(500);
49     }
50 
51     $.fn.kmaccdion = function (options) {
52 
53         var option = $.extend({},defaultOption,options);
54 
55         return this.each(function () {
56             var self = $(this);
57 
58             self.find(accdionClass.accdionItem).each(function () {
59                 var currentItem = $(this);
60                 currentItem.find(accdionClass.accdionMenu).on(option.event, function () {
61                     // 当前菜单的显示与隐藏
62                     var currentMenuItem = $(this);
63                     currentMenuItem.next(accdionClass.accdionMenuItem).slideToggle(300);
64 
65                     if( option.onlyOneMenuItem ){
66                         hideOtherMenuItem(currentItem);
67                     }
68 
69                 });
70             });
71 
72         });
73     };
74 })(jQuery);

 

引用

 1 <!-- category -->
 2 <div id="category-container">
 3     <div class="km-accdion">
 4         <div class="km-accdion-item">
 5             <ul class="km-accdion-menu-item-show">
 6                 <li><a href="#">全部</a></li>
 7             </ul>
 8         </div>
 9         <div class="km-accdion-item">
10             <div class="km-accdion-menu">
11                 <a href="#">移动开发</a>
12             </div>
13             <ul class="km-accdion-menu-item">
14                 <li><a href="#">移动开发</a></li>
15                 <li><a href="#">Android 开发</a></li>
16                 <li><a href="#">ISO 开发</a></li>
17             </ul>
18         </div>
19         <div class="km-accdion-item">
20             <div class="km-accdion-menu">
21                 <a href="#">前端开发</a>
22             </div>
23             <ul class="km-accdion-menu-item">
24                 <li><a href="#">前端开发</a></li>
25                 <li><a href="#">HTML/CSS</a></li>
26                 <li><a href="#">JavaScript</a></li>
27                 <li><a href="#">HTML5/CSS3</a></li>
28                 <li><a href="#">ECMAScript 6</a></li>
29                 <li><a href="#">JQuery</a></li>
30             </ul>
31         </div>
32     </div>
33 </div>
34 <!-- // category -->

 

效果

Bootstrap 1

 

不足

  1. 面板插件绑定了面板内容的展示,无法从定义

2.
样式比较难看【好吧,以自我手上之CSS水平的话,能写/抄起这么的成效就挺科学了】

  1. 从未图标

  2. 无法加载远程数据【即是最好无法经受的

  3. 莫享有通用性【为是心有余而力不足经受之

  4. 面板切换方式极其过低等

 

 

jquery插件开发最佳实践

由此看来jquery插件开发出如下最佳实践:

  1. 在jquery名称空间中单吗插件声明单个名称
  2. 否插件中的波及数据定义名称空间
  3. 收到一个options参数为控制插件的作为
  4. 为插件的默认设置提供公开的走访
  5. 保安私有函数的私有性
  6. 光天化日要明白之函数
  7. 支持链式调用

这边虽无考虑metadata插件了,因为$.data已经提供了类似的效力

理所当然,现在不过是支付折叠面板、下拉菜单、tab选项面板之类的简练插件,如果一旦开支datagrid等插件,我看需要动用jquery
ui widget factory。

 

一个自定义事件之例子

夫事例实现之功用十分简单,

每当一个div中出一个按钮

div默认有边框以及padding

单击按钮可以更改边框颜色要去掉padding

当边框改变之后,触发自定义事件【重难点】

js

  1 ;(function ($, window, document, undefined) {
  2 
  3     /**
  4      * 插件的私有方法
  5      * 初始化
  6      * @param jq jquery 对象,和你使用$('#one')获得的对象是一样的
  7      */
  8     function init(jq) {
  9         // 初始化步骤:
 10         // 1. 初始化插件样式,这里就不写那么多了
 11         console.log('私有方法:init');
 12 
 13         // 2. 自定义事件
 14         // 绑定事件,我这里是直接绑定在插件本身上面
 15         jq.on('onBorderChanged.kmAccordion', jq.config.onBorderChanged);
 16 
 17         // 3. 绑定单击事件逻辑,实现点击按钮,改变padding和border
 18         jq.find('button').click(function () {
 19             var text = jq.find('button').text();
 20             // 私有方法调用公有方法
 21             jq.kmAccordion('changeBorder',text);
 22         });
 23     }
 24 
 25     function sayNo() {
 26         console.log('私有方法:sayNo');
 27     }
 28 
 29     /**
 30      * 插件实现代码
 31      * @param options 如果是json对象,则创建[初始化]插件,如果是字符串,则用来调用插件的公开方法
 32      * @param param 当前options是字符串时,代表传递给插件公开方法的参数。当然,你可以不传
 33      * @returns {*}
 34      */
 35     $.fn.kmAccordion = function (options, param) {
 36         // console.log(this);
 37         // 如果是方法调用
 38         if (typeof options === 'string') {
 39             return $.fn.kmAccordion.methods[options](this, param);
 40         }
 41 
 42         // 获得配置,这里为了得到用户的配置项,覆盖默认配置项,并保存到当前jquery插件实例中
 43         var _opts = $.extend({}, $.fn.kmAccordion.defaults, options);
 44         var jq = this;
 45         jq.config = _opts;
 46 
 47         // 链式调用
 48         return this.each(function () {
 49             // console.log(this);
 50             // 调用私有方法,初始化插件
 51             init(jq);
 52         });
 53     };
 54 
 55 
 56     /**
 57      * 插件的公开方法
 58      */
 59     $.fn.kmAccordion.methods = {
 60         changeBorder: function (jq, text) {
 61             // 公有方法可以相互调用
 62             jq.kmAccordion('sayHello');
 63 
 64             // 公有方法调用私有方法,但是对插件外部来说,私有方法是不可见的
 65             sayNo();
 66 
 67             // 实现逻辑
 68             jq.css({'border-color':jq.config.color});
 69             if( jq.config.clearPadding ){
 70                 jq.css({'padding':'0'});
 71             }
 72             console.log('按钮文本:'+text);
 73 
 74             // 触发事件
 75             jq.config.onBorderChanged.call(jq, jq.css('border-color'));
 76 
 77             // 返回jquery对象,支持链式调用
 78             return jq;
 79         },
 80         sayHello : function(jq){
 81               console.log('hello');
 82               return jq;
 83         },
 84         options: function (jq) {
 85             // 这个就不需要支持链式调用了
 86             return jq.config;
 87         }
 88     };
 89 
 90 
 91     /**
 92      * 插件的默认配置
 93      */
 94     $.fn.kmAccordion.defaults = {
 95         // 属性
 96         clearPadding: true,
 97         color: 'blue',
 98 
 99         /**
100          * 自定义事件
101          * @param color 事件触发时的参数
102          */
103         onBorderChanged: function (color) {
104             console.log('默认事件实现,当然,你也可以不实现,留空:' + color);
105         }
106     };
107 })(jQuery, window, document);

 

 

 

调用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             border: 1px solid red;
 9             padding: 20px;
10             float: left;
11             margin: 20px;
12         }
13     </style>
14 </head>
15 <body>
16 <div id="one">
17     <button>第一个按钮</button>
18 </div>
19 <div id="two">
20     <button>第二个按钮</button>
21 </div>
22 
23 <button id="btnone">调用第一个插件的方法</button>
24 <button id="btntwo">调用第二个插件的方法</button>
25 
26 
27 
28 <script type="text/javascript" charset="UTF-8" src="./external/jquery.min.js"></script>
29 <script type="text/javascript" charset="UTF-8" src="one.js"></script>
30 <script type="text/javascript" charset="UTF-8">
31     $(function () {
32         // 实例化插件,改变一下默认配置
33         var one = $('#one').kmAccordion({
34             clearPadding:false,
35             color : 'black',
36             onBorderChanged : function (color) {
37                 console.log('自定义事件:'+color);
38             }
39         });
40         // 实例化插件,使用默认配置
41         var two = $('#two').kmAccordion();
42 
43         $('#btnone').click(function () {
44             console.log('外部调用 公开方法 1');
45             // 调用插件的方法,同时会触发自定义事件
46             one.kmAccordion('changeBorder',one.find('button').text());
47         });
48 
49         $('#btntwo').click(function () {
50             console.log('外部调用 公开方法 2');
51             // 这个也调用一下
52             two.kmAccordion('changeBorder',two.find('button').text());
53         });
54 
55     });
56 </script>
57 </body>
58 </html>

 

 

效果


 

默认运行效果

Bootstrap 2

 

 


 

 

单击第一只div中的按钮

Bootstrap 3

 

 


 

刷新页面,单击第二单div中的按钮

Bootstrap 4

 

 


 

 

刷新页面,单击:《调用第一独插件的主意》按钮

Bootstrap 5

 

 


 

刷新页面,单击:《调用第二独插件的方》按钮

Bootstrap 6

可观看效果或对的。

注意事项

如随时检点this的对准

拿36尽与49尽注释打开,刷新页面,就见面看因

Bootstrap 7

 

地方例子的演化流程

 

 

 

基于MVC的JavaScript Web富应用开发

 

 KM项目插件体系设计

 

N-2

研究 jquery ui 源码

N-1

切磋Bootstrap js组件源码

 

终极目标

基于es5/6构建KM项目前端JS UI库

 

相关文章