isServer
const isServer = Vue.prototype.$isServer;
複製程式碼Vue.prototype.$isServer表示當前是否是在伺服器端渲染，例如使用 create-nuxt-app 建立的專案中，在 page/index.vue 的 created 生命週期中新增 console.log(this.$isServer) 伺服器端列印出來為 true 。
ieVersion IE版本
const ieVersion = isServer ? 0 : Number(document.documentMode);
複製程式碼trim
const trim = function(string) {
return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
};
複製程式碼去除字串首尾空白。
camelCase
const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
const MOZ_HACK_REGEXP = /^moz([A-Z])/;
const camelCase = function(name) {
return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
return offset ? letter.toUpperCase() : letter;
}).replace(MOZ_HACK_REGEXP, 'Moz$1');
};
複製程式碼將字串轉為小駝峰命名的格式。
on 繫結事件
export const on = (function() {
if (!isServer && document.addEventListener) {
return function(element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
};
} else {
// 相容不支援 document.addEventListener，例如低版本IE
return function(element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler);
}
};
}
})();
複製程式碼on 使用方式
on(element, event, handler)
複製程式碼off 解決繫結事件
export const off = (function() {
if (!isServer && document.removeEventListener) {
return function(element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false);
}
};
} else {
// 相容不支援 document.removeEventListener，例如低版本IE
return function(element, event, handler) {
if (element && event) {
element.detachEvent('on' + event, handler);
}
};
}
})();
複製程式碼off 使用方式
off(element, event, handler)
複製程式碼once 一次性事件
export const once = function(el, event, fn) {
var listener = function() {
if (fn) {
fn.apply(this, arguments);
}
// 執行過之後就 解決繫結事件
off(el, event, listener);
};
on(el, event, listener);
};
複製程式碼hasClass
指定 dom 上是否含有某個 class 類名
export function hasClass(el, cls) {
if (!el || !cls) return false;
// 類名中不能包含空格
if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
if (el.classList) {
// Element.classList： https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList
return el.classList.contains(cls);
} else {
return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
};
複製程式碼addClass 新增class類名
export function addClass(el, cls) {
if (!el) return;
var curClass = el.className;
// 將 cls 以空格分割為 陣列，也就是說支援一次性新增多個class類名
var classes = (cls || '').split(' ');
for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
// classList.add： 如果這些類已經存在於元素的屬性中，那麼它們將被忽
el.classList.add(clsName);
} else if (!hasClass(el, clsName)) {
// 新增前需要檢測是否已存在
curClass += ' ' + clsName;
}
}
if (!el.classList) {
el.className = curClass;
}
};
複製程式碼removeClass 刪除class類名
export function removeClass(el, cls) {
if (!el || !cls) return;
// 將 cls 以空格分割為 陣列，也就是說支援一次性刪除多個class類名
var classes = cls.split(' ');
var curClass = ' ' + el.className + ' ';
for (var i = 0, j = classes.length; i < j; i++) {
var clsName = classes[i];
if (!clsName) continue;
if (el.classList) {
el.classList.remove(clsName);
} else if (hasClass(el, clsName)) {
// 之所以新增空格是防止出現多餘空格
curClass = curClass.replace(' ' + clsName + ' ', ' ');
}
}
if (!el.classList) {
el.className = trim(curClass);
}
};
複製程式碼getStyle 獲取樣式
export const getStyle = ieVersion < 9 ? function(element, styleName) {
if (isServer) return;
if (!element || !styleName) return null;
styleName = camelCase(styleName);
if (styleName === 'float') {
styleName = 'styleFloat';
}
try {
switch (styleName) {
case 'opacity':
try {
return element.filters.item('alpha').opacity / 100;
} catch (e) {
return 1.0;
}
default:
// https://developer.mozilla.org/en-US/docs/Web/API/Element/currentStyle
return (element.style[styleName] || element.currentStyle ? element.currentStyle[styleName] : null);
}
} catch (e) {
return element.style[styleName];
}
} : function(element, styleName) {
if (isServer) return;
if (!element || !styleName) return null;
styleName = camelCase(styleName);
if (styleName === 'float') {
styleName = 'cssFloat';
}
try {
// https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
var computed = document.defaultView.getComputedStyle(element, '');
return element.style[styleName] || computed ? computed[styleName] : null;
} catch (e) {
return element.style[styleName];
}
};
複製程式碼setStyle 設定樣式
export function setStyle(element, styleName, value) {
if (!element || !styleName) return;
// styleName 支援設定為物件格式，一次設定多個樣式
if (typeof styleName === 'object') {
for (var prop in styleName) {
if (styleName.hasOwnProperty(prop)) {
setStyle(element, prop, styleName[prop]);
}
}
} else {
styleName = camelCase(styleName);
if (styleName === 'opacity' && ieVersion < 9) {
element.style.filter = isNaN(value) ? '' : 'alpha(opacity=' + value * 100 + ')';
} else {
element.style[styleName] = value;
}
}
};
複製程式碼isScroll
export const isScroll = (el, vertical) => {
if (isServer) return;
// vertical：代表方向
const determinedDirection = vertical !== null || vertical !== undefined;
const overflow = determinedDirection
? vertical
? getStyle(el, 'overflow-y')
: getStyle(el, 'overflow-x')
: getStyle(el, 'overflow');
return overflow.match(/(scroll|auto)/);
};
複製程式碼檢視 dom 元素的 overflow 樣式
getScrollContainer
export const getScrollContainer = (el, vertical) => {
if (isServer) return;
let parent = el;
while (parent) {
if ([window, document, document.documentElement].includes(parent)) {
return window;
}
if (isScroll(parent, vertical)) {
return parent;
}
parent = parent.parentNode;
}
return parent;
};
複製程式碼由當前元素向上查詢到第一個設定 overflow 為 scroll 或 auto 樣式的祖先元素。
isInContainer
export const isInContainer = (el, container) => {
if (isServer || !el || !container) return false;
const elRect = el.getBoundingClientRect();
let containerRect;
if ([window, document, document.documentElement, null, undefined].includes(container)) {
containerRect = {
top: 0,
right: window.innerWidth,
bottom: window.innerHeight,
left: 0
};
} else {
containerRect = container.getBoundingClientRect();
}
return elRect.top < containerRect.bottom &&
elRect.bottom > containerRect.top &&
elRect.right > containerRect.left &&
elRect.left < containerRect.right;
};
複製程式碼檢視當前元素（el）是否在某個元素（container）中。
更多內容可檢視我的個人部落格。