分享我對JS插件開發(fā)的一些感想和心得
本文閱讀目錄：
•起因
•如何開發(fā)一個輕量級的適用性強的插件
•總結(jié)
起因
如果大家平時做過一些前端開發(fā)方面的工作，一定會有這樣的體會：頁面需要某種效果或者插件的時候，我們一般會有兩種選擇：
1、上網(wǎng)查找相關(guān)的JS插件，學(xué)習(xí)其用法
2、自己造輪子，開發(fā)插件。
尋找存在的插件
第一種做法，上網(wǎng)查找JS插件
這種方式如果是有剛好符合項目需求的插件，那是非常幸運的事了。但是我相信大部分情況下，我們找到的插件會有下面的幾個問題：
（1）UI定制：很多插件提供的UI和我們的項目設(shè)計風(fēng)格完全不搭，可能寫好的html和css不符合插件使用的方式，結(jié)果我們還要去修改html和css來適應(yīng)插件的用法。
（2）學(xué)習(xí)成本：如果是比較復(fù)雜的插件，存在著一個學(xué)習(xí)成本的問題，要去學(xué)習(xí)這個插件怎么使用。
（3）插件不符合需求：我們找到的插件并不完全保證符合我們項目的需求，這個時候你可能要去修改它的代碼來支持項目需求，這也是可能存在的問題
（4）插件功能太大而全：假設(shè)你的項目需要一個簡單的輪播插件，結(jié)果找到一個很牛逼的輪播插件，各種酷炫的效果，而且剛好也能使用，但是這個插件的體積和一個js庫的體積差不多，而如果自己寫效果的話，其實只要幾十行代碼就可以搞定了，這時候引入這個插件是否太過多余了。
這是使用js插件可能存在的一些問題，當然具體情況具體分析，我也并非不使用已經(jīng)寫好的js插件，畢竟有些插件是經(jīng)過了時間考驗的，使用起來更有益于項目的進行。如果是下面幾種情況，我會考慮使用已經(jīng)存在的js插件：
（1）復(fù)雜的功能：比如文件上傳，批量上傳，進度顯示等等，比如HTML編輯器
（2）項目工期緊急，對性能要求不高的場景
（3）js插件剛好符合項目的需求
自己造輪子
第二種做法，自己造輪子開發(fā)插件
自己寫插件主要有下面幾個問題：
（1）開發(fā)插件需要時間，可能拖延項目工期，如果工期緊急不建議選用這種方式
（2）自己造的輪子未必有現(xiàn)有輪子的好用，要考慮到隊友是否適用
（3）需要比較高的開發(fā)水平
如果平時項目不緊急的話，我會考慮自己造輪子，主要有幾個好處：
（1）完全符合項目需求，這一條是顯而易見的，因為完全針對項目來開發(fā)的插件
（2）知根知底，容易修改，插件完全是自己開發(fā)的，項目有什么需求變化完全可以靈活應(yīng)對
（3）輕量級，因為我們不像其他開源插件要應(yīng)對那么多種需求，所以我們自己的輪子也只需要符合自己的車，不需要很多變化，相對來說，變化少功能少，代碼也會少。
（4）對個人能力是一個很大的鍛煉，不要重復(fù)造輪子這是在程序員中廣為流傳的一句話，這也成為很多人偷懶的一個借口，但是我們不應(yīng)該以此為借口來阻礙自己的前進的腳步。造過輪子的同學(xué)應(yīng)該深有體會，造過一個輪子，遠比你使用別人寫的100個插件的收獲還要多，我們的輪子可以不在項目中使用，但這是一種效率極高的學(xué)習(xí)方式，強烈推薦。
如何開發(fā)一個輕量級的適用性強的插件
怎么開發(fā)一個適應(yīng)性強的且輕量的插件呢？所謂適用性強，簡單地說就是有幾點：
1、對UI限制越少越好，最好沒有
2、不提供太多功能，只提供簡單的api，讓使用者易于擴展
我們舉個例子，假設(shè)我們要開發(fā)一個jQuery分頁插件，關(guān)于jQuery插件開發(fā)教程，請參考jQuery插件開發(fā)。
確定需求
確定需求是開發(fā)插件的第一步。要開發(fā)一個輕量級的分頁插件，我們還是用從插件最基本的需求開始說起，分頁插件最基本的需求是什么呢，無非就是頁碼顯示，頁碼之間的切換，所以，我們的插件要圍繞著這基本需求開始，而暫時不要考慮其他可能存在的需求。
確定插件html和css
確定好插件的需求后，第二步就是插件的UI，也就是html和css。
假設(shè)基本的ui如下：
基本的分頁UI
看到上面的基本ui，不知道大家會想到什么樣的html結(jié)構(gòu)。對于我們開發(fā)人員來說，html和css要越簡單越好，所以最基本的html結(jié)構(gòu)無非就是a標簽和span標簽的混合，有的同學(xué)可能會想到使用ul，li標簽，但這其實增加的復(fù)雜度，得不償失。我們編寫html代碼如下：
<div class="pager"> <span class="flip noPage">上一頁</span> <span class="curPage">1</span> <a page="1" href="javascript:;">2</a> <a page="2" href="javascript:;">3</a> <a page="3" href="javascript:;">4</a> <span>...</span> <a href="javascript:;" page="8">9</a> <a page="1" href="javascript:;" class="flip">下一頁</a> </div>
這是最基本html代碼結(jié)構(gòu)，包含了分頁插件的容器div.pager，當前頁span.curPage，其他頁碼a標簽，上一頁，下一頁等按鈕。
接著是css代碼，主要當前頁標簽，其他頁面標簽，上一頁下一頁，鼠標懸停在按鈕上等幾種樣式，編寫如下：
.pager { display: inline-block; font: 12 px/21px "宋體"; margin-top: 20px; }
.pager a, .pager .flip, .pager .curPage { border: 1px solid #e3e3e3; display: inline-block; height: 22px; line-height: 22px; text-align: center; }
.pager a { background: none repeat scroll 0 0 #fff; color: #010101; text-decoration: none; width: 26px; }
.pager a:hover { background: none repeat scroll 0 0 #f1f1f1; }
.pager .noPage { color: #a4a4a4; }
.pager .curPage { background: none repeat scroll 0 0 #49abde; color: #ffffff; width: 26px; }
.pager .flip { width: 56px; }
編寫js代碼
寫好基本的html和css，接下來最關(guān)鍵的就是js代碼了。首先我們搭建好jQuery插件開發(fā)的基本形式：
; (function ($, window, document, undefined) {
"use strict";
var defaults = {
pageIndex: 0,
pageSize: 6,
itemCount: 50,
maxButtonCount: 7,
prevText: "上一頁",
nextText: "下一頁",
buildPageUrl: null,
onPageChanged: null
};
$.fn.pager = function (options) {
options = $.extend(defaults, options || {});
}
})(jQuery, window, document);
這里主要提供了一些可選參數(shù)的默認值，比如頁碼默認為0，每頁數(shù)量6條等等。
接著我們來考慮一下分頁插件的思路：
1、設(shè)置當前頁碼為0，表示第一頁
2、生成分頁插件的html代碼
3、修改頁碼，再生成html代碼
基于這個思路，我們編寫代碼如下：
; (function ($, window, document, undefined) {
"use strict";
var defaults = {
pageIndex: 0,
pageSize: 6,
itemCount: 50,
maxButtonCount: 7,
prevText: "上一頁",
nextText: "下一頁",
buildPageUrl: null,
onPageChanged: null
};
function Pager($ele, options) {
this.$ele = $ele;
this.options = options = $.extend(defaults, options || {});
this.init();
}
Pager.prototype = {
constructor: Pager,
init: function () {
this.renderHtml();
this.bindEvent();
},
renderHtml: function () {
var options = this.options;
options.pageCount = Math.ceil(options.itemCount / options.pageSize);
var html = [];
//生成上一頁的按鈕
if (options.pageIndex > 0) {
html.push('<a page="' + (options.pageIndex - 1) + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '" class="flip">' + options.prevText + '</a>');
} else {
html.push('<span class="flip noPage">' + options.prevText + '</span>');
}
//這里是關(guān)鍵
//臨時的起始頁碼中間頁碼，當頁碼數(shù)量大于顯示的最大按鈕數(shù)時使用
var tempStartIndex = options.pageIndex - Math.floor(options.maxButtonCount / 2) + 1;
//計算終止頁碼，通過max計算一排按鈕中的第一個按鈕的頁碼，然后計算出頁數(shù)量
var endIndex = Math.min(options.pageCount, Math.max(0, tempStartIndex) + options.maxButtonCount) - 1;
var startIndex = Math.max(0, endIndex - options.maxButtonCount + 1);
// 第一頁
if (startIndex > 0) {
html.push("<a href='" + this.buildPageUrl(0) + "' page='" + 0 + "'>1</a> ");
html.push("<span>...</span>");
}
//生成頁碼按鈕
for (var i = startIndex; i <= endIndex; i++) {
if (options.pageIndex == i) {
html.push('<span class="curPage">' + (i + 1) + '</span>');
} else {
html.push('<a page="' + i + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '">' + (i + 1) + '</a>');
}
}
// 最后一頁
if (endIndex < options.pageCount - 1) {
html.push("<span>...</span> ");
html.push("<a href='" + this.buildPageUrl(options.pageCount - 1) + "' page='" + (options.pageCount - 1) + "'>" + options.pageCount + "</a> ");
}
//生成下一頁的按鈕
if (options.pageIndex < options.pageCount - 1) {
html.push('<a page="' + (options.pageIndex + 1) + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '" class="flip">' + options.nextText + '</a>');
} else {
html.push('<span class="flip noPage">' + options.nextText + '</span>');
}
this.$ele.html(html.join(""));
},
bindEvent: function () {
var that = this;
that.$ele.on("click", "a", function () {
that.options.pageIndex = parseInt($(this).attr("page"), 10);
that.renderHtml();
that.options.onPageChanged && that.options.onPageChange(that.options.pageIndex);
})
},
buildPageUrl: function () {
if ($.isFunction(this.options.buildPageUrl)) {
return this.options.buildPageUrl(pageIndex);
}
return "javascript:;";
}
};
$.fn.pager = function (options) {
options = $.extend(defaults, options || {});
return new Pager($(this), options);
}
})(jQuery, window, document);
這段代碼中有兩個關(guān)鍵點要記住：
（1）html代碼的生成，由于頁碼可能太多，需要隱藏部分頁碼，所以我們要生成一個省略號表示被隱藏的頁碼，通過maxButtonCount來表示最多的頁碼按鈕
（2）事件綁定，每次頁碼改變都會重新生成html，我們采用事件代理的方式，提高了性能，也不用重復(fù)綁定事件
這樣一個最基本的分頁插件已經(jīng)可以了。
但是這樣足夠了嗎？
假設(shè)我們需要支持輸入頁碼直接跳轉(zhuǎn)的功能，那該如何呢，是否需要修改原有的html結(jié)構(gòu)和css？前面我們說到，開發(fā)一個插件要圍繞最基本的需求開始，那對于這些潛在的可能存在的需求又該如何處理呢。
我的解決方案是這樣的，提供簡單的api，不提供UI，完全由用戶自定義。
我們在上面的代碼增加三個api：getPageIndex，setPageIndex和setItemCount，分別表示獲取當前索引，設(shè)置當前索引，設(shè)置項目總數(shù)量。代碼如下：
getPageIndex: function () {
return this.options.pageIndex;
},
setPageIndex: function (pageIndex) {
this.options.pageIndex = pageIndex;
this.renderHtml();
},
setItemCount: function (itemCount) {
this.options.pageIndex = 0;
this.options.itemCount = itemCount;
this.renderHtml();
}
提供了這三個api，假設(shè)用戶需要跳轉(zhuǎn)頁碼的功能，可以直接使用setPageIndex方法來跳轉(zhuǎn)，UI完全由用戶自定義，插件本身只專注基本功能，不干涉其它。
大家可以查看DEMO
整個插件的代碼已經(jīng)放在我的github上，有興趣的同學(xué)可以點擊查看github
總結(jié)
最后，我整理一下我開發(fā)一些js插件的思路：
1、專注最基本的需求本身，暫時不考慮可能潛在的需求
2、盡量不提供或少提供UI，減少對使用者的限制
3、考慮可能潛在的需求，提供api，潛在的需求完全由用戶自定義
這是我在編寫js插件時，考慮如何輕量化并且適用性強的一些想法，歡迎大家交流！
- html5+javascript制作簡易畫板附圖
- 純js網(wǎng)頁畫板(Graphics)類簡介及實現(xiàn)代碼
- 用javascript實現(xiàn)畫板的代碼
- 全屏js頭像上傳插件源碼高清版
- JS實現(xiàn)支持Ajax驗證的表單插件
- JavaScript開發(fā)者必備的10個Sublime Text插件
- 學(xué)習(xí)使用jquery iScroll.js移動端滾動條插件
- JavaScript tab選項卡插件實例代碼
- JavaScript SweetAlert插件實現(xiàn)超酷消息警告框
- JS基于ocanvas插件實現(xiàn)的簡單畫板效果代碼(附demo源碼下載)
相關(guān)文章
詳解webpack 打包文件體積過大解決方案（code splitting）
這篇文章主要介紹了webpack 打包文件體積過大解決方案（code splitting）,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要為大家詳細介紹了BootStrap TreeView使用實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
javascript實現(xiàn)點擊單選按鈕鏈接轉(zhuǎn)向?qū)?yīng)網(wǎng)址的方法
這篇文章主要介紹了javascript實現(xiàn)點擊單選按鈕鏈接轉(zhuǎn)向?qū)?yīng)網(wǎng)址的方法,涉及javascript鼠標事件及頁面跳轉(zhuǎn)的相關(guān)技巧,簡單實用,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了javascript實現(xiàn)京東登錄顯示隱藏密碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了JavaScript運動原理基礎(chǔ)知識詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04
JavaScript 函數(shù)節(jié)流詳解及方法總結(jié)
這篇文章主要介紹了JavaScript 函數(shù)節(jié)流詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-02-02
JavaScript控制語句及搭建前端服務(wù)器的過程詳解
這篇文章主要介紹了JavaScript控制語句及搭建前端服務(wù)器,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
在前端開發(fā)中經(jīng)常會遇到這樣一種需求,使用Javascript格式化數(shù)字進行輸出,下面這篇文章主要給大家介紹了關(guān)于js金額千分位的6種實現(xiàn)方法,需要的朋友可以參考下2022-03-03
JS實現(xiàn)iframe中子父頁面跨域通訊的方法分析
這篇文章主要介紹了JS實現(xiàn)iframe中子父頁面跨域通訊的方法,結(jié)合實例形式分析了JS實現(xiàn)iframe頁面跨域通訊常見操作技巧與相關(guān)注意事項,需要的朋友可以參考下2020-03-03
今天小編就為大家分享一篇layui框架與SSM前后臺交互的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09