Web开发中灵肉分离

我们的很多项目都是技术Web的，无论Android+WebBrowser或WinForm+WebBrowser或Web+Server，基本上都是HTML+JavaScript+后端业务逻辑。

这期间，一般情况下都是三个人或三个组分别在做：

UI+美工，基本上就是HTML+CSS;
页面的动态效果及与后端的交互，基本上就是JavaScript;
后端业务逻辑，这个就多种多样了，有C#、Android、ObjectC、Java、PHP、Python、NodeJs...，随便选

后端的事情这里不说，这里只说前端的事情：HTML+CSS+JavaScript。

在我们的分工中，HTML+CSS是一部分工作，JavaScript是另一部分工作，两部分不能耦合太重太紧。所以我们就需要把他们明确分开。

基本思路是：

做UI的只做UI，需要在UI中留下接口，并向下传递接口的定义表格。
UI定义的接口就是网页元素中的class或id，表格中必须定义所有的可能变动的和可以被控制的页面元素的class或id，及其行为描述；表格中的定义一旦确定，既不能更改，即使命名不规范也不能随意改动。
做JS的通过UI提供的表格，通过 class或id为每个网页元素绑定数据、绑定事件，并根据后端推送的数据随时挑中页面显示；

实例：

首先，前端做了网页：

<HTML>
    <HEAD>
        <link rel="stylesheet" href="css/login.css">

        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/login.js"></script>
    </HEAD>
    <BODY>
        <DIV class="loginPanel">
            <DIV class="userName">
                <SPAN>用户名</SPAN>
                <INPUT type="text" maxlength="32" />
            </DIV>
            <DIV class="password">
                <SPAN>登录密码</SPAN>
                <INPUT type="password" maxlength="32" />
            </DIV>
            <A class="loginButton">进入</A>
            <DIV class="loginWarning"></DIV>
        </DIV>
    </BODY>
</HTML>

并为这个网页配好了css文件：

.loginPanel {
    position: absolute;
    top: 400px;
    left: 300px;
    width: 300px;
    height: 200px;
    border: solid 1px blue;
}
    .loginPanel .userName,  .loginPanel .password {
        padding: 10px 0px;
    }
    .loginPanel span {
        display: inline-block;
        width: 80px;
        text-align: right;
        line-height: 30px;
    }
    .loginPanel input {
        width: 200px;
        height: 30px;
        line-height: 30px;
        text-align: left;
        padding-left: 10px;
    }

    .loginPanel .loginButton {
        position: absolute;
        display: inline-block;
        width: 70px;
        height: 40px;
        background-color: green;
        color: white;
        top: 120px;
        left: 80px;    
    }

    .loginPanel .loginWarning{
        color: red;
        display: none;
        position: absolute;
        display: inline-block;
        top: 160px;
        left: 0px;    
    }

然后就是JS的事情了，JS端可以自由选择实现方式，比如：

原生Javascript
JQuery
AngularJS
VUE
。。。

这里用先用JQuery做样例：

$(document).ready(function() {
    var dom = $(".loginPanel");
    dom.find(".loginButton").click(function() {
        var userId = dom.find(".userName input").val();
        var password = dom.find(".password input").val();
        // TODO 执行登录操作
    });
});

这个样例没有任何出彩的地方，不过突然有一天我们想换个方法实现了怎么办。比如改用AngularJS双向绑定，这是我们需要更改.js文件，而不要动html文件：

$(document).ready(function() {
    // 绑定页面元素
    var dom = $(".loginPanel");
    var controllerName="userLogin";
    dom.attr("ng-controller",controllerName);
    dom.find(".userName input").attr("ng-model","loginUser.userId");
    dom.find(".password input").attr("ng-model","loginUser.password");
    dom.find(".loginButton").attr("ng-click","loginButtonClick()");
    dom.find(".warningMessage").text("{{loginUser.warningMessage}}");

    var app = angular.module(controllerName, []);
    app.controller(controllerName, function ($scope) {
        $scope.loginUser={};
        $scope.loginButtonClick = function () {
            var userId=$scope.loginUser.userId;
            var passwprd=$scope.loginUser.password;
            //TODO 执行登录操作
        }
    });
    angular.bootstrap(dom, [controllerName]);
});

或者又想用VUE代替AngularJS，那更简单了，只需要修改js文件里的绑定语法，连程序结构都不用动。

用这套体系的优点：

能明确分工明晰工作边界，每个人做好自己的事情就成，更大程度的避免互相推诿；
每项工作只在一个人身上，他负责的文件只有他一个人改动，不会出现：偶尔检查代码，突然发现不知道谁加的东西，看着就烦，改改改；
当出现性能问题时，或者就是想重构代码，随便改呗，只要保留接口定义不动就好；

这就是文章标题说的：Web开发中的灵(JS)肉(HTML)分离。

Web开发中灵肉分离

猜你喜欢