解耦UI层-可维护的Javascript 编写指南

最新推荐文章于 2024-08-06 21:48:27 发布

weixin_30588827

最新推荐文章于 2024-08-06 21:48:27 发布

阅读量108

点赞数

文章标签： ui javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/only-levis/p/7679606.html

版权

可维护的Javascript 编写指南-解耦UI层

回到目录

本节规则比较好掌握，实用，就是一句话：该写的哪的，就应该写在哪。

这句话解释下：Dom的css样式，就应该写在css样式表里，js代码就该写在js代码中。

让我正式给各位看官介绍下主要内容吧。

不要在Css中写js
不要在Js中写Css
不要在Html中写js

在做过项目中，遵循上面三点的少之又少。

那为啥还要这么要求呢？

目的只有一个就是解耦代码，便于维护，特别是针对那么多页面，多js的项目。

不要在Css中写js

/* 不推荐的代码 如果expression出错，在浏览器很难跟踪问题 */
.box {
  width:expression(document.body.offsetWidth+"px");
}

不要在Js中写Css

在页面中出现Css需要进行样式调整时，不需要考虑Js代码，只需要去改css就可以了。

// 不推荐
element.style.color="red";

// 不推荐
element.style.color="red";
element.style.left="10px";
element.style.top="10px";
element.style.visibility="visible";

// 不推荐
element.style.cssText = "color: red; left: 10px; top: 100px; visibility: hidden";

需要样式调整的，可以在Css中定义class

.reveal {
color: red;
left: 10px;
top: 100px;
visibility: visible;
}

然后在Js中，可以通过操作class控制样式调整

// 推荐 - 原生
element.className += " reveal";

// 推荐 - HTML5
element.classList.add("reveal");

// 推荐 - jQuery
$(element).addClass("reveal");

这样一来，样式一旦需要调整，可直接通过css修改

不要在Html中写Js

一个页面经常有多个js代码，也就造就了多个js同时操作一个Dom,同一个事件。

<!-- 不推荐 -->
<button onclick="doSomething()" id="action-btn">Click Me</button>

这是常见的写法，这种写法在很多场景下，应用都没问题。但是有几个不易发现的问题

首先，当按钮被点击时，doSomething()事件必须存在，否则，Js就报错.doSomething()可能是从外部Js中加载的，或者出现在Html代码后面。无论哪种方式，用户都可以在函数可用之前单击按钮，造成一个JavaScript错误。出现Js错误，直接导致按钮操作不了，这两种情况下是不可取的。

第二个问题是维护问题。如果你想改变doSomething()的名字吗?当点击按钮的时候，调用一个不同的函数会发生什么?在这两种情况下，你都在修改JavaScript和HTML;这就是紧密耦合代码的本质。

因此把事件绑定，直接写在<script></script>里，才是上策。

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

// IE8之前的版本不支持 addEventListener事件，可以这样写
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;
  }
}

目前，Jquery是常用的Js库,你可以这样写：

function doSomeThing()
{
   // code  
}

$("#btn1").on("click",doSomeThing);

//或者
$(document).on("#btn1","click",doSomeThing);

另外，最好不要单独把方法的引用放在Js中

<!-- 不推荐 -->
<script>
   doSomething();
</script>

避免把HTML掺杂在Js中

简单客户端模版
复杂的客户端模版

前面提倡，不要把Js写在HTML中，同理，不要把Html写在Js中。坚持JS,HTML,CSS解耦，对后期页面维护，debug都有更好的作用。

// 这是项目中常见的代码，并不推荐这样用
var div = document.getElementById("my-div");
div.innerHTML = "<h3>Error</h3><p>Invalid e-mail address.</p>";

简单客户端模版

将模版直接固定，每次生成时，都是通过调用方法，去生成HTML

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

还可以这样写

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
            function sprintf(text) {
                var i = 1, args = arguments;
                return text.replace(/%s/g, function () {
                    return (i < args.length) ? args[i++] : "";
                });
            }

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

            }
            addItem("/item/4", "Fourth item");
    </script>
</head>
<body>
    <ul id="mylist">
        <!--<li><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>

</body>
</html>

另一种写法

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/x-my-template" id="list-item">
        <li><a href="%s">%s</a></li>
    </script>
</head>
<body>
    <ul id="mylist">
        <!--<li><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>
    <script>
        function sprintf(text) {
            var i = 1, args = arguments;
            return text.replace(/%s/g, function () {
                return (i < args.length) ? args[i++] : "";
            });
        }
        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.innerHTML += result.replace(/^\s*/, "");
        }
        // usage
        addItem("/item/4", "Fourth item");
    </script>

</body>
</html>

复杂的客户端模版

例如 dataTable,knockout.js

如knockout.js 地址： http://knockoutjs.com/

这种模版，也是项目中常用到的。这里就不赘述了，想了解的，可以通过上面的链接，去访问官方网站。

转载于:https://www.cnblogs.com/only-levis/p/7679606.html

weixin_30588827

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解耦UI层-可维护的Javascript 编写指南

可维护的Javascript 编写指南-解耦UI层回到目录本节规则比较好掌握，实用，就是一句话：该写的哪的，就应该写在哪。这句话解释下：Dom的css样式，就应该写在css样式表里，js代码就该写在js代码中。让我正式给各位看官介绍下主要内容吧。不要在Css中写js不要在Js中写Css不要在Html中写...
复制链接

扫一扫