【规范】前端编码规范——jquery 规范
2017-02-13 16:39
447 查看
使用单引号
不推荐$("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 规范
- 前端开发规范之jQuery编码规范
- 前端开发规范之jQuery编码规范
- 前端编码规范之Javascript
- 网易前端JavaScript编码规范
- 前端编码风格规范(3)—— JavaScript 规范
- 【规范】前端编码规范——注释规范
- 【规范】前端编码规范——css 规范
- 网易邮箱前端技术分享之javascript编码规范(二)类规范
- 【规范】前端编码规范——一般规范
- Web前端开发规范文档你需要知道的事(转自www.jqueryba.com)
- 前端编码规范文档
- 前端编码规范之CSS
- 【前端】#001 编码规范
- 网易邮箱前端JavaScript编码规范
- 前端编码风格规范之 JavaScript 规范
- 【规范】前端编码规范——css 规范
- 前端编码规范之CSS
- 前端读者 | 百度前端编码规范(HTML)
- 网易邮箱前端技术分享之javascript编码规范(二)类规范