【规范】前端编码规范——jquery 规范
使用单引号
不推荐
$("div").html("<img src='1.jpg'>");
推荐
$('div').html('<img src="1.jpg">');
缓存变量
DOM 遍历是昂贵的,所以尽量将会重用的元素缓存。
不推荐
var h = $('#element').height(); $('#element').css('height', h - 20);
推荐
var $element = $('#element'),h = $element.height(); $element.css('height', h - 20);
避免全局变量
jquery 与 javascript 一样,一般来说,最好确保你的变量在函数作用域内。
不推荐
$element = $('#element'); h = $element.height(); $element.css('height',h - 20);
推荐
var $element = $('#element'),h = $element.height(); $element.css('height',h - 20);
使用驼峰式命名
使用驼峰式命名,在前面添加 $
作为前缀,以便于标示为 jquery 对象。
不推荐
var first = $('#first'),second = $('#second'),value = $first.val();
推荐
var $first = $('#first'),$second = $('#second'),value = $first.val();
使用单 var 模式
将多条 var
语句合并为一条语句,建议将未赋值的变量放到后面。
var $first = $('#first'),$second = $('#second'),value = $first.val(),k = 3,cookiestring = 'SOMECOOKIESPLEASE',i,j,myArray = {};
使用 on 来处理事件
在新版 jquery 中,更短的 on('click')
用来取代类似 click()
这样的函数。在之前的版本中 on()
就是 bind()
。自从 jquery 1.7 版本后,on()
是附加事件处理程序的首选方法。出于一致性考虑,你可以简单的全部使用 on()
方法。
不推荐
$first.click(function(){$first.css('border', '1px solid red');$first.css('color', 'blue'); }); $first.hover(function(){$first.css('border', '1px solid red'); });
推荐
$first.on('click', function(){$first.css('border', '1px solid red');$first.css('color', 'blue'); }); $first.on('hover', function(){$first.css('border', '1px solid red'); });
精简 jquery
一般来说,最好尽可能合并属性。
不推荐
$first.click(function(){$first.css('border', '1px solid red');$first.css('color', 'blue'); });
推荐
$first.on('click', function(){$first.css({'border':'1px solid red','color':'blue'}); });
链式操作
jquery 能够很轻易的实现链式操作。
不推荐
$second.html(value); $second.on('click', function(){alert('hello everybody'); }); $second.fadeIn('slow'); $second.animate({height: '120px'}, 500);
推荐
$second.html(value).on('click', function(){alert('hello everybody'); }).fadeIn('slow').animate({height: '120px'}, 500);
维持代码的可读性
伴随着精简代码和使用链式的同时,可能带来代码的难以阅读。添加缩进和换行能起到很好的效果。
不推荐
$second.html(value).on('click', function(){alert('hello everybody'); }).fadeIn('slow').animate({height: '120px'}, 500);
推荐
$second.html(value).on('click', function() {alert('hello everybody');}).fadeIn('slow').animate({height: '120px'}, 500);
选择短路求值
短路求值是一个从左到右求值的表达式,用 &&
或 ||
操作符。
不推荐
function initVar($myVar) {if (!$myVar) {$myVar = $('#selector');} }
推荐
function initVar($myVar) {$myVar = $myVar || $('#selector'); }
避免通用选择符
不推荐
$('.container > *');
推荐
$('.container').children();
缓存父元素
正如前面所提到的,DOM 遍历是一项昂贵的操作。典型做法是缓存父元素并在选择子元素时重用这些缓存元素。
不推荐
var $container = $('#container'),$containerLi = $('#container li'),$containerLiSpan = $('#container li span');
推荐
var $container = $('#container '),$containerLi = $container.find('li'),$containerLiSpan= $containerLi.find('span');
避免隐式通用选择符
通用选择符有时是隐式的,不容易发现。
不推荐
$(':button');
推荐
$('input:button');
优化选择符
例如,id 选择符应该是唯一的,所以没有必要添加额外的选择符。
不推荐
$('div#myid'); $('div#footer a.myLink');
推荐
$('#myid'); $('#footer .myLink');
避免多个 id 选择符
在此强调,id 选择符应该是唯一的,不需要添加额外的选择符,更不需要多个后代 id 选择符。
不推荐
$('#outer #inner');
推荐
$('#inner');
熟记技巧
你可能对使用 jquery 中的方法缺少经验,一定要多查看文档,可能会有一个更好或更快的方法来使用它。
不推荐
$('#id').data(key, value);
推荐
$.data('#id', key, value);
坚持最新版本
新版本通常更好:更轻量级,更高效。当然你需要考虑你要支持的代码的兼容性。例如,2.0 版本不支持 ie 6/7/8。
摒弃弃用方法
关注每个新版本的废弃方法是非常重要的并尽量避免使用这些方法。
不推荐
$('#stuff').live('click', function() {console.log('hooray'); });
推荐
$('#stuff').on('click', function() {console.log('hooray'); });
利用 CDN
CDN 能保证选择离用户最近的缓存并迅速响应。(推荐 jquery 官网提供的 CDN)。
必要时组合 jquery 和 javascript 原生代码
如上所述,jquery 就是 javascript,这意味着用 jquery 能做的事情,同样可以用原生代码来做。原生代码的可读性和可维护性可能不如 jquery,而且代码更长。但也意味着更高效(通常更接近底层代码可读性越差,性能越高)。牢记没有任何框架能比原生代码更小,更轻,更高效。
参考文献
- http://www.css88.com/archives/5240
【规范】前端编码规范——jquery 规范相关推荐
- 前端编码规范,个人感觉bootstrap总结的不错,拿出来给大家分享
前端编码规范,个人感觉bootstrap总结的不错,拿出来给大家分享 http://codeguide.bootcss.com/#html-doctype HTML 语法 HTML5 doctype ...
- 前端编码规范之JavaScript
上次浅谈了下关于CSS的编码规范,大部分童鞋持赞同意见,仍存在一些童鞋不太理解这些规范的意义. 如果是个人或者小作坊开发,其实这些所谓的编码规范也没啥意思,因为大家写好的代码直接就给扔到网上去了,很少 ...
- web项目开发 之 前端规范 --- CSS编码规范
此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范 文档.供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力. 转载请注明出处:JS前端实用开 ...
- web项目开发 之 前端规范 --- HTML编码规范
此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范文 档.供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力. 转载请注明出处,JS前端实用开 ...
- 前端工程化实践 - 代码规范 提交规范 构建流程 Monorepo(附 React Native 案例)
前端工程化实践 - 代码规范 & 提交规范 & 构建流程 & Monorepo 前言 仓库策略 Multirepo 什么是 Multirepo? Multirepo 的优点 M ...
- h5 默认为移动端页面_20条移动前端H5页面开发规范,h5开发必看文档
这是根据腾讯最新公布的<移动页面用户行为报告>来给大家分享的关于移动端H5页面开发一些20条规范和准则.里面大概包含了16种用户操作习惯和注意点. 下面25学堂跟大家先分享一张关于2016 ...
- 前端规范 - 前端项目开发规范
0 前言 好好做业务,提高自己的工程能力 [强制] 1 开启eslint 根据团队的习惯,制定适合自己的rules 比如 no-console no-debugger可以关闭 [强制] 2 新项目使用 ...
- 第四章 android 命名规范和编码规范
书里面讲的比较常见,单个人也是有不同的观点: 因为android绝大部分使用java开发的,因此java相关规范适用于android: Google Style: 英文地址:http://google ...
- html 项目 目录架构,前端项目目录结构规范.pdf
前端项目目录结构规范 前前端端项项目目目目录录结结构构规规范范 简简介介 该文档主要的设计 目标是项 目开发的目录结构保持一致,使容易理解并方 构建与管理. 要要求求 在本文档中,使用的关键字会以中文 ...
- 简单叙述python的编程规范_简明 Python 编程规范
注:之前发布一篇<简明 Python 编程规范>(见:http://blog.csdn.net/lanphaday/article/details/2834883),本是我给当时所在的公司 ...
最新文章
- php解析ip列表并入库
- springboot2自定义HttpTraceRepository
- html5 规定input域,html5中关于input用法
- [转]Cocos2d-x观察者模式
- HDU - 4300 Clairewd’s message(扩展KMP)
- SAP S/4HANA系统Fiori UI上Adapt UI按钮显示与否的控制逻辑
- java开发属于后端吗,值得一读!
- MySQL基础之 标准模式通配符
- iOS11以后启动图尺寸
- 转移印花技术基础知识及应用方法
- 阿里OSS对象存储,实现图片上传代码;
- MDT批量部署服务搭建
- UI设计,扁平化还是拟物化?
- codeforces 1520E Arranging The Sheep
- Ribbon负载均衡原理,源码解读
- [LaTeX] 调整参考文献的格式(References),包括作者名缩写,行距,字体,引用顺序等等
- 计算机系统使用寿命,笔记本电脑的使用寿命是多久,你了解吗?
- linux下的挂载点和分区是什么关系(详解挂载点)
- bandgap电路设计与仿真
- 高级程序猿是如何练成的
热门文章
- python简单代码画图-Python科学画图代码分享
- python学习书籍推荐-强烈推荐:Python学习必看书籍-带你高效学习
- python写程序求1-3+5-7+...-99+101的值-python基本练习
- lua学习笔记之编译、运行及错误
- LeetCode Contains Duplicate III(滑动窗口)
- You can Solve a Geometry Problem too(线段相交问题)
- Hadoop on Mac with IntelliJ IDEA - 3 解决MRUnit - No applicable class implementing Serialization问题...
- python pip安装模块失败的原因
- 安装java时,配置环境变量classpath的作用
- 使用JAVA数组实现顺序表