编程开发 类目

学会编程我们能够和计算机沟通

JavaScript 最佳实践

原文链接:http://www.javascripttoolbox.com/bestpractices/
翻译声明:非逐句逐字翻译,若有翻译不当,纯属搞笑。
翻译状态:未完成

介绍

这篇文档是一份清单,它罗列了一系列开发JavaScript代码的最佳的编程实践和首选的编程方法。文档中的每条内容都基于JavaScript社区中众多开发者的意见和经验总结而来。但是,这些条款仅仅是一些建议,而并非需要绝对遵守的原则,一些经验丰富的开发者对于以下描述的内容,可能会持有些许不同的意见。

始终使用var关键字

JavaScript中变量只有两种作用域范围:全局作用域和函数作用域, 使用var关键字对于保持变量作用域清晰是至关重要的。当声明一个变量作为全局变量或者函数级的变量(译者注:函数内部声明的变量,也就是在函数内部的局部变量), 始终在声明的最前面添加var关键字。下面的例子强调不使用var关键字会造成的潜在问题:

不使用var造成的问题

var i=0; // 正确:通过声明创建了一个全局变量
function test() {
   for (i=0; i<10; i++) {
      alert("Hello World!");
   }
}
test();
alert(i); // 警告:全局变量i的当前值为10

继续阅读

如何为单篇文章添加自定义的样式

在看到一些Demo教程页面的时候,突然想到一个问题,在做Demo的时候往往需要插入一些单独的与Demo相关的样式,这些样式是如何添加的呢?

因为接触WordPress不久,起初我只是联想到在自定义博客的时候搜索到的模板页面(参考给你的wordpress新建独立的tag页面),本博客的Archives、Categories等页面都是采用这种方法实现的,但后来仔细一想觉得这种方法太不切实际了,那岂不是要给每个页面都添加一个模板页面。

然后,我又想WordPress的编辑/发表文章的HTML编辑框可否添加样式<style>,试了下发现确实可以,不过自然地添加的样式是追加在所跟随文本的后方,而不是在<head>内。

有没有一种方法可以在<head>中添加一小段为本文章而单独设定的样式呢,而又类似在编辑框中那样可以方面的添加样式内容? 经过万能的Google搜索,找到一篇与我的问题非常契合的博客Custom CSS Per Post。文中作者提供了两个可以选择的方法,两者都可以在主题的function.php中添加少量代码实现,而无需为止安装额外的插件。

继续阅读

JavaScript 面向对象编程一:类型系统

本系列均参考了大量网上相关的内容,并基于此总结并归纳,作为个人笔记,也供同样与我一样初涉JavaScript面向对象编程的同学一同学习讨论。

前言

网上有非常多的介绍JavaScript类型的内容,关于类型的分类众说纷纭,各执一词,一些矛盾的观点往往会让我们感到非常困惑。后来我仔细想了 想,与其在这种泥苦苦挣扎,还不如就近找一根救命稻草抓住。当然,这种观点可能比较激进,但是有时候确实需要做些取舍与选择。选择一种你觉得相对比较正 确,并且可以接受的答案。

类型系统

本文的类型分类依据来源于aimingoo的博客中关于JavaScript类型的几篇博客文章[1][2][3]

Javascript有两套类型系统:基础类型系统与对象类型系统。

继续阅读

浅谈 JavaScript 刷新页面

本文的所有代码在Firefox 11 beta + Scriptish 0.1.7环境作为用户脚本执行,某些行为可能会与普通的页面脚本不一致。

问题引出

在写CC98 Reply Improved脚本的时候,遇到一个场景是在帖子回复成功后,页面自动刷新,并且当引用或者编辑回复时,希望可以返回到当前被引用或者编辑的帖子楼层。在98中每个楼层都有一个锚链接(anchor), 这些锚链接的名称为数字,从0~9,其中1表示第一楼,2表示第二楼……0表示第十楼。假设当前的帖子链接为:

/dispbbs.asp?boardID=39&ID=3841624&star=20&page=1

则要跳转到第5楼,则需要在浏览器输入地址

dispbbs.asp?boardID=39&ID=3841624&star=20&page=1#5

其中#5这部分称为hash(我不大清楚中文应该叫什么)。

我们知道当在浏览器地址栏中输入与当前页面地址不同的目标地址时,浏览器会为我们载入目标页面;当目标地址与页面地址相同时,则页面不会刷新。即使上文所介绍的hash部分的内容不一样,页面同样不会刷新,而只是会在页面内部跳转到该hash值所指定的锚链接位置。假设帖子地址为:

dispbbs.asp?boardID=39&ID=3841624&star=20&page=1#5

若将末尾的#5改成#6,页面会跳到第6楼帖子而不会刷新,一般情况下这是可以接受的默认行为。

问题解决

回到最初的场景需要,在帖子回复之后需要刷新并跳转到相应的楼层,会遇到以下几种情况:

  1. 目标地址与当前地址不同。
  2. 目标地址与当前地址完全相同。
  3. 目标地址与当前地址仅hash部分不相同。

其中,第一种情况和第二种情况的解决方法比较简单,分别使用location.hreflocation.reload()即可解决:

location.href = targetURL;  // 第一种:将目标地址赋值给location.href
location.reload();   // 第二种:直接刷新本页面

然后,第三种情况相对比较麻烦,若以第一种的方法考虑,页面并不会刷新。因此需要寻找另外一种方法:在将页面地址改变后再打开新的页面地址。我想到的方法是两种,分别为:

// 第一种方法,使用setTimeout推迟刷新时间
location.href = targetURL;
setTimeout(function () {
    location.reload();
}, deferTime);

// 第二种方法,监听hashchange事件
location.href = targetURL;
window.addEventListener('hashchange', function () {
    location.reload();
}, false);

第一种方法依赖deferTime这个时间的设置,这个值设置得太小页面依然不会刷新,太大则会延迟刷新的动作,用户感觉不佳。

第二种方法监听hashchange事件(当地址的hash部分变化时会触发该事件),当地址的hash部分变化时,首先将当前页面的地址设置成目标楼层地址,此时页面并不会刷新,因此需要在事件监听函数中执行刷新动作,因为此时页面地址已经是目标楼层的地址,刷新后可以达到最初需要中提到的效果。

但是若一直监听hashchange事件,则任何一次hash变化都会执行我们设定的hashchange事件处理函数,因此这算是一个副作用,解决的方法是使用jQuery中的.one()方法来注册事件处理函数,该处理函数只会执行一次,执行完后自动取消监听。脚本中与此相关的代码片断为:

 function replySuccess() {

    // ..... 省略前文代码

    /* Fix: 回帖后地址不刷新 */
    /* 当URL Hash部分变化时, 刷新页面 */
    $(window).one('hashchange', function () {
        location.reload();
    });

    if (equalURL(location.href, url)) // 地址相同则直接刷新
        location.reload();
    else // 否则, 更换地址栏地址
        location.href = url;
}

/* 判断两个地址是否相同 */
function equalURL(lhs, rhs)
{
    /* 标准化 */
    lhs = getRelativeURL(lhs).toLowerCase();
    rhs = getRelativeURL(rhs).toLowerCase();

    return (lhs == rhs);
}