问一下天猫首页的是如何模块化组织代码的？

[zhoukekestar]

这些都是异步加载填充进去的。 请问，这些模块是如何组织的，我大概能想到的是，模块写好之后，都放服务器上，然后调用的时候，combo模块，模块中又自带模板。然后请求模板数据，之后再render成页面。 我现在的页面大概我想的这样写的，不过不是很确定，想问一下具体细节和实现，这个解决方案是怎样的？谢谢大神了~

[frankjunqi]

这个是天猫的h5页面吗？还是天猫客户端的代码呢？

[zhoukekestar]

天猫h5的，想看看天猫在网页组件化方面的经验，参考参考，我也有看polymer，还有其他一些组件化的实现，不太满意，想多参考些。

[darrenCoding]

逻辑在这个js里https://g.alicdn.com/??zebra-pages/fpm6/6.0.25/m/js/index.js,zebra-pages/fpm6/6.0.25/m/js/mods/header.js,zebra-pages/fpm6/6.0.25/m/js/mods/util.js,zebra-pages/fpm6/6.0.25/m/js/mods/category.js,zebra-pages/fpm6/6.0.25/m/js/mods/search.js,zebra-pages/fpm6/6.0.25/m/js/mods/my.js,zebra-pages/fpm6/6.0.25/m/js/mods/datalazyload.js,zebra-pages/fpm6/6.0.25/m/js/mods/wonderful.js,zebra-pages/fpm6/6.0.25/m/js/mods/bottom-loader.js,zebra-pages/fpm6/6.0.25/m/js/x/wonderful-render.js,zebra-pages/fpm6/6.0.25/m/js/x/wonderful.js,zebra-pages/fpm6/6.0.25/m/js/mods/x-runtime.js,zebra-pages/fpm6/6.0.25/m/js/x/wonderful-item-render.js,zebra-pages/fpm6/6.0.25/m/js/x/wonderful-item.js,mui/tangram/4.0.11/layout/type5/index.js,mui/tangram/4.0.11/layout/type5/x/index.js,mui/tangram/4.0.11/x-runtime.js,mui/tangram/4.0.11/layout/type10/index.js,mui/tangram/4.0.11/layout/type10/x/index.js,mui/tangram/4.0.11/layout/type11/index.js,mui/tangram/4.0.11/layout/type11/x/index.js,mui/tangram/4.0.11/layout/type2/index.js,mui/tangram/4.0.11/layout/type2/x/index.js,mui/tangram/4.0.11/layout/typeAsync/index.js,mui/tangram/4.0.11/layout/typeAsync/x/index.js,mui/tangram/4.0.11/component/type1/index.js,mui/tangram/4.0.11/component/type1/x/index.js,mui/tangram/4.0.11/component/type2/index.js,mui/tangram/4.0.11/component/type2/x/index.js,mui/tangram/4.0.11/component/type33/index.js,mui/tangram/4.0.11/component/type33/x/index.js,mui/tangram/4.0.11/component/type3/index.js,mui/tangram/4.0.11/component/type3/x/index.js,mui/tangram/4.0.11/component/type39/index.js,mui/tangram/4.0.11/component/type39/x/index.js,mui/tangram/4.0.11/component/type25/index.js,mui/tangram/4.0.11/component/type25/x/index.js,mui/tangram/4.0.11/component/type41/index.js,mui/tangram/4.0.11/component/type41/x/index.js

[zhoukekestar]

这个。。。我大概猜了一下： 总的思路我大概是知道的，我想要了解的是，他们是怎么组织组件代码的，现在我借鉴polymer的做法，大概的做法是这样的： github地址：https://github.com/zhoukekestar/modules/tree/master/src/webcom 不知道这样的做法好不好，有没有其他可以借鉴的地方，然后提升一下。

[suprise]

Hi，我是天猫首页的前端岳渊。 先简单说说，我们主要是将页面拆解为：模块、布局、组件三个部分。 模块（业务模块）其实只是每一块的大框，每一模块具体是由布局和组件组合而成。 比如： 首页最上面的轮播的布局是一排一个，组件是轮播组件。 轮播下面的10个icon的布局是一排五个，组件是上图下文组件。 布局和组件可以自由组合的来实现更多的效果，之所以实现这一套动态化布局机制，主要是为了应付频繁的需求变更（服务端改改配置就好啦）。 当然，实现这一套机制还有很多细节考虑，比如：性能、埋点、可扩展性、依赖技术选型等等，更多内容，本周将会产出一份较为详细的文章，敬请期待~

[zhoukekestar]

嗯，太棒了，谢谢您的回答。布局这个确实是我遇到比较头大的，不同页面组件可能相同，但布局又会变，没想到你们还单独拆分出来了，然后通过后台配置将主动权交给运营人员。这个还是很赞的~这个，这三者之间怎么衔接交流，还有您说的，布局和组件可以自由组合，还希望多多指教~（我也希望通过组件化能够应付频繁的需求变更，这样就可以轻松许多了~~~ ╮(╯▽╰)╭）

[gjkh0902]

有详细的文章说是如何让布局和组件可以自由组合的么？

[zhoukekestar]

suprise:

本周将会产出一份较为详细的文章，敬请期待~

[suprise]

Hi，让各位久等了，迟到了一天，实在抱歉，《让需求来得再猛烈些——快速响应需求的天猫H5首页新架构》，欢迎拍砖~

[zhoukekestar]

赞！ d=====(￣▽￣*)b

[darrenCoding]

赞！

[guirong]

具体建 #35

[thinkerchan]

先mark

[think2011]

mark!