分类目录归档:jQuery

arttemplate的jQuery帮助方法

需支持es5,兼容可以使用es5-shim

/**
 * 封装模板使用方法
 * @param  {string} tplName 模板名
 * @param  {[type]} data 传入模板的数据
 * @param  {[type]} method dom操作方法,默认使用html()方法
 * @return {[type]} 容器jQuery对象
 */
$.fn.tpl = function (tplName, data, method) {
  data = data || {};
  method = method || 'html';
  return this[method](template(tplName, data));
};
['append', 'prepend', 'after', 'before'].map(function (method) {
  (function (method) {
    $.fn[method + 'Tpl'] = function (tplName, data) {
      return this.tpl(tplName, data, method);
    }
  })(method);
});

ToFishes系列jQuery插件 – Dropdown下拉列表

之前有发过一套插件jcuteForm中包含一个下拉列表的实现,相比之前的作品,此次的实现更加简洁和优雅(自认的)。

而以前的jCuteForm的demo页因为使用的Google jscdn 引入的jQuery挂了已经不能正常在线查看,不过还是可以下载的。

而这次的提升还是很不错的,需要的请自行:查看DEMO

源码里面有个注释,去掉就可以实现一个页面多个dropdown的显示互斥(点一个下拉,则其他打开的下拉就恢复原状,源码内的注释没解释清楚,恐误解),因为莫名的想法我给注释掉了,需要的请自行取消。

ToFishes系列jQuery插件之textarea自适应高度和顺滑淡出

两个很简单的插件,可以认识下写插件的基本套路,甚至是固定的套路。

// textarea自动根据内容自适应高度
// 例子: $('textarea').autoHeight();
$.fn.autoHeight = function(options) {
    var _this = this;
    $(window).on('resize.textarea-auto-height', function() {
        _this.trigger('autoheighthandller');
    });
    return this.each(function() {
        var $this = $(this);
        if (! $this.data('origin-height')) {
            $this.data('origin-height', $this.height());
        };
        var scrollHeight = $this[0].scrollHeight;
        if($this.height() !== scrollHeight) $this.height(scrollHeight);
        $this.on('input keyup paste cut autoheighthandller', function(e) {
            // 检查高度,自动适应
            $this.height($this.data('origin-height'));
            var scrollHeight = $this[0].scrollHeight;
            if($this.height() !== scrollHeight) $this.height(scrollHeight);
        });
    });
};


// 比fadeOut更顺滑的淡出
// duration 是持续时间, 默认是300ms
// callback 是完成后的回调
$.fn.easeOut = function(duration, callback) {
    duration = duration || 300;
    return this.animate({
        'margin': 0,
        'height': 0,
        'opacity': 0,
        'padding': 0,
        'border': 0
    }, duration, function() {
        callback && callback.apply(this, arguments);
    });
};

 

回调函数集工具ActionSet还是jQuery Callbacks?

在知道jQuery.Callbacks()方法之前,碰见这样一个场景:

现有A、B、C3个模块, 分别写为3个js同名文件,由3个人分别开发。A和B完全独立,但是都依赖于C中一个ajax的回调数据。应对这种情况,于是写了一个ActionSets的对象,用于多个action的注册添加,与指定的时间地点触发执行 。使用的时候,在A、B分别注册一个Action,然后在C中的ajax回调中去统一执行这些Actions。

当时有两种设计想法,基于Object的key-value形式,一种是可以执行指定的Actions(action亦即callback一样的概念),但不能往Action内传参数,一种是只能执行全部的Actions,但是可以往每个Action传入参数。

因为需求中依赖C的ajax数据是存入cookies的,所以采用了第一种设计,看如下源码可以看出来:

Continue reading 回调函数集工具ActionSet还是jQuery Callbacks?

ToFishes系列jQuery插件之jSuggest – 搜索框输入框自动下拉提示内容补全插件

很久前就完成的一款插件,应用于高人网(gaoren.com)自动补全提示功能。

该插件只托管了键盘各种事件,输入框change事件,及ajax请求过程。下拉提示内容如何显示,及数据请求后的格式解析等均可以自己自定义,可以说如何显示,如何安排数据格式,完全由心。算是比较灵活了,当然灵活的代价就是配置项,需要写的比较多了。

还没想好插件的使用帮助,先放出demo和下载。有个bug是opera最新版下,按住方向键,下拉选项不能连续选择。

在输入框内输入内容,可以获取到来自淘宝数据的提示:

点击查看单独Demo和和获取下载,已更新至V2。

研究Ajax请求受登录保护的URL的优雅解决

在此先记下思路。

场景:登录页面login,在一个登录后才能访问的页面dashboard,dashboard上有一个按钮button,button绑定了一个单击事件,触发后发出一个ajax请求,ajax请求返回一个html片段,并把这个html片段更新到某个dom标签。

条件:dashboard页面如果登录过期,再次访问dashboard或点击button发出ajax请求应该跳转到登录页面login。

问题: 如果对ajax熟悉或有以上类似情况经验的,应该知道,登录过期后,如果不刷新dashboard页面,而直接点击button发出ajax请求,那么ajax获取到的响应内容会是整个登录页面login,而不是正确的那个html片段,这样更新到dom标签的话,页面整个乱掉了。

解决:ajax请求的地址在响应内容前先做登录判断,如过期则返回一个标志位,比如login=false\true,在ajax回调的方法中判断此标志位, 如果login=true,则location.href=登陆页面url。

优雅:理论上是这样,还没试验。拿javaEE应用+jQuery Ajax(版本1.5+)来说。因为我比较熟悉JEE。JEE可以通过过滤器Filter来控制所有的受登录保护的url请求。

jQuery Ajax可以通过ajaxSetup设置全局选项,其中有一项是关于响应的状态码的,在1.5+版本中叫 statusCode ,而且jQuery Ajax有一个请求头:X-Requested-With = XMLHttpRequest

没错了,通过状态码及请求头就可以更方便,更自动的解决登录保护问题。
做法为: Filter通过request.getHeader(“X-Requested-With”)可以判断是否为Ajax请求(所以自己写的ajax最好也加上这个请求头)。 当是Ajax请求并且登录已经过期,则直接在Filter中响应一个状态码401,或者其他自定义各种码。在ajaxSetup全局选项中配置如何处理这个状态码,亦即location.href=登陆页面url。这样就可以统一自动的处理各种登录保护下的ajax请求了。

ajaxSetup例子如下:

$.ajaxSetup({
  statusCode: {
    '401': function() {
      //alert('登录超时了哦...');
      //如果做了登录自动跳回,可以再加个东东
      var currUrl = encodeURIComponent(location.href);
      location.href = '/login?url=' + currUrl;
    }
  }
});

/* URI编码及解码方法 */
/* 推荐方式 */
console.info(encodeURIComponent('http://www.aa.com/hh ll/'));
console.info(decodeURIComponent('http://www.aa.com/hh ll/'));
/* 另外的简单方式
encodeURI 不对下列字符进行编码:“:”、“/”、“;”和“?”。请使用 encodeURIComponent 对这些字符进行编码
 */
console.info(encodeURI('http://www.aa.com/hh ll/'));
console.info(decodeURI('http://www.aa.com/hh ll/'));

Google JavaScript 编码规范指南

来源于: http://www.chuan.shanghuo.net/wordpress/?page_id=233

Google官方文档地址(English): http://code.google.com/p/google-styleguide/

淘宝总结的: http://docs.kissyui.com/

Google JavaScript 编码规范指南

 

修订版: 2.9

Aaron Whyte 

Bob Jervis

Dan Pupius

Eric Arvidsson

Fritz Schneider

Robby Walker

每个条目都有概述信息, 点击

查看详细的内容.

你也可以点击下面的按钮

 

展开全部

重要注意事项

显示被隐藏的内容

link 

 

这份指南中, 可以点击旁边的按钮来显示更多的细节.

Hooray! 这里是更多详细的内容, 你也可以点击最上面的”显示/隐藏全部按钮”来切换显示更多内容.

Continue reading Google JavaScript 编码规范指南