無標題文章

面向對象的方法封裝函數

;

(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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • ``` /* * ORACLE PROPRIETARY/CONFIDENTIAL. Use is subject ...
    非專業碼農閱讀 347評論 0 0
  • var a = 1; console.log(typeof a);// 'number' var b = '1';...
    zdnexus閱讀 342評論 0 0
  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,270評論 0 4
  • title: Optical Character Recognition (OCR)author: Marina ...
    4a87cc38dcbc閱讀 386評論 0 0
  • 家中飄起了,粽葉的清香,又一個關于舌尖的記憶,躍然腦海中。 我的家鄉,端午節雖不是特別隆重的節日,吃粽子,包粽子是...
    senny1978閱讀 642評論 0 4