js插件開發的一些感想和心得-引狼狼的藍胖子

時間 2019-11-18

標籤插件開發一些感想心得胖子欄目 JavaScript 简体版

原文原文鏈接

原由

若是你們平時作過一些前端開發方面的工做，必定會有這樣的體會：頁面須要某種效果或者插件的時候，咱們通常會有兩種選擇：javascript

一、上網查找相關的JS插件，學習其用法css

二、本身造輪子，開發插件。html

尋找存在的插件

第一種作法，上網查找JS插件前端

這種方式若是是有恰好符合項目需求的插件，那是很是幸運的事了。可是我相信大部分狀況下，咱們找到的插件會有下面的幾個問題：java

（1）UI定製：不少插件提供的UI和咱們的項目設計風格徹底不搭，可能寫好的html和css不符合插件使用的方式，結果咱們還要去修改html和css來適應插件的用法。jquery

（2）學習成本：若是是比較複雜的插件，存在着一個學習成本的問題，要去學習這個插件怎麼使用。git

（3）插件不符合需求：咱們找到的插件並不徹底保證符合咱們項目的需求，這個時候你可能要去修改它的代碼來支持項目需求，這也是可能存在的問題程序員

（4）插件功能太大而全：假設你的項目須要一個簡單的輪播插件，結果找到一個很牛逼的輪播插件，各類酷炫的效果，並且恰好也能使用，可是這個插件的體積和一個js庫的體積差很少，而若是本身寫效果的話，其實只要幾十行代碼就能夠搞定了，這時候引入這個插件是否太過多餘了。github

這是使用js插件可能存在的一些問題，固然具體狀況具體分析，我也並不是不使用已經寫好的js插件，畢竟有些插件是通過了時間考驗的，使用起來更有益於項目的進行。若是是下面幾種狀況，我會考慮使用已經存在的js插件：typescript

（1）複雜的功能：好比文件上傳，批量上傳，進度顯示等等，好比HTML編輯器

（2）項目工期緊急，對性能要求不高的場景

（3）js插件恰好符合項目的需求

本身造輪子

第二種作法，本身造輪子開發插件

本身寫插件主要有下面幾個問題：

（1）開發插件須要時間，可能拖延項目工期，若是工期緊急不建議選用這種方式

（2）本身造的輪子未必有現有輪子的好用，要考慮到隊友是否適用

（3）須要比較高的開發水平

若是平時項目不緊急的話，我會考慮本身造輪子，主要有幾個好處：

（1）徹底符合項目需求，這一條是顯而易見的，由於徹底針對項目來開發的插件

（2）知根知底，容易修改，插件徹底是本身開發的，項目有什麼需求變化徹底能夠靈活應對

（3）輕量級，由於咱們不像其餘開源插件要應對那麼多種需求，因此咱們本身的輪子也只須要符合本身的車，不須要不少變化，相對來講，變化少功能少，代碼也會少。

（4）對我的能力是一個很大的鍛鍊，不要重複造輪子這是在程序員中廣爲流傳的一句話，這也成爲不少人偷懶的一個藉口，可是咱們不該該以此爲藉口來阻礙本身的前進的腳步。造過輪子的同窗應該深有體會，造過一個輪子，遠比你使用別人寫的100個插件的收穫還要多，咱們的輪子能夠不在項目中使用，但這是一種效率極高的學習方式，強烈推薦。

如何開發一個輕量級的適用性強的插件

怎麼開發一個適應性強的且輕量的插件呢？所謂適用性強，簡單地說就是有幾點：

一、對UI限制越少越好，最好沒有

二、不提供太多功能，只提供簡單的api，讓使用者易於擴展

咱們舉個例子，假設咱們要開發一個jQuery分頁插件，關於jQuery插件開發教程，請參考 jQuery插件開發。

肯定需求

肯定需求是開發插件的第一步。要開發一個輕量級的分頁插件，咱們仍是用從插件最基本的需求開始提及，分頁插件最基本的需求是什麼呢，無非就是頁碼顯示，頁碼之間的切換，因此，咱們的插件要圍繞着這基本需求開始，而暫時不要考慮其餘可能存在的需求。

肯定插件html和css

肯定好插件的需求後，第二步就是插件的UI，也就是html和css。

假設基本的ui以下：

看到上面的基本ui，不知道你們會想到什麼樣的html結構。對於咱們開發人員來講，html和css要越簡單越好，因此最基本的html結構無非就是a標籤和span標籤的混合，有的同窗可能會想到使用ul，li標籤，但這其實增長的複雜度，得不償失。咱們編寫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代碼結構，包含了分頁插件的容器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，接下來最關鍵的就是js代碼了。首先咱們搭建好jQuery插件開發的基本形式：

; (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);

這裏主要提供了一些可選參數的默認值，好比頁碼默認爲0，每頁數量6條等等。

接着咱們來考慮一下分頁插件的思路：

一、設置當前頁碼爲0，表示第一頁

二、生成分頁插件的html代碼

三、修改頁碼，再生成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>');
 }

 //這裏是關鍵
 //臨時的起始頁碼中間頁碼，當頁碼數量大於顯示的最大按鈕數時使用
 var tempStartIndex = options.pageIndex - Math.floor(options.maxButtonCount / 2) + 1;

 //計算終止頁碼，經過max計算一排按鈕中的第一個按鈕的頁碼，而後計算出頁數量
 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);

這段代碼中有兩個關鍵點要記住：

（1）html代碼的生成，因爲頁碼可能太多，須要隱藏部分頁碼，因此咱們要生成一個省略號表示被隱藏的頁碼，經過maxButtonCount來表示最多的頁碼按鈕

（2）事件綁定，每次頁碼改變都會從新生成html，咱們採用事件代理的方式，提升了性能，也不用重複綁定事件

這樣一個最基本的分頁插件已經能夠了。

可是這樣足夠了嗎？

假設咱們須要支持輸入頁碼直接跳轉的功能，那該如何呢，是否須要修改原有的html結構和css？前面咱們說到，開發一個插件要圍繞最基本的需求開始，那對於這些潛在的可能存在的需求又該如何處理呢。

個人解決方案是這樣的，提供簡單的api，不提供UI，徹底由用戶自定義。

咱們在上面的代碼增長三個api：getPageIndex，setPageIndex和setItemCount，分別表示獲取當前索引，設置當前索引，設置項目總數量。代碼以下：

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();
}