javascript外掛程式開發的一些感想和心得_javascript技巧

起因

如果大家平時做過一些前端開發方面的工作，一定會有這樣的體會：頁面需要某種效果或者外掛程式的時候，我們一般會有兩種選擇：
1、上網尋找相關的JS外掛程式，學習其用法
2、自己造輪子，開發外掛程式。

尋找存在的外掛程式

第一種做法，上網尋找JS外掛程式
這種方式如果是有剛好符合項目需求的外掛程式，那是非常幸運的事了。但是我相信大部分情況下，我們找到的外掛程式會有下面的幾個問題：
（1）UI定製：很多外掛程式提供的UI和我們的項目設計風格完全不搭，可能寫好的html和css不符合外掛程式使用的方式，結果我們還要去修改html和css來適應外掛程式的用法。
（2）學習成本：如果是比較複雜的外掛程式，存在著一個學習成本的問題，要去學習這個外掛程式怎麼使用。
（3）外掛程式不符合需求：我們找到的外掛程式並不完全保證符合我們項目的需求，這個時候你可能要去修改它的代碼來支援項目需求，這也是可能存在的問題
（4）外掛程式功能太大而全：假設你的項目需要一個簡單的輪播外掛程式，結果找到一個很牛逼的輪播外掛程式，各種酷炫的效果，而且剛好也能使用，但是這個外掛程式的體積和一個js庫的體積差不多，而如果自己寫效果的話，其實只要幾十行代碼就可以搞定了，這時候引入這個外掛程式是否太過多餘了。
這是使用js外掛程式可能存在的一些問題，當然具體情況具體分析，我也並非不使用已經寫好的js外掛程式，畢竟有些外掛程式是經過了時間考驗的，使用起來更有益於項目的進行。如果是下面幾種情況，我會考慮使用已經存在的js外掛程式：
（1）複雜的功能：比如檔案上傳，批量上傳，進度顯示等等，比如HTML編輯器
（2）項目工期緊急，對效能要求不高的情境
（3）js外掛程式剛好符合項目的需求

自己造輪子

第二種做法，自己造輪子開發外掛程式
自己寫外掛程式主要有下面幾個問題：
（1）開發外掛程式需要時間，可能拖延項目工期，如果工期緊急不建議選用這種方式
（2）自己造的輪子未必有現有輪子的好用，要考慮到隊友是否適用
（3）需要比較高的開發水平
如果平時項目不緊急的話，我會考慮自己造輪子，主要有幾個好處：
（1）完全符合項目需求，這一條是顯而易見的，因為完全針對項目來開發的外掛程式
（2）知根知底，容易修改，外掛程式完全是自己開發的，項目有什麼需求變化完全可以靈活應對
（3）輕量級，因為我們不像其他開源外掛程式要應對那麼多種需求，所以我們自己的輪子也只需要符合自己的車，不需要很多變化，相對來說，變化少功能少，代碼也會少。
（4）對個人能力是一個很大的鍛煉，不要重複造輪子這是在程式員中廣為流傳的一句話，這也成為很多人偷懶的一個借口，但是我們不應該以此為借口來阻礙自己的前進的腳步。造過輪子的同學應該深有體會，造過一個輪子，遠比你使用別人寫的100個外掛程式的收穫還要多，我們的輪子可以不在項目中使用，但這是一種效率極高的學習方式，強烈推薦。

如何開發一個輕量級的適用性強的外掛程式

怎麼開發一個適應性強的且輕量的外掛程式呢？所謂適用性強，簡單地說就是有幾點：
1、對UI限制越少越好，最好沒有
2、不提供太多功能，只提供簡單的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條等等。
接著我們來考慮一下分頁外掛程式的思路：
1、設定當前頁碼為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>');   }   //這裡是關鍵   //臨時的起始頁碼中間頁碼，當頁碼數量大於顯示的最大按鈕數時使用   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();}

完整版代碼請查看jquery.page.js
提供了這三個api，假設使用者需要跳轉頁碼的功能，可以直接使用setPageIndex方法來跳轉，UI完全由使用者自訂，外掛程式本身只專註準系統，不干涉其它。
大家可以查看DEMO

整個外掛程式的代碼已經放在我的github上，有興趣的同學可以點擊查看github

總結

最後，我整理一下我開發一些js外掛程式的思路：
1、專註最基本的需求本身，暫時不考慮可能潛在的需求
2、盡量不提供或少提供UI，減少對使用者的限制
3、考慮可能潛在的需求，提供api，潛在的需求完全由使用者自訂

這是我在編寫js外掛程式時，考慮如何輕量化並且適用性強的一些想法，歡迎大家交流！

本文地址：http://luopq.com/2016/02/04/think-js-plugin/，轉載請註明