百度有啊前端技术初窥
转自 http://lifesinger.org/blog/?p=600
百度有啊开了,作为淘宝的一名深情前端开发工程师,打开百度有啊的第一件事是F12:
很典型的24列960栅格系统的两栏布局,很明显的YUI风格。注意主体的两栏布局又分成了两部分,两部分的结构是一样的。来看一下base.css
:
/* Copyright (c) 2008, Baidu Inc. All rights reserved. version: alpha 0.0.1 */ ... #doc1,#doc2,#doc3 {margin:auto;text-align:left;min-width:760px;zoom:1;font-size:100%;} #doc1 {margin:auto 10px;} #doc2 {width:58.4615em;*width:56.9826em;} #doc3 {width:73.0769em;*width:71.2858em;} ... #bd:after,.bb-g:after,.bb-ga:after,.bb-gb:after,.bb-gc:after, .bb-gd:after {content:".";display:block;visibility:hidden;height:0;clear:both;}
layout部分完全照抄YUI的grids. 文件头的All rights reserved有点不厚道,至少应该说明下Inspired by YUI. 看最后一行的:after
, 这种清除浮动的方式不用添加额外标签,今天正犹豫能否用于淘宝,百度有啊做了小白鼠,很不错。
来具体看一个小模块:
可以看出,dom结构是典型的YUI风格。有啊首页没有采用圆角,因此边框线加头部背景就搞定了。注意hd
部分的<div class="act">
, 这里和Ext的方式类似,act是action的简称,里面放“更多、收缩、删除”等操作按钮,可扩展性很好。
走马观花看完HTML和CSS, 接下来我们来看下有啊的JS:
百度有啊自己构建了一套JavaScript库,这份魄力相当大气,很佩服。看下细节core.js
:
var BB = { __version: 0.1 }; BB.VERSION = "0.1.0.1.20080323"; BB.JSPATH = (function() { var A = document.getElementsByTagName("script"); return A[A.length - 1].src.replace(///[^//]+$/, "/") + "../"; })(); Object.asPrototype = function(B) { var A = function() {}; A.prototype = B; return A; }; ... function $(A) { if ("string" == typeof(A)) { return document.getElementById(A); } else { return A; } } var G = $; var $package = function(H, B) { ... }; ... Array.prototype.each = function(E) { ... }; ... BB.Console = { ... };
百度的JS框架名称缩写为BB, 采用的风格类似Prototype和MooTools, 有大量侵入式代码,并且采取的是直接覆盖式侵入,比如Array.prototype.each = ...
, 这在一定程度上可以避免浏览器升级问题,但也造成了在Firefox等现代浏览器上性能的丧失(原生的forEach
总比JS库的快)。仔细看的话,可以发现还有不少地方考虑欠周。BB目前还只是一个很不成熟的JS库。
继续看细节,tabview.js, 代码就不看了,直接看效果:
把鼠标在“人气宝贝”和“热点时尚”上快速移动,很容易发现CPU狂飙,百度明显没有考虑延迟触发。当选中人气宝贝(周围有虚线)时,直接用键盘Tab键切换焦点,可以发现焦点切换了但内容没有切换,这也是考虑不周的地方。这在淘宝上都是没问题的。
中间的广告Slide也有类似问题,快速在缩略图上切换时,也没有做延迟触发。不快速移动,自然切换时,也比较耗CPU, 代码加密了没耐心去看,估计里面的效果类处理得不是很妥。
好了,上面快速地过了遍技术细节,下面来简单看下可访问性。
禁用掉JS, 刷新,布局没有被破坏,很不错(至少比拍拍强)。但依旧有可以改进的地方,比如中间的广告,点击缩略图时,可以考虑直接打开对应的大图。TabView中的“热点时尚”也可以考虑做成真实链接。不过有啊在禁用JS时的表现已经相当不错了。
再禁用掉CSS, 可以看出整个页面的结构是比较清晰的,很不错。
作为追求完美的技术人士,上面很多地方我可能过于苛刻。从纯前端技术上讲,百度有啊总体上很不错,CSS虽有剽窃之嫌,但能用得如此娴熟,技术也是一流的了。至于JavaScript, 百度有啊的JS框架让我惴惴不安, 虽然他们自己写了一个框架,这份气度非常好,但总体上觉得百度的JS应用还停留在二流水平上。期待着百度JS框架的成熟。
拍砖完毕,睡觉去。希望梦里不会出现有啊还是没啊的争吵
百度有啊前端技术初窥相关推荐
- 钉钉小程序快照技术初窥
作者:孙然(煮虾) 对于小程序技术来说,容器加载和前端异步渲染的过程中固然不可避免的会有白屏或 loading 页的展示,短则一瞬间,长则需要数秒才能展示首屏.如果白屏时间长,将非常影响用户的体验.根 ...
- 百度前端技术学院—斌斌学院题库 转载 cristina-guan
Cristina_Guan https://github.com/CristinaGuan 博客园 首页 新随笔 联系 订阅 管理 随笔 - 34 文章 - 3 评论 - 2 百度前端技术学院-斌 ...
- 百度前端技术学院—斌斌学院题库
任务一:零基础JavaScript编码(一) 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决 ...
- 百度前端技术学院2017学习总结
一.前言 百度的前端技术学院IFE,2016年就听说了,当时自己也报名,还组成队伍了,不过自己一个任务也没完成就结束了,遗憾... 关注了IFE,知道2017年2月有新的一期培训,于是一直在等着报名, ...
- 百度前端技术体系——百度EFE(Excellent FrontEnd)技术体系
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/53927843 本文出自[我是干勾鱼的博客] 之前在文章<推荐一个不错的纯 ...
- 学计算机前端技术学院,百度前端技术学院(任务)
百度前端技术学院 这一期高档班的标题列表在:ife/2015_spring/taskatmaster·baidu-ife/ife·GitHub下面的高档班(趁便吐槽一下知乎的链接无法识别URL中文锚点 ...
- 百度前端技术学院--零基础--第二天 给自己做一个在线简历吧
百度前端技术学院–零基础–第二天 给自己做一个在线简历吧 课程目标 通过简单的实践,更加清楚地了解HTML是什么,HTML5是什么.学习基本的HTML标签,理解HTML语义化概念 任务描述 用code ...
- 解密国内BAT等大厂前端技术体系-百度篇(长文建议收藏)
1 引言 整个业界在前端框架不断迭代中,也寻找到了许多突破方向,例如跨平台中的RN.Flutter,服务端GraphQL.Serverless,前端和客户端的融合越来越紧密,前端在Node和Elect ...
- 百度前端技术学院—-小薇学院(HTML CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
- 百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
最新文章
- 【C语言】 Linux内核源码-- do...while(0)解析
- awk按ip统计日志数
- com.alibaba.fastjson.JSONObject cannot be cast to XXX异常解决
- python中range和arange的区别_Python——range()、xrange()和np.arange()应用说明
- Java基础篇:简单介绍一下final
- 移动端的人脸检测及去重算法实践
- matlab电力系统建模与仿真实验,基于MATLAB的小型电力系统的建模与仿真.doc
- 软件项目管理(学习笔记)
- Android Studio新建项目
- CSS3nbsp;Transitionnbsp;Transformnbsp;Animat…
- html粒子特效图片切换,javascript转换静态图片,增加粒子动画效果
- My Fifty-eighth - Page - 全排列 - By Nicolas
- Error writing to process file pid.nbf问题
- linux服务器做301跳转,什么是301转向,如何去做301跳转
- centos7安装bcc和简单测试
- js的NaN和isNaN
- 数据结构--迷宫问题的四种解法
- 在水经注中导入陈江街道九条河KML文件的应用案例
- Java中使用for循环打印99乘法表
- 杨校老师课堂之CSDN博客查找博文汇总-目录
热门文章
- android是什么意思
- python中confusion matrix_Confusion matrix理解
- Python自动化测试如何自动生成测试用例?
- MATLAB中 / 和 \ 的区别
- 安装CAD2006出现html,win7系统安装cad2006出现已终止CAD2006-Simplifieng安装的解决方法...
- 学习报告:基于原型网络的小样本学习《Prototypical Networks for Few-shot Learning》
- 标准盒模型和IE盒模型
- android 免root 模拟器,真正免root的root工具箱详细使用教程
- MSF evasion模块的使用
- 101107 ~101113