無標題文檔

Javascript 每日测试 - 第一期

天气越发炎热,中午搞个小测试给大家提神还是不错的。这次是 玉伯 兄弟出的题目:

请确认下述语句

alert(String.indexOf);
delete String.indexOf;
alert(String.indexOf);     
alert(String.length);    
String.prototype = null;
delete String.split;
delete String.prototype;
alert(String.prototype.split);
alert(String.split);

每个 alert 都会输出什么?

粗看这道题目考的是 prototype 原型以及 delete 操作符的用法,于是很快就写出了答案

alert(String.indexOf);  => function () {...}
...
alert(String.indexOf);   => undefined
...
alert(String.prototype.split); => function () {...}
alert(String.split); => undeinfed

有关 delete 操作符的描述,可以参见 Mozilla 的 相关文档

ECMAScript 为元素的属性定义了 4 种特性,它们分别是 ReadOnly、DontEnum、DontDelete、Internal ,这在平时用户级别的 Javascript 是无法更改的(来源)。(但 undefined 和 NaN 却是可读写的,这个是有点莫名其妙 -- form 小马)。

回到上面的问题,对于

alert(String.length);

输出 1 (不好意思作弊了)这个现象非常难以理解。小马 同学(再次感谢)做出了如下的解释,整理如下:

String 事实上是一个 function,是个所谓的构造器函数,可
用 typeof String 来验证。那么 function 的 length 属性,
它的值就是这个构造器函数在声明时的参数的数量。

详细可以 参考这里 。那么这样就很容易理解 alert(String.length) 为什么是 1 了 -- 因为它就提供了一个参数( 来源 )。

--EOF--

Javascript 每日测试 - 第二期

这回是 小马 同学出的题目:

var a = parseInt('01');
alert(a == 1); //true
var b = parseInt('09/04/2008');
alert(b == 9); //?

请问第二个会弹出 true 还是 false ?

首先是 沈冲 同学的回答:

如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现
把其后的字符解析为八进制或十六进制的数字。

佩玉 同学就更牛了,直接转贴了 Javascript 犀牛书上的内容:

parseInt( ) parses and returns the first number (with an optional leading
minus sign) that occurs in s. Parsing stops, and the value is returned, 
when parseInt( ) encounters a character in s that is not a valid digit for
the specified radix. If s does not begin with a number that parseInt( ) can
parse, the function returns the not-a-number value NaN. Use the isNaN( ) 
function to test for this return value.

总结,parseInt 其实有两个参数( 详细 ):

parseInt(string[, radix])

所以当第一个参数遇到 0 开头的字符时,会自动使用 8 进制解析数字,而 9 不是 8 进制里合法的数字,所以返回 0 。所以要在 parseInt 函数中数指定进制(也就是第二个参数),才能得到期望的结果。

为了代码的健壮性,建议使用 parseInt 时总是指定第二个参数 -- 小马。

--EOF--

Javascript 的 MVC 思想

几乎所有的程序设计书籍,它们都会或多或少的讲解 MVC 是什么回事

有幸收到份来自 jamal 的 PPT,其作者阐述了针对 Javascript 的 MVC 思想。这份不长的 PPT 中,有个图让我思考良久(本人加了些翻译):

https://friable.rocks/_/2009_11_05/909145a1d249.jpg

大图可以看这里 ,或者 将此 PPT 以及图片打包下载

个人认为, 软件架构模式 也是仁者见仁的事情,这就好比各种不同的 Javascript 开发框架一样,没有孰劣孰优、只有适合不适合。

另外,扩展阅读 此篇同类文章 ,也能收获良多。

Javascript 的 Array 扩展包

不同版本的 Javascript 提供了不同的 Array 方法。其中有几个方法非常的实用,比如 filterforEachevery 等等。

但由于存在不同的浏览器版本,加上 Javascript 的实现不一样,所以并不是每个浏览器都能非常良好的支持 Javascript 1.6 以后的 Array 扩展。

在参考了 Tbra 库 以及 Mozilla 官方的文档 以后,再加上 原先编写的些 Array 扩展 ,这样应该能满足日常的开发需要了。

下载 源代码Zip 打包 以及 在线 HTML 阅读

YUI 读码日记之 YAHOO.util.Get

首先要道个歉,距离 上次 的「YUI 读码日记」 更新已经差不多快两个月了。期间可能是工作忙(这算不上是借口),或者是其他事情给耽误了,但无论如何作为名 YUI 的初学者还是要继续坚持下去的。

上次的 跨域调用 问题,最后使用 YAHOO.util.Get 这个组件搞定的。而接下来的几次开发中,也用到了这个组件,所以激起了对其原理窥探的好奇心。

YAHOO.util.Get = function() {
    script: function(url, opts) {
        return _queue("script", url, opts);
    },

    css: function(url, opts) {
        return _queue("css", url, opts); 
    }
}

YAHOO.util.Get 的外部调用只有另个方法,分别载入 Javascript 脚本以及 CSS 样式。究其代码,可以很明显的看到其使用了「队列」机制。

下面详细产看此函数的实现。比较点睛的是清理队列,以及加入 lang.later 两点。

var _queue = function(type, url, opts) {
    var id = "q" + (qidx++);
    opts = opts || {};

    // 当队列到达一定数量时,清理队列(清除已经操作完毕,或者重复的节点)
    //     YAHOO.util.Get.PURGE_THRESH 默认为 20
    if (qidx % YAHOO.util.Get.PURGE_THRESH === 0) {
        _autoPurge();
    }

    // 合并对象,并插入队列
    queues[id] = lang.merge(opts, {
        tId: id,
        type: type,
        url: url,
        finished: false,
        nodes: []
    });

    var q = queues[id];
    q.win = q.win || window;
    q.scope = q.scope || q.win;
    q.autopurge = ("autopurge" in q) ? q.autopurge : 
                  (type === "script") ? true : false;

    // 请考虑为什么使用 later 并延时为 0
    lang.later(0, q, _next, id);

    return {
        tId: id
    };
};

加入外部 CSS 样式,以及 Javascript 的原理非常简单。流程就是使用 createElement 生成节点,然后加入相应的属性,最后插入到文档(document)中(YAHOO.util.Get 是插入到 head 元素中)。

下面看下 YAHOO.util.Get 是如何对元素属性操作的。

var _node = function(type, attr, win) {
    var w = win || window, d = w.document, n = d.createElement(type);

    for (var i in attr) {
        // 判断有其自身的属性,才确定设置
        if (attr[i] && YAHOO.lang.hasOwnProperty(attr, i)) {
            n.setAttribute(i, attr[i]);
        }
    }

    return n;
};

var _linkNode = function(url, win) {
    return _node("link", {
            "id": "yui__dyn_" + (nidx++),
            "type": "text/css",
            "rel": "stylesheet",
            "href": url
        }, win);
};

最后,「精简版」的 getScript 可以这样实现。

var getScript = function (url) {
    var element  = document.createElement('script');
    element.type = 'text/javascript';
    element.src  = escape(url);
    document.getElementsByTagName("head")[0].appendChild(element);   
}

当然,适用性自然不及 YAHOO.util.Get 来得好。

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 要知道作为码农取名是件很难的事情,所以不想在取名这事情上太费心思。

作为八零后,自认为还仅存点点可能不怎么被理解的幽默感,以及对平淡生活的追求和向往。 为了避免不必要的麻烦,声明本站所输出的内容以及观点仅代表个人,不代表自己所服务公司或组织的任何立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

分类

搜索

文章