模块化前端项目解决方案--带node版

在新的项目中使用到了另外一套解决方案，根据具体情况设计了以下的解决方案。

node层设计

本地生成第一次访问的页面并做缓存处理。同时使用代理方式代理后端接口。
1.项目使用到了express+ mustache-express来做基础的页面生成。

考虑到要尽量少采坑，所有使用了成熟的express
使用mustache是基于：
1.语法比较接近于现代方式
2.提供了引用第三方模板的方式

mustache-express传送门

2.使用http-proxy-middleware来代理后端接口。

const express = require('express');
const proxy = require('http-proxy-middleware');//引入代理中间件
const app = express();

//将服务器代理到localhost:8080端口上[本地服务器为localhost:3000]
const apiProxy = proxy('/api', { target: 'http://localhost:8080',changeOrigin: true });
app.use('/api/*', apiProxy);//api子目录下的都是用代理

3.使用的方式

确认端口，并在node中创建对应的路由
路由中远程获取接口的第一次数据并入模版引擎中并完成渲染工作
以上内容可以视情况加入缓存中
远程获取接口内容的方法需要使用http中的request方法或者自己完成自定义的方法
接口返回的数据经过包装。其中包含：code（结果代码），msg（错误信息），data（返回的数据）。如果有超时404之类的错误需要处理为其他错误信息并返回

前端设计

前端通过gulp生成对应的文件在服务端的view文件夹下。服务端在开发环境下为自动刷新。

前端使用requirejs来做模块化加载方案。页面载入过程中会优先加载base.css完成页面初始化以及requirejs。其中requirejs默认有配置数据并自动加载base.js完成js的初始化以及全局变量的初始化

1.html部分。

node中使用了模版引擎，所有html页面可以分成几个模版来写。目前页面分成了head、body、foot三个部分。其中head写全局的加载项目。body中写当前页的内容。foot写一些页脚、js等。其他模版视情况而分。

html根据不同环境有压缩和未压缩的不同版本。

2.css部分。

使用less来写css，通过gulp-less来生成对应的css。

3.js部分。
使用requirejs来加载每个页面的对应js。
页面最下面:

requirejs(["index"]）

对应的js内部；

requirejs(["helper/util"], function(util) {
    //util就是对应异步载入的js
    //对应的js代码
});

4.页面artTemplate

多数页面需要写链接来指向其他页，比如多页时候的下一页。其余的时候需要使用接口获取数据并渲染到页面上。这个时候就需要使用artTemplate。

使用javascript存放模版

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>
</script>

渲染方式：

var data = {
    title: '标签',
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

5.组件部分

public下面有一个lib文件夹，里面放一些使用到的组件，或者一些自定义的组件。

组件的存放方式定义为：

-	lib文件夹	-
	组件文件夹
组件用到的css文件	组件用到的js文件	图片等

6.命令设计

1.npm run server ：启动服务端，express热启动模式。
2.npm run dev ：启动开发模式，这个模式下会监控文件的改动并生成对应的结果文件
3.npm run build ：重新生成对应的html、js、css、image等文件
4.npm run publish : 启动正式环境的服务端