我们的很多项目都是基于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)分离。