面向對象的方法封裝函數
;
(function(){
"use strict";
var xQuery = function(selector){
return new xQuery.prototype.init(selector);
}
xQuery.fn = xQuery.prototype = {
constructor : xQuery,
length : 0, // 長度
/*
* 初始化
* @param selector 選擇器
* @return
*/
init : function(selector){
if (typeof selector === "string") {
// 根據選擇器查找所有元素節點列表
var nodeList = document.querySelectorAll(selector);
// 遍歷所有元素,將每個元素包裝到當前對象的屬性中
for (var i = 0, len = nodeList.length; i < len; i++) {
this[i] = nodeList[i];
}
// 設置當前對象的 length
this.length = len;
} else if(typeof selector === "object") {
this[0] = selector;
this.length = 1;
}
},
/*
* 獲取/設置CSS樣式
* @param attrName 屬性名
* @param attrValue 屬性值
*/
css : function(attrName, attrValue){
if (this.length <= 0) // 當前xQuery對象中沒有包裝的DOM元素
return this;
// 獲取
if (typeof attrName === "string" && typeof attrValue === "undefined") {
return getComputedStyle(this[0])[attrName];
}
// 設置
if (typeof attrName === "object") { // 將對象傳遞的數據作為CSS屬性設置
for (var prop in attrName) {
for (var i = 0, len = this.length; i < len; i++) {
this[i].style[prop] = attrName[prop];//給選出來的元素每一個設置屬性值,這里是實現多個屬性進行設置屬性值
}
}
} else {
for (var i = 0, len = this.length; i < len; i++) {
this[i].style[attrName] = attrValue;//這是單個屬性進行屬性值設置
}
}
return this;
},
/*
* 運動方法
* @param options
* @param speed
* @param fn
*/
animate : function(options, speed, fn){
for (var i = 0, len = this.length; i < len; i++) {
// 當前 xQuery 對象中遍歷到的DOM對象
let element = this[i];
// 停止元素上已有運動動畫效果
clearInterval(element.timer);
// 定義對象,保存各運動屬性初值、運動區間范圍
// 對象屬性名與 options 一致
var start = {}, range = {};
for ( var attr in options ) { // 遍歷options每個屬性
start[attr] = parseFloat(xQuery(element).css(attr));//這里是使用parseFloat是取消掉px
range[attr] = options[attr] - start[attr];
}
// 記錄運動起始時間
var startTime = new Date();
// 啟動計時器
element.timer = setInterval(function(){
// 計算運動消耗時間
var elapsed = Math.min(new Date() - startTime, speed);
// 遍歷每個屬性,設置當前值
for (var attr in options) {
// 計算各屬性當前值
var result = elapsed * range[attr] / speed + start[attr];
// 設置當前值
element.style[attr] = result + (attr === "opacity" ? "" : "px");
}
// 判斷是否停止計時器
if (elapsed === speed){
// 運動動畫結束
clearInterval(element.timer);
// 如果有運動結束后執行的函數,則調用
fn && fn();
}
}, 1000/60);
}
return this;
},
/*
* @param type:事件類型
* @param callback:回調函數
*/
on : function(type, callback){
for (var i = 0, len = this.length; i < len; i++) {
var element = this[i];
if (element.addEventListener) { // 支持使用 addEventListener 方法
if (type.indexOf("on") === 0) // 以 on 開頭,則去掉 on 前綴
type = type.slice(2);
element.addEventListener(type, callback);
} else { // 支持使用 addEventListener 方法
if (type.indexOf("on") !== 0) // 不以 on 開頭,添加 on 前綴
type = "on" + type;
element.attachEvent(type, callback);
}
}
return this;
},
extend : function(obj){
for (var attr in obj) {
xQuery.prototype[attr] = obj[attr];
}
}
}
// 直接在 xQuery 函數對象下掛載方法
xQuery.inArray = function(value, array){
return array.indexOf(value);
}
xQuery.extend = function(obj){
for (var attr in obj) {
xQuery[attr] = obj[attr];
}
}
// 修改 xQuery.prototype.init 的 prototype 指向,以保證 xQuery 的對象調用到如css之類的方法
xQuery.prototype.init.prototype = xQuery.prototype;
window.$ = window.xQuery = xQuery;
}());
// IIFE