博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery使用总结
阅读量:5875 次
发布时间:2019-06-19

本文共 2248 字,大约阅读时间需要 7 分钟。

目前接触最多的页面开发,基本还是使用 的。主要原因基于:操作方便;页面简单;兼容良好;新手多……没有能配合使用其他方案的人。因此,本篇文章就是写着玩加吐点槽的

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的特性网上已经有很多了,因此不再赘述,能给新人一点提示就行。

转载地址:http://upkix.baihongyu.com/

你可能感兴趣的文章
CentOS 6.9配置网卡IP/网关/DNS命令详细介绍及一些常用网络配置命令(转)
查看>>
python基础教程_学习笔记19:标准库:一些最爱——集合、堆和双端队列
查看>>
C# 解决窗体闪烁
查看>>
CSS魔法堂:Transition就这么好玩
查看>>
【OpenStack】network相关知识学习
查看>>
centos 7下独立的python 2.7环境安装
查看>>
[日常] 算法-单链表的创建
查看>>
前端工程化系列[01]-Bower包管理工具的使用
查看>>
使用 maven 自动将源码打包并发布
查看>>
Spark:求出分组内的TopN
查看>>
Python爬取豆瓣《复仇者联盟3》评论并生成乖萌的格鲁特
查看>>
关于跨DB增量(增、改)同步两张表的数据小技巧
查看>>
飞秋无法显示局域网好友
查看>>
学员会诊之03:你那惨不忍睹的三层架构
查看>>
vue-04-组件
查看>>
Golang协程与通道整理
查看>>
解决win7远程桌面连接时发生身份验证错误的方法
查看>>
C/C++ 多线程机制
查看>>
js - object.assign 以及浅、深拷贝
查看>>
python mysql Connect Pool mysql连接池 (201
查看>>