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

核心提示： 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) － 面向对象基础以及接口和继承类的实现