Javascript — Facebook Bigpipe, правильно это или нет?

На самом деле я создаю фреймворк в php, который похож на Java Servlet Model, но использует технологию Facebook Big pipe similer.

Чтобы очистить, посмотрите на этот сервлет (PHP Servlet)

    <?php

class login_servlet extends Servlet{

public function doGet($request, $response){

$response->getWriter()->write('hii');

}   // __ end of doGet

public function doPost($request, $response){ }  // end of doPost

} // __ Servlet?>

поэтому, когда пользователь входит http://myweb.com/login

будет вызван этот сервлет, отображение будет выполнено фреймворком, а фреймворк сделает что-то вроде этого:

$servlet_name  = genrate_servlet_name('login');

$servlet_boj = new $servlet_name(new Request(), new Response());
$servlet_obj-> init(new ServletConfig());
$servlet_obj-> service();
$servlet_obj-> destroy();

таким образом, мы можем сказать, что один сервлет является симулятором контроллера в MVC, и в соответствии с doGet или doPost метод будет вызываться фреймворком, как я объяснил выше с параметрами запроса и ответа, но представления разделены на несколько страниц, например:

как вы можете видеть на картинке, эта страница содержит 4 страницы:

1 заголовок
2 центральная левая часть
3 центральная правая часть (входная часть)
4 нижний колонтитул

так что код логина_сервлета выглядит так:

<?php

class login_servlet extends Servlet{

public function doGet($request, $response){

$writer = $response->getWriter();

$pg_strucutre  = new PageletIndexStructure($request, $response);
$writer->writePagelet($pg_strucutre);

$pg = new PageletIndexHead($request, $response);
$writer->writePagelet($pg);

$pg = new PageletIndexLeft($request, $response);
$writer->writePagelet($pg);

$pg = new PageletIndexRight($request, $response);
$writer->writePagelet($pg);

$pg = new PageletIndexFooter($request, $response);
$writer->writePagelet($pg);

}   // __ end of doGet

public function doPost($request, $response){  }  // end of doPost

} // __ Servlet

?>

и класс pagelet выглядит так, что каждый pagelet должен расширяться:

<?php

class Pagelet{

public $template_name = '';
public $js = array();
public $css = array();
public $output = null;
public $container_id = 'root'; // __default is root

private $request = null;
private $response = null;

function __construct($request, $response){

$this->request = $request;
$this->response = $response;
$this->doProcess();

/* default  */
}  //  __ construct

public function doProcess(){

// __ here all code will comes

} // __doprocess

public function render(){

$arr = array(

'js' => $this->js,
'css' => $this->css,
'content' => $this->output,
'container_id' => $this->container_id,
'response_type' => 2
);
return json_encode($arr);

} // __ end of render

} // __ end of class?>

и на стороне клиента ответ выглядит так:

<!Doctype html>
<html>

<head>
<script type="text/javascript" src="js/jquery.min.js"> </script> <script type="text/javascript" src="js/require.js" data-main="js/load.js"></script>  <script type="text/javascript" src="js/boot.js"> </script> <link rel="stylesheet"  href="css/nnj.css" />
</head>

<body>

<div id="__global"> </div> <div style="position : fixed; width : 100%; height : 50px; background-color : black; bottom : 0px; left : 0px;"></div>
<iframe id ="__navigate" style=""> </iframe>

<script type="text/javascript">  boot.on_arrived({"response_type" : 1});  </script>
<script type='text/javascript'>  boot.on_arrived({"js":["index_structure"],"css":["index_structure"],"content":"<div id=\"cntr\">     <div id=\"cntr_head\"> </div>      <div>        <div id=\"cntr_left\"> </div>                <div id=\"cntr_right\"> </div>   </div>   <div id=\"cntr_footer\"> </div></div>","container_id":"root","response_type":2}); </script>
<!-- <code><div id="cntr">   <div id="cntr_head"> </div>    <div>    <div id="cntr_left"> </div>        <div id="cntr_right"> </div>  </div>  <div id="cntr_footer"> </div></div></code> -->

<script type='text/javascript'>  boot.on_arrived({"js":[""],"css":[""],"content":"<b> This is the login page  : Enter your informations </b>","container_id":"cntr_head","response_type":2}); </script>
<!-- <code><b> This is the login page : Enter your informations </b></code> -->

<script type='text/javascript'>  boot.on_arrived({"js":[""],"css":[""],"content":"<h2>    login and join others</h2>","container_id":"cntr_left","response_type":2}); </script>
<!-- <code><h2>  login and join others</h2></code> -->

<script type='text/javascript'>  boot.on_arrived({"js":[""],"css":[""],"content":"<form action=\"/login\" method=\"post\">    Email : <input type=\"text\" name=\"email\">    <br>    Pasword : <input type=\"password\" name=\"password\">    <br>    <input type=\"submit\"></from><br><br><a href=\"/register\"> don't have account ? </a>","container_id":"cntr_right","response_type":2}); </script>
<!-- <code><form action="/login" method="post">  Email : <input type="text" name="email">  <br>  Pasword : <input type="password" name="password">  <br>  <input type="submit"></from><br><br><a href="/register"> don't have account ? </a></code> -->

<script type='text/javascript'>  boot.on_arrived({"js":[""],"css":[""],"content":"<div style=\"width : 150px; text-align : left; display : inline-block;\"> About  </div><div style=\"width : 150px; text-align : left; display : inline-block;\"> help  </div><div style=\"width : 150px; text-align : left; display : inline-block;\"> Privacy  </div><div style=\"width : 150px; text-align : left; display : inline-block;\"> Terms and Conditions  </div><div style=\"width : 150px; text-align : left; display : inline-block;\"> Advertise  </div>","container_id":"cntr_footer","response_type":2}); </script>
<!-- <code><div style="width : 150px; text-align : left; display : inline-block;"> About </div><div style="width : 150px; text-align : left; display : inline-block;"> help </div><div style="width : 150px; text-align : left; display : inline-block;"> Privacy </div><div style="width : 150px; text-align : left; display : inline-block;"> Terms and Conditions </div><div style="width : 150px; text-align : left; display : inline-block;"> Advertise </div></code> --> <script type="text/javascript">  boot.on_arrived({"response_type" : 3});  </script></body>
</html>

так что мой вопрос, я делаю правильно или мне нужно что-то изменить ,,? извините за слабый английский :(, заранее спасибо

0

Решение

Очень трудно ответить на вопрос типа «я делаю это правильно?». Есть ли что-то, что вы хотите получить от нас? Попробуйте задать очень направленный вопрос.

Блог пост о Bigpipe: https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919

Так как это не открытый исходный код, я не думаю, что вы найдете много информации о внутренностях. Здесь есть открытая реализация: http://www.juhonkoti.net/2010/10/01/open-bigpipe-javascript-implementation. Может быть, это может помочь вам в дальнейшем.

Смотрите также Facebook Bigpipe Техника Алгоритм.

1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]