<![CDATA[木子屋 - 前台脚本]]> http://www.mzwu.com/ zh-cn PBlog2 v2.4 木子屋 http://www.mzwu.com/images/logos.gif http://www.mzwu.com/ 木子屋 http://www.mzwu.com/article.asp?id=2413 <![CDATA[cscript.exe调用vbs示例]]> dnawo@sohu.com(dnawo) Tue,30 Mar 2010 11:43:46 +0800 http://www.mzwu.com/default.asp?id=2413
复制内容到剪贴板程序代码 程序代码
Dim ArgObj
Set ArgObj = WScript.Arguments
If ArgObj.Count < 1 Then
    msgbox "miss arguments!"
    WScript.Quit()
Else
    Select Case UCase(ArgObj(0))
        Case "ALERT"
             Alert ArgObj(1)
        Case "ADD"
            Add ArgObj(1), ArgObj(2)
        Case Else
            msgbox "arguments error!"
    End Select
             
End If

Sub Alert(username)
    msgbox "hello," & username
End Sub

Sub Add(a, b)
    msgbox CInt(a) + CInt(b)
End Sub

调用示例：
引用内容 引用内容
cscript.exe test.vbs
cscript.exe test.vbs alert mzwu
cscript.exe test.vbs add 5 6

cscript.exe可省略，一样能正常执行！]]> http://www.mzwu.com/article.asp?id=2365 <![CDATA[jquery.treeview.async简介]]> dnawo@sohu.com(dnawo) Tue,19 Jan 2010 09:54:18 +0800 http://www.mzwu.com/default.asp?id=2365


·简单的节点对象：{"text":"mzwu.com"}
·包含子节点对象(异步)：{"text":"other","id":"other","hasChildren":"true"}
·包含子节点对象(非异步)：{"text":"ftp","children":[{"text":"aaa.com"},{"text":"bbb.com"}]}

说明

异步获取节点数据时，treeview会使用get方式提交一个参数(root)到服务器端，treeview初始化(首次加载)时，这个参数值为source，之后异步获取子节点时，参数值为所点击节点的id值，服务器端需根据这一参数值不同返回不同的json对象数组：

demo.htm
复制内容到剪贴板程序代码 程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery.treeview.async示例-Mzwu.Com</title>
<link href="lib/jquery.treeview.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="lib/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/jquery.cookie.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/jquery.treeview.min.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/jquery.treeview.async.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#treeview").treeview({
        url: "treeview.asp"
    })
});
</script>
</head>

<body>
<ul id="treeview"></ul>
</body>
</html>

treeview.asp：
复制内容到剪贴板程序代码 程序代码
<% If Request.QueryString("root")="source" Then %>
[{"text":"mzwu.com"},{"text":"other","id":"other","hasChildren":"true"}]
<% End If %>

<% If Request.QueryString("root")="other" Then %>
[{"text":"ftp","expanded":"true","children":[{"text":"aaa.com"},{"text":"bbb.com"},{"text":"ccc.com"}]},{"text":"web","children":[{"text":"xxx.com"},{"text":"yyy.com"},{"text":"zzz.com"}]}]
<% End If %>

扩展

为json节点对象增加了两个属性：url和target，表示节点链接地址和打开链接的窗口，jquery.treeview.async修改如下：

复制内容到剪贴板程序代码 程序代码
/*
* Async Treeview 0.1 - Lazy-loading extension for Treeview
*
* http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
*
* Copyright (c) 2007 Jörn Zaefferer
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php
*   http://www.gnu.org/licenses/gpl.html
*
* Revision: $Id$
*
*/

;(function($) {

function load(settings, root, child, container) {
    $.getJSON(settings.url, {root: root}, function(response) {
        function createNode(parent) {
            var current = $("<li/>").attr("id", this.id || "").html("<span>" + this.text + "</span>").appendTo(parent);
            if (this.url) {
                current.children("span").html("<a href='"+this.url+"' target='"+(this.target||"_blank")+"'>"+this.text+"</a>");
            }
            if (this.classes) {
                current.children("span").addClass(this.classes);
            }
            if (this.expanded) {
                current.addClass("open");
            }
            if (this.hasChildren || this.children && this.children.length) {
                var branch = $("<ul/>").appendTo(current);
                if (this.hasChildren) {
                    current.addClass("hasChildren");
                    createNode.call({
                        text:"placeholder",
                        id:"placeholder",
                        children:[]
                    }, branch);
                }
                if (this.children && this.children.length) {
                    $.each(this.children, createNode, [branch])
                }
            }
        }
        $.each(response, createNode, [child]);
        $(container).treeview({add: child});
    });
}

var proxied = $.fn.treeview;
$.fn.treeview = function(settings) {
    if (!settings.url) {
        return proxied.apply(this, arguments);
    }
    var container = this;
    load(settings, "source", this, container);
    var userToggle = settings.toggle;
    return proxied.call(this, $.extend({}, settings, {
        collapsed: true,
        toggle: function() {
            var $this = $(this);
            if ($this.hasClass("hasChildren")) {
                var childList = $this.removeClass("hasChildren").find("ul");
                childList.empty();
                load(settings, this.id, childList, container);
            }
            if (userToggle) {
                userToggle.apply(this, arguments);
            }
        }
    }));
};

})(jQuery);

资源

·官方站点：http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
·下载地址：点击下载]]> http://www.mzwu.com/article.asp?id=2326 <![CDATA[Js控制gif图片播放]]> dnawo@sohu.com(dnawo) Fri,18 Dec 2009 10:30:39 +0800 http://www.mzwu.com/default.asp?id=2326
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

IE6 only！]]> http://www.mzwu.com/article.asp?id=2307 <![CDATA[IE7报错：拒绝访问]]> dnawo@sohu.com(dnawo) Fri,27 Nov 2009 15:45:21 +0800 http://www.mzwu.com/default.asp?id=2307
resizeTo.htm：
复制内容到剪贴板程序代码 程序代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js调整浏览器窗体大小测试-Mzwu.Com</title>
</head>

<body>
<script type="text/javascript">
resizeTo(556,393);
alert("www.mzwu.com");
</script>
</body>
</html>


调用代码：
复制内容到剪贴板程序代码 程序代码
<iframe src="http://code.5k3g.com/resizeTo.htm" width="600" height="600" frameborder="0" scrolling="no">

IE7报错：

]]> http://www.mzwu.com/article.asp?id=2288 <![CDATA[JavaScript和ActionScript函数相互调用示例]]> dnawo@sohu.com(dnawo) Fri,06 Nov 2009 01:19:01 +0800 http://www.mzwu.com/default.asp?id=2288 函数声明

JavaScript函数：
复制内容到剪贴板程序代码 程序代码
<script language="JavaScript" type="text/javascript">
//声明一个JavaScript方法供ActionScript调用
function jsFun(username)
{
    return "jsFun: hello," + username;
}
</script>

ActionScript函数：
复制内容到剪贴板程序代码 程序代码
stop();

import flash.external.*;

//声明一个ActionScript方法供JavaScript调用
function asFun(username:String):String
{
    return "asFun: hello," + username;
}
ExternalInterface.addCallback("asFun",null,asFun);//注册

调用示例

JavaScript调用ActionScript方法：
复制内容到剪贴板程序代码 程序代码
<script language="JavaScript" type="text/javascript">
//JavaScript调用ActionScript方法
function callFun(username)
{
    var swf = document.getElementById("SWFObject");
    if(swf)
        return swf.asFun(username);
    else
        return null;
}
</script>

ActionScript调用JavaScript方法：
复制内容到剪贴板程序代码 程序代码
//ActionScript调用JavaScript方法
function callFun(username:String):String
{
    return String(ExternalInterface.call("jsFun",username));
}

说明：若在JavaScript中获取ActionScript函数体，会得到如下内容：
复制内容到剪贴板程序代码 程序代码
function () {
    return eval(instance.CallFunction("<invoke name=\""+name+"\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments,0) + "</invoke>"));
  }
]]> http://www.mzwu.com/article.asp?id=2248 <![CDATA[VBScript、JavaScript判断xml节点是否存在]]> dnawo@sohu.com(dnawo) Tue,29 Sep 2009 21:36:21 +0800 http://www.mzwu.com/default.asp?id=2248 1).VBScript示例

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

2).JavaScript示例

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
]]> http://www.mzwu.com/article.asp?id=2157 <![CDATA[将自定义对象赋值给prototype的结果]]> dnawo@sohu.com(dnawo) Fri,24 Jul 2009 09:49:44 +0800 http://www.mzwu.com/default.asp?id=2157
复制内容到剪贴板程序代码 程序代码
function Class()
{
    this.Name = "Class";
}
Class.prototype.getName = function(){ return this.Name; };

也有人是直接将一个自定义对象赋值给prototype：

复制内容到剪贴板程序代码 程序代码
function Class()
{
    this.Name = "Class";
}
Class.prototype = {
    getName : function(){ return this.Name; }
};

暂时没发现有什么使用上的问题，但还是发现了一点不同：我们知道，原型对象默认有一个属性constructor，他指向构造函数本身，测试一下：

复制内容到剪贴板程序代码 程序代码
function Class()
{
    this.Name = "Class";
}
Class.prototype.getName = function(){ return this.Name; };

alert(Class.prototype.constructor);

结果显示：

引用内容 引用内容
function Class()
{
    this.Name = "Class";
}

复制内容到剪贴板程序代码 程序代码
function Class()
{
    this.Name = "Class";
}
Class.prototype = {
    getName : function(){ return this.Name; }
};

alert(Class.prototype.constructor);

结果显示：

引用内容 引用内容
function Object() {
    [native code]
}

这和Object.prototype.constructor的结果是一样的，也就是说：将自定义对象赋值给prototype后，改变了原型对象constructor属性的值，他不再是表示prototype所对应的构造函数，其值是超类(Object)的构造函数。]]> http://www.mzwu.com/article.asp?id=2156 <![CDATA[奇特的原型对象]]> dnawo@sohu.com(dnawo) Fri,24 Jul 2009 08:32:26 +0800 http://www.mzwu.com/default.asp?id=2156
这两句话高度概括了JavaScript构造函数的原型对象，我们来理解下：

·第一句说明了原型对象其实就是类的一个属性，不同于实例属性，不管创建了该类的多少个实例，他们都共享该属性；
·第二句说明了一个特性：构造函数实例化对象将继承原型对象的属性；

所以，原型对象是放置方法和其他不变属性的理想地方！]]> http://www.mzwu.com/article.asp?id=2155 <![CDATA[Javascript作用域原理]]> dnawo@sohu.com(dnawo) Thu,23 Jul 2009 17:47:11 +0800 http://www.mzwu.com/default.asp?id=2155 问题的提出

首先看一个例子:

复制内容到剪贴板程序代码 程序代码
var name = 'laruence';
function echo() {
    alert(name);
    var name = 'eve';
    alert(name);
    alert(age);
}

echo();

运行结果是什么呢?

上面的问题, 我相信会有很多人会认为是:

引用内容 引用内容
laruence
eve
[脚本出错]

因为会以为在echo中, 第一次alert的时候, 会取到全局变量name的值, 而第二次值被局部变量name覆盖, 所以第二次alert是'eve'. 而age属性没有定义, 所以脚本会出错.

但其实, 运行结果应该是:

引用内容 引用内容
undefined
eve
[脚本出错]

为什么呢?

JavaScript的作用域链

首先让让我们来看看Javasript(简称JS, 不完全代表JScript)的作用域的原理: JS权威指南中有一句很精辟的描述:　"JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里."　

为了接下来的知识, 你能顺利理解, 我再提醒一下, 在JS中:"一切皆是对象, 函数也是".

在JS中，作用域的概念和其他语言差不多， 在每次调用一个函数的时候 ，就会进入一个函数内的作用域，当从函数返回以后，就返回调用前的作用域.

JS的语法风格和C/C++类似, 但作用域的实现却和C/C++不同，并非用“堆栈"方式，而是使用列表，具体过程如下(ECMA262中所述):

任何时刻的作用域, 都是有作用域链(scope chain, 后面介绍)来实现.
在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候， 会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参，都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.

复制内容到剪贴板程序代码 程序代码
var func = function(lps, rps){
        var name = 'laruence';
        ........
    }
    func();

在执行func的定义语句的时候, 会创建一个这个函数对象的[[scope]]属性(内部属性,只有JS引擎可以访问, 但FireFox的几个引擎(SpiderMonkey和Rhino)提供了私有属性__parent__来访问它), 并将这个[[scope]]属性, 链接到定义它的作用域链上(后面会详细介绍), 此时因为func定义在全局环境, 所以此时的[[scope]]只是指向全局活动对象window active object.

在调用func的时候, 会创建一个活动对象(假设为aObj, 由JS引擎预编译时刻创建, 后面会介绍)，给这个对象添加俩个命名属性aObj.lps, aObj.rps; 然后还会创建一个arguments对象，这个对象以数组的方式保存调用参数，还有callee等其他参数；然后将arguments也作为活动对象(假设为aObj)的一个同名命名属性(arguments)；还有就是，对于每一个这个函数申明，或者定义的变量，都作为该活动对象的同名命名属性。内部函数也是一样。

然后将调用参数赋值给形参数，对于缺少的调用参数，赋值为undefined。

然后将这个活动对象做为scope chain的最前端, 并将func的[[scope]]属性所指向的,定义func时候的顶级活动对象, 加入到scope china.

有了上面的作用域链, 在发生标识符解析的时候, 就会逆向查询当前scope chain列表的每一个活动对象的属性，如果找到同名的就返回。找不到，那就是这个标识符没有被定义。

注意到, 因为函数对象的[[scope]]属性是在定义一个函数的时候决定的, 而非调用的时候, 所以如下面的例子:

复制内容到剪贴板程序代码 程序代码
var name = 'laruence';
    function echo() {
        alert(name);
    }

    function env() {
        var name = 'eve';
        echo();
    }

    env();

运行结果是:

引用内容 引用内容
laruence

结合上面的知识, 我们来看看下面这个例子:

复制内容到剪贴板程序代码 程序代码
function factory() {
    var name = 'laruence';
    var intro = function(){
        alert('I am ' + name);
    }
    return intro;
}

function app(para){
    var name = para;
    var func = factory();
    func();
}

app('eve');

当调用app的时候, scope chain是由: {window活动对象(全局)}->{app的活动对象} 组成.

在刚进入app函数体时, app的活动对象有一个arguments属性, 俩个值为undefined的属性: name和func. 和一个值为'eve'的属性para;

此时的scope chain如下:

引用内容 引用内容
[[scope chain]] = [
{
    para : 'eve',
    name : undefined,
    func : undefined,
    arguments : []
}, {
    window call object
}
]

当调用进入factory的函数体的时候, 此时的factory的scope chain为:

引用内容 引用内容
[[scope chain]] = [
{
    name : undefined,
    intor : undefined
}, {
    window call object
}
]

注意到, 此时的作用域链中, 并不包含app的活动对象.

在定义intro函数的时候, intro函数的[[scope]]为:

引用内容 引用内容
[[scope chain]] = [
{
    name : 'laruence',
    intor : undefined
}, {
    window call object
}
]

从factory函数返回以后,在app体内调用intor的时候, 发生了标识符解析, 而此时的sope chain是:

引用内容 引用内容
[[scope chain]] = [
{
    intro call object
}, {
    name : 'laruence',
    intor : undefined
}, {
    window call object
}
]

因为scope chain中,并不包含factory活动对象. 所以, name标识符解析的结果应该是factory活动对象中的name属性, 也就是'laruence'.

所以运行结果是:

引用内容 引用内容
I am laruence

现在, 大家对"JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里."这句话, 应该有了个全面的认识了吧?

Javascript的预编译

我们都知道,JS是一种脚本语言, JS的执行过程, 是一种翻译执行的过程.
那么JS的执行中, 有没有类似编译的过程呢?

首先, 我们来看一个例子:

复制内容到剪贴板程序代码 程序代码
<script>
    alert(typeof eve); //function
        function eve() {
            alert('I am Laruence');
        };
    </script>

诶? 在alert的时候, eve不是应该还是未定义的么? 怎么eve的类型还是function呢?

恩, 对, 在JS中, 是有预编译的过程的, JS在执行每一段JS代码之前, 都会首先处理var关键字和function定义式(函数定义式和函数表达式).
也就是, 在执行之前, 会首先创建一个当前作用域的活动对象, 然后将当前作用域内的变量名定义为当前活动对象的属性,
,而值会在真正执行的时候才计算, 此时只是简单的赋为undefined.

而对于函数的定义,是一个要注意的地方:

复制内容到剪贴板程序代码 程序代码
<script>
    alert(typeof eve); //结果:function
    alert(typeof walle); //结果:undefined
    function eve() { //函数定义式
        alert('I am Laruence');
    };
    var walle = function() { //函数表达式
    }
    alert(typeof walle); //结果:function
</script>

这就是函数定义式和函数表达式的不同, 对于函数定义式, 会将函数定义提前. 而函数表达式, 会在执行过程中才计算.

说到这里, 顺便说一个问题 :

复制内容到剪贴板程序代码 程序代码
var name = 'laruence';
    age = 26;

我们都知道不使用var关键字定义的变量, 相当于是全局变量, 联系到我们刚才的知识:

在对age做标识符解析的时候, 因为是写操作, 所以当找到到全局的window活动对象的时候都没有找到这个标识符的时候, 会在window活动对象的基础上, 返回一个值为undefined的age属性.

也就是说, age会被定义在顶级作用域中.

现在, 也许你注意到了我刚才说的: JS在执行每一段JS代码..
对, 让我们看看下面的例子:

复制内容到剪贴板程序代码 程序代码
<script>
    alert(typeof eve); //结果:undefined
</script>
<script>
    function eve() {
        alert('I am Laruence');
    }
</script>

明白了么? 也就是JS的预编译是以段为处理单元的…

揭开谜底

现在让我们回到我们的第一个问题:

当echo函数被调用的时候, echo的活动对象已经被预编译过程创建, 此时echo的活动对象为:

引用内容 引用内容
[callObj] = {
name : undefined
}

当第一次alert的时候, 发生了标识符解析, 在echo的活动对象中找到了name属性, 所以这个name属性, 完全的遮挡了全局活动对象中的name属性.

现在你明白了吧?]]> http://www.mzwu.com/article.asp?id=2154 <![CDATA[apply 高级应用]]> dnawo@sohu.com(dnawo) Wed,22 Jul 2009 19:06:06 +0800 http://www.mzwu.com/default.asp?id=2154 1.实现类"继承"(将一个类的成员复制给一个对象)

复制内容到剪贴板程序代码 程序代码
function Rectangle()
{
    this.width = 0;
    this.height = 0;
    this.area = function(){ return this.width * this.height;};
}

var o = new Object();
Rectangle.apply(o);
o.width = 10;
o.height = 20;
alert(o.area());

调用apply时，o对象就是Rectangle函数中this的值，因而实现了属性的复制。

2.给类设置初始化函数

复制内容到剪贴板程序代码 程序代码
var Class = {
    create : function(){
        return function(){
            this.initialize.apply(this,arguments);
        }
    }
}

//创建类
var Rectangle = Class.create();
Rectangle.prototype = {
    initialize : function(width,height){
        this.width = width;
        this.height = height;
    },
    toString : function(){
        return "width:" + this.width + "\r\n" + "height:" + this.height;
    }
}

//实例化对象并初始化
var rectangle = new Rectangle(80,120);
alert(rectangle.toString());
]]>