必威体育下载基督教Heilmann

贴有“代码”标签的帖子

清除“CSS唯一性感书签”演示代码

星期五,1月8日,二千零一十

在浏览我的谷歌阅读器时,我偶然发现了一篇文章纯粹的性感书签效果CSS.通常当我听到“纯净”CSS我跳过了,因为99%的解决方案都不能在键盘上使用,因此在网上使用是一个坏主意。然而,这一个引起了我的兴趣,因为我不知道“性感书签的效果”是什么。

原来这并不是一个色情书签,而是一个“与社交媒体分享这个”的链接——你在博客帖子下面有一些链接,可以帮助你复制和粘贴有挑战的人:

具有不同社交媒体选项的链接菜单

好吧,不会有那么大的问题。将链接列表作为一个很酷的滚动进行的技巧CSS只有2004年完成在第一CSS精灵文章.请注意,链接在列表中。

现在,新文章的HTML如下所示:

      

在我的书中有一些问题:

  • 这里没有正在发生的事情的语义结构。换行符并不意味着HTML所以本质上这是一个没有任何分隔的链接列表。想象一下,在电子邮件中向朋友发送三个链接,或者把它们放到一个页面上。你会这样做吗:谷歌我可以要奶酪汉堡b3taSpotify?我觉得很困惑…
  • 链接中没有内容-当CSS被关掉了,你什么都找不到。
  • 那里有相当多的重复课程。当另一个元素中的每个元素都具有相同的类时,就会发生可疑的事情。除非这个类用作微格式的句柄,你可以把它去掉,然后用级联CSS.因此,在本例中,您可以使用.sharing-cl一个{}去掉重复的类。
  • 导航是结构化的,所以不是一个包含链接的DIV,那么使用列表呢?这样当CSS关闭,这仍然有道理。

这是我的替代品:

      

当然你应该换个空的HREF属性与实际链接。

通常我使用ID而不是类,但是由于这个栏可能在文档中使用多次,让我们保持原样。

这个HTML现在是318字节,而不是294字节,增加了一点。但是:

  • 没有CSS
  • 它结构良好,甚至对屏幕阅读器也有意义
  • 链接是有意义的,因为他们说他们指向哪里。

让我们检查一下CSS

.sharing-cl {
}

共享CL A{
显示:块;
宽度:75 px;
高度:30px;
浮动:左;
}

.共享cl.共享sprite
背景:url (http://webdeveloperjuice.com/demos/images/share-sprite.png)没有重演}
.共享cl.sh su
margin-right: 5 px;
背景位置:-210px-40px;
}

.sharing-cl .sh-feed {
margin-right: 5 px;
背景位置:-70 px -40 px;
}

.分享cl.sh tweet
margin-right: 5 px;
背景位置:-140px-40px;
}

.共享cl.sh邮件
margin-right: 5 px;
背景位置:0-40px;
}

.sharing-cl .sh-digg {
margin-right: 5 px;
背景位置:-280 px -40 px;
}

共享cl.sh面
背景位置:-350px-40px;
}

.分享cl.sh邮件:悬停
margin-right: 5 px;
背景位置:0 1px;
}

.共享cl.sh源:悬停
margin-right: 5 px;
背景位置:-70px 1px;
}

.分享cl.sh推特:悬停
margin-right: 5 px;
背景位置:-140 px 1 px;
}

.分享cl.sh su:悬停
margin-right: 5 px;
背景位置:210px 1px;
}

.分享cl.sh digg:悬停
margin-right: 5 px;
背景位置:280px 1px;
}

.分享cl.sh面:悬停
背景位置:350px 1px;
}

所以这里我们有很多重复。您还可以看到share sprite类的位置:如果您想向该部分添加一个元素,该元素是一个链接,但没有图像背景,那么您只需将该类去掉。这个,然而,这完全是错误的做法CSS.我们可以假设这个构造中的每个链接都得到背景图像,这就是为什么它更有意义的应用图像到元素与.sharing-cl一个{}.因为每个链接都有一个类,所以您可以很容易地用例如.共享cl a.plain.

同样适用于margin-right:5 px.如果这适用于除一个外的所有链接,不要为其他所有人定义它,并在“唯一”处忽略它。相反,只将其应用于奇数项,并保存大量代码。

最后CSS

.sharing-cl {
溢出:隐藏;
保证金:0;
填充:0;
list-style:没有;
}

共享CL A{
溢出:隐藏;
宽度:75 px;
高度:30px;
浮动:左;
margin-right: 5 px;
indent: -300 px;
}

共享CL A{
背景:url(http://webdeveloperjuice.com/demos/images/share-sprite.png)无重复;
}

A.SH-SU背景位置:-210px-40px;
A.SH-进料背景位置:-70px-40px;
a.sh-tweet背景位置:-140px-40px;
a.sh-mail背景位置:0-40px;
A.SH-DIGG背景位置:-280px-40px;
A.SH面{
margin-right: 0;
背景位置:-350px-40px;
}

a.sh-mail:悬停背景位置:0 1px;
a.sh-feed:悬停背景位置:-70px 1px;
a.sh-tweet:悬停背景位置:-140px 1px;
a.sh-su:悬停背景位置:-210px 1px;
.sh digg:悬停背景位置:-280px 1px;
A.SH-face:悬停
margin-right: 0;
背景位置:350px 1px;
}

从1028字节到880字节。只是通过理解CSS工作和如何级联可以利用你的优势。我很想摆脱选择器,同样,但它们是特异性所必需的。注意主选择器上的溢出——这修复了浮动在原始中未被清除的问题。CSS.通过使用负文本缩进,我们可以去掉显示的文本,也是。我个人认为这是不好的,你应该尝试显示文本,因为你不能期望最终用户知道所有这些图标。

例如:

{文本{
边缘顶部:3EM;
字体粗细:粗体;
无衬线字体类型:helvetica,arial;
}

{文本A{
文本缩进:0;
高度:汽车;
text-align:中心;
字体大小:11px;
填充顶部:35px;
颜色:×999;
文字修饰:没有;
}

你可以看到解决方案在这里起作用

共享酒吧-由你清理。

对我来说,赞扬“仅CSS解决方案”是不够的-如果你真的喜欢CSS将其视为比JavaScript更好的解决方案,那么您还应该展示人们如何使用其特性来创建智能,短而灵活的代码。

使用TutorialBuilder从源注释生成教程

周二,5月13日,2008

我花了太多时间来保持脚本的解释教程与代码中的更改同步。所以我给自己写了一封PHP解决方案为我做这项工作。多年来,我发现解释剧本的最好方法是:

  • 举个例子
  • 显示完整的源代码
  • 逐位显示源代码,然后解释每个部分的功能

如果你去查一下Tutorialbuilder你会看到我用PHP脚本。它为您执行以下操作:

  • 它从脚本源代码中的注释生成教程部分。
  • 它将源代码转换为可显示的代码(编码它,添加行号,允许行被高亮显示)
  • 它使用正确的文件名创建脚本的可下载版本
  • 它创建一个脚本的可执行版本,不带注释,可通过脚本元素链接到该版本。
  • 它可以缩小脚本(删除所有空白以减小文件大小)

换言之,结果这个源脚本像这样的教程使用一个模板和一些CSS(大部分取自悠悠

它是替代JSDoc但是相反,它更容易使用和解释代码的功能,而不是JS代码本身的语法。

Tutorialbuilder授权给BSD,所以你自己动手吧。

在将脚本移交给下一个开发人员之前,要对它做五件事

星期四,2月7日,2008

让我们面对现实:没有太多开发人员计划他们的javascript。相反,我们快速写出一些有用的东西,并提交它。随着我们的发展,我们提出了变量和函数名,并且最终知道我们将永远不必再看到这一小段脚本。

当我们再次看到我们的脚本时,问题就开始了,或者我们从其他开发人员那里得到脚本,它们是用同样的方式建造的。这就是为什么当提到“这已经完成了,我可以继续下去。

假设我们的工作是在div在包含类的文档中可折叠的会显示和隐藏div.首先要做的是使用一个库来解决跨浏览器事件处理的问题。我们暂时不把精力集中在这一点上,而是使用老式的事件处理程序,因为我们在这里讨论的是不同的东西。使用模块模式,我们可以用几行代码创建类似这样的功能:

折叠器= 功能){
  var=文件。getElementsByTagName“div”)
  对于var=&书信电报秒。长度++){
    如果[].类名.索引可折叠的)!=){
      varp=文件。createElement“P”)
      var=文件。createElement“一个”)一个。setAttribute“HREF”''')一个。onclick = 功能){
        var证券交易委员会= .返回节点.下一步
        如果秒。风格.显示 = = “没有”){秒。风格.显示 = “块”
          .初生子女.nodeValue = “崩溃”
        } 其他的 {秒。风格.显示 = “没有”
          .初生子女.nodeValue = “扩大”
        }
        返回 
      }一个。附属儿童文件。创建节点“扩大”))P.附属儿童)[].风格.显示 = “没有”[].返回节点.插入之前p[])
    }
  }
})

这已经相当干净了(我确信您已经看到了innerhtml的javascript:links解决方案),而且不引人注目,但有些事情不应该存在。

步骤1:去除外观和感觉

首先要做的不是在javascript中操作样式集合,而是将外观和感觉保留到它所属的位置:CSS.这允许轻松地剥皮和更改隐藏部分的方式,而无需在JavaScript中进行修改。我们可以通过分配CSS类并将其移除:

折叠器= 功能){
  var=文件。getElementsByTagName“div”)
  对于var=<秒。长度++){
    如果[].类名.索引可折叠的)!=){[].类名 + =  + “崩溃”
      varp=文件。createElement“P”)
      var=文件。createElement“一个”)一个。setAttribute“HREF”''')一个。onclick = 功能){
        var证券交易委员会= .返回节点.下一步
        如果秒。类名.索引“崩溃”)!=){秒。类名 =秒。类名.代替“崩溃”)
          .初生子女.nodeValue = “崩溃”
        } 其他的 {秒。类名 + =  + “崩溃”
          .初生子女.nodeValue = “扩大”
        }
        返回 
      }一个。附属儿童文件。创建节点“扩大”))P.附属儿童)[].返回节点.插入之前p[])
    }
  }
})

步骤2:消除明显的速度问题

这个脚本中没有很多问题,但是有两件事是显而易见的:for循环在每次迭代中读取secs集合的length属性,我们为每个链接创建相同的匿名函数来显示和隐藏该部分。在另一个变量中缓存长度并创建一个可重用的命名函数更有意义:

折叠器= 功能){
  var=文件。getElementsByTagName“div”)
  对于var=J=秒。长度<J++){
    如果[].类名.索引可折叠的)!=){[].类名 + =  + “崩溃”
      varp=文件。createElement“P”)
      var=文件。createElement“一个”)一个。setAttribute“HREF”''')一个。onclick =切换一个。附属儿童文件。创建节点“扩大”))P.附属儿童)[].返回节点.插入之前p[])
    }
  }
  功能切换){
    var证券交易委员会= .返回节点.下一步
    如果秒。类名.索引“崩溃”)!=){秒。类名 =秒。类名.代替“崩溃”)
      .初生子女.nodeValue = “崩溃”
    } 其他的 {秒。类名 + =  + “崩溃”
      .初生子女.nodeValue = “扩大”
    }
    返回 
  }
})

步骤3:从函数代码中删除每个标签和名称

这在维护方面很有意义。当然,当标签名或类名必须更改时,很容易进行快速搜索+替换,但这并非真正必要。通过将所有人类可读的东西移动到一个自己的配置对象中,您不必搜索代码,也不必遭受搜索+替换错误的影响,而是把所有变化的比特和波束放在一个地方:

折叠器= 功能){
  var配置= {指示器类 可折叠的塌陷阶级 “崩溃”collapseLabel “崩溃”扩展标签 “扩大”
  }
  var=文件。getElementsByTagName“div”)
  对于var=J=秒。长度<J++){
    如果[].类名.索引配置。指示器类)!=){[].类名 + =  +配置。塌陷阶级
      varp=文件。createElement“P”)
      var=文件。createElement“一个”)一个。setAttribute“HREF”''')一个。onclick =切换一个。附属儿童文件。创建节点配置。扩展标签))P.附属儿童)[].返回节点.插入之前p[])
    }
  }
  功能切换){
    var证券交易委员会= .返回节点.下一步
    如果秒。类名.索引配置。塌陷阶级)!=){秒。类名 =秒。类名.代替 +配置。塌陷阶级)
      .初生子女.nodeValue =配置。collapseLabel
    } 其他的 {秒。类名 + =  +配置。塌陷阶级
      .初生子女.nodeValue =配置。扩展标签
    }
    返回 
  }
})

步骤4:使用人类可读的变量和方法名

在提高代码的可维护性方面,这可能是最有用的步骤。当然,开发过程中证券交易委员会很有道理,但不部分让它更容易掌握正在发生的事情?是什么,尤其是以后需要换成按钮的时候?维护者会将其重命名为按钮

折叠器= 功能){
  var配置= {指示器类 可折叠的塌陷阶级 “崩溃”collapseLabel “崩溃”扩展标签 “扩大”
  }
  var部分=文件。getElementsByTagName“div”)
  对于var=J=部分。长度<J++){
    如果部分[].类名.索引配置。指示器类) != -){部分[].类名 + =  +配置。塌陷阶级
      var段落=文件。createElement“P”)
      var触发=文件。createElement“一个”)触发。setAttribute“HREF”''')触发。onclick =关节切除术触发。附属儿童文件。创建节点配置。扩展标签))段落。附属儿童触发)部分[].返回节点.插入之前段落部分[])
    }
  }
  功能关节切除术){
    var部分= .返回节点.下一步
    如果部分。类名.索引配置。塌陷阶级) != -){部分。类名 =部分。类名.代替 +配置。塌陷阶级)
      .初生子女.nodeValue =配置。collapseLabel
    } 其他的 {部分。类名 + =  +配置。塌陷阶级
      .初生子女.nodeValue =配置。扩展标签
    }
    返回 
  }
})

第5步:评论,签名并可能消除与其他脚本的最后冲突

最后一步是添加真正需要的注释,说出你的名字和日期(这样人们就可以问问题,知道这是什么时候做的),为了真正的安全,我们甚至可以去掉脚本的名称并保持匿名模式。

//折叠并展开具有特定类的页的节
//作者克里斯蒂安·海勒曼,必威体育下载07/01/08
功能){/ /配置,在此处更改CSS类名和标签
  var配置= {指示器类 可折叠的塌陷阶级 “崩溃”collapseLabel “崩溃”扩展标签 “扩大”
  }var部分=文件。getElementsByTagName“div”)
  对于var=J=部分。长度<J++){
    如果部分[].类名.索引配置。指示器类)!=){部分[].类名 + =  +配置。塌陷阶级
      var段落=文件。createElement“P”)
      var触发链路=文件。createElement“一个”)triggerLink。setAttribute“HREF”''')triggerLink。onclick =关节切除术triggerLink。附属儿童文件。创建节点配置。扩展标签))段落。附属儿童触发链路)部分[].返回节点.插入之前段落部分[])
    }
  }
  功能关节切除术){
    var部分= .返回节点.下一步
    如果部分。类名.索引配置。塌陷阶级)!=){部分。类名 =部分。类名.代替 +配置。塌陷阶级)
      .初生子女.nodeValue =配置。collapseLabel
    } 其他的 {部分。类名 + =  +配置。塌陷阶级
      .初生子女.nodeValue =配置。扩展标签
    }
    返回 
  }
}))

所有非常明显的事情,我相信我们以前都做过,但是,让我们诚实地说:我们多久忘记一次代码,多久修改一次代码,如果有人采取了这些步骤,代码会变得更好?

用Ajax代码显示懒人的代码教程

周一,1月28日,2008

目前,我正在为一个关于Web标准的在线自我培训课程编写很多教程,我遇到了不得不在两个地方维护示例代码的麻烦:代码本身和HTML记录解释。因此,我使用jquery编写了一个小脚本,自动将链接转换为HTML代码示例HTML实体和行号。您可以定义要显示的行,哪些行应突出显示,您可以在伊夫拉姆当链接被点击时。

对于“普通开发者”来说,javascript快捷方式符号不应该是黑色魔法。

周二,11月27日,二千零七

当发布有关JavaScript开发的文章时,您会遇到许多由发布者和编辑器设置的规则。这是一件很好的事情,因为它让我们的作者保持警觉,让我们更加了解成功出版的真正意义。然而,它也可能非常烦人,尤其是当老一套的成语死板的时候。其中之一是“普通的开发人员”不太了解JavaScript快捷符号。

现在,如果你是“普通开发者”,请给我5分钟的时间来完成以下任务:您将了解更多的代码,并且花费更少的时间编写自己的脚本。

数组快捷符号-它是一个时髦的方

我遇到的第一个问题是数组。这些在JavaScript中非常有用并且无所不在,但我仍然发现有人编写了复杂的东西,比如:

var链接= 新的 数组)链接[] = 'http://cuteoverload.com'链接[] = 'http://icanhascheezburger.com'链接[] = 'http://pencilsatdawn.wordpress.com'链接[] = 'http://apelad.blogspot.com'
/ /……令人作呕……

这是复杂的(您必须为每个项重复数组名),而且维护起来也很困难。当您更改订单(假定订单很重要)时,您需要更改编号,也是。这是不必要的,因为编号是自动为您完成的。您只需使用方括号:

var链接= [
  'http://cuteoverload.com'
  'http://icanhascheezburger.com'
  'http://pencilsatdawn.wordpress.com'
  'http://apelad.blogspot.com' //<--最后一个,禁止逗号!
]

这从视觉上看更明显,也是。缩进可以很容易地查看数组的开始和结束位置。更少的线路噪音。

注意,您需要用逗号分隔每个项目,但要确保最后一项没有尾随逗号。甚至可以这样嵌套数组:

var链接= [
  'http://cuteoverload.com'
  'http://icanhascheezburger.com'
  [一百二百二十“福”]
  'http://pencilsatdawn.wordpress.com'
  'http://apelad.blogspot.com' //<--最后一个,禁止逗号!
]

在那张纸条上,还有一个技巧:向数组中添加一个新项,您可以使用PUP()方法或使用长度财产:

链接。'http://dailyppy.com')链接[链接。长度] = 'http://bigeydeer.wordpress.com'

关联数组-对象管理组织!小马!

一直坚持的一个神话是,javascript有一个神奇的东西叫做关联数组。这些允许您不仅给项目编号,而且给它们命名!您可以找到如下示例:

var链接= 新的 数组)链接[“可爱的超载”] = 'http://cuteoverload.com'链接[“我可以吃奶酪汉堡包”] = 'http://icanhascheezburger.com'链接[铅笔在黎明的] = 'http://pencilsatdawn.wordpress.com'链接[“霍波托比亚”] = 'http://apelad.blogspot.com'

这是最高程度的背叛。这是一个令人困惑的javascript特性,因为你在这里创建的不是一个数组,但一个对象。需要证据吗?做一个警报(链接类型)或尝试警报(链接〔1〕).

对象快捷(文字)表示法-获得花括号。

所谓的关联数组实际上是对象,这意味着您还会发现其他脚本,采取了前面的例子严重,并使用以下替代:

var链接= 新的 对象)链接[“可爱的超载”] = 'http://cuteoverload.com'链接[“我可以吃奶酪汉堡包”] = 'http://icanhascheezburger.com'链接[铅笔在黎明的] = 'http://pencilsatdawn.wordpress.com'链接[“霍波托比亚”] = 'http://apelad.blogspot.com'

我们有太多的重复。对于对象,你有一个对象文字符号作为快捷方式,基本上是用大括号:

var链接= {
  “可爱的超载”  'http://cuteoverload.com'
  “我可以吃奶酪汉堡包”  'http://icanhascheezburger.com'
  铅笔在黎明的  'http://pencilsatdawn.wordpress.com'
  “霍波托比亚”  'http://apelad.blogspot.com' //<——再次,禁止逗号!
}

分号被替换成康瓦塔逗号(快乐)斯图尔特?)(除了最后一个你需要省略的符号)等号变成冒号。如果属性(冒号左边的内容)中没有任何空格,甚至可以去掉引号:

var克里斯= {头发 “红色”年龄 三十二城市 伦敦
}

您可以通过以下方式访问属性对象属性当他们没有任何空间或对象[属性]当它们有空间的时候。例如:

var链接= {
  “可爱的超载”  'http://cuteoverload.com'
  “我可以吃奶酪汉堡包”  'http://icanhascheezburger.com'
  铅笔在黎明的  'http://pencilsatdawn.wordpress.com'
  “霍波托比亚”  'http://apelad.blogspot.com' //<——再次,禁止逗号!
}警觉的链接[“我可以吃奶酪汉堡包”])警觉的链接。臀部斜视)

简单的if-else语句——使用三元符号询问和定义

您可以显著缩短简单的if语句。简单来说,我指的是一个if语句,它指定如下两个值之一:

  var裕桂
  如果城市= = 伦敦){裕桂= “克里斯”
  } 其他的 {裕桂= “埃里克”
  }

再一次,那里有很多重复。三元符号解决了这个问题:

var裕桂=城市= = 伦敦  “克里斯”  “埃里克”

这里有很多等号。也许一些括号会让它更清楚:

var裕桂= 城市= = 伦敦)  “克里斯”  “埃里克”

这是怎么回事?定义变量裕桂给它赋值。然后你有一个声明,在这种情况下,变量的比较城市如果它等于字符串伦敦(===测试值和类型,比==)安全得多。

然后你用问号问这个问题是否正确。冒号左边的选项是条件满足时的答案冒号右边的选项是条件不满足时的答案。任何可能为真或为假的条件都可以放在括号内。

var方向= X<最大值)  “左”  “对”

使用默认运算符提供回退选项

我最不想谈的是双管()默认运算符。当你想确定某个东西是用默认值设置的时候,这个非常有用。下面的结构不应该再出现了:

  var部分=文件。GETeleMyByID“特殊”)
  如果部分){部分=文件。GETeleMyByID“主要”)
  }

再一次,无用的重复,同样可以写为:

  var部分=文件。GETeleMyByID“特殊”) γ文件。GETeleMyByID“主要”)

如果第一个没有定义,第二个被指定为节的值。

谢谢你的时间!

我希望这有助于“普通的开发人员”理解如何在不降低可读性的情况下缩短JS。如果你想要更多关于这些商品的详细信息,看看道格拉斯·克罗克福德关于这件事的文章: