前端模块化

最近要做一个会员系统的静态页面，然后想尽量少的写前端代码。所以看了一些前端模块化的知识。前端模块化是一些插件的模块化，功能的模块化。还有就是一些通用部分的模块化。

这次的会员系统我打算这样来实现，头部，尾部以及左侧的菜单栏用同一个。中间内容部分用不同的。

思路是这样的，我在index里面编辑好头部，菜单栏，尾部，然后内容区域用一个id为main-contain 的div作为容器。然后再单独编辑内容区域的html文件（暂时先不考虑css和js,样式和js都先在index中引用）。通过ajax请求，把内容区域请求过来，放入main-contain中。每次请求完成后，填充内容前，先清空容器。

接下来有一个问题，就是如果我点击菜单栏，怎么去发起ajax请求。菜单栏可以是a标签。但是a标签就直接跳转链接了，所以要先阻止链接跳转，用e.preventdefault()阻止，然后获取a标签的href，在写菜单栏的时候，就把对应a标签的href设为要请求内容的路径。这样通过href的值直接请求静态资源文件。这时候页面变了，但是浏览器如果刷新，那么你会发现页面又回到首页了，原因是，你的url没变。所以你还要改变下你的url。用location.href即可。说的笼统一点，就是要设置好路由。

转载于:https://my.oschina.net/u/3042592/blog/1589418