WenDong-Zhang

Javascript prototype chain

2009-09-05T17:19:00.001+08:00

JavaScript prototype chain

There is no strict class definition in JavaScript, but we say a FUNCTION is a CLASS in common.
JavaScript is based on prototype. When create an instance, it has a copy of the properties of the Object’s prototype.

If you are a JavaScript newbie, maybe you need read some instructions of JavaScript and how to use OOP in JavaScript.

OK, now let’s go to see how JavaScript prototype works.

Note: in the follow pages, we use uppercase string as the class name and lowercase as the instance.

A glance at constructor and proto

The first Clazz.

function Foo() {}

var foo = new Foo;

Now, we defined a class whose name is “Foo”, as we say, all the class has a prototype (used for initialize they instance), and there is a property “constructor” in the prototype which point to the class who own the property. Maybe you will say: “Oh, why I haven’t seen it?” Yes, because you may trace an object by for … in, but the “constructor” property has an attribute “DontEnum” (search it). There are some other property has “DontEnum” property, such as toString, toSource…

Let’s dig Foo deeply:

Figure 1

Each object has with it an associated [[Prototype]] object, The prototype chain is a linkage of [[Prototype]] objects. The prototype chain is standard, but hidden in most implementations. __proto__ represents the internal [[Prototype]] object. __proto__ isn't standard and isn't supported in IE or Opera [http://dhtmlkitchen.com/learn/js/enumeration/prototype-chain.jsp]. But most of the time in Function object we could use [obj].constructor.prototype as the __proto__ property. For simplicity we will use __proto__ in the follow pages.

Look at Figure 1, each object has a property “__proto__”, which point to its prototype. And in Function object, we have a property “constructor” which point to its Class.

You can do some tests; the follow figure shows how to use constructor and __proto__.

The prototype chain

There is no inheritance notion in JavaScript, but because of the prototype chain, we can simulate the inheritance behavior. As shown in the previous section, each class instance has a property __proto__. Now let’s see how to use it. Look at an example:

// run this code in JavaScript Shell

// Class Foo

function Foo() {

}

Foo.prototype.name = 'Foo';

// Class Bar

function Bar() {

this.name = 'Bar';

}

// instance

var foo = new Foo;

var bar = new Bar;

print(foo.name);

//> Foo

print(bar.name);

//> Bar

props(foo);

//> Fields of prototype: name

props(bar);

//> Fields: name

This shows two popular ways to define a Class, but you should know the difference between them. Both of them initialize they instance by they prototype. In Foo.prototype there is a field ‘name’ whose value is ‘Foo’, so the instance foo.__proto__ will hold the field too. But Class Bar use another way, first it create a object named ‘bar’, then in the initial code add a property ‘name’ to the object ‘bar’.

When we call bar.name, the object has the property ‘name’, so return its value, and when call foo.name, there is no ‘name’ property in object foo, it will search the prototype chain and find the name property in foo.__proto__, return the value ‘Foo’. JavaScript then looks in the prototype object, the prototype of the prototype, and so on, up the prototype chain until the property is found or the chain is exhausted[mastering dojo].

The follow figure shows the structure.

You see that, foo hold a pointer __proto__ which point to Foo.prototype’s space. So the name field does not belong to foo directly, when we modify Foo.prototype, the foo.__proto__ will change too. Have a test:

// Class Foo

function Foo() {

}

Foo.prototype.name = 'Foo';

// instance

var foo = new Foo;

print(foo.name);

//> Foo

// update Foo.prototype

Foo.prototype.name = 'My name changes';

print(foo.name);

//> My name changes

foo.name = 'foo';

print(foo.name);

//> foo

print(foo.__proto__.name);

//> My name changes

After this code, the foo’s structure is:

When we change foo.name, it won’t pollute the Foo.prototype, it only add a new property to object foo itself, so other instances’ name still be Foo.prototype.name or has they own ‘name’ property as foo does.

The prototype chain is the most important notion to JavaScript ‘inheritance’. Let’s go to see how to use it to implements inheritance in JS.

BTW: some time we use the follow code to declare a class:

function Foo(){}

Foo.prototype = {

method: function(){ /* ... */ }

}

var foo = new Foo;

This will cause a problem, Foo.prototype now point to a new object now, so the properties belong to its original prototype maybe lost (why maybe lost? Because the object “{}” also has most of the Function’s properties, such as toString), especially the “constructor” property. So we need to set the constructor explicitly.

Foo.prototype.constructor = Foo;

But by this way, the constructor’s DontEnum attribute is lost, so when you use for … in you can see the foo.constuctor. The follow figure show what’s going on. The dot line means the connection not exists.

Inheritance

The simple comprehension of inheritance to us is it can do the follow things:

Subclass has the super class’s properties (member variable) and methods.
subclass could override them and has a way to call super class’s methods
type conversions, the super class could hold a pointer (or reference) to its subclass

Let’s declare a inherit class first and see step by step.

The classical example is Shapes such as Circle, Rectangle…, see the follow code:

// super class Shape

function Shape(){}

Shape.prototype._name = 'Shape';

Shape.prototype.color = 0;

Shape.prototype.setColor = function(color) {

this.color = color;

}

// subclass Circle, derived from Shape

function Circle(){};

Circle.prototype = new Shape;

Circle.prototype._name = 'Circle';

Circle.prototype.radius = 0;

Circle.prototype.setRadius = function(radius) {

this.radius = radius;

}

Circle.prototype.area = function() {

return Math.PI * this.radius * this.radius;

}

// Circle instance

var circle = new Circle;

circle.setColor(0xFF0000);

circle.setRadius(10);

print(circle._name);

//> Circle

print(circle.area());

//> 314.1592653589793

This figure shows circle’s structure after call var circle = new Circle; but after setColor and setRadius, the circle will change to:

Do you see that there is no “constructor” property in circle’s __proto__, because we missed to set it after Circle.prototype = new Shape; you should add Circle.prototype.constructor = Circle; to the code. Otherwise we you call circle.constructor it will return Shape to you.

OK, from the Shape and Circle prototype chain, let’s see the “inheritance” problems.

The first one: subclass has the super class’s properties. It’s clear that, if the subclass has no the properties, it will search the prototype chain, so it will get the super class (top prototype chain)’s properties sooner or later. But if the subclass already owns the properties itself, it will stop search the prototype chain, which means it implements the override, problem 2 is gone. For the problem 3, because JavaScript is weak typing, the “var o;” could hold everything it wants to, need not type conversions.

Declare Class in dojo

dojo.declare的重要性无需再重申，在dojo1.1的时候就有将近400个类通过dojo.declare来定义【mastering dojo P225】。

在介绍dojo.declare之前，首先看一下dojo.declare中用到的几个函数：dojo.mixin、dojo.clone、dojo.delegate、dojo.extend。

JavaScript里的基本数据类型（bool, int, float, String等）在赋值中是直接copy的，但对于其他的对象（Array，Object等）则是指针copy。

dojo.mixin, dojo.clone

dojo.mixin有点类似于“浅copy”，dojo.clone则类似于“深copy”，例如：

var loc = {

city: 'Bei Jing',

country: 'China'

};

var obj = {

location: loc

};

var mixin_obj = dojo.mixin({}, obj);

var clone_obj = dojo.clone(obj);

dojo.extend

dojo.extend = function(/*Object*/ constructor, /*Object...*/ props){

// summary:

// Adds all properties and methods of props to constructor's

// prototype, making them available to all instances created with

// constructor.

for(var i=1, l=arguments.length; i<l; i++){

dojo._mixin(constructor.prototype, arguments[i]);

}

return constructor; // Object

}

dojo.extend是将一组hash property直接mixin到一个类的prototype中。

dojo.delegate

dojo.delegate = dojo._delegate = (function(){

// boodman/crockford delegation w/ cornford optimization

function TMP(){}

return function(obj, props){

TMP.prototype = obj;

var tmp = new TMP();

if(props){

dojo._mixin(tmp, props);

}

return tmp; // Object

}

})();

dojo.delegate可以简单的看作：

function(obj, props){

TMP.prototype = obj;

var tmp = new TMP();

if(props){

dojo._mixin(tmp, props);

}

return tmp; // Object

}

首先看一下mastering dojo上的例子：

//create an object with some properties

var base = {

greet: function(){

return "hello, my name is " + this.name;

}

var newObject = dojo.delegate(base, {

});

在dojo.delegate中，首先定义了一个“空类”TMP，并把第一个参数base作为该类的prototype，对象tmp是该类（TMP）的一个实例，在创建完tmp后，在将props中的property mix in到tmp对象中。mastering dojo中，作者称之为“不使用constructor方法来自定义对象”，一般我们在定义一个实例的时候，首先要声明一个类，但使用dojo.delegate可以直接定义一个函数对象的实例。另外我们也可以理解为newObject只是一个对象，但这个对象的一些property会随着base的改变而改变（因为prototype chain的存在）。

Javascript prototype chain

2009-08-03T14:01:00.001+08:00

JavaScript prototype chain

There is no strict class definition in JavaScript, but we say a FUNCTION is a CLASS in common.
JavaScript is based on prototype. When create an instance, it has a copy of the properties of the Object’s prototype.

If you are a JavaScript newbie, maybe you need read some instructions of JavaScript and how to use OOP in JavaScript.

OK, now let’s go to see how JavaScript prototype works.

Note: in the follow pages, we use uppercase string as the class name and lowercase as the instance.

A glance at constructor and proto

The first Clazz.

function Foo() {}

var foo = new Foo;

Let’s dig Foo deeply:

Figure 1

Look at Figure 1, each object has a property “__proto__”, which point to its prototype. And in Function object, we have a property “constructor” which point to its Class.

You can do some tests; the follow figure shows how to use constructor and __proto__.

The prototype chain

// run this code in JavaScript Shell

// Class Foo

function Foo() {

}

Foo.prototype.name = 'Foo';

// Class Bar

function Bar() {

this.name = 'Bar';

}

// instance

var foo = new Foo;

var bar = new Bar;

print(foo.name);

//> Foo

print(bar.name);

//> Bar

props(foo);

//> Fields of prototype: name

props(bar);

//> Fields: name

The follow figure shows the structure.

// Class Foo

function Foo() {

}

Foo.prototype.name = 'Foo';

// instance

var foo = new Foo;

print(foo.name);

//> Foo

// update Foo.prototype

Foo.prototype.name = 'My name changes';

print(foo.name);

//> My name changes

foo.name = 'foo';

print(foo.name);

//> foo

print(foo.__proto__.name);

//> My name changes

After this code, the foo’s structure is:

The prototype chain is the most important notion to JavaScript ‘inheritance’. Let’s go to see how to use it to implements inheritance in JS.

BTW: some time we use the follow code to declare a class:

function Foo(){}

Foo.prototype = {

method: function(){ /* ... */ }

}

var foo = new Foo;

Foo.prototype.constructor = Foo;

Inheritance

The simple comprehension of inheritance to us is it can do the follow things:

Subclass has the super class’s properties (member variable) and methods.
subclass could override them and has a way to call super class’s methods
type conversions, the super class could hold a pointer (or reference) to its subclass

Let’s declare a inherit class first and see step by step.

The classical example is Shapes such as Circle, Rectangle…, see the follow code:

// super class Shape

function Shape(){}

Shape.prototype._name = 'Shape';

Shape.prototype.color = 0;

Shape.prototype.setColor = function(color) {

this.color = color;

}

// subclass Circle, derived from Shape

function Circle(){};

Circle.prototype = new Shape;

Circle.prototype._name = 'Circle';

Circle.prototype.radius = 0;

Circle.prototype.setRadius = function(radius) {

this.radius = radius;

}

Circle.prototype.area = function() {

return Math.PI * this.radius * this.radius;

}

// Circle instance

var circle = new Circle;

circle.setColor(0xFF0000);

circle.setRadius(10);

print(circle._name);

//> Circle

print(circle.area());

//> 314.1592653589793

This figure shows circle’s structure after call var circle = new Circle; but after setColor and setRadius, the circle will change to:

OK, from the Shape and Circle prototype chain, let’s see the “inheritance” problems.

Declare Class in dojo

dojo.declare的重要性无需再重申，在dojo1.1的时候就有将近400个类通过dojo.declare来定义【mastering dojo P225】。

在介绍dojo.declare之前，首先看一下dojo.declare中用到的几个函数：dojo.mixin、dojo.clone、dojo.delegate、dojo.extend。

JavaScript里的基本数据类型（bool, int, float, String等）在赋值中是直接copy的，但对于其他的对象（Array，Object等）则是指针copy。

dojo.mixin, dojo.clone

dojo.mixin有点类似于“浅copy”，dojo.clone则类似于“深copy”，例如：

var loc = {

city: 'Bei Jing',

country: 'China'

};

var obj = {

location: loc

};

var mixin_obj = dojo.mixin({}, obj);

var clone_obj = dojo.clone(obj);

dojo.extend

dojo.extend = function(/*Object*/ constructor, /*Object...*/ props){

// summary:

// Adds all properties and methods of props to constructor's

// prototype, making them available to all instances created with

// constructor.

for(var i=1, l=arguments.length; i<l; i++){

dojo._mixin(constructor.prototype, arguments[i]);

}

return constructor; // Object

}

dojo.extend是将一组hash property直接mixin到一个类的prototype中。

dojo.delegate

dojo.delegate = dojo._delegate = (function(){

// boodman/crockford delegation w/ cornford optimization

function TMP(){}

return function(obj, props){

TMP.prototype = obj;

var tmp = new TMP();

if(props){

dojo._mixin(tmp, props);

}

return tmp; // Object

}

})();

dojo.delegate可以简单的看作：

function(obj, props){

TMP.prototype = obj;

var tmp = new TMP();

if(props){

dojo._mixin(tmp, props);

}

return tmp; // Object

}

首先看一下mastering dojo上的例子：

//create an object with some properties

var base = {

greet: function(){

return "hello, my name is " + this.name;

}

var newObject = dojo.delegate(base, {

});

[note] java object initialize sequence

2009-06-01T14:53:00.002+08:00


package wd;

class Foo {
    String str;
    Foo() {
        System.out.println("foo");
    }
    Foo(String str) {
        System.out.println("Foo." + str);
        this.str = str;
    }
    public String toString() {
        return str;
    }
}

class Base {
    Foo f1 = new Foo("1st");
    
    static Foo sf1 = new Foo("sf 1st");
    
    static{
        System.out.println("Base.static");
        sf1 = new Foo("static foo 1st changed");
        sf2 = new Foo("static foo 2nd changed");
    }
    Foo f2 = new Foo("2nd");
    Base() {
        System.out.println("Base()");
    }
    Foo f3 = new Foo("3rd");
    
    static Foo sf2 = new Foo("sf 2nd");
}

class Derived extends Base {
    static {
        System.out.println("Derived.static");
    }
    
    Derived() {
        System.out.println("Derived()");
    }
}

public class InitSequence {
    public static void main(String[] args) {
        new Derived();
        System.out.println("d.sf1: " + Derived.sf1);
        System.out.println("d.sf2: " + Derived.sf2);
    }
}

[note] date, timestamp & time string converter

2009-06-01T14:15:00.002+08:00


package sys.function;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;

public class Format {
    
    public static void main(String[] args) {
        Date d = new Date();
        System.out.println(date2string(d, "yyyy/MM/dd, HH:mm:ss"));
        
        String str = "2009-01-01";
        System.out.println(string2time(str, "yyyy-MM-dd"));
    }
    
    public static String null2string(String str) {
        if (str != null)
            return str;
        return "";
    }

    public static String null2zero(String str) {
        if (str != null)
            return str;
        return "0";
    }

    public static int string2int(String str) {
        try {
            return Integer.valueOf(str);
        } catch (Exception e) {
            return 0;
        }
    }

    public static long string2time(String date, String format) {
        if (date == null) {
            return 0;
        }
        SimpleDateFormat dateFormat = new SimpleDateFormat(format);
        Date dt = null;

        try {
            dt = dateFormat.parse(date);
        } catch (ParseException excpt) {
            return 0;
        }
        return date2time(dt);
    }

    public static String time2string(long time, String format) {
        if (time == 0)
            return "";
        Date date = new Date(time);
        SimpleDateFormat dateFormat = new SimpleDateFormat(format);
        return dateFormat.format(date);
    }

    public static Date string2date(String date, String format) {
        if (date == null) {
            return null;
        }
        SimpleDateFormat dateFormat = new SimpleDateFormat(format);
        Date dt = null;

        try {
            dt = dateFormat.parse(date);
        } catch (ParseException excpt) {
            return null;
        }
        return dt;
    }

    public static String date2string(Date date, String format) {
        SimpleDateFormat dateFormat = new SimpleDateFormat(format);
        return dateFormat.format(date);
    }

    public static long date2time(Date date) {
        Calendar cld = Calendar.getInstance();
        cld.setTime(date);
        return cld.getTimeInMillis();
    }

    public static String toHTMLString(String in) {
        StringBuffer out = new StringBuffer();
        for (int i = 0; in != null && i < in.length(); i++) {
            char c = in.charAt(i);
            if (c == '\'')
                out.append("'");
            else if (c == '\"')
                out.append("&quot;");
            else if (c == '<')
                out.append("&lt;");
            else if (c == '>')
                out.append("&qt;");
            else if (c == '&')
                out.append("&amp;");
            else if (c == ' ')
                out.append("&nbsp;");
            else if (c == '\n')
                out.append("<br />");
            else
                out.append(c);
        }
        return out.toString();
    }

    public static String html2text(String html) {
        String out = html;
        out.replaceAll("&quot;", "\"");
        out.replaceAll("&lt;", "<");
        out.replaceAll("&gt;", ">");
        out.replaceAll("&nbsp;", " ");
        out.replaceAll("&amp;", "&");
        out.replaceAll("<br />", "\n");
        return out;
    }

    public static String getUrlString(String str) {
        if (str == null)
            return "";
        try {
            return new String(str.getBytes("ISO8859_1"), "utf-8");
        } catch (Exception e) {
            e.printStackTrace();
            return "";
        }
    }

}

remove cvs folders. [java]

2009-06-01T13:26:00.001+08:00

just as a reminder~


import java.io.File;

public class DeleteCvsFile {
    public static void main(String[] args) {
        String filepath = "D:/workspace_java/yp";
        if(args.length > 0) filepath = args[0];
        File file = new File(filepath);
        delCvs(file);
    }
    
    static void delCvs(File file) {
        if(file.getName().equals("CVS")) {
            System.out.println("delete: " + file.getAbsolutePath());
            delDir(file);
            return ;
        } 
        if(file.isDirectory()) {
            File[] files = file.listFiles();
            for(int i=0; i != files.length; ++i) {
                delCvs(files[i]);
            }
        }
    }
    
    static void delDir(File file) {
        if(file.isDirectory()) {
            File[] files = file.listFiles();
            for(int i=0; i != files.length; ++i) {
                delDir(files[i]);
            }
        }
        file.delete();
    }
}

use (function(){})() to do the scope thing.

2009-05-25T11:09:00.000+08:00


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
    </head>
    <body>
        <input type="button" id="b" value="click me" />
        <script type="text/javascript">
            function g(){
                console.log('g0');
            }
            
            (function(){
                function g(){
                    console.log('g1');
                }
                document.getElementById('b').onclick = g;
            })();
            
            (function(){
                function g(){
                    console.log('g2');
                }
                g();
            })();
        </script>
    </body>
</html>

ie7 zoom caused some js behavior weird

2009-05-13T16:57:00.002+08:00

we always use js to calculate and set the DOM node's position. but under ie7, you should consider the zoom factor of the broswer, because its behavior is a little weird.
here is a test:
ps: I found the way to get zoomlevel here.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       <title>Untitled Document</title>
   <script type="text/javascript">
       var dojo = {
           byId: function(id) {
               return document.getElementById(id) || id;
           },
           coords: function(node) {
               var x, y;
               x = y = 0;
               while(node) {
                   x += node.offsetLeft;
                   y += node.offsetTop;
                   node = node.offsetParent;
               }
               return {'x': x, 'y': y};
           }
       };

       function z() {
           document.body.style.zoom = 2;
       }
       function s() {
           var rect = document.body.getBoundingClientRect();
           var zoomLevel = Math.round( (rect.right-rect.left)/document.body.clientWidth * 100);
           dojo.byId('zoom-info').innerHTML =
               'zoomLevel:' + zoomLevel + ','
               + 'd.offsetWidth:' + dojo.byId('d').offsetWidth + ','//dojo.style(document.body, 'zoom');
               + 'd.offsetTop:' + dojo.byId('d').offsetTop + ','
               + 'd.style.top:' + dojo.byId('d').style.top + ',';
       }
       window.onload = function() {
           document.attachEvent('onmousemove', function(e) {
               e = e || window.event;
               var pos = dojo.coords(dojo.byId(d));
               dojo.byId('debug').innerHTML = e.clientX + ', ' + e.clientY + ' d.pos:' + pos.x + ',' + pos.y;
               s();
           }, false);
       }
   </script>
   </head>
   <body>
       <h1>Test ie zoom</h1>
       <span >Hello world!</span>
       <div id="debug"></div>
       <div id="zoom-info"></div>
       <input type="button" value="+" onclick="z()"/>
       <input type="button" value="s" onclick="s()"/>
       <div id="d" style="position: absolute; top: 200px; left: 500px; background: red; width: 200px; height: 100px;">
           position: absolute; top: 200px; left: 50px; background: red; width: 200px; height: 100px;
       </div>
   </body>
</html>

finished the extension

2009-05-12T17:56:00.001+08:00

Here is the extension:https://addons.mozilla.org/zh-CN/firefox/addon/11911


var highlightbloggercode = {
  onLoad: function(event){
      this.initialized = true;
      this.codeTypes = 'bsh,c,cc,cpp,cs,csh,cyc,cv,htm,html,java,js,m,mxml,perl,pl,pm,py,rb,sh,xhtml,xml,xsl';
      this.oPrefs = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");
    
      var doc = event.originalTarget;
      if (!doc || doc == null || doc.location == null)
          return;
      var href = doc.location.href;
      var reg = /^http:\/\/www\.blogger\.com\/post-(create|edit)\.g\?blogID=/i;
      if (href && href.match(reg)) {
          var _this = this;
          // wait for the richedit load completed.
          setTimeout(function(){
              new _this.AddCode(window.content, window.content.document);
          }, 1000);
      }
  },
  AddCode: function(win, doc){
      this.win = win;
      this.doc = doc;
      this.btn = null;
      this.btnId = '_height_code_btn';
      this._codeDiv = null;
      this.langs = [];
    
      this.addBtn();
  },
  initOptions: function(){
      try {
          var types = this.oPrefs.getCharPref('highlightbloggercode.code.type');
          document.getElementById('code-type').value = types;
      }
      catch (e) {
          document.getElementById('code-type').value = this.codeTypes;
      }
  },
  saveOptions: function(){
      var types = document.getElementById('code-type').value;
      this.oPrefs.setCharPref('highlightbloggercode.code.type', types);
  }
};
highlightbloggercode.AddCode.prototype = {
  addBtn: function(){
      try {
          this.btn = this.doc.getElementById(this.btnId);
          if (!this.btn) {
              var input = this._create('input');
              input.type = 'button';
              input.id = this.btnId;
              input.value = "Code";
              this.doc.getElementById('htmlbar_Buttons').appendChild(input);
              this.btn = input;
              var _this = this;
              var handler = function(){
                  _this._doAddCode();
              }
              this.btn.addEventListener('click', handler, false);
          }
      }
      catch (e) {
          alert(e);
      }
  },
  _doAddCode: function(){
      try {
          var div = this._create('div');
          this._setStyle(div, 'font-size: 12px;border: 2px solid green;-moz-border-radius: 10px;padding: 5px;position: fixed;background: #f0f0f0;z-index:999;top:-5000px;');
        
          div.appendChild(document.createTextNode('Paste your code here'));
          div.appendChild(this._create('br'));

          // textarea      
          var textarea = this._create('textarea');
          this._setStyle(textarea, "font-size: 12px;font-family: 'Courier New', Courier, monospace;");
          div.appendChild(textarea);
        
          // paste code button
          var input = this._create('input');
          input.type = 'button';
          input.value = 'OK';
          div.appendChild(input);
          var _this = this;
          var handler = function(){
              _this._doPasteCode();
          }
          input.addEventListener('click', handler, false);
        
          // options for code type
          var types = highlightbloggercode.codeTypes;
          try {
              var types = highlightbloggercode.oPrefs.getCharPref('highlightbloggercode.code.type');
          }
          catch (e) {
          }
        
          this.langs = types.replace(/[,\s]+/g, ',').split(',');
        
        
          var select = this._create('select');
          for (var i = 0; i != this.langs.length; ++i) {
              var opt = this._create('option');
              opt.value = opt.text = this.langs[i];
              select.appendChild(opt);
          }
          div.appendChild(select);
        
          // close button
          input = this._create('input');
          input.type = 'button';
          input.value = 'close';
          div.appendChild(input);
          handler = function(){
              _this._marker.parentNode.removeChild(_this._marker);
              _this._codeDiv.parentNode.removeChild(_this._codeDiv);
          }
          input.addEventListener('click', handler, false);
        
        
          // create a marker
          var marker = this._create('div');
          this._setStyle(marker, 'position: fixed;top:0;left:0;background: black; opacity: .4;z-index:998;');
        
          this.doc.getElementsByTagName('body')[0].appendChild(marker);
          this.doc.getElementsByTagName('body')[0].appendChild(div);
        
          // update the div position
          var w = 600;
          var h = 340;
          var maxW = window.content.window.innerWidth;  
          var maxH = window.content.window.innerHeight;
          if(w > maxW) w = maxW - 40;    // div padding
          if(h > maxH) h = maxH - 80;
          textarea.style.width = w + 'px';
          textarea.style.height = h + 'px';
          div.style.top = parseInt((maxH - h)/3) + 'px';
          div.style.left = parseInt((maxW - w)/2) + 'px';
        
          marker.style.width = maxW + 'px';
          marker.style.height = maxH + 'px';
        
          this._marker = marker;
          this._codeDiv = div;
      }
      catch (e) {
          alert(e);
      }
  },
  _doPasteCode: function(){
      try {
          var code = this._codeDiv.getElementsByTagName('textarea')[0].value;
          var type = this._codeDiv.getElementsByTagName('select')[0].value;
          this._codeDiv.parentNode.removeChild(this._codeDiv);
          this._marker.parentNode.removeChild(this._marker);
          this._pasteCode(code, type);
      }
      catch (e) {
          alert(e);
      }
  },
  _pasteCode: function(code, type){
      try {
          var src = ['<code class="prettyprint lang-' + type + '">', this._encode(code), '</code>'];
          var str = 'javascript:Textbar.wrapSelection(\'\', \'' + this._convert(src.join("\n")) + '\')';
          this.win.location.href = str;
      }
      catch (e) {
          alert(e);
      }
  },
  _encode: function(str){
      str = str.replace(/&/g, '&amp;');
      str = str.replace(/</g, '&lt;');
      str = str.replace(/>/g, '&gt;');
      str = str.replace(/</g, '&lt;');
      str = str.replace(/\t/g, '    ');
      str = str.replace(/(\r\n|\n)/g, '\n');
      return str;
  },
  _convert: function(str){
      str = str.replace(/(['\\])/g, '\\$1');
      str = str.replace(/\n/g, '\\n');
      return str;
  },
  _create: function(tag){
      return this.doc.createElement(tag);
  },
  _setStyle: function(ele, style){
      var ss = style.split(';');
      for(var i=0; i != ss.length; ++i) {
          var maps = ss[i].split(':');
          if(maps.length < 2) continue;
          var key = maps[0];
          var val = maps[1];
          var _key = '';
          for(var k=0; k != key.length; ++k) {
              if (key.charAt(k) == '-') {
                  ++k;
                  _key += key.charAt(k).toUpperCase();
              } else {
                  _key += key.charAt(k);
              }
          }
          _key = _key.replace(/(^\s+|\s+$)/, '');
          val = val.replace(/(^\s+|\s+$)/, '');
          ele.style[_key] = val;
      }
  }
}
window.addEventListener("DOMContentLoaded", function(e){
  highlightbloggercode.onLoad(e);
}, false);

test-cpp

2009-05-12T16:49:00.000+08:00


#include <iostream>
#include <vector>

using namespace std;

int foo(int i) {
   return i + 1;
}

int bar(int i) {
   return i * 10;
}

typedef int(FP) (int);

int proccess(FP *fp, int i) {
   int r = (*fp)(i);
   cout << r << endl;
   return r;
}

// the basic one
class CompInt {
   typedef int(*_FP)(int);
public:
   CompInt(_FP f, _FP g) : fp(f), gp(g){}
   int operator() (int _i) {
       return (*fp)((*gp)(_i));
   }
private:
   _FP fp;
   _FP gp;
};

// template but need to specify the FOUR parameter types
/*
template<class F, class G, class X, class Y> class Comp {
public:
   Comp(F f0, G g0): f(f0), g(g0) {}
   Y operator() (X x) const {
       return f(g(x));
   }
private:
   F f;
   G g;
};
*/

// the COMMON template function object
template<class X, class Y> class Comp_base {
public:
   virtual Y operator() (X) const = 0;
   virtual Comp_base* clone() const = 0;
   virtual ~Comp_base() {}
};

template<class F, class G, class X, class Y> class CompCommon: public Comp_base<X, Y> {
public:
   CompCommon(F f0, G g0): f(f0), g(g0) { }
   Y operator() (X x) const {
       return f(g(x));
   }
   Comp_base<X, Y>* clone() const {
       return new CompCommon(*this);
   }
private:
   F f;
   G g;
};

template<class X, class Y> class Composition {
public:
   template<class F, class G> Composition(F, G);
   Composition(const Composition&);
   Composition& operator = (const Composition&);
   ~Composition();
   Y operator() (X) const;
private:
   Comp_base<X, Y>* p;
};

template<class X, class Y>
   template<class F, class G>
   Composition<X, Y>::Composition(F f, G g) : p(new CompCommon<F, G, X, Y>(f, g)) {};

template<class X, class Y>
Composition<X, Y>::~Composition() {
   delete p;
}

template<class X, class Y>
Composition<X, Y>::Composition(const Composition& c) : p(c.p->clone()) { }

template<class X, class Y>
Composition<X, Y>& Composition<X, Y>::operator = (const Composition& c) {
   if(this != &c) {
       delete p;
       p = c.p->clone();
   }
   return *this;
}

template<class X, class Y>
Y Composition<X, Y>::operator ()(X x) const {
   return (*p)(x);
}

int main() {
   // proccess(bar, proccess(foo, 1));
   cout << CompInt(foo, bar)(10) << endl;

/*
   Comp<int (*)(int), int(*)(int), int, int> fg(foo, bar);
   cout << fg(1) << endl;
*/


   Composition<int, int> fg2(foo, bar);
   cout << fg2(1) << endl;

   return 0;
}

firefox extension for blogger, quick paste code to your post

2009-05-12T14:54:00.003+08:00

OK, I'm a little lazy. It take my whole afternoon for this tool, only 160 line codes. Because I forget how to execute the js code on a web page via extension. At last I found the solution in Javascript Shell , it change the location.href = 'javascript:...'; maybe I did this before, but I don't know whether it's a good idea.
Maybe you know google blogger doesn't support code highlight, thanks for pretty print, we can post our beautiful code (how to use see here plz), but it's a little troublesome you need to modify the html code, and add to surrond it, the nightmare is you cannot post html code (there is another tool for u to hightlight your html code, see ASH).
This small tool add a button "Code" in the normal mode, you can paste code in your posts conveniently.
A little more work should be done: user auto customize the code type they frequently use.
Maybe the window for us to paste code could be look better.
bugs I haven't found.
now, I don't know how to share this tool...


var highlightbloggercode = {
  onLoad: function(event){
      this.initialized = true;
      var doc = event.originalTarget;
      if (!doc || doc == null || doc.location == null)
          return;
      var href = doc.location.href;
      var reg = /^http:\/\/www\.blogger\.com\/post-(create|edit)\.g\?blogID=/i;
      // reg = /^http:\/\/127\.0\.0\.1/i;
      if (href && href.match(reg)) {
//            alert(href);
//            doc.location.href = 'javascript:bar()';
//            return ;
          if(!window._a) window._a = [];
          window._a.push(event);
          this.win = window.content.window;
          this.doc = window.content.document;
        
          var _this = this;
          setTimeout(function() {
              new _this.AddCode(window.content, window.content.document);
          }, 1000);
      }
  },
  AddCode: function(win, doc) {
      this.win = win;
      this.doc = doc;
      this.btn = null;
      this.btnId = '_height_code_btn';
      this._codeDiv = null;
    
      this.langs = ['*', 'cpp', 'js', 'html'];
      this.addBtn();
  }
};
highlightbloggercode.AddCode.prototype = {
  addBtn: function(){
      try {
          this.btn = this.doc.getElementById(this.btnId);
          if (!this.btn) {
              var input = this._create('input');
              input.type = 'button';
              input.id = this.btnId;
              input.value = "Code";
              this.doc.getElementById('htmlbar_Buttons').appendChild(input);
              this.btn = input;
              var _this = this;
              var handler = function(){
                  _this._doAddCode();
              }
              this.btn.addEventListener('click', handler, false);
          }
      } catch(e) {
          alert(e);
      }
  },
  _doAddCode: function() {
      try {
          var div = this._create('div');
          div.style.position = 'fixed';
          div.style.top = '100px';
          div.style.left = '100px';
          div.style.zIndex = 999;
          div.style.width = '500px';
          div.style.height = '300px';
          div.style.padding = '10px';
          div.style.border = '2px solid green';
          div.style.background = '#f0f0f0';
        
          // textarea      
          var textarea = this._create('textarea');
          textarea.style.width = '480px';
          textarea.style.height = '240px';
          div.appendChild(textarea);
        
          // paste code button
          var input = this._create('input');
          input.type = 'button';
          input.value = 'OK';
          div.appendChild(input);
          var _this = this;
          var handler = function(){
              _this._doPasteCode();
          }
          input.addEventListener('click', handler, false);
        
          // options for code type
          var select = this._create('select');
          for (var i = 0; i != this.langs.length; ++i) {
              var opt = this._create('option');
              opt.value = opt.text = this.langs[i];
              select.appendChild(opt);
          }
          div.appendChild(select);

          // close button
          input = this._create('input');
          input.type = 'button';
          input.value = 'close';
          div.appendChild(input);
          handler = function() {
              _this._codeDiv.parentNode.removeChild(_this._codeDiv);
          }
          input.addEventListener('click', handler, false);
        
          this.doc.getElementsByTagName('body')[0].appendChild(div);
          this._codeDiv = div;
      }catch(e) {
          alert(e);
      }
  },
  _doPasteCode: function() {
      try {
          var code = this._codeDiv.getElementsByTagName('textarea')[0].value;
          var type = this._codeDiv.getElementsByTagName('select')[0].value;
          this._codeDiv.parentNode.removeChild(this._codeDiv);
          this._pasteCode(code, type);
      }catch(e) {
          alert(e);
      }
  },
  _pasteCode: function(code, type) {
      try {
          var src = ['<code class="prettyprint lang-' + type + '">', this._encode(code), '</code>'];
          var str = 'javascript:Textbar.wrapSelection(\'\', \'' + this._convert(src.join("\n")) + '\')';
          this.win.location.href = str;
      }catch(e) {
          alert(e);
      }
  },
  _encode: function(str) {
      str = str.replace(/&/g,'&amp;');
      str = str.replace(/</g,'&lt;');
      str = str.replace(/>/g,'&gt;');
      str = str.replace(/</g,'&lt;');
      str = str.replace(/\t/g, '    ');
      str = str.replace(/(\r\n|\n)/g, '\n');
      return str;
  },
  _convert: function(str) {
      str = str.replace(/(['\\])/g, '\\$1');  
      str = str.replace(/\n/g, '\\n');
      return str;
  },
  _create: function(tag) {
      return this.doc.createElement(tag);
  }
}
//DOMContentLoaded
window.addEventListener("DOMContentLoaded", function(evt){
  try {
      highlightbloggercode.onLoad(evt);
  }catch (e) {
      alert(e);
  }
}, false);

Test html code

2009-05-12T12:56:00.002+08:00


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       <title>Untitled Document</title>
       <style type="text/css">
           textarea {
               width: 600px;
               height: 200px;
           }
       </style>
   </head>
   <body>
       <textarea id="src"></textarea>
       <textarea id="desc"></textarea>
       <button onclick='s()'>C</button>
       <script type="text/javascript">
function c(str) {
   return str.replace(/(['\\])/g, '\\$1');   
}
function s() {
   document.getElementById('desc').value = c(document.getElementById('src').value);
}
       </script>
   </body>
</html>

ie7 rtl scrollbar bug: auto scroll to the right side.

2009-05-11T15:27:00.004+08:00


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
            #outer {
                width: 200px;
                height: 60px;
                border: 1px solid red;
                overflow: auto;
            } #inner {
                width: 1000px;
                height: 20px;
                background: green;
            }
        </style>
        <script type="text/javascript">
            function ch(){
                var inner = document.getElementById('inner');
                var outer = document.getElementById('outer');
                // inner.style.backgroundColor = 'rgb(' + (gint(100) + 155) + ',' + (gint(100) + 155) + ',' + (gint(100) + 155) + ')';
                outer.className = 'd' + new Date().getTime();
                // alert(outer.scrollLeft);
            }
            
            function gint(i){
                return parseInt(Math.random() * i);
            }
        </script>
    </head>
    <body dir="rtl">
        <div id="outer">
            <div id="inner" onmousedown="ch();">
                Hello world!
            </div>
        </div>
    </body>
</html>

construct array by nodefault class

2009-05-04T20:08:00.002+08:00

Just a test for pretty.js :)


#include 
#include 
using namespace std;

class NoDefault {
 friend ostream& operator << (ostream& os, const NoDefault& o);
private:
 static unsigned _id;
 unsigned id;
 unsigned pid;
public:
 NoDefault(char ch){
  id = ++_id;
  pid = 0;
  cout << "NoDefault(char): " << id << endl;
 }
 NoDefault(const NoDefault& o) {
  id = ++_id;
  pid = o.id;
  cout << "NoDefault(const NoDefault&): " << id << " by pid: " << o.id << endl;
 }
 
};

unsigned NoDefault::_id = 0;

ostream& operator << (ostream& os, const NoDefault& o) {
 os << "id: " << o.id << ";\tpid: " << o.pid;
 return os;
}

int main() {
 //! NoDefault o0; // error
 NoDefault o1('1');
 NoDefault o2(o1);
 
 // cannot initialize array
 //! NoDefault os0[10];
 
 vector v0;
 v0.push_back(o1);
 
 cout << "vector<> v(n, c)" << endl;
 //! vector v1(10);
 vector v2(10, NoDefault('1'));
 
 // malloc & new 
 //! NoDefault *op1 = new NoDefault[10];
 
 // malloc space for 10 NoDefault objects, but not initialize it.
 NoDefault *op2 = (NoDefault*)malloc(sizeof(NoDefault) * 10);
 new(op2 + 1) NoDefault('c'); // initilize op2[1]
 cout << op2[1] << endl;
 cout << op2[0] << endl; // op2[0] is not initialized
 return 0;
}

All the begining

2009-04-03T12:18:00.000+08:00

OK, I've used several blogs, but the headache problem is they are not stable. I want a blog which is stable and I can customize it convenient. Also I will post many codes in my blog, so it better could format & highlight code as well. Now, the hope is blogger will meet my requirements. I like google's product, it's simple, speed but the functions are powerful, also most of the products supply APIs for us to develop some little toolkits by myself. I think the blogger is one of them, so start my surf here!~

WenDong-Zhang

Javascript prototype chain

JavaScript prototype chain

A glance at constructor and __proto__

The prototype chain

Inheritance

Declare Class in dojo

dojo.mixin, dojo.clone

dojo.extend

dojo.delegate

Javascript prototype chain

JavaScript prototype chain

A glance at constructor and __proto__

The prototype chain

Inheritance

Declare Class in dojo

dojo.mixin, dojo.clone

dojo.extend

dojo.delegate

[note] java object initialize sequence

[note] date, timestamp & time string converter

remove cvs folders. [java]

use (function(){})() to do the scope thing.

ie7 zoom caused some js behavior weird

finished the extension

test-cpp

firefox extension for blogger, quick paste code to your post

Test html code

ie7 rtl scrollbar bug: auto scroll to the right side.

construct array by nodefault class

All the begining

A glance at constructor and proto

A glance at constructor and proto