A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始


首先进行分享的是百度前端技术部资深研发工程师陈骁带来的《搜索组件化的探索与实践》。
为什么搜索要做组件化?
据陈骁介绍,最开始的百度搜索移动端的前端架构是从 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 的代码。

12 个回复

倒序浏览

今天不想跑,所以才去跑,这才是长距离跑者的思维方式。
回复 使用道具 举报

有一种能力是不断持续的努力
回复 使用道具 举报
我们笑着说再见,却深知再见遥遥无期。
回复 使用道具 举报
浩气长存不如威风堂堂,逍遥自在不若极乐净土。
回复 使用道具 举报
妙语连珠是猎物,支支吾吾是喜欢。
回复 使用道具 举报
有些事我并不是不知道,只是我可以装作不知道。
回复 使用道具 举报
我从不喜欢迁就却用最干净的真心为你妥协了很久。
回复 使用道具 举报
不要依赖梦想而忘记生活
回复 使用道具 举报
乞丐并不会妒忌百万富翁,但是他肯定会妒忌收入更高的乞丐。
回复 使用道具 举报
事实是不会为体贴我们这些悲念而有些许更改的。
回复 使用道具 举报
只要朝着一个方向努力,一切都会变得得心应手。加油
回复 使用道具 举报
不要等待机会,而是要创造机会。现在我来了,希望我们都可以坚持,早日用知识达到暴富
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马