优雅代码例子

这是程序代码，实现的功能就是username文本框，如果没有填写数据就弹出一个错误的提示。
这是文本框

 <input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" />

弹出是窗口代码。

var username=$("#username").val();
			if(username==''){
			
			function showErrorMsg(msg){
	
	 $.confirm({
	        title: '错误',
	        content: msg,
	        type: 'red',
	        typeAnimated: false,
	        buttons: {
	            omg: {
	                text: '知道了',
	                btnClass: 'btn-red',
	                
	            }
	            
	        }
 });
}

按照重复的代码可以抽象出来处理的原则。进行第一次优化。文本框不变。弹出式窗口进行抽象成一个JS方法。

//显示错误信息
function showErrorMsg(msg){
	
	 $.confirm({
	        title: '错误',
	        content: msg,
	        type: 'red',
	        typeAnimated: false,
	        buttons: {
	            omg: {
	                text: '知道了',
	                btnClass: 'btn-red',
	                
	            }
	            
	        }
 });
}

```javascript
var username=$("#username").val();
			if(username==''){
			
			
				 showWarningMsg('请填写用户名');
	    return;
			}

进一步简化方案；在文本框class中增加required属性。增加tips显示要弹出的内容。

 <input type="text" placeholder="请输入您的用户名" class="form-control required" name="username" id="username"  tips="请填写用户名"/>

增加遍历有required的文本框，调用js方法，传递tips内容。

//遍历文本框
function checkForm(){
   	$(".required").each(function(i,e){
   		if($(e).val()==''){
   			showWarningMsg($(e).attr('tips'));
   			return false;
   		}
   	})
   	return false;
}

调用过程进一步优化

<script type="text/javascript">
$(document).ready(function(){
	$("#submit-btn").click(function(){
	
		if (!checkForm())return;
		var username=$("#username").val();
		var password=$("#password").val();	
		var cpacha=$("#cpacha").val();
			
	});
	
})

经过以上步骤的优化，页面代码已经减少很多，可读性也很好。代码的优化是一个学习技术的过程。通过不断追求代码的优化提高技术水平和能力。