5月份的杭州区w3c标准化交流会

带着感冒 去了口碑做了次分享，分享的内容是最近刚接触到的并且用的比较爽快的《闭包式js架构》
顺便吐槽一下，这次来的人不多，不知道是不是不太好意思来交流还是怎么了，是不屑么~？，就当交朋友么~ 其实我也很菜的，听了就知道。

以下是我最近在做新系统的时候用到的一种 闭包式js架构 书写方法，大家慢慢看，有些地方似曾相识，说不定有你想要的东西，仅仅是分享，也许又更好的实现方法。

1. 说说闭包

因为这样的架构思想又一些类似 javascript 的闭包概念。所以我在分享的时候做了下闭包的引导。
分享前做PPT的时候特意去百度娘那里看了下关于闭包的知识补习一下。百科
分享的时候因为主要讲的不是闭包所以顺便带过一下，不过会后，似乎有人反而对闭包感兴趣，嘎嘎。真是指哪哪不响哇。

回来又抽空查了下 《javascript 高级程序设计》中的闭包解释，似乎比百度娘上面的更浅显一些，百科上的是一种比较极端的闭包，(有空朋友可以翻阅一下：p56)。 最简单的闭包 就是全局变量。

2. 利用匿名函数解决$冲突

很多朋友应该会碰到过 一个老系统页面里好多js库的情况吧。神嘛 prototype jQuery mootools 会时不时暂用$符号，导致各种冲突。
记得jquery 有个方法是把$让出来。
这里给出一个比较好用的匿名函数 来形成 封闭作用域来实现。 很多jquery 插件就是这样来书写的

(function($){

/***
 * make $ in Closed Scope
*/
$(function(){
    //do something on dom ready
});

})(jQuery);

利用匿名函数把，jQuery 引入匿名函数，这样在匿名函数的作用域里，你就可以自由的使用$了，并且这样也同样试用与其他库。

3. 怎样不污染命名空间

这个问题曾经困扰我挺久的，因为原现公司老系统里遍地都是 全局变量 全局fun，命名空间污染的让人蛋疼菊紧。 =，=

那么经过我哥的教导，就是利用 变量类形式 只占用 一个全局变量。如下：

(function($){

$.namespace('Platform.tms.home');

})(jQuery);

上面的namespace是一个jquery插件用来方便建立命名空间。
其实它就等同于下面这段代码。是不是用插件看起来简单多了。

var Platform = {}
    Platform.tms = {}
    Platform.tms.home = {}

4. 所谓 闭包式 js 架构 前端书写

以上其实都是铺垫啦。
有了命名空间不污染全局变量，有了封闭空间匿名函数不会产生js库间的冲突，两者问题都良好解决。
现在要把两者结合起来，形成现在的 架构形式。代码如下：

/**
 * @ TMS Package
 *
 * @author qilei.weiql
 */
(function($, TMS) {

var util = TMS.util;

})(jQuery, Platform.tms);

从代码里可以看出，我将独立的全局变量类Platform 和 jQuery 引入 匿名函数。
这样做的好处显而易见，就是利用 Platform 搭建桥梁，让 匿名函数内的 资源可以通过 Platform 访问到 其他匿名函数的资源。
简单的说就是类似：一个应用 当它需要用到某组件，那么只要包含某组件js文件进来就可以。

5. 说明下这样书写的好处

好处除了前面说的，避免 命名空间污染，不产生库冲突，同时在封闭作用域内，你可以通过引用将全局变量类冗长的名字简化。如上面的代码中就用TMS 代表 Platform.tms，然后直接使用 TMS.util 来访问 Platform.tms.util，这样看起来是不是就简洁许多。这个就是要懒得有风度的表现^_^
甚至可以直接缓存你需要的组件，如：

var util = TMS.util;

var dialog= TMS.widgets.dialog;

6. 从一个栗子 表现书写心得

(function($, TMS) {

/*************************
 *  Header 头部控制类
 */
var Header = {
	init : function(){
		this._initHover();
	},
	_initHover : function(){
		//do something
	}
}

TMS.home.header   = Header ;

})(jQuery, Platform.tms);

先丢一块代码给大家。上面的代码是渲染一个应用的头部js 文件。
外围代码跟上面差不多。
我的书写方法是 先 新建一个 Header 变量类，里面有一些子方法，如启动方法， 还有其他一切跟header 相关的方法都在里面。
然后将 header 跟 TMS.home.header 对接，便于被其他组件引用， 当然(如果你不像被外接影响，可以不用对接，这样就完全不受影响)

7. 方便的启动函数便于调试

看了上面的那么多是不是发现写了那么多怎么启动。。。 现在就跟你说怎么启动，
上面栗子中header 不是 init() 方法么，这个就是 启动函数用来初始化一些数据以及启动专用。
那么一个应用里又很多区域需要启动那么代码就可以这样写。

(function($, TMS) {

$(function(){
TMS.home.header.init();
TMS.home.cate.init();
TMS.home.slider.init();
});

})(jQuery, Platform.tms);

上面就是对3个模块进行启动操作，就像开关一样，有些人会习惯在 启动函数上添加一些参数神嘛的（类似插件那样），但是这就像是开关一样，开关追求的是一种简洁，讲复杂的东西都放在init()里去吧，会让代码更又层次。
同时 当你需要只对一个模块进行调试的时候，你就只需要注释掉其他两行代码就可以不启动了。是不是很方便。

8. 闭包式的由来

说了这么多，这样的书写方法以及优点，闭包式 的名字 是因为 它的两个特性跟闭包有点相似，一个是 封闭的作用域，另外一个是有一个全局变量类， 从一个封闭的作用域中 能够访问到 外部 全局资源，这个就是类似闭包的概念。

当然这个名字还是我YY出来的，也许它已经又它的学名了，如果又谁知道的话就不要吝啬 分享一下哇^__^

9. 其他一些可以扩展的东西

上面的那么多心得都是在 我哥(笨笨) 虚心教导下产生的，
本来这次分享是直接邀请他来分享的，不过似乎他更忙些。
之后还会分享一些 进阶内容

• a. 目录配置规范，为了让组件更规范，必须又它的目录规范
• b. namespace 命名空间 的命名规范，一套好的命名规范能让整个架构非常又调理
• c. Js 调试，合并方案，因为各个功能应用组件等都是分布在各个js 文件内的，在发布的时候需要又个合并方案，类似YUI

好了这次分享就到这里了，又更好的idea 欢迎 留言 交流学习呢 ^__^

您可能还对这些日志感兴趣

• 乱翻乱教- jQuery 制作N级导航菜单
• 菜鸟级: 标签切换效果 – JQuery实现
• 滚动新闻 – jquery 扩展插件
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件

上面说的 伪异步加载 是咋一看的推测，感觉像是滚动到那里的时候 整一个ajax请求，将下面内容加载进来。
后来在不经意之间看了下源代码发现的。
看下面是商城的源码截图。

从图中可以看出，源码中有很多 textarea 的标签，里面的值就是即将要加载的html，然后就恍然大悟，原来所谓异步加载也可以这样来实现。

分析实现流程

首先是将要加载的html代码 丢进textarea 里，因为此时html 在 textarea 是一直val形式，不会被浏览器解析渲染，所以页面在刚加载的时候只显示第一屏。然后通过计算滚动条的相对偏移(数学问题)，将textarea的val 值添加到html 的dom里 ，因为浏览器是即时解析的，新添加的dom 会被重新渲染，这样新加的html 就显示出来了。这个就是所谓的lazy load ：伪异步加载。

为什么要用textarea ?

其实这个东西估计是 因为html 标签的限制，这个方法的设计之初，设计师想将 硕大的html数据 缓存在一个不会被解析标签里，然后就发现textarea 刚好符合期望。

为什么不用ajax ?

因为数据不需要验证，不是时变性的数据，再者使用ajax 会增加http请求，并且维护性不好。
目前淘宝的 TMS 后台系统 都是模版化引擎，使用ajax 会对 模版化 引擎 产生冲突 以及 维护成本高等。

如何实现？

从实现流程来讲，这个功能实现起来没什么难度，唯一有难度的是，怎样把这个功能做成一个通用的模块，简易添加 class 以及配置就可以实现等来提高重用特性。

有合弊端

优点那么多，缺点又怎样呢·？
SEO：存在textarea 里的数据 能不能被 搜索引擎抓取呢？ 这个我最近在自己blog里研究一下。
web标准： 这样的做符合web标准么？将html代码放在textarea来实现 飞鱼：只是一个标准而已。

好了 打完收工~~~

===============2011年4月29日= 更新===================

SEO 的影响

我尝试着在项目中的list 页面中使用了这样的textarea 形式加载方法：(以下搜索引擎主要以google引擎来分析， 度娘V5 玩不起)
发现 seo 是能抓到 textrea 中的内容的，
1. 研究有发现 textarea 里的内容会被google搜索引擎当作大段内容形式来表现(google 会以为textarea 里的内容是‘正文’ 的错觉) ，如果是类似内容页，建议将textarea 部分放在内容部分之后，这样能让google 将真正的内容部分抓去当作正文。
2. textarea 里的html 代码也会因此暴露出来 通过查看抓取页面(site:xxx.com)会发现(搜索结果的表述里会有html 代码出现) 因为google 认为这是内容而不是代码。
3. 因为以value 形式存在于 textrea 里，于是这里面的链接 会被google直接跳过， 当然有好处有坏处，好处是 google 可以快速得跳过这些链接 加快网页抓取，坏处是 会错过这些 链接(只要做好sitemap 就能避免这样的问题)

以上： 如果有 好的idea 欢迎交流·· ^__^ 俺们都是菜菜鸟

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• js跨域问题
• 判断输入的字符是否为中文
• 乱翻乱教- jQuery 制作N级导航菜单
• 乱翻乱教-使用JS输出HTML串最快的方法

jQuery 制作仿DNF首页导航菜单效果

作者：飞鱼原创
飞鱼: 偶然发现这个东东很实用，就手把手写了个。
DNF首页的那只导航，似乎纯手写的。我这次要写的是用jquery来制作，制作代码非常极其简单，看了就知道怎么做(老鸟可以绕过哈，谁让咱们都是菜鸟 = =)

最终效果图

支持N级导航(添加子导航无需另外添加代码)。

html代码

首先当然是html啦，代码如下，没有什么技术含量，

<div class="menu" >
    <ul>
      <li>
        <a href="#">游戏介绍</a>
        <ul>
          <li><a href="#">升级体验</a></li>
          <li class="sub">
            <a href="#">游戏2</a>
            <ul>
              <li><a href="#">天赋系统</a></li>
              <li><a href="#">升级体验</a></li>
            </ul>
          </li>
          <li><a href="#">故事背景</a></li>
          <li><a href="#">职业介绍</a></li>
        </ul>
      </li>
      <li><a href="#">天赋系统</a></li>
    </ul>
  </div>

css代码

因为是仿dnf官方首页导航，所以样式也多少参考了一下它的样式，(图片我也给扣过来了 嘎嘎)

.menu{
  height:27px;
  float:left;
  background:#1d1d1d url(http://ossweb-img.qq.com/images/dnf/web200812/box_bg1.gif) repeat;
  border:2px solid #000;
}
.menu ul{
    border:1px solid #3f3f37;
    height:25px;
    float:left;
}
.menu li{
  float:left;
  position:relative;
  text-align:center;
  width:70px;
  background:url(http://ossweb-img.qq.com/images/dnf/web200812/img.gif) no-repeat -480px 9px;
}
.menu li .sub{
  background:url(http://ossweb-img.qq.com/images/dnf/web200812/img.gif) no-repeat -420px 9px;
}
.menu li a{
  color:#b29056;
  display:block;
  height:25px;
  line-height:25px;
}
  .menu li a:hover{
    color:#fff;
    text-decoration:none;
  }
  .menu li ul{
    position:absolute;
    top:25px;
    left:-1px;
    display:none;
    width:68px;
    height:auto;
    float:none;
    border-bottom:none;
    background:#1d1d1d url(http://ossweb-img.qq.com/images/dnf/web200812/box_bg1.gif) repeat;
  }
  .menu li ul a{
    display:block;
    height:25px;
    line-height:25px;
  }
    .menu li ul a:hover{
      background:#070707 url(http://ossweb-img.qq.com/images/dnf/web200812/r_linkbg.gif) repeat;
    }
  .menu li ul li{
    position:relative;
    width:68px;
    border-bottom:1px solid #3f3f37;
    background:none;
  }
  .menu li li ul{
    position:absolute;
    top:-1px;
    left:68px;
  }

js代码

这个代码，可以说是相当滴简单，只用了一只语法(.hover)。
说明一下代码的用处细节：(菜鸟专用，老鸟请跨过去 = =)

$(document).ready(function(){
  $('.menu li').hover(  //给menu 下的所有li 添加 hover 动作
    function () {   //鼠标在li 上时让 li 下的ul 显示出来
      $(this).children('ul:first').css('display', 'block');
    },
    function () {  //鼠标在离开li 上时让 li 下的ul 隐藏掉
      $(this).children('ul:first').css('display', 'none');
    }
  );
});

上面代码中我用:first 来只取第一个来提高效率(不知道我这样做对不对，感觉上应该是对的 – -)。

PS：代码演示，因为最近用的都不是自个儿的电脑，FTP上不去，就委曲下自己 尝试一下呢，效果还是不错的。

PS2：可以在这基础上增加其他功能：比如鼠标离开后，过半秒中导航才消失，这个需要用到setTimeout 函数来解决。有空我写个。^_^

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 菜鸟级: 标签切换效果 – JQuery实现
• 滚动新闻 – jquery 扩展插件
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件

最近开始狂啃JS，因为上个月去淘宝UED撞墙了，因为那边的“叔叔”们，一直都强调技术，特别是JS @_@ 。然后就被派遣回来了。

飞鱼：如果你跟我有同样遭遇的话，那么，一起学JS吧 嘎嘎···

得···切如正题。
=========== 华丽的分割线 =============

这文章是james.padolsey那看得，觉得挺有启发的，于是就翻译过来给大伙看看。

使用JS输出HTML串最快的方法

作者：James Padolsey
原文地址：猛击此链接(英文强悍的可以参考原文)
当需要将一大堆数组转换成固定格式的html，以下有几种实现方法。
注意：当然你可以直接手动将数组转换成html，如果那样的话，你就很有前途了^_^

方法一，拼接法

这种写法虽说不是最慢的，但是用的人却是最多的。额，貌似我以前都这么用

var arr = ['item 1', 'item 2', 'item 3', ...],
    list = '';

for (var i = 0, l = arr.length; i < l; i++) {
    list += '<li>' + arr[i] + '</li>';
}

list = '<ul>' + list + '</ul>';

就是使用for循环将每个数组使用字符串拼接起来的意思。

以后千万不要用这种啦，又丑又慢=。=

方法二，堆栈法(我起的名，=。=)

var arr = ['item 1', 'item 2', 'item 3', ...],
    list = [];

for (var i = 0, l = arr.length; i < l; i++) {
    list[list.length] = '<li>' + arr[i] + '</li>';
}

list = '<ul>' + list.join('') + '</ul>';

稍微比拼接法快些，但还不够完美。这次的代码使用了.join 方法 比上一种稍微高级了点，但是还是有万恶的for循环

方法三，圣杯(应该是说最佳办法吧)

var arr = ['item 1', 'item 2', 'item 3', ...];

var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

看过后面的测试结果，你就会相信我说的，这是最快的方法。当然你也可以最近去测试一下。
作者很有自信，说这方法是最快速的。因为使用了join方法并且去掉了for循环，代码相当简洁，相比我以前老用的方法一，不禁大叫：oh 屎~~

浏览器测试

有图有真相

原文我就不翻译了，我的个人水平有限，从上图可以看出，大部分浏览器在处理以上代码时，第三种方法相对最快，但是chrome浏览器优点变态，估计是他独有的js 引擎在起作用吧。果然BT。

======补充======

原文下面评论提出了些问题：说如果数组里么有东西的话就只输出UL会有问题，说要使用三元式来解决。

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• js跨域问题
• 判断输入的字符是否为中文
• 乱翻乱教- jQuery 制作N级导航菜单

首先你得确保你是菜鸟级别的.然后不排除有大鸟也想看看.
那么都一起往下看吧. 嘿嘿.
最近在做东西的时候自己写的,相当之菜鸟, 稍微的牛叉的, 就是用了jquery.

写作的过程还是蛮享受的, 不知道jquery UI 里面有么有这个效果, 有空 咨询一下我哥, 把这个做成一个插件就牛逼了.^_^

有更好的实现方法可以tell  me 呢.

标签切换效果

• 1.第一步确保你的代码里有加载jquery裤~~~^_^
• 2.然后很傻逼的将下面的代码复制到你的html页面内.

  <div id="gro-popular" class="mod-gro-light">
    <div class="title hasTab"> <!-- hasTab 激活tab功能 -->
      <h2>Title</h2>
      <ul class="tabs"> <!-- tab_1 tab_2,以此类推,可以是其他名字, 确保统一,以便重用 -->
        <li class="tab_1 current"><a href="#">Tab1</a></li>
        <li class="tab_2"><a href="#">Tab1</a></li>
        <li class="tab_3 unable"><a href="#">Tab2</a></li>
      </ul>
    </div>
  <div class="content tab_1">content1</div>  <!-- tab_1 跟上面的要对应才可显示出来,不然会显示不出来^_^ -->
  <div class="content tab_2">content2</div>
  </div>

• 3.然后新建个js文件,或者直接在html上加这个js也可以(不推荐,很傻逼)粘下面的一段代码

  $(document).ready(function(){  // jquery语法 加载完毕后运行
  $('.hasTab li a').click(function(){  //('.hasTab li a') 给li下的 a 标签添加动作.
      var cur = $(this).parent('li');  // 获取 当前 li 对象 以便 添加 current 样式
      var tab = $(this).parent('li').siblings('li'); // 获取 所有同辈 li 用以 清除 current 样式
      var content = $(this).parents('.title:first').siblings('.content'); // 获取 包含内容的所有 content 对象
      if(!cur.hasClass('current') && !cur.hasClass('unable')){ // 是否 是 选中状态current 或者 无用状态 unable
  var attr = '.'+ cur.attr('class'); //获取 li 的class名 如: tab_1
        tab.removeClass('current'); //清除 current 样式
        cur.addClass('current'); //添加 current 样式
        content.hide(); //隐藏所有content
        content.siblings(attr).show(); //显示 目标 content
        return false; //返回 false 使a 属性无效
      }
      return true; //返回 true 使a 属性有效 保留退路.
    });
  });
  

• 4.然后… 对然后还有样式,不然傻逼一样就显示一个骨架怎么看. 我找找.

  /****** mod-gro-light ******/
  
  .mod-gro-light{
    background:#fff;
  }
  .mod-gro-light .title{
      height:30px;
  }
    .mod-gro-light h2{
      display:none;
    }
    .mod-gro-light .tabs{
      height:30px;
      margin-bottom:-1px;
      position:relative;
    }
    .mod-gro-light .tabs li{
      float:left;
      margin-top:5px;
      height:25px;
      background:#ededed;
    }
      .mod-gro-light .tabs li a{
        float:left;
        padding:3px 8px 0;
        line-height:21px;
        color:#5e5d5d;
      }
      .mod-gro-light .hasTab a{
        *hide-focus: expression(this.hideFocus=true);
        outline:none;
      }
  
      .mod-gro-light .tabs li.current{
        margin-top:0px;
        border:1px solid #d6d6d6;
        border-bottom:0px;
        background:#fff ;
        padding:3px 3px 0;
    	  height:27px;
      }
      .mod-gro-light .tabs li span,
      .mod-gro-light .tabs li.current a{
        float:left;
        border-top:2px solid #dbdbdb;
        margin:0;
        padding:3px 5px 0;
        font-size:14px;
        line-height:22px;
        font-weight:bold;
        color:#595959;
      }
      .mod-gro-light .tabs li span{
        font-weight:bold;
        padding:0px 4px 0;
      }
        .mod-gro-light .tabs li strong{
          margin:0 3px;
          color:#ff0050;
          font-size:18px;
        }
  
  .mod-gro-light .content{
    background:#fff;
    border:1px solid #d6d6d6;
    _height:160px;
    min-height:160px;
    padding:4px;
  }
  
  

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 乱翻乱教- jQuery 制作N级导航菜单
• 滚动新闻 – jquery 扩展插件
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件

相关地址: Chrome Experiments

如他们的网站名,请用chrome 打开浏览. 不然体会不到效果.

还有一个比较有意思的 就是google 页面 全掉下来的效果, 很震撼.

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• js跨域问题
• 判断输入的字符是否为中文
• 乱翻乱教- jQuery 制作N级导航菜单

$.fn.extend({
  Scroll:function(opt,callback){
    //参数初始化
    if(!opt) var opt={};
    var _this=this.eq(0).find("ul:first");
    var line=opt.line?parseInt(opt.line,10):1, //每次滚动的行数，默认为一行
        speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒）
        timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
    if(line<=0) line=1;
    var upHeight=0;
    //滚动函数
    getUp=function(){
      up=0;
      for(i=0;i<line;i++){
        up += _this.find('li:eq('+i+')').height();
      }
      up = 0-up;
      return up;
    }
    scrollUp=function(){
      upHeight = getUp();
      _this.animate({
        marginTop:upHeight
      },speed,function(){
        for(i=1;i<=line;i++){
          _this.find("li:first").appendTo(_this);
        }
        _this.css({marginTop:0});
      });
    }
    //鼠标事件绑定
    _this.hover(function(){
      clearInterval(timerID);
    },function(){
      timerID=setInterval("scrollUp()",timer);
    }).mouseout();
  }
})
})(jQuery);

然后 慷慨的老哥 给我编了个扩展, 相当牛逼, 我还么有仔细分析过这个代码, 但是用起来非常好用,比预期的好.
代码如下:

(function($) {
  $.fn.scroll = function(options) {
    options = options || {};
    this.css('overflow', 'hidden');
    var scroll = (function(self) {
      return function() {
        if (self.data('scroll_stop')) {
          return;
        }
        var li = self.find('li:first');
        var t = parseInt(li.css('marginTop')) || 0;
        li.animate({
          'marginTop': (t - li.outerHeight()) + 'px'
        }, options.speed || 'slow', function() {
          self.append(li);
          li.css('marginTop', t + 'px');
        });
      };
    })(this);
    setInterval(scroll, options.delay || 3000);
    this.hover(function() {
      $(this).data('scroll_stop', true);
    }, function() {
      $(this).removeData('scroll_stop');
    });
  };
})(jQuery);

使用方法是: 把上面的代码载入到页面然后用下面的代码调用.
$('id').scroll(); //常用 可调参数 有speed:速度; delay:滚动时间


目前是1.0版本, 实现效果还不错,主要是可以自动判断当前:first 的高度 自动调整. 解决了其他滚动js 时,因为 高度问题产生的抖动现象.

之后打算加些其他功能, 如 : 滚动多行

=====2009年5月11日更新======
飞鱼：演示地址

PS: 老哥 不是做程序员 真浪费丫“` 跑去开淘宝店

给大家介绍下 他的 淘宝店 吧“ 杭州包包专卖

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 乱翻乱教- jQuery 制作N级导航菜单
• 菜鸟级: 标签切换效果 – JQuery实现
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件

如果你真的认为自己是一只小菜鸟的话，请跟着我先看完此书，很有效果。
就像豆瓣上的评论一样。非常平易近人的解释了DOM(Document,Object,Model)理论, 把web的树形结构分析得有胸有腰.

里面的几个例子非常有实践性，可以自己去做做看。

我最喜欢作者所强调的预留退路这一理论，非常帅气，也非常之有道理，看完之后发现自己无论在js还有在css方面都有比较大的突破。

有兴趣去看看吧。

PS：此书最好借阅，记点笔记什么的，就可以了因为很薄，没有核心技术，就像丁大哥说的：不值得买

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• js跨域问题
• 判断输入的字符是否为中文
• 乱翻乱教- jQuery 制作N级导航菜单

这个太强悍了,javascript 实现的 3D效果(链接在此), 推荐只用除了ie 以外的浏览器看, FF运行起来 稍微有点停顿, google chrome 这次可happy了,相当流畅. 锯齿效果还是非常明显,但是相信未来的web 3D游戏,就要来临了, 又是一个灰常吃cpu 的东东.

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• js跨域问题
• 判断输入的字符是否为中文
• 乱翻乱教- jQuery 制作N级导航菜单

关于本学期退补选的紧急通知

作者：系统管理员
各位同学：
数字化部教务系统近期升级后，出现与ie浏览器7.0版本不兼容的问题，导致使用ie 7.0的同学无法
在网上进行退补选(网上选课下拉菜单不能显示)，数字化部正在协调处理。请不能进行退补选的同学换
用ie浏览器6.0版本的机器进行退补选操作，也可到教务处指定机房退补选（机房全部安装ie6.0)。
特此通知！
教务处
2009.2.23

是很强大，网上选课下拉菜单不能显示 应该是个js 问题，排查应该会很快，而且应当说ie7对js的支持更佳，唯一的解释是，css代码错误，或者是js 调用出错。

只怪，现在大学里都没开前端的课程，咱们学校(也是电子类)貌似还在教table，js之类的更是升华到了java级别。殊不知js跟java是远亲关系，虽然都是同个妈生的。

您可能还对这些日志感兴趣

• dom属性 contenteditable=”true” 容器里的一些表现特性心得
• position:absolute 的一些兼容心得。
• IE6 reflow bug 经验因素收集
• zoom:1 引起的bug 一则
• vertical-align 图片文字水平对齐分析