优大网

分类存档： 开发 （ 5 / 8）

近期十大优秀jQuery插件推荐

2013年8月19日 / / 暂无评论

摘要：当今，设计领域竞争越来越激烈，唯有做出最优秀的产品才能在该领域独树一帜。而jQuery插件为设计和开发提供了强大的支撑力。本文将推荐从jQuery网站的Plugin频道中推选出的近期十款优秀jQuery插件，以便开发者借鉴。

当有限的开发知识限制了设计进展，你无法为自己插上创新的翅膀时，jQuery可以扩展你的视野。本文将推荐从jQuery网站的Plugin频道中推选出的近期十款优秀jQuery插件。

1. jQuery URL Shortener

正如名字所清晰表达的那样，该jQuery插件利用Google URL shortener API可将URL转化成短链接。

 

下载 | 演示

2. Bootstrap Tokenfield

Bootstrap Tokenfield是一款针对输入框的高级标签插件，可获取键盘输入焦点，支持复制—粘贴。

 

下载 | 演示

3. Retinize

Retinize可将图片质量进行提升，以在Retina显示器上完美显示。在像素艺术中，当你不希望存储高质量版本的图片时，该jQuery插件显得特别有用。

 

下载 | 演示

4. jQuery Scrollbox

它是一款简单、轻量级的jQuery插件。利用它，用户可以像旋转木马、传统的滚动形式那样滚动展示列表。

 

下载 | 演示

5. jQuery Scanner Detection

这是一款小插件。可对用户所使用扫描仪（barcode, QR Code……）进行探测、跟踪，并给出特定的反馈。

 

下载 | 演示

6. jQuery finderSelect

该jQuery插件可激活文件管理器，高亮显示被选择的元素，支持Ctrl+单击、Command+单击、Ctrl+拖动、Command+拖动及Shift+单击操作。

 

下载 | 演示

7. Yet Another DataTables Column Filter （Yadcf）

利用Yadcf，用户可轻松地针对表格每列添加过滤器组件。该插件基于DataTables jQuery插件开发而成。

 

下载 | 演示

8. jQuery noInput

该插件用来显示输入字段预期值的提示信息，与HTML5的placeholder属性相似。

 

下载 | 演示

9. HeapBox

无论你是Web设计师，还是Web开发工程师，一定了解设置本地HTML表单外观及功能的艰辛。Heapbox现在可代替selectbox，用JavaScript编写，效果很不错。现在它只针对selectbox，还无法处理textbox、checkbox等。Heapbox基于jQuery设计，却改变了大部分人写JavaScript的方式。

 

下载 | 演示

10. QUAIL

该插件用来查找影响页面美观、亲和力的内容。它可查找现页面中的设计问题，如图片缺少替换文字等。

 

下载 | 演示

原文来自：The Design Blitz

http://www.csdn.net/article/2013-08-15/2816585

我从其他Shell脚本中学到了什么？

2013年8月18日 / / 暂无评论

摘要：作者Fizer Khan是一位Shell脚本迷，他对有关Shell脚本新奇有趣的东西是如此的痴迷。本文他分享了八大Shell脚本技巧，希望你会喜欢，这些脚本可以直接拿来使用！

作者Fizer Khan是一位Shell脚本迷，他对有关Shell脚本新奇有趣的东西是如此的痴迷。最近他遇到了authy-ssh脚本，为了缓解ssh服务器双重认证问题，他学到了许多有用且很酷的东西。对此，他想分享给大家。

一、Colors your echo 

大多数情况下，你希望输出echo Color，比如绿色代表成功，红色代表失败，黄色代表警告。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
NORMAL=$(tput sgr0)
GREEN=$(tput setaf 2; tput bold)
YELLOW=$(tput setaf 3)
RED=$(tput setaf 1)
function red() {
    echo -e "$RED$*$NORMAL"
}
function green() {
    echo -e "$GREEN$*$NORMAL"
}
function yellow() {
    echo -e "$YELLOW$*$NORMAL"
}
# To print success
green "Task has been completed"
# To print error
red "The configuration file does not exist"
# To print warning
yellow "You have to use higher version."

这里使用tput来设置颜色、文本设置并重置到正常颜色。想更多了解tput，请参阅prompt-color-using-tput。
 

 

二、To print debug information （打印调试信息）

打印调试信息只需调试设置flag。

 

1
2
3
4
5
6
7
8
9
function debug() {
    if [[ $DEBUG ]]
    then
        echo ">>> $*"
    fi
}
# For any debug message
debug "Trying to find config file"

 

某些极客还会提供在线调试功能：
 

 

1
2
3
# From cool geeks at hacker news
function debug() { ((DEBUG)) && echo ">>> $*"; }
function debug() { [ "$DEBUG" ] && echo ">>> $*"; }

三、To check specific executable exists or not （检查特定可执行的文件是否存在） 

1
2
3
4
5
6
7
8
9
10
11
12
OK=0
FAIL=1
function require_curl() {
    which curl &>/dev/null
    if [ $? -eq 0 ]
    then
      return $OK
    fi
    return $FAIL
}

这里使用which来命令查找可执行的curl 路径。如果成功，那么可执行的文件存在，反之则不存在。将&>/dev/null设置在输出流中，错误流会显示to /dev/null （这就意味着在控制板上没有任何东西可打印）。
 

 

 

有些极客会建议直接通过返回which来返回代码。

 

1
2
3
# From cool geeks at hacker news
function require_curl() { which "curl" &>/dev/null; }
function require_curl() { which -s "curl"; }

四、To print usage of scripts  （打印使用的脚本） 

当我开始编写shell 脚本，我会用echo来命令打印已使用的脚本。当有大量的文本在使用时， echo命令会变得凌乱，那么可以利用cat来设置命令。

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
cat << EOF
Usage: myscript <command> <arguments>
VERSION: 1.0
Available Commands
    install - Install package
    uninstall - Uninstall package
    update - Update package
    list - List packages
EOF

这里的<<被称为<<here document，字符串在两个EOF中。 

五、User configured value vs Default value （用户配置值VS 默认值）

有时，如果用户没有设置值，那么会使用默认值。

 

1
URL=${URL:-http://localhost:8080}

检查URL环境变量。如果不存在，可指定为localhost。
 

六、To check the length of the string 检查字符串长度

 

1
2
3
4
5
if [ ${#authy_api_key} != 32 ]
then
  red "you have entered a wrong API key"
  return $FAIL
fi

利用 ${#VARIABLE_NAME} 定义变量值的长度。

七、To read inputs with timeout （读取输入超时）
 

 

1
2
3
4
5
6
7
8
READ_TIMEOUT=60
read -t "$READ_TIMEOUT" input
# if you do not want quotes, then escape it
input=$(sed "s/[;\`\"\$\' ]//g" <<< $input)
# For reading number, then you can escape other characters
input=$(sed 's/[^0-9]*//g' <<< $input)

八、To get directory name and file name  （获取目录名和文件名） 

 

1
2
3
4
5
6
7
8
# To find base directory
APP_ROOT=`dirname "$0"`
# To find the file name
filename=`basename "$filepath"`
# To find the file name without extension
filename=`basename "$filepath" .html`

英文出自：FizerKhan

趣文：为什么软件开发周期通常是预期的两三倍？

2013年8月18日 / / 暂无评论

【感谢@袁欣_Jason 的热心翻译。如果其他朋友也有不错的原创或译文，可以尝试推荐给伯乐在线。】

导读：有国外开发者在 Quora 提了这个问题：“为什么软件开发周期通常是预期的两三倍？” 并补充问：“这是开发人员的错误？ 是管理失误？ 是因为做事方法不对， 或者说缺乏好的方法？还是说这就是软件开发流程的特点？” Michael Wolfe 在2012年1月28日给的回复，非常经典，截至我们发布时已有8016个赞。以下是译文。

让我们先沿着海岸线，从旧金山（SF）走路去洛杉矶（LA），去拜访我们住在Newport Beach的朋友，我拿出地图在上面画出了行进路线。

全程大约有400英里，如果我们每天走10小时每小时4公里的话，只用10天就可以到达目的地。立刻打电话给我们的朋友预定下周六的晚餐，告诉他们下周六晚上六点我们一定会准时出现，朋友们已经等不及了！

第二天清晨，我们带着准备冒险的兴奋起床，背起行囊，拿出地图，准备计划我们冒险的第一天，看一眼地图，噢，不！

哇，海岸线上有这么多迂回曲折的线路。每天行进40英里的话，10天后只能勉强到达Half Moon Bay（半月湾？）。这趟旅行至少有500英里，而不是400。赶紧打电话给我们的朋友，将晚餐顺延至下下周周二。人还是应该现实一点。朋友们有点失望，不过仍然盼望见到我们，况且花 12 天从 SF 到 LA 也不赖。

把不开心的事丢到一边，准备出发。两小时过后，我们才刚刚走出动物园。出了什么事？我们低头看了一下脚下的路：

天哪，这样走路也太慢了！有沙子、海水、阶梯、溪流，还有海边愤怒的海狮！这样我们只能按每小时2公里的速度前进，只有我们预估一般的速度。要么我们现在每天走20小时，要么再把晚餐推迟一个星期。好吧，让我们各退一步：每天走12个小时，把晚餐安排到下下周的周末。只好再打电话给朋友告诉他们这个情况。朋友们有些不高兴，但还是表示可以，到时候见。

在辛苦走了12小时后，我们准备在 Moss Beach 扎营休息。靠，要把帐篷在风中立起来根本不可能。直到半夜才开始休息。不过没什么大不了：明天在加快点速度就可以了。

第二天早上睡过头了，早上10点才醒，起来浑身酸痛精疲力尽。艹，今天没法走12个小时了，先走10个小时，明天可以走14个小时。收拾东西出发。

再缓慢行进了几个小时之后，我发现伙伴脚有点跛。妈的，是水泡。必须现在解决它，在这些问题开始减慢我们的速度前，必须将它们扼杀在萌芽状态。我慢跑了45分钟到达内陆3英里远的Pescadero，买了一些创可贴再快速跑回去给朋友包扎了一下。我快累坏了，太阳也快下山了，又浪费了一天的时间。到我们准备休息前今天只走了6英里。但是我们确实需要补充一下供给。一切都很好，明天我们就能赶上。

第二天醒来，扎紧脚上的绷带准备出发。转角之后突然发现，靠！这是个啥？

你妹的地图上怎么没标出它！现在我们只能往内陆走3英里，绕过这些被联邦政府用栅栏保护起来的区域，中途迷路了两次，在中午前才好不容易又回到了海岸线。今天的时间过了一大半，而我们才前进了差不多1英里。好吧，不过我们不会再打电话给朋友推迟了，今天我们会一直走到午夜试着赶上进度。

晚上在大雾里断断续续地睡了一夜。一大早被我的伙伴叫醒，他一阵阵的头疼，还有点发烧，我问他能不能坚持一下。“你在想什么呢，混蛋，我已经连续三天在这么冷的雾中赶路，没有休息过了。“好吧，今天看来只能黄了，只能在原地好好恢复了。现在我们已经有经验了，今天好好休息明天再走14个小时，还有几天的时间，我们一定能够做到！

第二天我们昏昏沉沉地起来了。我看了一眼随身的地图：

天啊！我们已经走了10天旅程里的第5天还没有离开海湾区域！太荒唐了！我们要重新估计一下准确的时间再打给朋友，搞不好会被骂，但至少得找一个现实一点的目标。

同伴说，我们在四天里走了40英里，这趟旅程至少又600英里，那就至少要60天，安全一点的说法说不定要70天，“没门…是，以前我是没走路从SF去过LA，但肯定不会要70天的时间，如果告诉他们我们要到复活节才能到，那要被他们笑死的“，我说。

我接着说，“如果你能保证每天走16个小时，我们就能把落下的时间补回来！我知道很困难，但现在是最关键的时刻，别抱怨了！”伙伴对我吼道 “一开始又不是我告诉别人下周日我们就能到的！因为你犯的这个错差点要我的命！”

两个人就这样不说话了。我还是没打出电话，等我的伙伴明天冷静一点我再决定，我也愿意做一些更合理的承诺。

第二天上午，我们一直待在各自的帐篷中直到一场暴风雨袭来。我们赶紧收拾好东西直到10点才摆脱危险。浑身酸痛，又长了好多新水泡。之前发生的事谁也没提，直到发现我那愚蠢的伙伴把水壶落下了，又被我指责了一顿，我们不得不再花30分钟回去取它。

我心里记得我们的厕纸已经快用完了，下次到一个小镇的时候应该囤一点。在我们又转个弯后，才发现一条湍急的河流挡住了去路，这时我突然感到肚子一阵难受……

http://blog.jobbole.com/45756/

分布式系统事务原子性的非阻塞实现

2013年8月10日 / / 暂无评论

摘要：分布式系统中，常见的多对象更新操作实现却比较困难，如果将这些操作看作一个事务，实现事务的原子性就成了关键所在。通常情况下原子性都是通过锁实现的，作者提供了一种非锁的方式实现——NBTA。

本文作者Peter Bailis是美国Berkeley的研究生，主要研究方向是分布式系统与数据库。作者目前主要的研究内容是分布式数据的一致性，尤其是如何调和ACID特性和分布式一致性模型，以及如何在理论和实际中更好的理解最终一致性。

作者将分布式系统中的事务定义为针对多个服务器的同时操作，本文主要讨论了分布式系统事务的原子性的一种实现算法。通常情况下原子性都是通过锁实现的，这个算法并没有使用锁，原理很简单，采用了简单的多版本控制和存储一些额外的元数据，虽然作者只是在实验环境中实现了这个算法，并没有投入到实际生产中，但是作者思考问题的方式值得参考。

分布式系统事务原子性

在现实的分布式系统中，多对象更新的操作很常见，但是实现起来却并不简单。同时更新两个或多个对象时，对于这些对象的其他读取者，原子性很重要：你的更新要么全部可见，要么全部不可见。

这里所说的原子性和线性一致并不是一个概念，数据一致性在Gilbert和Lynch证明CAP原理时被提到过，后来通常被称为原子一致性。而线性一致化关注实时的顺序操作，是一个单对象的问题。这里的“原子性”源于数据库环境（ACID中的“A”），涉及对多个对象的执行和查询操作。为了避免混淆，我们称这个原子性为“事务原子性”。

许多场景中都会遇到这种问题，从社交网络图（例如Facebook的TAO系统，双向的朋友关系被保存在两个单向的指针中）到类似计数器（例如Twitter的Rainbird分层聚合器）和二级索引的分布式数据结构。本文中，我将假设我们的工作都是高可用的事务，原子性的多对象更新，或事务的原子性，是其首要特性。

现有的技术

多对象更新的事务操作通常采用以下三种策略之一：

 

锁

 

使用锁来同时更新多个项目。执行更新操作时加写锁，执行读操作时加读锁，就可以保证事务的原子性。但是在分布式环境中，局部故障和网络延迟都意味着锁操作可能会导致Bad Time。

具体来讲，锁操作有可能会导致一些怪异的结果。如果客户端在持有锁时宕机，服务器本应该最终撤销这个锁。这需要某种形式的故障检测或超时（在异步网络中会导致一些尴尬的情况）以及在撤销锁前同时撤销以前的操作。但是在执行更新操作时阻塞读操作显然是不合理的，反之亦然。如果我们追求高可用性，锁不是一个值得考虑的方案。

 

实体组

 

将想要同时更新的对象放在一起。这种策略通常称为“实体组”，可以让事务性原子更简单：在一台机器上加锁很快，而且不会遇到分布式锁的局部故障和网络延迟的问题。不幸的是，这种解决方案会影响数据布局和分布，而且不适用于难于分割的数据。

 

Fuck-it模式

使用“fuck-it”模式，不进行任何并发控制的情况下更新所有的对象，并保持事务的原子性。这个策略是很常见的：扩展性良好，适用于任何系统，但是直到系统达到稳定状态后，才会提供原子性保证（例如聚合，或者说最终一致性）。

NBTA

 

在这篇文章中，作者会介绍一种简单的替代方案，作者称其为事务原子性的非阻塞实现，简称为NBTA（Non-blocking transactional atomicity），使用多版本和一些额外的元数据在不使用锁的情况下，保证事务的原子性。具体来说，这种方案不会由于过程错误而阻塞读取和写入操作。关键的想法是避免执行局部更新，并且利用额外的元数据代替副本间的同步。

NBTA示例

可以用这个简单的场景来说明NBTA：有两个服务器，server for x上存储x，server for y上存储y，初值都是0。假设有两个客户端，Client1要执行写入操作，使x=1，y=1，Client2要同时读取x和y，关于副本的问题稍后会讨论。作者将Client1要执行的写入操作称为一个事务，而这个事务的操作对象server for x和server for y被称为事务兄弟。

good和pending

将每台服务器的存储分为两中状态：good和pending。要保证同属于一个事务的写入操作，如果其中一个操作被存储为good状态，这个事务的其它写入操作要么被存储为good，要么被存储为pending。比如在上面所说的场景中，如果x=1在server for x上被存储为good，那么必须保证y=1在server for y被存储为good或pending。

首先，各服务器会收到到写操作请求保存为pending状态，然后一旦服务器知晓（可能是异步的）某个写入操作相关的事务兄弟都已经将操作请求保存为pending状态，这个服务器就会更新这个操作为good状态。客户端进行两轮通信，就可以使服务器得到写操作已经稳定的信息：第一轮通信中，server for x和server for y会将从Client1收到请求保存为pending状态，并将确认回复给Client1，Client1收到确认后会进行第二轮通信，通知server for x和server for y写操作已达到稳定状态。

竞争危害和指针

理想的状态是，只读取good状态的数据，就可以保证事务的原子性。但是存在一种竞争条件的情况：比如server for x已经更新x=1，并保存为good状态，但在其事务兄弟server for y中相关操作y=1依旧是pending状态，Client2如果只读取good状态的数据，得到的结果将是x=1，y=0，破坏了事务的原子性。我们希望这种情况下，第二个服务器能够自动调用pending状态的数据以供读取。

为了解决这个问题，可以在每个写入操作中加入一些额外的信息：事务兄弟的列表以及一个时间戳。这个时间戳是客户端进行多值更新前，为每个写操作唯一生成的，比如，可以是客户端ID+本地时间或一个随机数。这样的话，当一个客户端读取good状态的数据时，还会读到时间戳和具有相同时间戳的事务兄弟的列表。客户端也会在发送读取请求附带一个时间戳，服务器会根据时间戳从pending或good中取出数据交付给客户端。如果客户端的请求中没有附带时间戳，服务器会将good中时间戳最高的值交付给客户端。

优化

以下是NBTA算法的一些优化：

pending和good的规模

如果用在good中只保存最近的写入操作，那么一个写入操作的兄弟事务可能会被覆盖，为了避免这种情况的发生，服务器会在good中将历史数据保留一定的时间。

更快的写操作

有一种方案可以替代客户端的第二轮通信操作。服务器一旦将写操作存入pending中，就直接互相通信，可使用类似于PAXOS的算法实现。此外，客户端也可以异步发起第二轮通信。然而，为了确保客户端在这些情况下读取写操作，它们要保留元数据直到每个写操作都被存为good状态。

副本

目前为止的讨论都基于每个数据项只存储在一个服务器上。算法实现的前提条件是每个服务器的强一致性。服务器间的副本有两种情况：如果所有的客户端都只能访问一部分服务器，那么客户端只需要对这些对应的服务器集合进行更新，这组服务器都存有数据的副本。如果客户端可以访问任何服务器，那么需要花费较长的时间去同步数据。

读/写事务

以上讨论的算法同样适用于读/写操作。对于ANSI标准的可重复读模型，主要的问题是保证从一个事务的原子组中读取。可以在事务执行前，事先声明所有的读取操作或者通过类似向量时间的元数据实现。

元数据的规模

最谨慎的做法是将元数据一直保存，但是也可以在写操作在所有服务器中都达到good状态时，将元数据删除。

算法的实现

作者采用LevelDB数据库实现了NBTA算法及其改进。在Yahoo!的云平台上，8个操作的NBTA事务可以达到最终一致性的33%（所有都是写操作）至95.2%（所有都是读操作）峰值吞吐量。并且这种实现是线性扩展的，运行50个EC2实例，对于长度为8的事务（50%的读操作，50%的写操作），可以达到每秒执行250000次操作。

实验结果表明NBTA的性能大大优于基于锁的操作，因为不会发生阻塞。主要的花销来自于元数据以及将写入操作从pending更新为good。基于这些结果，作者已经开始将NBTA应用于其它数据存储和二级索引上。

结论

这篇文章展现了如何在不使用锁的情况下，实现在任意数据分片的原子性多对象更新。数据库中有很多类似于NBTA的算法。例如客户端第二轮通信的优化是通过PAXOS的算法实现的，使用额外的元数据保持并发更新类似于B树或其它非锁的数据结构。当然，多版本并发控制和基于时间戳的并发控制在数据库系统中也都有悠久的历史。但是NBTA的关键是实现事务的原子性，同时避免中央集权的时间戳或并发控制机制。具体来说要在数据读取操作前达到一个稳定状态，主要的挑战是解决竞争条件。在实际中，相比其它基于锁的技术，这个算法表现得很好。（编译/周小璐 审校/仲浩）

原文链接：Non-blocking transactional atomicity

http://www.csdn.net/article/2013-08-08/2816504-non-blocking-transactional-atomicity

 

java实现矩形，数字从四周到中心逐渐增大

2013年8月9日 / / 暂无评论

打印效果:Matrix

public class TestMatrix {
public static void main(String[] args) {
testMatrix();
}

static void testMatrix() {
int row = 5, col = 3, x = 0, y = 0, start = 1000;
int[][] matrix = new int[row][col];
setMatrix(matrix, x, start);
printMatrix(matrix);
}

/**
* 递归实现.<br>
* 从四周到中心，数字逐渐递增
*
*/
static void setMatrix(int[][] matrix, int p, int start) {
int xLen = matrix.length, yLen = matrix[0].length;
int i, doublep = 2 * p;
if (yLen <= doublep || xLen <= doublep)
return;

// 上边
int topMax = yLen – p;
for (i = p; i < topMax; i++) {
matrix[p][i] = start++;
}

// 右边
int rightMax = xLen – p;
int rightY = yLen – p – 1;
for (i = p + 1; i < rightMax; i++) {
matrix[i][rightY] = start++;
}

// 没有右边情况
if (xLen == doublep + 1) {
return;
}

// 下边
int bottomX = rightMax – 1;
for (i = yLen – p – 2; i >= p; i–) {
matrix[bottomX][i] = start++;
}

// 没有下边
if (yLen == doublep + 1) {
return;
}

// 左边
for (i = xLen – p – 2; i > p; i–) {
matrix[i][p] = start++;
}
setMatrix(matrix, p + 1, start);
}

/**
* 打印数组
*/
static void printMatrix(int[][] matrix) {
for (int[] xl : matrix) {
for (int yl : xl) {
System.out.print(yl + ” “);
}
System.out.println();
}
}

第一个ps例子：泡泡笔刷

2013年7月27日 / / 暂无评论
效果图：泡泡笔刷
制作步骤：
1.新建一个文件，高400，宽400，分辨率72，rgb颜色8位，背景内容白色
2.改变背景色:图像->调整->反相(ctrl+i)
3.双击右下方的黑色图片，弹出确定就行(进行解锁，把它变色图层)。
4.滤镜-》渲染-》镜头光晕，选择第三个，出现一个关照效果
5.滤镜-》扭曲-》极坐标，选择第二个
6.图像-》图像旋转-180度
7.滤镜-》扭曲-》极坐标，选择第一个，出现一个圆的效果
8.长按选框工具，选择椭圆选框工具，按住shift拉出一个圆，大小不要大于外围圆的大小
9.ctrl+shift+i，进行反相，按delete删除
10.ctrl+shift+i，进行反相，按ctrl+i，图像从黑变白
11.右键-》取消选择
12.编辑-》定义画笔预设

可以直接拿来用的15个jQuery代码片段

2013年7月18日 / / 暂无评论

摘要：开发人员利用jQuery代码不仅能给网站带来各种动画、特效，还会提高网站的用户体验。本文总结了开发者经常使用的15个jQuery代码片段，大家可以直接拿来用。

jQuery里提供了许多创建交互式网站的方法，在开发Web项目时，开发人员应该好好利用jQuery代码，它们不仅能给网站带来各种动画、特效，还会提高网站的用户体验。

本文收集了15段非常实用的jQuery代码片段，你可以直接复制黏贴到代码里，但请开发者注意了，要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。

1.预加载图片

 

1
2
3
4
5
6
7
8
9
10
11
12
(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

源码 

 

2. 让页面中的每个元素都适合在移动设备上展示

 

 

 

1
2
3
4
5
6
7
8
9
10
11
var scr = document.createElement('script');
document.body.appendChild(scr);
scr.onload = function(){
    $('div').attr('class', '').attr('id', '').css({
        'margin' : 0,
        'padding' : 0,
        'width': '100%',
        'clear':'both'
    });
};

源码 

3.图像等比例缩放

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(window).bind("load", function() {
    // IMAGE RESIZE
    $('#product_cat_list img').each(function() {
        var maxWidth = 120;
        var maxHeight = 120;
        var ratio = 0;
        var width = $(this).width();
        var height = $(this).height();
        if(width > maxWidth){
            ratio = maxWidth / width;
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratio);
            height = height * ratio;
        }
        var width = $(this).width();
        var height = $(this).height();
        if(height > maxHeight){
            ratio = maxHeight / height;
            $(this).css("height", maxHeight);
            $(this).css("width", width * ratio);
            width = width * ratio;
        }
    });
    //$("#contentpage img").show();
    // IMAGE RESIZE
});

源码 

4.返回页面顶部

 

1
2
3
4
5
6
7
8
// Back To Top
$(document).ready(function(){
  $('.top').click(function() { 
     $(document).scrollTo(0,500); 
  });
});
//Create a link defined with the class .top
<a href="#" class="top">Back To Top</a>

源码 

 

5.使用jQuery打造手风琴式的折叠效果

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var accordion = {
     init: function(){
           var $container = $('#accordion');
           $container.find('li:not(:first) .details').hide();
           $container.find('li:first').addClass('active');
           $container.on('click','li a',function(e){
                  e.preventDefault();
                  var $this = $(this).parents('li');
                  if($this.hasClass('active')){
                         if($('.details').is(':visible')) {
                                $this.find('.details').slideUp();
                         } else {
                                $this.find('.details').slideDown();
                         }
                  } else {
                         $container.find('li.active .details').slideUp();
                         $container.find('li').removeClass('active');
                         $this.addClass('active');
                         $this.find('.details').slideDown();
                  }
           });
     }
};

6.通过预加载图片廊中的上一幅下一幅图片来模仿Facebook的图片展示方式

 

 

1
2
3
4
5
6
7
8
var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("").attr("src", nextimage).load(function(){
//all done
});
}, 100);
});

源码

7.使用jQuery和Ajax自动填充选择框 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '
' + j[i].optionDisplay + '
';
}
$("select#ctlPerson").html(options);
})
})
})

源码 

8.自动替换丢失的图片

 

 

1
2
3
4
5
6
7
8
// Safe Snippet
$("img").error(function () {
    $(this).unbind("error").attr("src", "missing_image.gif");
});
// Persistent Snipper
$("img").error(function () {
    $(this).attr("src", "missing_image.gif");
});

源码

9.在鼠标悬停时显示淡入/淡出特效

 

 

1
2
3
4
5
6
7
8
$(document).ready(function(){
    $(".thumbs img").fadeTo("slow", 0.6);// This sets the opacity of the thumbs to fade down to 60% when the page loads
    $(".thumbs img").hover(function(){
        $(this).fadeTo("slow", 1.0);// This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 0.6);// This should set the opacity back to 60% on mouseout
    });
});

源码 

10.清空表单数据

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function clearForm(form) {
  // iterate over all of the inputs for the form
  // element that was passed in
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase();// normalize case
    // it's ok to reset the value attr of text inputs,
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

源码 

11.预防对表单进行多次提交

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {
  $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
      jQuery.data(this, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });
});

源码 

12.动态添加表单元素

 

1
2
3
4
5
//change event on password1 field to prompt new input
$('#password1').change(function() {
        //dynamically create new input and insert after password1
        $("#password1").append("");
});

源码 

13.让整个Div可点击

 

1
2
blah blah blah. link
The following lines of jQuery will make the entire div clickable: $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; });

源码 

14.平衡高度或Div元素

 

1
2
3
4
5
var maxHeight = 0;
$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);

源码 

 

15. 在窗口滚动时自动加载内容

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
            loading = true;
            $('#loadingbar').css("display","block");
            $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
                $('body').append(loaded);
                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
                $('#loadingbar').css("display","none");
                loading = false;
            });
        }
    }
});
$(document).ready(function() {
    $('#loaded_max').val(50);
});

来自： codegeekz

几道容易出错的JavaScript题目

2013年7月14日 / / 暂无评论

下面这几道JavaScript题目大多来自于周五的一个小分享。都是很小的题目，但是很容易犯错。有一些是语言特性使然，有一些则是语言本身没有设计好而留下的陷阱。结果就是，遇到的人很容易陷进去骂娘，这些东西是略有些反直觉，感兴趣的不妨看看，平时我们还是尽量少些这样似是而非的代码。

1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Container( properties ) {
    var objthis = this;
    for ( var i in properties ) {
        (function(){
                var t = properties[i];
                objthis[ "get" + i ] = function() {return t;};
                objthis[ "set" + i ] = function(val) {t = val;};
        })();
    }
}
var prop = {Name : "Jim", Age : 13};
var con = new Container(prop);
console.log(con.getName());
con.setName("Lucy");
console.log(con.getName());
console.log(prop.Name);

这段代码会输出什么？前面两行分别是“Jim”和“Lucy”，这不会有问题；但是第三行应该输出的是“Jim”，但是有的人会误认为prop对象已被修改，故输出“Lucy”。其实在匿名函数中，properties[i]的值已经赋给了临时变量t，之后闭包对于外部变量的引用完全由t这个媒介来完成，因此prop传入以后并未发生任何属性的更改。

2.

1
2
3
4
5
function a (x) {
    return x * 2;
}
var a;
console.log(a);

这段代码中，其实var a并没有任何影响，输出的是a(x)这样的方法签名。

3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
c = 999;
var c = 888;
console.log(this.c); //①
function b (x, y, c) {
    c = 6;
    arguments[2] = 10;
    console.log(c); //②
    console.log(this.c); //③
    
    var c = 6;
    console.log(c); //④
    console.log(this.c); //⑤
}
b(1, 2, 3, 4);

这道题是比较变态的。

  • 第①处，this指的是window，在window下，c、this.c、var c在这里指的是同一个东西，看透这一点就好办了。打印的是888。
  • 第②处，方法体中，参数c和arguments[2]指的是同一个地址，所以把后者赋为10的时候，打印的是10，不是6。
  • 第③处，this指的是window，打印的是888。
  • 第④处，打印的是6。
  • 第⑤处，打印的是888。

4.

1
2
3
4
5
6
7
8
9
var start = new Date();
setTimeout(
    function(){
        var end = new Date();
        console.log(end - start);
    },
    1000
);
while(new Date() - start < 2000);

JavaScript因为是单线程工作的，因此虽然回调函数设置了1000毫秒后执行，事实上在1000毫秒的时候根本得不到执行，等待到while循环执行完毕后（因此已经是2000毫秒以后了），才去执行，因此输出应该是一个大于2000的数字。

5.

1
2
3
(function(){
    console.log(typeof arguments);
})();

很多人会说打印的是array，其实，typeof根本不会打印array的啊，打印的是object。

6.

1
2
function a(){return a;}
console.log(new a() instanceof a);

应该打印的是false，其实原因很简单，new a()的时候，因为return语句，得到的不是a的实例，而是a本身，a instanceof a当然是false啦。

最后，还有一个小题目是关于Function Invocation Pattern的，我在这篇文章里有写到，就不单独贴出来了。

文章系本人原创，转载请保持完整性并注明出自《四火的唠叨》

http://www.raychase.net/1485

基于Java的四大开源测试工具

2013年7月14日 / / 暂无评论

摘要：成功的应用程序离不开测试人员和QA团队反复地测试，应用程序在进行最后的部署之前，需要通过测试来确保它的负载管理能力以及在特殊情况下的工作条件和工作加载情况。

测试是应用程序生命周期里至关重要的一步，应用程序在进行最后的部署之前，需要通过测试来确保它的负载管理能力以及在特殊情况下的工作条件和工作加载情况。

网络上许多开源的Java测试工具，然而真正经得起时间和实践考验的不多，本文例举了Java里的四大开源测试工具，这四个工具主要专注于前端测试，并且得到了测试人员和QA团队的广泛使用。

 

Apache JMeter——JMeter是一款开源的纯Java测试工具，其主要用于负载测试和性能测试。QA团队使用它来查找和发现相关的性能和负载管理问题，尤其是Web应用程序的性能问题。它可以用于对静态的和动态的资源（文件、Servlet、Perl脚本、Java对象、JDBC数据库连接和查询、FTP、HTTP、JMS、通用的TCP连接、LDAP和OS本地进程访问等）的性能进行测试。它可以用于对服务器，网络或对象模拟繁重的负载来测试它们的强度或分析不同压力类型下的整体性能。

Jmeter架构提供了“out of the box”功能。此外，它还支持各种插件，这些插件可以实现其独特的创新功能，用户可以根据自己的需求进行自定义配置，添加相应地插件。

Selenium ——Selenium是一个开源的自动化测试工具，其主要用于Web应用程序的自动化测试，与其它测试工具不同的是，它可以在许多平台和操作系统上运行，可以直接在浏览器下运行，并且支持所有流行的测试框架和编程语言，如C++、Java、Python、Per和Ruby等。

Sahi ——Sahi是另一个开源的自动化Web测试工具，Sahi可以专门测试动态的AJAX应用程序，还带有非常出色的自动播放效果机制。其主要特点是：独立的平台和浏览器、出色的刻录机、无需等待、无需XPath、内置Java异常交互报告。

Robotium——Robotium是一款测试Android应用程序的开源自动化测试框架，应该说，Robotium是开发者们最常用的一款开源工具。主要针对Android平台的应用进行黑盒自动化测试，它提供了模拟各种手势操作（点击、长按、滑动等）、查找和断言机制的API，能够对各种控件进行操作。Robotium无需测试应用程序源码，并且安装简单、容易编写测试用例。当然，它还可以测试基于浏览器的一些Android应用程序，但前提是有些限制条件。

各位开发者，你们使用哪一款工具呢？

来自： Open Source Testing Tools in Java

http://www.csdn.net/article/2013-07-12/2816206-Open-Source-Testing-Tools-in-Java

用来简化开发任务的20个JavaScript类库

2013年7月10日 / / 暂无评论

摘要：所谓JS库就是预先写好的JS程序库，用于简化以JS为基础的开发程序，尤其是对AJAX和其他以Web为中心技术的JS代码集。文章搜集了20个JS库，帮你处理与开发相关的问题，让你的网站在竞争中领先一步。

所谓JS库就是预先写好的JS程序库，用于简化以JS为基础的开发程序，尤其是对AJAX和其他以Web为中心技术的JS代码集。JS的首要用途是将编写的功能内嵌在HTML页面，并与页面的对象模型(DOM)进行互动。

很多JS库很容易和其他Web开发技术进行整合，例如CSS、 PHP、Ruby、和Java。许多程序库可以检测运行环境之间的差异，删除一些应用程序，以满足整合需求。文章搜集了20个JS库，帮你处理与开发相关的问题，让你的网站在竞争中领先一步。

1. Tracking.js

Tracking.js是一个独立的JS库，可以跟踪照相机实时收到的数据。跟踪对象既可以是色彩也可以是人物，当检测到某个特定的颜色时或人物/脸庞/身体出现移动的时候，我们可以触发JS事件。

2. Aristochart

Aristochart是一个不依赖于其它库的JS库，它能够使用Canvas创建静态的2D线形图表。这个库专注于打造客户化设计，提供多种选项用于更改设计、标签等等。

3. Hitch

Hitch是一个轻量级的JS库，能够向CSS文件添加表现能力。同时具备CSS预处理程序能力，比如添加前缀或变量，还有一些其他的功能。这个程序库有多个随时可用的表达方式，如“any of，all of，has…”，并允许我们定义任何一种方式(称为hitches)。

4. Cesium

Cesium是基于WebGL的JS绘图库，支持3种不同的视图：3D globe、2D map、2.5D Columbus View，相互转换只要一行代码而已！绘画各种形状，突出显示特定区域以及使用鼠标或触摸板与地图进行互动是非常简单的。Cesium作为一个独立的JS文件可以在所有主流浏览器上运行，包括手机上。

5. Two.js

它是一个2D的绘图API，一个优秀的JS库，用于较新的Web浏览器，可基于不同上下文绘制，包括svg、canvas和webgl。 这个库目前只支持形状（非文本或图片），允许导入SVG数据。当需要一起转变的时候，Two.js可以聚合多个有用的元素。其中还有一个内置动画循环方法来绘制各种图形，还具有使之个性化的多个选项。

6. Sequel.js

Sequel.js是一个轻量级JS库，有助于通过一个面向对象的API来构建SQL查询字符串，既可以在浏览器上运行，也可以在所有标准的SQL查询上运行。

7. Draggabilly

这是一个可以让页面元素可拖动的独立JS库，Draggabilly能够帮你轻松实现网页上各种元素的拖放操作。可以在一个限制的容器范围内拖动页面元素，对于每一个事件（start，move，end）都有回调，可以返回当前元素的位置。它可用于大部分浏览器（IE8+）并内置支持触摸事件。

8. Zebra

此JS库带有一串富用户界面组件，可以创建类似于桌面效果布局。UI元素由HTML5 canvas构建，由CSS着色，预期在所有浏览器中渲染出相同的效果。拥有30多个UI元素，包括grid、tabs、menu、form elements、menu等等。

9. Formula.js

这个JS库为Web开发者带来了大多数公式，公式列举了多重分类——日期/时间，文本，逻辑，金融等等。此外，除了在客户端运行，还在服务端（即将发布）上运行。

10. Chart.js

这是一个给人印象深刻的JS独立图表库，大小不足5kb的程序包，建立在HTML5 canvas之上。目前支持6种图表类型：直线图、条形图、雷达图、饼状图、柱状图和地区区域图。颜色、字体、边框、大小都可以根据用户需求自定义。

11. Flippant.js

这是一个迷你JS和CSS库，允许自动翻转桌面上的东西。不依赖任何其它类库，便于自定义，翻转功能效果好。

12. React

React是一个用来构建用户界面的JS库，可以高效灵活地与你之前使用的类库和框架结合使用。

13. PathFinding.js

PathFinding.js是JS里一个综合路径寻找类库，其目的是提供一个可以方便结合到网络游戏里的路径寻找类库。它可以在服务端运行，也可以在浏览器上运行。提供在线演示算法是怎样执行的。当具体使用路径寻找器时，你可以通过其它的参数来指示该用哪一个策略。

14. Reactor.js

这是一个用于响应式编程的轻量级类库。它提供的反应变量，当它们所依赖的的事物发生改变的时候可以实现自动更新。这和电子数据表的运作方式有点相似，当一个单元格的数值有所变化的时候，与其有联系的其他单元格数值也会变化。

15. Bootbox.js

Bootbox.js是一个很小的JS库，允许使用Twitter的Bootstrap模式创建程序对话窗口，不需要担心创建、管理或删除任何任何需要的DOM元素或JS事件处理程序。

16. Parallel.js

Parallel.js在JS里是一个用于多核处理的微型库，它的创建充分发挥了成熟的Web-workers API，JS的确是很快，但由于它的单线程计算模式，它缺乏了与其对等语言的平行计算功能。

17. SVG.js

SVG.js可以通过SVG进行操作和手动绘画，此库轻便独立，功能丰富，有内置方法可以创建各种形状——三角形、圆形、多边形，或自定义图形。

18. Packery

这是一个使用“装箱算法”的JS布局库，这是“补漏”的体面说法。Packery的布局可以是井然有序的，也可以是错乱无序的。元素可以被固定在相应的位置，也可以随意拖放。

19. FPS Meter

FPS Meter是一个简单的JS库，用来制作迷人的、快速的、可主题化的FPS仪表。他可以测量出每秒的帧数，帧之间的毫秒数，以及使用.tickStart()方法时，渲染一帧所需要的毫秒数。

20. Howler.js

Howler.js一个是JS库，通过默认方式运行在网页音频API上，当浏览器不支持时退回到HTML5音频。为了保证跨浏览器的兼容性，它允许接收多种文件格式。该库能同时缓存和播放多个声音，还有循环播放功能，淡入淡出效果和标准的多媒体控制功能。

原文：CodeGeekz

 

http://www.csdn.net/article/2013-07-09/2816111-javascript-libraries

较早的文章 较新的文章

其他操作

近期文章

分类目录

归档

Copyright © 2024 优大网 浙ICP备13002865号

回到顶部 ↑