daique1908

web页面uri唤醒应用_带有数据URI的高性能Web设计

web页面uri唤醒应用

我们最近在Webdesigntuts +上介绍了Web设计中的数据URI的内容，原因和方式，在其中研究了使用数据URI进行性能友好的界面设计的一些可能性。

在今天的Premium教程中，我们将采用介绍性文章中介绍的一些理论，以一些用于开发完全实现的用户界面的示例为基础。为了使事情有趣，我们还将使我们的设计具有响应性，并且将使用Dribbble API和jQuery从Envato Dribbble feed中提取一些图像。

有很多要讲的内容，所以让我们开始吧！

开始之前

正如我已经提到的那样，本教程基于Web设计教程中的数据URI的内容，原因和方式。即使您对数据URI的了解已经扎实，我还是强烈建议您在开始此处之前先阅读本文。我将使用初始文章中的练习中的一些代码来节省时间，因此，我将要求您在以下几点上跳回到原始文章。

其次，在该项目中，我们将严重依赖数据URI，以便为您提供大量使用此技术的实践。是否实际在生产中大量使用数据URI还是有争议的（尤其是如果支持

最后，该项目在Webkit，Firefox和Internet Explorer的最新版本中进行了测试。您可以放心地假定此接口在IE7及以下版本中将无法完全发挥作用（尽管如果需要，可以很容易地将后援应用于旧版IE版本）。此外，在本教程中，我将引用-webkit和CSS3元素的通用前缀，但是源文件将包含所有供应商前缀。

关于数据URI的两分钟回顾

在开始破解之前，让我们快速回顾一下数据URI方案是什么，以及为什么它可以作为向浏览器提供元素的好选择，这些元素通常会消耗资源并降低性能。

数据URI是一种将二进制数据编码为ASCII文本字符串的方式，现代浏览器可以读取和呈现该字符串。
数据URI通常用于替换图像文件，但是可以对任何二进制数据进行编码，包括SVG，多媒体，字体等。
使用数据URI的主要好处是减少了在浏览器窗口中加载页面所需的HTTP请求数量。简而言之，每增加一个HTTP请求（通常）都会对网站的整体性能产生负面影响。
数据URI比标准文件类型（例如JPG图像）大33％左右，但通过压缩和gzip压缩，该数量通常减少到5％以下。这个额外的文件大小通常不是一个大问题，但是在选择最佳技术以将资产包含到设计中时要牢记这一点。
数据URI冗长，毫无意义，看起来也不是很漂亮，使得标记和样式表难以阅读，浏览和维护。最好在文本编辑器中使用代码折叠！

进攻计划

本教程将分为三个单独的阶段，我们将按以下顺序进行处理：

使用HTML和CSS中的参考图片设计“全角”网站。
从Dribbble API和jribbble jQuery插件中提取图像
添加媒体查询以使站点在较小的视口中响应。

好的！聊够了！让我们开始编码吧！

步骤1：初始标记

对于我们的设计，我们将以最新HTML5 Boilerplate作为起点。我们不会在项目中使用样板的所有功能（例如，现代化脚本或分析），但是最好在初始阶段保持“原样”，然后在项目后期返回以减少我们最终没有使用的功能（或者将来可能不会使用）。

在还包含css和js文件夹的目录中创建一个新的index.html文件。

在文档的中，添加

，精选内容

和

。我们将继续进行充实。



    
        Albireo: Designing With Data URIs

接下来，让我们使用Eric Myers CSS Reset重置CSS并添加一些基本的布局样式：

* {
    /* Give all elements box-sizing of border-box
    (Total width = width + margin + padding + border) */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
  margin:0;
  padding:0;
  background-color: #eee;
}

header {
  height: 80px;
  margin:0;
  padding:0;
  position: relative;
  background-color: #3C3C3C;
}

.featured-content {
  margin-top: 4%;
}

footer {
  border-top: 1px solid #eee;
  width:100%;
  min-height: 80px;
  background-color: #ccc;
  margin-top: 0;
  text-align: center;
  padding-top:21px;
}

除了border-box框模型的通用应用之外，这里的所有内容都应该相当简单。在此，代替使用将填充，边距和边框分别添加到元素的定义宽度的标准框模型，定义的宽度是元素的总宽度，包括填充，边距和边框。

这种方法在可变布局中很流行，许多流行的框架都使用border-box模型，包括Twitter Bootstrap和Zurb Foundation，因为它使处理百分比无效的工作变得容易。是否需要等宽的列，每列之间有沟槽？简单。只需应用Boder-Box模型并将该列设置为33.333％-无需分别计算填充和边距。

当然，到目前为止没有什么可看的，这只是我们的画布！

步骤2：定义简单的流体网格

如果看一下该演示，您将看到精选内容将被布置在三个等宽列中。在幕后，这些列位于

其中的类为，设置居中内容区域，最大宽度为1024px。

为了使我们的项目顺利进行，让我们在CSS中定义这个简单的网格（部分改编自Zurb Foundation 3.1 ）：

.row {
  width:1024px;
  margin:0 auto;
  max-width: 100%;

  /* Prevent child elements scaling down further once the viewport hits 767px */
  min-width: 767px;
  background-color: transparent;
}

.row:after {
  /* Clearfix applied since columns are floated */
  content: "";
  display: table;
  clear: both;
}

.row .three {
    /* Remember that the width of this element is the total of the defined width + padding + margin + border */
    width: 33.33333%;
}

.column, .columns {
    float: left;
    min-height: 1px;
    padding: 0 15px;
    position: relative;
}

在继续之前，让我澄清一下这段代码中的几点。首先，您会看到我们对行应用了min-width 767px。这意味着，在小于此宽度的视口上查看时，任何子元素（即.row .three ）都将停止缩放，以防止特色内容项变得太小。在本教程的稍后部分，我们将重新介绍媒体查询，以为浏览器提供有关视口何时小于767像素宽的其他说明。

其次，因为我们知道每一行都将包含浮动的子元素，所以我们需要在结束行div标签之后清除所有浮动。在这个项目中，我将clearfix hack应用于了row:after伪元素。如果你打算建立这个项目了，你可能需要额外clearfixes，只是追加了.row:after有一个附加的类的规则.clearfix:after 。

步骤3：定义版式和图标字体

尽管我们还没有使用过任何字体，但我更喜欢在样式表的顶部建立我的字体（尽管没有什么可以阻止您稍后再处理）。为了使我们可以直接进入设计而无需回溯，现在让我们为字体和图标字体设置所有基本规则。

对于自定义的base64编码图标字体，我们将使用出色的IcoMoon应用程序生成图标字体集和所需CSS。有关屏幕截图的完整演练，请参阅Data URI教程。

总结一下，使用IcoMoon应用程序，创建以下图标字体：

选择一个自定义集，其中包括Broccolidry系列中的“心脏”，“眼睛”，“评论”和“放大镜”图标。
将基准设置更改为10％
在“更多设置”下，将字体名称更改为“ customFont”
选中“ Base64在CSS中编码和嵌入字体”复选框

下载字体，打开主样式表，然后将CSS复制到项目的style.css文件中。

除一些其他字体样式外，样式表的“版式”部分还将包含以下代码：

p, a, h1, h2, h3, h4, h5, h6, li {
  font-family: sans-serif;
}

a {
text-decoration: none;
}

@font-face {
  font-family: 'customFont';
  /* IE9 Compatibitly mode */
  src:url('fonts/customFont.eot');
  /* Old IE Fix */
  src:url('fonts/customFont.eot?#iefix')
}
@font-face {
  font-family: 'customFont';
  src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Use the following CSS code if you want to have a class per icon */
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: 'customFont';
  font-style: normal;
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}
.icon-search:before {
  content: "\21";
}
.icon-comment:before {
  content: "\22";
}
.icon-heart:before {
  content: "\23";
}
.icon-eye:before {
  content: "\24";
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
  font-family: 'customFont';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

有关此代码的语法，其用法和旧版IE修复程序的更详细说明，请参阅Intial Data URI教程。

现在，我们已经完成了所有基础工作，包括基本的流体网格和base64编码的自定义图标字体，让我们开始遍历每个部分并为我们的基本标记提供一些急需的修饰。

步骤4：为身体提供重复的背景

在第一个教程中，我们从Subtle Patterns的一幅小图像创建了一个Data URI，这对于我们网站的背景来说是完美的。取得此base64编码的图像，并将其作为重复的background-image添加到页面的元素中。

使用以下CSS充实body规则，该CSS取自本教程前面的步骤：

body {
  margin:0;
  padding:0;
  background-image: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFBNjg5RjI2RjZCODExRTE5Q0IwRDA0QjY4QTg3NEJCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFBNjg5RjI3RjZCODExRTE5Q0IwRDA0QjY4QTg3NEJCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUE2ODlGMjRGNkI4MTFFMTlDQjBEMDRCNjhBODc0QkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUE2ODlGMjVGNkI4MTFFMTlDQjBEMDRCNjhBODc0QkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wAARCAAsACwDAREAAhEBAxEB/8QAbAABAQEBAQEBAAAAAAAAAAAAAwIBAAQFCgEBAAAAAAAAAAAAAAAAAAAAABAAAwACAgEDAgQDCQAAAAAAAQIDEgQRExQhIiMAJEEyMwVCNBUxokOjVGQ1ZdURAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AP2JIiaaPGLokUQPKThimmhbEKoXjHUXglEJUIFKqQgAQJpNdHXraLfKHN6vbN23bOEnjbqm9WrYKs59aMU4RUQqBMhkgP3CNfKmVBoUOoxK11Gi60maOhBG6rKtFpNsUOJkzDirgpBpMQbYPDM8mtMmVqiY900eYRZXIBDtMgjFigU/kANmrft6xXUgtU6zNNGSuvXOEvbWCwlUz14AKrqEPtI6waYyqHp9fG7fKTnDv8r08fjHLPDsx8XH8M+cfXLL3/QDOmvoq0bVcV/WetyHtus7zl3L1ootVquk+uajAsiKgUzBCZSprUUlS2mxLSkxDU/baMCCqkEq+m6ngAcnXJKqTEgSCtiddmnXEmMwMdnYRmnayqSRqa7r6z5YnO3q01JWfFGLyDmrqVkNNVGR5iNRD01gYCTEnqIbVXWDzZaKRxkhQktPIL1+2Jee0wo4Hs3eFTyYoCVF1ULOOzIE5qoWb+roF5ZJgP3XZ29EfB7MvGwr5mXOfnfqdXHZ6+P19nHyZ9nxfQUJR/cBPa7aEKS2oULxbUqpKPQzoqsu6CGnRaLyi5SK8NUOGz2KbNTGfAnEsmxsryq2tNsX19QElj1n9Z+Ss2PWpagcyDdjYbTbsp79V+S7k+7Tb0+WvoWOgWIDuATAnJviyaQYdZNdn3mtjcKW2dir4ReCAt00VmM462uOTMj1kSzckvXsBNelNrKzq8InlYxfKewykel9lPbTXainlJHh0UguA5wmBdu73eL1jHn/AJHOGHXjl1ePl3f1Hj8MOjD5Mufh+gUGdDsNAMw5M7NJxMVtIibpNvQG8lQzZwV4ICFuV9gHVpV1FXTHLcFNQRIgYVjzLklpONZdVgVorTbjgoUYnrYO1i2ulm3nUXXOuxssQkHimTLSOR419aMzwZkkyPOTOT20DiYShOlJtPTm3Yq09qa6Li0q1kyhpQkwyAb0iOCQoX2BO6mzR1Gi3VsKrCtmYLLqKNjFw0bh7s7AzbBuk8uwZSZWBvh8XDqrxxh0cnye7nLHs7OfIz93bnxz8mfHu+gCuyv7e0NRYzwqqy0UmZQnPF5QWFV9BDXmaoFdVK+onx2GS1BvHMattTcB6AeanokdnBQq3CkkS2YzUKr8++ahHJxRphtNfyqK9m5jB84xUgq2xNvZs3HqtG16LzJDyqOA5BcJ1gKbr02W0QqrsSya1QyGXUoiweK5M7XcXTKZHMcgzkq0jYFjEaIMpH7T3GMSyjxeFLGECxUeJwpwTn4fyr8eKzCfFv2+X5NfJ/s6e2ng9H+m8f8ATy593kY92f49fw/QL9tztduHOH3Xfjx4/FMM8vb4uOfH8POXPuz+g83yeVDt7PB6U8bLnLzO2n89n8nHV1+Pz6dmfZ8nV9BVe7zZ+Lzjw/8AUfy9eHQ3j9WXp/Ue7Dj+Doy7PXp+gX7Xplhxx2now57vJ5p2Y5e/yOc+3L14z7PTL6CNXt79ny/5ntr08foeD2fb+N+OXXj5GXv7uf8AD6foPn/deV/0H+f3/wDgf38/9r9B/9k=);
  background-repeat: repeat;
  background-color: #eee;
}

大！现在，我们有了一个漂亮的背景图块，该图块在整个文档的y和x轴上都重复。

步骤5：标记和样式网站标题

跳回到您的标记中，并在

部分中添加以下HTML：


Albireo


	Home
	About
	Categories
	Submit

接下来，让我们使用重复线性渐变呈现的格子背景来设置标题背景的样式：

header {
  height: 80px;
  margin:0;
  padding:0;

  /* We'll be positioning elements absolutely inside the header shortly */
  position: relative;

  border-bottom: 1px solid #303031;

  box-shadow: inset 0px -1px 14px rgba(0, 0, 0, .6), 00px 5px 10px rgba(0, 0, 0, .1) inset, 0px 1px 1px white;

  /* Left to right linear gradient */
  background-image: -webkit-repeating-linear-gradient(45deg,
  transparent 0%, transparent 60px,
  rgba(54, 54, 54, 0.7) 60px, rgba(54, 54, 54, 0.7) 100px,
  rgba(0, 255, 199, 0.1) 100px, rgba(0, 255, 199, 0.1) 140px,
  rgba(172, 172, 172, 0.1) 140px, rgba(172, 172, 172, 0.1) 160px),

  /* Right to left linear overlayed gradient */
  -webkit-repeating-linear-gradient(-45deg,
  transparent 0%,transparent 60px,
  rgba(54, 54, 54, 0.7) 60px, rgba(54, 54, 54, 0.7) 100px,
  rgba(0, 255, 199, 0.1) 100px, rgba(0, 255, 199, 0.1) 140px,
  rgba(172, 172, 172, 0.1) 140px, rgba(172, 172, 172, 0.1) 160px);

  /* Provide a fallback background-color */
  background-color: #3C3C3C;
}

该背景是对最近在Webdesigntuts +文章中使用的技术的修改。有关更多信息，请参考《 Webdesign中的纹理的内容，位置和方式》。

接下来，让我们添加.svg徽标，您可以从本教程的资源部分下载该徽标。

.logo {
  width: 175px;
  height: 80px;
  margin-left: 15px;
  top: 5px;
  position: absolute;
  background-repeat: no-repeat;
  display: block;

  /* Render text invisible */
  font-size: 0;
  color: transparent;
  text-shadow: none;
}

.logo img {width:100%}

您会注意到，我将徽标作为HTML标记（带有附加的HTTP请求）中的外部.svg文件进行了引用，以实现完全可扩展的矢量解决方案。对于真正的免费图像设计，您还可以直接在HTML本身中使用.svg文件。要了解如何最好地做到这一点，请参阅可伸缩矢量图形（SVG）入门。

接下来，我们将为网站设置一个简单的导航菜单：

nav {
  top: 23px;
  position: absolute;
  right: 30px;
}

nav ul li {
  display:inline-block;
  font-weight:bold;
  font-size: 13px;
}

nav ul li a {
  color:#eee;
  display:block;
  padding:10px;
  height: auto;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 5px;
}

nav ul li a:hover {
  background: -webkit-linear-gradient(top, rgba(0,0,0,.4) 0%, rgba(0,0,0,0.6) 100%);
  color:white;
}

步骤6：设置简单的页脚样式

我们将暂时中断逻辑流程，并注意（非常简单的）页脚的样式，因为接下来的大部分步骤将集中在创建内容项上，我想确保我们在本节中保持势头。将以下标记添加到HTML：

Designing With Data URIs | Webdesign Tuts+ 2012

样式如下：

footer {
  border-top: 1px solid #eee;
  width:100%;
  min-height: 80px;
  background-color: #ccc;
  margin-top: 0;
  text-align: center;
  padding-top:21px;
  box-shadow: inset 0px 4px 10px rgba(0, 0, 0, .2);
}

footer a {
  color:#999;
  font-size: 14px;
  font-weight: 100;
}

完成之后，让我们回到设计的重点，即特色内容项。

步骤7：精选内容项

在本教程的下一阶段，我们将使用jQuery和Dribbble API从Dribbble中提取图像。现在，我们将使用占位符图像并设置图像本身的一般样式。

重要的是要注意，我们的标记将很快更改以适应jQuery插件，因此不要太在意以下标记！话虽如此，如果您不想从外部站点获取资源并提供自己的静态资产，那么这就是您将要使用的代码。

我们将设计接口，使其能够扩展，以通过复制整个

元素来容纳所需数量的图像。我们将首先创建一个

元素，然后再将其复制五次以创建两行三个图像。

在您HTML中，直接在

标记下添加特色内容图像面板的基本标记：


  
    
      
        
        
        
          20
          
8
          
4
          
        
      
    
    
          <-- 2nd featured content panel will go here... -->
    

    
          <-- 3rd featured content panel will go here... -->
    

    
          <-- 4th featured content panel will go here... -->
    

    
          <-- 5th featured content panel will go here... -->
    

    
          <-- 6th featured content panel will go here... -->

总结我们在这里所做的事情，我们创建了三列等宽（33.3333％）的列。在每列内部，我们创建了：

包含图像的
元素，
锚定链接，它将带我们到其他内容（即Dribbble）
链接中的span元素将定义我们的放大镜图标
没有设置来源的图片标签（我们将在后续步骤中使用jQuery填充图片标签）
“注释”，“视图”和“喜欢”的图标字体的无序列表，已被赋予一些任意的数字值。

因为图像的放置/流对整个文档结构并不重要，所以HTML5

和标记之间，添加以下代码：

步骤13：试一试

Jribbble'Get a Shot'参数的基本结构非常简单：

$.jribbble.getShotById(shotId, callback)

从Dribbble插入一个镜头ID，插件将捕获以下数据：

镜头本身（400像素x 300像素）
镜头标题
玩家;选手
观看次数
注释
喜欢
篮板

让我们看一下Jribbble页面上使用的演示函数，以了解如何请求此信息并将其插入DOM：

$(document).ready(function () {		
		
	// API Ref: http://api.dribbble/shots/:id
	$.jribbble.getShotById(196071, function (shot) {
		var html = [];
		
		$('#shotById a:first').attr('href', shot.url);
		$('#shotById img').attr('src', shot.image_url);
		$('#shotById h3').text(shot.title);
		$('#shotById h4').html('by ' + 
			shot.player.name + '');
		
		html.push('Views: ' + shot.views_count + '');
		html.push('Likes: ' + shot.likes_count + '');
		html.push('Comments: ' + shot.comments_count + '');
		html.push('Rebounds: ' + shot.rebounds_count + '');
		
		$('#shotById ul').html(html.join(''));
	});
});

即使您不是jQuery向导，这也应该相当简单。插件将要查找的是ID为"shotById"的元素，然后将带有以下标记的镜头，视图，喜欢，注释等插入DOM：


	
	
	Shot Title
	Player URL

	
		Views
		Likes
		Comments
		Rebounds

显然，这对于先前步骤中已经创建的现有HTML标记不起作用（原样）。为了确保我们的辛勤工作不会被破坏，我们需要蚕食我们的标记，并对js / jribbble.shots.js文件中的基本代码进行一些更改。

步骤14：摇一摇标记

我建议的第一件事是采用我们已经创建的现有内容项标记，将其复制并注释掉，以确保我们为以下步骤提供参考。接下来，使用以下代码覆盖未注释HTML：

如您所见，我们确实缩减了索引文件中的标记。下一步，我们将使jQuery填补空白。

步骤15：创建一个新函数

要进行射击并在

接下来，我们需要为每个特色内容项创建功能。在您的js / jribbble.shots.js文件中，根据需要从最后一步复制功能，更改每个镜头的镜头ID和元素ID。我们的最终脚本如下：

$(document).ready(function () {	

$.jribbble.getShotById(332826, function (shot) {
    var html = [];

    $('#shot1 a:first').attr('href', shot.url);
    $('#shot1 img').attr('src', shot.image_url);
    
    html.push(' ' + shot.views_count + '');
    html.push(' ' + shot.likes_count + '');
    html.push(' ' + shot.comments_count + '');

    $('#shot1 ul').html(html.join(''));
});

$.jribbble.getShotById(315548, function (shot) {
    var html = [];

    $('#shot2 a:first').attr('href', shot.url);
    $('#shot2 img').attr('src', shot.image_url);
    
    html.push(' ' + shot.views_count + '');
    html.push(' ' + shot.likes_count + '');
    html.push(' ' + shot.comments_count + '');
    
    $('#shot2 ul').html(html.join(''));
});

$.jribbble.getShotById(247707, function (shot) {
    var html = [];

    $('#shot3 a:first').attr('href', shot.url);
    $('#shot3 img').attr('src', shot.image_url);
    
    html.push(' ' + shot.views_count + '');
    html.push(' ' + shot.likes_count + '');
    html.push(' ' + shot.comments_count + '');
    
    $('#shot3 ul').html(html.join(''));
});

$.jribbble.getShotById(201434, function (shot) {
    var html = [];

    $('#shot4 a:first').attr('href', shot.url);
    $('#shot4 img').attr('src', shot.image_url);
    
    html.push(' ' + shot.views_count + '');
    html.push(' ' + shot.likes_count + '');
    html.push(' ' + shot.comments_count + '');

    $('#shot4 ul').html(html.join(''));
});

$.jribbble.getShotById(70447, function (shot) {
    var html = [];

    $('#shot5 a:first').attr('href', shot.url);
    $('#shot5 img').attr('src', shot.image_url);
    
    html.push(' ' + shot.views_count + '');
    html.push(' ' + shot.likes_count + '');
    html.push(' ' + shot.comments_count + '');
    
    $('#shot5 ul').html(html.join(''));
});

$.jribbble.getShotById(722560, function (shot) {
    var html = [];

    $('#shot6 a:first').attr('href', shot.url);
    $('#shot6 img').attr('src', shot.image_url);
    
    html.push(' ' + shot.views_count + '');
    html.push(' ' + shot.likes_count + '');
    html.push(' ' + shot.comments_count + '');
    
    $('#shot6 ul').html(html.join(''));
});
});

快速说明一下，如果您真正专注于将HTTP请求减少到最低限度，则可以轻松地将每个函数包含在HTML的


    
        你可能感兴趣的:(web页面uri唤醒应用_带有数据URI的高性能Web设计)
        
            
                
                    斤斤计较的婚姻到底有多难？
                        白心之岂必有为

                        很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
                    
                    情绪觉察日记第37天
                        露露_e800

                        今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
                    
                    芦花鞋一四
                        许叶晗

                        又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
                    
                    QQ群采集助手，精准引流必备神器
                        2401_87347160
其他经验分享
                        功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
                    
                    关于沟通这件事，项目经理不需要每次都面对面进行
                        流程大师兄

                        很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
                    
                    机器学习与深度学习间关系与区别
                        ℒℴѵℯ心·动ꦿ໊ོ꫞
人工智能学习深度学习python
                        一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
                    
                    铭刻于星（四十二）
                        随风至

                        69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
                    
                    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说
                        造命者说

                        底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
                    
                    2020-01-25
                        晴岚85

                        郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
                    
                    随笔 | 仙一般的灵气
                        海思沧海

                        仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
                    
                    想家
                        爆米花机

                        也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
                    
                    【iOS】MVC设计模式
                        Magnetic_h
iosmvc设计模式objective-c学习ui
                        MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
                    
                    OC语言多界面传值五大方式
                        Magnetic_h
iosui学习objective-c开发语言
                        前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
                    
                    一百九十四章. 自相矛盾
                        巨木擎天

                        唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
                    
                    UI学习——cell的复用和自定义cell
                        Magnetic_h
ui学习
                        目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
                    
                    element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
                    
                    10月|愿你的青春不负梦想-读书笔记-01
                        Tracy的小书斋

                        本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
                    
                    C语言宏函数
                        南林yan
C语言c语言
                        一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
                    
                    地推话术，如何应对地推过程中家长的拒绝
                        校师学

                        相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
                    
                    谢谢你们，爱你们！
                        鹿游儿

                        昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
                    
                    C语言如何定义宏函数？
                        小九格物
c语言
                        在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
                    
                    微服务下功能权限与数据权限的设计与实现
                        nbsaas-boot
微服务java架构
                        在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
                    
                    理解Gunicorn：Python WSGI服务器的基石
                        范范0825
ipythonlinux运维
                        理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
                    
                    小丽成长记（四十三）
                        玲玲54321

                        小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
                    
                    学点心理知识，呵护孩子健康
                        静候花开_7090

                        昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
                    
                    2021年12月19日，春蕾教育集团团建活动感受——黄晓丹
                        黄错错加油

                        感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
                    
                    Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断
                        尐尐呅

                        结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
                    
                    c++ 的iostream 和 c++的stdio的区别和联系
                        黄卷青灯77
c++算法开发语言iostreamstdio
                        在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
                    
                    瑶池防线
                        谜影梦蝶

                        冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
                    
                    爬山后遗症
                        璃绛

                        爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
                    
                                jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque
                                    qiaolevip
每天进步一点点学习永无止境跨域众观千象
                                    XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1

                                
                                mysql 分区查询优化
                                    annan211
java分区优化mysql
                                    


分区查询优化

  引入分区可以给查询带来一定的优势，但同时也会引入一些bug.
  
  分区最大的优点就是优化器可以根据分区函数来过滤掉一些分区，通过分区过滤可以让查询扫描更少的数据。
  所以，对于访问分区表来说，很重要的一点是要在where 条件中带入分区，让优化器过滤掉无需访问的分区。
  
  可以通过查看explain执行计划，是否携带 partitions
                                
                                MYSQL存储过程中使用游标
                                    chicony
Mysql存储过程
                                    DELIMITER $$ 
DROP PROCEDURE IF EXISTS getUserInfo $$ 
CREATE PROCEDURE getUserInfo(in date_day datetime)-- -- 实例-- 存储过程名为：getUserInfo-- 参数为：date_day日期格式:2008-03-08--    BEGINdecla
                                
                                mysql 和 sqlite 区别
                                    Array_06
sqlite
                                    转载： 
http://www.cnblogs.com/ygm900/p/3460663.html 
 
mysql 和 sqlite 区别 
 
SQLITE是单机数据库。功能简约，小型化，追求最大磁盘效率 
MYSQL是完善的服务器数据库。功能全面，综合化，追求最大并发效率 
 
MYSQL、Sybase、Oracle等这些都是试用于服务器数据量大功能多需要安装，例如网站访问量比较大的。而sq
                                
                                pinyin4j使用
                                    oloz
pinyin4j
                                    首先需要pinyin4j的jar包支持；jar包已上传至附件内 
 
方法一:把汉字转换为拼音；例如：编程转换后则为biancheng 
     
 
/**
     * 将汉字转换为全拼
     * @param src 你的需要转换的汉字
     * @param isUPPERCASE 是否转换为大写的拼音； true:转换为大写；fal
                                
                                微博发送私信
                                    随意而生
微博
                                    在前面文章中说了如和获取登陆时候所需要的cookie，现在只要拿到最后登陆所需要的cookie，然后抓包分析一下微博私信发送界面 
http://weibo.com/message/history?uid=****&name=**** 
可以发现其发送提交的Post请求和其中的数据， 
让后用程序模拟发送POST请求中的数据，带着cookie发送到私信的接入口，就可以实现发私信的功能了。 
                                
                                jsp
                                    香水浓
jsp
                                    JSP初始化 
    容器载入JSP文件后，它会在为请求提供任何服务前调用jspInit()方法。如果您需要执行自定义的JSP初始化任务，复写jspInit()方法就行了 
 
 
JSP执行 
    这一阶段描述了JSP生命周期中一切与请求相关的交互行为，直到被销毁。 
    当JSP网页完成初始化后
                                
                                在 Windows 上安装 SVN Subversion 服务端
                                    AdyZhang
SVN
                                    在 Windows 上安装 SVN Subversion 服务端2009-09-16高宏伟哈尔滨市道里区通达街291号 
  
最佳阅读效果请访问原地址：http://blog.donews.com/dukejoe/archive/2009/09/16/1560917.aspx 
  
现在的Subversion已经足够稳定，而且已经进入了它的黄金时段。我们看到大量的项目都在使
                                
                                android开发中如何使用 alertDialog从listView中删除数据？
                                    aijuans
android
                                    我现在使用listView展示了很多的配置信息，我现在想在点击其中一条的时候填出 alertDialog,点击确认后就删除该条数据，（ ArrayAdapter ，ArrayList，listView 全部删除），我知道在 下面的onItemLongClick 方法中 参数 arg2  是选中的序号，但是我不知道如何继续处理下去        1   2   3   
                                
                                jdk-6u26-linux-x64.bin 安装
                                    baalwolf
linux
                                    1.上传安装文件(jdk-6u26-linux-x64.bin) 
2.修改权限 
[root@localhost ~]# ls -l /usr/local/jdk-6u26-linux-x64.bin 
3.执行安装文件 
[root@localhost ~]# cd /usr/local 
[root@localhost local]# ./jdk-6u26-linux-x64.bin&nbs
                                
                                MongoDB经典面试题集锦
                                    BigBird2012
mongodb
                                    1.什么是NoSQL数据库？NoSQL和RDBMS有什么区别？在哪些情况下使用和不使用NoSQL数据库？ 
NoSQL是非关系型数据库，NoSQL = Not Only SQL。 
关系型数据库采用的结构化的数据，NoSQL采用的是键值对的方式存储数据。 
在处理非结构化/半结构化的大数据时；在水平方向上进行扩展时；随时应对动态增加的数据项时可以优先考虑使用NoSQL数据库。 
在考虑数据库的成熟
                                
                                JavaScript异步编程Promise模式的6个特性
                                    bijian1013
JavaScriptPromise
                                            Promise是一个非常有价值的构造器，能够帮助你避免使用镶套匿名方法，而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性。 
        在我们开始正式介绍之前，我们想看看Javascript Promise的样子： 
var p = new Promise(function(r
                                
                                [Zookeeper学习笔记之八]Zookeeper源代码分析之Zookeeper.ZKWatchManager
                                    bit1129
zookeeper
                                    ClientWatchManager接口 
//接口的唯一方法materialize用于确定那些Watcher需要被通知
//确定Watcher需要三方面的因素1.事件状态 2.事件类型 3.znode的path
public interface ClientWatchManager {
    /**
     * Return a set of watchers that should
                                
                                【Scala十五】Scala核心九：隐式转换之二
                                    bit1129
scala
                                    隐式转换存在的必要性， 
  
在Java Swing中，按钮点击事件的处理，转换为Scala的的写法如下： 
  
val button = new JButton
button.addActionListener(
    new ActionListener {
        def actionPerformed(event: ActionEvent) {
 
                                
                                Android JSON数据的解析与封装小Demo
                                    ronin47

                                    转自：http://www.open-open.com/lib/view/open1420529336406.html 
package com.example.jsondemo; 
import org.json.JSONArray; 
import org.json.JSONException; 
import org.json.JSONObject; 
   
impor
                                
                                [设计]字体创意设计方法谈
                                    brotherlamp
UIui自学ui视频ui教程ui资料
                                      
从古至今，文字在我们的生活中是必不可少的事物，我们不能想象没有文字的世界将会是怎样。在平面设计中，UI设计师在文字上所花的心思和功夫最多，因为文字能直观地表达UI设计师所的意念。在文字上的创造设计，直接反映出平面作品的主题。 
如设计一幅戴尔笔记本电脑的广告海报，假设海报上没有出现“戴尔”两个文字，即使放上所有戴尔笔记本电脑的图片都不能让人们得知这些电脑是什么品牌。只要写上“戴尔笔
                                
                                单调队列-用一个长度为k的窗在整数数列上移动，求窗里面所包含的数的最大值
                                    bylijinnan
java算法面试题
                                    import java.util.LinkedList;

/*

单调队列 滑动窗口
单调队列是这样的一个队列：队列里面的元素是有序的，是递增或者递减

题目：给定一个长度为N的整数数列a(i),i=0,1,...,N-1和窗长度k.

要求：f(i) = max{a(i-k+1),a(i-k+2),..., a(i)},i = 0,1,...,N-1

问题的另一种描述就
                                
                                struts2处理一个form多个submit
                                    chiangfai
struts2
                                    web应用中，为完成不同工作，一个jsp的form标签可能有多个submit。如下代码： 
<s:form action="submit" method="post" namespace="/my">
<s:textfield name="msg" label="叙述：">
                                
                                shell查找上个月，陷阱及野路子
                                    chenchao051
shell
                                    date -d "-1 month" +%F 
    以上这段代码，假如在2012/10/31执行，结果并不会出现你预计的9月份，而是会出现八月份，原因是10月份有31天，9月份30天，所以-1 month在10月份看来要减去31天，所以直接到了8月31日这天，这不靠谱。 
    野路子解决：假设当天日期大于15号
                                
                                mysql导出数据中文乱码问题
                                    daizj
mysql中文乱码导数据
                                    解决mysql导入导出数据乱码问题方法： 
 
１、进入mysql，通过如下命令查看数据库编码方式： 
 
mysql>  show variables like 'character_set_%'; 
+--------------------------+----------------------------------------+ 
| Variable_name&nbs
                                
                                SAE部署Smarty出现：Uncaught exception 'SmartyException' with message 'unable to write
                                    dcj3sjt126com
PHPsmartysae
                                      
对于SAE出现的问题：Uncaught exception 'SmartyException' with message 'unable to write file...。 
官方给出了详细的FAQ：http://sae.sina.com.cn/?m=faqs&catId=11#show_213 
解决方案为： 
        
01  
$path 
                                
                                《教父》系列台词
                                    dcj3sjt126com

                                    Your love is also your weak point. 
你的所爱同时也是你的弱点。 
  
If anything in this life is certain, if history has taught us anything, it is 
that you can kill anyone. 
  
不顾家的人永远不可能成为一个真正的男人。 &
                                
                                mongodb安装与使用
                                    dyy_gusi
mongo
                                    一.MongoDB安装和启动,widndows和linux基本相同 
1.下载数据库, 
    linux:mongodb-linux-x86_64-ubuntu1404-3.0.3.tgz 
2.解压文件,并且放置到合适的位置 
    tar -vxf mongodb-linux-x86_64-ubun
                                
                                Git排除目录
                                    geeksun
git
                                    在Git的版本控制中，可能有些文件是不需要加入控制的，那我们在提交代码时就需要忽略这些文件，下面讲讲应该怎么给Git配置一些忽略规则。 
  
有三种方法可以忽略掉这些文件，这三种方法都能达到目的，只不过适用情景不一样。 
1.  针对单一工程排除文件 
这种方式会让这个工程的所有修改者在克隆代码的同时，也能克隆到过滤规则，而不用自己再写一份，这就能保证所有修改者应用的都是同一
                                
                                Ubuntu 创建开机自启动脚本的方法
                                    hongtoushizi
ubuntu
                                    转载自： http://rongjih.blog.163.com/blog/static/33574461201111504843245/ 
Ubuntu 创建开机自启动脚本的步骤如下：  
1) 将你的启动脚本复制到 /etc/init.d目录下   以下假设你的脚本文件名为 test。       
2) 设置脚本文件的权限    $ sudo chmod 755
                                
                                第八章 流量复制/AB测试/协程
                                    jinnianshilongnian
nginxluacoroutine
                                    流量复制 
在实际开发中经常涉及到项目的升级，而该升级不能简单的上线就完事了，需要验证该升级是否兼容老的上线，因此可能需要并行运行两个项目一段时间进行数据比对和校验，待没问题后再进行上线。这其实就需要进行流量复制，把流量复制到其他服务器上，一种方式是使用如tcpcopy引流；另外我们还可以使用nginx的HttpLuaModule模块中的ngx.location.capture_multi进行并发
                                
                                电商系统商品表设计
                                    lkl

                                    DROP TABLE IF EXISTS `category`; -- 类目表
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `category` (
  `id` int(11) NOT NUL
                                
                                修改phpMyAdmin导入SQL文件的大小限制
                                    pda158
sqlmysql
                                    　用phpMyAdmin导入mysql数据库时，我的10M的 
数据库不能导入，提示mysql数据库最大只能导入2M。   　　 
phpMyAdmin数据库导入出错：   　　You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.  
                                
                                Tomcat性能调优方案
                                    Sobfist
apachejvmtomcat应用服务器
                                    一、操作系统调优 
 对于操作系统优化来说，是尽可能的增大可使用的内存容量、提高CPU的频率，保证文件系统的读写速率等。经过压力测试验证，在并发连接很多的情况下，CPU的处理能力越强，系统运行速度越快。。 
 【适用场景】 任何项目。 
 二、Java虚拟机调优 
 应该选择SUN的JVM，在满足项目需要的前提下，尽量选用版本较高的JVM，一般来说高版本产品在速度和效率上比低版本会有改进。 
 J
                                
                                SQLServer学习笔记
                                    vipbooks
数据结构xml
                                    1、create database school 创建数据库school 
 
2、drop database school 删除数据库school 
 
3、use school 连接到school数据库，使其成为当前数据库 
 
4、create table class(classID int primary key identity not null) 
 创建一个名为class的表，其有一
                                
                
            
        
    


    
        
            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    


    
        
            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

web页面uri唤醒应用_带有数据URI的高性能Web设计

开始之前

关于数据URI的两分钟回顾

进攻计划

步骤1：初始标记

第9步：设置“查看更多”链接的样式

第10步：设置评论/赞/查看列表的样式

步骤11：介绍Dribbble API和Jribbble插件

步骤12：链接脚本

步骤13：试一试

Shot Title

Player URL

步骤14：摇一摇标记

步骤15：创建一个新函数

步骤16：填补空白

你可能感兴趣的:(web页面uri唤醒应用_带有数据URI的高性能Web设计)