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为每个网页元素绑定数据、绑定事件，并根据后端推送的数据随时挑中页面显示；
实例：
首先，前端做了网页：
用户名登录密码进入
并为这个网页配好了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)分离。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！