模块化JavaScript开发

Posted on

前端开发的节奏真是日新月异。。。短短几年竟然发展如此迅速,JavaScript的各种框架库可以说比其他语言的总和还多。Google家的AngularJS,和Facebook的React各领风骚。自己写的前端项目也越来越复杂, 单纯的面向过程开发和单文件已经不能满足现有的需求。虽然ES6早就引入模块化特性,但是目前的浏览器还没有实现。还需要借助其它前端工具进行编译。。。下面我就顺便介绍下Web开发的历史。。。

Server Rendered

以前开发Web项目,全部是服务器来渲染页面,从数据库读入数据,浏览器只负责解释页面,这种情况下不考虑交互性,其实完全不用写任何Js代码。但是缺点也很大,处理全部交给服务器,服务器压力大。而且每次都是刷新加载,所以用户体验也不是很好。

Server-Rendered + AJAX

后来使用AJAX无刷新技术,对于简单的登录交互我们没有必要刷新页面,而是直接使用Js发送认证数据进行交互和登录。一定程度上减少了服务器的压力。

Single Page App

后来出现了谷歌的AngularJS这样的富客户端Js框架,做到了真正的页面和数据分离。全部使用JavaScript进行页面的渲染和交互,只向服务器请求必要的数据,并使用JSON的数据格式来传输。这样不仅有利于减少服务器压力,而且还可以复用到各种平台。但是JavaScript代码变得越来越多和复杂,必须考虑合适的架构和模块化开发才有利于之后的维护。

Webpack模块化工具

webpack模块化工具可以把你写的符合模块化规范的代码进行打包和整合到一个单子文件,这样就可以模块化自己的项目。但是官方文档实在是很难学习,自己琢磨了一段时间才算稍微能上手。并且还遇到点小问题,在此记录下,我们可以使用命令$ npm install webpack -g 安装webpack.但是我们使用的时候经常还是遇到找不到webpack的问题,是因为缺少环境变量NODE_PATH 可以通过设置export NODE_PATH="/usr/lib/node_modules来解决。

相关学习资料

webpack指南

webpack-howto

tagged: JavaScript

WebGL渲染的知识介绍

Posted on

来到日本导师的研究方向是计算机图形学,由于我比较擅长Web开发,便选择了WebGL进行图形渲染的研究课题。学习了大半年,也该写点东西介绍下自己对WebGL的理解,如有错误,欢迎批评指正。

WebGL介绍

WebGL是基于OpenGL ES 2.0文档进行开发的,所以想了解相关API的话,直接查阅官方的OpenGL ES 2.0文档即可.WebGL的一大优势是可以使用GPU资源来进行图形渲染和相关的计算,但是使用GPU资源的话必须使用对于GPU友好的语言来进行编写,WebGL使用GLSL来编写用于GPU渲染的着色器。 JavaScript主要负责整个渲染流程的控制和GPU与CPU之间的数据交互,繁重的坐标变换计算全部交给GPU来处理。

WebGL渲染管道

获取WebGL

WebGL是基于canvas画布来进行渲染的,首先我们要使用getContext方法来获取gl对象。并判断浏览器是否支持WebGL.

    var gl = null;
    try{
        gl = canvas.getContext('experimental-webgl');
        if(gl == null){
            gl = canvas.getContext('webgl');
        }
    }
    catch(error){}

    if(gl != null){
        // WebGL is supported 
    }
    else{
        // WebGL is not supported
    }

顶点着色器

WebGL只支持绘制基本图元,复杂的图形也是有基本图元组合而成的,基本图元包括点、线段或三角形。三角形是最经常用来使用的,因为3D空间中的任何3个点都是一个三角形的顶点。顶点着色器一般用写在HTML中,并标上HTML无法识别的type,这样浏览器就不会解释执行。 顶点的X,Y,Z轴的取值范围全部是-1到1之间,所以要注意变换坐标。

    <script id="vs" type="x-shader/x-vertex">  
        attribute vec3 position;  
        uniform   mat4 mvpMatrix;

        void main(void){  
            gl_Position = mvpMatrix * vec4(position, 1.0);  
        }  
    </script>

前面的mvpMatrix矩阵是坐标变换用的,因为我们在实际渲染可能要应用到很多的矩阵变换以渲染到屏幕上。这部分知识可以看看基本的图形学相关书籍,我看的是《DIRECTX.9.0.3D游戏开发编程基础》,里面介绍了相关的矩阵概念和数学知识。顶点着色器负责绘制图元的顶点信息,接下来就要使用片段着色器绘制相关的颜色信息。

片段着色器

片段着色器接收到顶点着色器的顶点信息并在此位置绘制相应的颜色值。颜色的取值范围是0到1.

    <script id="fs" type="x-shader/x-fragment">  
        void main(void){  
            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);  
        }  
    </script>

使用片段着色器可以给相应的顶点设置颜色值,在顶点与顶点之间的位置使用插值法设置颜色值。

渲染管道可以参考这张比较形象的流程图:

WebGl Pipeline

texture

GPU运算里面有个非常常用的数据结构,那就是texture,既可以存储图片数据,也可以存储frame数据。对于离屏渲染非常重要,不过在GPU运算里面非常重要的一点是一个变量不能既作为输入有作为输出。 在CPU运算里面我们经常写: a=a+1 但是在GPU运算里面是不能这样操作的,需要有一个临时变量存储输出的值,然后再传入到最终变量中。类似于:b=a+1;a=b这样。所以对于动画渲染,我们需要使用两个framebuffer 相互交换进行渲染。

离屏渲染

对于复杂的图形渲染,可能一次描绘无法完成最终效果,这时候我们可以把渲染的中间效果存储到framebuffer里面,再下一次渲染的时候继续使用,只需要简单的在渲染之前绑定framebuffer即可。

    gl.bindFramebuffer(gl.FRAMEBUFFER, Cube.FboHandle);

相关学习资料

WebGL MDN

WebGL 開発支援サイト

WebGL入门

tagged: WebGL

关于JavaScript跨域请求的相关知识

Posted on

2016年已经过了3个月了,还没来得及更新博客...实在是惭愧惭愧...最近确实也很忙,一边要打工,一边要写论文,一边还要找工作...

最近百度的导出插件出了点小问题,导致很多人无法正常和Aria2c通讯.经过仔细的分析,发现问题出在跨域请求上,接下来就要详细说说JavaScript的跨域请求.

JavaScript跨域请求

跨域请求指得是发起请求的资源所在域不同于该请求所指向资源所在的域的 HTTP 请求.最常见的就是跨域载入图片,我们可以看到很多网站主站和网站所使用的图片 是不同的域名的.这样做的好处是请求图片的时候不会发送主站的Cookies,因为不同域名嘛.而且还可以减少主站的服务器压力.但载入图片使用的是GET方法,比较简单.

跨域POST请求

我们经常使用POST请求发送各种指令数据,因为POST发送的数据没有长度限制.我们还可以在发送数据之前修改请求头,发送各种自定义的 HTTP Request Headers.但是 在跨域请求的时候POST的请求头被严格限制,被允许设置的请求头只有:

    - Accept
    - Accept-Language
    - Content-Language
    - Content-Type

并且允许的 Content-Type 只有一下三种:

    - application/x-www-form-urlencoded
    - multipart/form-data
    - text/plain

Preflighted requests

当我们发送的请求不满足上面的条件时,就必须发送预请求给目的站点,来查明这个跨站请求对于目的站点是不是安全可接受的。以下条件会触发预请求的发送:

    - 请求以 GET, HEAD 或者 POST 以外的方法发起请求。或者,使用 POST,但请求数据为 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如说,用 POST 发送数据类型为 application/xml 或者 text/xml 的 XML 数据的请求。
    - 使用自定义请求头(例如 Aria2c的验证使用的 Authorization)

结论

本次BUG的出现,是由于代码验证不规范,对于不需要用户名和密码验证的RPC地址.仍然发送自定义的 Authorization 验证头.导致触发OPTIONS请求,但是本身不支持验证的Aria2c客户端无法识别OPTIONS请求,只能返回500错误.导致通讯失败,至此 BUG分析完毕.

参考:

HTTP access control (CORS)

HTTP/1.1: Method Definitions

tagged: JavaScript