forlong401
forlong401

前端代码规范 及 最佳实践

http://coderlmn.github.io/code-standards/

概述

本文档包含了Isobar公司的创意技术部（前端工程）开发web应用的规范。现在我们把它开放给任何希望了解我们迭代过程最佳实践的人。

编写本文档的主要驱动力是两方面： 1) 代码一致性 以及 2) 最佳实践。 通过保持代码风格和传统的一致性，我们可以减少遗留系统维护的负担，并降低未来系统崩溃的风险。而通过遵照最佳实践，我们能确保优化的页面加载、性能以及可维护的代码。

总体指导原则◊返回顶部

前端开发核心思想◊

  1. 表现、内容和行为的分离
  2. 标记应该是结构良好、语义正确 以及 普遍合法 。
  3. Javascript应该起到渐进式增强用户体验的作用 。

总体原则◊

缩进◊

对于所有编程语言，我们要求缩进必须是软tab（用空格字符）。在你的文本编辑器里敲 Tab 应该等于 4个空格 。

可读性 vs 压缩◊

对于维护现有文件，我们认为可读性比节省文件大小更重要。大量空白和适当的ASCII艺术都是受鼓励的。任何开发者都不必故意去压缩HTML或CSS，也不必把Javascript代码最小化得面目全非。

我们会在服务器端或build过程中自动最小化并gzip压缩所有的静态客户端文件，例如CSS和JS。

标记◊返回顶部

任何网页的首要组件就是基于标签的HTML标记语言。超文本标记语言 (HTML) 曾有一段不堪回首的历史，但最近几年已经是 皇 上 回 宫 了。经过对它基于XML的XHTML变种的漫长试验之后，整个行业终于接受了HTML代表web的未来这一事实。

标记定义了文档的结构和纲要，并提供结构化的内容。除了最基本的概念（例如标题、段落和列表）之外，标记并不是用来定义页面上内容的外观和体验的。HTML的表现属性都已经被废弃了，有关样式的定义应该被包含在 样式表 中。

HTML5◊

HTML5 是HTML 和 XHTML 的新版本。 在 HTML5 草案 的规范中定义了可以用 HTML 和 XML编写的单一的语言，意在解决在之前HTML的迭代中发现的一些问题并满足web应用的需求，这是以前HTML没有充分覆盖到的领域（来源 ） 。

在合适的时候，我们会使用HTML5 Doctype 和 HTML5 特性。

我们会对照 W3C 校验器 测试我们的标记，以确保标记是结构良好的。我们的目标并不是100%的合法代码，但是校验肯定对于编写可维护的站点以及调试代码都大有帮助。 Isobar公司不保证代码都是100%合法，而是确信跨浏览器体验会相当一致 。

模板◊

对HTML5文件，我们使用 H5BP 针对我们自己项目需求修改的一个分支。 你也可以从这里Fork H5BP。

Doctype◊

标记中必须总是使用合适的Doctype来指示浏览器触发标准模式. 永远要避免Quirks模式。

HTML5特别好的一个方面就是它简化了Doctype需要的代码。无意义的属性被弃用了，DOCTYPE 声明也被显著地简化了。另外，也无需再用 CDATA 对内联JavaScript代码进行转义，而这在此之前为了让XHTML符合XML的严密性是必需的。

HTML5 Doctype
1.

字符编码◊

所有标记必须通过UTF-8编码传递，因为这种编码方式是对国际化最友好的。必须在HTTP的header和HTML文档的head部分都指定这种编码。

设定字符编码是通过 标签进行。

1. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

如果是HTML5，则只需要写：

1. <meta charset="utf-8">

标记的总体原则◊

下面是编写HTML标记的总体原则。提醒大家一点，在创建的HTML文档里总是要使用能够代表内容语义的标记。

  • 段落分隔符要使用实际对应的

    元素，而不是用多个
    标签。

  • 在合适的条件下，充分利用
     （定义列表）和
     标签。
  • 列表中的条目必须总是放置于
      、
        或
         中，永远不要用一组 
        或

         来表示。

      1. 给每个表单里的字段加上  标签，其中的 for 属性必须和对应的输入字段对应，这样用户就可以点击标签。同理，给标签加上 cursor:pointer; 样式也是明智的做法。 讨论 1 讨论 2
      2. 不用使用输入字段中的 size 属性。该属性是和输入字段里文本的 font-size 相关的。应该使用CSS宽度。
      3. 在某些闭合的 
        4.  标签旁边加上一段html注释，说明这里闭合的是什么元素。这在有大量嵌套和缩进的情况下会很有用。
      4. 不要把表格用于页面布局。
      5. 在合适的条件下，利用 microformats 和/或者 Microdata ，具体说是 hCard 和 adr。
      6. 在合适的条件下，利用 、和标签 (以及Scope属性）。具备恰当语法结构(THEAD,TBODY,TH [scope])的 Table 标记
        01. <table summary="This is a chart of year-end returns for 2005.">
        02. <thead>
        03. <tr>
        04. <th scope="col">Table header 1th>
        05. <th scope="col">Table header 2th>
        06. tr>
        07. thead>
        08. <tbody>
        09. <tr>
        10. <td>Table data 1td>
        11. <td>Table data 2td>
        12. tr>
        13. tbody>
        14. table>
      7. 对于页眉和标题，永远使用首字母大写格式。不要在标记中使用全部大写或小写的标题，而是应用CSS属性 text-transform:uppercase/lowercase 。

    属性加引号◊

    在HTML5规范里并没有严格要求属性值两边加引号。但考虑到一些属性可以接受空白值，为了保持一致性，我们要求所有属性值必须加上引号。 

    1. <p class="line note" data-attribute="106">This is my paragraph of special text.p>

    CSS◊返回顶部

    网页的第二个组件就是在层叠样式表（CSS）中包含的表现信息。Web浏览器成功实现CSS后，整整一代web开发者对他们网站的外观和体验拥有了全部的控制权。 

    正如网页信息在语义方面由 HTML 标记 描述， CSS 从表现方面则是通过对视觉属性的定义来描述网页。 CSS 的强大之处在于，这些属性可以混合并通过各种标示符匹配，它可以通过样式规则的分层（”层叠“）来控制页面的布局和视觉特征。

    编码总体原则◊

    • 从外部文件加载CSS，尽可能减少文件数。加载标签必须放在文件的 HEAD 部分。
    • 用 LINK 标签加载，永远不要用@import。加载样式表
      1. <link rel="stylesheet" type="text/css" href="myStylesheet.css" />
      不要用内联式样式
      1. <p style="font-size: 12px; color: #FFFFFF">This is poor form, I sayp>
    • 不要在文件中用内联式引入的样式，不管它是定义在样式标签里还是直接定义在元素上。这样会很难追踪样式规则。
    • 使用 normalize.css 让渲染效果在不同浏览器中更一致。
    • 使用类似 YUI fonts.css 的字体规格化文件。
    • 定义样式的时候，对样式在页面只出现一次的元素用id，其他的用class。
    • 理解 层叠和选择器的明确度 ，这样你就可以写出非常简洁且高效的代码。
    • 编写性能优化的选择器。尽可能避免使用开销大的CSS选择器。例如，避免 * 通配符选择器，也不要叠加限定条件到 ID 选择器（例如 div#myid）或 class 选择器（例如 table.results）上。这对于速度至上并包含了成千上万个DOM元素的web应用来说尤为重要。更多相关内容请参阅 MDN 上的这篇 《编写高效CSS》。

    CSS盒子模型◊

    深入学习和理解CSS及基于浏览器的盒子模型，对于掌握CSS布局的基础是非常必要的。

    3D CSS 盒子模型示意图， 由  Jon Hicks 绘制。

    CSS 校验◊

    我们一般不用 W3C 校验器。

    CSS 格式◊

    最低要求：选择器单独占一行，每个属性占一行。属性声明要有缩进。

    作为提高的要求，关联或孩子样式要增加2-4个空格的缩进。这样有利于分层查看和组织，产生（对某些人来说）可读性更好的样式表。

    另外，在给一个样式指定多个选择器的时候，把每个选择器单独放一行是个好主意。这样可以避免一行变得太长，也能提高可读性及版本控制流程。

    01. .post-list li a{
    02. color:#A8A8A8;
    03. }
    04. .post-list li a:hover{
    05. color:#000;
    06. text-decoration:none;
    07. }
    08. .post-list li .author a,
    09. .post-list li .author a:hover{
    10. color:#F30;
    11. text-transform:uppercase;
    12. }

    在多个开发者协作环境下，避免用单行CSS格式，因为这样会给版本控制带来问题。

    字母排序◊

    如果你对性能情有独钟， 对CSS属性进行字母排序有利于在GZIP压缩中识别大量可重复的特征。 

    Classes vs. IDs◊

    对于所用的样式只出现一次的元素，给它设一个id属性。这个属性只会应用于该元素，不会用到其他地方。Class属性则可以用到多个具有相同样式属性的元素上。具有相同外观和表现的元素可以具有相同的class名。 

    1. <ul id="categories">
    2. <li class="item">Category 1li>
    3. <li class="item">Category 2li>
    4. <li class="item">Category 3li>
    5. ul>

    选择器命名的惯例◊

    无论是 ID 还是 class，对任何东西最好总是根据 它是什么 而不是 它看上去是什么样子 来命名。 比如一个页面上的特别提示的 class 名是 bigBlueText （大蓝字），可它的样式早就被改成红色小字体，这个名字就没意义了。使用更聪明的惯例如 noteText （提示文字）就好多了，因为即使视觉样式改变了，它也还是管用的。

    选择器◊

    CSS3 选择器 规格引入了一整套对于更好地选择元素极其有用的 CSS 选择器。

    伪类◊

    伪类 使你能动态地修饰网页内容的样式。有些伪类从CSS1 （:visited, :hover等） 和 CSS2 （:first-child, :lang）那时候开始就有了。CSS3又往列表里加入了16个新的伪类，这些伪类对于动态地修饰网页内容的样式特别有用。 学习如何深度使用伪类。

    组合及属性选择器◊

    组合选择器 提供了为特定元素选择其后代元素、孩子元素或兄弟元素的快捷方式。

    属性选择器 适用于具有特定属性 和/或 特定值的元素。正则表达式的知识对属性选择大有帮助。 

    明确度◊

    浏览器会通过 计算选择器的明确度 来决定应用哪个CSS规则。如果两个选择器都适用于同样的元素，具有更高明确度的那个会胜出。

    ID 选择器比属性选择器明确度高，class 选择器比任何数量的元素选择器明确度高。尽量使用 ID 选择器来提高明确度。有时候我们可能会想方设法给一个元素应用一条CSS规则，但用尽方法也不能如愿。这种情况有可能是因为我们使用的选择器比另外一个的明确度低，所以明确度高的另一个选择器里的属性就比我们想应用的选择器优先了。这种情况在更大或更复杂的样式表里更为常见。在小一些的项目里，通常这不是大问题。

    计算明确度◊

    当你在一个很大很复杂的样式表上干活的时候，知道如何计算选择器的明确度会有很大帮助，会节约你的时间，并让你的选择器更有效率。

    明确度的计算方式是对你的CSS的各种组件计数，并用 (a,b,c,d) 格式表达出来。

    • 元素，伪元素: d = 1 – (0,0,0,1)
    • 类，伪类，属性: c = 1 – (0,0,1,0)
    • Id: b = 1 – (0,1,0,0)
    • 内联样式: a = 1 – (1,0,0,0)

    不过，也许使用现成的明确度计算器更好一些。

    • 明确度计算器
    • 你应该了解的关于明确度的一些事
    • IE 明确度 bugs

    使用 !important 会覆盖掉所有的明确度，不管它有多高。因此我们倾向于避免使用它。大部分时候是没必要用它的。即使你需要覆盖某个你访问不到的样式表里的选择器，往往也会有其他的办法去覆盖。尽可能避免使用它。

    像素 vs. Em◊

    我们使用 px 作为定义 font size 的度量单位，因为它能提供对文本的绝对控制。我们知道为字体大小使用 em 单位一度很流行，这样可以解决 IE6 无法改变基于像素的文本大小的问题。不过，现在所有的主流浏览器（包括 IE7 和 IE8）都支持基于像素单位的文本大小 和/或 整页缩放。既然 IE6 被广泛认为已废弃，用像素定义文本尺寸更好。另外，无单位的 line-height 也应该优先考虑，因为它不会从父元素继承一个百分比值，而是基于 font-size 的一个乘数。

    正确
    1. #selector {
    2. font-size: 13px;
    3. line-height: 1.5;  /*  13 * 1.5 = 19.5 ~ Rounds to 20px. */
    4. }
    不正确
    1. /*  Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px. */
    2. #selector {
    3. font-size: 0.813em;
    4. line-height: 1.25em;
    5. }

    IE Bugs◊

    不可避免地，当所有其他浏览器看起来都正常工作的时候，各种版本的IE浏览器就会冒出一些莫名其妙的bug，让部署一拖再拖。虽然我们鼓励排除问题，产出无需打补丁就能在所有浏览器上运行的代码，有时候为了在样式表中使用CSS钩子，还是有必要用到CSS  if IE 条件注释。从 paulirish.com 了解更多信息。

    修复 IE
    1.
    2.
    3.
    4.
    5.  <body> 
    1. .box { float: left; margin-left: 20px; }
    2. .ie6 .box { margin-left: 10px; }

    如果你在用HTML5（以及 HTML5 Boilerplate）， 我们推荐使用 Modernizer JavaScript库和下列模式：

    1.
    2.
    3.
    4.
    5. <html class="no-js" lang="en">

    速记格式◊

    一般情况下要优先使用CSS速记格式，一是因为它的简洁，二是用它也可以扩充已有的值，例如margin和padding的情况。 开发者必须注意TRBL 缩写，它表示元素的各边按顺时针方向定义的顺序：上、右、下、左。如果bottom没有定义，它就会从top继承值。同理，如果left未定义，它从right继承值。如果只有top的值有定义，所有的边都会继承那一个值。

    下面是关于减少样式表代码冗余和使用CSS速记格式的更多内容：

    • http://qrayg.com/journal/news/css-background-shorthand
    • http://sonspring.com/journal/css-redundancy
    • http://dustindiaz.com/css-shorthand

    图片◊

    • 对于（用于背景的）重复图片，要使用 比 1x1 像素大的图片
    • 永远不要用空白图片。
    • 多使用 CSS精灵（sprites）。它会使悬停状态更简单，改善页面加载速度，并减少二氧化碳的排放。
    • 一般情况下，所有的图片都应该切成带透明背景（PNG8），并裁减成紧密贴合图片外边框。
      • 不过，logo必须总是带有背景遮片，并在裁减内容之外留出内边框。

    颜色管理◊

    • 确认团队所有成员都有一致的颜色管理设置。
      • 任意两台显示器显示的颜色很可能会有所不同，但必须使用sRGB颜色作为缺省配置。
      • 当你在Photoshop打开文件时，要注意颜色配置警告，当Photoshop建议把图片转换到另一个配置时，要通知其他团队成员。
    • 永远不要把颜色配置嵌入到图片里。
      • 当你从Photoshop保存图片时，务必去掉"Embed Color Profile"选项的勾选。

    通用的文本和字体样式◊

    标题◊
    • 要给 h1-h6 标题 -- 包括作为链接的标题 -- 定义缺省样式。在你的CSS文档顶部定义它们，在必要时修改它们以保持整个站点的一致性。
    • 标题必须有层次，能表明从大到小不同级别的重要性，h1具有最大的字体大小。
    • SEO：要大致地了解页面的层次组织和阅读效果，在开发者工具里关闭CSS效果，你会看到一个基于文字的视图，包括所有的 h1-h6 ， strong， em 等标签。
    链接◊
    • 必须定义链接的缺省样式，样式要和主要的文字样式不同，载悬停状态下也要有不同的样式。
    • 当给链接加下划线样式时，使用 border-bottom 并用 text-decoration: none; 加点内边框。这样看起来更好一些。

    Web字体◊

    近些年来越来越流行使用web上的定制字体和字型。随着本地浏览器对其支持度的攀升，以及一些支持它的服务和API的出现，这个领域发展的势头很猛。这些方法都各有利弊。项目启动前最好是在技术和版权限制方面先做一些研究，以便为特定项目选择合适的方法。

    所有这些方法都有代码开销、开发时间和性能（时间计算和用户感受）的不足。你需要熟悉这些问题，并和团队成员及用户沟通，这样会减少项目后期的大量问题。

    下面列出一些内嵌定制字体的流行手段，按我们实施时的优先级排序。

    @font-face◊

    @font-face 规则 允许你自定义字体。它最早是在CSS2 规范里定义的，但从CSS2.1被删除了。现在，它是CSS3草案中的推荐稿。

    对于web定制字体，我们的首选和最偏爱的选择都是 @font-face ，就是因为它被列入了CSS字体模块工作草案的一部分，这意味着它会随着浏览器支持的提升变得越来越流行，并且随着它不断改善变得更稳定，使用起来也更简单。

    就现在而言，使用 @font-face 的时候，建议为每种字体格式定义它的source。这很重要 -- 如果你想让它在大多数浏览器中有效 -- 虽然这不是使用它的必要条件。

    在规范中包括的字体格式有：

    • woff: WOFF (Web Open Font 格式)
    • ttf: TrueType
    • ttf, otf: OpenType
    • eot: 嵌入式 OpenType
    • svg, svgz: SVG 字体
    防弹 @font-face◊

    为了实现完全的浏览器兼容性，可以使用 Fontsprings 的新版 防弹 @font-face 语法 （2011年2月21日的最新版本）。

    01. @font-face {
    02. font-family: 'MyFontFamily';
    03. src: url('myfont-webfont.eot');                     /* IE9 Compat Modes */
    04. src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
    05. url('myfont-webfont.woff') format('woff'),     /* Modern Browsers */
    06. url('myfont-webfont.ttf') format('truetype'),      /* Safari, Android, iOS */
    07. url('myfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    08. font-weight: ;
    09. font-style: ;
    10. // etc.
    11. }

    这里有一个使用上述技术实现的 演示 。

    跨浏览器兼容◊

    Safari, IE 6-9, IE 9 兼容模式, Firefox, Chrome, iOS, Android, Opera

    阻止兼容模式◊

    有时候 IE 会在用户不知道的情况下自作主张切换到兼容模式。要阻止你的站点缺省进入兼容模式，可以在站点的 部分加入下列代码：

    1. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    有关 @font-face 的提示◊
    • IE 6–8 只会接受打包成 EOT 的 TrueType 字体。
    • font-weight 和 font-style 在 @font-face 里有不同的含义。带有 font-weight:bold; 的声明意味着它是这种字型的粗体版本，而不是直接给文本加粗。
    • @font-face 的一些坑
    优点
    • 易于实施
    • 多种多样APIs
    • 可定制
    • 易于加入元素中
    • 除了 CSS 之外无需其他库或接口
    • 被列入了CSS字体模块3工作草案的一部分
    不足
    • 使用不当的时候，支持它的浏览器有限
    • 某些现代浏览器（Chrome, Opera）的老版本并不总是能正常渲染。文本可能会出现毛刺。**我本人没有亲自证实过，不确定现在这个问题是否还存在。

    Google WebFonts API 和 Font 加载器◊

    使用 Google Webfonts 有两套可选方案。这两套方案当然也各有其弊端，但它们也可以用得和 @font-face 一样好，这全取决于项目的需要。

    Webfonts API◊

    Google的 Webfonts API 本质上和 @font-face 做的是同样的事情，只是它把所有困难的工作都帮你做好了，提供了更广泛的浏览器支持。这个方案主要的缺点是它使用的字体库非常小。使用它的时候你只需要引入下面这套样式表并指定字体名。

    1. <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

    然后给你想应用的选择器定义一个样式即可：

    1. CSS selector {
    2. font-family: 'Font Name', serif;
    3. }

    Webfont 加载器◊

    Google 提供的另一个备选方案是 Webfont 加载器 ，它是一个 JavaScript 库，提供比字体 API 更多的控制。你也可以像Typekit那样使用多套web字体。 使用这套方案需要把下面的script引入你的页面：

    01.

    用这种方式引入 webfont.js 文件速度更快，如果没有用到前面的Ajax接口的话。否则你应该用下面的方法： 

    1.
    2.

    通过使用这套 Webfont 加载器，你具备更多的定制能力，包括使用更多的字体，而不局限于不大的Google Webfont字库。不过，这种方案需要加载Javascript，这就是为了便利付出一些其他的牺牲了。

    优点
    • 非常易于实施
    • 广泛的浏览器支持
    • 可与 Typekit 组合
    • 如果使用 font 加载器，可以定制
    • API 和 @font-face 功能相同
    不足
    • API只提供很小的字体库
    • Webfont 加载器需要 JavaScript 才能工作
    • 大部分浏览器会先加载页面的其他部分，在这些字体所在部分留下空白，或在有回退选项存在的时候显示回退样式，直到页面加载完成为止。
    • webfont 库里的一些字体在 Windows 下渲染效果不佳

    Cufon◊

    如果你选择使用 Cufon，我们强烈推荐你使用 Cufon 压缩版。你会需要用 生成器 来转换你的字体。

    1.
    2.
    3.

    我们推荐慎重使用 Cufon ，因为如果应用到大量的文本上，它会产生很多开销。访问 Cufon Wiki 可以获取更多相关信息。

    优点
    • 广泛的浏览器支持
    • 在支持它的浏览器中渲染效果好
    • 可定制
    • 易于实施
    不足
    • 需要 JavaScript 才能工作
    • 使用该方法的文本不能被选中
    • 并不是适用于所有文字
    • 定制可能会很复杂
    • 并不总是容易应用到多个元素，特别是在增加类似悬停的效果的时候

    Typekit◊

    当选择给网站添加定制字体的时候，使用 Typekit 有它不容忽视的优势。它具备很强的平台集成，并且是可扩展和流行的服务。 它可以和 Google Webfonts 一起使用，并且易于加入到以 WordPress, Posterous, Typepad, 和其他类似的 CMS 实现的网站上。

    但是，要完整地应用 Typekit 也不是无本生意。如果你需要把它用到超过2个站点，或用在一个浏览量很高的站点上，你需要每年付49.99美元费用，对于百万以上浏览量的站点费用会加倍。不过，如果你的网站有这么大浏览量，对这点成本你应该是不差钱的。如果不是这样，你可能需要重新考虑你的商业模式了。 

    优点
    • 庞大的字体库，包括 Adobe 字体
    • 易于实施
    • 和Google Webfont API 以及 博客平台 集成
    • 免费计划有限制但不会过期
    不足
    • 需要 JavaScript 才能工作
    • 免费计划能用到的字体库是有限制的
    • 免费和最便宜的计划只允许用到1-2个网站，每个网站只能用2-5种字体。
    • 用到超过一个网站就需要付费了

    可扩展 Inman Flash 替换 (sIFR)◊

    我们不推荐使用这种方法，但是因为它的广泛使用，我们觉得还是有必要介绍它，以便你在选择定制web字体方法时做出胸有成竹的决定。

    即使它在web设计师中广为流行，而且它在大多数浏览器中也有很好的支持，使用它的缺点还是大过它的便利性。 弃用 sIFR 的最大也是最明显的原因是它需要使用Flash这一事实。而且，即便是为了让Flash正常工作就需要 JavaScript，而且在你使用此方法渲染的文本能在页面上可见之前，相关的脚本必须都先被加载。更不用说，它会增加页面加载时间，并会让一个慢网站变得更慢。

    我们会让你对这些问题算算细账。

    优点
    • 文本可以被选中
    • 大多数浏览器都支持
    • 在支持它的浏览器上渲染得还不错
    不足
    • 它用到了 Flash
    • 需要 JavaScript 来让 Flash 正常工作
    • 它是 Flash!
    • 脚本加载完之前，文字不会出现
    • ...还有，它是 Flash...

    字体版权◊

    即使你可以把任何字体转换为web字体文件，你还是应该确认这样做是否合法。很多厂商更新了他们关于字体在web上使用的条款。查看 字体版权和保护的细则 获取更多信息。

    字体描述及字体文件格式◊

    • CSS 2 字体 – 1998年5月 (已废弃)
    • CSS 3 字体 – 2009 工作草案 
    • CSS 字体模块 – W3C 工作草案 2011年5月
    • WOFF Font Format – 工作草案 2010
    • SVG 字体格式
    • 嵌入式 OpenType (EOT) 文件格式
    • 微软 OpenType 规范
    • OpenType 特性文件规范
    • 苹果 TrueType 手册

    使用 CSS3◊

    利用CSS3规范中增加的特性，你可以做很多新奇的事情，不过里边很多新特性还没有得到所有主流浏览器的完全支持。不过这也不是说它们现在就不能用。对于这些支持不好的特性，有一些回退的库可用，或者有一些其他补丁，用来填补在浏览器对新特性缺乏支持时出现的空白。

    还有一些浏览器特定的属性或前缀也可以用来修饰样式。为跨浏览器支持起见，我们推荐使用 Prefixr.com 来确保你加入了所有针对不同浏览器的前缀属性。

    JavaScript◊返回顶部

    JavaScript 是网页的第三个主要部件。在网页上适当地应用JavaScript 代码，通过绑定事件和控制整体行为层，能够增强整体的用户和基于浏览器的体验。

    随着功能强劲的新浏览器撑起基于浏览器的完整web应用，JavaScript 在近年的流行度爆棚。另外，对Javascript的细致运用为全面操控另外两个部件 -- HTML 标记和 CSS -- 提供了手段。现在，在无需刷新整个页面的情况下，页面结构和页面视觉样式都可以被实时操控。

    JavaScript库◊

    我们开发新应用主要会用到 jQuery，不过我们对原生 JavaScript 和所有现代 javascript 库也具有专业经验。

    编码总体原则◊

    • 99%的代码必须封装在外部Javascript文件中。这些文件必须在 BODY 标签的尾部引入，让页面的性能最大化。
    • 不要依赖于 user-agent 字符串。进行适当的特性检测. （更多信息参见 深入 HTML5： 检测 和 jQuery 支持文档）
    • 不要使用 document.write()。
    • 所有布尔变量的命名必须用 "is" 开头对正条件的测试
      1. isValid = (test.value >= 4 && test.success);
    • 给变量和函数的命名要有逻辑意义：例如： popUpWindowForAd 就比 myWindow 好多了。
    • 不要人为缩短命名到最小。除了传统的 for 循环中的计数器 i 等简化的情况，变量命名必须长到有明确意义。
    • 文档必须遵循 NaturalDocs 结构。
    • 常量或配置变量（例如动画持续时间等）必须放在文件的顶部。
    • 尽力编写可通用化的函数，让它接受参数并返回值。这样有利于充分的代码重用，而且一旦与引入及外部脚本配合起来，能在脚本需要修改时减少开销。例如，相比硬编码一个带有窗口大小、选项和url的弹出式窗口，不如编写一个接受大小、url和选项作为变量的函数。
    • 给代码添加注释！这会有利于减少在调试Javascript函数上花费的时间。
    • 不要把时间浪费在用  给你的内联Javascript加注释上，除非你还在关注 Netscape 4。 :)
    • 把你的代码组织成一套 对象常量/单例，按照 模块化模式，或做成 带构造器的对象。
    • 最小化全局变量 - 你创建的全局变量越少越好。一般来说，用于你的应用命名空间，1会是个好的数字。在描述任何全局变量的时候要明确指认。
      1. window.globalVar = { ... }

    留空◊

    总的来说，使用留空应该遵循源远流长的英语阅读惯例。 例如，每个逗号和冒号（以及适用的分号）后面要空一格，但在括号内部的左侧和右侧都不要加空格。另外，大括号应该总是和他们前面的参数出现在同一行。

    来看看下面的 JavaScript for循环的例子...

    正确
    1. for (var i = 0, j = arr.length; i < j; i++) {
    2. // Do something.
    3. }
    不正确
    1. for ( var i = 0, j = arr.length; i < j; i++ )
    2. {
    3. // Do something.
    4. }
    也不正确
    1. for(var i=0,j=arr.length;i
    2. // Do something.
    3. }

    plugins.js 和 script.js◊

    从 H5BP 开始我们看到了两个文件， plugins.js 和 script.js。本节概述这两个文件的基本用法。

    plugins.js◊

    Plugins.js 的用处是存放网站的所有插件代码。相比链接到很多不同的文件，我们可以把插件代码统一放到这个文件里，从而改善性能。这种用法会有也应该有例外。例如，一个超级大的插件，又只是用在一个很少被访问到的页面上，放在单独的一个下载链接里就会更好，这样只会在目标页面被打开的时候才会被访问。不过，大部分情况下，直接把所有插件的最小化版本粘贴到这里以便访问是靠谱的。

    下面就是一个样例文件，包括一个小目录。它可以作为所用到插件的随身指南，包括文档URL，使用它们的思路，诸如此类。

    01. /* PLUGIN DIRECTORY
    02. 本文件中出现的插件 [按出场顺序排序]
    03.  
    04. 1.) Animate Background Position - http://plugins.jquery.com/project/backgroundPosition-Effect
    05. 2.) jQuery Easing Plugin - http://gsgd.co.uk/sandbox/jquery/easing/
    06. 3.) jQuery Ajax Form plugin - http://jquery.malsup.com/form/#download            
    07. 4.) jQuery validation plugin (form validation) - http://docs.jquery.com/Plugins/Validation
    08. -password strength
    09. 5.) Styled Selects (lightweight) - http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview
    10. */
    11.  
    12. /**
    13. * 1.) Animate Background Position - http://plugins.jquery.com/project/backgroundPosition-Effect
    14. * @author Alexander Farkas
    15. * v. 1.21
    16. */
    17. (function($) {
    18. if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
    19. //SNIPPED
    20. };
    21. })(jQuery);
    22.  
    23.  
    24. /**
    25. * 2.) jQuery Easing Plugin (we're not using jQuery UI as of yet) - http://gsgd.co.uk/sandbox/jquery/easing/
    26. */
    27.  
    28. // t: current time, b: begInnIng value, c: change In value, d: duration
    29. jQuery.easing['jswing'] = jQuery.easing['swing'];
    30.  
    31. jQuery.extend( jQuery.easing,
    32. {
    33. //SNIPPED
    34.  
    35. });
    36. ;(function($) {
    37. $.fn.ajaxSubmit = function(options) {
    38. //SNIPPED
    39. }
    40. })(jQuery);
    41.  
    42. /*
    43. * jQuery Styled Select Boxes
    44. * version: 1.1 (2009/03/24)
    45. * @requires jQuery v1.2.6 or later
    46. *
    47. * Examples and documentation at: http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview
    48. *
    49. * Copyright (c) 2008 Lasar Liepins, liepins.org, [email protected]
    50. *
    51. * Permission is hereby granted, free of charge, to any person obtaining a copy
    52. * of this software and associated documentation files (the "Software"), to deal
    53. * in the Software without restriction, including without limitation the rights
    54. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    55. * copies of the Software, and to permit persons to whom the Software is
    56. * furnished to do so, subject to the following conditions:
    57. *
    58. * The above copyright notice and this permission notice shall be included in
    59. * all copies or substantial portions of the Software.
    60. *
    61. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    62. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    63. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    64. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    65. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    66. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    67. * THE SOFTWARE.
    68. *
    69. */
    70.  
    71. jQuery.fn.styledSelect = function(settings) {
    72. //SNIPPED
    73. return this;
    74. };
    Script.js◊

    Script.js 的用处是存放网站或应用的代码代码。再次说明，这种方式并不总是最佳解决方案，因为更大的团队 和/或 规模更大、功能更多的项目可以得益于将应用代码分解为模块或功能特性相关的文件。不过，对于较小较简单的应用，以及最初的原型开发，把所有工作集中到 scripts.js 还是靠谱的。

    下面是一个简化了的例子，用到了 基于标记的低调全面的DOM-ready执行 模式（【译者注】这里的‘低调’原文是Unobtrusive ，是一种将Javascript从HTML结构抽离的设计概念，避免在HTML标签中夹杂一堆onchange、onclick……等属性去挂载Javascript事件，让HTML与Javascript分离，依MVC的原则将功能权责清楚区分，使HTML也变得结构化容易阅读。），看起来会类似于这样：

    01. /* Name: Demo
    02. Author: Demo King */
    03. /*demo namespace*/
    04. demo = {
    05. common : {
    06. init     : function(){
    07. //initialize
    08. },
    09. finalize : function(){
    10. //finalize
    11. },
    12. config : {
    13. prop : "my value",
    14. constant : "42"
    15. }
    16. },
    17. mapping : {
    18. init     : function(){
    19. //create a map
    20. },
    21. geolocate    : function(){
    22. //geolocation is cool
    23. },
    24. geocode : function(){
    25. //look up an address or landmark
    26. },
    27. drawPolylines : function(){
    28. //draw some lines on a map
    29. },
    30. placeMarker : function(){
    31. //place markers on the map
    32. }
    33. }
    34. }

    变量，ID 及 class◊

    所有的 JavaScript 变量必须写成全小写或驼峰法。一个例外是构造器函数，按惯例是首字母大写。所有CSS里的 id 和 class 声明都必须只用小写。不允许用连接符或下划线。 

    事件代理◊

    在分配低调（unobtrusive）的事件监听器时，通常可接受的做法是把事件监听器直接分派给那些会触发某个结果动作的元素。不过，偶尔也会有多个元素同时符合触发条件，给每个元素都分配事件监听器可能会对性能有负面影响。这种情况下，你就应该改用事件代理了。

    从性能角度考虑，jQuery的 delegate() 优于 live()。

    调试◊

    即使采用了最好的校验器，浏览器的怪异性也会不可避免地产生一些问题。有几个堪称无价之宝的工具可以帮助优化代码的健全性和加载速度。很重要的一点是，你手头准备好了这些工具，不管你主要用来开发的浏览器是哪个。我们推荐先在Firefox和Safari上做开发，然后用Google Chrome和Opera，最后针对IE用条件判断做一些额外的微调。下面列出的是一些有帮助的调试器和速度分析器： 

    • Firefox: Firebug, Page Speed, YSlow
    • Safari: Web Inspector
    • Google Chrome: Developer Tools
    • Opera: Dragonfly
    • Internet Explorer 6-7: Developer Toolbar
    • Internet Explorer 8-10: Developer Tools

    优化 JavaScript 的特征◊

    • 编写可维护的代码
    • 单变量模式
    • Hoisting：把所有变量声明统一放到函数的起始位置 （在后部声明的变量也会被JS视为在头部定义，由此会产生问题）
    • 不要扩充内置原型（虽然给Object(), Function()之类的内置原型增加属性和方法很巧妙，但是会破坏可维护性）
    • 不要用隐含的类型转换
    • 不要用 eval()
    • 用 parseInt() 进行数字转换
    • （规范）左大括号的位置
    • 构造器首字母大写
    • 写注释
    • 不要用 void
    • 不要用 with 语句
    • 不要用 continue 语句
    • 尽量不要用位运算

    Stoyan Stefanov 的博文包含了以上原则 并有详细说明（【译者注】这篇博文值得一看）。

    易用性◊返回顶部

    美国政府相关法规508节： 局域网和互联网信息及应用标准。

    — 本公司开发的接口必须符合相关法规508节的要求。

    W3C 的易用性检查点清单。

    — 本公司开发的接口必须符合第一优先级指南。

你可能感兴趣的:(前端,HTML5)

  • day15｜前端框架学习和算法 universe_01 前端算法笔记
    T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
  • vue element 封装表单 影子信息 vuevue.jsjavascript前端
    背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
  • 前端面试每日 3+1 —— 第39天 浪子神剑
    今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
  • 前端数据库：IndexedDB从基础到高级使用指南
    文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
  • 【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三） 笙囧同学 java前端状态模式
    核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
  • 从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
    作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
  • 14.tornado操作之应用Websocket协议实现聊天室功能 孤寒者 Tornado框架从入门到实战websockettornado聊天室功能实现python
    目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
  • 为什么学习Web前端一定要掌握JavaScript？ web前端学习指南
    为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
  • 小架构step系列25：错误码 秋千码途 架构java
    1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
  • Java朴实无华按天计划从入门到实战（强化速战版-66天） 岫珩 Java后端java开发语言学习Java时间安排学习计划
    致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
  • 《跨域资源共享CORS的深层逻辑与前端实践精要》
    不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
  • 深入了解 Kubernetes（k8s）：从概念到实践
    目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
  • 大厂都在用的前端缓存策略，你掌握了吗？ AI架构全栈开发实战笔记 前端缓存ai
    大厂都在用的前端缓存策略，你掌握了吗？关键词：前端缓存、HTTP缓存、ServiceWorker、CDN缓存、缓存策略、性能优化、浏览器缓存摘要：本文将深入探讨前端开发中常用的缓存策略，从浏览器缓存到ServiceWorker，从HTTP缓存头到CDN缓存，全面解析大厂都在使用的高效缓存技术。通过生动的比喻和实际代码示例，帮助开发者理解并掌握这些提升Web应用性能的关键技术。背景介绍目的和范围本文
  • 26. 什么是雪碧图，作用和原理了解吗 yqcoder 前端面试-CSScss前端html
    总结小图合成一张，使用background来使用，减少资源请求一、什么是雪碧图？雪碧图（CSSSprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过CSS控制显示其中的某一部分。它常用于网站中图标、按钮等小图较多的场景。二、雪碧图的作用作用说明✅减少HTTP请求次数合并多个图片为一张图，减少请求资源数✅提升页面加载速度尤其在图片较多时效果明显✅避免图片加载闪烁鼠标悬停切换图片时不
  • H5UI微信小程序前端框架实战指南 ai
    本文还有配套的精品资源，点击获取简介：H5UI是一个为微信小程序开发设计的前端框架，基于H5技术，提供简洁高效的组件库。框架集成了丰富的UI元素，如按钮、表格、导航栏等，简化了界面布局和交互的实现。通过安装、引入、使用组件和事件绑定四个步骤，开发者可以轻松构建功能齐全的应用。了解性能优化等注意事项对于高效开发同样重要。1.微信小程序前端开发框架介绍微信小程序概述微信小程序是微信官方推出的一种无需下
  • Ubuntu安装LAMP L_h1 测试ubuntulinux
    在安装vim时遇到了一个问题：E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend)，是否有其他进程正占用它？解决办法：强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud
  • 震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！ coding随想 JavaScript前端javascripthtml5
    一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入
  • 11. HTML 中 DOCTYPE 的作用 yqcoder 前端面试-CSShtml前端
    总结H5的声明HTML5的DOCTYPE声明HTML5中的声明用于告诉浏览器当前文档使用的是HTML5的文档类型。它必须是文档中的第一行内容（在任何HTML标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE的作用触发标准模式：DOCTYPE声明的主要作用是让浏览器以标准模式（StandardsMode）来解析和渲染页面，而不是以兼容模式（QuirksMode）。兼容性：在没有DOCT
  • Coze Studio 架构拆解：AI Agent 开发平台项目结构全分析 代码简单说 2025开发必备(限时特惠)架构人工智能CozeStudio架构AIAgent开发平台全栈AI工程化图解架构
    CozeStudio架构拆解：AIAgent开发平台项目结构全分析标签：CozeStudio项目架构、领域驱动设计DDD、全栈开发规范、Hertz框架、前后端协作、云原生容器、前端测试、IDL接口设计、微服务解耦、AI开发平台源码分析在最近研究AIAgent开发平台的过程中，我深入分析了刚刚开源的CozeStudio项目。这套系统是国内少有的开源全栈AI工程化项目，代码整洁、架构先进，特别是它基于
  • 关于前端的性能优化
    性能优化主要涵盖了以下四个方面：(tip:仅代表个人总结，如有不当，还希望看到的大佬多多指示)减少网络请求：合并文件、使用CDN、启用缓存。优化资源加载：代码分割、懒加载、图片压缩。提升渲染性能：减少重绘回流、防抖节流、使用WebWorker。监控和迭代：定期使用工具检测性能，持续优化。一、网络层面优化减少HTTP请求合并文件：将多个CSS或JavaScript文件合并成一个，减少请求次数。使用C
  • linux网卡显示未知未托管,linux有线网络显示设备未托管
    NetworkManagerNetworkManager是为了使网络配置尽可能简单而开发的网络管理软件包，如果使用DHCP，NetworkManager会替换默认的路由表、从DHCP服务器获取IP地址并根据情况设置域名服务器，NetworkManager的目标是使网络能够开箱即用。NetworkManager由两部分组成:一个以超级用户运行的守护进程(network-manager)；一个前端管理
  • 页面开发样式和布局入门：Vite + Vue 3 + Less
    页面开发样式和布局入门：Vite+Vue3+Less引言在现代前端开发中，样式和布局是页面开发的核心部分。随着技术的不断发展，Vite、Vue3和Less等工具和框架的出现，使得前端开发变得更加高效和灵活。然而，尽管这些工具和框架提供了强大的功能，但在实际开发中仍然会遇到各种样式和布局的问题。本文将结合Vite、Vue3和Less，详细介绍在页面开发中常见的样式和布局问题，并提供解决方案和最佳实践
  • 推客系统小程序机构版开发上线全攻略（2025年最新版） vx_qutudy 推客小程序推客系统开发推客系统源码
    一、开发前准备：筑牢基础，合规先行1.1注册与认证账号注册：登录微信公众平台注册小程序账号，选择“机构版”类型，获取唯一AppID。资质认证：基础资质：企业营业执照、法人身份证、对公账户信息。特殊资质：涉及支付功能：需办理《增值电信业务经营许可证》（ICP证）。涉及教育/医疗内容：需《互联网信息服务许可证》或相关行业资质。1.2技术选型：高效与扩展并重模块推荐方案前端框架微信原生框架（WXML+W
  • 网络安全第14集 不灭锦鲤 web安全安全
    前言：小迪安全14集，这集重点内容：0、什么是js渗透测试？在javascript中也存在变量和函数，存在可控变量和函数就有可能存在在漏洞，js开发的web应用和php、java开发的区别是，js能看得到的源代码，php看不到，但是风险就是未授权访问、配置信息泄露（加密算法、key秘钥等），源代码看得到，存在更多的url泄露，从而可能会出现未授权访问，从url，前提：web应用可以采用前端语言或后
  • 怎么判断一个DAPP是否真正去中心化
    判断一个DAPP（去中心化应用）是否真正去中心化，需要从多个维度进行考察。以下是关键评估标准：1.区块链依赖程度✅真正去中心化：核心逻辑和数据处理完全依赖智能合约，运行在区块链上（如以太坊、Solana等）。❌伪去中心化：依赖中心化服务器处理关键数据或业务逻辑，仅前端去中心化。2.智能合约控制权✅去中心化：合约代码开源，无管理员密钥（adminkey）或可升级后门，治理由DAO（去中心化自治组织）
  • Web前端交互利用Python跟大模型操作 哥本哈士奇 前端交互python
    Web前端交互利用Python跟大模型操作一个简单的演示，如何把大模型应用集成到自己的应用场景当中。这里的场景我们模拟的是在吃鸡游戏中，一个作战计划，是否符合老六的行为规范。吃鸡游戏已经风靡很多年，游戏里每个人的游戏风格都不一样，有喜欢钢枪的，有喜欢随机应变的，也有喜欢当老六苟分的。每种风格的游戏方式以及游戏里的行为都不同，所以这里将演示如何应用大模型，去判断一个人的游戏方式，是否符合一个老六的行
  • 尚硅谷微服务尚医通前端npm报错
    尚硅谷微服务尚医通前端npm报错血泪史我的版本的8.0.0，弹幕里说降级npm到6.多就能安装，经过许久挣扎还是各种报错，最后通过一下办法解决解决办法:不需要降低npm版本，办法如下这里需要使用到cnpm：1.导入下载好到的项目2.安装cnpm：npminstallcnpm-g3.安装node-sass：cnpminstallnode-sass4.继续安装：cnpminode-sass-D5.删除
  • Layui核心语法快速入门指南 bemyrunningdog layui前端javascript开发语言
    Layui基本语法学习指南Layui是一个经典的模块化前端框架，以其轻量易用、组件丰富著称。以下是Layui的核心语法结构和使用方法：一、模块加载机制（核心基础）//标准模块加载语法layui.use(['module1','module2'],function(){//回调函数中获取模块varmod1=layui.module1;varmod2=layui.module2;//模块功能调用mod
  • 前端基础知识Vue3系列 - 04（Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同）
    开始之前CompositionAPI可以说是Vue3的最大特点，那么为什么要推出CompositionApi，解决了什么问题？通常使用Vue2开发的项目，普遍会存在以下问题：代码的可读性随着组件变大而变差每一种代码复用的方式，都存在缺点TypeScript支持有限以上通过使用CompositionApi都能迎刃而解正文一、OptionsApiOptionsAPI，即大家常说的选项API，即以vue
  • Vue 工程化开发入门 dawn191228 前端学习vue.js前端javascript前端框架
    文章目录一、Vue工程化开发概述二、Vue脚手架三、项目运行流程四、组件化开发五、组件注册六、总结在当今的前端开发领域，Vue.js以其简洁、高效的特性受到了广泛的欢迎。Vue的工程化开发能够帮助我们更好地组织和管理项目，提高开发效率和代码质量。本文将带你了解Vue工程化开发入门知识，包括脚手架、项目运行流程、组件化以及组件注册。一、Vue工程化开发概述工程化开发是一种将软件开发过程规范化、标准化
  • Hadoop(一) 朱辉辉33 hadooplinux
    今天在诺基亚第一天开始培训大数据，因为之前没接触过Linux，所以这次一起学了，任务量还是蛮大的。 首先下载安装了Xshell软件，然后公司给了账号密码连接上了河南郑州那边的服务器，接下来开始按照给的资料学习，全英文的，头也不讲解，说锻炼我们的学习能力，然后就开始跌跌撞撞的自学。这里写部分已经运行成功的代码吧.    在hdfs下，运行hadoop fs -mkdir /u
  • maven An error occurred while filtering resources blackproof maven报错
    转：http://stackoverflow.com/questions/18145774/eclipse-an-error-occurred-while-filtering-resources   maven报错： maven An error occurred while filtering resources   Maven -> Update Proje
  • jdk常用故障排查命令 daysinsun jvm
    linux下常见定位命令： 1、jps      输出Java进程       -q       只输出进程ID的名称，省略主类的名称；       -m      输出进程启动时传递给main函数的参数；     &nb
  • java 位移运算与乘法运算 周凡杨 java位移运算乘法
      对于 JAVA 编程中，适当的采用位移运算，会减少代码的运行时间，提高项目的运行效率。这个可以从一道面试题说起：     问题： 用最有效率的方法算出2 乘以8 等於几?” 答案：2 << 3 由此就引发了我的思考，为什么位移运算会比乘法运算更快呢？其实简单的想想，计算机的内存是用由 0 和 1 组成的二
  • java中的枚举(enmu) g21121 java
    从jdk1.5开始，java增加了enum(枚举)这个类型，但是大家在平时运用中还是比较少用到枚举的，而且很多人和我一样对枚举一知半解，下面就跟大家一起学习下enmu枚举。先看一个最简单的枚举类型，一个返回类型的枚举： public enum ResultType { /** * 成功 */ SUCCESS, /** * 失败 */ FAIL,
  • MQ初级学习 510888780 activemq
    1.下载ActiveMQ 去官方网站下载：http://activemq.apache.org/ 2.运行ActiveMQ 解压缩apache-activemq-5.9.0-bin.zip到C盘，然后双击apache-activemq-5.9.0-\bin\activemq-admin.bat运行ActiveMQ程序。 启动ActiveMQ以后，登陆：http://localhos
  • Spring_Transactional_Propagation 布衣凌宇 springtransactional
    //事务传播属性 @Transactional(propagation=Propagation.REQUIRED)//如果有事务，那么加入事务，没有的话新创建一个 @Transactional(propagation=Propagation.NOT_SUPPORTED)//这个方法不开启事务 @Transactional(propagation=Propagation.REQUIREDS_N
  • 我的spring学习笔记12-idref与ref的区别 aijuans spring
    idref用来将容器内其他bean的id传给<constructor-arg>/<property>元素，同时提供错误验证功能。例如： <bean id ="theTargetBean" class="..." /> <bean id ="theClientBean" class=&quo
  • Jqplot之折线图 antlove jsjqueryWebtimeseriesjqplot
    timeseriesChart.html <script type="text/javascript" src="jslib/jquery.min.js"></script> <script type="text/javascript" src="jslib/excanvas.min.js&
  • JDBC中事务处理应用 百合不是茶 javaJDBC编程事务控制语句
      解释事务的概念; 事务控制是sql语句中的核心之一;事务控制的作用就是保证数据的正常执行与异常之后可以恢复   事务常用命令:             Commit提交         
  • [转]ConcurrentHashMap Collections.synchronizedMap和Hashtable讨论 bijian1013 java多线程线程安全HashMap
    在Java类库中出现的第一个关联的集合类是Hashtable，它是JDK1.0的一部分。 Hashtable提供了一种易于使用的、线程安全的、关联的map功能，这当然也是方便的。然而，线程安全性是凭代价换来的――Hashtable的所有方法都是同步的。此时，无竞争的同步会导致可观的性能代价。Hashtable的后继者HashMap是作为JDK1.2中的集合框架的一部分出现的，它通过提供一个不同步的
  • ng-if与ng-show、ng-hide指令的区别和注意事项 bijian1013 JavaScriptAngularJS
            angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或
  • 【持久化框架MyBatis3七】MyBatis3定义typeHandler bit1129 TypeHandler
    什么是typeHandler? typeHandler用于将某个类型的数据映射到表的某一列上，以完成MyBatis列跟某个属性的映射   内置typeHandler MyBatis内置了很多typeHandler，这写typeHandler通过org.apache.ibatis.type.TypeHandlerRegistry进行注册，比如对于日期型数据的typeHandler，
  • 上传下载文件rz,sz命令 bitcarter linux命令rz
    刚开始使用rz上传和sz下载命令： 因为我们是通过secureCRT终端工具进行使用的所以会有上传下载这样的需求： 我遇到的问题： sz下载A文件10M左右，没有问题 但是将这个文件A再传到另一天服务器上时就出现传不上去，甚至出现乱码，死掉现象，具体问题 解决方法： 上传命令改为;rz -ybe 下载命令改为：sz -be filename 如果还是有问题： 那就是文
  • 通过ngx-lua来统计nginx上的虚拟主机性能数据 ronin47 ngx-lua　统计 解禁ip
    介绍 以前我们为nginx做统计,都是通过对日志的分析来完成.比较麻烦,现在基于ngx_lua插件,开发了实时统计站点状态的脚本,解放生产力.项目主页: https://github.com/skyeydemon/ngx-lua-stats 功能 支持分不同虚拟主机统计, 同一个虚拟主机下可以分不同的location统计. 可以统计与query-times request-time
  • java-68-把数组排成最小的数。一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的。例如输入数组{32, 321}，则输出32132 bylijinnan java
    import java.util.Arrays; import java.util.Comparator; public class MinNumFromIntArray { /** * Q68输入一个正整数数组，将它们连接起来排成一个数，输出能排出的所有数字中最小的一个。 * 例如输入数组{32, 321}，则输出这两个能排成的最小数字32132。请给出解决问题
  • Oracle基本操作 ccii Oracle SQL总结Oracle SQL语法Oracle基本操作Oracle SQL
    一、表操作 1. 常用数据类型 NUMBER(p,s)：可变长度的数字。p表示整数加小数的最大位数，s为最大小数位数。支持最大精度为38位 NVARCHAR2(size)：变长字符串，最大长度为4000字节（以字符数为单位） VARCHAR2(size)：变长字符串，最大长度为4000字节（以字节数为单位） CHAR(size)：定长字符串，最大长度为2000字节，最小为1字节，默认
  • [强人工智能]实现强人工智能的路线图 comsci 人工智能
        1：创建一个用于记录拓扑网络连接的矩阵数据表      2:自动构造或者人工复制一个包含10万个连接(1000*1000)的流程图      3：将这个流程图导入到矩阵数据表中      4：在矩阵的每个有意义的节点中嵌入一段简单的
  • 给Tomcat，Apache配置gzip压缩(HTTP压缩)功能 cwqcwqmax9 apache
    背景： HTTP 压缩可以大大提高浏览网站的速度，它的原理是，在客户端请求网页后，从服务器端将网页文件压缩，再下载到客户端，由客户端的浏览器负责解压缩并浏览。相对于普通的浏览过程HTML ,CSS,Javascript , Text ，它可以节省40%左右的流量。更为重要的是，它可以对动态生成的，包括CGI、PHP , JSP , ASP , Servlet,SHTML等输出的网页也能进行压缩，
  • SpringMVC and Struts2 dashuaifu struts2springMVC
    SpringMVC VS Struts2 1: spring3开发效率高于struts 2: spring3 mvc可以认为已经100%零配置 3: struts2是类级别的拦截， 一个类对应一个request上下文， springmvc是方法级别的拦截，一个方法对应一个request上下文，而方法同时又跟一个url对应 所以说从架构本身上 spring3 mvc就容易实现r
  • windows常用命令行命令 dcj3sjt126com windowscmdcommand
    在windows系统中，点击开始－运行，可以直接输入命令行，快速打开一些原本需要多次点击图标才能打开的界面，如常用的输入cmd打开dos命令行，输入taskmgr打开任务管理器。此处列出了网上搜集到的一些常用命令。winver 检查windows版本 wmimgmt.msc 打开windows管理体系结构(wmi) wupdmgr windows更新程序 wscrip
  • 再看知名应用背后的第三方开源项目 dcj3sjt126com ios
    知名应用程序的设计和技术一直都是开发者需要学习的，同样这些应用所使用的开源框架也是不可忽视的一部分。此前《 iOS第三方开源库的吐槽和备忘》中作者ibireme列举了国内多款知名应用所使用的开源框架，并对其中一些框架进行了分析，同样国外开发者 @iOSCowboy也在博客中给我们列出了国外多款知名应用使用的开源框架。另外txx's blog中详细介绍了 Facebook Paper使用的第三
  • Objective-c单例模式的正确写法 jsntghf 单例iosiPhone
    一般情况下，可能我们写的单例模式是这样的： #import <Foundation/Foundation.h> @interface Downloader : NSObject + (instancetype)sharedDownloader; @end #import "Downloader.h" @implementation
  • jquery easyui datagrid 加载成功，选中某一行 hae jqueryeasyuidatagrid数据加载
    1.首先你需要设置datagrid的onLoadSuccess $( '#dg' ).datagrid({onLoadSuccess :  function (data){      $( '#dg' ).datagrid( 'selectRow' ,3); }});   2.onL
  • jQuery用户数字打分评价效果 ini JavaScripthtmljqueryWebcss
    效果体验：http://hovertree.com/texiao/jquery/5.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery用户数字打分评分代码 - HoverTree</
  • mybatis的paramType kerryg DAOsql
    MyBatis传多个参数： 1、采用#{0},#{1}获得参数：    Dao层函数方法：     public User selectUser(String name,String area); 对应的Mapper.xml    <select id="selectUser" result
  • centos 7安装mysql5.5 MrLee23 centos
    首先centos7 已经不支持mysql，因为收费了你懂得，所以内部集成了mariadb，而安装mysql的话会和mariadb的文件冲突，所以需要先卸载掉mariadb，以下为卸载mariadb，安装mysql的步骤。   #列出所有被安装的rpm package rpm -qa | grep mariadb   #卸载 rpm -e mariadb-libs-5.
  • 利用thrift来实现消息群发 qifeifei thrift
               Thrift项目一般用来做内部项目接偶用的，还有能跨不同语言的功能，非常方便，一般前端系统和后台server线上都是3个节点，然后前端通过获取client来访问后台server，那么如果是多太server，就是有一个负载均衡的方法，然后最后访问其中一个节点。那么换个思路，能不能发送给所有节点的server呢，如果能就
  • 实现一个sizeof获取Java对象大小 teasp javaHotSpot内存对象大小sizeof
       由于Java的设计者不想让程序员管理和了解内存的使用，我们想要知道一个对象在内存中的大小变得比较困难了。本文提供了可以获取对象的大小的方法，但是由于各个虚拟机在内存使用上可能存在不同，因此该方法不能在各虚拟机上都适用，而是仅在hotspot 32位虚拟机上，或者其它内存管理方式与hotspot 32位虚拟机相同的虚拟机上 适用。     
  • SVN错误及处理 xiangqian0505 SVN提交文件时服务器强行关闭
    在SVN服务控制台打开资源库“SVN无法读取current” ---摘自网络 写道 SVN无法读取current修复方法 Can't read file : End of file found 文件：repository/db/txn_current、repository/db/current   其中current记录当前最新版本号，txn_current记录版本库中版本
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他