关于前端开发的思考

1.前言

最近有人问我：你会前端开发吗? 我思索了一会儿，然后说：不会！于是，我被鄙视了！后来我看那些所谓会前端开发的人写的作品，我恍然大悟，原来会使用Html标签，会显示和隐藏Dom，会使用Ajax GET、POST就算懂得了前端开发。我想了下，或许我们对前端开发的定义并不明确。

2.前端是什么

前端是相对后端而说的，通俗地说就是直接与用户进行交互的，用户能够明确感知到的部分叫前端，不直接与用户交互，用户无法直接感知到的部分叫后端。（这个定义是我自己认为的）前端通常被通俗地称为UI，即用户接口（User Interface）。通常谈到前端，大家想到的是Html，CSS，Javascript等内容，更深入地则有UX（User Experience）的概念，强调如何让用户更便捷，更明确无误地做完操作。

3.前端开发应该考虑的问题

我个人并非从事前端开发的工程师，但自己一直在思考，前端究竟应该解决什么问题。我个人认为，前端解决的问题可以分为两方面：

1）与用户的交互相关的问题

用户交互的基本要求是准确无误，其次要求是快捷方便，最后要求是符合操作习惯。准确无误很好理解，即UI必须能够引导用户进行准确的操作，快捷方便就有点深入了。我们结合XP和Win7的开始菜单进行说明。

图 1 - xp 开始菜单

图 2 - Win 7 开始菜单

对比两个开始菜单就会发现，Win 7 的启动菜单自动列出常用的应用，而且支持搜索，而xp则需要通过三级鼠标导航才能找到最终的程序，这个操作是很高难度的，这就是方便快捷的体现。在UI设计中有一个基本原则就是认为用户是不可靠的，意思是用户随时有可能误操作，那么如何降低误操作引起的麻烦呢？答案就是尽量减少用户的操作。我们再对比下面两个例子。

图3 - xp 菜单

图 4 - win 7 菜单

我们对比图 3 和 图 4 发现，Win 7 菜单的误操作概率更低，为什么呢？因为选项本身就是一个链接，点击之后直接就下一步，而xp设计方案中，选择某个选项之后，再点击下一步，需要两个动作，少了一个操作，就少了一次误操作的可能！这些是UI设计必须关注的问题。

关于操作习惯，通常都是从上到下，从做到右，所以诞生了很多顶部导航菜单、左侧导航菜单等方案，甚至有二者合一的方案。但随着移动互联网的出现，有一种磁贴的设计方案出现了，因为这种对操作的要求更高，用户需要很简单的操作就干复杂的事情，比如打电话、导航等等。

图 5 - 企业应用风格

图 6 - 磁贴风格的菜单

众所周知，Win 8 的菜单主要是适应移动风格的，为了满足微软“移动优先”的战略要求。这就引出另一个话题：是否PC应用都能“移动”起来？现在我们当然知道这个答案是否定的，但是当年有多少人是生搬硬套，认为让移动设备访问web应用就是移动化，甚至云化。当然单纯从前端设计来说，考虑这个有点越俎代庖，但是“响应式”UI是必须要满足的，像Bootstrap这些响应式框架就是满足这类需求的，一套UI设计，满足PC设备、手机、平板的UI需求。

2）与应用的开发相关的问题

前端涉及到列表、表单等Dom元素，用户的操作通常会改变这些Dom的值，而某些Dom的值的改变会改变其他Dom的值，比如级联，甚至会改变UI，比如高级查询。这时候，UI和UI背后的数据之间存在的双向的关系。处理这种双向绑定的关系，不是一件简单的事情。那么有没有一个框架解决这个问题呢？我个人认为目前最优雅的解决方案就是Knockout，非常流行的MVVM框架。

我们来通过一个例子感受下MVVM！一个Table页面是这样的。

Javascript部分

var headers = [
{ displayText: "Index", value: "id", width: "auto" },
{ displayText: "Name", value: "name", width: "auto" },
{ displayText: "Uri", value: "uri", width: "auto" },
{ displayText: "Comment", value: "comment", width: "auto" }];
function TableViewModel(data){
var me = this;
me.headers = ko.observableArray(headers);
me.records = ko.observableArray(data);
me.pagecount = ko.computed(function(){
if(me.records().length%pagesize == 0) return me.records().length/pagesize;
else return me.records().length/pagesize + 1;
});
me.count = ko.computed(function(){
return me.records().length;
});
}
$.ajax({
url: "/SpringDemo/home/user/data",
type: "GET",
success: function(data){
dataSource = data;
tableViewModel = new TableViewModel(data.slice(0,pagesize));
ko.applyBindings(tableViewModel,$("#tab").get(0));
}
});

<table id="tab" class="table table-striped table-bordered">
<caption>Visit Link List</caption>
<thead>
<tr class="success" data-bind="foreach:headers">
<th><a data-bind="text:displayText"></a></th>
</tr>
</thead>
<tbody data-bind="foreach: records">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: name"></td>
<td><a data-bind="attr: { href: '/SpringDemo' + uri}">Look</a></td>
<td data-bind="text: comment"></td>
</tr>
</tbody>
</table>

这里我们有分页的功能，当然也是通过Knockout实现的，但这并非今天讨论的重点，我们来看看数据的增加如何实现的。

save:function(record){
console.log(ko.toJSON(record));
var errCount = FormViewModel.errors().length;
var data = {"name":record.name(),"uri":record.uri(),"comment":record.comment()};
//check exist
var exist = false;
if(errCount == 0 && exist){
$.ajax({
url:"/home/create",
contentType:"application/json", //request format
type:"POST",
data: data,
dataType:"text", //response format
success:function(result){
//"SUCCESS" == result ? $("#myModal").modal("hide"):alert("save error");
tableViewMoel.records.push(data);
}
});
}else{
alert("please check your input,there were " + errCount + " errors.");
}
}

我们在表单中做了实时严重，这种验证我们并没有监听Dom的事件，而是注册了对数据的监听，这是如何做到的呢？

name : ko.observable().extend({
minLength: 3,
maxLength: { params: 30, message: "名称最大长度为30个字符" },
required: {
params: true,
message: "请输入名称",
}
})

这还是不是最重要的一点，表单、表格等Dom背后的数据的加载，绑定都是Json格式的，表单的提交只需要把Json提交即可，这个过程非常简单：

ko.toJSON(record)
结果：
{"name":"ss","uri":"ssd","comment":"fff","errors":["Please enter at least 3 characters."]}

4.总结

什么是前端开发，我认为仅仅会使用Jquery，CSS，标签这些真的不太够，如何能构建复杂，稳定的前端架构才是灵魂，能够把握整体的风格，操作流程，习惯这些真的才是精髓，或许有一些是产品经理的事情。这仅仅是我个人偏颇的理解，欢迎交流！

最后

以上就是稳重玉米为你收集整理的关于前端开发的思考的全部内容，希望文章能够帮你解决关于前端开发的思考所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。