Question

我对网络开发比较陌生，正在试图弄清楚如何将服务器环境（开发，测试，产品等）发布到前端。

我正在使用带有Express的Node.js，但是下面的代码更接近伪代码，因为这更像是一个设计模式问题。

使用Express发布服务器环境的一种方法是将其添加到中间件：

app.use(function(req,res,next){

   res.locals.env= {};  //we add the property env to locals

});

所以现在在前端模板中我们可以访问'env'locals变量：

<div>
<% app.env = env %>  //hopefully 'env' will be available in a front-end template
</div>

我不确定以上是否标准，但我觉得它肯定不理想。

所以我想，也许我们可以为第一个HTTP请求，第一个套接字请求或所有请求（？）执行此操作：

//下面的伪代码

app.get('/', function(req,res,next){

  if(req.isAuthenticated()){

     socket.on('received-env-info', function(err,msg){
          res.render('index',{auth:true});
     }

     socket.emit('send-env-info', env);
   }
   else{
       res.render('index',{auth:false});
   }

});

通过这种方式，我们可以确保客户端在将任何html发送到服务器之前知道环境是什么（或任何其他服务器变量）。（我们假设客户端上有一些socket.io处理程序，随后将客户端上的全局环境设置为从服务器发送的变量。）

这是一个好的设计模式，还是一个糟糕的设计模式？

额外信用：我们可以采用相同的想法，并将其用于身份验证：

app.get('/', function(req,res,next){

  var infoForClient = {auth:null,env:env};  //should probably set auth to false for security but using 'null' for illustration purposes

     if(req.isAuthenticated()){
          infoForClient.auth = true;
    }
     else{
          infoForClient.auth = false;
    }

     socket.on('received-info-from-client', function(msg){
          if(msg === 'success'{   //some success message or another
              res.render('index',infoForClient);
           }
          else{
              infoForClient.auth = false;
              res.render('index',infoForClient);
          }

     }

     socket.emit('send-info-to-client', infoForClient);
   }
});

我只需要知道这是否是一种理智的方法

Answer 1

这样可行，但增益vs

是什么

// B
app.get('/', function(req, res) {
  res.json({
    info: info,
    html: template.render(info)
  });
});

或

// C
socket.on('get-index', function () {
  socket.emit('index', {
    info: info,
    html: template.render(info)
  });
});

或模板移动到客户端，只需返回信息。

一旦智能客户端出现在图片中，首先不再需要渲染模板服务器端。

所以看一下客户端代码

// A
socket.on('send-info-to-client', function (infoForClient) {
  handleInfo(infoForClient);
  socket.emit('recieved-info-from-client', true);
});
request('/', function (err, res, body) {
  if (err) { return handleErr(err) }
  handleHtml(body);
});

处理信息并处理html最终分成两部分。

// B
request('/', function (err, res, body) {
  if (err) { return handleErr(err) }
  handleInfo(body.info);
  handleHtml(body.html);
});

// C
socket.emit('get-index');
socket.on('index', function (msg) {
  handleInfo(msg.info);
  handleHtml(msg.html);
});

处理程序可以统一

并且在最后的案例中

// D
request('/', function (err, res, body) {
  if (err) { return handleErr(err) }
  handleInfo(body.info);
  handleHtml(template.render(body.info));
});

设计模式作为前端模板本地的替代

1 个答案: