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)

Django项目前后端类型中，用户注册功能实现笔记（第一部分）后端django
用户注册前端逻辑为了学会使用Vue.js的双向绑定实现用户的交互和页面局部刷新效果。1.用户注册页面绑定Vue数据1.准备div盒子标签......2.register.html绑定内容：变量、事件、错误提示等{{csrf_input}}用户名:[[error_name_message]]密码:请输入8-20位的密码确认密码:两次输入的密码不一致号:[[error_mobile_message]]
【Vue】 keep-alive缓存组件实战指南 Vesper63 vue.js 缓存前端
Vue中keep-alive的使用详解keep-alive是Vue内置的一个抽象组件，用于缓存不活跃的组件实例，避免重复渲染，从而优化性能。基本用法核心功能组件缓存：当组件切换时，不会被销毁状态保留：组件的所有状态（数据、DOM状态等）会被保留生命周期：触发特有的activated和deactivated钩子使用场景标签页切换路由视图缓存需要保存表单数据的场景组件频繁切换但需要保持状态属性配置1.
OA门户网站方案，含经典必要功能 Alex艾力的IT数字空间 jenkins 运维架构数据库微服务 java 单元测试
一、核心功能模块设计新手引导系统功能设计：分步引导：采用蒙层+气泡提示形式，按用户角色（如新员工、管理员）动态展示核心功能路径（如流程提交、知识检索）。场景化教学：嵌入交互式流程演示（如审批流程模拟），支持用户实时操作练习。进度跟踪：记录用户完成状态，未完成引导时在首页置顶提示。技术实现：基于Vue3的动态路由配置，结合用户行为分析（如点击热区）优化引导路径。统一应用入口功能设计：智能导航栏：根据
Vue 3 最基础核心知识详解第七种黄昏 vue.js 前端 javascript
Vue3作为现代前端主流框架，是前后端开发者都应当掌握的核心技能。本篇文章将带你了解vue3的基础核心知识，适合学习与复习一、Vue3应用创建1.1创建Vue应用的基本步骤//main.jsimport{createApp}from'vue'//1.导入createApp函数importAppfrom'./App.vue'//2.导入根组件constapp=createApp(App)//3.创建
如何在编辑器wangEditor中完美复制粘贴WORD内容？ M_Snow 编辑器 word umeditor粘贴word ueditor粘贴word ueditor复制word ueditor上传word图片 ueditor导入word
要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
网页版wangEditor如何实现WORD图片的高效粘贴？ M_Snow word umeditor粘贴word ueditor粘贴word ueditor复制word ueditor上传word图片 ueditor导入word ueditor导入pdf
要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
基于Java+Vue的数字化人力资源管理系统，高效整合数据，赋能企业人力精细化管理软件源码专题社区源码共享软件工程 java mysql vue 源代码管理
前言：在当今数字化浪潮席卷的时代，企业对于人力资源管理的效率和精准度提出了更高要求。传统的人力资源管理模式已难以满足企业快速发展的需求，繁琐的手工操作、信息传递不及时、数据统计不准确等问题，严重制约了企业人力资源管理的效能。数字化人力资源管理系统的出现，为企业提供了一种全新的解决方案，它借助先进的信息技术，将人力资源管理的各个环节进行整合和优化，实现人力资源管理的自动化、智能化和精细化，从而提升企
腾讯社招前端面经（成都）
本人经验是1.8年，拉钩投递，分享面经用于学习，大家可供参考~面试流程电话面同事面组长面部长面电话面首先会接到一个面试官的电话，问一些简单的问题，简单确认是否水平真实，没有录音，记不到什么了~过了才有线下面试机会(网上说这个只是来简单判断简历是否有水分，所以如果经历正常下能过滴～)。自我介绍上家公司业务、规模项目中遇到的最大挑战react与vue的区别离职原因同事面电话面过了的话，差不多三个工作日
vue中css使用data中的变量 console.log( ) #vue vue.js css javascript
封装一个ui组件，组件的样式一般是多种多样的我们可以通过组件传值的方式将ui属性传递给组件，但是我们属性是在js中可以拿到，vue3之前css是无法直接获取的(vue3中已经可以直接获取，可以去学习一下)通过vars那么在vue2中，我们要借助setProperty函数写一个简单的例子helloworldexportdefault{data(){return{color:'red'}},mount
前端进阶之路-从传统前端到VUE-JS（第一期-VUE-JS环境配置）（Node-JS环境配置）（Node-JS/npm换源）恰薯条的屑海鸥前端 vue.js vue入门 vue vue框架 node.js nodejs配置
经过前面的传统前端开发学习后，我们接下来进行前端的VUE-JS框架学习（写这篇文章的时候VUE-JS最新版是VUE3，所以默认为VUE3即可）首先，我们要配置Node-JS环境，虽然我们还不学习Node-JS但是Node-JS可以快速配置我们的VUE-JS框架，所以本期内容主要以Node-JS环境配置为主Node-JS下载官网：https://nodejs.cn/en/downloadhttps:
vue界面增加自定义水印 js youyu-youyu javascript vue.js 前端
vue整个界面增加自定义水印需求：领导想要增加自定义水印好不容易调完，还是想记录一下,在.vue界面编写exportdefault{mounted(){this.$nextTick(()=>{this.addWatermark()})},methods:{//关键：添加水印//动态添加水印addWatermark(){//这是登录的时候保存在硬盘里的数据constbidataLoginUserin
vue 无图片或者图片报错时显示默认图片 youyu-youyu 前端VUE vue.js javascript ecmascript
一个需求：无图片或者图片报错时显示默认图片importurlImagefrom'@/assets/emptyCar.png';//默认图片exportdefault{data(){return{urlImage,//默认图片}}}
在vue3中通过jspdf+html2canvas实现导出页面pdf功能落晓星 pdf vue.js 前端 ruoyi
一、安装依赖npminstallhtml2canvasjspdf二、创建Vue组件下载文件importhtml2canvasfrom'html2canvas';importjsPDFfrom'jspdf';constroute=useRoute();//当前idconstpolicyExplainId=ref(route.params.id);constloading=ref(false);//详
【问题记录】npm create vue@latest报错菜鸟级后端问题记录 npm vue.js 前端
1，错误日志npmerrorcodeEPERMnpmerrorsyscallmkdirnpmerrorpathD:\ProgramFiles\nodejs\node_cache\_cacachenpmerrorerrnoEPERMnpmerrorFetchError:Invalidresponsebodywhiletryingtofetchhttps://registry.npmjs.org/cr
【NodeJs】【npm】npm安装electron报错果壳~ npm electron 前端
解决问题npm安装electron报错一般来说是镜像源的问题。electron的镜像源与一般的vue之类的镜像源地址不一样需要单独配置。npm读取的全局配置一般是在C:\Users\{用户}\.npmrc这个配置文件中。如果你找不到你的配置文件可以执行如下命令,#执行后会直接用txt打开你的配置文件进行修改保存即可npmconfigeditcache=D:\Develop\nodeJs\node_
[Vue warn]: Unknown custom element: ＜router-view＞ - did you register the component correctly?报错自学也学好编程 Vue vue.js javascript 前端
[Vuewarn]:Unknowncustomelement:-didyouregisterthecomponentcorrectly?Forrecursivecomponents,makesuretoprovidethe“name”option.foundin—>atsrc/App.vue该报错有很大概率是VUE没有进行注册解决方法：可以先检查一下在router>index.js文件，如果缺少注
【通过 emit() 触发的自定义事件】软件205 VUE3API 前端 javascript 开发语言
@[TOC](通过emit()触发的自定义事件)子组件搜索重置constemit=defineEmits();.item-search{margin-left:12px;}父组件使用importFormSearchfrom"@/components/FormSearch/index.vue";consthandleQuery=()=>{console.log("搜索参数:",{...queryPa
v-if、display、visibility、opacity隐藏元素的区别甘露寺前端 vue react
前端元素隐藏与条件渲染完全指南（Vuevs.Reactvs.CSS）本文对比v-if、v-show、display:none、opacity:0、visibility:hidden以及React条件渲染的差异，帮你彻底掌握它们的适用场景！核心概念1.DOM树vs.渲染树DOM树：完整的HTML节点结构（无论是否隐藏）。渲染树：浏览器实际绘制到屏幕上的内容（隐藏元素可能被跳过）。2.关键差异特性是否
#Vue3篇： vue3梳理：&ref自动解包&key使用程序员xiaolibao Vue3篇 vue
vue3Attribute绑定同名简写如果attribute的名称与绑定的JavaScript值的名称相同，那么可以进一步简化语法，省略attribute值在模板中使用ref时，我们不需要附加.value。为了方便起见，当在模板中使用时，ref会自动解包(有一些注意事项)。import{ref}from'vue'exportdefault{setup(){constcount=ref(0)func
vue3中ref自动解包
1.模板中使用ref类型的数据，会自动解包，注意需要是顶级的ref{{name}}import{ref}from'vue'constname=ref('hello')下面的ref不会自动解包{{num}}--{{obj.id}}num+1-----------{{num+1}}obj.id+1-----------{{obj.id+1}}import{ref}from'vue'constnum=r
vue3中实现高德地图地址搜索自动提示（附源码）年纪轻轻就扛不住 VUE 开发语言 vue.js 前端框架前端
Vue3实现高德地图搜索自动提示功能引言上一篇文章详细讲解了如何在Vue3项目中集成高德地图，本文将重点介绍地址搜索自动提示功能的实现。1.功能介绍搜索提示（AutoComplete）是一种实时提示功能，当用户输入关键字时，可以智能地给出相关的提示信息，帮助用户快速找到目标位置。2.插件初始化首先在插件列表中添加AMap.AutoComplete：AMapLoader.load({plugins:
keep-alive实现原理及Vue2/Vue3对比分析年纪轻轻就扛不住 VUE vue.js 前端 javascript
一、keep-alive基本概念keep-alive是Vue的内置组件，用于缓存组件实例，避免重复渲染。它具有以下特点：抽象组件：自身不会渲染DOM，也不会出现在父组件链中包裹动态组件：缓存不活动的组件实例，而不是销毁它们生命周期：提供activated和deactivated钩子函数二、keep-alive核心实现原理1.基本工作流程判断当前组件是否需要缓存生成组件唯一key缓存组件实例在被包裹
react快速开始项目模板飞鸟malred 前端 react.js 前端前端框架
代码仓库gitee创建项目首先保证安装了node,然后使用vite创建项目vitenpmcreatevitereact-learncdreact-learnnpmi目录结构一个完整的前端项目需要:状态管理在全局维护共有的状态(数据),让页面组件之间共享数据,我们使用pinia路由路由让页面之间可以进行跳转,我们使用vue-router样式样式让页面更美观,我们使用tailwindcss网络请求前端
Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘style‘)“ 本郡主是喵 #JS相关 vue.js javascript 前端
问题解决这个错误通常在Vue组件的created钩子函数中发生，它表示在该钩子函数中尝试读取一个未定义的对象的style属性。造成这个错误的原因可能是：你在`created`钩子函数中引用了一个未定义的数据属性或计算属性。在`created`钩子函数中尝试访问组件的DOM元素，但DOM元素尚未完全加载或渲染。为了解决这个问题，你可以按照以下步骤进行排查：检查在created钩子函数中访问的数据属性
Java web%10 好学且牛逼的马 java 前端 AI编程
%10新路线Javawebai笔记阶段时长内容Web前端基础2天HTML、CSS、JS、Vue3、AjaxWeb后端基础4天Maven、HTTP协议、SpringIOC、DI、MySQL、JDBC、MybatisWeb后端实战6天Tlias案例（基于案例讲解web开发的核心知识）Web后端进阶2天SpringAOP、SpringBoot原理、自定义Starter、Maven高级前端web实战4天V
使用 TinyVue 组件库搭建前端项目的实操体验 Echo_Wish 前端前端
引言在本次活动中，我选择了使用OpenTiny提供的TinyVue组件库来搭建一个前端项目。通过这次实践，我不仅深入了解了TinyVue组件库的核心优势，还体验到了其在跨框架、跨版本开发中的便捷性。本文将分享我的实操过程和使用感受。项目搭建过程环境准备首先，我按照官方文档的指引，完成了开发环境的准备工作。包括安装Node.js、VueCLI以及TinyVue组件库。#安装VueCLInpminst
Vue添加图片作为水印
直接上代码把图片作为水印computed:{watermarkPositions(){constcontainerW=800;constcontainerH=1492;//info-warp高度constarr=[];for(lety=0;y.info-warp{width:800px;height:1492px;.image-container{position:relative;width:1
直播分享|TinyVue 组件库主题适配原理与实战 OpenTiny社区 Vue.js 前端开源 OpenTiny Vue
在前端开发过程中，不同的项目可能需要不同的设计风格。而了解组件库的主题适配功能，也可以帮助开发者轻松定制独特的主题风格，从而满足各种设计需求。因此6月27日晚19点，体验技术团队TinyVue项目成员岑灌铭老师将为大家带来以《TinyVue组件库主题适配原理与实战》为主题的分享，届时将与大家共同探讨主题适配的内容概述及方案详解。直播详情直播主题TinyVue组件库主题适配原理与实战直播亮点一、主题
vue的侦听器及怎么侦听数组--笔记小番茄炒鸡蛋 vue.js javascript 前端
作用侦听属性响应数据的变化，当数据发生改变的时候会立即执行对应的函数letvm=newVue({el:"#test",data:{entry:""},watch:{entry(){console.log("侦听到了");}}})这里我同过侦听器和v-model指令一起用可以更直观的体现他的作用（这也是常用搭配）。原理：当input输入内容后，因为v-model指令的绑定，此时entry属性值会随之
《Vuejs设计与实现》第 12 章（组件实现原理上）前端贾公子 vue.js 前端 javascript
目录12.1组件的渲染12.2组件状态与自更新12.3组件实例与生命周期2.4Props与组件被动更新在上一章节，我们详细探讨了渲染器的基本概念和实现方式，它的主要作用是将虚拟DOM渲染为真实DOM。然而，当我们处理复杂页面时，虚拟DOM描述页面结构的代码量可能会剧增，导致页面模板臃肿。为此，我们引入了组件化的概念，通过组件，我们可以将大型页面划分为多个模块，每个模块都独立为一个组件，最终组成完整
多线程编程之理财周凡杨 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 其他