《编写可维护的JavaScript》读书笔记第5章：UI层的松耦合

2019独角兽企业重金招聘Python工程师标准>>>

将 JavaScript 从 CSS 中抽离

不要使用 IE 8 及更早版本支持的一个特性：CSS 表达式。

/* 不好的写法 */
.box {
    width: expression(document.body.offsetWidth + "px");
}

将 CSS 从 JavaScript 抽离

// 不好的写法
element.style.color = "red";

将 CSS 从 JavaScript 中抽离，需要把所有的样式信息都放在 CSS 里。这样 JavaScript 只需要操作 CSS 的 className。

// 好的写法- 原生代码
element.className += " reveal";
// 好的写法- HTML5
element.classList.add("reveal");
// 好的写法 - YUI
Y.one(element).addClass("reveal");
// 好的写法 - jQuery
$(element).addClass("reveal");
// 好的写法 - dojo
dojo.addClass(element, "reveal");

将 JavaScript 从 HTML 中抽离

<!-- 不好的写法 -->
<button onclick="doSomething()" id="action-btn">Click Me</button>

绝大多数（并非所有的） JavaScript 代码都应当包含在外部文件中，并在页面中通过 <script> 标签来引用。在 HTML 中，也不应当直接给 on 属性挂载事件处理程序。对于支持 2 级 DOM 模型的浏览器来说，可以这样写：

function doSomething() {
    // 代码
} 
var btn = document.getElementById("action-btn");
btn.addEventListener("click", doSomething, false);

为了兼容不支持 addEventListener() 函数的IE8 及其更早版本，需要一个函数封装差异：

function addListener(target, type, handler) {
   if (target.addEventListener) {
       target.addEventListener(type, handler, false);
   } else if (target.attachEvent) {
       target.attachEvent("on" + type, handler);
   } else {
      target["on" + type] = handler;
   }    
} 
function doSomething() {
    // 代码
}
var btn = document.getElementById("action-btn");
addListener(btn, "click", doSomething);

使用 JavaScript 类库：

// YUI
Y.one("#action-btn").on("click", doSomething);
// jQuery
$("#action-btn").on("click", doSomething);
// dojo
var btn = dojo.byId("action-btn");
dojo.connect(btn, "click", doSomething);

最好将所有的 JavaScript 代码都放到外部文件中，这样做的原因是出于紧急调试的考虑。当 JavaScript 报错，你的下意识的行为应当是去 JavaScript 文件中查找原因。如果在 HTML 中包含 JavaScript 代码，则会阻断你的工作流。

将 HTML 从 JavaScript 中抽离

// 不好的写法
var div = document.getElementById("my-div");
div.innerHTML = "<h3>Error</h3><p>Invalid e-mail address.</p>";

方法 1：从服务器加载

function loadDialog(name, oncomplete) {
    varxhr = new XMLHttpRequest();
    xhr.open("get", "/js/dialog/" + name, true);
    
    xhr.onreadystatechange = function() {
        if (xhr.readystate == 4 && xhr.status == 200) {
            var div = document.getElementById("dlg-holder");
            div.innerHTML = xhr.responseText;
            oncomplete);
        } else {
            // 处理错误
        }
    };
    xhr.send(null);
}

使用 JavaScript 类库：

// YUI
function loadDialog(name, oncomplete) {
    Y.one("#dlg-holder").load("/js/dialog/" + name, oncomplete);
}
// jQuery
function loadDialog(name, oncomplete) {
    $("#dlg-holder").load("/js/dialog/" + name, oncomplete);
}

出于性能的原因，可以考虑采用客户端模板。

方法 2：简单客户端模板

一段数据项模板：

<li><a href="%s">%s</a></li>

和一个格式化函数：

function sprintf(text) {
    var i=1, args=arguments; 
    return text.replace(/%s/g, function() {
       return (i < args.length) ? args[i++] : "";
    });
}
// 用法
var result = sprintf(templateText, "/item/4", "Fourth item");

模板通过两种方法存放在 HTML 页面里。

1) 在 HTML 注释中包含模板文件

<ul id="mylist"><!--<li id="item%s"><a href="%s">%s</a></li>-->
    <li><a href="/item/1">First item</a></li> 
    <li><a href="/item/2">Second item</a></li>
    <li><a href="/item/3">Third item</a></li>
</ul>

function addItem(url, text) {
    var mylist = document.getElementById("mylist"),
        templateText = mylist.firstChild.nodeValue,
        result = sprintf(templateText, url, text);
        
   div.innerHTML = result;
    mylist.insertAdjacentHTML("beforeend", result);    
} 

// 用法 
addItem("/item/4", "Fourth item");

2) 在 < script > 中包含模板文件

<script type="text/x-my-template" id="list-item">
   <li><a href="%s">%s</a></li>
</script>

function addItem(url, text) {
    var mylist = document.getElementById("mylist"),
        script = document.getElementById("list-item");
        templateText = script.text,
        result = sprintf(templateText, url, text),
        div = document.createElement("div");
       
    div.innerHTML = result.replace(/^\s*/, ""); // 去除前导空白
    mylist.appendChild(div.firstChild);    
} 

// 用法 
addItem("/item/4", "Fourth item");

方法 3：复杂客户端模板

考虑使用诸如 Handlebars（http://handlebarsjs.com）所提供的解决方案。

<script type="text/x-handlebars-template" id="list-item">
    <li><a href="{{url}}">{{text}}</a></li>
</script>

function addItem(url, text) {
    var mylist = document.getElementById("mylist"),
        script = document.getElementById("list-item");
        templateText = script.text,
        template = Handlebars.compile(templateText),
        div = document.createElement("div"),
        result;
        
    result = template({
        text: text,
        url: url
    });
       
    div.innerHTML = result;
     mylist.appendChild(div.firstChild);    
} 



// 用法 
addItem("/item/4", "Fourth item");

 

转载于:https://my.oschina.net/qczhang/blog/186582