javascript练手-简单日历实现

样式表:

<style>
.cld-cur{
color:#6ac13c;
border:1px solid #6ac13c;
background:#e9f8df;
}
</style>

网页布局:

<div id=calendar></div>

JavaScript代码

//判断闰年
function runNian(_year) {
    if(_year%400 === 0 || (_year%4 === 0 && _year%100 !== 0) ) {
        return true;
    }
    else { return false; }
}
//判断某年某月的1号是星期几
function getFirstDay(_year,_month) {
    var allDay = 0, y = _year-1, i = 1;
    allDay = y + Math.floor(y/4) - Math.floor(y/100) + Math.floor(y/400) + 1;
    for ( ; i<_month; i++) {
        switch (i) {
            case 1: allDay += 31; break;
            case 2: 
                if(runNian(_year)) { allDay += 29; }
                else { allDay += 28; }
                break;
            case 3: allDay += 31; break;
            case 4: allDay += 30; break;
            case 5: allDay += 31; break;
            case 6: allDay += 30; break;
            case 7: allDay += 31; break;
            case 8: allDay += 31; break;
            case 9: allDay += 30; break;
            case 10: allDay += 31; break;
            case 11: allDay += 30; break;
            case 12: allDay += 31; break;
        }
    }
    return allDay%7;
}
//显示日历
function showCalendar(_year,_month,_day,firstDay) {
    var i = 0,
        monthDay = 0,
        showStr = "",
        _classname = "",
        today = new Date();
        //月份的天数
    switch(_month) {
        case 1: monthDay = 31; break;
        case 2:
            if(runNian(_year)) { monthDay = 29; }
            else { monthDay = 28; }
            break;
        case 3: monthDay = 31; break;
        case 4: monthDay = 30; break;
        case 5: monthDay = 31; break;
        case 6: monthDay = 30; break;
        case 7: monthDay = 31; break;
        case 8: monthDay = 31; break;
        case 9: monthDay = 30; break;
        case 10: monthDay = 31; break;
        case 11: monthDay = 30; break;
        case 12: monthDay = 31; break;
    }

    //输出日历表格,这部分因结构而异
    showStr = "<table class='cld-w'><thead>";
    //日历头部
    showStr += "<tr><th colspan='7'><div class='cld-hd'><span class='cld-pre'>&lt;</span><em id='showDate' value='" + _year + "-" + _month + "-" + _day + "'>" + _year + "年" + _month + "月" + _day + "日" + "</em><span class='cld-next'>&gt;</span></div></th></tr>";
    //日历星期
    showStr += "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
    showStr += "</thead><tbody><tr>";
    //当月第一天前的空格
    for (i=1; i<=firstDay; i++) {
        showStr += "<td></td>";
    }
    //显示当前月的天数
    for (i=1; i<=monthDay; i++) {
        //当日的日期
        if(_year === today.getFullYear() && _month === today.getMonth()+1 && i === today.getDate()) {
            _classname = "cld-cur"; 
        } 
        //当日之前的日期(这个判断是因为我有工作需求,就是要求之前的日期不能点击)
        else if(_year < today.getFullYear() || (_year === today.getFullYear() && _month <= today.getMonth()) || (_year === today.getFullYear() && _month === today.getMonth()+1 && i < today.getDate()) ) {
            _classname = "cld-old";
        }
        //其他普通的日期
        else { _classname = "cld-day"; }
        //其他大于当月的月份的相同日期(为了让点击下一月的时候,相同的日期增加cld-cur类)
        if(_day === i && (_year > today.getFullYear() || _month > today.getMonth()+1)) { _classname = "cld-cur"; }
        //把日期存在对应的value       
        showStr += "<td class=" + _classname + " value='" + _year + "-" + _month + "-" + i + "'>" + i + "</td>";

        firstDay = (firstDay+1)%7;
        if(firstDay === 0 && i !== monthDay) {
            showStr += "</tr><tr>";
        } 
    }
    
    //剩余的空格
    if(firstDay!==0) {
        for (i=firstDay; i<7; i++) {
            showStr += "<td></td>";
        }
    }
        
    showStr +="</tr></tbody></table>";
    //插入calendar的页面结构里
    calendar.innerHTML = showStr;
}
//显示年月日
function showDate(_year,_month,_day) {
    var date = "", firstDay = getFirstDay(_year,_month,_day);
    if(_day !== 0) {
        date = _year + "年" + _month + "月" +_day + "日";
    }
    else { date = "No Choose."; }
    document.getElementById("showDate").innerHTML = date; //日历头部显示
    showCalendar(_year,_month,_day,firstDay);         //调用日历显示函数
}
//上一月
function preMonth(_year,_month,_day) {
    if(_month == 1) { showDate(_year - 1,12,_day); }
    else { showDate(_year,_month - 1,_day); }
}
//下一月
function nextMonth(_year,_month,_day) {
    if(_month == 12) { showDate(_year + 1,1,_day); }
    else { showDate(_year,_month + 1,_day); }
}
//初始化
var calendar = document.createElement('div');
calendar.setAttribute('id','showCld');
document.getElementById("calendar").appendChild(calendar); //增加到你的calendar里

//获取当天的年月日    
var today = new Date();
var _year = today.getFullYear(),
    _month = today.getMonth() + 1,
    _day = today.getDate();
var firstDay = getFirstDay(_year,_month);

//显示日历
showCalendar(_year,_month,_day,firstDay);


//日历点击的事件委托(可以查查js冒泡的应用)
calendar.onclick = function(e) {
    var e = e || window.event;
    var target = e.srcElement || e.target;
//把日历的头部的年月日分割成数组,这里保存在其value属性上
    dayArr = document.getElementById('showDate').getAttribute('value').split('-');
    if (target) {
        //如果是可点击的日期
        if ( target.className === "cld-day" || target.className === "cld-cur" ) {
            dateArr = target.getAttribute('value').split('-');
            //减0是把字符串转化成数值类型,以下一样            
            showDate(dateArr[0]-0,dateArr[1]-0,dateArr[2]-0);
            calendar.className = "";
        } 
        //如果是上一月的点击
        else if ( target.className === "cld-pre" ) {
            preMonth(dayArr[0]-0,dayArr[1]-0,dayArr[2]-0);
        }
        //如果是下一月的点击
        else if ( target.className === "cld-next" ) {
            nextMonth(dayArr[0]-0,dayArr[1]-0,dayArr[2]-0);
        }
    }
};

参考自:https://www.cnblogs.com/xinghh/p/3499375.html

javascript原理-多事件响应时的执行流程

今天在表单中:

对一个输入框添加了邮箱格式校验:

//校验 email框
$("#email_update_input").change(function(){
	//校验表单
	validate_form_ele("#email_update_input",g_email_reg,g_email_valid,g_email_invalid_format)

console.log("变化方法---邮箱校验");
				
	});

同时在提交表单时:添加了事件

//点击更新,更新员工信息
$("#emp_update_done_btn").click(function(){
	
console.log("提交更新方法---邮箱校验");
		
	//验证邮箱是否合法
	if(!validate_form_ele("#email_update_input",g_email_reg,g_email_valid,g_email_invalid_format))
         return false;
			
	//2、发送ajax请求保存更新的员工数据
	$.ajax({
          ...
        });

}

 

经过测试,修改了邮箱表单并立刻提交时,会先后触发两个方法:
 变化方法—邮箱校验
 提交更新方法—邮箱校验

但是两个方法都打上断点并调试的时候,很奇怪,只调用了 变化方法—邮箱校验,没有调用   提交更新方法—邮箱校验  。所以网页没有进行提交更新。

javascript辨析-jQuery对象与DOM对象是不一样的

比如下面表单中的 id为name的对象,如何获取name对象的值呢?

  <form action="gbk-response/春节" method="get">
         <p>用户名:<input type="text" id="name"  name="name"/></p>
         <p>密码:<input type="password" id="pwd" name="pwd"/></p>
         <input type="submit" value="登录">
         <input type="button" value="ajax-get" id="ajax-get-btn"/>
         <input type="button" value="ajax-post" id="ajax-post-btn"/>

  </form>

方法一:利用jQuery方法:$("#name").val();
方法二:利用JQuery获取DOM,然后利用DOM的方法 $("#name")[0].value;


一、jQuery对象与DOM对象是不一样的

通过一个简单的例子,简单区分下jQuery对象与DOM对象:
<p id=”imooc”></p>
我们要获取页面上这个id为imooc的div元素,然后给这个文本节点增加一段文字:“hello,world”,并且让文字颜色变成红色。

1、通过标准JavaScript处理:

var p = document.getElementById('imooc');
p.innerHTML = 'hello,world!';
p.style.color = 'red';

通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是DOM对象,通过DOM方法将自己的innerHTML与style属性处理文本与颜色。

2、jQuery的处理:

var $p = $('#imooc');
$p.html('hello,world').css('color','red');

通过$(‘#imooc’)方法会得到一个$p的jQuery对象,$p是一个类数组的对象这个对象里面其实是包含了DOM对象的信息的然后封装了很多操作方法,调用自己的方法html与css处理,得到的效果与标准的JavaScript处理结果是一致的。

二、jQuery对象转化成DOM对象

    jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery的同时也能混合JavaScript原生代码一起使用。通过jQuery生成的对象是一个做了包装处理的对象,如果要用jQuery对象自己的方法,就需要满足这个对象是通过jQuery生成的。 在很多场景中,我们需要jQuery与DOM能够相互的转换,它们都是操作的DOM元素,jQuery是一个类数组对象,DOM对象就是一个单独的DOM元素。

如何把jQuery对象转成DOM对象?

1、利用数组下标的方式读取到jQuery中的DOM对象

HTML代码

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

用jQuery找到所有的div元素(3个),因为jQuery 对象也是一个数组结构,可以通过数组下标索引找到第一个div元素,通过返回的div对象然后调用它style属性然修改第一个div元素的颜色。这里需要注意的一点是,数组的索引是从0开始的,也就是第一个元素下标是0

2、通过jQuery自带的get()方法

jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点,get方法中提供一个元素的索引:

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法,转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

其实我们翻开源码,看看就知道了,get方法就是利用的第一种方式处理的,只是包装成一个get让开发者更直接方便的使用。

三、DOM对象转化成jQuery对象

相比较jQuery转化成DOM,开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用。
如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象。
通过$(dom)方法将普通的dom对象加工成jQuery对象之后,我们就可以调用jQuery的方法了

HTML代码

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

通过getElementsByTagName获取到所有div节点的元素,结果是一个dom合集对象,不过这个对象是一个数组合集(3个div元素)。通过$(div)方法转化成jQuery对象,通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色。

 

参考:https://www.cnblogs.com/daisy-ramble/p/5553621.html

javascript踩坑-js中调用方法时忘记给方法添加括号

调用方法操作:validate_add_form 忘记添加() 了,坑爹啊 !!!

if(!validate_add_form){
	//校验有误,失败
	return false;
}

方法为:

//校验 添加员工信息 表单 合法性
function validate_add_form(){
	//拿到要校验的数据,使用正则表达式
			
	//1、校验用户信息
	//获取表单值
	var empName = $("#empName_add_input").val();  
	//编写正则表达式(英文字母 6到16个 或者 中文 2到5个)
	var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]){2,5}/;
	//校验正则表达式
	if(!regName.test(empName) ){
		// 弹窗校验 太丑 
		//alert("用户名可以是2-5位中文或者是6-16位英文或数字的组合");
		// $("#empName_add_input").addClass("is-invalid");
				
	        show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");
		return false;
	}else{
		show_validate_msg("#empName_add_input","success","");
	}
		
	//2、校验邮箱信息
	var email = $("email_add_input").val();
	var regemail = /^(a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        if(!regEmail.test(emial)){
		// 弹窗校验 太丑 
		//alert("邮箱格式不正确");
		//$("#email_add_input").addClass("is-invalid");
				
		show_validate_msg("#email_add_input","error","邮箱格式不正确");
		return false;
        }else{
		show_validate_msg("#email_add_input","success","");
	}
		
	return true;
}
		
		
//显示校验结果的提示信息
function show_validate_msg(ele,status,msg){
	//清除当前元素的校验状态
	$(ele).removeClass("is-invalid is-valid");
	$(ele).next("div").removeClass("valid-feedback  invalid-feedback").text("");
	if("success"==status){
		$(ele).addClass("is-valid");
		$(ele).next("div").addClass("valid-feedback").text(msg);
	}else if("error" == status){
		$(ele).addClass("is-invalid");
		$(ele).next("div").addClass("invalid-feedback").text(msg);
	}
}

 

 

javascript踩坑-ajax请求中,请求参数将data写成了date

坑爹现场:

 $.ajax({
	url:"${APP_PATH}/emp",
	type:"POST",
	date:$("#empAddModal form").serialize(), 
	success:function(result){
	alert(result);
	}
});

应该要把date 改成 data,这个别忘记了。

补充:

JQuery提供的Ajax方法:

$.ajax({
    url: ,
    type: '',
    dataType: '',
    data: {
          
    },
    success: function(){
         
    },
    error: function(){
          
    }
 })

原生js实现Ajax方法:

var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // datat应为'a=a1&b=b1'这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头,发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}

注释:

1. open(method, url, async) 方法需要三个参数:

method:发送请求所使用的方法(GET或POST);与POST相比,GET更简单也更快,并且在大部分情况下都能用;然而,在以下情况中,请使用POST请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

url:规定服务器端脚本的 URL(该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务));

async:规定应当对请求进行异步(true)或同步(false)处理;true是在等待服务器响应时执行其他脚本,当响应就绪后对响应进行处理;false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange:存有处理服务器响应的函数,每当 readyState 改变时,onreadystatechange 函数就会被执行。

4. readyState:存有服务器响应的状态信息。

  • 0: 请求未初始化(代理被创建,但尚未调用 open() 方法)
  • 1: 服务器连接已建立(open方法已经被调用)
  • 2: 请求已接收(send方法已经被调用,并且头部和状态已经可获得)
  • 3: 请求处理中(下载中,responseText 属性已经包含部分数据)
  • 4: 请求已完成,且响应已就绪(下载操作已完成)

5. responseText:获得字符串形式的响应数据。

6. setRequestHeader():POST传数据时,用来添加 HTTP 头,然后send(data),注意data格式;GET发送信息时直接加参数到url上就可以,比如url?a=a1&b=b1。

PS:Fetch polyfill 的基本原理是探测是否存在window.fetch方法,如果没有则用 XHR 实现。

参考:https://www.cnblogs.com/colima/p/5339227.html

javascript踩坑-append方法遇到字符串内部含有回车符

在网页中:JavaScript代码中,我在字符串 “页,总”内部添加了一个 回车符号,导致 无法解析字符串了 ,需要记住一下。

//解析显示分页信息
		function build_page_info(result){
			$("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+
					"页,总共"+result.extend.pageInfo.pages+"页
					,总"+result.extend.pageInfo.total+"记录")
		}

 

javascript高级-DOM-剖析并实现Virtual DOM

1 前言


本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法,并且尝试尽量把 Virtual DOM 的算法思路阐述清楚。希望在阅读本文后,能让你深入理解 Virtual DOM 算法,给你现有前端的编程提供一些新的思考。

本文所实现的完整代码存放在 Github

2 对前端应用状态管理的思考


假如现在你需要写一个像下面一样的表格的应用程序,这个表格可以根据不同的字段进行升序或者降序的展示。

 

这个应用程序看起来很简单,你可以想出好几种不同的方式来写。最容易想到的可能是,在你的 JavaScript 代码里面存储这样的数据:

var sortKey = "new" // 排序的字段,新增(new)、取消(cancel)、净关注(gain)、累积(cumulate)人数
var sortType = 1 // 升序还是逆序
var data = [{...}, {...}, {..}, ..] // 表格数据

用三个字段分别存储当前排序的字段、排序方向、还有表格数据;然后给表格头部加点击事件:当用户点击特定的字段的时候,根据上面几个字段存储的内容来对内容进行排序,然后用 JS 或者 jQuery 操作 DOM,更新页面的排序状态(表头的那几个箭头表示当前排序状态,也需要更新)和表格内容。

这样做会导致的后果就是,随着应用程序越来越复杂,需要在JS里面维护的字段也越来越多,需要监听事件和在事件回调用更新页面的DOM操作也越来越多,应用程序会变得非常难维护。后来人们使用了 MVC、MVP 的架构模式,希望能从代码组织方式来降低维护这种复杂应用程序的难度。但是 MVC 架构没办法减少你所维护的状态,也没有降低状态更新你需要对页面的更新操作(前端来说就是DOM操作),你需要操作的DOM还是需要操作,只是换了个地方。

既然状态改变了要操作相应的DOM元素,为什么不做一个东西可以让视图和状态进行绑定,状态变更了视图自动变更,就不用手动更新页面了。这就是后来人们想出了 MVVM 模式,只要在模版中声明视图组件是和什么状态进行绑定的,双向绑定引擎就会在状态更新的时候自动更新视图(关于MV*模式的内容,可以看这篇介绍)。

MVVM 可以很好的降低我们维护状态 -> 视图的复杂程度(大大减少代码中的视图更新逻辑)。但是这不是唯一的办法,还有一个非常直观的方法,可以大大降低视图更新的操作:一旦状态发生了变化,就用模版引擎重新渲染整个视图,然后用新的视图更换掉旧的视图。就像上面的表格,当用户点击的时候,还是在JS里面更新状态,但是页面更新就不用手动操作 DOM 了,直接把整个表格用模版引擎重新渲染一遍,然后设置一下innerHTML就完事了。

听到这样的做法,经验丰富的你一定第一时间意识这样的做法会导致很多的问题。最大的问题就是这样做会很慢,因为即使一个小小的状态变更都要重新构造整棵 DOM,性价比太低;而且这样做的话,inputtextarea的会失去原有的焦点。最后的结论会是:对于局部的小视图的更新,没有问题(Backbone就是这么干的);但是对于大型视图,如全局应用状态变更的时候,需要更新页面较多局部视图的时候,这样的做法不可取。

但是这里要明白和记住这种做法,因为后面你会发现,其实 Virtual DOM 就是这么做的,只是加了一些特别的步骤来避免了整棵 DOM 树变更

另外一点需要注意的就是,上面提供的几种方法,其实都在解决同一个问题:维护状态,更新视图。在一般的应用当中,如果能够很好方案来应对这个问题,那么就几乎降低了大部分复杂性。

3 Virtual DOM算法


DOM是很慢的。如果我们把一个简单的div元素的属性都打印出来,你会看到:

而这仅仅是第一层。真正的 DOM 元素非常庞大,这是因为标准就是这么设计的。而且操作它们的时候你要小心翼翼,轻微的触碰可能就会导致页面重排,这可是杀死性能的罪魁祸首。

相对于 DOM 对象,原生的 JavaScript 对象处理起来更快,而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来:

var element = {
  tagName: 'ul', // 节点标签名
  props: { // DOM的属性,用一个对象存储键值对
    id: 'list'
  },
  children: [ // 该节点的子节点
    {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
  ]
}

上面对应的HTML写法是:

<ul id='list'>
  <li class='item'>Item 1</li>
  <li class='item'>Item 2</li>
  <li class='item'>Item 3</li>
</ul>

既然原来 DOM 树的信息都可以用 JavaScript 对象来表示,反过来,你就可以根据这个用 JavaScript 对象表示的树结构来构建一棵真正的DOM树。

之前的章节所说的,状态变更->重新渲染整个视图的方式可以稍微修改一下:用 JavaScript 对象表示 DOM 信息和结构,当状态变更的时候,重新渲染这个 JavaScript 的对象结构。当然这样做其实没什么卵用,因为真正的页面其实没有改变。

但是可以用新渲染的对象树去和旧的树进行对比,记录这两棵树差异。记录下来的不同就是我们需要对页面真正的 DOM 操作,然后把它们应用在真正的 DOM 树上,页面就变更了。这样就可以做到:视图的结构确实是整个全新渲染了,但是最后操作DOM的时候确实只变更有不同的地方。

这就是所谓的 Virtual DOM 算法。包括几个步骤:

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

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存:既然 DOM 这么慢,我们就在它们 JS 和 DOM 之间加个缓存。CPU(JS)只操作内存(Virtual DOM),最后的时候再把变更写入硬盘(DOM)。

4 算法实现


4.1 步骤一:用JS对象模拟DOM树

用 JavaScript 来表示一个 DOM 节点是很简单的事情,你只需要记录它的节点类型、属性,还有子节点:

element.js

function Element (tagName, props, children) {
  this.tagName = tagName
  this.props = props
  this.children = children
}

module.exports = function (tagName, props, children) {
  return new Element(tagName, props, children)
}

例如上面的 DOM 结构就可以简单的表示:

var el = require('./element')

var ul = el('ul', {id: 'list'}, [
  el('li', {class: 'item'}, ['Item 1']),
  el('li', {class: 'item'}, ['Item 2']),
  el('li', {class: 'item'}, ['Item 3'])
])

现在ul只是一个 JavaScript 对象表示的 DOM 结构,页面上并没有这个结构。我们可以根据这个ul构建真正的<ul>

Element.prototype.render = function () {
  var el = document.createElement(this.tagName) // 根据tagName构建
  var props = this.props

  for (var propName in props) { // 设置节点的DOM属性
    var propValue = props[propName]
    el.setAttribute(propName, propValue)
  }

  var children = this.children || []

  children.forEach(function (child) {
    var childEl = (child instanceof Element)
      ? child.render() // 如果子节点也是虚拟DOM,递归构建DOM节点
      : document.createTextNode(child) // 如果字符串,只构建文本节点
    el.appendChild(childEl)
  })

  return el
}

render方法会根据tagName构建一个真正的DOM节点,然后设置这个节点的属性,最后递归地把自己的子节点也构建起来。所以只需要:

var ulRoot = ul.render()
document.body.appendChild(ulRoot)

上面的ulRoot是真正的DOM节点,把它塞入文档中,这样body里面就有了真正的<ul>的DOM结构:

<ul id='list'>
  <li class='item'>Item 1</li>
  <li class='item'>Item 2</li>
  <li class='item'>Item 3</li>
</ul>

完整代码可见 element.js

4.2 步骤二:比较两棵虚拟DOM树的差异

正如你所预料的,比较两棵DOM树的差异是 Virtual DOM 算法最核心的部分,这也是所谓的 Virtual DOM 的 diff 算法。两个树的完全的 diff 算法是一个时间复杂度为 O(n^3) 的问题。但是在前端当中,你很少会跨越层级地移动DOM元素。所以 Virtual DOM 只会对同一个层级的元素进行对比:

上面的div只会和同一层级的div对比,第二层级的只会跟第二层级对比。这样算法复杂度就可以达到 O(n)。

4.2.1 深度优先遍历,记录差异

在实际的代码中,会对新旧两棵树进行一个深度优先的遍历,这样每个节点都会有一个唯一的标记:

在深度优先遍历的时候,每遍历到一个节点就把该节点和新的的树进行对比。如果有差异的话就记录到一个对象里面。

// diff 函数,对比两棵树
function diff (oldTree, newTree) {
  var index = 0 // 当前节点的标志
  var patches = {} // 用来记录每个节点差异的对象
  dfsWalk(oldTree, newTree, index, patches)
  return patches
}

// 对两棵树进行深度优先遍历
function dfsWalk (oldNode, newNode, index, patches) {
  // 对比oldNode和newNode的不同,记录下来
  patches[index] = [...]

  diffChildren(oldNode.children, newNode.children, index, patches)
}

// 遍历子节点
function diffChildren (oldChildren, newChildren, index, patches) {
  var leftNode = null
  var currentNodeIndex = index
  oldChildren.forEach(function (child, i) {
    var newChild = newChildren[i]
    currentNodeIndex = (leftNode && leftNode.count) // 计算节点的标识
      ? currentNodeIndex + leftNode.count + 1
      : currentNodeIndex + 1
    dfsWalk(child, newChild, currentNodeIndex, patches) // 深度遍历子节点
    leftNode = child
  })
}

例如,上面的div和新的div有差异,当前的标记是0,那么:

patches[0] = [{difference}, {difference}, ...] // 用数组存储新旧节点的不同

同理ppatches[1]ulpatches[3],类推。

4.2.2 差异类型

上面说的节点的差异指的是什么呢?对 DOM 操作可能会:

  1. 替换掉原来的节点,例如把上面的div换成了section
  2. 移动、删除、新增子节点,例如上面div的子节点,把pul顺序互换
  3. 修改了节点的属性
  4. 对于文本节点,文本内容可能会改变。例如修改上面的文本节点2内容为Virtual DOM 2

所以我们定义了几种差异类型:

var REPLACE = 0
var REORDER = 1
var PROPS = 2
var TEXT = 3

对于节点替换,很简单。判断新旧节点的tagName和是不是一样的,如果不一样的说明需要替换掉。如div换成section,就记录下:

patches[0] = [{
  type: REPALCE,
  node: newNode // el('section', props, children)
}]

如果给div新增了属性idcontainer,就记录下:

patches[0] = [{
  type: REPALCE,
  node: newNode // el('section', props, children)
}, {
  type: PROPS,
  props: {
    id: "container"
  }
}]

如果是文本节点,如上面的文本节点2,就记录下:

patches[2] = [{
  type: TEXT,
  content: "Virtual DOM2"
}]

那如果把我div的子节点重新排序呢?例如p, ul, div的顺序换成了div, p, ul。这个该怎么对比?如果按照同层级进行顺序对比的话,它们都会被替换掉。如pdivtagName不同,p会被div所替代。最终,三个节点都会被替换,这样DOM开销就非常大。而实际上是不需要替换节点,而只需要经过节点移动就可以达到,我们只需知道怎么进行移动。

这牵涉到两个列表的对比算法,需要另外起一个小节来讨论。

4.2.3 列表对比算法

假设现在可以英文字母唯一地标识每一个子节点:

旧的节点顺序:

a b c d e f g h i

现在对节点进行了删除、插入、移动的操作。新增j节点,删除e节点,移动h节点:

新的节点顺序:

a b c h d f g i j

现在知道了新旧的顺序,求最小的插入、删除操作(移动可以看成是删除和插入操作的结合)。这个问题抽象出来其实是字符串的最小编辑距离问题(Edition Distance),最常见的解决算法是 Levenshtein Distance,通过动态规划求解,时间复杂度为 O(M * N)。但是我们并不需要真的达到最小的操作,我们只需要优化一些比较常见的移动情况,牺牲一定DOM操作,让算法时间复杂度达到线性的(O(max(M, N))。具体算法细节比较多,这里不累述,有兴趣可以参考代码

我们能够获取到某个父节点的子节点的操作,就可以记录下来:

patches[0] = [{
  type: REORDER,
  moves: [{remove or insert}, {remove or insert}, ...]
}]

但是要注意的是,因为tagName是可重复的,不能用这个来进行对比。所以需要给子节点加上唯一标识key,列表对比的时候,使用key进行对比,这样才能复用老的 DOM 树上的节点。

这样,我们就可以通过深度优先遍历两棵树,每层的节点进行对比,记录下每个节点的差异了。完整 diff 算法代码可见 diff.js

4.3 步骤三:把差异应用到真正的DOM树上

因为步骤一所构建的 JavaScript 对象树和render出来真正的DOM树的信息、结构是一样的。所以我们可以对那棵DOM树也进行深度优先的遍历,遍历的时候从步骤二生成的patches对象中找出当前遍历的节点差异,然后进行 DOM 操作。

function patch (node, patches) {
  var walker = {index: 0}
  dfsWalk(node, walker, patches)
}

function dfsWalk (node, walker, patches) {
  var currentPatches = patches[walker.index] // 从patches拿出当前节点的差异

  var len = node.childNodes
    ? node.childNodes.length
    : 0
  for (var i = 0; i < len; i++) { // 深度遍历子节点
    var child = node.childNodes[i]
    walker.index++
    dfsWalk(child, walker, patches)
  }

  if (currentPatches) {
    applyPatches(node, currentPatches) // 对当前节点进行DOM操作
  }
}

applyPatches,根据不同类型的差异对当前节点进行 DOM 操作:

function applyPatches (node, currentPatches) {
  currentPatches.forEach(function (currentPatch) {
    switch (currentPatch.type) {
      case REPLACE:
        node.parentNode.replaceChild(currentPatch.node.render(), node)
        break
      case REORDER:
        reorderChildren(node, currentPatch.moves)
        break
      case PROPS:
        setProps(node, currentPatch.props)
        break
      case TEXT:
        node.textContent = currentPatch.content
        break
      default:
        throw new Error('Unknown patch type ' + currentPatch.type)
    }
  })
}

完整代码可见 patch.js

5 结语

Virtual DOM 算法主要是实现上面步骤的三个函数:elementdiffpatch。然后就可以实际的进行使用:

// 1. 构建虚拟DOM
var tree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: blue'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li')])
])

// 2. 通过虚拟DOM构建真正的DOM
var root = tree.render()
document.body.appendChild(root)

// 3. 生成新的虚拟DOM
var newTree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: red'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li'), el('li')])
])

// 4. 比较两棵虚拟DOM树的不同
var patches = diff(tree, newTree)

// 5. 在真正的DOM元素上应用变更
patch(root, patches)

当然这是非常粗糙的实践,实际中还需要处理事件监听等;生成虚拟 DOM 的时候也可以加入 JSX 语法。这些事情都做了的话,就可以构造一个简单的ReactJS了。

本文所实现的完整代码存放在 Github,仅供学习。

6 References


https://github.com/Matt-Esch/virtual-dom/blob/master/vtree/diff.js


来自:戴嘉华  https://github.com/livoras/blog/issues/13

https://github.com/livoras/blog/issues/created_by/livoras