菜鸟_小卡酷谋
菜鸟_小卡酷谋

Vue Virtual DOM（虚拟DOM）、使用Snabbdom模拟虚拟DOM实现原理

什么是 Virtual DOM

  • Virtual DOM(虚拟 DOM)，是由普通的 JS 对象来描述 DOM 对象
  • 使用 Virtual DOM 来描述真实 DOM
    Vue Virtual DOM（虚拟DOM）、使用Snabbdom模拟虚拟DOM实现原理_第1张图片

为什么要使用 Virtual DOM

  • 前端开发刀耕火种的时代
  • MVVM 框架解决视图和状态同步问题
  • 模板引擎可以简化视图操作，没办法跟踪状态
  • 虚拟 DOM 跟踪状态变化
    • 虚拟 DOM 可以维护程序的状态，跟踪上一次的状态
    • 通过比较前后两次状态差异更新真实 DOM

虚拟 DOM 的作用和虚拟 DOM 库

虚拟 DOM 的作用

  • 维护视图和状态的关系
  • 复杂视图情况下提升渲染性能
  • 跨平台
    • 浏览器平台渲染DOM
    • 服务端渲染 SSR(Nuxt.js/Next.js)
    • 原生应用(Weex/React Native)
    • 小程序(mpvue/uni-app)等

虚拟 DOM 库

  • Snabbdom
    Vue.js 2.x 内部使用的虚拟 DOM 就是改造的 Snabbdom
    大约 200 SLOC (single line of code) （源码大约就200行，所以研究虚拟DOM使用Snabbdom比研究Vue源码轻松）
    通过模块可扩展（功能强大，类似于插件机制）
    源码使用 TypeScript 开发
    最快的 Virtual DOM 之一
  • virtual-dom

Snabbdom 基本使用

创建项目

安装 parcel
  1. 创建项目目录
md snabbdom-demo
  1. 进入项目目录
cd snabbdom-demo
  1. 创建package.json
npm init -y
  1. 本地安装parcel
npm install parcel-bundler -D

注意：以上操作在 管理员身份运行的cmd窗口中操作，否则可能会在最后一步报错

配置 scripts

安装 parcel 之后，项目目录结构如下
Vue Virtual DOM（虚拟DOM）、使用Snabbdom模拟虚拟DOM实现原理_第2张图片

"scripts": {
    "dev": "parcel index.html --open",
    "build": "parcel build index.html"
  },
目录结构
  1. 根目录下创建入口文件index.html
  2. 创建src目录
    Vue Virtual DOM（虚拟DOM）、使用Snabbdom模拟虚拟DOM实现原理_第3张图片

Snabbdom 文档

  • 看文档的意义
    学习任何一个库都要先看文档
    通过文档了解库的作用
    看文档中提供的示例，自己快速实现一个 demo
    通过文档查看 API 的使用
    （以上题外话_~~~下面提供一个地址感兴趣的阔以看看）
    https://github.com/snabbdom/snabbdom
  • 当前版本 v2.1.0

导入 Snabbdom

创建完项目之后，要导入 Snabbdom

安装 Snabbdom
 npm install snabbdom@2.1.0
导入 Snabbdom
  • Snabbdom 的两个核心函数 init 和 h()
    • init() 是一个高阶函数，返回 patch()
    • h() 返回虚拟节点 VNode
补充
  • 文档中导入的方式
    Vue Virtual DOM（虚拟DOM）、使用Snabbdom模拟虚拟DOM实现原理_第4张图片
  • 实际导入的方式
    parcel/webpack 4 不支持 package.json 中的 exports 字段
    在这里插入图片描述

Demo

通过使用Snabbdom 模拟演示虚拟DOM的实现原理
index.html 引入 01-basicusage.js

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snabbdom-demotitle>
head>
<body>
    <div id="app">div>
    <script src="./src/01-basicusage.js">script>
body>
html>

01-basicusage.js

  • init函数（返回一个patch函数）作用：把虚拟 DOM 转化为真实 DOM 并挂载到 DOM树上
  • h函数作用：创建虚拟 DOM，这里创建的是 VNode 虚拟节点
  • vnode作用：描述真实 DOM
import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'

const patch = init([])

/**
 * init函数（patch函数）作用：把虚拟 DOM 转化为真实 DOM 并挂载到 DOM树上
 * h函数作用：创建虚拟 DOM，这里创建的是 vnode 虚拟节点
 * vnode作用：描述真实 DOM
 */

/**
 * h函数参数
 * 第一参数：标签+选择器
 * 
 * 第二个参数：
 * 如果是字符串就是标签中的文本内容
 * 如果想要嵌套子元素，则第二个参数是一个数组，数组中每个成员都是一个h函数
 *  
*/
// 创建一个vnode h('标签名#id.class')
let vnode = h('div#container.cls','Hello World')
// 获取页面上的id为app的div
let app = document.querySelector('#app')
// 调用patch 比较两个vnode，把两个vnode的差异更新到真实DOM上
/**
 * patch函数参数
 * 第一个参数：旧的 VNode，也可以是 DOM 元素
 * 第二个参数：新的 VNode
 * 
 * 返回值：返回一个新的 VNode，也就是第二个参数
 * 返回的新 VNode 会作为下一次再调用patch时 旧的 VNode 即 把当前的状态保存起来
 */
let oldVnode = patch(app, vnode)

vnode = h('div#container.xxx','Hello Snabbdom')
patch(oldVnode, vnode)

运行

npm run dev

浏览器执行结果
Vue Virtual DOM（虚拟DOM）、使用Snabbdom模拟虚拟DOM实现原理_第5张图片
index.html 引入 02-basicusage.js

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snabbdom-demotitle>
head>
<body>
    <div id="app">div>
    <script src="./src/02-basicusage.js">script>
body>
html>

02-basicusage.js

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

const patch = init([])

let vnode = h('div#container', [
    h('h1', 'Hello Snabbdom'),
    h('p', '这是一个p')
])

let app = document.querySelector('#app')
let oldVnode = patch(app, vnode)

// 模拟请求服务更新页面数据
setTimeout(() => {
    vnode = h('div#container', [
        h('h1', 'Hello World'),
        h('p', '这是一个ppppppppppp')
    ])
    patch(oldVnode, vnode)

    // 清除div中的内容 '!'表示创建空的注释节点
    // patch(oldVnode, h('!'))
}, 2000)

浏览器执行结果
2s之后页面内容更新
Vue Virtual DOM（虚拟DOM）、使用Snabbdom模拟虚拟DOM实现原理_第6张图片

相关资源：Snabbdom 基本使用、了解Vue 虚拟DOM实现使用的Snabbdom

你可能感兴趣的:(Vue,vue.js,dom操作,dom)

  • Python入门教程丨3.2 再见Excel！用Python这5个模块，我把3天工作压缩到3分钟 凌小添 Python教程pythonexcel开发语言
    ⭐还在用Excel手动算均值方差？还在为海量数据统计熬夜加班？用Python这5把「数据手术刀」写一次代码，就能直接复用，专业报告自动生成！本期内容：模块核心功能应用场景math数学计算几何、物理模拟random生成随机数据游戏、抽样测试statistics统计分析回归分析、市场调研numpy数组与矩阵运算图像处理、机器学习pandas表格数据处理与分析金融分析、数据清洗一、基础数学库1.1mat
  • Vue.js 组合函数（Composables） 轻口味 VUE.JS入门与实践vue.js前端javascript
    Vue.js组合函数（Composables）今天我们来聊聊Vue3中的一个重要概念：组合式函数（Composables）。如果你对如何在Vue3中复用有状态逻辑感兴趣，那么这篇文章将为你解答。什么是组合式函数？在Vue应用中，组合式函数是利用Vue的组合式API（CompositionAPI）来封装和复用有状态逻辑的函数。这使得我们可以将组件的逻辑提取到独立的函数中，从而在不同的组件之间共享和复
  • python对文件加密解密模块 ustczhng2012 Python相关博文cryptoAES加密解密
    安装Crypto：pip3installpycryptodome封装一个可用的模块#!/usr/bin/python#-*-coding:UTF-8-*-fromCrypto.CipherimportAESimporthashlibclassAescrypt():def__init__(self,key,model=AES.MODE_CBC,iv='1234567812345678'):self.
  • vue3学习笔记（ref, reactive, setup, hook...） ***无名小卒 学习vue.js1024程序员节
    目录一、搭建项目二、常用的CompositionAPI1.ref函数（实现响应式）2.reactive函数3.vue2和vue3响应式的区别4.setup参数5.计算属性和监视6.vue3生命周期7.自定义hook8.toRef和toRefs9.其他组合式api10.新的组件一、搭建项目npminitvite-app进入项目npminpmrundev二、常用的CompositionAPI1.ref
  • 创建Vue3.0工程和常用 Composition API 黎明之道 VUE1024程序员节
    一、创建Vue3.0工程1.使用vue-cli创建官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create##查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue--version##安装或者升级你的@vue/clinpminstall-g@vue/cli##创建vuecreatevue_tes
  • JavaScript简介、如何在HTML中使用JavaScript以及JavaScript基本概念 v.15889726201 javascripthtmludp
    一、JavaScript简介一个完整的JavaScript实现应该由ECMAScript（核心）、DOM（文档对象模型）、BOM（浏览器对象模型）三个不同的部分组成；ECMAScript提供核心语言；DOM（DocumentObjectModel）把整个页面映射为一个多层节点结构，是针对XML但经过扩展用于HTML的应用程序编程接口（API），借助DOM提供的API，开发人员可以轻松自如地删除、添
  • 【前端面试】深入了解Node.js基础 贾明恣 前端面试node.js
    前端与node.jsNode.js不是一门语言也不是框架，而是JavaScript运行时环境。基于GoogleV8引擎、同时它通过封装和抽象操作系统提供的底层功能，以及使用Libuv等c++/c的核心模块，扩展了JavaScript功能，使得JavaScript能够同时具有DOM操作(浏览器)和I/O、文件读写、操作数据库(服务器端)……能力，是目前最简单的全栈式语言。前端开发者经常需要安装Nod
  • python怎样读取数据类型_python相关的几种数据类型的存储读取方式 瘦下来 python怎样读取数据类型
    归纳一下python中不同数据保存格式的存储和读取，旨在方法整理和速度比较。从数据角度分两种，一是ndarray格式的纯数值数据的读写，二是对象(数据结构)如dict的文件存取。数值数据的读写.bin格式，np.tofile()和np.fromfile()importnumpyasnpa=np.random.randint(0,100,size=(10000,5000))print(a.dtype
  • web前端三大主流框架 109702008 人工智能编程前端框架人工智能
    Claude3OpusWeb前端开发中，目前有三个主流的框架：1.React：React是由Facebook开发的一款JavaScript库，用于构建用户界面。它采用组件化的开发模式，将界面拆分成多个独立且可复用的组件，使开发和维护更加高效。React的核心思想是虚拟DOM（VirtualDOM）和单向数据流，通过高效的DOMdiff算法进行页面更新，提供出色的性能和用户体验。2.Angular：
  • 低代码产品表单渲染架构 露临霜 低代码低代码
    在React和Vue没有流行起来的时候，低代码产品的表单渲染设计通常会使用操作Dom的方式实现。下面是一个表单的例子：产品层用户通过打开表单，使用不同业务场景业务下的表单页面，中间的Render层就是技术实现。每一个不同业务的表单页面就是低代码产品中的一个元素。技术层渲染层的核心在于View和Controller，现代基于框架实现一般是MVVM的实现。上面是基于传统的前端框架实现（Jquery)，
  • Vue 3.0打造响应式用户界面的新方式 随风九天 Vue六脉神剑性能九阴白骨爪前端vue.js前端响应式
    1简介Vue.js是一个用于构建用户界面的渐进式框架。Vue3.0是其最新版本，引入了许多新特性和改进，使得开发者能够更高效地构建响应式的Web应用程序。本文将带你深入了解如何使用Vue3.0来打造响应式用户界面，并通过实际案例和代码示例帮助你快速上手。2环境搭建要开始学习Vue3.0，首先需要安装Node.js和npm。然后可以通过以下命令全局安装@vue/cli：npminstall-g@vu
  • python-OpenCV图片增强 深度学习小学生 python
    importnumpyasnpimportcv2defcrop_image(img,x0,y0,w,h):"""定义裁剪函数:paramimg:要处理的图片:paramx0:左上角横坐标:paramy0:左上角纵坐标:paramw:裁剪宽度:paramh:裁剪高度:return:裁剪后的图片"""returnimg[x0:x0+w,y0:y0+h]defrandom_crop(img,area_r
  • python3.7.4怎么安装pycryptodome_python3.6 安装第三方库 pyCryptodome 实现AES加密 weixin_39799646
    起因前端日子写完的Python入库脚本，通过直接读取配置文件的内容(包含了数据库的ip，数据库的用户名，数据库的密码)，因为配置文件中的数据库密码是明文显示的，所以不太安全，由此对其进行加密。编码之路编程环境Python3.6第三方库–pyCryptodome第三方库的介绍及下载1.在之前的AES加密中，python2或者3.4采用的是pyCyrpto这个模块，但是昨天废了好大劲去安装它都是失败，
  • HTB:堡垒系列-jet.com me3AnG HTB堡垒系列（待续未完）kalilinux
    免责申明：本文进用户学术讨论，请勿用作非法用途，如有，本人概不负责。请遵纪守法。给学习留一点空间生存下去。关于本人，对没错，我是一名干着测绘的小白HTB:jet.com练习首先masscan：Startingmasscan1.0.5(http://bit.ly/14GZzcT)at2020-10-3108:05:08GMT--forcedoptions:-sS-Pn-n--randomize-ho
  • 推荐开源项目：PyCryptodome——Python加密库的卓越替代品 明俪钧
    推荐开源项目：PyCryptodome——Python加密库的卓越替代品pycryptodomeAself-containedcryptographiclibraryforPython项目地址:https://gitcode.com/gh_mirrors/py/pycryptodome1、项目介绍PyCryptodome是一个独立的Python加密原语包，提供了低级别的加密算法。它支持Python
  • python上一个很好用的密码学库——PyCryptodome UN_spoken pythonpycryptodomepython
    1.关于安装不要再使用PyCrypto这个库了，因为这个库三年没有维护了，因此使用它的替代库——PyCryptodome，方法都差不多，安装方法也比较简单，使用下面的命令就可以安装了：pip3installpycryptodome如果之前安装了PyCrypto库，那么，请使用下面的命令进行卸载：pipuninstallpycrypto2.关于使用
  • Python与R统计（4）泊松分布 宠物与不尤编程 左手python右手Rpythonr语言开发语言
    以下是Python与R语言在进行泊松分布建模时的关键区别及示例代码演示：一、核心区别对比特征Python(numpy/scipy)R(stats包)语法格式numpy.random.poisson(lam,size)rpois(n,lambda)参数命名lam(λ参数)lambda(λ参数)随机种子控制numpy.random.seed()set.seed()统计检验集成需配合scipy.stat
  • Vue全流程--Vue2组件的理解第二部分 不清参 Vue全流程vue.jsjavascript前端
    组件命名规则好的命名规则可以省去很多不必要的麻烦，这个好习惯还是要养成的一个单词组成：第一种写法(首字母小写)：school第二种写法(首字母大写)：School多个单词组成：第一种写法(kebab-case命名)：my-school第二种写法(CamelCase命名)：MySchool(需要Vue脚手架支持)备注：(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。(2).
  • 用PYTHON Tkinter 做四子棋游戏(1) Flash The Dash PythonTkinter四子棋游戏游戏python
    之前，总在想，既然有五子棋，有三子棋，为何不做一四子棋游戏呢？今天，就来尝试用PYTHON来开发一个四子棋游戏。首先，想好如何设置棋盘：10*10，读者也能自行调整。随后就设置好了网页的初始长宽，背景颜色等等。代码如下：importtkinterastkfromtkinterimportmessageboximporttimeimportrandomclassTicTacToe:def__init
  • vue2源码npm i时报错（sh: rollup: command not found） 想不到耶 vue2npm前端vue
    在对vue2.6.14版本的源码安装出现警告（WARN）：[email protected]:Thismodulehasbeendeprecatedandisnolongermaintained.Pleaseuse@rollup/plugin-buble.翻译：[email protected]：此模块已被弃用，不再维护。
  • 「Python系列」Python random模块、hashlib模块 ·零落· Python入门到掌握python开发语言random
    文章目录一、Pythonrandom模块1.`random.random()`2.`random.uniform(a,b)`3.`random.randint(a,b)`4.`random.randrange(start,stop,step)`5.`random.choice(seq)`6.`random.shuffle(seq)`7.`random.sample(seq,k)`8.`random
  • 使用Python中的random模块生成随机数 code_welike python开发语言Python
    随机数在计算机编程中经常被用到，可以用于模拟实验、生成随机数据等各种场景。Python提供了random模块，其中包含了生成随机数的函数和方法。本文将介绍random模块的基本用法，并提供一些示例代码。首先，我们需要导入random模块，可以使用以下代码实现：importrandom一旦导入了random模块，我们就可以使用其中的函数和方法来生成随机数了。下面是一些常用的函数和方法：random.
  • random（随机数） MoRanzhi1203 python
    random（随机数）Python的random库是用于生成随机数的标准库。它提供了各种功能，可以产生伪随机数、随机选择元素、打乱序列等。importrandom该模块实现了各种分布的伪随机数生成器。对于整数，从范围中有统一的选择。对于序列，存在随机元素的统一选择、用于生成列表的随机排列的函数、以及用于随机抽样而无需替换的函数。在实数轴上，有计算均匀、正态（高斯）、对数正态、负指数、伽马和贝塔分布
  • Vue对话式前端界面 WUJI02 裁判文书大模型vue.js前端javascript
    一.对话样式的实现用一个messages数组来存放对话信息，信息有两种类型user和botthis.messages.push({type:'user',content:this.userMessage});this.messages.push({type:'bot',content:response.data.reply});模版部分使用:class="['message-content',me
  • vue3+vite+Electron构建跨平台应用 vitenode Electronelectronjavascript前端
    1.搭建第一个electron-vite项目electron-vite是一个新型构建工具，旨在为Electron提供更快、更精简的开发体验。它主要由五部分组成：一套构建指令，它使用Vite打包你的代码，并且它能够处理Electron的独特环境，包括Node.js和浏览器环境。集中配置主进程、渲染器和预加载脚本的Vite配置，并针对Electron的独特环境进行预配置。为渲染器提供快速模块热替换（H
  • springboot + xterm.js + vue + websocket实现终端功能（y-shell）文件管理器实现 张音乐 JSVueReact前端踩坑实战教程树形菜单右键菜单VUE
    一、文件管理器功能描述这一章节讲一下文件管理器的实现与设计细节。首先，文件管理器需要提供以下几个主要的功能，开发过程中使用vue渲染前端页面以及交互过程中还是遇到了不少问题，比如说右键菜单，表单校验。1、文件夹的新增，编辑，删除。2、ssh配置的新增，编辑，删除。3、右键菜单如图：文件夹管理ssh连接管理快速运行dockerrun-itd--namey-shell-
  • 探索2025年最流行的移动端前端框架 程序猿000001号 前端框架
    探索2025年最流行的移动端前端框架正文：在当今快速发展的移动互联网时代，选择合适的前端框架对于开发高效、响应迅速的移动应用至关重要。以下是一些目前非常流行且备受开发者青睐的移动端前端UI框架。VantVant是一个轻量、可靠的移动端Vue组件库，适用于各种业务场景。它提供了丰富的组件和良好的文档支持，是许多电商应用的首选。ElementPlusElementPlus是基于Vue3的桌面端组件库，
  • 自定义数据集使用scikit-learn中的包实现线性回归方法对其进行拟合 辞落山 scikit-learn线性回归python
    1.引言简要介绍线性回归模型及其在机器学习中的应用。2.创建自定义数据集通过生成一个简单的自定义数据集来模拟问题。可以使用numpy生成数据。importnumpyasnpimportmatplotlib.pyplotasplt#生成自定义数据np.random.seed(42)X=2*np.random.rand(100,1)y=4+3*X+np.random.randn(100,1)3.使用s
  • 后台运行vuepress报错：Error: EBADF: bad file descriptor, read AGMTI vuepressvuenpmnode.js前端
    1、问题描述：后台运行vuepress时，报错nohupnpmrundoc:dev报错信息....Error:EBADF:badfiledescriptor,readEmitted'error'eventonReadStreaminstanceat:atemitErrorNT(node:internal/streams/destroy:157:8)aterrorOrDestroy(node:int
  • uniapp 实现Toast轻提示！ Rlm* vue+uni-appuni-appvue.jsjavascript
    一、在components文件夹下新建Toast文件，包含Toast.vue和index.jsToast.vue{{text}}exportdefault{name:"Toast",props:{isshow:{type:Boolean,},text:{type:String,},},watch:{isshow(val){if(val===true){setTimeout(()=>{this.is
  • Nginx负载均衡 510888780 nginx应用服务器
    Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1)、轮询（默认）       每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 2)、weight       指定轮询几率，weight和访问比率成正比
  • RedHat 6.4 安装 rabbitmq bylijinnan erlangrabbitmqredhat
    在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功 机器版本： [root@redhat1 rabbitmq]# lsb_release LSB Version: :base-4.0-amd64:base-4.0-noarch:core
  • FilenameUtils工具类 eksliang FilenameUtilscommon-io
    转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • xml文件解析SAX 不懂事的小屁孩 xml
    xml文件解析:xml文件解析有四种方式， 1.DOM生成和解析XML文档(SAX是基于事件流的解析) 2.SAX生成和解析XML文档(基于XML文档树结构的解析) 3.DOM4J生成和解析XML文档 4.JDOM生成和解析XML 本文章用第一种方法进行解析，使用android常用的DefaultHandler import org.xml.sax.Attributes;
  • 通过定时任务执行mysql的定期删除和新建分区，此处是按日分区 酷的飞上天空 mysql
    使用python脚本作为命令脚本，linux的定时任务来每天定时执行 #!/usr/bin/python # -*- coding: utf8 -*- import pymysql import datetime import calendar #要分区的表 table_name = 'my_table' #连接数据库的信息 host,user,passwd,db =
  • 如何搭建数据湖架构？听听专家的意见 蓝儿唯美 架构
    Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据  “我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数
  • spring学习——控制反转与依赖注入 a-john spring
           控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。 控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。  
  • 用spool+unixshell生成文本文件的方法 aijuans xshell
    例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下: 　　set pages 50000; 　　set lines 200; 　　set trims on; 　　set heading off; 　　spool /oracle_backup/log/test/dept.lst; 　　select deptno||','||dname||','||loc
  • 1、基础--名词解析(OOA/OOD/OOP) asia007 学习基础知识
    OOA:Object-Oriented Analysis（面向对象分析方法） 是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。 　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）
  • 浅谈java转成json编码格式技术 百合不是茶 json编码java转成json编码
    json编码;是一个轻量级的数据存储和传输的语言       在java中需要引入json相关的包,引包方式在工程的lib下就可以了   JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非   常适合于服务器与 JavaScript 之间的数据的交
  • web.xml之Spring配置(基于Spring+Struts+Ibatis) bijian1013 javaweb.xmlSSIspring配置
    指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml, /WEB-INF/
  • Installing SonarQube（Fail to download libraries from server） sunjing InstallSonar
    1.  Download and unzip the SonarQube distribution 2.  Starting the Web Server The default port is "9000" and the context path is "/". These values can be changed in &l
  • 【MongoDB学习笔记十一】Mongo副本集基本的增删查 bit1129 mongodb
    一、创建复本集   假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令：   mongod --port 27017 --dbpath data1 --replSet rs0 mongod --port 27018 --dbpath data2 --replSet rs0 mongod --port 27019 -
  • Anychart图表系列二之执行Flash和HTML5渲染 白糖_ Flash
    今天介绍Anychart的Flash和HTML5渲染功能   HTML5 Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。 这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于
  • Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa bozch laravel
    昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng
  • 编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜 bylijinnan 编程之美
    import java.util.Arrays; import java.util.Random; public class Nim { /**编程之美 NIM游戏分析 问题： 有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头， 能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，
  • lunce创建索引及简单查询 chengxuyuancsdn 查询创建索引lunce
    import java.io.File; import java.io.IOException; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Docume
  • [IT与投资]坚持独立自主的研究核心技术 comsci it
           和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段.....        所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其
  • flashback transaction闪回事务查询 daizj oraclesql闪回事务
       闪回事务查询有别于闪回查询的特点有以下3个： （1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。 （2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。 （3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers
  • Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件 游其是你 FilenameFilter
    这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
  • C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题 dcj3sjt126com c
    # include <stdio.h> int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型 { return 10; //向主调函数返回10 } void g(void) //函数名前面的void表示该函数没有返回值 { //return 10; //error 与第8行行首的void相矛盾 } in
  • 今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl dcj3sjt126com centos
    今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again   处理很简单，修改文件“/etc/yum.repos.d/epel.repo”， 将baseurl的注释取消， mirrorlist注释掉。即可。 &n
  • 单例模式 shuizhaosi888 单例模式
    单例模式      懒汉式 public class RunMain { /** * 私有构造 */ private RunMain() { } /** * 内部类，用于占位，只有 */ private static class SingletonRunMain { priv
  • Spring Security（09）——Filter 234390216 Spring Security
    Filter 目录 1.1     Filter顺序 1.2     添加Filter到FilterChain 1.3     DelegatingFilterProxy 1.4     FilterChainProxy 1.5
  • 公司项目NODEJS实践0.1 逐行分析JS源代码 mongodbnginxubuntunodejs
      一、前言         前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。         网上有很多nod
  • java.lang.Math liuhaibo_ljf javaMathlang
    System.out.println(Math.PI); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1)); System.out.println(Math.abs(111111111)); System.out.println(Mat
  • linux下时间同步 nonobaba ntp
    今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误  PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方
  • ZooKeeper3.4.6的集群部署 roadrunners zookeeper集群部署
    ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。   1、准备工作 我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。   数据存储目录
  • Java高效读取大文件 tomcat_oracle java
    　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法： 　　Files.readLines(new File(path), Charsets.UTF_8); 　　FileUtils.readLines(new File(path)); 　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致
  • 微信支付api返回的xml转换为Map的方法 xu3508620 xmlmap微信api
    举例如下： <xml>    <return_code><![CDATA[SUCCESS]]></return_code>    <return_msg><![CDATA[OK]]></return_msg>    <appid><
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他