Hank's Blog

new Date("January 12,2006 22:19:35"); // 注意格式 

new Date("January 12,2006"); // String 类型

new Date("2006/2/2 22:19:35"); // String 类型 

new Date(2006,0,12,22,19,35); // 不能放 Array 类型 

new Date(2006,0,12); // 可以是String 或 Number

new Date(1137075575000); // 必须是 Number 类型

// 劫持节点并转化为文档片段
function node2Fragment(node, vm) {
    var flag = document.createDocumentFragment()
    var child
    while (child = node.firstChild) { // 编译每个节点，直到node下无子节点
        compile(child, vm)
        flag.appendChild(child) // appendchild方法会自动删除node的child节点（子节点有且仅有一个父节点）
    }
    return flag // 返回填充后的文档片段
}

// 编译节点
function compile(node, vm) {
    var reg = /\{\{(.*)\}\}/
    if (node.nodeType === 1) { // 元素节点
        var attr = node.attributes
        for (var i = 0; i < attr.length; i++) {
            if (attr[i].nodeName == 'v-model') {
                var name = attr[i].nodeValue.trim()
                node.value = vm.data[name]
            }
        }
    };
    if (node.nodeType === 3) { // 文本节点
        if (reg.test(node.nodeValue)) {
            var name = RegExp.$1.trim()
            node.nodeValue = vm.data[name]
        }
    }
}

// 创建Vue对象
function Vue(options) {
    this.data = options.data
    var node = document.getElementById(options.el)
    var dom = node2Fragment(node, this)
    // 将dom片段添加到目标元素
    node.appendChild(dom)
}

// 将vm.data上的数据挂载在vm上
function observe(obj, vm) {
    Object.keys(obj).forEach(function(key) {
        defineReactive(vm, key, obj[key])
    })
}

// 创建响应式数据
function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        get: function() {
            return val
        },
        set: function(newVal) {
            if (newVal === val) return
            val = newVal
            console.log("新属性值为" + val)
        }
    })
}

function Vue(options) {
    this.data = options.data
    var node = document.getElementById(options.el)
    observe(this.data,this) // 监听数据
    var dom = node2Fragment(node, this)
    node.appendChild(dom)
}

function compile(node, vm) {
    var reg = /\{\{(.*)\}\}/
    if (node.nodeType === 1) {
        var attr = node.attributes // 获取节点的所有属性
        for (var i = 0; i < attr.length; i++) {
            if (attr[i].nodeName == 'v-model') {
                var name = attr[i].nodeValue.trim()
                node.addEventListener('input', function(e) {
                    vm[name] = e.target.value; 
                });
                node.value = vm[name]
            }
        }
    };
    if (node.nodeType === 3) {
        if (reg.test(node.nodeValue)) {
            var name = RegExp.$1.trim()
            node.nodeValue = vm[name]
        }
    }
}

// 创建一个主题类
function Dep () {
    this.subs = [] // 主题的订阅者们
} 
// 添加订阅者
Dep.prototype.addSub = function(sub) {
    this.subs.push(sub)
};
// 发布公告
Dep.prototype.notify = function() {
    this.subs.forEach(function(sub) {
        sub.update()
    })
};

// 创建一个订阅者类
function  Watcher(name) {
    this.name = name
}
// 更新自己
Watcher.prototype.update = function() {
    console.log(this.name+'更新了')
};

// 实例化一个主题
var dep = new Dep()

// 实例化订阅者并添加到主题
var sub1 = new Watcher('sub1')
dep.addSub(sub1)
var sub2 = new Watcher('sub2')
dep.addSub(sub2)

// 主题发布公告，订阅者更新自己
dep.notify()

// 创建一个主题类
function Dep() {
    this.subs = [] // 主题的订阅者
}

Dep.prototype = {
    // 添加订阅者
    addSub: function(sub) {
        this.subs.push(sub) 
    },
    // 发布更新公告
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update() // 触发对应属性的 setter
        })
    }
}

// 创建一个订阅者类
function Watcher(vm, node, name) {
    Dep.target = this // 未订阅标记
    this.name = name
    this.node = node
    this.vm = vm
    this.update() // 初始化视图，触发对应属性的 getter
    Dep.target = null // 已订阅标记
}

Watcher.prototype = {
    update: function() {
        this.node.nodeValue = this.vm[this.name] // 触发对应属性的 getter/setter
    }
}

function defineReactive(obj, key, val) {
    var dep = new Dep() // 实例化一个主题
    Object.defineProperty(obj, key, {
        get: function() {
            // 添加订阅者到主题
            if (Dep.target) dep.addSub(Dep.target)
            return val
        },
        set: function(newVal) {
            if (newVal === val) return
            val = newVal
            dep.notify() // 发布更新公告
        }
    })
}

function compile(node, vm) {
    var reg = /\{\{(.*)\}\}/
    if (node.nodeType === 1) { 
        var attr = node.attributes
        for (var i = 0; i < attr.length; i++) {
            if (attr[i].nodeName == 'v-model') {
                var name = attr[i].nodeValue.trim()
                node.addEventListener('input', function(e) {
                    vm[name] = e.target.value
                });
                node.value = vm[name]
            }
        }
    };
    if (node.nodeType === 3) { 
        if (reg.test(node.nodeValue)) {
            var name = RegExp.$1.trim()
            new Watcher(vm, node, name) // 初始化数据并添加订阅者
        }
    }
}

var data = [{id: 1, name: 'hanger'}, {id: 2, name: 'Alice'}]
var tableContent = ''
data.forEach(function (obj) {
    tableContent += '<tr>' +
        '<th >' + obj.id + '</th>' +
        '<th>' + obj.name + '</th>' +
        '</tr>'
})
console.log(tableContent)

class Animal { // class定义一个“类”
    constructor(){
        this.type = 'animal'
    }
    says(say){
        console.log(this.type + ' says ' + say)
    }
}

let animal = new Animal()
animal.says('hello') //animal says hello

class Cat extends Animal { // extends实现继承
    constructor(){
        super() // 指代父类的this对象
        this.type = 'cat'
    }
}

let cat = new Cat()
cat.says('hello') //cat says hello

var s = "string";
var a = [1,2];
var o = {};

var v = "bl";
var s = "string" + v;  //"stringbl"
var a = [1,v];  //[1,"bl"]
var o = {first : v};  //{first : "bl"}

var v = "bl";
var re = new RegExp("^\\d+" + v + "$","gim"); // re为/^\d+bl$/gim

var div = document.createElement("div");
div.id = "myDiv";
div.className = "div1";
document.body.appendChild(div);

var node = document.createTextNode("我是文本节点");  
document.body.appendChild(node);

var child2 = document.getElementById("div2");
var parent = child2.parentNode;