Tag Archive for '前端'

Stylebot Chrome Extension

推荐一个 Google Chrome 插件——Stylebot。简单说来就是一个所见即所得的 CSS 编辑工具,适合前端攻城师和洁癖症患者。

下载地址:

https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjeifoejpgmdaleoha

官方介绍:

  • Stylebot allows you to quickly create and apply custom CSS to websites.
  • It is very easy to use. You pick an element and choose any changes you want to make. You can change the font size, color, margins, visibility and a lot more. The advanced users can also write the CSS manually.
  • Using Stylebot, you can personalize the look and feel of your favorite websites. It is also a great tool to learn CSS by doing and for debugging your own site’s design.

功能特性:

  • 全站 CSS 基本配置 / 高级自定义。
  • 所见即所得、即时保存。
  • 支持右键元素直接点取编辑。
  • 支持同步(虽然还是实验阶段功能),一处编辑处处可用。
  • 提供社会化样式脚本库(stylebot.me),内含大量用户现成脚本可供下载。

Continue reading ‘Stylebot Chrome Extension’

InnerHTML 实现伪 AJax 效果

最近在折腾毕设,希望给开发中的项目增加 Ajax 效果,通过异步加载和视觉反馈,以增强用户体验。

在了解了 Ajax 的原理(果然了解一件事物最好的方式是去了解其运作原理,最好是自己复刻一遍)之后,联想到此前玩 GreaseMonkey 时了解到的 InnerHTML 的用法,自作聪明地琢磨了一个用 InnerHTML 实现 Ajax 效果的简单伪办法

事情是这样的。使用 Ajax,需要掌握 Javascript 编写技能,理解 XMLHttpRequest 对象,并且在与服务器的连接和响应确认上来回折腾。其实从功能实现层面来看,使用 Ajax 的目的无非在于:1)前台动态改变页面内容,以响应用户操作;2)后台处理数据,例如将某个值传递到数据库。

通过 InnerHTML ,稍加转换思路,完全可以另辟蹊径,通过以下淫荡技巧实现:

1)前台动态改变页面内容。这个对于 InnerHTML 而言再简单不过了。tablerowObject.innerHTML=$str 语句就是用来改变页面中某个元素的内部代码。如 document.getElementById(“div1″).innerHTML=”<strong>Hello World</strong>” 就是一个典型的实例。

2)后台处理数据。用 InnerHTML 同样可以实现,办法是 —— iframe!没错,用 InnerHTML 为页面新开一个 iframe(当然长宽调成0可使其隐藏而不显示在页面内),直接 src 到一个负责处理数据的带参数的页面,例如 do.php?action=add&message=aloha 。这个 do.php 负责接收参数并完成处理,比如将 aloha 这个字符串写进数据库。

编写一个简易版 Facebook 的 Like 按钮举例。通过上述方法,编写的思路是:

  • 1)前台用 InnerHTML 将 X people like 中的 X 加 1 (此处 X 可能需事先从数据库读取);
  • 2)InnerHTML 开个 iframe (地址形如 do.php?statue=12345&action=likeadd);
  • 3)编写 do.php,获取参数,最终将数据库中编号为 12345 的这条状态的 like 数量 +1 。

此方法的适用场合:系统架构不复杂,传递的参数不多,对安全性和稳定性的要求不高,以及懒得写 Ajax(比如糊弄毕设这档子事儿) …

前端工程师应该关注的领域【思维导图】

完整大图在这里:http://www.flickr.com/photos/kejun/3114605967/sizes/o/