面向对象中绑定DOM常用的方法

bindDOM一般有三种方法：

1. 原生js。
2. formatString（自己写的匹配方法）
3. 模板：arttemplate，understore。

• 原生js

var loginlink = document.createElement("a");
loginlink.setAttribute("id", "login");//设置属性
loginlink.setAttribute("name", "login");//设置属性
loginlink.setAttribute("class", "link");//设置class
loginlink.style.color="green";//设置样式
loginlink.href = ''; //赋值超链接网址
loginlink.innerHTML = '登录'; //超链接显示的文字内容
//  添加到div中
var span = document.getElementById("span");
span.appendChild(loginlink);//添加到div元素中

   第二种实现方式：

var span = document.getElementById("span");
span.innerHTML = "<a href='' id='login' name='login' class='link'>登录2</a>";

当然也可以用jQuery来实现。

• formatString

//    \w	匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
//    \W	匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。
//    这里表示寻找到以@开头的字符串，然后用数据替换@之后同名数据

//    replace的用法，
// 第一个参数：正则表达式，第二个参数：处理函数：
// 处理函数的第一个参数：匹配的字符串，第二个参数：括号中的值
    function formateString(str, data){
        return str.replace(/@\((\w+)\)/g, function(match, key){
            return typeof data[key] === "undefined" ? '' : data[key]});
    }
    function Login(){
        var user={name:'书奎'}
        var span = document.getElementById("span");
        span.innerHTML = formateString("欢迎@(name)来到百度世界",user)

    };

• arttemplate模板