jQuery：1.5.4.1，表格变色（第...-一种模仿线程的Javascript异步...-[译] THREE.JS入门教程-6.创建自己的全景图

当前位置: 编程技术>WEB前端

本页文章导读:

▪jQuery：1.5.4.1，表格变色（第一行是奇数） ylbtech-jQuery:jQuery学习jQuery语法实例表格变色效果截图 jQuery：1.5.4.1,表格变色 HTML代码返回顶部<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css">.........

▪一种模仿线程的Javascript异步模型设计&实现 jQuery中所支持的异步模型为：Callbacks，回调函数列队。Deferred，延迟执行对象。Promise，是Deferred只暴露非状态改变方法的对象。这些模型都很漂亮，但我想要一种更帅气的异步模型。 Thread.........

▪[译] THREE.JS入门教程-6.创建自己的全景图译序Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的.........

[1]jQuery：1.5.4.1，表格变色（第一行是奇数）

来源: 发布时间: 2013-11-06

ylbtech-jQuery:jQuery学习

jQuery语法实例

表格变色效果截图

jQuery：1.5.4.1,表格变色 HTML代码返回顶部

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.even{ background-color:Gray;} /*奇数行样式*/
.odd{ background-color:Yellow;} /*偶数行样式*/
</style>
<script src="/blog_article/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("tr:even").addClass("even"); /*给奇数行添加样式*/
$("tr:odd").addClass("odd"); /*偶数行添加样式*/
});
</script>
</head>
<body>
<h3>表格变色</h3>
<table >
<tr>
<th>

name</th>
<th>
sex</th>
<th>
age</th>
</tr>
<tr>
<td>
rain
</td>
<td>
male
</td>
<td>

23</td>
</tr>
<tr>
<td>
rain
</td>
<td>
male
</td>

[2]一种模仿线程的Javascript异步模型设计&实现

来源: 发布时间: 2013-11-06

jQuery中所支持的异步模型为：

Callbacks，回调函数列队。
Deferred，延迟执行对象。
Promise，是Deferred只暴露非状态改变方法的对象。

这些模型都很漂亮，但我想要一种更帅气的异步模型。

Thread？

我们知道链式操作是可以很好的表征运行顺序的（可以参考我的文章《jQuery链式操作》），然而通常基于回调函数或者基于事件监听的异步模型中，代码的执行顺序不清晰。

Callbacks模型实际上类似一个自定义事件的回调函数队列，当触发该事件（调用Callbacks.fire()）时，则回调队列中的所有回调函数。

Deferred是个延迟执行对象，可以注册Deferred成功、失败或进行中状态的回调函数，然后通过触发相应的事件来回调函数。

这两种异步模型都类似于事件监听异步模型，实质上顺序依然是分离的。

当然Promise看似能提供我需要的东西，比如Promise.then().then().then()。但是，Promise虽然成功用链式操作明确了异步编程的顺序执行，但是没有循环，成功和失败分支是通过内部代码确定的。

个人认为，Promise是为了规范化后端nodejs中I/O操作异步模型的，因为I/O状态只有成功和失败两种状态，所以他是非常成功的。

但在前端，要么只有成功根本没有失败，要么不止只有两种状态，不应当固定只提供三种状态的方案，我觉得应该提供可表征多状态的异步方案。

这个大家可以在something more看到。

我想要一种类似于线程的模型，我们在这里称为Thread，也就是他能顺序执行、也能循环执行、当然还有分支执行。

顺序执行

线程的顺序执行流程，也就是类似于：

do1();
do2();
do3();

这样就是依次执行do1，do2，do3。因为这是异步模型，所以我们希望能添加wait方法，即类似于：

do1();
wait(1000); //等待1000ms
do2();
wait(1000); //等待1000ms
do3();
wait(1000); //等待1000ms

不使用编译方法的话，使用链式操作来表征顺序，则实现后的样子应当是这样的：

Thread(). //获取线程
then(do1). //然后执行do1
wait(1000). //等待1000ms
then(do2). //然后执行do2
wait(1000). //等待1000ms
then(do3). //然后执行do3
wait(1000); //等待1000ms

循环执行

循环这很好理解，比如for循环：

for(; true;){
dosomething();
wait(1000);
}

进行无限次循环执行do，并且每次都延迟1000ms。则其链式表达应当是这样的：

Thread(). //获取线程
loop(-1). //循环开始，正数则表示循环正数次，负数则表示循环无限次
then(dosomething). //然后执行do
wait(1000). //等待1000ms
loopEnd(); //循环结束

这个可以参考后面的例子。

分支执行

分支也就是if...else，比如：

if(true){
doSccess();
}else{
doFail();
}

那么其链式实现应当是：

Thread(). //获得线程
right(true). //如果表达式正确
then(doSccess). //执行doSccess
left(). //否则
then(doFail). //执行doFail
leftEnd(). //left分支结束
rightEnd(); //right分支结束

声明变量

声明变量也就是：

var a = "hello world!";

可被其它函数使用。那么我们的实现是：

Thread(). //得到线程
define("hello world!"). //将回调函数第一个参数设为hello world!
then(function(a){alert(a);}); //获取变量a，alert出来

顺序执行实现方案

Thread实际上是一个打包函数Fn队列。

所谓打包函数就是将回调函数打包后产生的新的函数，举个例子：

function package(callback){
return function(){
callback();
// 干其他事情
}
}

这样我们就将callback函数打包起来了。

Thread提供一个fire方法来触发线程取出一个打包函数然后执行，打包函数执行以后回调Thread的fire方法。

那么我们就可以顺序执行函数了。

现在只要打包的时候设置setTimeout执行，则这个线程就能实现wait方法了。

循环执行实现方案

循环Loop是一个Thread的变形，只不过在执行里面的打包函数的时候使用另外一种方案，通过添加一个指针取出，执行完后触发Loop继续，移动指针取出下一个打包函数。

分支执行实现方案

分支Right和Left也是Thread的一种变形，开启分支的时候，主Thread会创建两个分支Right线程和Left线程，打包一个触发分支Thread的函数推入队列，然后当执行到该函数的时候判断触发哪个分支执行。

[3][译] THREE.JS入门教程-6.创建自己的全景图

来源: 发布时间: 2013-11-06

译序

Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。

国外网站 aerotwist.com 有六篇较为简单的入门教程，我尝试着将其翻译过来，与大家分享。

0.简介

全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。

要做一个全景图，你需要一个软件用来做一张全景图片（译者注：如果你没有那些特殊的设备）。我使用了iPhone上的Microsoft Photosynth软件来制作。

1.环境纹理

首先什么是环境纹理？在WebGL或者OpenGL中他们实际上是种特殊的立方体纹理。一个立方体纹理是对整个场景（虚拟的或现实的）的观察，场景的样子被“贴”在了立方体的内部表面。想象一下，你站在山顶，向前看，向左看，向右看，向上看，向下看，最后向后看。每一次你都看到了这个“立方体”的内部表面，你就站在这个立方体的中心。如果这个立方体足够大，就很难分辨出立方体的棱和角，而给你一种错觉：你处在一个很大的环境里面。如果你还没弄明白，那么维基百科上的cube maps条目会非常有帮助。

这很酷，但是这怎么用？我们可以像做反射和折射一样，而且事实上这两者的函数都已经内建在GLSL，WebGL的着色器语言上了。你只需要传递给着色器6张纹理图片，每张代表立方体的一个内表面，然后告诉WebGL这是个立方体纹理，然后就可以使用上面的效果了。

半轴：这个术语服务于立方体纹理。因为我们通常使用三个轴来描述三维空间：x轴、y轴、z轴，所以用于立方体纹理的图片也用轴的名称来标识了。一共六张图片，每个轴两张图片，正半轴一个，负半轴一个。

2.创建全景图片

创建全景图片的第一步就是走出户外，使用手机上的应用来照一张。我在伦敦的金融区转了一圈，然后在Gherkin照了一张。我获得了下面这张图片：

值得指出的是，这个应用将图片做成了贴到球体上的那种。这看上去不错，但是我们现在需要将它贴到一个立方体的内表面上，所以还要处理一下这张图。

3.转化到立方体上

这部分我简短介绍一下。我把刚才获得的那张照片载入到一个3D建模软件中，比如Maya或者Blender，然后将其粘贴到一个球体的内表面上。然后我创建了6个正射投影的相机，每一个都对应于一个半轴。最后我将这6个相机捕捉到的图像保存了下来。具体怎么完成比较复杂，也没必要在这里讲解，所以我写了一个Blender脚本文件，所有的一切都设置好了。

使用这个脚本文件你只需要：

将你自己的全景图重命名为 environment.jpg；

将全景图和Blender脚本文件放在同一个文件夹下；

载入脚本文件；

点击右侧的 Animation 按钮；

等一会儿，6张图像已经创建好了。

很Cool吧？现在你可以重新命名这些图像，使之与每一个半轴相匹配。比如这样：

0001.png → pos-z.png
0002.png → neg-x.png
0003.png → neg-z.png
0004.png → pos-x.png
0005.png → neg-y.png
0006.png → pos-y.png

4.加入场景

现在我们已经获得了环境纹理，然后将其载入到场景中。Three.js使这变得非常简单：

// 纹理图像的url
var urls = [
'path/to/pos-x.png',
'path/to/neg-x.png',
'path/to/pos-y.png',
'path/to/neg-y.png',
'path/to/pos-z.png',
'path/to/neg-z.png'
],
// 打包成我们需要的对象
cubemap = THREE.ImageUtils.
loadTextureCube(urls);
// 设置格式为RGB
cubemap.format = THREE.RGBFormat;

现在只需要将cubemap指定到一个材质中去就可以了！

var material = new THREE
.MeshLambertMaterial({
color: 0xffffff,
envMap: cubemap
});

看看效果

5.小结

就这样了，实现一个全景图很酷，尤其是你可以将你自己的地方制作为WebGL全景图。和往常一样，我打包了这次教程的源码，如果你喜欢它，或者有什么问题，都可以通过email和twitter联系我。

本文链接