IT博客-yunshichen-随笔分类-Web development

Django 1:安装配置运行1小时谈

Chenyunshi — Fri, 12 Sep 2008 08:35:00 GMT

摘要: Django配置文档最精简版阅读全文

Chenyunshi 2008-09-12 16:35 发表评论

YUI ：一个autocomplete 组件的例子

Chenyunshi — Fri, 12 Sep 2008 07:42:00 GMT

< html >

< link type ="text/css" rel ="stylesheet" href ="http://yui.yahooapis.com/2.5.2/build/autocomplete/assets/skins/sam/autocomplete-skin.css" >

< script type ="text/javascript" src ="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" > script >

< script type ="text/javascript" src ="http://yui.yahooapis.com/2.5.2/build/connection/connection-debug.js" > script >

< script type ="text/javascript" src ="http://yui.yahooapis.com/2.5.2/build/json/json-debug.js" > script >

< script type ="text/javascript" src ="http://yui.yahooapis.com/2.5.2/build/autocomplete/autocomplete-debug.js" > script >

< link type ="text/css" rel ="stylesheet" href ="http://yui.yahooapis.com/2.5.2/build/logger/assets/skins/sam/logger.css" >
< script type ="text/javascript" src ="http://yui.yahooapis.com/2.5.2/build/logger/logger-debug.js" > script >

< style type ="text/css" >
#myAutoComplete {
    width : 15em ; /* set width here */
    padding-bottom : 2em ;
}
style >
< body class =" yui-skin-sam" >
< div id ="myLogger" > div >< br >
< hr >
Change datasource :
    < input type ="button" id ="jsBtn" value ="JS array" />
    < input type ="button" id ="funcBtn" value ="JS function" />
< br >< br >
< div id ="myAutoComplete" >
     < input id ="myInput" type ="text" >
     < div id ="myContainer" > div >
div >
< script type ="text/javascript" >

// A JS array data source
var testData = [ " fa " , " fb " , " fc " ];
// A JavaScript Function DataSource
function myFunction(sQuery) {
    aResults = [];
     if (sQuery && sQuery.length > 0 ) {
         var charKey = sQuery.substring( 0 , 1 ).toLowerCase();
         var oResponse = dataset[charKey];
         if (oResponse) {
             for ( var i = oResponse.length - 1 ; i >= 0 ; i -- ) {
                 var sKey = oResponse[i].STATE;
                 var sKeyIndex = encodeURI(sKey.toLowerCase()).indexOf(sQuery.toLowerCase());
                 if (sKeyIndex === 0 ) {
                    aResults.unshift([sKey, oResponse[i].ABBR]);
                }
            }
             return aResults;
        }
    } else {
         for ( var letter in dataset) {
             var oResponse = dataset[letter];
             for ( var i = 0 ; i < oResponse.length; i ++ ) {
                aResults.push([oResponse[i].STATE, oResponse[i].ABBR]);
            }
        }
         return aResults;
    }
}

var dataset = {
    'a' : [{ " STATE " : " Alabama " , " ABBR " : " AL " },
        { " STATE " : " Alaska " , " ABBR " : " AK " },
        { " STATE " : " Arizona " , " ABBR " : " AZ " },
        { " STATE " : " Arkansas " , " ABBR " : " AR " }],
    'b' : [ ],
    'c' : [{ " STATE " : " California " , " ABBR " : " CA " },
        { " STATE " : " Colorado " , " ABBR " : " CO " },
        { " STATE " : " Connecticut " , " ABBR " : " CT " }],
      // Entire dataset not shown
};

// Init autocomplete component.
var g_oAuto = new function (){
     // ============ init logger
     this .logger = new YAHOO.widget.LogReader( " myLogger " );
     this .myDatasource = new YAHOO.widget.DS_JSFunction(myFunction);
     this .myAutoComp = new YAHOO.widget.AutoComplete( " myInput " , " myContainer " , this .myDatasource);
};

// Util functions.
function changeDSToJsArray(){
    g_oAuto.myAutoComp.dataSource = new YAHOO.widget.DS_JSArray(testData);
    YAHOO.log( " Changed data source to JS array " , " info " , this .toString());
};
function changeDSToJsFunction(){
    g_oAuto.myAutoComp.dataSource = new YAHOO.widget.DS_JSFunction(myFunction);
     // Customize result view.
    g_oAuto.myAutoComp.formatResult = function (oResultItem, sQuery) {
         var sMarkup = oResultItem[ 0 ] + " ( " + oResultItem[ 1 ] + " ) " ;
         return (sMarkup);
    };

    YAHOO.log( " Changed data source to JS function " , " info " , this .toString());
};

// Set button event handlers.
var btn = YAHOO.util.Dom.get( " jsBtn " );
btn.onclick = changeDSToJsArray;

btn = YAHOO.util.Dom.get( " funcBtn " );
btn.onclick = changeDSToJsFunction;

script >

body >
html >

Chenyunshi 2008-09-12 15:42 发表评论

简明Javascript教程

Chenyunshi — Sun, 07 Sep 2008 05:20:00 GMT

摘要: chapter1 javascript基础 1.1 变量类型和声明 javascript 里常用基本类型有:boolean,string 和 number,常用的类分别是:Boolean,String和Number,Array,Object. 声明变量用var,不能用关键字和保留字作变量名(关键字和保留字见附录A1).命名的最佳实践是使用匈牙利命名法. 基本类型的变... 阅读全文

Chenyunshi 2008-09-07 13:20 发表评论

javascript杂谈二：OO ？

Chenyunshi — Fri, 22 Aug 2008 09:35:00 GMT

    OO的三个概念是封装，继承和多态。

    强类型语言如C++或Java用private,protected和public三个关键字表征成员函数的作用域。js缺少这样的关键字，根据Douglas 的说法，js的方法有：

    private : 只能在类实例中访问的方法。
    privileged: 公开的能够访问类实例的私有变量，你可以替换或者删除privileged方法，但不能修改
    public : 公开方法，只能访问公开属性变量，不能访问类实例的私有变量。

    代码如下：

<html>
<script>
    var Employee=function(sname,iage){
        //private properties.
        var m_name=sname;
        var m_title;
        //public properties.
        this.age=iage;
        //private methods.
        function sayHello(){
            alert("Hello,"+m_name);
        };
        //privileged methods.
        this.getName=function(){
            return m_name;
        };
        this.setName=function(sname){
            m_name=sname;
        };

    };
    //public methods.
    Employee.prototype.getAge=function(){
        return this.age;
    };

    emp1 = new Employee("test1",28);
    alert("emp1.name:"+emp1.getName());
    //Reset private properties.
    emp1.setName("test 2");
    alert("emp1.name:"+emp1.getName());
    //Replace privileged methods.
    emp1.setName=function(sname,stitle){
        m_name=sname;
        m_title=stitle;
    };
    emp1.getName=function(){
        return m_name+"::"+m_title;
    };
    //Invoke replaced privileged methods.
    emp1.setName("Chen","Engineer");
    alert("emp1.name:"+emp1.getName());

    //Invoke public methods.
    alert("emp1.age"+emp1.getAge());
    alert("emp1.age"+emp1.age);




script>
html>

你很快会发觉，所谓的public方法根本不能访问私有变量，这令它的价值大打折扣。而出于数据封装的目的，使用public的变量似乎也颇为不妥。

为了达到”将相关信息封装到类“的目的，有两种变通办法，第一种，只采用private变量和privileged方法：

这种做法似乎很好，除了会带来性能的问题。因为每个实例自身都会创建两个方法。

另一种做法以实用主义为宗旨。不是所有的私有属性都需要get/set方法的，这增加了代码编写者的额外负担。只需在设计类的时候约定哪些属性是私有的，类的使用者不应该直接去访问。约定的私有属性以__或者_打头。

例如上面的版本可以重写为：

正如你在代码中看到的，用_给变量命名并没有改变它的public性质，仅仅是一种约定而已。本例中的约定表示：你可以直接访问emp1.name，但你不应该直接访问emp1._age，该变量是私有变量。

在YUI中采用了第二种做法，以实用为先。但是对Douglas来说，这似乎是个讽刺。他说js是世上最被误解的语言，他说js有完整的oo能力，但似乎，从他领导的YUI看不出这一点。

Chenyunshi 2008-08-22 17:35 发表评论

Javascript 杂谈一：全局作用域和闭包

Chenyunshi — Thu, 21 Aug 2008 14:16:00 GMT

    在网上看到一篇很好的文章，就是就写了这篇翻译&杂谈。

    在编程时你需要取得某些变量或者方法时才能继续你的开发工作，而程序编译器通常会将这些方法封装到一个个作用域。当你进入作用域，你才能取得该作用域的变量或方法。所以在某种意义上说，作用域（scope)非常重要。

    在js中，所有的变量/方法都是对象，这当然也包括作用域。最全局的作用域就是window。以下这个小程序可以让你很清楚的看到这点：

<html>
<script>
var a="test a";
window.b="test b";
function c(){
alert("test c");
}
alert("a is:"+window.a);
alert("b is:"+window.b);
window.c();
script>
html>

    js存在名为作用域链的东东（scope chain) ,假设scopeA定义在scopeB中，scopeB定义在window中，那么当你访问某个变量a的时候，js现在当前作用域寻找，如果没有找到就到上层作用域寻找，周而复始，最后在window进行查找，如果再查找不到，就抛出异常.

    多数程序语言对于作用域和变量的实现都是这样子的。似乎不用特别考究。

    奇特的是在js内，函数内部还可以嵌套函数，所以你一定要对上述作用域的概念了然于胸。例如下面的例子：

<html>
<script>
var A = new function(){
    var a ="test a";
    function change(){
        alert(a);
        a="value changed";
    };
    this.visible=function(){
        alert(a);
    }
}

A.visible();
A.change();
script>
html>

    你可以看到，visible方法可以访问而change则不能。于是这种方式就模拟了某些“OO”语言如Java，C++的OO功能：数据封装。并且，上述代码是js中创建singleton对象的方式。

    在上述代码中，change称为闭包（closure)，因为它能够访问位于本作用域外的属性或方法。然而，恕我直言，这种函数能访问外层作用域的变量或函数的方式在C++或者Java中不是很平常的事情？为什么会有个专门的名词呢？我暂时没有弄清楚，或者以后会认真读读js规范：Javascript's specification

    很好的一篇文章：Getting Funky With Scopes and Closures

    当然还有Douglas Crockford 的主页

Chenyunshi 2008-08-21 22:16 发表评论

Spring 2.5 & Dwr 2.0 配置文档

Chenyunshi — Mon, 21 Jul 2008 02:40:00 GMT

摘要: Dwr2 集成 Spring2 配置文件阅读全文

Chenyunshi 2008-07-21 10:40 发表评论