开发学院网页设计JavaScript Javascript乱弹设计模式系列(4) - 组合模式(Comp... 阅读

Javascript乱弹设计模式系列(4) - 组合模式(Composite)

 2010-09-14 13:37:28 来源:WEB开发网   
核心提示: main_container为一个div层的id,这里代码就不多说了,Javascript乱弹设计模式系列(4) - 组合模式(Composite)(5),一看就看得懂的,当然实现这个菜单还是有不少方法的,这样该菜单就兼容了IE7以下版本的浏览器,总结 该篇文章用Javascript设计组

main_container为一个div层的id,这里代码就不多说了,一看就看得懂的。

当然实现这个菜单还是有不少方法的,而我这肯定不是最优的,这里我只是提供一个利用组合模式的思路而已;

如果按照常规,你可以把MenuItem都整合到Menu上,即MenuItem都改为Menu,这样的代码,你是不是更喜欢点呢?

这个就留给大家自己研究吧!

最后,说下由于文中实例的菜单样式采用li:hover的方式来弹出下级菜单,由于这个方式对于IE7以下版本是无效的,所以这里引用了cssfriendly开源项目中的两个JS文件,MenuAdapter.js和AdapterUtils.js,所以把它们放进项目中引用进来,这样该菜单就兼容了IE7以下版本的浏览器。

总结

该篇文章用Javascript设计组合模式的思路,实现一个菜单实例。

相关系列文章:

Javascript乱弹设计模式系列(4) - 组合模式(Composite)

Javascript乱弹设计模式系列(3) - 装饰者模式(Decorator)

Javascript乱弹设计模式系列(2) - 抽象工厂以及工厂方法模式(Factory)

Javascript乱弹设计模式系列(1) - 观察者模式(Observer)

Javascript乱弹设计模式系列(0) - 面向对象基础以及接口和继承类的实现

上一页  1 2 3 4 5 

Tags:Javascript 乱弹 设计模式

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接