第一百三十八節，JavaScript，封裝庫--插件

JavaScript，封裝庫--插件

庫主要是用來封裝通常JavaScript的常規操做代碼，而拖拽這種特效代碼屬於功能性代碼，並非必須的，因此這種類型的代碼，咱們建議另外封裝，在須要的時候做爲插件形式引入到庫中，做爲擴展。

 

在基礎庫設置一個extend()方法，來擴展插件

/** 插件入口，簡單的理解就是經過extend()方法，向此基礎庫添加一個原型方法
 *  此extend()方法，通常是給插件文件使用的，插件就是經過extend()方法，將插件方法添加到基礎庫原型的
 *  接收兩個參數
 *  參數1是傳入要添加的方法名稱
 *  參數2是此方法的執行函數（包含代碼）
 **/
feng_zhuang_ku.prototype.extend = function (name,fn) {
    feng_zhuang_ku.prototype[name] = fn;
};

 

插件擴展方式，如:拖拽爲列

/** tuo_zhuai()方法，將一個彈窗元素實現拖拽功能
 * 注意：有參設置拖拽點區塊，只有彈窗的這個拖拽點區塊才能拖拽，無參整個彈窗能夠拖拽
 * 注意：通常須要在css文件將彈窗元素裏的某一個區塊光標設置成提示能夠拖拽，如：cursor: move; （設置拖拽點）
 * 有一個參數，參數是彈窗元素裏的拖拽點區塊的字符串class值（設置拖拽點的class值）設置後彈窗元素裏的這個拖拽點區塊才能拖拽
 **/
//調用基礎庫extend()方法，建立基礎庫原型tuo_zhuai()方法
$().extend('tuo_zhuai', function (tuo_zhuai_dian) {
    if (this.jie_dian.length == 1) {
        var yan_su = null;
        var sum = arguments.length;
        for (var i = 0; i < this.jie_dian.length; i++) {
            yan_su = this.jie_dian[i];
        }
        addEvent(yan_su, 'mousedown', function (e) {
            if (trim(yan_su.innerHTML).length == 0)e.preventDefault();
            var e1 = getEvent(e);  //getEvent()函數庫函數，跨瀏覽器獲取事件對象,事件event對象,
            var diffx = e1.clientX - yan_su.offsetLeft;
            var diffy = e1.clientY - yan_su.offsetTop;
            if (sum == 1) {
                if (e.target.className === tuo_zhuai_dian) {
                    addEvent(document, 'mousemove', move);
                    addEvent(document, 'mouseup', up);
                }
            } else if (sum == 0) {
                addEvent(document, 'mousemove', move);
                addEvent(document, 'mouseup', up);
            }
            function move(e) {
                var e2 = getEvent(e);
                var left = e2.clientX - diffx;
                var top = e2.clientY - diffy;
                if (left < 0) {
                    left = 0;
                } else if (left > getInner().width - yan_su.offsetWidth) {
                    left = getInner().width - yan_su.offsetWidth;
                }
                if (top < 0) {
                    top = 0;
                } else if (top > getInner().height - yan_su.offsetHeight) {
                    top = getInner().height - yan_su.offsetHeight;
                }
                yan_su.style.left = left + 'px';
                yan_su.style.top = top + 'px';
                if (typeof yan_su.setCapture != 'undefined') {
                    yan_su.setCapture();
                }
            }

            function up() {
                removeEvent(document, 'mousemove', move);
                removeEvent(document, 'mouseup', up);
                if (typeof yan_su.releaseCapture != 'undefined') {
                    yan_su.releaseCapture();
                }
            }
        });
    } else {
        alert("將一個彈窗元素實現拖拽功能,只能設置一個彈窗元素，目前jie_dian數組裏是多個元素請檢查！")
    }
    return this;
});

 

插件說明

/**------------------------------------------------插件說明--------------------------------------------**/
/** 插件是經過基礎庫的extend()方法，向基礎庫原型添加的插件方法
 *  前臺使用說明：
 *  1.獲取到目標對象，執行插件方法，如：$().huo_qu_id('login');
 *  2.頁面引入插件js文件，如：<script type="text/javascript" src="feng_zhuang_ku/cha_jian/tuo_zhuai.js" charset="utf-8"></script>
 **/
/**------------------------------------------------插件說明--------------------------------------------**/
tuo_zhuai()方法，將一個彈窗元素實現拖拽功能