后端程序员写的前端js代码模板
看几天的javascript面向对象和基础等之类相关javascript的知识，因为自己是写php的，也写过java，所以想在写javascript代码的时候也能用上面向对象的思想，
折腾了一整天的js继承和封装等，搞得我是吃午饭都想着问题，怎么javascript代码能够如此松散呢？眼看就要下班了，加班到如今不知怎么滴就弄了这样一个js代码模板，想以后每一个模块都这样写。大了就各个功能对象提炼出来，如验证的、语言包的。
好了，废话不多说，菜鸟一个，代码没凝视也不完整，高手留情指点：
reg.html文件：
<html>
<head><include file="layout/head"/><title>{$Think.lang.REG}</title></head>
<body>
<include file="layout/nav"/>
<div id="content">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">{$Think.lang.REG}</h3>
</div>
<div class="panel-body">
<form id="regForm" action="{:U('home/user/reg')}" method="post">
<div class="form-group">
<label for="account">{$Think.lang.ACCOUNT}</label>
<input type="text" id="account" methods="keyup,blur" name="account" class="form-control" style="width: 30%;"
placeholder="{$Think.lang.REG_ACCOUNT_TIP}" title="{$Think.lang.REG_ACCOUNT_TIP}"/>
<div class="alert alert-danger js-account_alert" style="width: 30%; display: none;">
<strong>:(</strong>
<span></span>
</div>
</div>
<div class="form-group">
<label for="password">{$Think.lang.PWD}</label>
<input type="password" methods="keyup,blur" name="password" class="form-control" style="width: 30%;" id="password"
placeholder="{$Think.lang.REG_PWD_TIP}" title="{$Think.lang.REG_PWD_TIP}"/>
<div class="alert alert-danger js-pwd_alert" style="width: 30%; display: none;">
<strong>:(</strong>
<span></span>
</div>
</div>
<div class="form-group">
<label for="password">{$Think.lang.VERIFY}</label>
<div class="input-group" style="width: 30%;">
<input type="text" methods="blur" id="verify" name="verify" class="form-control"/>
<span class="input-group-addon" style="padding: 0px;">
<img src="{:U('home/user/verify','','')}" methods="click" id="changeVerify" title="点击更换"/>
</span>
</div>
<div class="alert alert-danger js-verify_alert" style="width: 30%; display: none;">
<strong>:(</strong>
<span></span>
</div>
</div>
<input type="hidden" name="submit_code" value="{$submitCode}"/>
<button type="button" id="regSubmitBtn" methods="click" class="btn btn-primary">{$Think.lang.REG}</button>
<button type="reset" class="btn btn-default">{$Think.lang.RESET}</button>
</form>
</div>
</div>
</div>
<include file="layout/foot"/>
<script src="reg.js"></script>
</body>
</html>
reg.js文件：
$( function( ) {
var Reg = {
regEx: {
ACCOUNT: /^\w{5,8}$/,
PWD: /^\d{5,15}$/,
VERIFY: /^\d{4}$/
},
node: {
account: $( '#account' ),
pwd: $( '#password' ),
verify: $( '#verify' ),
regForm: $( '#regForm' )
},
lang: {
ACCOUNT: '{$Think.lang.REG_ACCOUNT_TIP}',
PWD: '{$Think.lang.REG_PWD_TIP}',
VERIFY: '{$Think.lang.REG_VERIFY_TIP}',
CHECK_VERIFY_URL: "{:U('home/user/checkVerify')}",
VERIFY_URL: "{:U('home/user/verify','','')}"
},
server: {
checkVerify: function( val, callback ) {
$.post( Reg.lang.CHECK_VERIFY_URL, { verify: val }, callback, 'json' );
}
},
validator: {
account: function( val, tip ) {
var result = false;
if ( !Reg.regEx.ACCOUNT.test( val ) ) {
Reg.ui.showTip( tip, Reg.lang.ACCOUNT );
} else {
result = true;
Reg.ui.hideTip( tip );
}
return result;
},
pwd: function( val, tip ) {
var result = false;
if ( !Reg.regEx.PWD.test( val ) ) {
Reg.ui.showTip( tip, Reg.lang.PWD );
} else {
result = true;
Reg.ui.hideTip( tip );
}
return result;
},
verify: function( val, tip, callback ) {
var result = false;
if ( !Reg.regEx.VERIFY.test( val ) ) {
Reg.ui.showTip( tip, Reg.lang.VERIFY );
} else {
Reg.server.checkVerify( val, function( data ) {
if ( data.status ) {
if ( typeof callback === 'function' ) {
callback();
}
Reg.ui.hideTip( tip );
} else {
Reg.ui.showTip( tip, Reg.lang.VERIFY );
}
} );
}
return result;
}
},
ui: {
showTip: function( obj, msg ) {
$( obj ).slideDown( 'slow' ).find( 'span' ).html( msg );
},
hideTip: function( obj ) {
$( obj ).slideUp( ).find( 'span' ).html( '' );
}
},
event: {
accountKeyup: function( e ) {
var self = $( this );
setTimeout( function( ) {
Reg.validator.account( self.val( ), '.js-account_alert' );
}, 1000 );
},
accountBlur: function( e ) {
var self = $( this );
Reg.validator.account( self.val( ), '.js-account_alert' );
},
passwordKeyup: function( e ) {
var that = $( this );
setTimeout( function( ) {
Reg.validator.pwd( that.val( ), '.js-pwd_alert' );
}, 1000 );
},
passwordBlur: function( e ) {
var self = $( this );
Reg.validator.pwd( self.val( ), '.js-pwd_alert' );
},
verifyBlur: function( e ) {
Reg.validator.verify( $( this ).val( ), '.js-verify_alert' );
},
changeVerifyClick: function( ) {
var src = Reg.lang.VERIFY_URL + '/' + new Date( ).getTime( );
$( this ).attr( 'src', src );
},
regSubmitBtnClick: function() {
Reg.validator.account( Reg.node.account.val( ), '.js-account_alert' ) &&
Reg.validator.pwd( Reg.node.pwd.val( ), '.js-pwd_alert' ) &&
Reg.validator.verify( Reg.node.verify.val( ), '.js-verify_alert', function() {
Reg.node.regForm.submit();
} );
}
},
util: {
upFirstLetter: function( word ) {
var reg = /\b(\w)|\s(\w)/g;
word = word.toLowerCase();
return word.replace( reg, function( m ) {
return m.toUpperCase();
} );
}
},
initializer: function( ) {
var node = $( '[methods]' );
node.each( function( ) {
var self = $( this ), methods = self.attr( 'methods' );
if ( methods ) {
var _methods = methods.split( ',' );
for ( var i = 0, len = _methods.length; i < len; i++ ) {
var method = _methods[i];
if ( method ) {
var func = self.attr( 'id' ) + Reg.util.upFirstLetter( method );
console.log( func );
self.on( method, Reg.event[func] );
}
}
}
} );
}
};
Reg.initializer( );
} );
后端程序员写的前端js代码模板的更多相关文章
- 程序员面试京东前端，现场JavaScript代码写出魔方特效
程序员面试京东前端,现场JS代码写出魔方特效,成功搞定20K月薪 今天小编我逛论坛,看到了一位程序员小伙子,因为是有了两年工作经验,然后去京东面试前端岗,一面二面轻松就过了,到了技术面这一块,小伙干脆 ...
- 写给后端程序员的HTTP缓存原理介绍
There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Ka ...
- 程序员写 2000 行 if else？领导：这个锅我不背
前言 知乎上有小伙伴提了这么一个问题,如何看待陕西省普通话水平测试成绩查询系统?查询系统前端代码就直接给出了身份账号,姓名,证书编号,如果信息是真的,就泄露了这么多考生的信息,白给那种.为什么会发生这 ...
- 科普，想成为厉害的 Java 后端程序员，你需要懂这 13 个知识点
老读者就请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题. 站 ...
- 科普，想成为厉害的 Java 后端程序员，你需要懂这些
站在运筹帷幄的角度来看,一名厉害的 Java 后端程序员都需要懂得哪些知识呢?我想,这也是很多读者迫切想知道的一个问题,因为如果不站在一个宏观的角度的话,所有学过的知识点都是零散的,就感觉像一只迷路的 ...
- 后端程序员实现一个IP归属地的小程序
在日常开发中,后端主要提供数据以及处理业务逻辑,前端主要提供页面布局以及数据展示.后端程序员对于页面布局接触比较少,但是小程序有完善的文档说明.页面布局也相对简单,实现起来相对简单一些.而且小程序相对 ...
- 后端程序员必备的 Linux 基础知识
1. 从认识操作系统开始 正式开始 Linux 之前,简单花一点点篇幅科普一下操作系统相关的内容. 1.1. 操作系统简介 我通过以下四点介绍什么是操作系统: 操作系统(Operating Syste ...
- Angular学习资料大全和常用语法汇总（让后端程序员轻松上手）
前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...
- 出错的方法有可能是JDK，也可能是程序员写的程序，无论谁写的，抛出一定用throw
应对未检查异常就是养成良好的检查习惯. 已检查异常是不可避免的,对于已检查异常必须实现定义好应对的方法. 已检查异常肯定跨越出了虚拟机的范围.(比如“未找到文件”) 如何处理已检查异常(对于所有的已检 ...
随机推荐
- Jury Jeopardy(反向模拟)
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAy8AAAI7CAIAAABqfzNeAAAgAElEQVR4nOy9e2AU1d3/f2ov07q166
- 双系统卸载linux和装双系统的方法
卸载linux系统: 因为本人装的是windows和Ubuntu,所以引导程序在linux系统里,linux系统可以引导windows系统,而Windows不能引导linux,所以需要修改引导程序,使 ...
- CSU 1351 Tree Counting
原题链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1351 DP题,毫无疑问.由于动态规划题目做得少.不熟悉,刚开始自己用f[i]表示用 i ...
- 总结开发ERP软件应遵循的一些基本原则
总结一下做管理软件,有哪些项是经过检验的条款,必须遵守的. 界面篇 1 要保存用户的偏号(profile/favourite). ASP.NET 2.0引入此功能,当用户修改默认的控件的属性时,框架 ...
- ionic1.3.3 下拉刷新 上拉加载更多
源文地址:https://blog.csdn.net/kingcruel/article/details/67638880 再次感谢原作者 html <ion-pane> <ion- ...
- CentOS7.5 firefox Flash插件更新
CentOS7自带的firefox没有flash插件,所以是没有办法在网页上看视频的,需要自己手动安装 1.下载 打开flash官网https://get.adobe.com/flashplayer/ ...
- [Codeforces50C]Happy Farm 5 凸包
大致题意: 平面上有n个整数点,问你最少经过多少步能够将所有点严格包围. 将点严格包围要求你走的路径完全包围给出的点且不能有点在路径上 你只能走整数点,且方向只有上下左右左上右下等8个方向,每次移动一 ...
- HDU 6201 transaction transaction transaction（树形DP）
transaction transaction transaction Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 132768/1 ...
- java获取指定日期的年、月、日的值
参数:String dateStr = '2016-05-18'; 1.获取string对应date日期: Date date = new SimpleDateFormat("yyyy-MM ...
- 网络流24题之最长k可重线段集问题
对于每个线段拆成两个点,如同之前一样建图,由于可能出现垂直于x轴的 所以建图由i指向i~ 继续最小费用最大流 By:大奕哥 #include<bits/stdc++.h> using na ...