JavaScript 的命名空间并不是真正的命名空间, 只是在脚本内部创建一个封闭的小空间, 必须通过特定的空间名称才能对空间内部的代码进行访问, 这样可以防止同名函数和变量发生冲突, 也可以更方便地管理代码, 就像 .NET 的命名空间 (namespace) 和 Java 的包 (package) 一样.
为什么需要命名空间?
1. JavaScript 是不会禁止你重复定义函数和变量的, 但他只会使用最后定义的版本, 也就是说, 这将导致前面的失效, 令系统出错. 比如, $(id) 是最常用的, 也许你会毫不犹豫的在自己的脚本上定义这个函数, 但是当你用上 prototype, 你就会发现, 它和 prototype 的函数冲突, 并导致你的页面跑不动了. 怎么办? 这时候就需要命名空间了. 我发布的主题里面的 JavaScript 都有用命名空间包起来的, 我这么做就是为了防止和某些插件的代码发生冲突.
2. 如果你要为自己准备一套常用的函数, 或者自己搭建一个 framework, 那这个方法可以使你的代码维护起来更加方便.
Read more...
JavaScript
Book, JavaScript, Tutorial
说到 JavaScript 的初始化装载, 可能 onload 是被立刻想到的方法. 但很遗憾, 这是最坏的选择, 我以前也一直犯过这样的错误. 为什么说它不好呢? 因为 onload 不是在 document 加载完成的时候调用的, 而是在页面所有元素 (包括图片等) 全部加载完成才会调用. 也就是说, 如果你的页面上有个尺寸很大的图片, 下载需要很长时间, 那么你的脚本就一直不能被初始化, 直到图片装载完成, 严重影响用户体验.
幸运的是, 在 W3C 中有个叫 DOMContentLoaded 的事件, 故名思意, 它会在 DOM (文档对象模型) 被加载完成的时候触发. 那么我们就可以通过下面的方法调用初始化脚本的方法了.
1
| document.addEventListener("DOMContentLoaded", init, false); |
Read more...
JavaScript
JavaScript, Tutorial
难度: ★
所谓 @ 回复, 就是在评论者名字前添加 '@' 标记, 不涉及评论内容的, 生成带链接的代码并追加到评论输入框中.
我不喜欢那种结构复杂的, 难以维护的嵌套回复, 而是经常使用 @ 回复. 为此我写了个 JavaScript 脚本, 其中包括了这部分的处理.
Read more...
WP Trick
JavaScript, Theme, Tutorial, WordPress
难度: ★★★☆
滚动菜单, 顾名思义是以滚动的方式显示和隐藏菜单的. 其实跟淡入淡出菜单和滚动菜单的原理是一样的, 前者是在触发事件的时候改变菜单的透明度, 而后者则是改变菜单的高度. 那为什么后者的处理难度会比前者高呢? 这正因为菜单高度的处理比透明度有更高的技巧要求. 下面我们就讨论一下该如何处理, 并难在什么地方.
这里只列出与淡入淡出菜单实现有所不同的地方, 对于以前说过的问题不再重复. 如有疑惑请先查看之前几篇相关的文章, 也欢迎在此留言交流.
这是效果演示
Read more...
WP Trick
JavaScript, Theme, Tutorial, WordPress
难度: ★★★
有前两篇关于导航菜单的基础, 这个淡入淡出效果会显得比较简单. 菜单我们已经做出来了, 下拉效果我们已经出来了, 说白了就是要在这些基础上加一个渐变效果而已, 或呈现, 或褪去.
本文只对渐变处理作展开讨论, 其他请参考前两篇关于导航菜单的文章, 文章链接你可以在本文相关话题中找到.
这是效果演示
Read more...
WP Trick
JavaScript, Theme, Tutorial, WordPress
难度: ★★☆
前一篇已经讨论过如何创建 WordPress 导航菜单, 这回我们继续导航菜单的话题, 创建一个二级导航菜单. 如果你还不知道如何创建一个简单的导航菜单, 建议你先看看上一篇, 相关内容本文不再重复.
原本计划分两种方法来讨论这个二级导航菜单, 即 CSS 方式和 JavaScript 方式. 但由于我不知道 CSS 的该从何说起, IE 处理相当麻烦, 并且它与后面的话题也没有太多承接关系. 所以决定撤掉那个话题, 现在只讨论以 JavaScript 实现二级导航菜单. 你很快就能发现写 JavaScript 会比较快乐的. 
何为二级导航菜单?
二级导航菜单就是类似桌面软件的菜单栏, 当鼠标移动到某一菜单时, 就会显示该菜单的菜单项, 也就是可以看到二级分类. 目前在 Web 上的应用已十分广泛, 今天我刚注册了一个网易的 yeah.net 邮箱, 里面有三级菜单呢. (请不要贪婪, 三级已经是应用极限了)
这是效果演示
Read more...
WP Trick
JavaScript, Theme, Tutorial, WordPress
经过前面几回, 我们已经将想法作成了一个简单的插件, 先回顾一下吧:
将 Blogroll 分为两栏 (1)
将 Blogroll 分为两栏 (2)
将 Blogroll 分为两栏 (3)
插件的基本功能都实现了, 但它的不足也是显而易见的, 当链接超过 30 个的时候, widget 还是会变得很长. 可能你会想到限制显示数量并采用随机显示, 用公平的方式显示少量链接以达到界面的美观. 但很遗憾, 当你想找到某人的链接时, 可能刷新好几次页面都无法将你想要的显示出来. 所以我们还需要一个功能, 将所有链接都显示出来, 而我们显示所有时不需要重载页面. 翻页? 没必要吧. 我相信你不会有 100 个链接, 假如你有, 你一定会将他们进行分类的.
Read more...
WP Trick
JavaScript, PHP, Plugin, Tutorial, WordPress
如左图, 将测边栏列表分两半, 灵感来源于 Eric Liu.
我是用 JavaScript 来实现的, 其实很简单.
以下是我的思路:
1. 在加载页面的时候进行调整, 但要求 JavaScript 加载失败时不要影响页面布局, 所以 style 控制也应该写在 JavaScript 里面.
2. 以 Blogroll 为例, 获取 Blogroll 的子节点个数, 使两栏中节点个数相等 (奇数时左栏多一).
3. 移除左栏的最后一个节点, 并将它作为第一个节点加到右栏, 直到 "左栏节点个数 - 右栏节点个数 <= 1".
下载请点: (该文件不在提供下载, 此功能可由插件 WP-MulticolLinks 实现.)
Read more...
WordPress
JavaScript, WordPress
