Javascript Module Loader实现原理

前端开发  |  6年前

前段时间我开始基于SeaJS开发2.0版本的JRaiser,主要目的就是把这个库模块化。结合实际开发过程中遇到的问题,我重新写了一个更符合自身需求的JRaiser Loader以代替SeaJS(另一方面也是为了亲手写一个Loader)。与SeaJS一样,JRaiser Loader也是Wrappings规范(关于AMD与Wrappings的区别,这篇文章有详细说明)的实现,主要接口也与SeaJS保持一致(但功能暂时比SeaJS少)。下面以JRaiser Loader的实现为例介绍一下Loader的实现原理。

先介绍几个术语:

  • 模块:模块化开发中的一个功能单元。它有一个唯一的Id作为标识,并可以依赖于其他模块。
  • 任务:全局require函数的回调函数。在JRaiser Loader的内部处理中,任务也是模块。
  • 就绪:当某个模块已经加载完成,并且不依赖于任何模块或者它依赖的所有模块已经就绪,这个模块就是就绪状态。

在模块化开发中,一个模块可以依赖于任意个模块,而被它依赖的模块又可以依赖于任意个其他模块。这就要求加载模块时必须一层一层把所有依赖的模块都加载进来,类似于树的遍历。由于前端动态加载JS的过程是异步的,也就是说,这是异步的遍历。在算法上,JRaiser Loader采取自顶向下的遍历方式以及自底向上的通知方式。假设有A、B、C三个模块,A依赖于B,B依赖于C。当通过加载A模块时,其加载过程如下(红色箭头部分为异步流程):

加载流程

2197次阅读,7条评论

使用Javascript获取当前目录的绝对路径

前端开发  |  6年前

一谈到路径相关的问题,大家都会往window.location上想,确实这个对象提供了相当多的路径信息,其中常用的就包括:

  • location.href:当前页面的完整URL
  • location.pathname:当前URL中的路径名
  • location.hash:当前URL中的锚点
  • location.search:当前URL中的查询参数

然而,location没有一个属性能直接获得当前目录(不含文件名的绝对路径。通过Google我发现了一些错误的方法,比如说把URL通过“/”分离成数组,把数组的最后一项去掉以后再连接成字符串。但如果URL中没有指定文件名,结果就大错特错了。

根据以往编码的经验,a元素的href属性总是会返回绝对路径,也就是说它具有把相对路径转成绝对路径的能力。使用下面的代码尝试了一下,果然成了:

var a = document.createElement('a');
a.href = './';
alert(a.href);
a = null;
5343次阅读,4条评论

验证码的几个常见漏洞

其他开发  |  6年前

把验证码存储在Cookie中

一般来说,我们会把验证码的值用Session存储起来,通过对比用户提交的验证码和Session中的验证码,就可以知道输入是否正确。由于Session会占用服务器资源,我曾经想过是否可以把验证码的值加密后存储在Cookie中。不过事实证明,这只是异想天开罢了。

假设验证码的值是a,通过sha1加密后得到的值为b = sha1(a),并且把b存储在Cookie中。而用户提交的验证码值为c,通过判断sha1(c)是否与b相等,可以知道输入的验证码是否正确。然而,Cookie是受客户端控制的。如果用户事先通过肉眼看到验证码的值是a,又从Cookie中得知此时的加密值为b,那么,他只要在提交前把Cookie的值修改为b,提交的验证码值为a,就可以永远通过验证。

没有进行非空判断

这种情况可以直接用代码来说明:

if (Request["captcha"] == Session["captcha"] as string)
{
    // 验证通过,继续操作
}
1753次阅读,3条评论

[译]原生全屏Javascript API

前端开发  |  6年前

HTML 5的<video>是一个相当不错的标签,但是它刚发布的时间,最大的问题是它不能像Flash那样实现真正的全屏。幸好,几个月后,大部分浏览器已经原生地支持全屏。

全屏API简史

  1. 第一个原生的全屏接口是在Safari 5.0(和iOS)中添加的 webkitEnterFullScreen() 函数。不过,它只能用于<video>标签。
  2. 在Safari 5.1中,苹果修改了这个API使它更接近于Mozilla的全屏API草案(比苹果的实现更早)。现在,所有DOM元素都可以调用 webkitRequestFullScreen() 方法。
  3. Firefox和Chome表示它们将会添加原生全屏API支持,而且这个特性已经在Chome 15+以及Firefox Nightly中实现。

在2011年10月15日,W3C发布了一份全屏API草案(由Opera团队的一名成员编写),它跟Mozilla的草案有两个主要的不同点:

  1. Mozilla/Webkit使用大写字母'S'(FullScreen),但W3C则不是(Fullscreen);
  2. Mozilla/Webkit使用cancelFullScreen,W3C使用exitFullscreen
7777次阅读,2条评论

使用canvas绘制时钟

前端开发  |  7年前

准备工作

在HTML中指定一个区域放置时钟:

<div id="clock" style="position: relative;"></div>

时钟的一些外观设定:

var width = 260; // 桌布宽度
var height= 260; // 桌布高度
var dot = {
	x : width / 2,
	y : height / 2,
	radius : 6
}; // 圆点位置、半径
var radius = 120; // 圆半径
var borderWidth = 6; // 圆边框宽度
6760次阅读,4条评论

惠普4431s商用笔记本简单评测(下)

工作生活  |  7年前

正如上篇末尾所说,下篇主要谈一下此机的缺点,其中星星符号代表其缺点的严重程度。

电源适配器无指示灯(★)

这个问题在上篇也谈到过,适配器上无通电指示灯,无法知道当前是通电还是断电状态(有可能插座坏了或者松了)。此外,其实指示灯也可以使适配器更加美观。

HP 4431s与Lenovo F41电源适配器对比

光驱声(★)

每次开机以及从休眠唤醒时,光驱都会发出一些声响。虽然声音不大,但总感觉有点不爽。

1328次阅读,1条评论

惠普4431s商用笔记本简单评测(上)

工作生活  |  7年前

本来打算上一年入的笔记本,由于没有选到合适的机型而推到今年才出手。千挑万选之后,初步确定了两台机子,分别是Thinkpad E420sHP 4431s,均为i3版配置。最后选4431s的原因是,这款机带蓝牙、底板容易拆卸(方便清理灰尘、加内存),且在硬件配置差不多的情况下比E420s要便宜差不多2K。

机器在岗顶太平洋电脑城入手,价格不到¥4K5,加上开票以及8G内存,总价不到¥5K,赠品有单肩包、鼠标和鼠标垫。

外观

这机的A、C面都是金属拉丝,以银色为主。

HP 4431s

1317次阅读,5条评论

[译文]ECMAScript 5严格模式(Strict Mode)

前端开发  |  7年前

严格模式(Strict Mode)是ECMAScript 5的新特性,它允许你把整个程序,或者某个函数,放置在“严格”的操作语境中。这种严格的语境会防止某些特定的操作并抛出更多的异常。

虽然ECMAScript 5对ECMAScript 3是向下兼容的,但是在严格模式下,所有在ECMAScript 3中不赞成使用的特性都被禁用(或抛出错误)而不是兼容。

启用严格模式有以下好处:

  • 捕获一些编程错误,并抛出异常。
  • 阻止进行一些相对“不安全”的操作(例如访问全局变量),抛出异常。
  • 禁用一些让人迷惑的特性。

关于严格模式的大多数信息都可以在《ES5规范》[PDF]的第223页找到。

(注意:ECMAScript 5的严格模式跟Firefox的严格模式是不同的)

如何启用严格模式

在程序的开头添加这条语句即可对整段脚本启用严格模式:

'use strict';
1624次阅读,2条评论

分析MySQL的授权许可

其他开发  |  7年前

MySQL是开源软件,但开源不意味着免费,开源软件的使用应遵循该软件提供的使用授权许可。MySQL的授权许可是英文的,而且一直以来没有权威的中文译本,所以很多人都不清楚其中的细节。

最近我在做一些ASP.NET+MySQL的应用,特地对MySQL的授权许可进行了研究。

(以下说明,如有错误,欢迎指正)

使用MySQL作为数据库的应用是否会“被GPL”

MySQL开源软件(包括MySQL社区版数据库服务器、驱动程序和链接库等)是在GPL许可下提供的。GPL(General Public License)是一种开源许可,其大概的内容是:只要在一个软件中使用(“使用”指类库引用,修改后的代码或者衍生代码)GPL协议的产品,则该软件产品也必须采用GPL协议,即必须也开源。

应用程序是否也必须采用GPL进行开源,是由如何去使用MySQL决定的。如果把MySQL数据库内嵌到应用程序中,成为了应用程序内部的一部分,则整个应用程序都必须遵守GPL的规定。而对于大多数Web应用,数据库并不是跟应用程序绑在一起的,数据库跟应用程序是产品间相互协作的关系,这种情况就不在GPL的约束范围之内。

1270次阅读,1条评论

GO比分开发总结

前端开发  |  7年前

最近一直在忙公司的第一款类客户端产品——GO比分

GO比分

网页具有强大的跨平台特性,HTML+CSS比任何其他界面制作方式都要强大和灵活。然而,网页无法实现Web范围外的一些功能(例如手机通知栏、铃声、震动等)。因此,还需要通过一个代理去调用,也就是客户端。所谓类客户端,就是穿了客户端这件“马甲”的网页

1348次阅读,12条评论