令狐葱★ - 博客园

2013年5月11日

WordPress在“控制板”提供了在线安装插件的选项，
选中插件安装的时候，如果没有在wp-config录入过FTP的信息，会提示在此输入：

该功能目前不支持SFTP，如果没有FTP的账号，需要ssh到服务器上，开通一个FTP账号

ssh -l root 223.4.234.71 //用root的身份登陆到该ip的服务器上
useradd -d /var/www/viacreative wpftp //添加一个用户名为wpftp的账号，指向到网站所在目录
passwd wpftp //给wpftp账号设定密码

如果懒得每次都输入FTP密码，可以在wp-config添加以下代码

define('FTP_HOST', '223.4.234.71');
define('FTP_USER', 'wpftp');
define('FTP_PASS', '这填FTP密码');

如果已有FTP账号，遇到 “无法创建目录。/wp-content/upgrade” 的问题，
可以通过修改文件夹的权限来解决：

chmod -R 755 /var/www/viacreative/wp-content/

当然，不经常玩插件的可以通过上传zip的方式来安装。

posted @ 2013-05-11 10:50 令狐葱★ 阅读(5) 评论(0) 编辑

2013年4月26日

jQuery中的.height()、.innerHeight()和.outerHeight()

jQuery中的.height()、.innerHeight()和.outerHeight()和W3C的盒模型相关的几个获取元素尺寸的方法。对应的宽度获取方法分别为.width()、.innerWidth()和.outerWidth()，在此不详述。

1. .height()

获取匹配元素集合中的第一个元素的当前计算高度值或设置每一个匹配元素的高度值（带一个参数）。

注意：1）.css('height') 和 .height()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。

2）.height()总是返回内容宽度,不管CSS box-sizing属性值。.height('value')设置的容器宽度是根据CSS box-sizing属性来定的, 将这个属性值改成border-box，将造成这个函数改变这个容器的outerHeight，而不是原来的内容高度。

2. .innerHeight()

为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。

3. .outerHeight()

获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值，或如果在一个空集合上调用该方法，则会返回 null。

在.outerHeight()计算中总是包含padding-top ,padding-bottom 和 border-top，border-bottom ；如果includeMargin参数是true，那么margin (top 和 bottom)也会被包含。

posted @ 2013-04-26 17:39 令狐葱★ 阅读(12) 评论(0) 编辑

jQuery中的attr()和prop()

对于attr()方法应该都比较熟悉，但是在jQuery1.6版本及之后，引入了一个新的方法prop()，实现的功能又很相似，这就带来了不少困惑。

在英文中，attribute和property一般都作为“属性”来翻译，硬是将其拆分成两个概念来理解，确实有点不好接受。这里，为区分起见，我将attribute译为“属性”，property译为“特性”（可能您觉得翻过来更合适，不纠结这个问题了。当然，如果您有更好的译法，还请补充）。

1. 为什么要引入prop()方法？

jQuery作者John Resig在其博客中关于这个问题有比较详尽的解释。简单的说，有两个原因：

1）为了更方便的访问DOM的特性（properties）。举例来说，比如在1.6之前的版本，可能需要这样来做：

var elem = $("#foo")[0];
if ( elem ) {
    index = elem.selectedIndex;
}

访问其他诸如nodeName、defaultValue等特性也是一样。但是引入prop()方法之后就简单了：

index = $("#foo").prop("selectedIndex");

2）由于实现时attr()方法要调用prop()方法，因此直接使用prop()速度会更快。

2. 特性（properties）和属性（attributes）有何区别？

DOM对象大部分的property都有对应的attribute，名字也基本一样（也有例外，如“class”这个attribute对应的property名字为“className”），这些property也和其对应的attribute保持一样的状态或值。但一些Boolean类型的属性(如checked, selected, disabled等)有些特殊，其attribute只保留初始值(默认值), property才是当前最新的状态或值。如一个默认勾选的checkbox，当你在页面去除勾选的时候，checked这个property已由true变为false，而checked这个attribute仍然保持“checked”这个初始值。由此可见attribute和property完全不是同一个东西，但“通用”的attr方法似乎在某种程度上模糊了这个区别。

3. attr()和prop()有何区别？

使用prop的时候，返回值是标准属性，true/false，比如$('#checkbox').prop('disabled')，不会返回“disabled”或者“”，只会是true/false。当然赋值的时候也是如此。使用attr,如disabled='disabled'时,为true,没有选中时,则为undefined。如此，我们便统一了所有操作，无论是从语法上还是语义上。

.prop()方法应该被用来处理boolean attributes/properties以及在html(比如：window.location)中不存在的properties。其他所有的attributes可以而且应该继续使用.attr()方法来进行操作。

具体的使用示例可以参考官方API文档。

4. 哪些属性应该用prop()方法呢？

简单的说，那些只添加属性名不添加属性值就会生效，或者是，只存在true/false的属性就需要使用prop()方法，比如selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected。官方给出的区分如下：

Attribute/Property	`.attr()`	`.prop()`
accesskey	✓
align	✓
async	✓	✓
autofocus	✓	✓
checked	✓	✓
class	✓
contenteditable	✓
draggable	✓
href	✓
id	✓
label	✓
location ( i.e. window.location )	✓	✓
multiple	✓	✓
readOnly	✓	✓
rel	✓
selected	✓	✓
src	✓
tabindex	✓
title	✓
type	✓
width ( if needed over `.width()` )	✓

5. 举例说明。

例如，考虑一个DOM元素的HTML标记中定义的<input type="checkbox" checked="checked" /> ，并假设它是一个JavaScript变量命名的elem ：

`elem.checked`	`true` (Boolean) 将改变复选框的状态
`$(elem).prop("checked")`	`true` (Boolean) 将改变复选框的状态
`elem.getAttribute("checked")`	`"checked"` (String) 不会改变的复选框的初始状态;
`$(elem).attr("checked")` (1.6)	`"checked"` (String) 不会改变的复选框的初始状态;
`$(elem).attr("checked")` (1.6.1+)	`"checked"` (String) 将改变复选框的状态
`$(elem).attr("checked")` (pre-1.6)	`true` (Boolean) 将改变复选框的状态

根据W3C的表单规范，在checked属性是一个布尔属性，这意味着只要该 attribute 存在，即使它没有值，或是一个空字符串，该属性对应的 property 就是 true。以下推荐的是兼容浏览器方式，判断 checkbox 元素的 checked 属性是否为"真" 的方法：

if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )

如果你使用jQuery 1.6 ，代码if ( $(elem).attr("checked") )，将获得一个属性(attribute) ，它不改变该复选框被选中和选中。它只是用来存储默认或选中属性的初始值。为了保持向后兼容，.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外，还会更新 property 属性，因此 boolean attribute（布尔属性）不需要通过 .prop() 来改变其值。推荐使用上述方法之一，来取得 checked 的值。

posted @ 2013-04-26 17:05 令狐葱★ 阅读(16) 评论(0) 编辑

jQuery中的事件绑定函数.bind()、.live()、on()和.delegate()

　　DOM树

　　首先，可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子：

　　事件冒泡(又称事件传播)

　　当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。

　　$('a').bind('click', function() { alert("That tickles!") });

　　因此一个单击操作会触发alert函数的执行。

　　click事件接着会向树的根方向传播，广播到父元素，然后接着是每个祖先元素，只要是它的某个后代元素上的单击事件被触发，事件就会传给它。

　　在操纵DOM的语境中，document是根节点。

　　现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。

　　.bind()

　　$('a').bind('click', function() { alert("That tickles!") });

　　这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素，并把alert函数绑定到每个元素的click事件上。

　　.live()

　　$('a').live('click', function() { alert("That tickles!") });

　　JQuery把alert函数绑定到$(document)元素上，并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与’a’这一CSS选择器是否匹配，如果都是的话，则执行函数。

　　live方法还可以被绑定到具体的元素(或context)而不是document上，像这样：

　　$('a', $('#container')[0]).live(...);

　　.delegate()

　　$('#container').delegate('a', 'click', function() { alert("That tickles!") });

　　JQuery扫描文档查找$(‘#container’)，并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。

　　可以注意到，这一过程与.live()类似，但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论，即$('a').live() == $(document).delegate('a')，是这样吗?嗯，不，不完全是。

　　为什么.delegate()要比.live()好用

　　基于几个原因，人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子：

　　$('a').live('click', function() { blah() });
　　// 或者
　　$(document).delegate('a', 'click', function() { blah() });

　　速度

　　后者实际上要快过前者，因为前者首先要扫描整个的文档查找所有的$(‘a’)元素，把它们存成jQuery对象。尽管live函数仅需要把’a’作为串参数传递以用做之后的判断，但是$()函数并未知道被链接的方法将会是.live()。

　　而另一方面，delegate方法仅需要查找并存储$(document)元素。

　　一种寻求避开这一问题的方法是调用在$(document).ready()之外绑定的live，这样它就会立即执行。在这种方式下，其会在DOM获得填充之前运行，因此就不会查找元素或是创建jQuery对象了。

　　灵活性和链能力

　　live函数也挺令人费解的。想想看，它被链到$(‘a’)对象集上，但其实际上是在$(document)对象上发生作用。由于这个原因，它能够试图以一种吓死人的方式来把方法链到自身上。实际上，我想说的是，以$.live(‘a’,…)这一形式作为一种全局性的jQuery方法，live方法会更具意义一些。

　　仅支持CSS选择器

　　最后一点，live方法有一个非常大的缺点，那就是它仅能针对直接的CSS选择器做操作，这使得它变得非常的不灵活。

　　欲了解更多关于CSS选择器的缺点，请参阅Exploring jQuery .live() and .die()一文。

　　更新：感谢Hacker News上的pedalpete和后面评论中的Ellsass提醒我加入接下来的这一节内容。

　　为什么选择.live()或.delegate()而不是.bind()

　　毕竟，bind看起来似乎更加的明确和直接，难道不是吗?嗯，有两个原因让我们更愿意选择delegate或live而不是bind：

　　为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上，它不能把处理程序绑定到还未存在于页面中的元素之上。

　　如果你运行了$(‘a’).bind(…)，而后新的链接经由AJAX加入到了页面中，则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上，因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。

　　或者为了把处理程序附加到单个元素上或是一小组元素之上，监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上，这种做法带来了性能上的好处。

　　停止传播

　　最后一个我想做的提醒与事件传播有关。通常情况下，我们可以通过使用这样的事件方法来终止处理函数的执行：

　　$('a').bind('click', function(e) {
　　e.preventDefault();
　　// 或者
　　e.stopPropagation();
　　});

　　不过，当我们使用live或是delegate方法的时候，处理函数实际上并没有在运行，需要等到事件冒泡到处理程序实际绑定的元素上时函数才会运行。而到此时为止，我们的其他的来自.bind()的处理函数早已运行了。

以上为转载。

出处：http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

译文地址：http://article.yeeyan.org/view/213582/179910

---------------------------华丽丽的分割线----------------------------

【令狐葱注释】

jQuery 1.7版本中将live()方法列为了废弃方法，同时增加了一个on()方法（配套使用off()），在1.9版本中移除了live()方法。

1.7之前的版本中，delegate的实现代码如下：

delegate: function( selector, types, data, fn ) {
    return this.live( types, data, fn, selector );
}

1.7.2版本中（及之后的版本）实现如下：

    delegate: function( selector, types, data, fn ) {
        return this.on( types, selector, data, fn );
    }

1.7.2中保留的live的实现如下：

    live: function( types, data, fn ) {
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    }

从中也基本可以看出delegate和live以及on的关系。

posted @ 2013-04-26 16:07 令狐葱★ 阅读(14) 评论(0) 编辑

实现ECMAScript 5中的Object.create()函数和Object.getPrototypeOf() 函数

function clone(proto) {
    function Dummy() { }
 
    Dummy.prototype             = proto;
    Dummy.prototype.constructor = Dummy;
 
    return new Dummy(); //等价于Object.create(Person);
}
 
var me = clone(Person);

function proto(object) {
    return !object?                null
         : '__proto__' in object?  object.__proto__
         : /* not exposed? */      object.constructor.prototype
}

　　更多可以参考这个教程。

posted @ 2013-04-26 13:14 令狐葱★ 阅读(3) 评论(0) 编辑

Javascript全局变量和delete

首先看一段代码：

// 定义三个全局变量
var global_var = 1;
global_novar = 2; // 反面教材
(function () {
   global_fromfunc = 3; // 反面教材
}());

// 试图删除
delete global_var; // false
delete global_novar; // true
delete global_fromfunc; // true

// 测试该删除
typeof global_var; // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"

解释：

隐式全局变量和明确定义的全局变量间有些小的差异，就是通过delete操作符让变量未定义的能力。

通过var创建的全局变量（任何函数之外的程序中创建）是不能被删除的。
无var创建的隐式全局变量（无视是否在函数中创建）是能被删除的。

这表明，在技术上，隐式全局变量并不是真正的全局变量，但它们是全局对象的属性。属性是可以通过delete操作符删除的，而变量是不能的。

在ES5严格模式下，未声明的变量（如在前面的代码片段中的两个反面教材）工作时会抛出一个错误。

posted @ 2013-04-26 10:40 令狐葱★ 阅读(4) 评论(0) 编辑

2013年4月25日

jQuery中$.proxy()的原理和使用

jQuery.proxy(),接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文(context )语境。

jQuery.proxy( function, context )

function将要改变上下文语境的函数。

context函数的上下文语境(`this`)会被设置成这个 object 对象。
jQuery.proxy( context, name )

context函数的上下文语境会被设置成这个 object 对象。

name将要改变上下文语境的函数名(这个函数必须是前一个参数 ‘context’ 对象的属性)

这个方法通常在向一个元素上附加事件处理函数时，上下文语境实际是指向另一个对象的情况下使用。

另外，jQuery 能够确保即使你绑定的函数是经过 jQuery.proxy() 处理过的函数，你依然可以用原先的函数来正确地取消绑定。

看一下官方的例子:

var obj = {
name: "John",
test: function() {
alert( this.name );
$("#test").unbind("click", obj.test);
}
};

$("#test").click( jQuery.proxy( obj, "test" ) );

// 以下代码跟上面那句是等价的:
// $("#test").click( jQuery.proxy( obj.test, obj ) );

// 可以与单独执行下面这句做个比较。
// $("#test").click( obj.test );

可以看一下jQuery中的实现（1.6之前的版本）：

/* jQuery 源码之 proxy:
 使用 apply 形式, 执行回调函数.
*/
jQuery.proxy = function( fn, proxy, thisObject ) {
    if ( arguments.length === 2 ) {
        // jQuery.proxy(context, name);
        if ( typeof proxy === "string" ) {
            thisObject = fn;
            fn = thisObject[ proxy ];
            proxy = undefined;

            /* 转化结果：
                thisObject -> context
                fn -> name
                proxy -> undefined
             */
        }
        // jQuery.proxy(name, context);
        else if ( proxy && !jQuery.isFunction( proxy ) ) {
            thisObject = proxy;
            proxy = undefined;
        }
    }
    if ( !proxy && fn ) {
        /* 使用 proxy 保证 函数执行时, context 为指定值 */
        proxy = function() {
            return fn.apply( thisObject || this, arguments );
        };
    }
    // Set the guid of unique handler to the same of original handler, so it can be removed
    if ( fn ) {
        proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++;
    }
    // So proxy can be declared as an argument
    return proxy;
}

其实就是平常使用的的call和apply，大部分的时候作为回调使用。

在stackoverflow上有个问题，其中的例子比较典型，供参考：

比如有如下代码：

$('#myElement').click(function() {

        // In this function, "this" is our DOM element.

    $(this).addClass('aNewClass');

});

这里的this就是我们的DOM元素。如果我们要在增加class样式之前需要等待一段时间，可能会将代码写成下面这样（注意：有问题的代码）：

$('#myElement').click(function() {

    setTimeout(function() {

          // Problem! In this function "this" is not our element!

        $(this).addClass('aNewClass');

    }, 1000);

});

这里的this就不是我们期望的那个DOM元素了。解决方法就是使用jQuery的$.proxy()了，代码如下：

$('#myElement').click(function() {

   // ------------------v--------give $.proxy our function,

    setTimeout($.proxy(function() {

        $(this).addClass('aNewClass');  // Now "this" is again our element

    }, this), 1000);

   // ---^--------------and tell it that we want our DOM element to be the

   //                      value of "this" in the function

});

我们可以这样来理解上面的代码：

function() {

    // v--------func is the function we gave to $.proxy

    func.apply( ctx );

    // ----------^------ ctx is the value we wanted for "this" (our DOM element)

}

这就体现出来jQuery中$.proxy()的强大功效了。

注意：在jQuery 1.6及之后的版本中，除了上面提到的两种用法之外，proxy还增加了其他两种用法：

jQuery.proxy( function, context [, additionalArguments ] )
jQuery.proxy( context, name [, additionalArguments ] )

具体使用可以参考jQuery手册。

posted @ 2013-04-25 20:31 令狐葱★ 阅读(9) 评论(0) 编辑

Javascript基类对象原型中有数组的情况

function Base(){
}

Base.prototype = {x:10, y:[]}

function A(){}
A.prototype = new Base();
var a = new A();
a.y.push("first");
a.x = 9;

console.log(a.x);
console.log(a.y);


function B(){}
B.prototype = new Base();
var b = new B();
b.y.push("second");
b.x = 11;

console.log(a.x);
console.log(a.y);