探索 Snabbdom 模块系统原理

snabbdom-cover

近几年随着 React、Vue 等前端框架不断兴起，Virtual DOM 概念也越来越火，被用到越来越多的框架、库中。Virtual DOM 是基于真实 DOM 的一层抽象，用简单的 JS 对象描述真实 DOM。本文要介绍的 Snabbdom 就是 Virtual DOM 的一种简单实现，并且 Vue 的 Virtual DOM 也参考了 Snabbdom 实现方式。

对于想要深入学习 Vue Virtual DOM 的朋友，建议先学习 Snabbdom，对理解 Vue 会很有帮助，并且其核心代码 200 多行。

本文挑选 Snabbdom 模块系统作为主要核心点介绍，其他内容可以查阅官方文档《Snabbdom》。

snabbdom-cover

一、Snabbdom 是什么

Snabbdom 是一个专注于简单性、模块化、强大特性和性能的虚拟 DOM 库。其中有几个核心特性：

  1. 核心代码 200 行，并且提供丰富的测试用例；
  2. 拥有强大模块系统，并且支持模块拓展和灵活组合；
  3. 在每个 VNode 和全局模块上，都有丰富的钩子，可以在 Diff 和 Patch 阶段使用。

接下来从一个简单示例来体验一下 Snabbdom。

1. 快速上手

安装 Snabbdom：

npm install snabbdom -D

接着新建 index.html，设置入口元素：

然后新建 demo1.js 文件，并使用 Snabbdom 提供的函数：

// demo1.js
import { h } from 'snabbdom/src/package/h'
import { init } from 'snabbdom/src/package/init'

const patch = init([])
let vnode = h('div#app', 'Hello Leo')
const app = document.getElementById('app')
patch(app, vnode)

这样就实现一个简单示例，在浏览器打开 index.html，页面将显示 “Hello Leo” 文本。
img-1.png

接下来，我会以 snabbdom-demo 项目作为学习示例，从简单示例到模块系统使用的示例，深入学习和分析 Snabbdom 源码，重点分析 Snabbdom 模块系统。

二、Snabbdom-demo 分析

Snabbdom-demo 项目中的三个演示代码，为我们展示如何从简单到深入 Snabbdom。
首先克隆仓库并安装：

$ git clone https://github.com/zyycode/snabbdom-demo.git
$ npm install

虽然本项目没有 README.md 文件，但项目目录比较直观，我们可以轻松的从 src 目录找到这三个示例代码的文件：

  • 01-basicusage.js
  • 02-basicusage.js
  • 03-modules.js -> 本文核心介绍

接着在 index.html 中引入想要学习的代码文件，默认  ，通过 package.json 可知启动命令并启动项目：

$ npm run dev

1. 简单示例分析

当我们要研究一个库或框架等比较复杂的项目，可以通过官方提供的简单示例代码进行分析，我们这里选择该项目中最简单的 01-basicusage.js 代码进行分析，其代码如下：

// src/01-basicusage.js

import { h } from 'snabbdom/src/package/h'
import { init } from 'snabbdom/src/package/init'

const patch = init([])

let vnode = h('div#container.cls', 'Hello World')
const app = document.getElementById('app') // 入口元素

const oldVNode = patch(app, vnode)

// 假设时刻
vnode = h('div', 'Hello Snabbdom')
patch(oldVNode, vnode)

运行项目以后，可以看到页面展示了“Hello Snabbdom”文本，这里你会觉得奇怪，前面的 “Hello World” 文本去哪了？

img-2.png

原因很简单，我们把 demo 中的下面两行代码注释后，页面便显示文本是 “Hello World”：

vnode = h('div', 'Hello Snabbdom')
patch(oldVNode, vnode)

这里我们可以猜测 patch() 函数可以将 VNode 渲染到页面。更进一步可以理解为，这边第一个执行 patch() 函数为首次渲染，第二次执行 patch() 函数为更新操作。

img-3.png

2. VNode 介绍

这里可能会有小伙伴疑惑，示例中的 VNode 是什么？这里简单解释下：

VNode，该对象用于描述节点的信息，它的全称是虚拟节点（virtual node）。与 “虚拟节点” 相关联的另一个概念是 “虚拟 DOM”，它是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。“虚拟 DOM” 由 VNode 组成的。
—— 全栈修仙之路 《Vue 3.0 进阶之 VNode 探秘》

其实 VNode 就是一个 JS 对象，在 Snabbdom 中是这么定义 VNode 的类型：

export interface VNode {
  sel: string | undefined; // selector的缩写
  data: VNodeData | undefined; // 下面VNodeData接口的内容
  children: Array | undefined; // 子节点
  elm: Node | undefined; // element的缩写，存储了真实的HTMLElement
  text: string | undefined; // 如果是文本节点，则存储text
  key: Key | undefined; // 节点的key，在做列表时很有用
}

export interface VNodeData {
  props?: Props
  attrs?: Attrs
  class?: Classes
  style?: VNodeStyle
  dataset?: Dataset
  on?: On
  hero?: Hero
  attachData?: AttachData
  hook?: Hooks
  key?: Key
  ns?: string // for SVGs
  fn?: () => VNode // for thunks
  args?: any[] // for thunks
  [key: string]: any // for any other 3rd party module
}

在 VNode 对象中含描述节点选择器 sel 字段、节点数据 data 字段、节点所包含的子节点 children 字段等。

在这个 demo 中，我们似乎并没有看到模块系统相关的代码，没事，因为这是最简单的示例，下一节会详细介绍。

我们在学习一个函数时，可以重点了解该函数的“入参”和“出参”，大致就能判断该函数的作用。

从这个 demo 主要执行过程可以看出，主要用到有三个函数： init() / patch() / h() ，它们到底做什么用的呢？我们分析一下 Snabbdom 源码中这三个函数的入参和出参情况：

3. init() 函数分析

init() 函数被定义在 package/init.ts 文件中：

// node_modules/snabbdom/src/package/init.ts

export function init (modules: Array>, domApi?: DOMAPI) {
    // 省略其他代码
}

其参数类型如下：

function init(modules: Array>, domApi?: DOMAPI): (oldVnode: VNode | Element, vnode: VNode) => VNode

export type Module = Partial<{
  pre: PreHook
  create: CreateHook
  update: UpdateHook
  destroy: DestroyHook
  remove: RemoveHook
  post: PostHook
}>
  
export interface DOMAPI {
  createElement: (tagName: any) => HTMLElement
  createElementNS: (namespaceURI: string, qualifiedName: string) => Element
  createTextNode: (text: string) => Text
  createComment: (text: string) => Comment
  insertBefore: (parentNode: Node, newNode: Node, referenceNode: Node | null) => void
  removeChild: (node: Node, child: Node) => void
  appendChild: (node: Node, child: Node) => void
  parentNode: (node: Node) => Node | null
  nextSibling: (node: Node) => Node | null
  tagName: (elm: Element) => string
  setTextContent: (node: Node, text: string | null) => void
  getTextContent: (node: Node) => string | null
  isElement: (node: Node) => node is Element
  isText: (node: Node) => node is Text
  isComment: (node: Node) => node is Comment
}

init() 函数接收一个模块数组 modules 和可选的 domApi 对象作为参数，返回一个函数，即 patch() 函数。
domApi 对象的接口包含了很多 DOM 操作的方法。
这里的 modules 参数本文将重点介绍。

4. patch() 函数分析

init() 函数返回了一个 patch() 函数，其类型为：

// node_modules/snabbdom/src/package/init.ts

patch(oldVnode: VNode | Element, vnode: VNode) => VNode

patch() 函数接收两个 VNode 对象作为参数，并返回一个新 VNode。

5. h() 函数分析

h() 函数被定义在 package/h.ts 文件中：

// node_modules/snabbdom/src/package/h.ts

export function h(sel: string): VNode
export function h(sel: string, data: VNodeData | null): VNode
export function h(sel: string, children: VNodeChildren): VNode
export function h(sel: string, data: VNodeData | null, children: VNodeChildren): VNode
export function h (sel: any, b?: any, c?: any): VNode{
    // 省略其他代码
}

h() 函数接收多种参数，其中必须有一个 sel 参数，作用是将节点内容挂载到该容器中，并返回一个新 VNode。

6. 小结

通过前面介绍，我们在回过头看看这个 demo 的代码，大致调用流程如下：

img-4.png

三、深入 Snabbdom 模块系统

学习完前面这些基础知识后，我们已经知道 Snabbdom 使用方式，并且知道其中三个核心方法入参出参情况和大致作用，接下来开始看本文核心 Snabbdom 模块系统。

1. Modules 介绍

Snabbdom 模块系统是 Snabbdom 提供的一套可拓展、可灵活组合的模块系统，用来为 Snabbdom 提供操作 VNode 时的各种模块支持，如我们组建需要处理 style 则引入对应的 styleModule，需要处理事件，则引入 eventListenersModule 既可，这样就达到灵活组合，可以支持按需引入的效果。

Snabbdom 模块系统的特点可以概括为：支持按需引入、独立管理、职责单一、方便组合复用、可维护性强。

当然 Snabbdom 模块系统还有其他内置模块：

模块名称 模块功能 示例代码
attributesModule 为 DOM 元素设置属性，在属性添加和更新时使用 setAttribute 方法。 h('a', { attrs: { href: '/foo' } }, 'Go to Foo')
classModule 用来动态设置和切换 DOM 元素上的 class 名称。 h('a', { class: { active: true, selected: false } }, 'Toggle')
datasetModule 为 DOM 元素设置自定义数据属性（data- *）。然后可以使用 HTMLElement.dataset 属性访问它们。 h('button', { dataset: { action: 'reset' } }, 'Reset')
eventListenersModule 为 DOM 元素绑定事件监听器。 h('div', { on: { click: clickHandler } })
propsModule 为 DOM 元素设置属性，如果同时使用 attributesModule，则会被 attributesModule 覆盖。 h('a', { props: { href: '/foo' } }, 'Go to Foo')
styleModule 为 DOM 元素设置 CSS 属性。 h('span', {style: { color: '#c0ffee'}}, 'Say my name')

2. Hooks 介绍

Hooks 也称钩子，是 DOM 节点生命周期的一种方法。Snabbdom 提供丰富的钩子选择。模块既使用钩子来扩展 Snabbdom，也在普通代码中使用钩子，用来在 DOM 节点生命周期中执行任意代码。

这里大致介绍一下所有的 Hooks：

钩子名称 触发时机 回调参数
pre patch 阶段开始。 none
init 已添加一个 VNode。 vnode
create 基于 VNode 创建了一个 DOM 元素。 emptyVnode, vnode
insert 一个元素已添加到 DOM 元素中。 vnode
prepatch 一个元素即将进入 patch 阶段。 oldVnode, vnode
update 一个元素开始更新。 oldVnode, vnode
postpatch 一个元素完成 patch 阶段。 oldVnode, vnode
destroy 一个元素直接或间接被删除。 vnode
remove 一个元素直接从 DOM 元素中删除。 vnode, removeCallback
post patch 阶段结束。 none

模块中可以使用这些钩子：pre, create, update, destroy, remove, post。
单个元素可以使用这些钩子：init, create, insert, prepatch, update, postpatch, destroy, remove。

Snabbdom 是这么定义钩子的：

// snabbdom/src/package/hooks.ts

export type PreHook = () => any
export type InitHook = (vNode: VNode) => any
export type CreateHook = (emptyVNode: VNode, vNode: VNode) => any
export type InsertHook = (vNode: VNode) => any
export type PrePatchHook = (oldVNode: VNode, vNode: VNode) => any
export type UpdateHook = (oldVNode: VNode, vNode: VNode) => any
export type PostPatchHook = (oldVNode: VNode, vNode: VNode) => any
export type DestroyHook = (vNode: VNode) => any
export type RemoveHook = (vNode: VNode, removeCallback: () => void) => any
export type PostHook = () => any

export interface Hooks {
  pre?: PreHook
  init?: InitHook
  create?: CreateHook
  insert?: InsertHook
  prepatch?: PrePatchHook
  update?: UpdateHook
  postpatch?: PostPatchHook
  destroy?: DestroyHook
  remove?: RemoveHook
  post?: PostHook
}

接下来我们通过 03-modules.js 文件的示例代码，我们需要样式处理和事件操作，因此引入这两个模块，并进行灵活组合：

// src/03-modules.js

import { h } from 'snabbdom/src/package/h'
import { init } from 'snabbdom/src/package/init'

// 1. 导入模块
import { styleModule } from 'snabbdom/src/package/modules/style'
import { eventListenersModule } from 'snabbdom/src/package/modules/eventlisteners'

// 2. 注册模块
const patch = init([ styleModule, eventListenersModule ])

// 3. 使用 h() 函数的第二个参数传入模块需要的数据（对象）
let vnode = h('div', {
  style: { backgroundColor: '#4fc08d', color: '#35495d' },
  on: { click: eventHandler }
}, [
  h('h1', 'Hello Snabbdom'),
  h('p', 'This is p tag')
])

function eventHandler() {
  console.log('clicked.')
}

const app = document.getElementById('app')
patch(app, vnode)

上面代码中，引入了 styleModule 和 eventListenersModule 两个模块，并且作为参数组合，传入 init() 函数中。
此时我们可以看到页面上显示的内容已经有包含样式，并且点击事件也能正常输出日志 'clicked.' ：

img-5.png

这里我们看下 styleModule 模块源码，把代码精简一下：

// snabbdom/src/package/modules/style.ts

function updateStyle (oldVnode: VNode, vnode: VNode): void {
    // 省略其他代码
}

function forceReflow () {
  // 省略其他代码
}

function applyDestroyStyle (vnode: VNode): void {
  // 省略其他代码
}

function applyRemoveStyle (vnode: VNode, rm: () => void): void {
  // 省略其他代码
}

export const styleModule: Module = {
  pre: forceReflow,
  create: updateStyle,
  update: updateStyle,
  destroy: applyDestroyStyle,
  remove: applyRemoveStyle
}

在看看 eventListenersModule 模块源码：

// snabbdom/src/package/modules/eventlisteners.ts

function updateEventListeners (oldVnode: VNode, vnode?: VNode): void {
    // 省略其他代码
}

export const eventListenersModule: Module = {
  create: updateEventListeners,
  update: updateEventListeners,
  destroy: updateEventListeners
}

明显可以看出，两个模块返回的都是个对象，并且每个属性为一种钩子，如 pre/create 等，值为对应的处理函数，每个处理函数有统一的入参。

继续看下 styleModule 中，样式是如何绑定上去的。这里分析它的 updateStyle 方法，因为元素创建（create 钩子）和元素更新（update 钩子）阶段都是通过这个方法处理：

// snabbdom/src/package/modules/style.ts

function updateStyle (oldVnode: VNode, vnode: VNode): void {
  var cur: any
  var name: string
  var elm = vnode.elm
  var oldStyle = (oldVnode.data as VNodeData).style
  var style = (vnode.data as VNodeData).style

  if (!oldStyle && !style) return
  if (oldStyle === style) return
  
  // 1. 设置新旧 style 默认值
  oldStyle = oldStyle || {}
  style = style || {}
  var oldHasDel = 'delayed' in oldStyle

  // 2. 比较新旧 style
  for (name in oldStyle) {
    if (!style[name]) {
      if (name[0] === '-' && name[1] === '-') {
        (elm as any).style.removeProperty(name)
      } else {
        (elm as any).style[name] = ''
      }
    }
  }
  for (name in style) {
    cur = style[name]
    if (name === 'delayed' && style.delayed) {
      // 省略部分代码
    } else if (name !== 'remove' && cur !== oldStyle[name]) {
      if (name[0] === '-' && name[1] === '-') {
        (elm as any).style.setProperty(name, cur)
      } else {
        // 3. 设置新 style 到元素
        (elm as any).style[name] = cur
      }
    }
  }
}

3. init() 分析

接着我们看下 init() 函数内部如何处理这些 Module。

首先在 init.ts 文件中，可以看到声明了默认支持的 Hooks 钩子列表：

// snabbdom/src/package/init.ts

const hooks: Array = ['create', 'update', 'remove', 'destroy', 'pre', 'post']

接着看 hooks 是如何使用的：

// snabbdom/src/package/init.ts

export function init (modules: Array>, domApi?: DOMAPI) {
  let i: number
  let j: number
  const cbs: ModuleHooks = {  // 创建 cbs 对象，用于收集 module 中的 hook
    create: [],
    update: [],
    remove: [],
    destroy: [],
    pre: [],
    post: []
  }
    // 收集 module 中的 hook，并保存在 cbs 中
  for (i = 0; i < hooks.length; ++i) {
    cbs[hooks[i]] = []
    for (j = 0; j < modules.length; ++j) {
      const hook = modules[j][hooks[i]]
      if (hook !== undefined) {
        (cbs[hooks[i]] as any[]).push(hook)
      }
    }
  }
    // 省略其他代码，稍后介绍
}

上面代码中，创建 hooks 变量用来声明默认支持的 Hooks 钩子，在 init() 函数中，创建 cbs 对象，通过两层循环，保存每个 module 中的 hook 函数到 cbs 对象的指定钩子中。

通过断点可以看到这是 demo 中，cbs 对象是下面这个样子：

img-6.png

这里 cbs 对象收集了每个 module 中的 Hooks 处理函数，保存到对应 Hooks 数组中。比如这里的 create 钩子中保存了 updateStyle 函数和 updateEventListeners 函数。

img-7.png

到这里， init() 函数已经保存好所有 module 的 Hooks 处理函数，接下来就要看看 init() 函数返回的 patch() 函数，这里面将用到前面保存好的 cbs 对象。

4. patch() 分析

init() 函数中最终返回一个 patch() 函数，这边形成一个闭包，闭包里面可以使用到 init() 函数作用域定义的变量和方法，因此在 patch() 函数中能使用 cbs 对象。

patch() 函数会在不同时机点（可以参照前面的 Hooks 介绍），遍历 cbs 对象中不同 Hooks 处理函数列表。

// snabbdom/src/package/init.ts

export function init (modules: Array>, domApi?: DOMAPI) {
    // 省略其他代码
  return function patch (oldVnode: VNode | Element, vnode: VNode): VNode {
    let i: number, elm: Node, parent: Node
    const insertedVnodeQueue: VNodeQueue = []
    for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]()  // [Hooks]遍历 pre Hooks 处理函数列表

    if (!isVnode(oldVnode)) {
      oldVnode = emptyNodeAt(oldVnode) // 当 oldVnode 参数不是 VNode 则创建一个空的 VNode
    }

    if (sameVnode(oldVnode, vnode)) {  // 当两个 VNode 为同一个 VNode，则进行比较和更新
      patchVnode(oldVnode, vnode, insertedVnodeQueue)
    } else {
      createElm(vnode, insertedVnodeQueue) // 当两个 VNode 不同，则创建新元素

      if (parent !== null) {  // 当该 oldVnode 有父节点，则插入该节点，然后移除原来节点
        api.insertBefore(parent, vnode.elm!, api.nextSibling(elm))
        removeVnodes(parent, [oldVnode], 0, 0)
      }
    }
    for (i = 0; i < cbs.post.length; ++i) cbs.post[i]()  // [Hooks]遍历 post Hooks 处理函数列表
    return vnode
  }
}

patchVnode() 函数定义如下：

  function patchVnode (oldVnode: VNode, vnode: VNode, insertedVnodeQueue: VNodeQueue) {
    // 省略其他代码
    if (vnode.data !== undefined) {
      for (let i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)  // [Hooks]遍历 update Hooks 处理函数列表
    }
  }

createVnode() 函数定义如下：

  function createElm (vnode: VNode, insertedVnodeQueue: VNodeQueue): Node {
    // 省略其他代码
    const sel = vnode.sel
    if (sel === '!') {
      // 省略其他代码
    } else if (sel !== undefined) {
      for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode)  // [Hooks]遍历 create Hooks 处理函数列表
      const hook = vnode.data!.hook
    }
    return vnode.elm
  }

removeNodes() 函数定义如下：

  function removeVnodes (parentElm: Node,vnodes: VNode[],startIdx: number,endIdx: number): void {
    // 省略其他代码
    for (; startIdx <= endIdx; ++startIdx) {
      const ch = vnodes[startIdx]
      if (ch != null) {
        rm = createRmCb(ch.elm!, listeners)
        for (let i = 0; i < cbs.remove.length; ++i) cbs.remove[i](ch, rm) // [Hooks]遍历 remove Hooks 处理函数列表
      }
    }
  }

这部分代码跳转较多，总结一下这个过程，如下图：

img-8.png

四、自定义 Snabbdom 模块

前面我们介绍了 Snabbdom 模块系统是如何收集 Hooks 并保存下来，然后在不同时机点执行不同的 Hooks。

在 Snabbdom 中，所有模块独立在 src/package/modules 下，使用的时候可以灵活组合，也方便做解耦和跨平台，并且所有 Module 返回的对象中每个 Hooks 类型如下：

// snabbdom/src/package/init.ts

export type Module = Partial<{
  pre: PreHook
  create: CreateHook
  update: UpdateHook
  destroy: DestroyHook
  remove: RemoveHook
  post: PostHook
}>

// snabbdom/src/package/hooks.ts
export type PreHook = () => any
export type CreateHook = (emptyVNode: VNode, vNode: VNode) => any
export type UpdateHook = (oldVNode: VNode, vNode: VNode) => any
export type DestroyHook = (vNode: VNode) => any
export type RemoveHook = (vNode: VNode, removeCallback: () => void) => any
export type PostHook = () => any

因此，如果开发者需要自定义模块，只需实现不同 Hooks 并导出即可。

接下来我们实现一个简单的模块 replaceTagModule，用来将节点文本自动过滤掉 HTML 标签。

1. 初始化代码

考虑到方便调试，我们直接在 node_modules/snabbdom/src/package/modules/ 目录中新建 replaceTag.ts 文件，然后写个最简单的 demo 框架：

import { VNode, VNodeData } from '../vnode'
import { Module } from './module'

const replaceTagPre = () => {
    console.log("run replaceTagPre!")
}

const updateReplaceTag = (oldVnode: VNode, vnode: VNode): void => {
    console.log("run updateReplaceTag!", oldVnode, vnode)
}

const removeReplaceTag = (vnode: VNode): void => {
    console.log("run removeReplaceTag!", vnode)
}

export const replaceTagModule: Module = {
    pre: replaceTagPre,
    create: updateReplaceTag,
    update: updateReplaceTag,
    remove: removeReplaceTag
}

接下来引入到 03-modules.js 代码中，并简化下代码：

import { h } from 'snabbdom/src/package/h'
import { init } from 'snabbdom/src/package/init'

// 1. 导入模块
import { styleModule } from 'snabbdom/src/package/modules/style'
import { eventListenersModule } from 'snabbdom/src/package/modules/eventlisteners'
import { replaceTagModule } from 'snabbdom/src/package/modules/replaceTag';

// 2. 注册模块
const patch = init([
  styleModule,
  eventListenersModule,
  replaceTagModule
])

// 3. 使用 h() 函数的第二个参数传入模块需要的数据（对象）
let vnode = h('div', '
Hello Leo
')

const app = document.getElementById('app')
const oldVNode = patch(app, vnode)

let newVNode = h('div', '
Hello Leo
')

patch(oldVNode, newVNode)

刷新浏览器，就可以看到 replaceTagModule 的每个钩子都被正常执行：

img-9.png

2. 实现 updateReplaceTag() 函数

我们删除掉多余代码，接下来实现 updateReplaceTag() 函数，当 vnode 创建和更新时，都会调用该方法。

import { VNode, VNodeData } from '../vnode'
import { Module } from './module'

const regFunction = str => str && str.replace(/\<|\>|\//g, "");

const updateReplaceTag = (oldVnode: VNode, vnode: VNode): void => {
    const oldVnodeReplace = regFunction(oldVnode.text);
    const vnodeReplace = regFunction(vnode.text);
    if(oldVnodeReplace === vnodeReplace) return;
    vnode.text = vnodeReplace;
}

export const replaceTagModule: Module = {
    create: updateReplaceTag,
    update: updateReplaceTag,
}

在 updateReplaceTag() 函数中，比较新旧 vnode 的文本内容是否一致，如果一致则直接返回，否则将新的 vnode 的替换后的文本设置到 vnode 的 text 属性，完成更新。

其中有个细节：

vnode.text = vnodeReplace;

这里直接对 vnode.text 进行赋值，页面上的内容也随之发生变化。这是因为 vnode 是个响应式对象，通过调用其 setter 方法，会触发响应式更新，这样就实现页面内容更新。

于是我们看到页面内容中的 HTML 标签被清空了。

img-10.png

3. 小结

这个小节中，我们实现一个简单的 replaceTagModule 模块，体验了一下 Snabbdom 模块灵活组合的特点，当我们需要自定义某些模块时，便可以按照 Snabbdom 的模块开发方式，开发自定义模块，然后通过 Snabbdom 的 init() 函数注入模块即可。

我们再回顾一下 Snabbdom 模块系统特点：支持按需引入、独立管理、职责单一、方便组合复用、可维护性强。

五、通用模块生命周期模型

下面我将前面 Snabbdom 的模块系统，抽象为一个通用模块生命周期模型，其中包含三个核心层：

  1. 模块定义层

在本层可以按照模块开发规范，自定义各种模块。

  1. 模块应用层

一般是在业务开发层或组件层中，用来导入模块。

  1. 模块初始化层

一般是在开发的模块系统的插件中，提供初始化函数（init 函数），执行初始化函数会遍历每个 Hooks，并执行对应处理函数列表的每个函数。

抽象后的模型如下：

image.png

在使用 Module 的时候就可以灵活组合搭配使用啦，在模块初始化层，就会做好调用。

六、总结

本文主要以 Snabbdom-demo 仓库为学习示例，学习了 Snabbdom 运行流程和 Snabbdom 模块系统的运行流程，还通过手写一个简单的 Snabbdom 模块，带大家领略一下 Snabbdom 模块的魅力，最后为大家总结了一个通用模块插件模型。

大家好好掌握 Snabbdom 对理解 Vue 会很有帮助。

你可能感兴趣的:(探索 Snabbdom 模块系统原理)

  • android系统selinux中添加新属性property 辉色投像
    1.定位/android/system/sepolicy/private/property_contexts声明属性开头：persist.charge声明属性类型：u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property
  • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
  • 扫地机类清洁产品之直流无刷电机控制 悟空胆好小 清洁服务机器人单片机人工智能
    扫地机类清洁产品之直流无刷电机控制1.1前言扫地机产品有很多的电机控制，滚刷电机1个，边刷电机1-2个，清水泵电机，风机一个，部分中高端产品支持抹布功能，也就是存在抹布盘电机，还有追觅科沃斯石头等边刷抬升电机，滚刷抬升电机等的，这些电机有直流有刷电机，直接无刷电机，步进电机，电磁阀，挪动泵等不同类型。电机的原理，驱动控制方式也不行。接下来一段时间的几个文章会作个专题分析分享。直流有刷电机会自动持续
  • Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类qt开发语言sdl2linux
    需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
  • Python数据分析与可视化实战指南 William数据分析 pythonpython数据
    在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
  • 腾讯云技术深度探索：构建高效云原生微服务架构 我的运维人生 云原生架构腾讯云运维开发技术共享
    腾讯云技术深度探索：构建高效云原生微服务架构在当今快速发展的技术环境中，云原生技术已成为企业数字化转型的关键驱动力。腾讯云作为行业领先的云服务提供商，不断推出创新的产品和技术，助力企业构建高效、可扩展的云原生微服务架构。本文将深入探讨腾讯云在微服务领域的最新进展，并通过一个实际案例展示如何在腾讯云平台上构建云原生应用。腾讯云微服务架构概览腾讯云微服务架构基于云原生理念，旨在帮助企业快速实现应用的容
  • 从鸡肉高汤到记忆的魔法再到有效提示的艺术 步子哥 人工智能
    还记得小时候那些天马行空的白日梦吗？也许只要按下键盘上的某个神奇组合，电脑就会发出滴滴的声响，一个隐藏的世界突然在你眼前展开，让你获得超凡的能力，摆脱平凡的生活。这听起来像是玩过太多电子游戏的幻想，但实际上，间隔重复系统给人的感觉惊人地相似。在最佳状态下，这些系统就像魔法一样神奇。本文将以一个看似平凡的鸡肉高汤食谱为例，深入浅出地探讨如何编写有效的间隔重复提示，让你像掌握烹饪技巧一样轻松地掌握记忆
  • PHP环境搭建详细教程 好看资源平台 前端php
    PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
  • 基于社交网络算法优化的二维最大熵图像分割 智能算法研学社（Jack旭） 智能优化算法应用图像分割算法php开发语言
    智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码文章目录智能优化算法应用：基于社交网络优化的二维最大熵图像阈值分割-附代码1.前言2.二维最大熵阈值分割原理3.基于社交网络优化的多阈值分割4.算法结果：5.参考文献：6.Matlab代码摘要：本文介绍基于最大熵的图像分割，并且应用社交网络算法进行阈值寻优。1.前言阅读此文章前，请阅读《图像分割：直方图区域划分及信息统计介绍》htt
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 探索OpenAI和LangChain的适配器集成：轻松切换模型提供商 nseejrukjhad langchaineasyui前端python
    #探索OpenAI和LangChain的适配器集成：轻松切换模型提供商##引言在人工智能和自然语言处理的世界中，OpenAI的模型提供了强大的能力。然而，随着技术的发展，许多人开始探索其他模型以满足特定需求。LangChain作为一个强大的工具，集成了多种模型提供商，通过提供适配器，简化了不同模型之间的转换。本篇文章将介绍如何使用LangChain的适配器与OpenAI集成，以便轻松切换模型提供商
  • 利用LangChain的StackExchange组件实现智能问答系统 nseejrukjhad langchainmicrosoft数据库python
    利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件
  • 在一台Ubuntu计算机上构建Hyperledger Fabric网络 落叶无声9 区块链超级账本Hyperledgerfabric区块链ubuntu构建hyperledgerfabric
    在一台Ubuntu计算机上构建HyperledgerFabric网络Hyperledgerfabric是一个开源的区块链应用程序平台，为开发基于区块链的应用程序提供了一个起点。当我们提到HyperledgerFabric网络时，我们指的是使用HyperledgerFabric的正在运行的系统。即使只使用最少数量的组件，部署Fabric网络也不是一件容易的事。Fabric社区创建了一个名为Cello
  • GitHub上克隆项目 bigbig猩猩 github
    从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
  • Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Pythonpython开发语言大数据数据分析数据挖掘
    大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
  • git - Webhook让部署自动化 大猪大猪
    我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
  • 人生的每一步路都算数 sheli
    如果你想打工，一直靠打工赚钱，那你就会不断的希望自己变得更专业，不断的希望能够获得更好的工作机会，升职加薪。如果你的目标志不在此，而是拥有自己的企业，那你的选择就会出现差别。在认真打工的人眼里，会“不务正业”，会总是选择不同岗位，甚至放弃高薪机会。但是这背后都是有更加长远的规划。成功富人所必需的管理技能包括：1．对现金流的管理。2．对系统的管理。3．对人员的管理。所以，在没有获得这些能力之前，只要
  • MongoDB Oplog 窗口 喝醉酒的小白 MongoDB运维
    在MongoDB中，oplog（操作日志）是一个特殊的日志系统，用于记录对数据库的所有写操作。oplog允许副本集成员（通常是从节点）应用主节点上已经执行的操作，从而保持数据的一致性。它是MongoDB副本集实现数据复制的基础。MongoDBOplog窗口oplog窗口是指在MongoDB副本集中，从节点可以用来同步数据的时间范围。这个窗口通常由以下因素决定：Oplog大小：oplog的大小是有限
  • libyuv之linux编译 jaronho Linuxlinux运维服务器
    文章目录一、下载源码二、编译源码三、注意事项1、银河麒麟系统（aarch64）（1）解决armv8-a+dotprod+i8mm指令集支持问题（2）解决armv9-a+sve2指令集支持问题一、下载源码到GitHub网站下载https://github.com/lemenkov/libyuv源码，或者用直接用git克隆到本地，如：gitclonehttps://github.com/lemenko
  • CX8836：小体积大功率升降压方案推荐（附Demo设计指南） 诚芯微科技 社交电子
    CX8836是一颗同步四开关单向升降压控制器，在4.5V-40V宽输入电压范围内稳定工作，持续负载电流10A，能够在输入高于或低于输出电压时稳定调节输出电压，可适用于USBPD快充、车载充电器、HUB、汽车启停系统、工业PC电源等多种升降压应用场合，为大功率TYPE-CPD车载充电器提供最优解决方案。提供CX8836Demo测试、CX8836样品申请及CX8836方案开发技术支持。CX8836同升
  • python os 环境变量 CV矿工 python开发语言numpy
    环境变量：环境变量是程序和操作系统之间的通信方式。有些字符不宜明文写进代码里，比如数据库密码，个人账户密码，如果写进自己本机的环境变量里，程序用的时候通过os.environ.get（）取出来就行了。os.environ是一个环境变量的字典。环境变量的相关操作importos"""设置/修改环境变量：os.environ[‘环境变量名称’]=‘环境变量值’#其中key和value均为string类
  • 第六集如何安装CentOS7.0，3分钟学会centos7安装教程 date分享
    从光盘引导系统按回车键继续进入引导程序安装界面，选择语言这里选择简体中文版点击继续选择桌面安装下面给系统分区选择磁盘，点击完成选择基本分区，点击加号swap分区,大小填内存的两倍在选择根分区，使用所有可用的磁盘空间选择文件系统ext4点击完成，点击开始安装设置root密码，点击完成设置普通用户和密码，点击完成整个过程持续八分钟左右根据个人配置不同，时间长短不同好，现在点击重启系统进入重启状态点击本
  • 01-Git初识 Meereen Gitgit
    01-Git初识概念：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码作用：记录代码内容。切换代码版本，多人开发时高效合并代码内容如何学：个人本机使用：Git基础命令和概念多人共享使用：团队开发同一个项目的代码版本管理Git配置用户信息配置：用户名和邮箱，应用在每次提交代码版本时表明自己的身份命令：查看git版本号git-v配置用户名gitconfig--globaluser.name
  • ARM驱动学习之基础小知识 JT灬新一 ARM嵌入式arm开发学习
    ARM驱动学习之基础小知识•sch原理图工程师工作内容–方案–元器件选型–采购（能不能买到，价格）–原理图（涉及到稳定性）•layout画板工程师–layout（封装、布局，布线，log）（涉及到稳定性）–焊接的一部分工作（调试阶段板子的焊接）•驱动工程师–驱动，原理图，layout三部分的交集容易发生矛盾•PCB研发流程介绍–方案，原理图(网表)–layout工程师（gerber文件）–PCB板
  • Low Power概念介绍-Voltage Area 飞奔的大虎
    随着智能手机，以及物联网的普及，芯片功耗的问题最近几年得到了越来越多的重视。为了实现集成电路的低功耗设计目标，我们需要在系统设计阶段就采用低功耗设计的方案。而且，随着设计流程的逐步推进，到了芯片后端设计阶段，降低芯片功耗的方法已经很少了，节省的功耗百分比也不断下降。芯片的功耗主要由静态功耗（staticleakagepower）和动态功耗(dynamicpower)构成。静态功耗主要是指电路处于等
  • Faiss：高效相似性搜索与聚类的利器 网络·魚 大数据faiss
    Faiss是一个针对大规模向量集合的相似性搜索库，由FacebookAIResearch开发。它提供了一系列高效的算法和数据结构，用于加速向量之间的相似性搜索，特别是在大规模数据集上。本文将介绍Faiss的原理、核心功能以及如何在实际项目中使用它。Faiss原理：近似最近邻搜索：Faiss的核心功能之一是近似最近邻搜索，它能够高效地在大规模数据集中找到与给定查询向量最相似的向量。这种搜索是近似的，
  • 【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面 一个射手座的程序媛 程序员华为od面试职场和发展
    最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
  • docker igotyback eureka云原生
    Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
  • 18、架构-可观测性之聚合度量 大树~~ 架构javapython后端架构
    聚合度量聚合度量是指对系统运行时产生的各种指标数据进行收集、聚合和分析，以了解系统的健康状况和性能表现。聚合度量是可观测性的关键组成部分，通过对度量数据的分析，可以及时发现系统中的异常和瓶颈。以下是对聚合度量各个方面的详细解析，并结合具体的数据案例和技术支撑。指标收集收集系统运行时产生的各种指标数据是聚合度量的基础。常见的指标包括CPU使用率、内存使用率、请求处理时间、请求数、错误率等。以下是指标
  • OPENAIGC开发者大赛企业组AI黑马奖 | AIGC数智传媒解决方案 RPA中国 人工智能AIGC传媒
    在第二届拯救者杯OPENAIGC开发者大赛中，涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到，我们特意开设了优秀作品报道专栏，旨在展示其独特之处和开发者的精彩故事。无论您是技术专家还是爱好者，希望能带给您不一样的知识和启发。让我们一起探索AIGC的无限可能，见证科技与创意的完美融合！创未来AI应用赛-企业组AI黑马奖作品名称：AIGC数智传媒解决方案参赛团队：深圳市三象智能技术
  • java Illegal overloaded getter method with ambiguous type for propert的解决 zwllxs javajdk
    好久不来iteye,今天又来看看，哈哈,今天碰到在编码时，反射中会抛出 Illegal overloaded getter method with ambiguous type for propert这么个东东，从字面意思看，是反射在获取getter时迷惑了，然后回想起java在boolean值在生成getter时，分别有is和getter，也许我们的反射对象中就有is开头的方法迷惑了jdk，
  • IT人应当知道的10个行业小内幕 beijingjava 工作互联网
    10. 虽然IT业的薪酬比其他很多行业要好，但有公司因此视你为其“佣人”。 　　尽管IT人士的薪水没有互联网泡沫之前要好，但和其他行业人士比较，IT人的薪资还算好点。在接下的几十年中，科技在商业和社会发展中所占分量会一直增加，所以我们完全有理由相信，IT专业人才的需求量也不会减少。 　　然而，正因为IT人士的薪水普遍较高，所以有些公司认为给了你这么多钱，就把你看成是公司的“佣人”，拥有你的支配
  • java 实现自定义链表 CrazyMizzz java数据结构
    1.链表结构   链表是链式的结构 2.链表的组成    链表是由头节点，中间节点和尾节点组成    节点是由两个部分组成：       1.数据域       2.引用域 3.链表的实现 &nbs
  • web项目发布到服务器后图片过一会儿消失 麦田的设计者 struts2上传图片永久保存
      作为一名学习了android和j2ee的程序员，我们必须要意识到，客服端和服务器端的交互是很有必要的，比如你用eclipse写了一个web工程，并且发布到了服务器（tomcat）上，这时你在webapps目录下看到了你发布的web工程，你可以打开电脑的浏览器输入http://localhost:8080/工程/路径访问里面的资源。但是，有时你会突然的发现之前用struts2上传的图片
  • CodeIgniter框架Cart类 name 不能设置中文的解决方法 IT独行者 CodeIgniterCart框架　
    今天试用了一下CodeIgniter的Cart类时遇到了个小问题，发现当name的值为中文时，就写入不了session。在这里特别提醒一下。 在CI手册里也有说明，如下： $data = array( 'id' => 'sku_123ABC', 'qty' => 1, '
  • linux回收站 _wy_ linux回收站
    今天一不小心在ubuntu下把一个文件移动到了回收站，我并不想删，手误了。我急忙到Nautilus下的回收站中准备恢复它，但是里面居然什么都没有。     后来我发现这是由于我删文件的地方不在HOME所在的分区，而是在另一个独立的Linux分区下，这是我专门用于开发的分区。而我删除的东东在分区根目录下的.Trash-1000/file目录下，相关的删除信息（删除时间和文件所在
  • jquery回到页面顶端 知了ing htmljquerycss
    html代码： <h1 id="anchor">页面标题</h1> <div id="container">页面内容</div> <p><a href="#anchor" class="topLink">回到顶端</a><
  • B树、B-树、B+树、B*树 矮蛋蛋 B树
    原文地址： http://www.cnblogs.com/oldhorse/archive/2009/11/16/1604009.html B树        即二叉搜索树：        1.所有非叶子结点至多拥有两个儿子（Left和Right）； &nb
  • 数据库连接池 alafqq 数据库连接池
    http://www.cnblogs.com/xdp-gacl/p/4002804.html @Anthor:孤傲苍狼 数据库连接池 用MySQLv5版本的数据库驱动没有问题，使用MySQLv6和Oracle的数据库驱动时候报如下错误： java.lang.ClassCastException: $Proxy0 cannot be cast to java.sql.Connec
  • java泛型 百合不是茶 java泛型
    泛型 在Java SE 1.5之前，没有泛型的情况的下，通过对类型Object的引用来实现参数的“任意化”，任意化的缺点就是要实行强制转换，这种强制转换可能会带来不安全的隐患   泛型的特点：消除强制转换 确保类型安全 向后兼容   简单泛型的定义：      泛型：就是在类中将其模糊化，在创建对象的时候再具体定义 class fan
  • javascript闭包[两个小测试例子] bijian1013 JavaScriptJavaScript
    一.程序一 <script> var name = "The Window"; var Object_a = { 　　name : "My Object", 　　getNameFunc : function(){ var that = this; 　　　　return function(){ 　　　　
  • 探索JUnit4扩展：假设机制（Assumption） bijian1013 javaAssumptionJUnit单元测试
    一.假设机制（Assumption）概述        理想情况下，写测试用例的开发人员可以明确的知道所有导致他们所写的测试用例不通过的地方，但是有的时候，这些导致测试用例不通过的地方并不是很容易的被发现，可能隐藏得很深，从而导致开发人员在写测试用例时很难预测到这些因素，而且往往这些因素并不是开发人员当初设计测试用例时真正目的，
  • 【Gson四】范型POJO的反序列化 bit1129 POJO
    在下面这个例子中，POJO(Data类)是一个范型类，在Tests中，指定范型类为PieceData，POJO初始化完成后，通过 String str = new Gson().toJson(data); 得到范型化的POJO序列化得到的JSON串，然后将这个JSON串反序列化为POJO   import com.google.gson.Gson; import java.
  • 【Spark八十五】Spark Streaming分析结果落地到MySQL bit1129 Stream
    几点总结： 1. DStream.foreachRDD是一个Output Operation，类似于RDD的action，会触发Job的提交。DStream.foreachRDD是数据落地很常用的方法 2. 获取MySQL Connection的操作应该放在foreachRDD的参数（是一个RDD[T]=>Unit的函数类型)，这样，当foreachRDD方法在每个Worker上执行时，
  • NGINX + LUA实现复杂的控制 ronin47 nginx lua
    安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。 这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma
  • java-递归判断数组是否升序 bylijinnan java
    public class IsAccendListRecursive { /*递归判断数组是否升序 * if a Integer array is ascending,return true * use recursion */ public static void main(String[] args){ IsAccendListRecursiv
  • Netty源码学习-DefaultChannelPipeline2 bylijinnan javanetty
    Netty3的API http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/ChannelPipeline.html 里面提到ChannelPipeline的一个“pitfall”： 如果ChannelPipeline只有一个handler（假设为handlerA）且希望用另一handler（假设为handlerB） 来
  • Java工具之JPS chinrui java
    JPS使用     熟悉Linux的朋友们都知道，Linux下有一个常用的命令叫做ps（Process Status)，是用来查看Linux环境下进程信息的。同样的，在Java Virtual Machine里面也提供了类似的工具供广大Java开发人员使用，它就是jps（Java Process Status)，它可以用来
  • window.print分页打印 ctrain window
    function init() { var tt = document.getElementById("tt"); var childNodes = tt.childNodes[0].childNodes; var level = 0; for (var i = 0; i < childNodes.length; i++) {
  • 安装hadoop时 执行jps命令Error occurred during initialization of VM daizj jdkhadoopjps
    在安装hadoop时，执行JPS出现下面错误   [slave16][email protected]:/tmp/hsperfdata_hdfs# jps Error occurred during initialization of VM java.lang.Error: Properties init: Could not determine current working
  • PHP开发大型项目的一点经验 dcj3sjt126com PHP重构
    一、变量 最好是把所有的变量存储在一个数组中，这样在程序的开发中可以带来很多的方便，特别是当程序很大的时候。变量的命名就当适合自己的习惯，不管是用拼音还是英语，至少应当有一定的意义，以便适合记忆。变量的命名尽量规范化，不要与PHP中的关键字相冲突。 二、函数 PHP自带了很多函数，这给我们程序的编写带来了很多的方便。当然，在大型程序中我们往往自己要定义许多个函数，几十
  • android笔记之--向网络发送GET/POST请求参数 dcj3sjt126com android
    使用GET方法发送请求 private static boolean sendGETRequest (String path, Map<String, String> params) throws Exception{ //发送地http://192.168.100.91:8080/videoServi
  • linux复习笔记 之bash shell (3) 通配符 eksliang linux 通配符linux通配符
    转载请出自出处： http://eksliang.iteye.com/blog/2104387 在bash的操作环境中有一个非常有用的功能，那就是通配符。 下面列出一些常用的通配符，如下表所示 符号 意义 * 万用字符，代表0个到无穷个任意字符 ? 万用字符，代表一定有一个任意字符 [] 代表一定有一个在中括号内的字符。例如：[abcd]代表一定有一个字符，可能是a、b、c
  • Android关于短信加密 gqdy365 android
    关于Android短信加密功能，我初步了解的如下（只在Android应用层试验）：     1、因为Android有短信收发接口，可以调用接口完成短信收发；         发送过程：APP（基于短信应用修改）接受用户输入号码、内容——>APP对短信内容加密——>调用短信发送方法Sm
  • asp.net在网站根目录下创建文件夹 hvt .netC#hovertreeasp.netWeb Forms
    假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下： string m_keleyiFolderName = Server.MapPath("/hovertree"); if (Directory.Exists(m_keleyiFolderName)) { //文件夹已经存在 return; } else { try { D
  • 一个合格的程序员应该读过哪些书 justjavac 程序员书籍
    编者按：2008年8月4日，StackOverflow 网友 Bert F 发帖提问：哪本最具影响力的书，是每个程序员都应该读的？ “如果能时光倒流，回到过去，作为一个开发人员，你可以告诉自己在职业生涯初期应该读一本， 你会选择哪本书呢？我希望这个书单列表内容丰富，可以涵盖很多东西。” 很多程序员响应，他们在推荐时也写下自己的评语。 以前就有国内网友介绍这个程序员书单，不过都是推荐数
  • 单实例实践 跑龙套_az 单例
       1、内部类 public class Singleton { private static class SingletonHolder { public static Singleton singleton = new Singleton(); } public Singleton getRes
  • PO VO BEAN 理解 q137681467 VODTOpo
    PO：      全称是 persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。 好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。     BO：     全称是 business object:业务对象 主要作用是把业务逻辑封装为一个对象。这个对
  • 战胜惰性，暗自努力 金笛子 努力
    偶然看到一句很贴近生活的话：“别人都在你看不到的地方暗自努力，在你看得到的地方，他们也和你一样显得吊儿郎当，和你一样会抱怨，而只有你自己相信这些都是真的，最后也只有你一人继续不思进取。”很多句子总在不经意中就会戳中一部分人的软肋，我想我们每个人的周围总是有那么些表现得“吊儿郎当”的存在，是否你就真的相信他们如此不思进取，而开始放松了对自己的要求随波逐流呢？ 我有个朋友是搞技术的，平时嘻嘻哈哈，以
  • NDK/JNI二维数组多维数组传递 wenzongliang 二维数组jniNDK
    多维数组和对象数组一样处理，例如二维数组里的每个元素还是一个数组 用jArray表示，直到数组变为一维的，且里面元素为基本类型，去获得一维数组指针。给大家提供个例子。已经测试通过。 Java_cn_wzl_FiveChessView_checkWin( JNIEnv* env,jobject thiz,jobjectArray qizidata) { jint i,j; int s
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他