标签：function el .__ 重构 代码 用户 user focusNodeAdjacency 属性
质量属性-重构代码
易用性与用户完成期望任务的难易程度以及系统为用户提供的支持种类有关，简单来说，易用性是面向用户的，如何让用户轻松愉快的使用是实现本属性的关键。而在其战术体现上就为用户提供适当的反馈和协助，这是易用性战术的核心。
总的来说，易用性战术分为三类，哪三类呢：第一类叫做分离用户界面，也就是将用户分离出来，这一步至关重要，也就是说至少要做到让用户拥有一定的自主权利，可以在一定的范围内做出修改，但又不影响核心内容。
（1）这一点体现在代码中重构方面我们可以选择给他加一个页面跳转来（很简陋的方法，但我也差不多只能想到这个了），或者说插入一些无感紧要但提升修饰属性的内容来使自己的程序丰满起来。
//触发一个函数跳转
<script>
function jump(){
window.location.href="http://blog.sina.com.cn/mleavs";
}</script>
<input type="button" value="我是一个按钮" οnclick=javascrtpt:jump()>//或者在button标签中加上onclick属性，赋值为Javascript
<input type="button" value="我是一个按钮" οnclick="javascrtpt:window.location.href='http://blog.sina.com.cn/mleavs'">
完成跳转的方法还有很多，这里不再赘述了，这样的话在此页面上用户做些改动并不影响整体系统，因为他们之间并没有固定联系
这样的话可以在这个页面上加些内容
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>JS Bin</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
.box1{
width: 698px;
height: 258px;
border: 1px solid #ccc;
background: url(http://www.snowinmay.net/6rooms/html/img/gsh/gsh_banner3.jpg) no-repeat; }
.changeBg{
background: url(http://www.snowinmay.net/6rooms/html/img/gsh/gsh_banner1.jpg) no-repeat; }</style>
</head>
<body>
<div class="box1">
</div>
<script>
$(function(){
$('.box1').toggle(function() {
$(this).addClass('changeBg');
}, function() {
$(this).removeClass('changeBg');
});
})</script>
</body>
</html>
比如这种可以点击切换背景，只是一些特殊效果并不影响内容
第二类叫做运行时战术（Runtime tactics）。运行时战术是提供给用户系统正在做什么的反馈信息和为用户提供诸如帮助、撤销，取消等易用性命令的能力。有点上学期讲的人机交互的那方面意思，很相近的。
（2）系统相应的反馈信息比如说点击反馈方面，赋予点击反馈的效果，如高亮，闪烁等或是其他的一些点击效果。
咱们常用的echarts中有很多类似的显示效果，比如点击高亮，点击放大缩小
下面注释代码的含义是，在鼠标经过时放大节点，在鼠标离开时，停止放大。
/*
el.off('mouseover', el.__focusNodeAdjacency);
el.off('mouseout', el.__unfocusNodeAdjacency);
if (itemModel.get('focusNodeAdjacency')) {
el.on('mouseover', el.__focusNodeAdjacency = function () {
api.dispatchAction({
type: 'focusNodeAdjacency',
seriesId: seriesModel.id,
dataIndex: el.dataIndex
});
});
el.on('mouseout', el.__unfocusNodeAdjacency = function () {
api.dispatchAction({
type: 'unfocusNodeAdjacency',
seriesId: seriesModel.id
});
});
}
}, this);
data.graph.eachEdge(function (edge) {
var el = edge.getGraphicEl();
el.off('mouseover', el.__focusNodeAdjacency);
el.off('mouseout', el.__unfocusNodeAdjacency);
if (edge.getModel().get('focusNodeAdjacency')) {
el.on('mouseover', el.__focusNodeAdjacency = function () {
api.dispatchAction({
type: 'focusNodeAdjacency',
seriesId: seriesModel.id,
edgeDataIndex: edge.dataIndex
});
});
el.on('mouseout', el.__unfocusNodeAdjacency = function () {
api.dispatchAction({
type: 'unfocusNodeAdjacency',
seriesId: seriesModel.id
});
});
}
}); */
（3）提供一些易用性命令，比如说eclipse支持自定义快捷键，比如Ctrl C是复制Ctrl Z是撤销等诸如此类的命令可以方便用户使用
（这个没有代码。。。。。不过这些咱们都用，比较好理解）
第三类战术名字叫做系统主动战术，系统主动战术细分的话又可以分为小的三类，分别是用户模型，任务模型，系统模型三种分别来说哈：用户模型就是预测用户的使用，通过预测来方便用户的操作，也就是体会用户的心情，比如说比如输入法会预测拼写，当输入词组或句子的首字母时，输入法会“联想”相应词组或句子提供给用户参考。以及减少用户的错误，比如设置输入要求限制用户的输入。
（4）对输入有所要求，比如要求必须输入中文，不得输入特殊字符，长度不小于。。。。
提个简单的吧，之前做的练习
<script type="text/javascript">
function check() {
var name = document.getElementById("name");;
var num = document.getElementById("num");
var price = document.getElementById("price");
//非空
if(name.value == '') {
alert('水果名称为空');
name.focus();
return false;
}
if(num.value == '') {
alert('存储数量为空');
teacher.focus();
return false;
}
if(price.value == '') {
alert('价格为空');
classroom.focus();
return false;
}
}
</script>
判断为空的情况
（5）比如时间上的选定，默认为当前时间。登录时记住密码等等。
登录时记住密码：
账号:<input type="text" id="user">
密码:<input type="password" id="pwd">
记住密码:<input type="checkbox" id="remember">
<button οnclick="fn()">登录</button>
var user = document.getElementById('user'),
pass = document.getElementById('pwd'),
check = document.getElementById('remember'),
localUser = localStorage.getItem('user') || ''; //获取到user的值并保存
localPass = localStorage.getItem('pass') || ''; //获取到pwd的值并保存
user.value = localUser;
pass.value = localPass;
if (localUser !== '' && localPass !== '') {
check.setAttribute('checked', '');
}
function fn(){
if (check.checked){
localStorage.setItem('user', user.value);
localStorage.setItem('pass', pass.value);
} else {
localStorage.setItem('user', '');
localStorage.setItem('pass', '');
}
}
还有就是任务模型：任务模型就是用于确定上下文，了解用户意图，如完成任务的进度最后就是系统模型了，系统模型：确定了期望的系统行为，以便为用户提供适当的反馈，例如提示功能，进度条的使用等。总的来说，就是将系统看成一部分，引导用户完成整个系统的内容。
（6）最简单的方法是写用户使用手册，指引用户使用系统
（这是之前申请软著的时候写的说明书）
可以引导用户使用的方向
（7）错误提示，比如没有填写完整时的返回
加弹窗，告诉用户那里错了
（8）提示信息，标注需要用户注意的内容
加一些提示的字就行了
（9）在线解答，帮助解决问题。引导系统的使用
。。。。。。比如说B站的客服
基本上客户端都能实现，但是咱们没有这个代码
标签：function,el,.__,重构,代码,用户,user,focusNodeAdjacency,属性 来源： https://www.cnblogs.com/jyt123/p/13162443.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。