分类存档: Develop - 第8页

使用 arguments.caller 实现自动回调

这是一篇介绍类似于 js hack 的文章,只是说明了一种可行的途径,并且可能会增加代码复杂程度,具体项目中是否可以使用还请自辨:)

在前端开发过程中,有许多业务流程可能是需要用户进行登录的,并且登录过程是放在弹出层中,这样就可以不用刷新页面,增强用户体验。在登录时,用户的操作就会被打断,为了进一步增强用户体验,我们可能需要在登录完成后自动继续进行用户在登录前想进行的操作。

假设有这样一个场景,用户需要发表一个留言,但是发表留言是需要登录的,而发表留言的输入框是一直显示的,这也就要求在用户点击了发表按钮时对用户登录状态进行验证,传统的做法是将在用户登录状态检查封装在一个函数之中,这个函数接收一个回调参数,如果登录验证通过,则执行回调函数。这样的逻辑可以用以下代码表示:

function doAction() {
checkLogin(function() {
// 处理业务逻辑
});
}
function checkLogin(callback) {
if (isLogin) {
callback();
} else {
showLogin(callback);
}
}
function showLogin(callback) {
document.getElementById("login-btn").onclick = function() {
isLogin = true;
callback();
};
}

    总觉得这样的方式会将业务逻辑放到一个匿名函数中,而不是放在了按钮的事件响应函数中,感觉上不是那么好。这对整个事件响应函数的改动比较大,主要的业务逻辑都放在了登录验证函数的回调中。而希望可以是下面这样:



    阅读全文 »

    REALbasic 中使用 ShellExecute 执行命令

    在 REALbasic 中,如果需要执行 cmd 命令,可以直接使用 Shell 类,但是这样的话,编译成 Windows 程序时会额外需要一个 Shell.dll 的动态链接库,这对于我这样的 1exe 爱好者是不能忍受的。但是对于 Mac OS X 和 Linux 的生成目标来说,是不存在这个问题的,因为 Mac OS X 的应用程序本身就是一个文件夹,而 Linux 的目标不会生成额外的链接库。因此,需要针对 Windows 进行特殊处理。于是在网上搜索解决方案,找到了 VB 中执行程序的几种方法:

    1. 使用 CreateProcess

    通过 CreateProcess 以及使用管道,可以执行外部程序并获取输出,但是这个方法过于烦琐,并且我也不需要外部进程执行完毕后的输出结果,因此不采用。

    2. 使用 Shell 方法

    VB 里有一个 Shell 方法,但是在 RB 中并没有,所以此路不通。

    3. 使用 ShellExecute

    这个方法同样是一个系统 API,可以直接通过 …

    阅读全文 »

    HTML5 Canvas 起步(3) – 颜色与渐变

    上一篇介绍了 HTML5 中 Canvas 的路径,这篇将要介绍一下 Canvas 中的颜色及渐变。

    Canvas 中的基本颜色系统

    在 Canvas 中,颜色主要用途就是在绘制路径时,用来指定填充颜色和边框颜色。

    Canvas 中的颜色参数值有两种格式:

    1. 如果透明度为 1.0,也就是不透明,颜色值的格式就与一般使用一样,为:#AABBCC,其中 AA、BB、CC 分别为 Red、Green、Blue 分量。

    2. 如果透明度不为 1.0,也就是带透明,颜色值格式可以使用 rgba(r, g, b, a),其中 r、g、b、a 分别为 Red、Green、Blue 分量和透明度。透明度的值为 0 至 1.0 之间的一个数值。

    3. 颜色值还可以为已知的颜色名称,例如 red、blue、green 等。

    总的说来,Canvas 中颜色值的格式与 CSS 中一致,因此颜色值没有特别需要注意的地方。

    图片附件

    <canvas id="canvas" width="600" height="500"></canvas> <script 


    阅读全文 »

    HTML5 Canvas 起步(2) – 路径

    上一篇介绍了 HTML5 中 Canvas 的基本概念,这篇将要介绍一下 Canvas 中的基本图形。

    图形的基础 - 路径

    在 Canvas 中,所有基本图形都是以路径为基础的,也就是说,我们在调用 2dContext 的 lineTo、rect 等方法时,其实就是往已经的 context 路径集合中再添加一些路径点,在最后使用 fill 或 stroke 方法进行绘制时,都是依据这些路径点来进行填充或画线。

    在每次开始绘制路径前,都应该使用 context.beginPath() 方法来告诉 Context 对象开始绘制一个新的路径,否则接下来绘制的路径会与之前绘制的路径叠加,在填充或画边框时就会出现问题。在绘制完成路径后,可以直接使用 context.closePath() 方法来关闭路径,或者手动关闭路径。另外,如果在填充时路径没有关闭,那么 Context 会自动调用 closePath 方法将路径关闭。

    基本路径方法

    1. beginPath, closePath

    这两个方法在前面已经介绍过,分别用来通知 Context 开始一个新的路径和关闭当前的路径。

    在 Canvas 中使用路径时,应该要保持一个良好的习惯,每次开始绘制路径前都要调用一次 beginPath 方法,否则画出来的效果难看不说,还会严重影响性能。

    在下面这张图中,左边的图形在每次绘制矩形前都调用了一次 beginPath 来清除之前的路径并重新开始绘制新的路径,而后面的图形则就只在绘制所有图形前调用了一次 …

    阅读全文 »

    HTML5 Canvas 起步(1) – 基本概念

    什么是Canvas

    <canvas> 是一个新的 HTML 元素,这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作,也可以用来做一些动画。当然,目前 HTML5 规范还在草稿阶段,正式发布也许要等到2010年,不过现在已经有不少浏览器已经支持了部分 HTML5 规范。目前支持 canvas 元素的浏览器有 Firefox 3+、Safari 4、Chrome 2.0+ 等,因此,在运行本页中的例子时,请确保你使用的是上述浏览器之一。

    尽管在 Mozilla 已经有不少关于 Canvas 的教程,我还是决定把自己的学习过程记录下来。如果觉得我写的不够明白,那么你可以在参考资料中找到 Mozilla 网站上 Canvas 教程的链接。

    另外,可以在这里找到一些有趣的 Canvas 示例。

    开始使用 Canvas

    使用 Canvas 很简单,与使用其他 HTML 元素一样,只需要在页面中添加一个 <canvas> 标签即可:

    <canvas id="screen" width="400" height="400"></canvas>

    当然,这样只是简单的创建了一个 …

    阅读全文 »

    “云端的编辑器”,10 步安装 Bespin Development Server(Python版)

    Mozilla Labs 在今年情人节那天发布了一个叫 Bespin 的编辑器,这是一个基于网络的可扩展文本编辑器,按照现在流行的说法,就是“云编辑”了。并且,这个编辑器是开源的。

    图片附件

    Bespin 是基于 Canvas 的,因此目前它只支持少数浏览器,其中包括 Firefox 3+、Safari 4 以及 Chrome 2 开发版,因此,如果要使用 Bespin 的话,你必须使用这几款浏览器中的一种。

    要体验 Bespin,可以直接在 bespin.mozilla.com 注册一个帐号并且登录,不过目前 bespin.mozilla.com 所用的代码并不是最新版本的,线上使用的代码有许多不完善之处。因此,除了使用 Mozilla Labs 官方的 Bespin 站点,我们也可以从 Mozilla Labs 下载 Bespin 源代码,并在本地搭建 Bespin 服务,从而可以体验 Mozilla Labs 最新的开发成果。

    注意,这篇文章并不介绍怎么去使用 Bespin,而是介绍怎么样去配置一个可以在本地运行的 Bespin 服务器,因此,如果你需要了解怎么去使用这个编辑器,可以参阅 Mozilla Labs 上的文档,或者等我再写一篇使用 Bespin …

    阅读全文 »

    YUI学习笔记(4)

    YUI学习笔记(4)

    by xujiwei (http://www.xujiwei.com/)

    YAHOO.util.Subscriber 与 YAHOO.util.CustomEvent。

    1. YAHOO.util.Subscriber (event.js)

    这 应该算是设计模式中的观察者模式了,Subscriber 订阅一个事件,在 Publisher 触发那个事件后,会逐个通知 Subscriber。

    对 于一般开发者来说,并不需要去关心 Subscriber 的实现,因为 Subscriber 主要是 CustomEvent 用来分发动作以及删 除 Subscriber 的。

    Subscriber 类只定义了 3 个属性:fn、obj 以及 override,3 个方 法:getScope、contains、toString,其中 fn 为订阅者的回调函数,obj 为要传递给回调函数的一个额外参 数,override 如果是布尔型的 true 值,那么表示使用 obj 属性为回调函数执行时的上下文,或者直接使用一个对象来作为回调函数执行的 上下文。

    Subscriber 的 3 …

    阅读全文 »

    YUI学习笔记(3)

    YUI学习笔记(3)

    by xujiwei (http://www.xujiwei.com/)

    YAHOO.lang.later,YAHOO.lang.trim,YAHOO.lang.isXXX 以及 YAHOO.lang.hasOwnProperty。

    1. YAHOO.lang.later(yahoo/yahoo.js)

    later 方法用来延迟执行方法,是对 setInterval 和 setTimeout 的封装,并且可以传递参数到延迟执行的函数或者使用参数数组批量执行指定的函数。

    later 方法的签名为:

    later: function(when, o, fn, data, periodic)

    when 是用来指定在多长时间后执行指定的函数,以毫秒计算;

    o 是上下文对象,即在要执行的函数里使用 this 是会引用这个 o 对象;

    fn 就是要延迟执行的函数了,可以传递一个函数引用,也可以传递一个字符串,later 方法会在 o 对象中查找对应名称的属性来做为要执行的方法;

    data 就是传递给延迟执行的函数的参数了,可以为一个参数,或者是一个参数数组,那么如果我们要传递的参数本身就是一个数组的话,就要自己先把这个参数数组包装成一个数组;

    peridoic 参数是一个布尔值,用来表示延迟执行的函数是否需要周期执行而不是只执行一次。

    later 方法执行后会返回一个对象,包含了一个名 interval 的属性用来表示函数是以 setInterval 来执行的还是以 setTimeout 来执行的,以及一个方法 



    阅读全文 »

    YUI学习笔记(2)

    YUI学习笔记(2)

    by xujiwei (http://www.xujiwei.com/)

    YAHOO.lang.dump 与 YAHOO.lang.substitute。

    1. YAHOO.lang.dump(yahoo.js)

    dump 方法用来将一个对象转储为一个字符串,并且可以指定转储的深度。

    在 dump 过程中,对于基础类型例如 Number、String、Boolean,是直接返回字符串的,对 HTMLElement 对象是返回 HTMLElement 本身,也就是不做处理,对于函数 Function 则是返回字符串“f(){...}”。

    对于数组,dump 返回的格式就如我们定义时一样“[item1, item2 item3, ...]”,对于对象 Object,则是使用键值对的形式“key => value”,与 PHP 里面的数组定义方式相似。

    例如一个对象定义如下:

    var obj = {
    num: 1,
    str: "string",
    bool: true,
    date: new Date(),
    obj: {
    obj_num: 


    阅读全文 »

    YUI学习笔记(1)

    YUI学习笔记(1)

    by xujiwei (http://www.xujiwei.com/)

    今天开始学习 YUI,加强一下对 JavaScript 的理解。

    1. 命名空间 YAHOO.namespace(yahoo.js)

    YUI 中使用了命名空间的概念,在 JS 中使用命名空间是为了模块以及代码组织清晰的需要,通过使用命名空间可以将功能相似或同一模块中的函数、变量等放到同一个命名空间下。

    其实 JS 中的命名空间就是一个嵌套的对象而已,即子命名空间相当于父命名空间中的一个属性,它本身也是一个对象,这样子命名空间也可以有自己的子命名空间。

    在 YUI 中,命名空间的格式与 C# 中类似,是以点号分隔的字符串,可以使用 YAHOO 对象的静态方法 namespace 来创建命名空间,需要注意的是,以 namespace 方法创建命名空间时,所有的对象都是附加在 YAHOO 这个对象上的,如果调用 namespace 方法创建一个“com.xujiwei.ajax”这样的命名空间,其中 ajax 的完整路径将是 YAHOO.com.xujiwei.ajax,而不是 com.xujiwei.ajax,也就是说 namespace 不会产生新的顶层对象,一切以 YAHOO 对象为基础。

    namespace 方法接受一个或多个字符串来生成命名空间,但是它只返回最后一个参数所代表的命名空间的最后一个域的对象,例如使用 namespace("com.xujiwei.js", "com.xujiwei.ajax") 时它的返回值是代表 js 



    阅读全文 »