Web 前端最佳实践
前端
选择器
- 尽量使用ID选择器
- 基于Id的选择器:先使用ID选择器定位,然后再使用find方法精确查找
// Fast:
$( "#container div.robotarm" );
// Super-fast:
$( "#container" ).find( "div.robotarm" );
- 指定选择的上下文
// 劣质的代码:因为需要遍历整个DOM来找到.class
$('.class');
// 高品代码:因为只需在指定容器范围内进行查找
$('.class', '#class-container');
这一条是否有上一条等同?
- 多级查找:右边尽量指定得详细点而左边则尽量简单点
// Unoptimized:
$( "div.data .gonzalez" );
// Optimized:
$( ".data td.gonzalez" );
- 避免冗余
$( ".data table.attendees td.gonzalez" );
// Better: Drop the middle if possible.
$( ".data td.gonzalez" );
- 不要ID与其它选择器混搭
ID已经表示唯一了,再加上其它选择符只会加重选择器的负担
$('#outer #inner'); // 脏
$('div#inner'); // 乱
$('.outer-container #inner'); // 差
$('#inner'); // 干净利落,后台只需调用document.getElementById()
- 不要使用万能选择器
$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.
$( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better.
Dom 操作
避免DOM节点频繁流化
样本代码
$.each( myArray, function( i, item ) {
var newListItem = "<li>" + item + "</li>";
$( "#ballers" ).append( newListItem );
});
方法一: 临时detach
var ballers = $("#ballers");
var parent = ballers.parent();
ballers.detach();
$.each(myArray, function(i, item) {
var newListItem = "<li>" + item + "</li>";
ballers.append(newListItem);
});
parent.append(ballers);
var table = $( "#myTable" );
var parent = table.parent();
table.detach();
// ... add lots and lots of rows to table
parent.append( table );
方法二:创建临时DOM节点
var frag = document.createDocumentFragment();
$.each( myArray, function( i, item ) {
var newListItem = document.createElement( "li" );
var itemText = document.createTextNode( item );
newListItem.appendChild( itemText );
frag.appendChild( newListItem );
});
$( "#ballers" )[ 0 ].appendChild( frag );
方法三:append html
var myHtml = "";
$.each( myArray, function( i, item ) {
myHtml += "<li>" + item + "</li>";
});
$( "#ballers" ).html( myHtml );
临时改变多个节点样式
// Fine for up to 20 elements, slow after that:
$( "a.swedberg" ).css( "color", "#0769ad" );
// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
.appendTo( "head" );
//预定义css类会更好
// .swedberg_color{color:#0769ad}
$( "a.swedberg" ).addClass("swedberg_color" );
CSS
JS 编码
代码组织
链式写法要换行
$("#myLink")
.addClass("bold")
.on("click", myClickHandler)
.on("mouseover", myMouseOverHandler)
.show();
链式写法中避免使用匿名函数,否则会严重影响代码易读性
使用变量保存选择器结果方便重用
//bad
$("#myLink").addClass("bold");
//stuff
$("#myLink").on("click", myClickHandler)
//better
var myLink=$("#myLink").addClass("bold");
//stuff
myLink.on("click", myClickHandler)
利用闭包保持代码整洁
//bad
var privateThing = "secret";
var publicThing = "not secret";
var changePrivateThing = function() {
privateThing = "super secret";
};
var sayPrivateThing = function() {
console.log( privateThing );
changePrivateThing();
};
sayPrivateThing();
//better
var feature = (function() {
// Private variables and functions
var privateThing = "secret";
var publicThing = "not secret";
var changePrivateThing = function() {
privateThing = "super secret";
};
var sayPrivateThing = function() {
console.log( privateThing );
changePrivateThing();
};
// Public API
return {
publicThing: publicThing,
sayPrivateThing: sayPrivateThing
};
})();
feature.sayPrivateThing();
- 利用“事件冒泡”机制进行事件绑定
//bad
$('ul>li').on('click',clientHandler);
//better
$('ul').on('click','li',clientHandler);
- 数组循环中不要每次循环都访问数组的长度,应该先缓存长度
//好的写法
var myLength = myArray.length;
for ( var i = 0; i < myLength; i++ ) {
// do stuff
}
//好的写法
for ( var i = 0,myLength=myArray.length; i < myLength; i++ ) {
// do stuff
}
//差的写法
for ( var i = 0; i < myArray.length; i++ ) {
// do stuff
}
- 其它
//bad
// 糟糕:调用了三次attr
$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external");
//better
// 不错,只调用了一次attr,css函数与此类似
$myLink.attr({
href: "#",
title: "my link",
rel: "external"
});
参考
Web 前端最佳实践的更多相关文章
- ASP.NET Core Web API 最佳实践指南
原文地址: ASP.NET-Core-Web-API-Best-Practices-Guide 介绍 当我们编写一个项目的时候,我们的主要目标是使它能如期运行,并尽可能地满足所有用户需求. 但是,你难 ...
- JavaScript Web 应用最佳实践分析
[编者按]本文作者为 Mathias Schäfer,旨在回顾在客户端大量使用JavaScript 的最佳 Web应用实践.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 对笔者来说,Jav ...
- 8102 年的现代 Web 开发最佳实践(笑)
简评:8102 年了,现在 web 开发的最佳实践是什么,让本文来告诉你.原文只提到一部分,可以查看 reddit 上对此文的评论查看补充的最佳实践 https://old.reddit.com/r/ ...
- [转]ASP.NET Core Web API 最佳实践指南
原文地址: ASP.NET-Core-Web-API-Best-Practices-Guide 转自 介绍# 当我们编写一个项目的时候,我们的主要目标是使它能如期运行,并尽可能地满足所有用户需求. 但 ...
- 前端最佳实践——DOM操作
1.浏览器渲染原理 在讲DOM操作的最佳性能实践之前,先介绍下浏览器的基本渲染原理. 分为以下四个步骤: 解析HTML(HTML Parser) 构建DOM树(DOM Tree) 渲染树构建(Rend ...
- 基于springboot的web项目最佳实践
springboot 可以说是现在做javaweb开发最火的技术,我在基于springboot搭建项目的过程中,踩过不少坑,发现整合框架时并非仅仅引入starter 那么简单. 要做到简单,易用,扩展 ...
- WEB开发最佳实践
linux命令 man ls:显示ls的命令详情,man命令可以查具体的命令详情
- WEB前端工程师(实践)制作天气预报难度:简单
需要准备:jQuery Bootstrap 天气预报API(本文中使用API可能会失效请灵活运用) CSS样式可以你自己去写这里只提出jQuery 请求数据和解析JSON数据 { "resu ...
- web前端开发最佳实践笔记
一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...
随机推荐
- hdu 4941 Magical Forest ( 双重map )
题目链接 题意: 有一个n*m的田地,里边有k棵树,每棵树的位置为(xi,yi),含有能量值ci.之后又q个询问,分三种; 1)1 a b,将a行和b行交换 2)2 a b,将a列和b列交换 3)3 ...
- topcoder srm 628 div2 250 500
做了一道题,对了,但是还是掉分了. 第二道题也做了,但是没有交上,不知道对错. 后来交上以后发现少判断了一个条件,改过之后就对了. 第一道题爆搜的,有点麻烦了,其实几行代码就行. 250贴代码: #i ...
- moment 和ko 绑定msdate格式的日期值(静态text)
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- uva12716GCD XOR
筛法,打表. 通过打表可知,但gcd(a,b)==a xor b时,a xor b = a-b. 就是求满足 c = a-b且c = a xor b 的c的个数. #include<cstdio ...
- jquery获取div距离顶部的距离
获取元素到页面顶部距离的语句为: 1.jquery写法:$(“#divID”).offset().top //推荐 $("#vertical").position().top 2. ...
- VB程序逆向反汇编常见的函数
VB程序逆向常用的函数 1) 数据类型转换: a) __vbaI2Str 将一个字符串转为8 位(1个字节)的数值形式(范围在 0 至 255 之间) 或2 个字节的数值形式(范围在 -32,7 ...
- Brew 编译mod错误Error: L6265E: Non-RWPI Section libspace.o(.bss) cannot be assigned to PI Exec region ER_ZI
Error: L6265E: Non-RWPI Section libspace.o(.bss) cannot be assigned to PI Exec region ER_ZI.: Error: ...
- 【转】setTag()/getTag()
原文网址:http://www.cnblogs.com/topcoderliu/archive/2011/06/07/2074419.html View中的setTag(Onbect)表示给View添 ...
- 一、oracle 高水位线详解
一.什么是水线(High Water Mark)? 所有的oracle段(segments,在此,为了理解方便,建议把segment作为表的一个同义词) 都有一个在段内容纳数据的上限,我们把这个上限称 ...
- Meta标签详解(转)
引言 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中登录自己的个人网站 ● 在知名网站加入你个 ...