Cet article est long, mais il est vraiment plein de contenu utile. Il décrit certaines spécifications et suggestions d'utilisation de HTML, JavaScript, CSS et jQuery. Les développeurs front-end peuvent lire attentivement cet article et comparer leurs habitudes habituelles pour voir s'il y a des améliorations possibles...
HTML
C'est quoi le problème, DOCTYPE ?
Ne pas définir de DOCTYPE est un crime punissable de mort. Vous avez peut-être déjà utilisé le DOCTYPE suivant, mais vous devez savoir qu'un code plus concis et plus clair l'a désormais remplacé.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Idéalement, utilisez le DOCTYPE HTML5. Tous les navigateurs modernes le prennent en charge, et même les navigateurs qui ne prennent pas en charge HTML5, comme IE6 et IE7, passeront en mode standards grâce à lui. VoirSource。
<!DOCTYPE html>
Écrivez un balisage valide et sémantiquement clair
Écrire du code de site web avec un HTML propre et sémantiquement clair est quelque chose que nous avons toujours recherché. Parfois, nous constatons que la façon dont les personnes précédentes ont configuré les pages nous limite, ou parfois nous écrivons des modèles d'e-mail au format HTML. Mais ne vous écartez jamais des normes HTML, même pour résoudre un bug de compatibilité spécifique à un navigateur.
Tous les titres doivent commencer à partir de<h2>et être créés hiérarchiquement. Les paragraphes de texte doivent toujours être placés dans des balises<p>, et ainsi de suite. Si vous écrivez du HTML avec une sémantique claire, les pages résultantes seront plus propres, plus concises et plus faciles à analyser pour les robots des moteurs de recherche. C'est la correction SEO la plus simple que vous puissiez faire.
Regardez les paragraphes suivants. Lequel trouvez-vous plus propre ? Celui-ci ?
<span class="sectionHeading">A Heading</span> <br /> <br /> Lorem ipsum dolor sit amet. ... <br /> <br />
Ou celui-ci ?
<h2>A Heading</h2>
<p>
Lorem ipsum dolor sit amet. ...
</p>
Gestion des clics du bouton central de la souris
L'un des défauts d'utilisabilité les plus frustrants dans les applications web modernes est l'altération de la fonctionnalité des hyperliens. Certains éléments qui ressemblent à des hyperliens peuvent avoir leur fonctionnalité de clic associée via JavaScript, ce qui casse les clics du bouton central de la souris (ouverture de la page du lien dans un nouvel onglet). Même s'ils peuvent s'ouvrir dans un nouvel onglet, ils ne comportent qu'un#href, qui vous ramène à la même page.
Un site web moderne populaire qui illustre parfaitement ce problème est Twitter. Dans toute son application, un clic central sur un nom d'utilisateur ou un avatar donne des résultats complètement différents.
<!-- 旧的方式，破坏网页语义 --> <a href="../index.html"></a> <!-- 如果鼠标点击不能产生一个页面，那就不是超链接 --> <span class="link" role="link"></span>
Une autre alternative consiste à utiliser des#chemins guidés, qui associent les URL ordinaires à des#liens guidés, puis à récupérer des fragments de page via AJAX. Les bibliothèques qui fournissent cette fonctionnalité devraient pouvoir afficher la page normalement lors d'un clic du milieu, ou charger le contenu de la page dans une zone désignée lors d'un clic gauche. Toutefois, procédez avec prudence ; beaucoup de gens pensent queLes liens # cassent les applications web。
Utilisez les Microformats pour représenter les informations de contact
Les Microformats sont un moyen de rendre les informations de contact lisibles par machine. La classe hCard (et non vCard) sert à définir le type de contenu contenu dans un élément. Ce contenu peut être extrait et mis en évidence par les navigateurs.
<span class="tel">
<span class="type">home</span>:
<span class="value">+1.415.555.1212</span>
</span>
Si vous avez déjà navigué sur une page web qui utilise ce format, vous remarquerez que des programmes comme Skype peuvent facilement détecter quels numéros de la page sont des numéros de téléphone. Safari sur les appareils iOS peut faire quelque chose de similaire.
Pour plus d'informations sur les Microformats, consultezhttp://microformats.org/wiki/hcard
Les images ont besoin d'un texte 'Alt'
<img>La balise a besoin d'un textealtafin de vérifier et de respecter les exigences de lisibilité. Dans l'attributalt, le texte doit pouvoir décrire ce que l'image affiche ou l'effet qu'elle est censée produire, sauf si l'image n'est pas importante.
Si l'image n'est qu'une puce dans une liste ou une autre icône insignifiante, il est préférable de donner à l'attributaltune chaîne vide, mais de la conserver tout de même. Ainsi, les lecteurs d'écran l'ignoreront plutôt que de lire « puce » 20 fois de suite.
<img src="dog.gif.html" alt="Fido and I at the park!" /> <!-- 很好，描述清晰 --> <img src="bullet.gif.html" alt="bullet" /> <!-- 不好，显得多余 --> <img src="bullet.gif.html" alt="" /> <!-- 好 -->
Utilisez les balises de tableau uniquement pour les données tabulaires
La balise table ne doit être utilisée que pour afficher des données tabulaires. La seule exception est lors de la rédaction d'e-mails au format HTML, où table peut être la seule méthode de mise en page prise en charge par certains clients de messagerie problématiques.
Pour la lisibilité, les en-têtes de tableau doivent toujours utiliser des éléments<th>. N'oubliez pas non plus de définircellpadding, cellspacingetborderla valeur de ... à0, car ces styles sont plus faciles à garder cohérents lorsqu'ils sont contrôlés par CSS.
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>
Cell Header
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Cell Item
</td>
</tr>
</tbody>
</table>
Utilisez jQuery et les widgets jQuery UI
jQuery et jQuery UI sont conçus pour se comporter de manière presque identique en termes d'apparence et de fonctionnalités sur différents navigateurs. jQuery UI est conçu pour être conforme à WAI WCAG 2.0 et WAI ARIA, donc adopter ce framework peut éviter toutes les incertitudes liées aux plugins ou scripts exécutés sur votre site.
JavaScript
Espacement et formatage du code
Toute discussion sur le formatage du code, les espaces blancs et le placement des accolades peut déclencher des débats enflammés. La règle la plus simple ici, je pense, est : à moins que vous ne soyez prêt à reformater tout le fichier de code, respectez et maintenez le format du fichier de code existant. Cela signifie que si vous voyez des accolades dans un fichier JS écrites sans saut de ligne, votre code doit également conserver les accolades sans sauts de ligne. Si votre code n'est pas cohérent avec le reste du fichier de code, alors votre code ne devrait pas passer le processus de revue de code.
Un formatage de code cohérent rend le code plus lisible et signifie aussi qu'il est facile à modifier avec les commandes rechercher/remplacer. Heureusement, les habitudes de programmation que nous avons formées sont très similaires au style jQuery officiellement recommandé. Il y a des différences mineures, mais ce sont des questions personnelles ou des choses que nous estimons non maintenables. VoirGuide de style de jQuery Core
Espacement des caractères
// 不好
if(blah==="foo"){
foo("bar");
}
// 好 :)
if (blah === "foo") {
foo("bar");
}
Ne pas mettre les accolades sur une nouvelle ligne
// 不好
if (foo)
{
bar();
}
// 好 :)
if (foo) {
bar();
}
Toujours utiliser des accolades
// 不好
if (foo)
bar();
// 好 :)
if (foo) {
bar();
}
Gestion des chaînes de caractères
Toujours utiliser des guillemets doubles pour les chaînes entre guillemets. Certaines personnes aiment vraiment les chaînes de style C (guillemets simples), mais cette habitude peut causer des conflits de style dans les scripts. La gestion des chaînes de style C exige que les chaînes vides et les caractères uniques soient entourés de guillemets simples, tandis que les phrases et les mots doivent être entourés de guillemets doubles.
Commentaires
Le besoin d'ajouter des commentaires au code à tout va est dicté par les managers, les superviseurs et d'autres personnes qui touchent rarement au code. Ce besoin n'est rien de plus qu'une case à cocher dans les indicateurs de performance des employés, et le temps qui y est consacré n'apporte presque aucun retour. Si ces développeurs réceptifs pouvaient suivre les suggestions de ce document, leur code deviendrait tout à fait lisible et évident, à tel point que décrire le code avec des commentaires serait d'une redondance gênante. Regardez l'exemple suivant. Ici, la variable booléenne est posée comme une question, et la fonction a un nom intuitif.
if (user.hasPermission) {
editPage();
}
Au moins dans ce scénario, les commentaires sont totalement inutiles.
Cas où les commentaires sont importants
Dans un projet, il y aura toujours certaines parties difficiles à rechercher et à comprendre. Par exemple, une expression régulière complexe, ou une fonction mathématique qui calcule des angles ou bascule entre degrés et radians. Sans commentaires au-dessus, les lecteurs débutants ou intermédiaires n'auront aucune idée de ce que signifie le script.
// 校验美国电话号码的正则表达式，号码格式是 (XXX) XXX-XXXX (减号、空格和括号都是可选的，可以有也可以没有)
var phoneRegEx = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
Utilisez toujours l'opérateur de comparaison ===
Utiliser l'opérateur de comparaison == peut faire disparaître comme par enchantement des bugs frustrants. Il permet ... dansJavaScript GardenLe typage faible y est clairement expliqué. Utiliser l'opérateur de comparaison strict === n'effectue pas de conversion de type, ce qui permet une évaluation stricte des différences entre deux objets. Là encore, pour plus de détails, voirJavaScript Garden。
var zeroAsAString = "0";
if (zeroAsAString == 0) {
// 这样也能判断为true，呵呵...
}
if (zeroAsAString === 0) {
// 判断为false
}
Exception
Lorsqu'on compare avec null, l'opérateur == est acceptable, car il vérifie à la fois null et undefined. Si vous ne comprenez pas parfaitement ce principe, je recommande tout de même d'utiliser plutôt ===.
var foo = null;
// foo 是 null, 但 bar 是 undefined ，因为它尚未被声明
if (foo == null && bar == null) {
// 上面的判断还是成立的
}
Lorsque vous utilisez .parseInt(), spécifiez toujours le deuxième paramètre 'radix'
Lorsqu'on analyse une chaîne pour la convertir en entier, une bonne habitude consiste à spécifier le deuxième paramètre radix -- il détermine dans quelle base la chaîne est convertie. Lorsque la chaîne est préfixée par0au début, cela déclenche par défaut la16base comme radix.10Cette base. Merci à João Moreno d'avoir documenté ceterratum.。
alert( parseInt("08") ); // alerts: 2
alert( parseInt("08", 10) ); // alerts: 8
Éviter de comparer true et false
Il est inutile de comparer directement les valeurs true et false. Parfois, être explicite peut être bénéfique, mais cela reste du code supplémentaire.
if (foo === true) {
// 用了 === 倒是不错，可这是多余的
}
if (foo) {
// 赞！
}
if (!bar) {
// 反过来也赞
}
Éviter de polluer l'espace de noms global
La dépendance excessive aux variables globales est une chose dont tout le monde dans notre équipe -- en particulier moi-même -- se sent particulièrement coupable. La discussion sur les raisons pour lesquelles les variables globales sont mauvaises est assez simple : cela augmente la probabilité de conflits entre scripts et variables, et les fichiers sources ainsi que l'espace de noms lui-même se remplissent d'innombrables variables aux noms ambigus.
Douglas CrockfordJe crois fermement que la qualité du code d'une application JavaScript peut être mesurée par le nombre de variables globales qu'elle utilise ; moins il y en a, mieux c'est. Comme tout ne peut pas être défini comme local (même si, pour être honnête, celle que vous envisagez en ce moment peut l'être, alors ne soyez pas paresseux), vous devez trouver des moyens d'organiser vos variables pour éviter les conflits et minimiser l'encombrement de l'espace de noms. L'approche la plus simple consiste à utiliser une seule variable ou à minimiser le nombre de modules qui utilisent ces variables globales. Crockford a mentionné que YUI n'utilise qu'une seule variable globale, YAHOO. Dans son billet de blog"Global Domination"il aborde des questions plus détaillées.
Considérez cette situation : pour les petites applications web, les variables globales sont souvent utilisées pour stocker des paramètres au niveau de l'application. Vous pouvez définir un objet en utilisant le nom de votre projet ou « settings » comme nom, ce qui est généralement préférable.
// 被污染的全局命名空间
var settingA = true;
var settingB = false;
var settingC = "test";
// 用 settings 作为对象命名
var settings = {
settingA: true,
settingB: false,
settingC: "test"
}
Cependant, si nous pouvons réduire la probabilité de conflits en évitant les variables globales, mais que nous normalisons les espaces de noms vers la même chose, cela n'augmenterait-il pas la probabilité de conflits entre applications ? Eh bien, cette inquiétude est en effet valide. Par conséquent, il est recommandé d'utiliser le nom spécifique de votre propre application comme espace de noms de variables globales, ou d'utiliser la même méthode que celle de jQuery :$.noConflict()modèle pour réaffecter votre espace de noms.
var myAppName = {
settings: {
settingA: true
}
}
//访问全局变量
myAppName.settings.settingA; // true
Utiliser la nomenclature camelCase pour les variables
Le nommage CamelCase pour les variables JavaScript est la norme dans la plupart des environnements de programmation. Un lecteur a fait remarquer dans les commentaires la seule exception : utilisez des lettres majuscules et des traits de soulignement pour désigner les constantes.
var X_Position = obj.scrollLeft; var xPosition = obj.scrollLeft; // 更好，更简洁 SCENE_GRAVITY = 1; // 常量
Performance des boucles - mettre en cache la longueur du tableau
Les boucles sont probablement l'élément le plus important de l'optimisation des performances JavaScript. Économiser une ou deux millisecondes à l'intérieur d'une boucle peut représenter plusieurs secondes au total. Une astuce ici consiste à mettre en cache la longueur du tableau, afin que, dans la boucle, vous n'ayez pas besoin de la calculer à chaque itération.
var toLoop = new Array(1000);
for (var i = 0; i < toLoop.length; i++) {
// 败家玩意 - 长度会反复算 1000 次你知道不？
}
for (var i = 0, len = toLoop.length; i < len; i++) {
// 会过日子 - 长度只计算一次，然后缓存了
}
Exception
Si vous parcourez un tableau en boucle pour trouver et supprimer un élément, cela modifie la longueur du tableau. Chaque fois que vous ajoutez ou supprimez des éléments à l'intérieur d'une boucle pour modifier la longueur du tableau, vous cherchez les ennuis. Dans ce cas, vous devriez soit réinitialiser la longueur du tableau après chaque modification, soit simplement ne pas la mettre en cache.
Performance des boucles - utiliser 'break;' et 'continue;'
La possibilité de sauter et de sortir des boucles est très utile pour éviter des cycles de boucle coûteux.
Si vous effectuez une recherche à l'intérieur d'une boucle, que faites-vous après une recherche réussie ? Par exemple, dans une boucle de 1000 éléments, vous trouvez ce que vous cherchez à mi-parcours. Laissez-vous, quoi qu'il arrive, la boucle continuer à itérer sur les 500 éléments restants alors que vous savez que les instructions if suivantes n'auront aucune chance de correspondre ? Non ! Vous devriez absolument sortir de la boucle !
var bigArray = new Array(1000);
for (var i = 0, len = bigArray.length; i < len; i++) {
if (i === 500) {
break;
}
console.log(i); // 这样只会输出 0 - 499
}
Un autre problème est de sauter une itération particulière, puis de poursuivre la boucle. Bien que des conditions comme impair/pair puissent être gérées eni++remplaçant pari + 2comme moyen de gestion. Certaines conditions doivent encore être détectées spécifiquement, puis déclencher une opération de saut. Tout ce qui permet d'éviter d'exécuter le processus d'itération complet est très utile.
var bigArray = new Array(1000);
for (var i = 0, len = bigArray.length; i < len; i++) {
if (condition) {
continue;
}
doCostlyStuff();
}
Ne passez pas trop d'arguments dans les appels de fonction
Pour la lisibilité, ne serait-ce que pour cela, l'approche suivante est terrible :
function greet(name, language, age, gender, hairColour, eyeColour) {
alert(name);
}
L'exemple suivant construit un objet à l'avance comme argument, ou passe un objet en ligne, ce qui est bien mieux.
function greet(user) {
alert(user.name);
}
greet({
name: "Bob",
gender: "male"
});
Associer 'this' à 'self'
Lorsque vous écrivez du code JavaScript orienté objet (OO), vous devez comprendre la portée dethis. Peu importe le modèle de conception que vous utilisez pour construire des pseudo-classes, la référence àthisest le moyen le plus simple de pointer vers une instance. Lorsque vous commencez à intégrer les méthodes utilitaires jQuery à vos pseudo-classes, vous remarquerezthisle changement de portée.
Bob.findFriend("Barry");
Person.prototype.findFriend = function(toFind) {
// this = Bob
$(this.friends).each(function() {
// this = Bob.friends[i]
if (this.name === toFind) {
// this = Barry
return this;
}
});
}
Dans l'exemple ci-dessus,thisil passe d'une référence àBobà une référence à son amiBarryle processus de référencement.thisComprendre l'évolution de la valeur dethisau fil du temps est important. À l'intérieur d'une fonction prototype,Bobil pointe vers l'instance actuelle de la pseudo-classe à laquelle il appartient (ici$.each()boucle,thisil sera réaffecté auie élément du tableau en cours d'analyse.
La solution consiste àthisremapper la valeur deselfou_self.self(sans le trait de soulignement) n'est pasun mot réservé,c'est en fait windowune propriété de l'objet.selfL'exemple est tiré du code source de jQuery, mais ils ont aussi reconnu cette erreur et prévoient decorriger la situation actuelle,_selfc'est-à-dire de passer àself.selfPersonnellement, je préfère encore utiliser
, pour aucune autre raison que sa simplicité -- mais cela peut faire apparaître des bugs très déroutants. En bref, utiliser$.each()est risqué ; à utiliser avec prudence.thisDans l'exemple suivant, je vais mieux utiliser le
Bob.findFriend("Barry");
Person.prototype.findFriend = function(toFind) {
// 就这一次用到了 "this"
var _self = this;
$(_self.friends).each(function(i,item) {
if (item.name === toFind) {
return item;
}
});
}
Puis-je utiliser Boolean ?
la valeur.est, peutPuis-je utiliser Boolean ?aLes variables booléennes doivent être facilement identifiables par leurs noms. Vous pouvez utiliser des préfixes comme
isEditing = true; obj.canEdit = true; user.hasPermission = true;
Minimisez les repaints et reflows
comme préfixe pour former une question.Minimisez les repaints et reflowsLes repaints et reflows sont associés au processus de re-rendu du DOM, qui se produit lorsque des propriétés ou des éléments spécifiques sont modifiés. Un repaint est déclenché lorsqu’un élément change d’apparence sans ajuster la mise en page.
Nicole Sullivan, dans un
article de blog complet,
décrit ces changements comme des changements de style tels que des modifications de visibilité ou de couleur d'arrière-plan. Le reflow, en revanche, est une opération plus coûteuse, déclenchée par des changements qui ajustent la mise en page. Par exemple, ajouter ou supprimer des éléments, modifier la largeur ou la hauteur d'un élément, ou même changer la taille de la fenêtre du navigateur. Le pire des cas est que le reflow provoque un effet domino où les nœuds ancêtres, frères et enfants doivent également être reflow.arrSans aucun doute, les repaints et reflows doivent être évités autant que possible, mais comment y parvenir ?
var myList = document.getElementById("myList");
for (var i = 0, len = arr.length; i < len; i++) {
myList.innerHTML += "<li>" + arr[i].title + "</li>"; //重新布局 -- 增加到元素
}
Exemple de reflowforEn fait, le code ci-dessous n'est pas si terrible. Mais supposons d'abord que le tableau
a 10 éléments
var constructedHTML = "";
for (var i = 0, len = arr.length; i < len; i++) {
constructedHTML += "<li>" + arr[i].title + "</li>"; //没有重新布局 - 增加到字符串
}
document.getElementById("myList").innerHTML = constructedHTML; //在这里重新布局
Dans la boucleinnerHTMLci-dessus, chaque itération déclenche un reflow. 10 itérations correspondent à 10 reflows.
Considérons maintenant le code suivant :Dans ce scénario, les éléments à ajouter sont construits dans une chaîne. Aucun reflow ne se produit à l'intérieur de la boucle car le DOM n'a pas changé. Ce n'est que lorsque le tableau a été entièrement parcouru et que la chaîne construite est appliquée à l'objetc'est seulement alors que le seul reflow de la fonction se produit.canvasIl y a des reflows et des repaints qui peuvent être évités ; espérons que vous avez été assez bon pour apprendre ces astuces. Il existe une abondance de documentation sur ce sujet, mais la plupart fera référence à celle de Nicole Sullivan
N'utilisez pas les microsecondes pour générer des identifiants uniques
, ce qui est un excellent point de départ. Outre les leçons présentées ici, il y a d'autres leçons importantes à apprendre en ce qui concerne divers termes techniques de l'ère « web 3.0 » et HTML5. L'analyse ci-dessus s'applique directement à l'écriture de code jQuery. Lorsque l'on bricole avec
var myID = "static" + new Date().getTime();
ces principes sont également importants, et essayez aussi de maintenir la fréquence d'images dans la plage 30-60.
Cela peut causer des bugs difficiles à déboguer avec les méthodes traditionnelles. Comme votre DOM est créé au moment de l'exécution, les tests traditionnels du code source de la page ne peuvent pas détecter les erreurs provenant de multiples ID en double. La gestion des erreurs de JavaScript et jQuery traitera la première correspondance comme l'ID et ignorera les autres ID en double. Donc, cela ne lancera même pas d'erreur JS !
Cela ne fonctionnera pas. La seule vraie façon est de définir des points d'arrêt et de journaliser ligne par ligne, mais si vous placez le point d'arrêt au mauvais endroit, vos valeurs en millisecondes n'entreront plus en collision !
La bonne nouvelle est qu'il existe de nombreuses façons alternatives de générer des ID uniques. Pour être pointilleux, la fonction de nombre aléatoire d'un ordinateur n'est pas vraiment aléatoire, car elle provient encore de l'heure système. Bien que cela mérite d'être noté, la probabilité d'une collision aléatoire est minuscule.
var myID = "static" + Math.round(Math.random() * 10000);
Personnellement, je préfère générer manuellement des GUID. Techniquement parlant, les GUID sont créés en fonction de votre matériel, mais la fonction JavaScript suivante fait plutôt du bon travail. J'ai volé ceci deun post Stack Overflow— c'est une fonction assez pratique.
function S4() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
function guid() {
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}
var myID = "static" + guid();
Détecter les fonctionnalités, pas les types de navigateur
Le navigateur de l'utilisateur prend-il en charge la géolocalisation ? Prend-il en charge les Web Workers ? La vidéo HTML5 ? L'audio HTML5 ? La réponse ressemblait autrefois à ceci :
if ($.browser.msie) {
// 哦，是IE啊，那肯定不支持
}
Mais le monde change vite. La dernière version d'IE peut presque être considérée comme un navigateur moderne, mais elle cause encore des difficultés au développement front-end. Les versions antérieures d'IE étaient pratiquement aussi mauvaises que celles qui les précédaient, ce qui a habitué les programmeurs JavaScript paresseux à détecterif (ie)puis en exécutant une syntaxe cassée propre à Microsoft. Désormais, IE9 a déprécié ces fonctions propriétaires, donc les vieuxif (ie)vestiges finissent plutôt par causer des problèmes.
Alors, que diriez-vous de détecter chaque fonctionnalité sans vérifier l'user-agent (qui est à la fois peu fiable et falsifiable) ?
Si votre réponse est"C'est plutôt fiable", alors vous avez raison.
utilisezModernizrEh bien, c'est une bibliothèque JavaScript co-développée par le maître absolu du secteur, Paul Irish. Elle combine une large applicabilité, une conception légère et une massivedocumentationen un seul, et ne demande aucun effort intellectuel à mettre en œuvre—véritable indispensable pour rester chez soi, voyager et faire taire les gens. Il produit un objetModernizrqui contient les résultats de tous ses tests de détection, ce qui rend la vérification de la prise en charge d'une fonctionnalité aussi simple que dans l'exemple ci-dessous :
// 检测浏览器是否支持canvas的老办法
if (!!document.createElement('canvas').getContext) { ... }
// 用 Modernizr 检测
if (Modernizr.canvas) { ... }
Utilisez des millisecondes lisibles
Une façon pratique d'écrire des nombres en millisecondes est de le faire sous une forme lisible. C'est formidable pour les débutants, mais dans la plupart des cas, ce n'est vraiment qu'un gadget.
// 这是3秒，30秒还是300秒啊？ var timeout = 30000; // 增加了额外的计算开销，但是读和修改会更容易 var timeout = 30 * 1000;
À propos du code jQuery
Enchaînez comme un chien enragé
L'une des meilleures fonctionnalités de jQuery est le chaînage de fonctions. Vous l'avez peut-être un peu utilisé, peut-être en enchaînant des appels simples les uns après les autres... mais avez-vous déjà parcouru le DOM de haut en bas comme un chien enragé ? Prenez le temps de vous familiariser avec la.end()fonction. Elle sera cruciale lorsque vous vous déplacerez dans le DOM depuis votre sélecteur de départ.
$(".quote")
.hide()
.find("a").text("Click here").bind("click",doStuff).end()
.parent().removeClass().addClass("testimonial").draggable().end()
.fadeIn("slow");
Dans l'exemple ci-dessus, chaque fois que nous avons fini de manipuler un objet DOM et devons remonter dans le DOM pour revenir à l'objet d'origine auquel nous faisions référence, nous devons utiliser la.end()function. Ensuite, nous suivons la piste jusqu'à notre emplacement d'origine dans le DOM.
Utiliser les attributs data-*
Ceux d'entre vous qui écrivent du JavaScript (natif, pas jQuery) depuis longtemps connaissent probablement les attributs. Vous trouvez des moyens de les définir, de les obtenir ou d'en abuser.relettitle ...
Ne dites pas qu'HTML5 ou jQuery n'ont pas aidé. La nouvelle spécification permet l'utilisation dudata-préfixe dans les éléments HTML pour indiquer des attributs contenant des données. jQuery fait un excellent travail en convertissant les chaînes spécifiées dans les types de données JavaScript corrects. Créons un élément avec quelques attributs de données.DIV 。
<div id="test" data-is-bool="true" data-some-number="123"></div>
Maintenant, même si nos valeurs sont entourées de guillemets, elles ne seront pas traitées comme des chaînes :
typeof $("#test").data("isBool"); // boolean
typeof $("#test").data("someNumber"); // number
Traitement spécial
Notez que pour que ces extraits de code fonctionnent, les définitions d'attributs (en HTML) doivent utiliser des lettres minuscules. C'est important. Mais si vous êtes un développeur front-end aguerri, vous voudrez quand même utiliser camelCase pour nommer vos variables de données. Comme cela apparaît à de nombreux endroits en JavaScript, le tiret initial signifie que la lettre suivante est soumise à la capitalisation camelCase. Toutefois, utiliser camelCase dans les définitions d'attributs HTML dans l'exemple ci-dessous estnon autorisé, et fera que le JavaScript ci-dessus renvoieundefined。
ne fonctionne pas :(
<div id="test" data-isBool="true" data-someNumber="123"></div>
fonctionne :)
<div id="test" data-is-bool="true" data-some-number="123"></div>
'.stop()' arrête la coopération et l'écoute
Lier les effets d'animation jQuery aux événements de souris est un élément clé de l'interaction utilisateur moderne sur le Web, mais même certains des sites Web les plus célèbres le font mal.Cet articlefournit un exemple direct de mise en œuvre d'animations et montre à quel point ces animations paraissent visuellement discordantes lorsqu'elles sont combinées. Heureusement, ce problème peut être facilement résolu en utilisant un préfixe de fonction ou dans l'appel$.animate, en ajoutant un paramètre pour le résoudre facilement.
Lorsque vous utilisez$.animate, vous pouvez ajouterqueue: falseaux paramètres pour éviter le chaînage. Les raccourcis d'animation tels que$.fadeInou$.slideDownn'acceptent pas les paramètresqueue; vous devez utiliser$.stopcette méthode pour arrêter ces animations à l'avance.clearQueueetjumpToEndliés à ces deux paramètresdocumentation, car pour l'amour du ciel, je ne peux pas vous aider autrement.
$("selector").stop(true,true).fadeOut();
$("selector").animate({
property: value
}, {
duration: 1000,
queue: false
}
Optimisez vos sélecteurs
jQuery est très cool. Il peut presque tout faire, mais il ne peut toujours pas vous préparer du café—j'ai entendu dire que cette fonctionnalité est prévue pour la version 2.0. Une chose à surveiller : ne pas abuser de sonsizzleJSla puissance du moteur de sélection. Pour éviter ce problème, il existe deux stratégies :Mettre en cache les résultats des sélecteursetutiliser des sélecteurs efficaces。
Mettre en cache les résultats des sélecteurs
Devriez-vous effectuer une requête DOM coûteuse chaque fois que vous voulez modifier un petit quelque chose, ou conserver une référence aux éléments ? Le choix est évident.
// before
$(".quote a").bind("click", doStuff); // DOM查询
// now
$(".quote a").addClass("quoteLink"); // DOM查询！！
// later
$(".quote a").fadeIn("slow"); // 又一次DOM查询！！！
Ignorez le chaînage ; c'est mieux :
// before
var $quoteLinks = $(".quote a"); // 只需一次DOM查询
$quoteLinks.bind("click", doStuff);
// now
$quoteLinks.addClass("quoteLink");
// later
$quoteLinks.fadeIn("slow");
Utiliser des sélecteurs efficaces
D'accord, jQuery/SizzleJS peut facilement utiliser les sélecteurs CSS3, mais quel est le coût réel ? Dans ce scénario, le navigateur peut utiliserdocument.querySelector(), mais il peut aussi découper votre chaîne de sélecteur puis interroger manuellement le DOM.
// ID搜索是最快的查询方式，然后它获取孩子节点的列表，匹配其中class为'quotes'的元素
$("#quoteList").children(".quotes");
// 只在预先确定的bar元素下查找'foo'class
$(".foo",bar);
Les boucles 'for' sont toujours plus rapides que les boucles 'each()'
Peu importe ce qui se passera dans le développement des navigateurs au cours des prochaines années, les boucles nativesforseront toujours plus rapides que les boucles$.each()de jQuery. Quand vous réfléchissez à la grande question de ce qu'est réellement jQuery (une bibliothèque qui encapsule des fonctions JS natives), vous commencez à réaliser que le code JavaScript natif sera toujours plus rapide. Utiliser une bibliothèque plutôt que le natif est un compromis entre la vitesse d'exécution et la vitesse de codage.
Il est très important de toujours utiliser des bouclesforpour les fonctions critiques en termes de performances qui peuvent être appelées des centaines de fois par seconde. Par exemple :
- mouvement de la souris
- intervalles de temps
- boucles imbriquées
CSS
Comprendre le modèle de boîte est essentiel
Le "box model" est un facteur critique et décisif pour comprendre comment les navigateurs affichent les pages. Une compréhension complète de sa complexité peut miraculeusement simplifier votre travail. Le modèle de boîte décrit la manière dont les dimensions physiques des éléments HTML sont calculées. Si un élément de bloc a une largeur fixe, disons 100px, comment ses padding, border et margin doivent-ils être déterminés ?
De nombreux sites web proposent des explications approfondies, mais restons simples : dans les navigateurs conformes aux standards, border et padding sont placés à l'extérieur de la largeur spécifiée. Le mieux est de l'expliquer avec un schéma. Par exemple, le code suivant :
.foo {
width: 150px;
height: 150px;
padding: 25px;
border: 25px solid;
margin: 20px;
}
Ce à quoi vous pourriez vous attendre (mode Quirks)
Padding et border sont tous deux calculés vers l'intérieur, maintenant la hauteur et la largeur à 150px.
Ce que vous voyez réellement (mode standards)
Cependant, la largeur et la hauteur réelles résultantes sont de 250px. C'est-à-dire, 150px + (2 * 25) + (2 * 25).
Si vous trouvez ce résultat étrange, vous n'êtes pas seul (enfin, vous êtes une personne, je dis juste que d'autres le pensent aussi). Maintenant, il y a un correctif à portée de main : vous devez introduire une propriété CSS appeléebox-sizing, queIE8 et versions ultérieuresprennent en charge. Elle vous permet de choisir la manière exacte dont les dimensions d'un élément sont calculées, ce qui peut vous éviter des ennuis. Les paramètres pris en charge varient selon le navigateur, et des préfixes vendeurs sont nécessaires. Pour plus de détails, voircaniuse.com 。
/* 旧方法 (178 + 20 + 2 = 200) */
.foo {
width: 178px;
padding: 10px;
border: 1px;
}
/* 更好的方法 */
.foo {
width: 200px;
padding: 10px;
border: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Bien que vous puissiez toujours faire du calcul mental sur les largeurs, en soustrayant des valeurs en pixels par-ci par-là (comme le faisait cette première méthode), lorsque différentes unités de largeur sont impliquées (comme des pourcentages ou des EMs), personne ne peut comprendre quoi faire. Actuellement, à part envelopper les éléments dans un élément parent pour garantir que la largeur etpadding/margin/borderspuissent être complètement séparés, il n'y a pas d'autre solution.
Savoir quand utiliser float et quand utiliser position
L'ère de la mise en page basée sur des tableaux est révolue. Il est maintenant temps d'admettre que nous pouvons nous concentrer sur la compréhension du fonctionnement de float et position. Cela nécessite de maîtriser un modèle mental particulier, et je pense que cela s'apprend mieux par la pratique.
Utiliser float pour sortir des éléments du DOM et les forcer à gauche ou à droite est assez fiable. Ils sont devenus la panacée de l'ère post-mise en page par tableaux dans le développement front-end, peut-être parce que les navigateurs du passé prenaient mal en chargedisplay: inlineetinline-blockil, et à cause des bugs apparus dans la prise en charge de position.z-indexbugs. Mais maintenant, il n'y a vraiment plus d'excuse. inline-block est déjà bien pris en charge, et une simple modification peut le faire fonctionner dans IE7.
Dieu merci, les vieux arguments contre l'utilisation de CSS pour positionner des éléments de manière absolue ont disparu. En théorie, la propriété de positionnement permet de placer des éléments sur la page avec des coordonnées X et Y, une approche simple et directe que les développeurs Flash devraient connaître.
Comprendre le positionnement
Lorsqu'on positionne des éléments avec CSS, il est très important de comprendre un fait : le positionnement est toujours relatif à l'élément parent le plus proche qui possède une propriété de positionnement. Quand les gens commencent à utiliser CSS, il y a une idée fausse courante selon laquelleposition: absolute;il est positionné par rapport à l'élément racine de la page. Je pense que cette idée fausse vient des cas où un élément n'a aucun élément parent avec un style de position -- dans ce cas, leur conclusion est correcte. En remontant l'arbre DOM sans trouver d'élément avec un style de positionnement, il sera positionné par rapport à l'élément racine de la page.
Donc, siposition: absolute;cela sort les éléments du flux dans lequel ils se trouvent, comment positionner un élément par rapport à son parent ? La méthode est simple. L'élément parent doit définirposition: relative;style, puis tous les éléments enfants seront placés dans l'ordre top, right, bottom, left. Avec ces connaissances, comment implémenteriez-vous la mise en page intuitive suivante ?
En utilisantfloat, vous devriez envelopper ces éléments dans un élément parent, puis mettre.onefloat left, puis changer.twoet.threedefloatetmargin. Au final, vous devriez écrire quelque chose comme ceci :
.parent {
/* ghetto clearfix */
width: 310px;
overflow: auto;
}
.one {
width: 200px;
height: 210px;
float: left;
}
.two {
width: 100px;
height: 100px;
float: right;
margin-bottom: 10px;
}
.three {
width: 100px;
height: 100px;
float: right;
}
Comme nous l'avons dit plus tôt, utiliserpositionnous permet d'afficher les éléments à l'écran de manière très explicite, selon des coordonnées X et Y. L'approche float ci-dessus séparera le texte long sur la page, tandis que la méthode suivante garantit que tous les éléments sont dans des positions normales, quel que soit le contenu de la page.
.parent {
position: relative;
width: 310px;
height: 210px;
}
.one, .two, .three {
position: absolute;
}
.one {
top: 0;
left: 0;
width: 200px;
height: 210px;
}
.two {
top: 0;
right: 0;
width: 100px;
height: 100px;
}
.three {
bottom: 0;
right: 0;
width: 100px;
height: 100px;
}
Comme mentionné précédemment, certains problèmes dez-indexdoivent être pris en compte. Bien que l'exemple ci-dessus puisse sembler un peu excessif, une fois que vous commencez à penser au positionnement, cela ouvre un nouveau monde de possibilités.
Espaces blancs
Si nous continuons à alterner entre les formats de paramètres CSS sur une seule ligne et sur plusieurs lignes, les espaces blancs dans CSS différeront également. Je ne vais pas entrer dans trop de détails à ce sujet.
Espaces blancs appropriés
/* 不好 */
.selector {display:none;background:#FF0000;color:#000000;}
/* 好 -- 单行 */
.selector { display: none; background: #FF0000; color: #000000; }
/* 好 -- 多行 */
.selector {
display: none;
background: #FF0000;
color: #000000;
}
Accolades sur la même ligne
.selector {
display: none;
background: #FF0000;
color: #000000;
}
Indenter les éléments enfants
L'utilisation de ceci est une question d'opinion ; personnellement, je n'utiliserais ce format que dans les documents CSS avec des définitions sur une seule ligne.
.selector { display: none; background: #FF0000; color: #000000; }
.selector a { text-decoration: none; }
.selector span { font-weight: bold; }
Regrouper et indenter les propriétés avec préfixes vendeurs
.selector {
background: #FFF; border: 1px solid #000; color: #EAEAEA;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Format abrégé CSS
Regroupement de propriétés
Regrouper les propriétés ensemble est le moyen le plus efficace de réduire considérablement la taille du fichier CSS. Il est très important de comprendre comment les propriétés sont ordonnées (dans le sens des aiguilles d'une montre -- haut, droite, bas, gauche) et comment les raccourcir davantage (haut et bas, gauche et droite).
/* 逐个定义，太长了 */ padding-top: 1px; padding-right: 2px; padding-bottom: 1px; padding-left: 2px; /* 上，右，下，左，好很多 */ padding: 1px 2px 1px 2px; /* 上和下，左和右，最优 */ padding: 1px 2px;
De 0px à héros
Donner une valeur de0à une propriété est redondant. Qu'un élément soit à0pxou à0 éléphantsde la gauche n'a aucune importance ; tant que vous savez qu'il est collé contre la gauche.
/* 不好 */ padding: 0px 10px;
/* 好 */ padding: 0 10px;
Blocs de commentaires
Pour maintenir plusieurs sections de style dans une feuille de style, ajouter des commentaires à de grandes sections de CSS est un excellent moyen. Évidemment, cela fonctionne mieux en combinaison avec un style CSS sur une seule ligne, mais ce n'est pas non plus complètement inutile avec un style CSS sur plusieurs lignes. L'utilisation de tirets, de signes égaux ou de traits de soulignement pour mettre en évidence dans les commentaires est une question d'opinion, mais voici la méthode que je préfère :
/* === HORIZONTAL NAV === */
#horizNav { width: 100%; display: block; }
#horizNav li { display: block; float: left; position: relative; }
#horizNav li a { display: block; height: 30px; text-decoration: none; }
#horizNav li ul { display: none; position: absolute; top: 30; left: 0; }
/* === HOME PAGE - CAROUSEL === */
#carousel { width: 960px; height: 150px; position: relative; }
#carousel img { display: none; }
#carousel .buttons { position: absolute; right: 10px; bottom: 10px; }
Dégagement des flottants
Dégager un<div>signifiait auparavant du DOM supplémentaire, car cela impliquait d'ajouter un élément de dégagement supplémentaire. Une meilleure méthode consiste à définir une largeur explicite sur l'élément parent ('auto' n'est pas efficace dans tous les navigateurs et scénarios) et à définir la propriété overflow sur 'auto' ou 'hidden'. 'hidden' a clairement une meilleure compatibilité, mais dans certaines versions compatibles IE, 'auto' fonctionne mieux.
HTML :
<div class="parentElement">
<div class="childElement">
I'm floated left!
</div>
I'm normal text that wraps around the float
</div>
CSS:
.parentElement {
width: 100%;
overflow: hidden;
}
.childElement {
float: left;
}
Un contributeur à ce projet m'a rappelé de prêter attention au dernier clearfix.micro clear-fixest considéré comme suffisamment stable et compatible entre navigateurs pour être inclus dans la dernière version de HTML5 boilerplate. Jevous recommande vivementd'y jeter un coup d'œil. Bien que je ne sois pas un grand fan du CSS spécifique à un navigateur et de:afterce genre de pseudo-élément, ce micro clearfix est effectivement plus robuste. Il évite aussi le problème de l'effondrement de la marge supérieure.
Centrage vertical et horizontal
Centrer horizontalement des éléments n'est pas sorcier, et je suis sûr que la plupart d'entre vous connaissent l'extrait de code suivant :
.class {
width: 960px;
margin: 0 auto;
}
Les développeurs front-end utilisent ce code depuis longtemps et n'ont pas réussi à comprendre pourquoi cette approche ne fonctionne pas pour le centrage vertical. D'après ce que je comprends, il est important de se rappeler que l'élément parent a généralement uneheight: auto;style, et n'a pas non plus la hauteur de 100 % nécessaire pour le centrage vertical. Appliquerposition: absolute;peut effectivement faire passer l'élément en mode positionnement, et des marges définies sur auto l'aideront automatiquement à ajuster sa position pour réaliser le centrage.
.exactMiddle {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Les inconvénients de cette méthode incluent l'absence de prise en charge dans IE6 et IE7, et aucune barre de défilement n'apparaît lorsque le navigateur est réduit à une taille inférieure à l'objet centré. Àcette page webd'autres méthodes sont listées (celle-ci est actuellement la 4e), mais la méthode actuelle est la meilleure pour le moment.
Centrer verticalement du texte dans un élément est également simple. Si le texte est sur une seule ligne, comme un élément de navigation horizontal, vous pouvez définirline-heightsur la hauteur physique de l'élément.
#horizNav li {
height: 32px;
line-height: 32px;
}
Détecter les fonctionnalités, pas les types de navigateur
Dans la discussion précédente sur la détection des fonctionnalités JavaScript, détecter que le navigateur estn'importe quelle versiond'IE puis appliquer certains attributs est devenu de plus en plus problématique. L'Iron Man Paul Irish a conduit l'utilisation dela détection de version d'IEméthodes pour résoudre ces problèmes, maisModernizrnous a sauvés depuis. Modernizr place dans l'élément racine<html>certaines classes décrivant si certaines fonctionnalités sont prises en charge. Ensuite, les styles progressifs peuvent facilement être hérités en cascade depuis ces classes ou en être retirés.
.my_elem {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25);
box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
/* 如果 box shadow 不支持, 就应用 borders 属性 */
.no-boxshadow .my_elem {
border: 1px solid #666;
border-bottom-width: 2px;
}
N'abusez pas de !important
S'appuyer sur la balise!importantest une pratique dangereuse. Les situations où vous devez absolument l'utiliser sont rares et espacées, et sont des cas particuliers. Ces situations consistent généralement à remplacer une autre feuille de style que vous ne pouvez pas modifier ou que vous n'avez pas la permission de modifier. Un autre scénario consiste à coder en dur les styles d'un élément pour empêcher les styles générés par JavaScript d'avoir une priorité plus élevée. Mais en réalité,!importantil est souvent utilisé comme un raccourci paresseux pour faire qu'un style en remplace d'autres, ce qui causera de nombreux problèmes à l'avenir.
Pair!importantLa plupart des utilisations de la balise peuvent être évitées en comprenant mieux la spécificité des sélecteurs CSS et comment cibler les éléments plus précisément. Plus le sélecteur est spécifique, plus il est probable qu'il soit accepté comme style applicable. L'exemple ci-dessous de vanseodesign montre la spécificité en action.
p { font-size: 12px; }
p.bio { font-size: 14px; }
En ce qui concerne la priorité des styles,leur articleest meilleur que tout ce que je pourrais écrire pour expliquer l'héritage, alors n'hésitez pas à lui donner un pouce levé.
Rétrocompatibilité agressive
Il convient de noter qu'il s'agit de mon opinion personnelle et qu'elle ne s'applique qu'à des situations spécifiques. Dans les grands projets commerciaux ou les solutions d'entreprise qui dépendent de navigateurs anciens, la position de l'amélioration progressive ne sera pas facilement acceptée.
L'amélioration progressive signifie que si un navigateur particulier (plus ancien) ne peut pas rendre un effet particulier, il doit simplement être ignoré. Les boutons CSS3 en sont un bon exemple. Des effets tels queborder-radius， box-shadow， text-shadowetgradientsseront affichés dans les navigateurs avancés. Pour les navigateurs légèrement plus anciens, vous pouvez utiliser une image.PNGcomme solution de repli inoffensive, et la plus élégante de toutes les solutions serait de fournir un PNG-Fix pour IE6, ou d'utiliserfilterparamètres pour remplacer des propriétés comme les dégradés et les ombres. Dans ce cas, cependant, l'amélioration progressive vous fera ignorer les navigateurs plus anciens et présenter un objet plat et acceptable dans ceux-ci.
En termes simples, l'amélioration progressive consiste à :Si votre navigateur ne peut pas rendre les dégradés ou les ombres de boîte, c'est simplement tant pis pour vous.。
Bien que cela ne soit pas idéal pour toutes les situations, cette approche garantit que le projet est livré à temps et que le produit principal est utilisable, sans dépendre de hacks de navigateur.
CSS3 et HTML5
Je pense en avoir assez dit sur ce sujet. UtilisezModernizrpour détecter si des fonctionnalités spécifiques de HTML5 et CSS3 sont disponibles.
Usage et abus de @font-face
Avant d'envisager d'intégrer une police personnalisée, il est très important que vous vérifiiezEULAet que vous voyiez si l'intégration web est autorisée. Les fournisseurs de bibliothèques de polices ne veulent naturellement pas que les designers et développeurs puissent stocker directement les fichiers de bibliothèque de polices sur un serveur, où des utilisateurs finaux avertis peuvent les copier. Certains fournisseurs interdisent également l'intégration de types de fichiers spécifiques, tels que.TTFet.OTF。
Si, après mûre réflexion, vous pensez que la police que vous voulez peut être intégrée, alors allez voir legénérateur @font-facede Font Squirrel. Il s'appuie sur lastructure @font-face à toute épreuve de Fontspringet peut générer automatiquement tous les formats de fichiers requis.
Rétrocompatibilité
Heureusement, les navigateurs ont atteint une dégradation gracieuse dans la gestion des fonctionnalités HTML5 et CSS3 qu'ils ne prennent pas en charge. Ajoutés à<input />Les nouveaux types de balises tels que « email », « search », etc., se dégradent généralement gracieusement en champs de texte normaux lorsqu'ils ne sont pas pris en charge nativement par le navigateur.<input type="text" />. De même, les fonctionnalités CSS3 non prises en charge n'apparaîtront pas, et les mises en page responsives contrôlées par des requêtes média de hauteur et de largeur ne seront pas appliquées.
Les effets CSS3 sophistiqués devraient être appliqués comme une récompense pour les utilisateurs de navigateurs modernes.
Dans la section « Ressources » ci-dessous, nous avons inclus quelques bibliothèques qui aident à maintenir le fonctionnement des fonctionnalités HTML5 et CSS3 dans une gamme de navigateurs plus anciens.
Ressources
Les ressources suivantes sont importantes pour la normalisation du code et l'interaction dans les pages web modernes. Elles garantissent que les fonctionnalités CSS3 et HTML5 fonctionnent dans une gamme de navigateurs qui ne les prenaient pas en charge auparavant.
- jQuery bibliothèques d'assistance JavaScript
- jQuery UI Fait pour l'interaction/l'interface utilisateur ce que jQuery fait pour JavaScript
- Modernizr Détectez les fonctionnalités, pas les navigateurs !
- RespondJS Apporte des mises en page responsives aux navigateurs plus anciens
- Générateur @font-face Intégration complète des polices
- RaphaelJS Graphiques vectoriels multi-navigateurs faciles à utiliser
- HTML5 Boilerplate C'est un bon point de départ pour tout projet. Cependant, même sa version "slim" est un peu gonflée.
- Twitter Bootstrap Vous permet de prototyper et de styliser rapidement des applications web simples.
Cet article a été écrit par Tait Brown (@taitems), et cette version chinoise a été traduite parcoderLMNtraduit.