Clovery

流传于网络的视频，国外的攀爬车手，Danny MacAskill展现了极限运动的艺术之美，自由飞翔的灵魂，感动于极限带给人的那种自由。开始努力，在现实中寻找一种可以寄托的兴趣。现实的樊笼呆久了，心会渐渐死掉的，收拾行囊，开始出发。 阅读更多

Resig在2008年在其博客中介绍过HTML5的data-属性，现如今HTML5在如火如荼地推广，似乎国内的技术有些延迟，这篇博文可以在这里找到。 data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过getAttribute方法获取。ppk提到过使用rel属性，lightbox库推广了rel属性，HTML5提供了data-做替代，这样可以更好地使用自定义的属性。 <div data-author="david" data-time="2011-06-20" data-comment-num="10" data-category="javascript"> .... </div> 上面HTML代码提供了单个文章所拥有的一些属性。通过JS代码可以获得这些自定义的属性。 var post = document.getElementsByTagName('div')[0]; post.dataset; // DOMStringMap post.dataset.commentNum; // 10 需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 并不是所有的浏览器都支持.da » » »阅读更多

JS中没有类的概念，OO中的类在JS中通过对象来实现，而OO中的继承机制则是透过JS中的原型继承来模拟。 var myObj1 = {}; myObj1.prototype = {}; myObj1.prototype // Object myObj1的prototype属性指向了一个空对象，控制台输出myObj1.prototype是拥有属性为__proto__的对象，该对象是Object.prototype的一个引用,即：myObj1.prototype.__proto__ == Object.prototype。 var myObj2 = {}; myObj2.prototype = { length: 0, splice: [].splice }; myObj2.prototype； // [] Object.prototype.toString.call(myObj2.prototype); // "[object Object]" myObj2的原型中多了几个数组对象拥有的属性，此时myObj2.prototype返回的是一个[]，虽然是像个数组，但不是完全意义上的数组，因为用toString调用的时候，返回的的确是一个对象，而不是一个数组。 jQuery中运用了这样的机制，不太明白究竟是什么原理。 阅读更多

效果类似于HTML标签的title效果，不过标签的title属性依赖于系统边框，可控制性不强。要实现这种效果，可以使用JS或者CSS，不过个人感觉如果CSS能够完成的效果就不要依赖于JS，避免不必要的性能损失。 涉及到CSS的知识很简单，:hover伪类和定位(position)。需要注意的是：IE6中除了A标签，其他的标签都不支持:hover伪类属性，这种情况下必须用JS实现类似的效果。具体来说，如果浏览器是IE6，那么鼠标移到目标元素的时候，给其添加.hover类，移走的时候则移除.hover类。 首先来看一下HTML结构。 <ul class="js-engine"> <li rel="chrome"> <span>Chrome: V8</span> <p>The V8 JavaScript engine ... </p> </li> <li> <span>Firefox: JaegerMonkey</span> <p>JägerMonkey (also JaegerMonkey) ... </p> </li » » »阅读更多

很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。 创建引用脚本。 // Filename: functions.php <?php function now() { return time(); } ?> 调用函数。 // Filename: call_now.php <?php require 'functions.php';   Reflection::export(new ReflectionFunction('now')); // Function [ function now ] { @@ H:\www\functions.php 2 - 4 } ?> 阅读更多

不同的渲染引擎提供了不同的方式来获得文档的编码类型。检测代码很简单，只是FireFox有点与众不同。 var docCharset = document.charset || document.characterSet; alert(docCharset); document.charset Chrome、IE、Opera、Safari document.characterSet Firefox 需要注意的是: Firefox，Chrome返回大写的字符编码，其他的浏览器返回小写的。针对中文的文档编码时，不同的浏览器会区别对待，例如gb2312，Chrome和Opera会返回gbk。 阅读更多

这四个方法是Prototype库中提供的非常实用的工具方法。简单的来说明一下它们的适用范围。 $A是把一个可迭代的的类数组转换成数组的形式，说是转换，实际上是把该对象拷贝到一个临时数组中，并返回该数组。 $w是创建数组对象的快捷方式，只接收一个空格分隔的字符串参数，内部调用split方法处理字符串，返回数组。 $H将JS原生对象转换成Hash对象，JS对象本身就是一个类似于Hash键/值对的容器。 $R创建一个ObjectRange对象，该对象是Prototype扩展的对象，类似于Ruby的Range类。 Prototype使用这个方法对js进行扩展，在其上添加了许多有用的方法。个人感觉Prototype库很多东西都是从Ruby那里学习过来的，基于JS语言本身的灵活性，这样扩展起来的确很有效果。下面看一下这几个函数该如何使用。 $A会把数组和类数组都转换成数组，Prototype对原生的Array对象进行了扩展，所以这样转换之后会有更多的方法可供使用，似乎比较方便。 document.getElementsByTagNa » » »阅读更多

Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。 Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7大类 34 条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。 其中内容部分一共十条建议: 一、内容部分 1. 尽量减少HTTP请求 2. 减少DNS查找 3. 避免跳转 4. 缓存Ajxa 5. 推迟加载 6. 提前加载 7. 减少DOM元素数量 8. 用域名划分页面内容 9. 使frame数量最少 10. 避免 404 错误 1、尽量减少 HTTP 请求次数 终端用户响应的时间中, 80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash 等。通过减少页面中的元素可以减少 HTTP 请求的次数。这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化页面设计。 那么有没有一 » » »阅读更多

现代视窗编辑器一般都有列出文档功能，毕竟在文档和编辑器之间来回的切换会浪费很多的时间，VIM本身没有提供列出文档的功能，好在VIM拥有众多的插件支持，NERDTree便是一款在文件系统导航的插件，该插件可从VIM或github nerdtree获取。 下载完成之后，解压文件会有如下目录和文件。 其中最主要的是plugin文件夹下的NERD_tree.vim文件，将该文件拷贝到主目录下的.vim/plugin文件夹中。 $ tar -zxvf scrooloose-nerdtree-4.1.0-28-g1dd345c.tar.gz $ cd scrooloose-nerdtree-1dd345c/ $ cp plugin/NERD_tree.vim ~/.vim/plugin/ 拷贝该插件的文档 $ cp doc/NERD_tree.txt ~/.vim/doc. 这样插件已经安装完成，并不需要其他的配置，启动VIM的时候，默认是不会激活该插件的，如要在命令模式下键入。 : NERDTree 此时所看到的VIM界面是分成左右两部分视窗，左边是文档树，右侧是当前正在编辑的文件。 一些常用的命令网络上已有涉及，下面是对应的快捷方 » » »阅读更多

请告诉我，你为什么这样说？你的观点是什么？为什么你认为是这样？这样做的依据所在？很多时候，总是忘记了问为什么，当想要寻根究底时，因为自己或者外界，最终的结果往往是被打断。与人很难交流，问题不是针对某个人，但是你一旦说别人的不是，他人立马改变探讨的态度，变得尖酸刻薄起来，其实大可不必这样。毕竟人只有在交流中才能获得进步，如果无法交流的团队，后果将会是一团糟。 记得开发中遇到这样一个问题，关于HTML代码的无意义的空标签，有些是为了给CSS渲染页面效果，有些是为了清除浮动。 原来的结构 <div> <div class="clearfix"></div> </div> 目的等同于下面 <div class="clearfix"> </div> .clearfix:after { content: '.'; display: block; height: 0; clear: both; visibility: hidden'; } 这个空标签用来清除父类的浮动，但程序开发，改模板的时候，这样的代码很容易被误删掉。 » » »阅读更多