微信企业号会议助手---怎么写一个前端结构

对于前端来说，不需要像后端一样搭建各种工具的环境，不过geogle的angularjs，nodejs和facebook的reactjs这些主流的mvvm前端架构除外，下面我来写一个对我一个后端程序员来说的简易前端架构搭建：

webapp
- msc //自己定义自己前端框架的名字，一定要有意义，未来是属于你，我这个的意义是mysupcon
  - core
    - css
      - public_bs.css //全局的自定义的css
    - js
      - lib //存放外部的各类前端框架
        
        bootstrap
        
        js
        
        css
        
        plugin //存放利用bootstrap实现的一些插件
        
        jquery.js
      - common.js //一些公用的js
      - msc_bs_widget.js //扩展jquery方法存储
      - msc_bs.js //所有css，js引入该文件，书写html的时候只要引入该文件就好，后边会详细介绍
- staticResources //存放自己写的前端界面的静态文件
  - css
  - js
  - html
  - image
- WEB-INF
  - jsp //所有后端到前端都经过jsp，由jsp中嫌弃staticResources中的html文件实现
  - web.xml

下面我来讲讲前端引用的总入口代码介绍msc_bs.js：

var js=document.scripts;
var jsRoot; 
for(var i=0;i<js.length;i++){
 if(js[i].src.indexOf("msc_bs.js")>-1){
   jsRoot=js[i].src.substring(0,js[i].src.lastIndexOf("/")+1);
 }
}

jsRoot是根据找到msc_bs.js所在位置的上一层js目录，就是存放外部框架js的根目录。这样在哪里导入这个文件都能引用所有的前端js。
下面以导入一个bootsrap的js和css为例。

document.write('<link rel="stylesheet" type="text/css" href="'+jsRoot+'lib/bootstrap3.3.5/css/bootstrap.min.css">');
document.write('<script src="'+jsRoot+'/lib/bootstrap3.3.5/js/bootstrap.min.js"></script>');

在写的html中只要写入

<script type="text/javascript" src="../msc/core/js/msc_bs.js"></script>

该路径是根据你请求的url跳到项目目录下再加的绝对路径。
这样是不是很简单。

纯属个人对前端架构的研究感悟。有啥不足之处欢迎指出，一起学习成长。

微信企业号会议助手---怎么写一个前端结构

猜你喜欢