黑马程序员技术交流社区

标题: [sz]搜索组件化探索与实践 [打印本页]

作者: chengjiayu 时间: 2019-8-31 18:20
标题: [sz]搜索组件化探索与实践

首先进行分享的是百度前端技术部资深研发工程师陈骁带来的《搜索组件化的探索与实践》。
为什么搜索要做组件化？
据陈骁介绍，最开始的百度搜索移动端的前端架构是从 PC 时代迁移过来，服务器端使用 Smarty 来渲染模版，实现前后端分离。前端使用 Zepto 来完成交互逻辑，但是它的扩展性比较有限，难以实现对 HTML、CSS 代码的组件化管理，随着移动端的交互形式越来越复杂，原本的方案出现了局限性。
于是，组件化应运而生。组件化是把一些可复用的单元提取出来，通过对几个组件的管理，实现对整个搜索结果页样式的控制，提高开发的效率和横向团队整体升级的效率。
目前百度已经有了非常多的组件化解决方案，包括 Lavas 和 Reac t。可以具体到组件语法、基础框架以及同构区块。
前三部分基本能够覆盖组件的常用语法，而同构在服务器端和浏览器端都能执行，主要有 props、data、components、computed 等。
那么这个组件代码怎么在线上跑起来呢？
首先会在线下通过编译器，把它编译成 PHP、JavaScript 两份原码。PHP 的编译产物完全使用 PHP 的语法，可以在后端形成一个 Server Runtime，在这个过程中，也能够把 PHP 的编译产物渲染成字符串，通过网络传输到浏览器端。而在浏览器端运行时可以用编码产物 Javascript 的组件，渲染成可操作的 HTML 代理结构，包括它的事件和交互。
其中的难点在于怎么把一个组件代码编译成在 PHP、在 JS 都能跑的组件代码。百度会做对于模板和一些表达设计的处理。例如，模板代码有一个文本节点，有一个自定义组件，在编译的过程中，会利用编译器把它转化成抽象语法树，形成树的结构，每个节点都有一些属性和信息，利用语法树的结构和属性信息，就可以通过代码生成器分别生成 PHP 和 JS 的代码。

作者: 398580721 时间: 2019-9-3 14:16

今天不想跑，所以才去跑，这才是长距离跑者的思维方式。

作者: chengjiayu 时间: 2019-9-4 10:56

有一种能力是不断持续的努力

作者: pakho-chou 时间: 2019-9-4 13:57
我们笑着说再见，却深知再见遥遥无期。

作者: 陈么么 时间: 2019-9-4 16:21
浩气长存不如威风堂堂，逍遥自在不若极乐净土。

作者: 流浪的猫~ 时间: 2019-9-4 16:37
妙语连珠是猎物，支支吾吾是喜欢。

作者: DarkHorse0 时间: 2019-9-5 09:04
有些事我并不是不知道，只是我可以装作不知道。

作者: wilsonchen 时间: 2019-9-5 09:19
我从不喜欢迁就却用最干净的真心为你妥协了很久。

作者: 娟呀 时间: 2019-9-5 10:27
不要依赖梦想而忘记生活

作者: 李大哥 时间: 2019-9-5 10:45
乞丐并不会妒忌百万富翁，但是他肯定会妒忌收入更高的乞丐。

作者: 哎哟琪呀 时间: 2019-9-5 11:09
事实是不会为体贴我们这些悲念而有些许更改的。

作者: 没有技术的臭虫 时间: 2019-9-5 17:42
只要朝着一个方向努力，一切都会变得得心应手。加油

作者: 夜听雨 时间: 2019-9-18 17:13
不要等待机会，而是要创造机会。现在我来了，希望我们都可以坚持，早日用知识达到暴富

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2