后端程序员写的前端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
应对未检查异常就是养成良好的检查习惯. 已检查异常是不可避免的,对于已检查异常必须实现定义好应对的方法. 已检查异常肯定跨越出了虚拟机的范围.(比如“未找到文件”) 如何处理已检查异常(对于所有的已检 ...
随机推荐
- 关于IdByName 为什么一个消息主题要有 Id和 Name的解释
- Zabbix定义报警机制
1. 修改zabbix配置文件 #取消注释或添加一行 cat -n /etc/zabbix/zabbix_server.conf |grep --color=auto "AlertScrip ...
- C语言获取输入，按单词输出
#include <stdio.h> #include <stdlib.h> int main(int argc,char *argv[]) { int num; printf ...
- 【hdoj_1715】大菲波数(大数+100000000进制)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1715 本题采用大数加法即可解决.采用100000000进制速度更快. C++代码如下: #include& ...
- linux中top命令
经常用到top命令,也就简单看看进程多不多,卡不卡, 这次在网上找到一个归纳总结的,以供参考. 简介 top 命令是 Linux 下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于 ...
- git上了github又要上码云。
<h1>关联远程仓库:github为例</h1> 1.首先在用户目录下找到.ssh 2.如果.ssh文件夹里没有id_rsa和id_rsa.pub文件,或者也没有.ssh文件夹 ...
- Redis Cluster集群的搭建与实践
Redis Cluster集群 一.redis-cluster设计 Redis集群搭建的方式有多种,例如使用zookeeper等,但从redis 3.0之后版本支持redis-cluster集群,Re ...
- Java多线程编程——volatile关键字
(本篇主要内容摘自<Java多线程编程核心技术>) volatile关键字的主要作用是保证线程之间变量的可见性. package com.func; public class RunThr ...
- 由字符串反转(使用递归)引申出来一道Java面试题
如何面试一个从事编程工作的开发人员既困难又乏味,幸好还有很多值得参考的指南,比如:<Joel Guerilla Guide to interviewing>,但最后雇佣与否,还得由你自己决 ...
- AOP的自动代理
Spring的aop机制提供两类方式实现类代理.一种是单个代理,一种是自动代理. 单个代理通过ProxyFactoryBean来实现(就如上面的配置). 自动代理:自动代理能够让切面定义来决定那个be ...