目前接触最多的页面开发,基本还是使用 的。主要原因基于:操作方便;页面简单;兼容良好;新手多……没有能配合使用其他方案的人。因此,本篇文章就是写着玩加吐点槽的
。
Write Less,Do More是JQuery的核心理念。所以你们就不要在工作中随意造轮子了!
一、Ajax
绝对禁止同步请求!一定要处理所有可能的情况!
普通示例
:
function getData(){ var params= {} $.ajax({ type: 'post', dataType: 'json', url: 'xxxxx', data: params, beforeSend: function(){}, success: function(data){ if(data.code != 1){ // 失败方法 return; } // 成功方法 }, error: function(){}, complete: function(){} });}
大部分兼容要求不高,公司使用同一个接口,只是传参不同,因此,共通的ajax请求方案为:
function reqAjax (params) { var deferred = $.Deferred(); $.ajax({ type: 'post', dataType: 'json', url: 'xxxx', data: params, success: function(data){ deferred.resolve(data); }, error: function(err){ deferred.reject(err); } }); return deferred;}
主要使用了JQuery(>1.5)的 对象。请求示例
:
function getData () { // 1、校验,或其他方法获取参数 var params = {} // 2、自定义beforeSend // 3、请求数据 var p = reqAjax(params); // 4、自定义success方法 p.done(function (data) {}); // 5、自定义error方法,一般属于超时或网络不正常 p.fail(function (err) {}); // 以上执行成功之后可链式调用下一步操作 p.then(function () {});}
如果想单独使用Ajax,一般来说推荐两个方案: 和 自己去 搜索
二、模板
根据设计的不同,有时需要重复添加一些元素。除了基本的模板插件外,还可以充分使用 JQuery 的 方法
尽量不要拼接字符串!
假设dom结构为:
字段1:
字段2:
字段3:
接口请求成功,处理dom:
// 自己处理循环function addList(arr){ // 模拟请求过来的数据 var data = { test1: Math.random().toFixed(5), test2: Math.random().toFixed(5), test3: Math.random().toFixed(5) } // 假设父级dom var pDom = $('.xxx'); // 直接克隆已经写好且隐藏的模板,去掉hidden var dom = pDom.find('.test.hidden').clone().removeClass('hidden'); // 取巧的方法,根据字段标识的名称取dom元素,然后赋值,一般来说还需要进行其他的处理 for(var key in data){ dom.find('.'+key).text(data[key]) } // 处理完毕,加入父级dom中 pDom.append(dom);}
主要是我不喜欢拼接字符串,懒得很,而且改别人的BUG好恶心。
三、事件
事件使用多看看教程就行,但如何使用得稍微琢磨一下
如:不要在 $(document).ready()
中初始化所有乱七八糟的方法,很难找的……
对于新添加的元素,添加点击(或其他)事件,可以使用
$(parentDom).on('click', 'newDom', function(){});
或
$(newDom).live('click', function(){})
四、动效
作为前端,不要光想着js,好歹也学学
PC端使用动效是没问题的,但移动端网页,如slideUp、animate之类,最好用css样式代替,不然会有卡顿效果。
……移动端为什么还用jquery?jquery 压缩版一般在80~90 kb,对如今的网络是可以接受的,当然最好用 代替。
请在完成任务之后再考虑优化……
五、No JQuery
不要把不熟悉的东西带到工作中,除非没有更好的替代方案
若不想使用JQuery,且不考虑兼容性,可参考:
杂项
如果有空,记得重构代码~
本来想写点具有实用性的东西,但Jquery的特性网上已经有很多了,因此不再赘述,能给新人一点提示就行。