后端程序员写的前端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
应对未检查异常就是养成良好的检查习惯. 已检查异常是不可避免的,对于已检查异常必须实现定义好应对的方法. 已检查异常肯定跨越出了虚拟机的范围.(比如“未找到文件”) 如何处理已检查异常(对于所有的已检 ...
随机推荐
- IDEA 部署项目的时候出错：Jar not loaded错误
2011-10-18 17:03:52 org.apache.catalina.loader.WebappClassLoader validateJarFile 信息: validateJarFile ...
- C语言俄罗斯方块
#include <windows.h> #include <stdio.h> #include <time.h> #include <conio.h> ...
- day1 作业编写登录窗口
作业一:编写登录接口 (1)输入用户名和密码: (2)认证成功后显示欢迎信息: (3)输错三次后锁定. 思路:我们知道,要想让程序记住之前输入多少次,锁定用户,那么可以使用数据库来保存用户的状态,然而 ...
- bzoj 1452 二维树状数组
#include<bits/stdc++.h> #define LL long long #define fi first #define se second #define mk mak ...
- thinkphp5.0 配置
ThinkPHP提供了灵活的全局配置功能,采用最有效率的PHP返回数组方式定义,支持惯例配置.公共配置.模块配置.场景配置和动态配置. 对于有些简单的应用,你无需配置任何配置文件,而对于复杂的要求,你 ...
- jquery选择器详细说明
jquery中选择器感觉是用的特别多并且特别方便的一个方法,今天就在这里详细的记载下大多数常用的选择器,一起学习探讨. 首先介绍的是css3的选择器,其中包括了标签选择器(div),ID选择器(#ID ...
- Spring Cloud Config 使用总结
Spring Cloud Config 使用总结 源码 https://github.com/ChangMuChen/Spring-Boot/tree/master/studies/sourcecod ...
- angular4 动态Form中获取表单字段并在页面中使用的方法
主要有两种方式 第一种 使用get属性 页面中使用如下: 第二种 使用普通方法事件 页面中使用如下 *转载请附出处
- 简述HttpSession的作用、使用方法，可用代码说明
HttpSession中可以跟踪并储存用户信息,把值设置到属性中,有2个方法:setAttribute(),getAttrribute(): 例如:在一个方法中用session.setAttribut ...
- FastReport.Net使用：[13]如何使用表达式
在FastReport报表中,表达式(Expressions)用在很多地方,譬如文本框,排序过滤器等. 表达式基于报表选择的脚本语言,从菜单[报表]->[选项]打开“报表选项对话框”,切换到“脚 ...