December_shi

Virtual DOM（虚拟DOM）的实现原理

虚拟DOM

1、什么是Virtual DOM
2、为什么使用Virtual DOM
3、虚拟DOM的作用
4、Snabbdom基本使用
- 4.1 创建项目
- 4.2 导入Snabbdom
- 4.3 Snabbdom使用示例
- - 创建一个hello world
  - 创建一个带新节点并进行替换
  - 清空节点内容
- 4.4 模块
- - 常用模块
  - 模块使用
  - - 模块使用步骤
    - 代码演示
5、`Snabbdom`源码解读
- 5.1 `h`函数
- 5.2 `VNode`函数
- 5.3 复习`h`函数与`Vnode`函数应用

1、什么是Virtual DOM

Virtual DOM（也就是虚拟DOM）

用JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异把所记录的差异应用到所构建的真正的DOM树上，视图就更新了。

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。

2、为什么使用Virtual DOM

创建真实DOM的代价高：真实的 DOM 节点 node 实现的属性很多，而 vnode 仅仅实现一些必要的属性，相比起来，创建一个 vnode 的成本比较低。
触发多次浏览器重绘及回流：使用 vnode ，相当于加了一个缓冲，让一次数据变动所带来的所有 node 变化，先在 vnode 中进行修改，然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改，以减少浏览器的重绘及回流。
虚拟dom由于本质是一个js对象，因此天生具备跨平台的能力，可以实现在不同平台的准确显示。
Virtual DOM 在性能上的收益并不是最主要的，更重要的是它使得 Vue 具备了现代框架应有的高级特性。

3、虚拟DOM的作用

维护视图和状态的关系（虚拟DOM会记录状态的变化，只需要更新状态变化的内容就可以了）

复杂视图情况下提升渲染性能。

随着时代的发展，页面上的功能越来越多，我们需要实现的需求也越来越复杂，DOM的操作也越来越频繁。通过js操作DOM的代价很高，因为会引起页面的重排重绘，增加浏览器的性能开销，降低页面渲染速度，既然操作dom的代价很高那么有没有那种方式可以减少对dom的操作？这时虚拟dom就能解决这个痛点。

4、Snabbdom基本使用

4.1 创建项目

创建项目，并安装parcel

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

配置 package.json 的 scripts

"scripts": {
     
  "dev": "parcel index.html --open", //open打开浏览器
  "build": "parcel build index.html"
}

创建目录结构

├── index.html
├── package.json
└── src
    └── 01-basicusage.js

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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>

4.2 导入Snabbdom

Snabbdom 文档

安装 snabbdom

yarn add sanbbdom //即可安装sanbbdom，也可以安装指定版本0.7.4

// 说新版本有问题，可以先安装0.7.4
npm install [email protected]

导入snabbdom

采用es module 方式导入snabbdom

文档给出的示例是 var snabbdom = require(‘snabbdom’)采用的是commonJS的模块化方式引入的;我们此处需要使用es module来进行导入，所以我们去node_modules中找到snabbdom中的snabbdom.js，发现它只导出了h、thunk、init三个函数，并且都没有采用export default导出，我们学习es6知道，如果没有采用 export default，我们用es module导入的时候就要用对象的形式 {} 去接收
所以我们这样导入：import {h,thunk,init} from 'snabbdom’即可完成导入
```
import {
     h,thunk,init} from 'snabbdom'
```
- h函数的作用是生成一个虚拟dom,我们在vue中也在使用
- init() 是一个高阶函数，返回一个patch()
- thunk()是一种优化策略，主要优化复杂视图

4.3 Snabbdom使用示例

创建一个hello world

01-basicuse.js代码如下：

import {
    h, init } from 'snabbdom'
// 此例主要实现一个hello world 实例
// init接收一个数组作为参数，该参数主要指定使用的模块列表，也可以为空
// 返回一个使用指定模块集的patch函数，此函数的作用主要是对比两个vnode的差异更新到真实DOM
let patch = init([])
// h函数
// 第一个参数：标签+选择器
// 第二个参数：如果是字符串的话就是标签中的内容
// 返回值：vnode虚拟dom
let vnode = h('div#container.cls','hello world')
let appDom = document.querySelector('#app')
// 然后利用patch函数进行内容比较与替换
// patch()函数
// 第一个参数：可以是dom元素，如果是dom则会自动将dom转换成vnode
// 第二个参数：vnode
// 返回值：vnode
let oldVnode = patch(appDom,vnode)

index.html内容

<html>
	<head>
		<meta charset="utf-8">
		<title>snabbdom demotitle>
	head>
	<body>
		<div id="app">div>
    body>
    <script src="./src/01-basicuse.js">script>
html>

项目启动

npm run dev

效果图如下：

创建一个带新节点并进行替换

假如在某个时刻需要重新获取服务端的数据，并且将获取到的数据重新渲染到该div中(id='container'的div)。

我们这里，就需要重新创建一个VNode, 然后传递给patch,让patch比较一下新的VNode与原有的VNode之间的差异。

补充后的代码如下：

import {
    h, thunk, init } from "snabbdom";
// init方法返回值为patch函数，patch函数作用是对比两个vndoe的差异并更新到真实的DOM中。init函数的参数是一个数组，数组中的内容是模块，关于模块内容后面还会讲解
let patch = init([]);
//创建虚拟DOM
// 第一个参数：标签+选择器(id选择器或者是类选择器)
// 第二个参数：如果是字符串的话就是标签中的内容
let vnode = h("div#container.cls", "hello World");
//我们这里需要将创建的虚拟dom，最终要渲染到`index.html`中`app`这个div中，所以这里需要获取一下该div
let app = document.querySelector("#app");
//要想将虚拟DOM渲染到`app`中，需要用到patch函数。
// 我们知道patch函数的作用是对比两个vnode的差异来更新到真实的`DOM`中。
//但是我们目前没有两个虚拟DOM.那么patch方法的第一个参数也可以是真实的DOM.patch方法会将真实的DOM转换成VNode.
// 第二个参数：为VNode
//返回值为VNode
let oldNode = patch(app, vnode);
vnode = h("div", "Hello Vue");
patch(oldNode, vnode);

效果如下：

在上面的代码中，我们又创建了一个虚拟DOM ,vnode。然后把这个vnode与oldNode进行对比，最后渲染到页面中。

清空节点内容

patch(oldVnode,null) //官网给出的错误清空方法

patch(oldVnode,h('!')) //正确清空节点的方法
//h('!') 创建一个注释节点替换之前节点内容

上面那个创建一个带新节点并进行替换想要清空节点，应该为如下代码：

import {
    h, thunk, init } from "snabbdom";
// init方法返回值为patch函数，patch函数作用是对比两个vndoe的差异并更新到真实的DOM中。init函数的参数是一个数组，数组中的内容是模块，关于模块内容后面还会讲解
let patch = init([]);
//创建虚拟DOM
// 第一个参数：标签+选择器(id选择器或者是类选择器)
// 第二个参数：如果是字符串的话就是标签中的内容
let vnode = h("div#container.cls", "hello World");
//我们这里需要将创建的虚拟dom，最终要渲染到&

你可能感兴趣的:(Vue,vue)

v-for 实例琪33
v-for实例v-for实例{{item}}{{index+1}}：{{student.name}}-{{student.age}}varapp=newVue({el:'#app',data:{items:[53,23,76,14,54,36,28],students:[{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age:
npm 搭建 Vite 项目渺小的虫子 viter 前端 javascript 开发语言
兼容性注意Vite需要Node.js版本>=12.0.0。1、使用npm安装Viter$npminitvite@latest使用npm初始化项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线：npminitvite@latestmy-vue-app----templatevue2、配置路由：npminstallvue-
vue 通信方式 hx_1199 vue.js 前端
1、props和$emit父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。父组件this.$emit("update:page",newVal)-->importChildfrom'./child'exportdefault{name:"Father",components:{Child,},data(){return{articleList:['
VUE 页面禁止缩放（华为平板浏览器可能失效）唐屁屁儿 JS vue webview javascript
h5页面移动端禁止缩放、web页面禁止浏览器缩放移动端优先，可禁止用户缩放和双击放大；在App.vue中的script内的方法里加入以下代码：window.onload=function(){document.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault()
Vue 常见面试题(一) 安生生申面试题 vue.js 前端 javascript
目录1、Vue的最大的优势是什么？（必会）2、Vue和jQuery两者之间的区别是什么？（必会）3、MVVM和MVC区别是什么？哪些场景适合？（必会）1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?（必会）5、Object.defineProperty和Proxy的区别（必会）6、Vue生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必会）
react native 总结一切顺势而行 react native react.js javascript
reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
Vue 模版编译原理 I will.874 vue.js javascript 前端
当我们使用Vue编写完一个组件以后，Vue会根据模版编译一个render函数，调用render函数生成虚拟DOM，然后将虚拟DOM映射成真实DOM当数据发生变化时，Vue会触发更新视图，调用render函数返回新的虚拟DOM，对比新旧虚拟DOM，修改真实DOM，从而更新页面在此期间，有以下4个关键步骤：模版编译。生成渲染函数render执行render函数生成虚拟DOM首次渲染，根据虚拟DOM生成
reactive和ref的异同、toRef和toRefs的使用 Niucode vue3 vue.js 前端 javascript
一、reactive和ref有了reactive为什么还要ref？ref处理起基本数据类型来更加的方便快捷，性能要更好。ref内部值的变化只会触发订阅它的副作用函数（effect）更新，而reactive（Proxy）内部对象的任何属性变化都会触发整个对象的重新渲染。相同点：都是Vue3提供的用于创建响应式数据的函数；在组件中都能够触发视图更新，实现数据的双向绑定。不同点：数据类型：reactiv
程序员开发技术整理 laizhixue 学习前端框架
前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
基于SSM+Vue企业销售培训系统企业人才培训系统企业课程培训管理系统企业文化培训班系统Java 计算机程序老哥
作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
vue 在style标签中引入js变量控制样式古迪红尘 VUE vue.js javascript 前端
1.基本的绑定样式示例data(){return{colorData:'blue',}}详细用法可参考下面的博客：https://www.jianshu.com/p/2b82ee1e6199
Vue：为什么要使用v-cloak 刻刻帝的海角 vue.js 前端 javascript
Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu
vue生命周期涡看你就不是好人呐 vue.js javascript 前端
1.computed是在HTMLDOM加载后马上执行的，如赋值；2.methods则必须要有一定的触发条件才能执行，如点击事件；3.watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再wa
Vue 发送Ajax请求多种方式 Red丶哞前端 vue.js ajax 前端
1.发送ajax请求的方式方案一：jq的ajax（在vue中不推荐同时使用）方案二：js原始官方fetch方法方案三：axios第三方2.方案一后端视图函数fromrest_framework.viewsetsimportViewSetfromrest_framework.responseimportResponseclassIndex(ViewSet):defindex(self,request
vue时间组件：dayjs与moment 煸橙干儿~~ VUE实战 vue.js 前端 javascript
一、dayjs使用Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。具体使用可参考：dayjs官网1、本年start=dayjs().startOf('year').format('YYYY-MM-DD')end=dayjs().endOf('year').format('YYYY-MM-DD')console.log(start,end)//['2
vue3中使用过渡动画transition 前端小趴菜05 css
//appear表示一进入页面就使用动画hello.slide-enter-active,//进入动画的生效状态.slide-leave-active{//离开动画的生效状态transition:all0.5sease;}.slide-enter-from,//进入动画开始状态.slide-leave-to{//离开动画结束状态height:0px!important;}.slide-enter-
blog-engine-06-pelican 静态网站生成支持 markdown 和 reST 语法老马啸西风 java
拓展阅读blog-engine-01-常见博客引擎jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman对比blog-engine-02-通过博客引擎jekyll构建githubpages博客实战笔记blog-engine-02-博客引擎jekyll-jekyll博客引擎介绍blog-engine-02-博客引擎jekyll-jekyl
在Vue中组件和组件之间的通信有哪些？ qingyun989 vue.js
1.父向子传数据？props2.子向父传数据？第一种方式：父向子传一个函数，子接收这个函数，然后子去调用这个函数，通过这个函数向子传数据第二种方式：组件的自定义事件绑定事件：负责接收数据触发事件：负责发送数据3.可以完成所有组件之间的数据，包括：兄弟之间、爷孙之间、但不限于这些全局事件总线4.怎么选择呢？父向子：props子向父：自定义事件其他的关系使用全局事件总线
mineadmin使用docker启动方式 qq_38812523 docker php 容器
找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端，https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录，把前端文件复制过来。#容器内访问宿主机的地址用：host.docker.internal#宿主机也可以在ho
vue-pdf 预览pdf (数据流) reembarkation vue.js pdf javascript
页面有个要预览pdf的需求，数据是从后台传递过来的数据流：1.安装插件：npminstallvue-pdf2.在页面引用：importpdffrom'vue-pdf'...components:{pdf},3.html中添加：4.通过接口获取数据：downloadFile({id:this.id}).then((res)=>{if((!res&&res.status!=200)||(res.dat
js封装SDK 在VUE、小程序、公众号直接调用js调用后端接口（本文以vue项目为例）祝你今天也快乐 js vue javascript vue.js 小程序
1.封装一个js文件msgSdk.js注意：需要修改这个请求地址apiServiceAddress;(function(){if(window.msgSdk){return}varmsgSdk=(function(){varm_msgSdk=thisvarapiServiceAddress="http://172.12.14.5:8000"this.I_SendHTTPRequest=functi
【Vue】elementUI-MessageBox组件相关 SZnA1 vue.js elementui 前端
官方代码：点击打开MessageBoxexportdefault{methods:{open(){this.$confirm('此操作将永久删除该文件,是否继续?','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'}).then(()=>{this.$message({type:'success',message:'
基于nodejs+vue智慧农业小程序python-flask-django-php QQ_1963288475 python vue.js 小程序 flask django php node.js
根据此问题，研发一套智慧农业小程序，既能够大大提高信息的检索、变更与维护的工作效率，也能够方便微信小程序的管理运用，从而减少信息管理成本，提高效率。该微信小程序主要设计并完成了管理过程中的用户注册登录、个人信息修改、用户信息、知识科普、土壤信息、水质信息、购物商城等功能。该微信小程序操作简便，界面设计简洁，不但可以基本满足本行业的日常管理工作，同时又可以有效减少人员成本和时间成本，为智慧农业管理工
nodejs+vue的街道办管理系统python-flask-django-php QQ_1963288475 python vue.js flask django php node.js
在此基础上，结合现有街道办管理体系的特点，运用新技术，构建了以nodejs为基础的街道办管理信息化管理体系。首先，以需求为依据，根据需求分析结果进行了系统的设计，并将其划分为管理员和用户二种角色和多个主要模块：用户、住户信息、流动人口、住户居住、住户迁出、缴费信息、投诉维修理、处理信息、评价评分、核酸采样、预约信息等。使用目前市场主流的技术express框架进行项目构建，基于MVC开发模式，使用n
vue动态获取本地图片浅墨_东 vue.js javascript 前端
最近在复习插槽有关知识的时候，遇到一个问题。我想把本地图片动态的展示到页面上，却实现不了。后来搜索了很多有关这方面的知识，才得到了解决。展示错误情况（一）直接使用相对路径importChildfrom'./components/child.vue'exportdefault{data(){return{list:[{name:'小明',avatar:'@/assets/剑士.jpg'},{name
vue3 + Element + nodejs 大文件上传、断点续传 ZL随心 vue.js 前端 javascript
前言大文件上传，一般时间都比较长，这么长的时间内，可能会出现各种各样的问题，比如断网，一旦出错，我们的文件就需要重新上传，这样造成资源浪费，如果我们使用了断点续传继续就不会造成资源浪费了，因为当出现错误的时候，我们再重新上传文件，就会从我们出现错误的地方开始上传了，对于出错前上传的内容就不用再上传了，对于已经上传过的文件，就可以实现秒传的效果了。完整仓库地址流程1、上传方法constonUploa
如何快速上手Vue框架? 山间漫步人生路 vue.js 前端框架 vue.js
要快速上手Vue框架，可以按照以下步骤进行：一、准备工作了解Vue：Vue是一个构建用户界面的渐进式框架，核心库只关注视图层。环境准备：安装Node.js和npm，这是Vue开发的基础环境。二、安装Vue全局安装VueCLI：使用npm全局安装VueCLI，它是一个基于Vue.js进行快速开发的完整系统。npminstall-g@vue/cli三、创建Vue项目使用VueCLI创建新项目：vuec
基于python+vue高校毕业生离校管理系统flask-django-php-nodejs QQ511008285 python vue.js flask django node.js php
课题主要采用Uni-weixin、django架构技术，前端以小程序页面呈现给用户，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生、教务人员、宿管员、图书管理员、财务人员、离校申请、物流信息、钥匙归还、图片归还、欠费信息、催缴信息等功能，从而实现智能化的管理方式，提高工作效率。关键字：高校毕业生离校管理系统；django框架；MySQL数据库语言：
Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题百思不得小李 JS实战记录 vue2实战记录 javascript 前端 vue.js
1.process.env是Node.js中的一个环境1.打开命令行查看环境：2.process.env与VueCLI项目VueCli有以下三种运行模式development模式用于vue-cli-serviceservetest模式用于vue-cli-servicetest:unitproduction模式用于vue-cli-servicebuild和vue-cli-servicetest:e2
vue项目报错，npm install 报错 m87里的光 vue.js npm 前端
1.报错问题：npmERR!cb()nevercalled!npmERR!Thisisanerrorwithnpmitself.Pleasereportthiserrorat:npmERR!9npmERR!Acompletelogofthisruncanbefoundin:npmERR!C:\Users\AdministratorAppDataRoamingnpm-cachelogs2020-12
多线程编程之理财周凡杨 java 多线程生产者消费者理财
现实生活中，我们一边工作，一边消费，正常情况下会把多余的钱存起来，比如存到余额宝，还可以多挣点钱，现在就有这个情况：我每月可以发工资20000万元（暂定每月的1号），每月消费5000（租房+生活费）元（暂定每月的1号），其中租金是大头占90%，交房租的方式可以选择（一月一交，两月一交、三月一交），理财：1万元存余额宝一天可以赚1元钱，
[Zookeeper学习笔记之三]Zookeeper会话超时机制 bit1129 zookeeper
首先，会话超时是由Zookeeper服务端通知客户端会话已经超时，客户端不能自行决定会话已经超时，不过客户端可以通过调用Zookeeper.close()主动的发起会话结束请求，如下的代码输出内容 Created /zoo-739160015 CONNECTEDCONNECTED .............CONNECTEDCONNECTED CONNECTEDCLOSEDCLOSED
SecureCRT快捷键 daizj secureCRT 快捷键
ctrl + a : 移动光标到行首ctrl + e ：移动光标到行尾crtl + b: 光标前移1个字符crtl + f: 光标后移1个字符crtl + h : 删除光标之前的一个字符ctrl + d ：删除光标之后的一个字符crtl + k ：删除光标到行尾所有字符crtl + u : 删除光标至行首所有字符crtl + w: 删除光标至行首
Java 子类与父类这间的转换周凡杨 java 父类与子类的转换
最近同事调的一个服务报错，查看后是日期之间转换出的问题。代码里是把 java.sql.Date 类型的对象强制转换为 java.sql.Timestamp 类型的对象。报java.lang.ClassCastException。代码：
可视化swing界面编辑朱辉辉33 eclipse swing
今天发现了一个WindowBuilder插件，功能好强大，啊哈哈，从此告别手动编辑swing界面代码，直接像VB那样编辑界面，代码会自动生成。首先在Eclipse中点击help，选择Install New Software,然后在Work with中输入WindowBui
web报表工具FineReport常用函数的用法总结（文本函数）老A不折腾 finereport web报表工具报表软件 java报表
文本函数 CHAR CHAR(number):根据指定数字返回对应的字符。CHAR函数可将计算机其他类型的数字代码转换为字符。 Number:用于指定字符的数字，介于1Number:用于指定字符的数字，介于165535之间（包括1和65535）。示例: CHAR(88)等于“X”。 CHAR(45)等于“-”。 CODE CODE(text):计算文本串中第一个字
mysql安装出错林鹤霄 mysql安装
[root@localhost ~]# rpm -ivh MySQL-server-5.5.24-1.linux2.6.x86_64.rpm Preparing... #####################
linux下编译libuv aigo libuv
下载最新版本的libuv源码，解压后执行： ./autogen.sh 这时会提醒找不到automake命令，通过一下命令执行安装（redhat系用yum，Debian系用apt-get）： # yum -y install automake # yum -y install libtool 如果提示错误：make: *** No targe
中国行政区数据及三级联动菜单 alxw4616
近期做项目需要三级联动菜单,上网查了半天竟然没有发现一个能直接用的! 呵呵,都要自己填数据....我了个去这东西麻烦就麻烦的数据上. 哎,自己没办法动手写吧. 现将这些数据共享出了,以方便大家.嗯,代码也可以直接使用文件说明 lib\area.sql -- 县及县以上行政区划分代码（截止2013年8月31日)来源：国家统计局发布时间：2014-01-17 15:0
哈夫曼加密文件百合不是茶哈夫曼压缩哈夫曼加密二叉树
在上一篇介绍过哈夫曼编码的基础知识,下面就直接介绍使用哈夫曼编码怎么来做文件加密或者压缩与解压的软件,对于新手来是有点难度的,主要还是要理清楚步骤; 加密步骤: 1,统计文件中字节出现的次数,作为权值 2,创建节点和哈夫曼树 3,得到每个子节点01串 4,使用哈夫曼编码表示每个字节
JDK1.5 Cyclicbarrier实例 bijian1013 java thread java多线程 Cyclicbarrier
CyclicBarrier类一个同步辅助类，它允许一组线程互相等待，直到到达某个公共屏障点 (common barrier point)。在涉及一组固定大小的线程的程序中，这些线程必须不时地互相等待，此时 CyclicBarrier 很有用。因为该 barrier 在释放等待线程后可以重用，所以称它为循环的 barrier。 CyclicBarrier支持一个可选的 Runnable 命令，
九项重要的职业规划 bijian1013 工作学习
一. 学习的步伐不停止古人说，活到老，学到老。终身学习应该是您的座右铭。世界在不断变化，每个人都在寻找各自的事业途径。您只有保证了足够的技能储
【Java范型四】范型方法 bit1129 java
范型参数不仅仅可以用于类型的声明上，例如 package com.tom.lang.generics; import java.util.List; public class Generics<T> { private T value; public Generics(T value) { this.value =
【Hadoop十三】HDFS Java API基本操作 bit1129 hadoop
package com.examples.hadoop; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.FSDataInputStream; import org.apache.hadoop.fs.FileStatus; import org.apache.hadoo
ua实现split字符串分隔 ronin47 lua split
LUA并不象其它许多"大而全"的语言那样，包括很多功能，比如网络通讯、图形界面等。但是LUA可以很容易地被扩展：由宿主语言(通常是C或 C++)提供这些功能，LUA可以使用它们，就像是本来就内置的功能一样。LUA只包括一个精简的核心和最基本的库。这使得LUA体积小、启动速度快，从而适合嵌入在别的程序里。因此在lua中并没有其他语言那样多的系统函数。习惯了其他语言的字符串分割函
java-从先序遍历和中序遍历重建二叉树 bylijinnan java
public class BuildTreePreOrderInOrder { /** * Build Binary Tree from PreOrder and InOrder * _______7______ / \ __10__ ___2 / \ / 4
openfire开发指南《连接和登陆》开窍的石头 openfire 开发指南 smack
第一步官网下载smack.jar包下载地址：http://www.igniterealtime.org/downloads/index.jsp#smack 第二步把smack里边的jar导入你新建的java项目中开始编写smack连接openfire代码 p
[移动通讯]手机后盖应该按需要能够随时开启 comsci 移动
看到新的手机，很多由金属材质做的外壳，内存和闪存容量越来越大，CPU速度越来越快，对于这些改进，我们非常高兴，也非常欢迎但是，对于手机的新设计，有几点我们也要注意第一：手机的后盖应该能够被用户自行取下来，手机的电池的可更换性应该是必须保留的设计,
20款国外知名的php开源cms系统 cuiyadll cms
内容管理系统，简称CMS，是一种简易的发布和管理新闻的程序。用户可以在后端管理系统中发布，编辑和删除文章，即使您不需要懂得HTML和其他脚本语言，这就是CMS的优点。在这里我决定介绍20款目前国外市面上最流行的开源的PHP内容管理系统，以便没有PHP知识的读者也可以通过国外内容管理系统建立自己的网站。 1. Wordpress WordPress的是一个功能强大且易于使用的内容管
Java生成全局唯一标识符 darrenzhu java uuid unique identifier id
How to generate a globally unique identifier in Java http://stackoverflow.com/questions/21536572/generate-unique-id-in-java-to-label-groups-of-related-entries-in-a-log http://stackoverflow
php安装模块检测是否已安装过, 使用的SQL语句 dcj3sjt126com sql
SHOW [FULL] TABLES [FROM db_name] [LIKE 'pattern'] SHOW TABLES列举了给定数据库中的非TEMPORARY表。您也可以使用mysqlshow db_name命令得到此清单。本命令也列举数据库中的其它视图。支持FULL修改符，这样SHOW FULL TABLES就可以显示第二个输出列。对于一个表，第二列的值为BASE T
5天学会一种 web 开发框架 dcj3sjt126com Web 框架 framework
web framework层出不穷，特别是ruby/python,各有10+个,php/java也是一大堆根据我自己的经验写了一个to do list,按照这个清单，一条一条的学习，事半功倍，很快就能掌握一共25条，即便很磨蹭，2小时也能搞定一条，25*2=50。只需要50小时就能掌握任意一种web框架各类web框架大同小异:现代web开发框架的6大元素，把握主线，就不会迷路建议把本文
Gson使用三(Map集合的处理,一对多处理) eksliang json gson Gson map Gson 集合处理
转载请出自出处：http://eksliang.iteye.com/blog/2175532 一、概述 Map保存的是键值对的形式，Json的格式也是键值对的，所以正常情况下，map跟json之间的转换应当是理所当然的事情。二、Map参考实例 package com.ickes.json; import java.lang.refl
cordova实现“再点击一次退出”效果 gundumw100 android
基本的写法如下： document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { //navigator.splashscreen.hide(); document.addEventListener("b
openldap configuration leaning note iwindyforest configuration
hostname // to display the computer name hostname <changed name> // to change go to: /etc/sysconfig/network, add/modify HOSTNAME=NEWNAME to change permenately dont forget to change /etc/hosts
Nullability and Objective-C 啸笑天 Objective-C
https://developer.apple.com/swift/blog/?id=25 http://www.cocoachina.com/ios/20150601/11989.html http://blog.csdn.net/zhangao0086/article/details/44409913 http://blog.sunnyxx
jsp中实现参数隐藏的两种方法 macroli JavaScript jsp
在一个JSP页面有一个链接，//确定是一个链接?点击弹出一个页面，需要传给这个页面一些参数。//正常的方法是设置弹出页面的src="***.do?p1=aaa&p2=bbb&p3=ccc"//确定目标URL是Action来处理?但是这样会在页面上看到传过来的参数，可能会不安全。要求实现src="***.do"，参数通过其他方法传！//////
Bootstrap A标签关闭modal并打开新的链接解决方案 qiaolevip 每天进步一点点学习永无止境 bootstrap 纵观千象
Bootstrap里面的js modal控件使用起来很方便，关闭也很简单。只需添加标签 data-dismiss="modal" 即可。可是偏偏有时候需要a标签既要关闭modal，有要打开新的链接，尝试多种方法未果。只好使用原始js来控制。 <a href="#/group-buy" class="btn bt
二维数组在Java和C中的区别流淚的芥末 java c 二维数组数组
Java代码： public class test03 { public static void main(String[] args) { int[][] a = {{1},{2,3},{4,5,6}}; System.out.println(a[0][1]); } } 运行结果： Exception in thread "mai
systemctl命令用法 wmlJava linux systemctl
对比表，以 apache / httpd 为例任务旧指令新指令使某服务自动启动 chkconfig --level 3 httpd on systemctl enable httpd.service 使某服务不自动启动 chkconfig --level 3 httpd off systemctl disable httpd.service 检查服务状态 service h

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他