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

冷不防 2022-06-12 04:40 174阅读 0赞

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

## node层设计 ##

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

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

mustache-express[传送门][Link 1]

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存放模版

渲染方式：

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

5.组件部分

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

组件的存放方式定义为：

<table> 
 <thead> 
  <tr> 
   <th>-</th> 
   <th align="center">lib文件夹</th> 
   <th align="right">-</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td></td> 
   <td align="center">组件文件夹</td> 
   <td align="right"></td> 
  </tr> 
  <tr> 
   <td>组件用到的css文件</td> 
   <td align="center">组件用到的js文件</td> 
   <td align="right">图片等</td> 
  </tr> 
 </tbody> 
</table>

--------------------

6.命令设计

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

[Link 1]: http://www.npmjs.com/package/mustache-express