My Octopress Blog

A blogging framework for hackers.

Extjs Tricks

| Comments

1.在Ext.draw.Text中,静态文本自动换行

1
2
3
4
5
6
7
{
    xtype: 'text',
    html: "hello world!",
    padding: '2 0 0 0',
    style: fontStyle,
    width: 730
}//利用html属性来存静态文本,不要使用text

2.让labelPad生效

1
2
3
4
5
6
7
{
fieldLabel: '申告人手机号码',
id: 'buttonCopy',
labelWidth: 'auto',
labelPad: 5,
xtype: 'textfield',
}

只要labelWidth失效,labelPad就会生效

源码分析
1
2
3
4
5
6
if (me.labelAlign !== 'top') {
    if (me.labelWidth) {
        labelStyle = 'width:' + me.labelWidth + 'px;';
    }
    labelStyle += 'margin-right:' + labelPad + 'px;';
 }

如果对labelWidth传入一个非数字型的字符串,width属性就会失效,所以只剩下一个labelPad生效

Log4j Mdc Save Log to Database

| Comments

log4j可以持久化跟踪日志,即保存到数据库详细配置

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import org.apache.log4j.Logger;
import org.apache.log4j.MDC;

public class AjLogDb {
    private static Logger logger = Logger.getLogger(AjLogDb.class);

    public static void main(String args[]) {
        AjLogDb.logDb("qqqqqqqqqqqqqq", "dfdfdfdfd", "fdsfasfas");
    }

    public static void logDb(String id, String operator, String taskname) {
        MDC.put("id", System.currentTimeMillis());
        MDC.put("orderId", id);
        MDC.put("taskName", taskname);
        MDC.put("operator", operator);
        MDC.put("remark",taskname);
        logger.debug(taskname);
    }
}

问题1:如果报找不到logger(AjLogDb),可以通过以下方法来解决

1
log4j.logger.AjLogDb=DEBUG,DB

JavaScript Simulate Oop(js中的面向对象编程)

| Comments

js中,除了nullundefined,所有的都是对象.主要对Function对象使用new操模拟面向对象的一些特性

1.在子类中调用父类方法, 主要使用call方法来带入this

模拟extend方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//extend实现继承
Function.prototype.extend = function(parent) {
  var child = this;
  child.prototype = parent;
  child.prototype.constructor = child;
}

var Animal = {
  name: 'noname',
  speak: function() {
    return this.name + " say Hi!";
  }
};

var Rabbit = function(name) {
  if (name) this.name = name;

  this.speak = function() {
    return Animal.speak.call(this);
  };
}

Rabbit.extend(Animal);
var rabbit1 = new Rabbit("Joy");
console.log(rabbit1.speak());//Joy say Hi!

2.javascript中的静态方法

既然js中都是对象的概念,那么只要直接对Function对象添加属性,而不是通过,this或者prototype来指定属性,就可以实现静态变量或者静态方法

1
2
3
4
5
6
7
8
9
function Robbot(){
}
Robbot.name1 = "Sky";
Robbot.sayHi = function hello() {
    return this.name1;
}
console.log(Robbot.name);//Robbot
console.log(Robbot.sayHi());//Sky
console.log(Robbot.sayHi.name);//''

Function.name 会返回function的name, 且是readonly的属性

The Use of Curl

| Comments

在mingw中使用curl(64位)

  • 下载适合mingw使用的curl,下载页面,适合64位的MinGw
  • 解压出来的文件夹里包含bin/include/两个文件夹,把这两个文件夹分别复制到MinGw的下的bin/include/

普通的get请求

1
curl url

简单的http验证命令

1
curl --user tobi:tobi url

javascript中的Regular Expression

| Comments

定义Regular Expression

  • var regular = /abc/;
  • var regular=new RegExp("\\d+");

为什么在使用new的时候要多加个\?

答:因为js在解析字符串的时候,总是忽略\,例如console.log("\ss")只会输出ss

特殊字符

  • []表示匹配在括号当中的任务字符
1
2
    var notABC = /[ABC]/;
    console.log('ABCBACCBBADABC'.search(notABC));//0
  • ^在[]中表示非的意思,在普通的表达式中表示字符串的开头,与^相对的就是$,表示字符串的尾
1
2
3
    var notABC = /[^ABC]/;
    console.log('ABCBACCBBADABC'.search(notABC));//10,会匹配到D
    console.log(/^A\w*D$/.test("AD"));//true
  • \w表示字母数字,包括_,\s表示匹配空格,\d表示匹配数字
1
2
    var digitSurroundedBySpace = /\s\d\w/;
    console.log('1a 2 3d'.search(digitSurroundedBySpace));//4
  • *表示匹配至少0次, +表示匹配至少1次, ?表示匹配0或者1次,.表示匹配任一字符串. {}表示匹配范围,如{2,}表示最少出现两字,{,2}最多出现两次{2,4}表示出现2到4次
1
2
3
4
5
    var parenthesizedText = /\(.*\)/;
    console.log('Its (the sloth\'s) claws were gigantic!'.search(parenthesizedText));//4

    var datePattern = /\d{1,2}\/\d\d?\/\d{4}/;    //匹配时间(XX/XX/XXXX)
    console.log("born 15/11/2003 (mother Spot): White Fang".search(datePattern));//5
  • ()表示整块的匹配
1
2
    var cartoonCrying = /boo(hoo+)+/i;
    console.log("Then, he exclaimed 'Boohooohoohooo'".match(cartoonCrying));//["Boohooohoohooo", "hooo"]

match方法会把匹配出来的字符串,以字符串数组的方式返回结果。字符串的第一个元素是匹配出来的结果,后面的元素是()匹配出来的内容

1
2
3
    //调换firstname和lastname
    var names = "Picasso, Pablo\nGauguin, Paul\nVan Gogh, Vincent";
    console.log(names.replace(/([\w ]+), ([\w ]+)/g, "$2 $1"));

$1,$2分别代表第一个,第二个块匹配,最多能有9个,即最大是$9

Constructor 和 Prototype的关系

| Comments

constructor 和 prototype的关系

  • constructor标明对象的类型
1
2
3
    function Test(){}
    var test = new Test();
    console.log(test.constructor); //function Test(){}
  • prototype(原型链)只有对象才有的属性,而不是通过new形成的实例
1
2
3
4
5
    function Test(){}
    Test.prototype.print = function(){console.log("Test print");};
    var test = new Test();
    test.print(); //Test print
    console.log(Test.prototype); //Test {print: function}
  • prototype有不可枚举的constructor属性,这个属性会默认指向当前的function. 对象的constructor就是继承该值.如果对prototype重新赋值,实例会丢失当前的constructor,从prototype获得一个新的constructor.
1
2
3
4
5
6
7
8
9
10
11
12
    function Test(){}
    var test1 = new Test();

    Test.prototype = {
        print: function(){console.log("Test's print");}
    }
    var test2 = new Test();

    console.log(test1.constructor); //function Test()
    console.log(test2.constructor); //function Object()
    console.log(test2.print()); //Test's print
    console.log(test1.print()); //undefined
  • 解决上面的问题,但是之前定义的实例的prototype仍是指向原prototype,不会有后来定义的方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
    function Test(){}
        var test1 = new Test();

    Test.prototype = {
        constructor: Test,
        print: function(){console.log("Test's print");}
    }
    var test2 = new Test();

    console.log(test1.constructor); //function Test()
    console.log(test2.constructor); //function Test()
    console.log(test2.print()); //Test's print
    console.log(test1.print()); //undefined

Javascript中的继承

| Comments

javascript中的继承主要是通过原型链prototype来实现

1.原型链继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function SuperType(){
    this.supername = "father";
}

SuperType.prototype.sayHello = function(){
    console.log(this.supername);
}

function SubType(){
    this.subname = "son";
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

var sub = new SubType();
sub.sayHello();//father

使用原型链继承的主要问题就是共享,字类会共享父类所有的属性以及方法,而有时候我们不希望子类共享属性.示例代码如下:

1
2
3
4
var sub = new SubType();
var sub1 = new SubType();
sub1.supername = "sub1 change the father";
sub.sayHello();//sub1 change the father

可以通过下面的介绍的继承方法解决这个问题

2.组合继承

组合继承就是使用构造函数和原型链共同实现继承,通过调用超类的构造函数来实现实例属性的不共享,通过原型链实现共享超类的访求.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function SuperType(){
    this.supername = "father";
}

SuperType.prototype.sayHello = function(){
    console.log(this.supername);
}

function SubType(){
    SuperType.call(this)
    this.subname = "son";
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

var sub = new SubType();
sub.sayHello();//father
var sub1 = new SubType();
sub1.supername = "sub1 change the supername";
sub.sayHello();//father
sub1.sayHello();//sub1 change the supername

使用组合继承还有一个优势就是能向父类传参

1
2
3
4
5
6
7
8
9
function SuperType(name){
    this.supername = name;
}
function SubType(){
    SuperType.call(this, "jack")
    this.subname = "son";
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

3. 原型式继承

1
2
3
4
5
6
7
8
9
10
11
12
function object(o){
    function F() {}
    F.prototype = o;
    return new F();
}

var person = {
    name: "jack",
    friends: ['rose']
}

var anotherperson = object(person);

这种方式的基本思路是通过已有对象来创建一个实例,但是所有实例都会共享属性

4.寄生式继承

寄生式继承是基于原型式继承

1
2
3
4
5
6
7
8
9
function createAnother(original) {
    var clone = object(original);
    clone.sayHi = function() {
        console.log("Hi");
    }
}

var another = createAnother(person);
another.sayHi(); //Hi

5.寄生组合继承

寄生组合继承主要是解决组合继承方式中父类会被实例化两次的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function inheritance(subType, superType) {
    var clone = object(superType.prototype);
    clone.constructor = subType;
    subType.prototype = clone;
}

function SuperType(){
    this.supername = "father";
}

SuperType.prototype.sayHello = function(){
    console.log(this.supername);
}

function SubType(){
    SuperType.call(this)
    this.subname = "son";
}

inheritance(SubType, SuperType);

Java中的小方法

| Comments

在java中使用join方法

1
2
StringUtils.join(new String[] {"Hello", "World", "!"}, ", ")
//Hello, World, !

Javascript Tricks(js中的小技巧)

| Comments

检验javascript的对象类型

for example:

1
console.log(Object.prototype.toString.call("ss") == "[object String]"); //true

打乱一个数组

1
2
3
4
var list = [1,2,3,4, 7, 8, 9];
list = list.sort(function(a, b) {
    return Math.random() - 0.5;
});

快速执行一个function

1
(function(){console.log("Hello!")})();

在数字前面加上0

1
2
3
function PrefixInteger(num, length) {
    return (Array(length).join('0') + num).slice(-length);
}

一个关于setTimeout和setTimeInterval的小问题

1下面哪个会先打印出来?setInterval会被执行嘛?

1
2
3
4
5
6
7
8
9
var interval = 500;

setInterval(function(){
    console.log("setInterval");
}, interval);

setTimeout(function(){
    console.log("setTimeout");
}, interval*10);

setTimeout会打印出来,setInterval会被执行

2下面哪个会先打印出来?setTimeout会被执行嘛?

1
2
3
4
5
6
7
8
9
var interval = 500;

setTimeout(function(){
    console.log("setTimeout");
}, interval);

setInterval(function(){
    console.log("setInterval");
}, interval*10);

会一直执行setINterval,不会执行setTimeout

出现这种情况是因为javascript在一个上下文里是顺序执行,而调用timeout或者interval的时候,会自动把里面的回调函数加入到一个等待列,只有把上下文的代码执行完才会执行这两个回调函数.

随机得到一个数组的值

1
var index = Math.floor(Math.Random()*arrayLength);

根据非字母数字分隔一个字符串

1
var arr = str.split(/\W/);

可以用占位符来输出字符串

1
console.log('%s', 'hello world') //hello world

在表单submit提交之后进行操作,submit(Jquery)的另一种使用方法

1
2
3
4
5
6
7
8
9
10
11
<form id="iform"></form>
$("#iform").submit(function(e){
  e.preventDefault();//阻止事件冒泡,二次提交
    this.submit();//调用原生方法提交表单
    $.ajax({//在表单提交之后进行另一个ajax请求
      url: '',
        success: function(data) {
          console.log(data);
        }
    });
});

Javascript中的工厂模式

| Comments

什么是工厂模式?

工厂模式(wiki)就是为重复创建同一类对象带来方便的, 统一管理对象生命周期的一种模式,可以消除大量重复代码。
在JS中,可以使用类似下面的代码来使用工厂

示例代码
1
2
3
4
5
6
7
8
9
10
11
Complex = new function() {
  function Complex(a, b) {
  }
  this.fromCartesian = function(real, mag) {
      return new Complex(real, imag);
  }
  this.fromPolar = function(rho, theta) {
      return new Complex(rho * Math.cos(theta), rho * Math.sin(theta));
  }
}
var c = Complex.fromPolar(1, Math.pi);