发表于 | 更新于: | 分类于 ， ， | 阅读次数:

英文原文：Web Styleguide – Style guide to harmonize HTML, Javascript and CSS / SASS coding style

CSS and Sass (SCSS) style rules

ID and class naming

ID和class(类)名总是使用可以反应元素目的和用途的名称，或其他通用名称。代替表象和晦涩难懂的名称。

应该首选具体和反映元素目的的名称，因为这些是最可以理解的，而且发生变化的可能性最小。

通用名称只是多个元素的备用名，他们兄弟元素之间是一样的，没有特别意义。
区分他们，使他们具有特殊意义，通常需要为"帮手"。

尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义，
语义化的名称 通常是正确的选择，因为它们所代表的信息含义，不包含表现的限制。

阅读全文 »

发表于 | 更新于: | 分类于 ， ， | 阅读次数:

文档类型

推荐使用 HTML5 的文档类型申明： <!DOCTYPE html>.

（建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml在浏览器中的应用支持与优化空间都十分有限）。

HTML 中最好不要将无内容元素（主要包括：area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr）的标签闭合，例如：使用 <br> 而非 <br />.

HTML 验证

一般情况下，建议使用能通过标准规范验证的 HTML 代码，除非在性能优化和控制文件大小上不得不做出让步。

使用诸如 W3C HTML validator 这样的工具来进行检测。

规范化的 HTML 是显现技术要求与局限的显著质量基线，它促进了 HTML 被更好地运用。

阅读全文 »

发表于 | 更新于: | 分类于 ， ， | 阅读次数:

英文原文：Web Styleguide – Style guide to harmonize HTML, Javascript and CSS / SASS coding style

这是一份旨在增强团队的开发协作，提高代码质量和打造开发基石的编码风格规范，其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分。我们知道，当一个团队开始指定并实行编码规范的话，错误就会变得更加显而易见。如果一段特定的代码不符合规范的话，它有可能只是代码风格错误，而也有可能会是 bug。早期指定规范就使得代码审核得以更好的开展，并且可以更精确的地定位到错误。只要开发者们能够保证源代码源文件都严格遵循规范，那接下去所使用的混淆、压缩和编译工具则可投其所好不尽相同。

阅读全文 »

发表于 | 更新于: | 分类于 ， ， | 阅读次数:

英文原文：Web Styleguide – Style guide to harmonize HTML, Javascript and CSS / SASS coding style

JavaScript 规范

全局命名空间污染与 IIFE

总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。

IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改（i.e. 第三方库，window 引用，被覆盖的未定义的关键字等等）。

不推荐

var x = 10,
    y = 100;

// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
// will be stored in the window object. This is very unclean and needs to be avoided.
console.log(window.x + ' ' + window.y);

推荐

// We declare a IIFE and pass parameters into the function that we will use from the global space
(function(log, w, undefined){
  'use strict';

  var x = 10,
      y = 100;

  // Will output 'true true'
  log((w.x === undefined) + ' ' + (w.y === undefined));

}(window.console.log, window));
阅读全文 »

发表于 | 更新于: | 分类于 ， | 阅读次数:

本文主要总结整理Ajax的一些常用的基础知识，适合初学者。

一、Ajax简介、优劣势、应用场景以及技术

  • Ajax简介 :

    • Asynchronous Javascript And XML （异步的
      JavaScript和XML）
    • 它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体
    • AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

  • 优点：

    • 页面无刷新，用户体验好。
    • 异步通信，更加快的响应能力。
    • 减少冗余请求，减轻了服务器负担
    • 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序

  • 缺点：

    • ajax干掉了back按钮，即对浏览器后退机制的破坏。
    • 存在一定的安全问题。
    • 对搜索引擎的支持比较弱。
    • 破坏了程序的异常机制。
    • 无法用URL直接访问

  • ajax应用场景

    • 场景 1. 数据验证
    • 场景 2. 按需取数据
    • 场景 3. 自动更新页面

  • AJAX 包含以下五个部分：
    ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。

    • 使用CSS和XHTML来表示。
    • 使用DOM模型来交互和动态显示。
    • 数据互换和操作技术，使用XML与XSLT
    • 使用XMLHttpRequest来和服务器进行异步通信。
    • 使用javascript来绑定和调用。

在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它

阅读全文 »

发表于 | 更新于: | 分类于 ， | 阅读次数:

字符串及数组类

判断一个字符串中出现次数最多的字符，统计这个次数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var str = "zhaochucichuzuiduodezifu";
var o = {};
for (var i = 0, length = str.length; i < length; i++) {
//        var char = str[i];
    var char = str.charAt(i);
    if (o[char]) {  //char就是对象o的一个属性，o[char]是属性值，o[char]控制出现的次数
        o[char]++;  //次数加1
    } else {
        o[char] = 1;    //若第一次出现，次数记为1
    }
}
console.log(o);   //输出的是完整的对象，记录着每一个字符及其出现的次数
//遍历对象，找到出现次数最多的字符和次数
var max = 0;
var maxChar = null;
for (var key in o) {
    if (max < o[key]) {
        max = o[key];   //max始终储存次数最大的那个
        maxChar = key;  //那么对应的字符就是当前的key
    }
}
console.log("最多的字符是" + maxChar);
console.log("出现的次数是" + max);

字符串长度截取

阅读全文 »