摘要:于是在不斷的摸索和思考中,想出了工廠模式這個(gè)概念,咱們可以這么理解工廠就是取快遞的地方,不管是從哪里發(fā)來(lái)的貨品,統(tǒng)一送到這里,然后再由特定的人群來(lái)取。
寫(xiě)在前面
如今,在項(xiàng)目中使用React、Vue等框架作為技術(shù)棧已成為一種常態(tài),在享受帶來(lái)便利性的同時(shí),也許我們漸漸地遺忘原生js的寫(xiě)法。
現(xiàn)在,是時(shí)候回歸本源,響應(yīng)原始的召喚了。本文將一步一步帶領(lǐng)大家封裝一套屬于自己的DOM操作庫(kù),我將其命名為qnode。
功能特性qnode吸收了jquery優(yōu)雅的鏈?zhǔn)綄?xiě)法,并且融入了我個(gè)人的一些經(jīng)驗(yàn)和思考:
自定義DOM工廠模式(緩存節(jié)點(diǎn)、跨文件操作)
快速優(yōu)雅地創(chuàng)建新的DOM節(jié)點(diǎn)
CSS3樣式前綴自動(dòng)識(shí)別和添加
大家可能會(huì)比較疑惑,什么是DOM工廠模式?
實(shí)際上是這樣,有一些需要共享的節(jié)點(diǎn)、數(shù)據(jù)和方法,它在某個(gè)文件中定義,在另一個(gè)文件中調(diào)用。我最初的方式是在文件中暴露(export)出這些東西,但是后來(lái)發(fā)現(xiàn)文件多了,這種方式很難維護(hù),而且需要引入很多的文件,非常麻煩。
于是在不斷的摸索和思考中,想出了DOM工廠模式這個(gè)概念,咱們可以這么理解:DOM工廠就是取快遞的地方,不管是從哪里發(fā)來(lái)的貨品,統(tǒng)一送到這里,然后再由特定的人群來(lái)取。
當(dāng)然,未來(lái)還有很長(zhǎng)的路要走,我會(huì)不斷地探索和改進(jìn),融入更多的想法和改進(jìn)。
目錄結(jié)構(gòu)qnode ├── QNode.js ├── README.md ├── api.js ├── core │?? ├── attr.js │?? ├── find.js │?? ├── index.js │?? ├── klass.js │?? ├── listener.js │?? ├── node.js │?? └── style.js ├── index.js ├── q.js └── tools.js
q.js是DOM操作的集合,融合了所有core的方法
QNode.js是工廠模式,提供節(jié)點(diǎn)、數(shù)據(jù)以及方法的緩存和獲取
core目錄下的文件是DOM操作的具體方法
編寫(xiě)代碼core/attr.js:內(nèi)容屬性操作
import { isDef } from "../tools" export function text (value) { if (!isDef(value)) { return this.node.textContent } this.node.textContent = value return this } export function html (value) { if (!isDef(value)) { return this.node.innerHTML } this.node.innerHTML = value return this } export function value (val) { if (!isDef(val)) { return this.node.value } this.node.value = val return this } export function attr (name, value) { if (!isDef(value)) { return this.node.getAttribute(name) } if (value === true) { this.node.setAttribute(name, "") } else if (value === false || value === null) { this.node.removeAttribute(name) } else { this.node.setAttribute(name, value) } return this }
core/find.js:節(jié)點(diǎn)信息獲取
export function tagName () { return this.node.tagName } export function current () { return this.node } export function parent () { return this.node.parentNode } export function next () { return this.node.nextSibling } export function prev () { return this.node.previousSibling } export function first () { return this.node.firstChild } export function last () { return this.node.lastChild } export function find (selector) { return this.node.querySelector(selector) }
core/klass.js:class樣式操作
import { isArray } from "../tools" export function addClass (cls) { let classList = this.node.classList let classes = isArray(cls) ? cls : [].slice.call(arguments, 0) classList.add.apply(classList, classes.filter(c => c).join(" ").split(" ")) return this } export function removeClass (cls) { let classList = this.node.classList let classes = isArray(cls) ? cls : [].slice.call(arguments, 0) classList.remove.apply(classList, classes.filter(c => c).join(" ").split(" ")) return this } export function hasClass (cls) { let classList = this.node.classList // 若有空格,則必須滿(mǎn)足所有class才返回true if (cls.indexOf(" ") !== -1) { return cls.split(" ").every(c => classList.contains(c)) } return classList.contains(cls) }
core/listener.js:事件監(jiān)聽(tīng)處理
export function on (type, fn, useCapture = false) { this.node.addEventListener(type, fn, useCapture) return this } export function off (type, fn) { this.node.removeEventListener(type, fn) return this }
core/node.js:DOM操作
import { createFragment } from "../api" import { getRealNode, isArray } from "../tools" export function append (child) { let realNode = null if (isArray(child)) { let fragment = createFragment() child.forEach(c => { realNode = getRealNode(c) if (realNode) { fragment.appendChild(realNode) } }) this.node.appendChild(fragment) } else { realNode = getRealNode(child) if (realNode) { this.node.appendChild(realNode) } } return this } export function appendTo (parent) { parent = getRealNode(parent) if (parent) { parent.appendChild(this.node) } return this } export function prepend (child, reference) { let realNode = null let realReference = getRealNode(reference) || this.node.firstChild if (isArray(child)) { let fragment = createFragment() child.forEach(c => { realNode = getRealNode(c) if (realNode) { fragment.appendChild(realNode) } }) this.node.insertBefore(fragment, realReference) } else { realNode = getRealNode(child) if (realNode) { this.node.insertBefore(realNode, realReference) } } return this } export function prependTo (parent, reference) { parent = getRealNode(parent) if (parent) { parent.insertBefore(this.node, getRealNode(reference) || parent.firstChild) } return this } export function remove (child) { // 沒(méi)有要移除的子節(jié)點(diǎn)則移除本身 if (!child) { if (this.node.parentNode) { this.node.parentNode.removeChild(this.node) } } else { let realNode = null if (isArray(child)) { child.forEach(c => { realNode = getRealNode(c) if (realNode) { this.node.removeChild(realNode) } }) } else { realNode = getRealNode(child) if (realNode) { this.node.removeChild(realNode) } } } return this }
core/style.js:內(nèi)聯(lián)樣式操作
import { isDef, isObject } from "../tools" const htmlStyle = document.documentElement.style const prefixes = ["webkit", "moz", "ms", "o"] const prefixLen = prefixes.length function getRealStyleName (name) { if (name in htmlStyle) { return name } // 首字母大寫(xiě) let upperName = name[0].toUpperCase() + name.substr(1) // 前綴判斷 for (let i = 0; i < prefixLen; i++) { let realName = prefixes[i] + upperName if (realName in htmlStyle) { return realName } } // 都不支持則返回原值 return name } export function css (name) { if (!this.computedStyle) { this.computedStyle = window.getComputedStyle(this.node) } if (!isDef(name)) { return this.computedStyle } return this.computedStyle[name] } export function style (a, b) { if (isObject(a)) { Object.keys(a).forEach(name => { name = getRealStyleName(name) this.node.style[name] = a[name] }) } else { a = getRealStyleName(a) if (!isDef(b)) { return this.node.style[a] } this.node.style[a] = b } return this } export function show () { if (this.node.style.display === "none") { this.node.style.display = "" } return this } export function hide () { this.node.style.display = "none" return this } export function width () { return this.node.clientWidth } export function height () { return this.node.clientHeight }
core/index.js:所有操作集合
import * as attr from "./attr" import * as find from "./find" import * as klass from "./klass" import * as listener from "./listener" import * as node from "./node" import * as style from "./style" export default Object.assign({}, attr, find, klass, listener, node, style )
api.js:DOM API
// 創(chuàng)建dom節(jié)點(diǎn) export function createElement (tagName) { return document.createElement(tagName) } // 創(chuàng)建dom節(jié)點(diǎn)片段 export function createFragment () { return document.createDocumentFragment() }
tools.js:工具方法
import { createElement } from "./api" export const Q_TYPE = (typeof Symbol === "function" && Symbol("q")) || 0x89bc export const QNODE_TYPE = (typeof Symbol === "function" && Symbol("QNode")) || 0x7b96 // 占位node節(jié)點(diǎn) export const emptyNode = createElement("div") export function isQ (ele) { return ele && ele.node && ele.__type__ === Q_TYPE } /** * 判斷值是否定義 * @param {any} t * @returns {boolean} */ export function isDef (t) { return typeof t !== "undefined" } /** * 判斷是否為字符串 * @param {any} t * @returns {boolean} */ export function isString (t) { return typeof t === "string" } /** * 是否為對(duì)象 * @param {any} t * @param {boolean} [includeArray=false] 是否包含數(shù)組 * @returns {boolean} */ export function isObject (t) { return t && typeof t === "object" } /** * 判斷是否為數(shù)組 * @param {any} t * @returns {boolean} */ export function isArray (t) { if (Array.isArray) { return Array.isArray(t) } return Object.prototype.toString.call(t) === "[object Array]" } // 判斷是否為dom元素 export function isElement (node) { if (isObject(HTMLElement)) { return node instanceof HTMLElement } return node && node.nodeType === 1 && isString(node.nodeName) } export function getRealNode (ele) { if (isElement(ele)) { return ele } else if (isQ(ele)) { return ele.node } return null }
q.js
import { createElement } from "./api" import { Q_TYPE, isElement, isString, emptyNode } from "./tools" import core from "./core" class Q { constructor (selector) { let node if (isElement(selector)) { node = selector } else if (isString(selector)) { if (selector[0] === "$") { node = createElement(selector.substring(1)) } else { node = document.querySelector(selector) } } // node不存在,則創(chuàng)建一個(gè)占位node,避免操作dom報(bào)錯(cuò) this.node = node || emptyNode this.__type__ = Q_TYPE } } // 集合 Object.assign(Q.prototype, core) export default function q (selector) { return new Q(selector) }
QNode.js
import { QNODE_TYPE, isQ, isArray } from "./tools" import q from "./q" export default class QNode { constructor () { this.__type__ = QNODE_TYPE this.qNodes = {} this.store = {} this.methods = {} } q (selector) { return q(selector) } getNode (name) { return this.qNodes[name] } setNode (name, node) { if (isArray(node)) { this.qNodes[name] = node.map(n => isQ(n) ? n : q(n)) } else { this.qNodes[name] = isQ(node) ? node : q(node) } return this.qNodes[name] } getStore (name) { return this.store[name] } setStore (name, value) { this.store[name] = value return value } getMethod (name) { return this.methods[name] } execMethod (name) { let fn = this.methods[name] return fn && fn.apply(this, [].slice.call(arguments, 1)) } setMethod (name, fn) { let thisFn = fn.bind(this) this.methods[name] = thisFn return thisFn } }
index.js
import q from "./q" import QNode from "./QNode" export { q, QNode } export default { q, QNode }
到這里為止,所有代碼已經(jīng)編寫(xiě)完成了。
API Reference q(獲取|創(chuàng)建節(jié)點(diǎn))參數(shù):
#id 根據(jù)id獲取節(jié)點(diǎn)
.class 根據(jù)class獲取節(jié)點(diǎn)
tagName 根據(jù)標(biāo)簽獲取節(jié)點(diǎn)
$tagName 創(chuàng)建新的節(jié)點(diǎn)
備注:如果有多個(gè)節(jié)點(diǎn),則只獲取第一個(gè)
方法:
attr
text: str 【設(shè)置文本內(nèi)容,若無(wú)參數(shù)則獲取文本內(nèi)容】
html: str 【設(shè)置html,若無(wú)參數(shù)則獲取html】
value: val 【設(shè)置表單值,若無(wú)參數(shù)則獲取表單值】
attr: name, value 【設(shè)置name屬性的值,若value無(wú)參數(shù)則獲取name的值】
find
tagName 【獲取節(jié)點(diǎn)名稱(chēng)】
current 【獲取節(jié)點(diǎn)本身】
parent 【獲取父節(jié)點(diǎn)】
next 【獲取后一個(gè)節(jié)點(diǎn)】
prev 【獲取上一個(gè)節(jié)點(diǎn)】
first 【獲取第一個(gè)子節(jié)點(diǎn)】
last 【獲取最后一個(gè)子節(jié)點(diǎn)】
find: #id | .class | tagName 【找子節(jié)點(diǎn)】
class
addClass: str | arr | a, b, ... 【添加樣式class】
removeClass: str | arr | a, b, ... 【移除樣式class】
hasClass: str 【是否含有樣式class】
listener
on: type, fn, useCapture=false 【添加事件監(jiān)聽(tīng)】
off: type, fn 【移除事件監(jiān)聽(tīng)】
node
append: node | nodeList 【填充子節(jié)點(diǎn)到最后】
appendTo: parent 【填充到父節(jié)點(diǎn)中最后】
prepend: node | nodeList, reference 【填充子節(jié)點(diǎn)到最前或指定節(jié)點(diǎn)前】
prependTo: parent, reference【填充到父節(jié)點(diǎn)中最前或指定節(jié)點(diǎn)前】
remove: child 【移除子節(jié)點(diǎn),若無(wú)參數(shù)則移除自身】
style
css: name 【獲取css文件中定義的樣式】
style: (name, value) | object 【1.設(shè)置或獲取內(nèi)聯(lián)樣式;2.設(shè)置一組樣式】
show 【顯示節(jié)點(diǎn)】
hide 【隱藏節(jié)點(diǎn)】
width 【獲取節(jié)點(diǎn)寬度】
height 【獲取節(jié)點(diǎn)高度】
QNode(節(jié)點(diǎn)倉(cāng)庫(kù),包括數(shù)據(jù)和方法)方法:
q: 同上述q
getNode: name 【獲取節(jié)點(diǎn)】
setNode: name, node 【設(shè)置節(jié)點(diǎn),返回節(jié)點(diǎn)】
getStore: name 【獲取數(shù)據(jù)】
setStore: name, value 【設(shè)置數(shù)據(jù),返回?cái)?shù)據(jù)】
getMethod: name 【獲取方法】
setMethod: name, fn 【設(shè)置方法,返回方法,this綁定到qnode】
execMethod: name 【執(zhí)行方法,name后面可以傳入方法需要的參數(shù),this為qnode】
結(jié)語(yǔ)本文到這里就要結(jié)束了,讀者對(duì)文中的代碼感興趣的話,建議自己動(dòng)手試試,在編程這塊兒,實(shí)踐才能出真知。
寫(xiě)完之后,是不是躍躍欲試呢?下一篇文章我將基于本文封裝的DOM庫(kù)來(lái)開(kāi)發(fā)無(wú)限循環(huán)輪播圖,詳細(xì)請(qǐng)看下文:原生js系列之無(wú)限循環(huán)輪播圖。
附:本文源碼
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/92138.html
摘要:于是在不斷的摸索和思考中,想出了工廠模式這個(gè)概念,咱們可以這么理解工廠就是取快遞的地方,不管是從哪里發(fā)來(lái)的貨品,統(tǒng)一送到這里,然后再由特定的人群來(lái)取。 寫(xiě)在前面 如今,在項(xiàng)目中使用React、Vue等框架作為技術(shù)棧已成為一種常態(tài),在享受帶來(lái)便利性的同時(shí),也許我們漸漸地遺忘原生js的寫(xiě)法。 現(xiàn)在,是時(shí)候回歸本源,響應(yīng)原始的召喚了。本文將一步一步帶領(lǐng)大家封裝一套屬于自己的DOM操作庫(kù),我將...
摘要:模塊化是隨著前端技術(shù)的發(fā)展,前端代碼爆炸式增長(zhǎng)后,工程化所采取的必然措施。目前模塊化的思想分為和。特別指出,事件不等同于異步,回調(diào)也不等同于異步。將會(huì)討論安全的類(lèi)型檢測(cè)惰性載入函數(shù)凍結(jié)對(duì)象定時(shí)器等話題。 Vue.js 前后端同構(gòu)方案之準(zhǔn)備篇——代碼優(yōu)化 目前 Vue.js 的火爆不亞于當(dāng)初的 React,本人對(duì)寫(xiě)代碼有潔癖,代碼也是藝術(shù)。此篇是準(zhǔn)備篇,工欲善其事,必先利其器。我們先在代...
摘要:大潮來(lái)襲前端開(kāi)發(fā)能做些什么去年谷歌和火狐針對(duì)提出了的標(biāo)準(zhǔn),顧名思義,即的體驗(yàn)方式,我們可以戴著頭顯享受沉浸式的網(wǎng)頁(yè),新的標(biāo)準(zhǔn)讓我們可以使用語(yǔ)言來(lái)開(kāi)發(fā)。 VR 大潮來(lái)襲 --- 前端開(kāi)發(fā)能做些什么 去年谷歌和火狐針對(duì) WebVR 提出了 WebVR API 的標(biāo)準(zhǔn),顧名思義,WebVR 即 web + VR 的體驗(yàn)方式,我們可以戴著頭顯享受沉浸式的網(wǎng)頁(yè),新的 API 標(biāo)準(zhǔn)讓我們可以使用 ...
摘要:沒(méi)有看過(guò)上一篇文章的話,可以在這里找到原生系列之工廠模式。那么這篇文章,我們將基于上述的,從頭開(kāi)始寫(xiě)一個(gè)無(wú)限循環(huán)輪播圖的組件。附無(wú)限循環(huán)輪播圖示例本文源碼 前情回顧 在上一篇文章中,我們封裝了一個(gè)DOM庫(kù)(qnode),為了讓大家直觀地感受到其方便友好的自定義工廠模式,于是給大家?guī)?lái)了這篇文章。 沒(méi)有看過(guò)上一篇文章的話,可以在這里找到:原生js系列之DOM工廠模式。 那么這篇文章,我們...
閱讀 3464·2021-11-18 10:02
閱讀 3707·2021-09-13 10:25
閱讀 1920·2021-07-26 23:38
閱讀 2569·2019-08-30 15:44
閱讀 2270·2019-08-30 13:51
閱讀 1225·2019-08-26 11:35
閱讀 2273·2019-08-26 10:29
閱讀 3444·2019-08-23 14:56