[TOC] * * * * * # 1 InfernoDOM模塊包 ## .1 包目錄 ~~~ packages/inferno-dom/ src/ ;InfernoDOM模塊對應源代碼入口 inferno-dom.js ;InfernoDOM模塊打包入口 ~~~ ## .2 包入口 ~~~ packages/inferno-dom/src/index.js ;導入Inferno源代碼入口 import { render } from '../../../src/DOM/rendering'; ;導出接口 export default { render }; ~~~ # 2 InfernoDOM模塊源代碼 ## .1 源代碼的目錄 ~~~ src\DOM\ __tests__ ;模塊測試目錄 diffing.js lifecycle.js mounting.js patching.js recycling.js rendering.js utils.js ~~~ ## .2 源代碼文件 ### 1 rendering.js ~~~ ;按照依賴關系順序 src\DOM\rendering.js ;導入文件 ;lifecycle.js,mounting.js,patching.js,utils.js import Lifecycle from './lifecycle'; import { mount } from './mounting'; import { patch } from './patching'; import { getActiveNode, resetActiveNode } from './utils'; ;導出render()接口 export function render(node, parentDom) ~~~ ### 2 lifecycle.js ~~~ ;導入patching.js文件 import { patchNode } from './patching'; ;導出接口 ;Lifecycle(),handleLazyAttached(),setClipNode() export default function Lifecycle() export function handleLazyAttached(node, lifecycle, dom) export function setClipNode(clipData, dom, lastNode, nextNode, parentDom, lifecycle) ~~~ ### 3 mounting.js ~~~ ;導入文件 ;core/utils.js,recycling.js,utils.js,patching.js,lifecycle.js import { isArray, isStringOrNumber, isFunction, isNullOrUndefined, addChildrenToProps, isStatefulComponent, isString, isInvalidNode, isPromise, replaceInArray, getRefInstance } from './../core/utils'; import { recyclingEnabled, recycle } from './recycling'; import { appendText, documentCreateElement, createVirtualFragment, insertOrAppendNonKeyed, createEmptyTextNode, selectValue, placeholder, handleAttachedHooks, createNullNode } from './utils'; import { patchAttribute, patchStyle, patch } from './patching'; import { handleLazyAttached } from './lifecycle'; ;導出接口 ;mount(), ;mountArrayChildrenWithKeys() mountArrayChildren(), ;mountEvents(),mountComponent() export function mount(input, parentDom, lifecycle, context, instance, isSVG) export function mountArrayChildrenWithKeys(children, parentDom, lifecycle, context, instance) export function mountArrayChildren(node, children, parentDom, lifecycle, context, instance, isSVG) export function mountEvents(events, eventKeys, dom) export function mountComponent(parentNode, Component, props, hooks, children, lastInstance, parentDom, lifecycle, context) ~~~ ### 4 patching.js ~~~ ;導入文件 ;core/utils.js,diffing.js,mounting.js,utils.js import { isNullOrUndefined, isString, addChildrenToProps, isStatefulComponent, isStringOrNumber, isArray, isInvalidNode } from './../core/utils'; import { diffNodes, diffNodesWithTemplate } from './diffing'; import { mount } from './mounting'; import { insertOrAppendKeyed, insertOrAppendNonKeyed, remove, detachNode, createVirtualFragment, isKeyed, replaceNode } from './utils'; ;導出接口 ;updateTextNode(),patchNode(),patch(),patchStyle(),patchEvents(),patchAttribute() ;patchComponent(),patchNonKeyedChildren(),patchKeyedChildren() export function updateTextNode(dom, lastChildren, nextChildren) export function patchNode(lastNode, nextNode, parentDom, lifecycle, context, instance, isSVG, skipLazyCheck) export function patch(lastInput, nextInput, parentDom, lifecycle, context, instance, isNode, isSVG) export function patchStyle(lastAttrValue, nextAttrValue, dom) export function patchEvents(lastEvents, nextEvents, _lastEventKeys, _nextEventKeys, dom) export function patchAttribute(attrName, lastAttrValue, nextAttrValue, dom) export function patchComponent(hasTemplate, lastNode, Component, lastBp, nextBp, instance, lastProps, nextProps, nextHooks, nextChildren, parentDom, lifecycle, context) export function patchNonKeyedChildren(lastChildren, nextChildren, dom, domChildren, lifecycle, context, instance, domChildrenIndex, isSVG) export function patchKeyedChildren(lastChildren, nextChildren, dom, lifecycle, context, instance, isSVG) ~~~ ### 5 diffing.js ~~~ ;導入文件 ;core/utils.js,utils.js,patching.js,mounting.js,lifecycle.js import { isArray, isStringOrNumber, isFunction, isNullOrUndefined, isStatefulComponent, isInvalidNode, isString, isPromise, getRefInstance } from './../core/utils'; import { replaceWithNewNode, isKeyed, selectValue, removeEvents, removeAllChildren, remove, detachNode, replaceNode } from './utils'; import { patchNonKeyedChildren, patchKeyedChildren, patchAttribute, patchComponent, patchStyle, updateTextNode, patch, patchEvents } from './patching'; import { mountArrayChildren, mount, mountEvents, mountComponent } from './mounting'; import { setClipNode } from './lifecycle'; ;導出接口 ;diffEvents(),diffNodesWithTemplate(),diffNodes() export function diffEvents(lastNode, nextNode, lastEventKeys, nextEventKeys, dom) export function diffNodesWithTemplate(lastNode, nextNode, lastBp, nextBp, parentDom, lifecycle, context, instance, skipLazyCheck) export function diffNodes(lastNode, nextNode, parentDom, lifecycle, context, instance, isSVG) ~~~ ### 6 recycling.js ~~~ ;導入文件 ;patching.js,core/utils.js import { patch } from './patching'; import { isNullOrUndefined } from './../core/utils'; ;導出接口 recyclingEnabled,recycl(),pool() export const recyclingEnabled = true; export function recycle(node, bp, lifecycle, context, instance) export function pool(node) ~~~ # 3 InfernoDOM模塊接口 ~~~ ~~~