首页

关于

帮助减少JS请求的node.js工具-DynoSrc

帮助减少JS请求的node.js工具-DynoSrc

DynoSrc是一个帮助Node.js服务器应用高效发布JS到客户端的解决方案,使用比对的方式来更新JS相关资源。

好处在于能够最小化HTTP请求,DynoSRC通过HTML响应加载JS文件,并且保存到本地存储。你甚至可以在HTML响应中来调用DynoSRC客户端类库,减少所有JS的请求。

基本通常来说,如果你的网站的JS有任何变化,你的用户需要下载整个文件,即使只是一个部分修改变化。DynoSRC可以帮助你发送变化的部分,而不用下载整个文件。

网站地址: http://dinosrc.it/

标签: nodejs, javascript, DynoSrc

阅读更多

【基础篇】JavaScript单元基础测试

【基础篇】JavaScript单元基础测试

无论用JavaScript,还是其他语言编写代码的过程中,都需要关注有效性。当你完成一段代码,肯定期待它能如预期般工作。想象一下,你已编写了几千行代码,它们是否能达到预期的效果?这就不一定了。

通过单元测试,确保编写代码的正确性是非常重要的。

那么,到底什么是单元测试呢?

维基百科中有关单元测试的定义如下:

  • 在 计算机编程中,单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化 编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类、抽象类、或子类中的方法。 

单看概念可能无助于大家理解实时性问题,那么我将上述文字缩减为简单的一句话:

  • 单元测试是一种你可以依赖用于检验一段代码是否有效的方法。

现在,我想你能了解单元测试是用来干什么的了吧。

我们需要测试什么?

JavaScript中,我们需要验证代码有效性,常需要检测的内容包括:

  • 函数返回值
  • DOM元素属性
  • 由闭包操纵的变量值

其实,JavaScript的任意一块内容都能被测试,方法也非常简单。

如何使用单元测试?

有关测试的方法有多种,甚至有诸如JasmineQUnit此类框架可以直接利用。不过本文不会介绍这些框架的使用,而是教大家编写一段简单的断言函数:

/**

标签: javascript, javascript测试, javascript测试基础, 基础

阅读更多

如何检测移动设备方向的变化

如何检测移动设备方向的变化

除非你的应用程序限定了只在移动设备直立状态或水平状态下使用,一般情况下,你需要调整一些设定。即便你设计的布局流畅时尚,你可能需要改变某些编程代码。通常有以下一些小的策略用于检测移动设备方向的改变。

orientationchange事件

你等待一个移动API,一个简单的窗口orientationchange事件:

// 监听方向的改变
window.addEventListener("orientationchange", function() {
  // 宣布新方向的数值
  alert(window.orientation);
}, false);

发生改变的时候, window.orientation属性就改变。值为0表示直立, 90表示设备水平旋转到左边, -90表示设备水平旋转到右边。

调整大小事件

有些设备不支持orientationchange事件,但可以触发resize事件:

// 监听调整大小的改变
window.addEventListener("resize",…

标签: 移动设备, css3, javascript, web最佳实践, 检测移动设备方向的变化

阅读更多

创建具有固定导航功能的滑动单页面布局网站

创建具有固定导航功能的滑动单页面布局网站

在线演示    在线下载

建立简单网页时,倾向于将内容放在同一布局中,而非多个页面。这类单页面网站非常适用于在线展示一个小型项目或者作品集。如果把内容分割为几个整洁的部分,那么访问者可以使用滑动导航以便快速浏览页面。

本教程展示如何利用jQuery建立典型的滑动导航,有多种可替代的插件都可以实现同样的功能,并且很省时。但我们这次只使用了jQuery,然后用scrollTo插件优化了性能。点击下面的链接查看在线动画演示吧。

Demo与源代码 下载 

入手

首先下载jQuery的本地副本,并与其他脚本文件放在一起。还需要 jQuery.scrollTo插件副本,它是一个单一的.js文件。我创建了两个替换文件index.html styles.css,用于存放页面架构。我们首先来分析主要的内容。

<!doctype html>
<html lang="en-US">
<head>

标签: 导航功能, 页面布局, javascript, 滑动页面, jquery

阅读更多

Backbone.js系列教程二:Backbone.js深入解析之基础要求

Backbone.js系列教程二:Backbone.js深入解析之基础要求

在网上关于Backbone的描述很少,现有的关于Backbone的内容五花八门,基本上都不同程度的提到了如何运用Backbone来实现应用程序的创建,当然也有很多的是讨论它是否匹配 Model/View/Whatever。有挺多华而不实的视频教程是讲程序设计的,但其实没有什么太大的价值。我认为关键是缺少了关于Backbone本身的详细介绍,以及对于每行代码的真正用意的细节描述。有篇文档专门讲述 Backbone各部分的功能,在一定程度上解答了上述问题,并且提供带有注释的源代码,还有更多相关Backbone.js的内容介绍。这些虽然远远不够,但最起码,能换个角度带大家了解Backbone的组成部分与功能。

在这套Backbone.js解构系列教程中,我们将从代码层面验证Backbone库的功能。

相关阅读: Backbone.js系列一 - Backbone.js初探

具体而言,在这套教程的前一部分中我们将探讨学习Backbone的基础,介绍单页面应用程序(SPAs)所需一些关键的细节,以便能更好的掌握Backbone的组成与用途。在对SPAs有一定基础之后,我们将系统深入到Backbone代码部分各个细节,包括Backbone.Events、创建Backbone对象、Backbone.Router()Backbone.History()Backbone…

标签: backbones.js, html, javascript, 前端框架

阅读更多

Backbone.js系列一 - Backbone.js初探

kbone.js系列一 - Backbone.js初探

JavaScript在web应用程序开发前端技术和后端技术的逻辑与运行一块占有越来越大的比重.为了帮助维护和循环访问前期逻辑和模块性,MVC模式在近几年中渐渐普及。其中一种运用广泛的MVC框架就是Backbone.js。

Backbone中的Models(模型)、Views(视图)和Collection(集合)

Backbone.js包含以下几个主要功能:

  1. 创建模型(以及模型集合);
  2. 创建视图;
  3. 管理绑定,管理事件兼用不同的模型以及视图与框架其他部分的联系;
  4. 在模型中使用观察者模式,一旦模型触发任何change事件,所有显示此模型数据的视图接受到该change事件通知,从而自动进行事件重新渲染;
  5. 给DOM处理所依赖的jQuery或Zepto提供支持。

第一部分:模型(Models)

创建模型,首先我们创建一个包含数据的Person对象。

Person = Backbone.Model.extend({
// Person实例的构造函数

标签: backbones.js, html, javascript

阅读更多

Javascript视差特效引擎 - Parallax.js

Javascript视差特效引擎 - Parallax.js

在线演示

Parallax.js是一个使用方便的视差效果引擎,可以帮助你实现非常棒的视差效果,并且对移动设备的横竖屏可以自动适应。并且支持自定义的行为,包括使用data属性或者Javascript的API。

网站地址:http://wagerfield.github.io/parallax/

标签: javascript, 视差特效

阅读更多

用Sass创建MetaFizzy效果

用Sass创建MetaFizzy效果

Hugo发现了一个绚丽的css效果应用于web中并教会你如何聪明的重建和使用它。两天前,我看见笔者Hugo在css帮助下重写MetaFizzy的效果,Hugo帮助我们找到了一个用于理解Sass的JavaScript源代码。但我认为他的代码仍有可改之处,它比原版本的css多出了许多重复代码,我们找到了一种方法使其更加效率。重点:这是一个实验,如果你想要实验,请使用JavaScriptcss版本需要500个线程,占用很多的CPU。所以这是一个Sass实验,只是为了好玩。

你从哪儿开始

对于这个问题如果一开始没有Hugo的Demo我还不知道从哪儿开始。以下是我们需要做的。给我们的文本一个长长的影子,渐变到黑色。岁颜色的阴影随着时间的变化盘旋,快速的彩虹动画,最后我们需要做以下几点,一个动画光影,一个动画鼠标悬停,一个列表的颜色鼠标悬停差不多就是这样。

平滑阴影

用Sass创建MetaFizzy效果

数据帧

我们会做简单的光影效果,我们做的是让文本阴影颜色逐渐变黑。然后我们需要一个动画,随着时间改变颜色,这个效果需要hsl().因为我们希望Sass代码成为可能。我们将使用一个叫做mixin的关键帧在处理这些文本阴影。首先,纲要。

@mixin…

标签: sass, css, javascript, metafizzy, 效果

阅读更多

如何构建下拉滑动式响应导航菜单

如何构建下拉滑动式响应导航菜单

在线演示 在线下载

经过长时间研究移动响应布局,我花了很大功夫研究不同的UI设计。在页面上的主要亮点往往是网站主导航。用户需要快速访问到内容页面,而且这一点是最基本的,无论是在完整的显示器或较小的移动响应屏幕。

在本教程中,我要演示如何结合CSS3 media queries和jQuery管理滑动导航菜单。链接出现在前端,但下降为一个隐藏的菜单,调整后的大小低于600px。同时将出现一个小的下拉菜单,图标会切换打开和关闭命令。

演示及下载源代码

设定文件

顶部区域包含文件的一小部分,我们用来创建效果。我从由谷歌托管的最新 jQuery库中复制了常规样式表,所有自定义JS函数被存储在外部文件命名为menu.js。

<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type"…

标签: 导航菜单, css3, javascript, 响应式菜单, html, css

阅读更多

超酷的实时颜色数据跟踪javascript类库 - Tracking.js

超酷的实时颜色数据跟踪javascript类库 - Tracking.js

今天介绍这款超棒的Javascript类库是 - Tracking.js,它能够独立不依赖第三方类库帮助开发人员动态跟踪摄像头输出相关数据。

这些数据包括了颜色或者是人, 这意味着你可以通过特定的颜色或者人物的移动或者脸部来触发javascript事件。 相信如果接触过Kinect或者Wii的朋友肯定能够使用这个类库开发出类似的体感游戏。

整个类库的API非常简单,拥有一些方法和事件,可以完整的满足你开发相关应用。

如果你想了解更多的话,请观看相关的视频。

    var videoCamera = new tracking.VideoCamera().render().renderVideoCanvas();
videoCamera.track({
type: 'color',
color: 'magenta',
onFound: function(track) {
console.log(track.x, track.y, track.z);

标签: 分享, javascript

阅读更多

分享10个超实用的jQuery代码片段

分享10个超实用的jQuery代码片段

jQuery以其强大的功能和简单的使用成为了前端开发者最喜欢的JS类库,在这里我们分享一组实用的jQuery代码片段,希望大家喜欢!

jQuery平滑回到顶端效果

$(document).ready(function() {

  $("a.topLink").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 500,
      easing: "swing"
    });
    return false;
  });

});

运行代码:

GBdebug在线调试地址:http://www.gbin1.com/gb/debug/20864b59-a995-4318-a242-b3038f83f2c3.htm

jQuery处理图片尺寸

$(window).bind("load",…

标签: 代码片段, jquery, javascript

阅读更多

前端性能优化:使用媒体查询加载指定大小的背景图片

前端性能优化:使用媒体查询加载指定大小的背景图片

直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制。我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏幕宽度调 整CSS属性),例如根据不同的屏幕宽度来设置不同的元素宽度或者是悬浮位置。那么我们为什么不用这种方式来改变背景图片呢?

/* 默认是为桌面应用加载图片 */
.someElement { background-image: url(sunset.jpg); }

@media only screen and (max-width : 1024px) {
    .someElement { background-image: url(sunset-small.jpg); }
}

上面的代码片段是为手机设备或是类似的移动设备加载一个较小尺寸的图片,特别是需要一个特别小的图片时(例如图片的大小几乎不可视)。

开发人员普遍会将他们的代码习惯优先于用户体验。但是很多很小的改变可以让用户体验有个飞跃提升,所以任何一点儿小小的优化都会提升你网站的库存。再回顾一下之前的这些优化,我将在以后继续介绍其他的优化。

标签: 前端性能优化, 背景大小, javascript, web前端最佳实践

阅读更多

前端性能优化:使用事件委托

前端性能优化:使用事件委托

想象一下,如果你有一个无序列表,里面有一堆<li>元素,每一个<li>元素都会在点击的时候触发一个行为。这个时候, 你通常会在每一个元素上添加一个事件监听,但是如果当这个元素或者你添加了监听的这个对象会被频繁的移除添加呢?这个时候,你在移除添加元素的同时需要处 理事件监听的移除和添加。这个时候,我们就需要引入事件委托了。

事件委托是在父级元素上添加一个事件监听,来替代在每一个子元素上添加事件监听。当事件被触发时,event.target会评估相应的措施是否需要被执行。下面我们给出了一个简单的例子:

// 获取元素,添加事件监听
document.querySelector('#parent-list').addEventListener('click', function(e) {
// e.target 是一个被点击的元素!
// 如果它是一个列表元素
if(e.target &&…

标签: 前端性能优化, html, javascript, web前端最佳实践

阅读更多

前端性能优化:尽可能使用CSS动画

前端性能优化:尽可能使用CSS动画

网站设计对美观特性和可配置元素动画的大量需求,使得一些JavaScript类库,如jQuery,MooTools大量的被使用。尽管现在浏览器支持CSS的 transformationkeyframe所 做的动画,现在仍有很多人使用JavaScript制作动画效果,但是实际上使用CSS动画比起JavaScript驱动的动画效率更高。CSS动画同时 需要更少的代码。很多的CSS动画是用GPU处理的,因此动画本身很流畅,当然你可以使用下面这个简单的CSS强制使你的硬件加速:

.myAnimation {
    animation: someAnimation 1s;
    transform: translate3d(0, 0, 0); /* 强制硬件加速 */
}

tansform:transform(0,0,0)在不会影响其他动画的同时将通话送入硬件加速。在不支持CSS动画的情况下(IE8及以下版本的浏览器),你可以引入JavaScript动画逻辑:

<!--[if…

标签: 前端性能优化, html, css3, javascript, web前端最佳实践

阅读更多

前端性能优化:使用Array.prototype.join代替字符串连接

前端性能优化:使用Array.prototype.join代替字符串连接

有一种非常简单的客户端优化方式,就是用Array.prototype.join代替原有的基本的字符连接的写法。在这个系列的第一篇中,我在代码中使用了基本字符连接:

htmlStr += '<li>' + item.text + '</li>';

但是下面这段代码中,我用了优化:

var items = [];

ajaxResult.items.forEach(function(item) {
    // 构建字符串
    items.push('<li>', item.text, '</li>');
});

// 通过innerHTML设置列表内容
document.querySelector('ul').innerHTML = items.join('');

也许你需要花上一点儿时间来看看这个数组是做什么用的,但是所有的用户都从这个优化中受益匪浅。

下一篇,我们将谈谈在前端尽可能使用CSS动画

相关阅读:

标签: 前端性能优化, html, 字符串, javascript, web前端最佳实践

阅读更多

下一页

目录

© Copywrite by gbin1.com, all rights reserved.