一直使用JQUERY(或者说是JAVASCRIPT)来进行开发,有着的如下的几个问题:

1. JS文件太多,基本上是一个功能就需要使用一个JS文件

2. 对于同一个功能,大量的重复性代码,比如某一个区域需要使用到TAB,只是元素不一样而已。

3. 大量的纯DOM编程

4. 不注重JS的代码效率

 

 

一个好的JS前端架构:

对于一个好的JS前端架构而言(当然它是基于jQuery),至少应该包含有如下几个方面

1. 属于公司本身的JS命令空间(大多以公司英文名)

2. 基本的操作工具集,即最常用的工具方法(对原有的JAVASCRIPT以及JQUERY来进行封装),对于静态的工具类,一般命名为util,一般包括如下的工具方法

 

命名空间下的常量

命名空间名

命名空间说明

命名空间的版本号

 

 

操作方法的封装

针对原有对象的封装(String,Date):

 

  String对象

      repeat(重复)  trim(对两边进行清空) spilt  针对特殊字符的转义

      对某一个字符串的查找  查找不区分大小写

      字符串的截取以及自动填充

      字符串的截取(自动识别单词或者是文字,而非以字符截取)

 

  Date 对象

      格式化

 

  Location 对象

      获得当前的地址 

      获得当前的主机头

      获得URL

      URL的重定向

 

 

 

对对象进行扩展封装

变量

    判断变量是否存在

 

数据类型的判断

  获得某一个变量的类型,特别是Object对象的细分(在JAVASCRIPT中,Date,Object,Function其实都是Object对象)

 

 

针对AJAX

     让服务器端返回的数据,以正常的格式返回(即使用eval函数)

     针对URL参数封装(特别是编码问题)

     AJAX跨域的封装

  

    服务器端返回的JSON字符串转换成JSON数组(当在服务器端,使用非encode_json时)

 

 

  

针对对象参数

    对参数进行初始化

 

针对数组

   是否为数组对象 is_array()

   数据元素中的删除

 

 

DOM对象

   当前元素是否存在子元素

   当前对象是否为DOM对象

 

浏览器事件封装

某一个DOM对象的选中

某一个DOM对象的复制

某一个DOM对象文本复制之后的粘贴

 

 

调试方法

提供可配置模式:是否为开发模式 还是 生产模式 (开发模式下,允许使用特定的log方法,将错误输出到特定的DIV中)

客户端报错写入到日志中

console控制台调试

变量输出

 

 

报错机制

在特定的类别中添加错误

for example : addErrorMessage(‘email’, ‘Please enter your email  address.’);

删除错误

removeErrorMessage(‘email);

输出错误(可自定义格式)

 

 

常用的一些快捷方法

设置首页

添加到收藏

全屏

打印

 

 

常用快捷键(或者是按键)的封装

获得当前按键的KeyCode

ESC键

Enter键

F1-F12键等

 

 

Cookie操作

在客户端存储cookie

在客户端读取cookie

 

 

自定义的JAVASCRIPT操作

 

常用的JS工具集:
Date处理

字符串的过滤以及分割-->特别是针对汉字


 

 

必须要考虑

处理国际化的问题

 

AJAX的安全性—>仅提供一个ajax,让所有的AJAX全部经过此AJAX,以达到隐藏AJAX连接的能力

 

分享


点击连接登陆

 

 

 

常用的效果

表单验证

    单选框是否选中

    复选框是否选辑

    下拉框是否有选中

 

tooltip

TAB

Accordion

Lightbox

拖放

posted on 2012-09-08 12:11  myjavawork  阅读(264)  评论(0)    收藏  举报