百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

MVVM学院

基于百度自研的MVVM框架--SAN,由百度EFE的十多位同学通力打造,由浅入深,帮助你掌握目前主流的前端开发模式。

关键词 SAN MVVM
共发布 1个课程,已经有 4075名学生在这里学习上课
魏嘉汛
百度前端工程师,常用ID:LeuisKen。长期专注于前端开发,希望自己的工作能够服务到更多的人。
詹方
百度高级前端开发工程师,崇尚函数式编程,对san、react、vue、node有浓厚的兴趣,并持续学习中。
王兵
百度高级web前端研发工程师。深度学习可视化工具VisualDL初期开发者之一。对表单设计、数据可视化、交互设计有着浓厚的兴趣~
张思远
百度前端工程师。关注合理的高可复用架构设计、质量焦点、项目中的技术管理、软件工程。致力于创造极致的用户体验和可交互性。
邓小红
百度前端工程师
梁士全
百度前端工程师,在平台开发方面有一定的经验。平时注重学习新技术,喜欢前端工程化、vue和san,乐于学习与分享。
李殿斌
百度前端工程师,会点js,IFE深度参与者
张轩健
高级前端开发工程师,有前后端开发经验,深度参与H5运营活动平台化解决方案。
张卓斌
百度 FEX 高级研发工程师,拥有 20年(断断续续的)WEB 开发经验。据说是女装大佬。
开始学习

难度:普通时间:大约需要1

2323人在学习该课程,有481人已经完成该课程

1.1 课程系列引导及准备工作

关于此课程 此课程通过高性能的百度JavaScript组件化开源框架 baidu/San ,由浅入深的带大家了解百度在企业级应用前端开发方面的一些积累和实践。课程主要包含: 从零开始 -> 搭建前端工程化开发环境 稳扎稳打 -> 高频API操刀实践 小有所学 -> 综合小应用开发实战 学有余力 -> 挑战高级应用 课程适用人群 你需要具备一定前端开发基础; 你需要具备熟练使用 git|github 的能力(只知道 add | commit | clone 是不够的 ^_^); 如果对以上两点要求,你感到了一丢丢的不自信,参考资料一定要认真学习了~ 课程准备 一…

开始学习

难度:普通时间:大约需要2

943人在学习该课程,有193人已经完成该课程

1.2 用webpack4 / parcel快速搭建开发san helloworld

任务目的 了解最新的webpack4 / parcel 学习如何使用构建工具搭建前端开发环境 了解san框架 任务描述 请根据学习资料及自己的理解,使用webpack4或parcel搭建一个开发环境,要求如下: 支持js、css格式的解析 区分 development / production 环境 使用npm scripts设罝dev、test、build命令 写一个san组件并在浏览器中显示hello world 使用babel-loader进行js代码转换 任务注意事项 注意webpack4中mode参数和process.env.NODE_ENV的联系,注意构建时和配置文件的区…

开始学习

难度:普通时间:大约需要1

216人在学习该课程,有99人已经完成该课程

2.1 数据操作

任务目的 了解san视图与数据绑定的方式,以及数据校验的方法 熟悉san的数据操作相关API 练习综合运用san的数据绑定、操作、校验实现视图的交互与变更 任务描述 参考下方设计图,使用san实现一个功能 输入姓名、年龄和简介信息,实时展示对应的信息 点击移除信息按钮后,姓名、年龄和简介信息置空 信息的数据类型为一个必须包含name、age和des三个属性的对象,其对应的数据类型分别为string、number和string 任务注意事项 请注意代码风格的整齐、优雅 代码中含有必要的注释 使用san的相关api进行相关功能的实现 在线参考资料 https://baidu.gith…

开始学习

难度:普通时间:大约需要1

114人在学习该课程,有69人已经完成该课程

2.2 条件和循环

任务目的 熟悉San的基础指令 掌握San的条件和循环渲染 掌握San的常用数组操作方法 任务描述 实现如下图所示功能,要求 使用循环指令渲染表格 根据不同的审核状态值,显示对应的状态文案和操作按钮 点击「添加」按钮,增加一条数据项;点击「删除」按钮,删除该条数据;点击「审核」按钮,将审核状态修改为合格 任务注意事项 要求实现与任务描述一致 请注意代码风格的整齐、优雅 在线学习参考资料 条件指令使用教程 循环指令使用教程 数组操作教程 …

课程结束

难度:普通时间:大约需要1

85人在学习该课程,有53人已经完成该课程

2.3 样式控制

任务目的 学会灵活使用 san 来控制元素的样式 任务描述 <div id="block" style="background:red;width:100px;height:100px;"></div> <script> let block = document.getElementById('block'); block.addEventListener('click', function () { block.style = 'background:blue;width:100px;height:100px;'; …

开始学习

难度:普通时间:大约需要2

75人在学习该课程,有43人已经完成该课程

2.4事件处理

任务目的 1.熟悉san 事件处理的相关API 2.对mvvm双向绑定以及san的事件通信有相关了解 任务描述 如示例图: 所示,实现以下需求 1.父组件与高层父组件显示默认值 2.表单获得焦点输入自定义的信息,点击通知父组件按钮,父组件以及更高层父组件显示输入框内容 3.父组件及高层父组件接收到子组件的信息时,文案样式发生变化 4.父组件文案可编辑并能同时控制子组件输入框文案与父组件保持一致(选做) 任务注意事项 要求功能实现与任务描述中完全一致 示例图仅为参考,样式不需要完全实现一致 实现中,尽可能考虑代码的可读性和可复用性 请注意代码风格的整齐、优雅 代码中含有必要的注释 不…

开始学习

难度:普通时间:大约需要3

68人在学习该课程,有20人已经完成该课程

2.5 表单实现Input、Checkbox组件

表单实现Input、Checkbox组件 任务目的 理解并学会使用san的表单API 学习如何封装表单组件 任务描述 利用san提供的API实现简单的表单控件 根据给出的设计稿实现自定义的Input、Checkbox组件,并满足给定的API Input props 属性 类型 默认值 说明 value string 空 双绑定的值 placeholder string 空 站位文本 disabled boolean false 是否禁用 readonly boolean false 是否只读 events 事件 说明 返回值 on-input 输入时触发 e…

开始学习

难度:普通时间:大约需要2

38人在学习该课程,有20人已经完成该课程

2.6 插槽相关

插槽相关 任务目的 熟悉 SAN 及 插槽的使用 任务描述 如 示例图 中所示 一个任务栏中有多个任务卡片使用「插槽」方式实现其效果,该效果可能有多种更好更简单直观的方式实现,但此处需要用「插槽」方式来实现,练习 SAN 中插槽的使用以及提高组件灵活性; 要求 「任务栏」 大标题需要支持:既可直接参数定义 又可简单的命名定义// 形如 <task-menu> <div slot="title"><p>test</p> {{test}} <p>test</p></div> </task-menu&…

开始学习

难度:进阶时间:大约需要3

33人在学习该课程,有16人已经完成该课程

2.7.1 使用s-transition指令实现过渡动画

任务目的 学习并实践CSS过渡动画的使用方法 学习如何在San中使用s-transition指令实现过渡动画 任务描述 已知 san 组件: <template> <div> <button on-click="toggle">TOGGLE</button> <span s-if="show" s-transition="hook"> Transition Layer </span> </div> </template> <script> export defa…

开始学习

难度:进阶时间:大约需要2

32人在学习该课程,有13人已经完成该课程

2.7.2 基于san-transition的过渡动画

任务目的 学习并实践CSS过渡动画的使用方法 学习并实践在San中使用san-transition开发过渡动画 任务描述 实现一个简单的条目列表。当用户点击其中一个条目的时候,该条目会有简单的transition变换效果,效果结束后,弹层展示用户点击的条目详情。 注意事项 你可以自己设计题目中的transition变换效果 请尝试使用san-transition实现这一效果 结合使用san-transition的动画生命周期钩子来实现这一效果 在线学习资料 CSS动画简介:http://www.ruanyifeng.com/blog/2014/02/css_transition_an…

课程结束

难度:普通时间:大约需要1

25人在学习该课程,有14人已经完成该课程

2.8 组件实现加生命周期

任务目的 理解 san 框架中组件的概念。 理解组件的生命周期 任务描述 参考上图实现一个扩展面板组件,点击面板右上角的按钮,实现面板内容区域的显示和隐藏。 在组件中实现以下几个函数,观察以下几个函数的调用时机。compiled - 组件视图模板编译完成inited - 组件实例初始化完成created - 组件元素创建完成attached - 组件已被附加到页面中detached - 组件从页面中移除disposed - 组件卸载完成 任务注意事项 请仔细预读官方文档。 请注意面板中各个子组件的合理规划与拆分。 代码风格的整齐、优雅。 参考资料 san官方文档 -- 组件 s…

开始学习

难度:进阶时间:大约需要0

23人在学习该课程,有13人已经完成该课程

3.1 用递归的方式实现级联组件

任务目的 了解递归思想 学习san.js如何递归调用组件 实现一个简单的Cascader级联组件任务描述 请根据学习资料及自己的理解,开发一个递归级联组件,要求如下: 数据结构: [{ value: 'zhinan', label: '指南', children: [{ value: 'shejiyuanze', label: '设计原则', children: [{ value: 'yizhi', label: '一致' }, { …

开始学习

难度:进阶时间:大约需要4

24人在学习该课程,有6人已经完成该课程

3.2日历组件

任务目的 练习综合运用HTML,CSS,JavaScript实现功能 练习对于表单组件弹出层的管理 练习对于日期操作的抽象与封装 任务描述 参考基于vue的组件库element的DatePicker(http://element.eleme.io/#/zh-CN/component/date-picker) 输入框获取焦点的时候,在输入框下方弹出浮层 滚动时,浮层始终处于输入框的下方 当剩余高度不足以容纳一个日期浮层的时候,日历浮层折叠到输入框上方 浮层的相关样式和逻辑尽量解耦 日历当中的日期可以根据使用者传入的条件设置为Disabled状态 在实现单个日期选择的基础上实现日期范围的选择…

开始学习

难度:进阶时间:大约需要5

24人在学习该课程,有3人已经完成该课程

3.3 表单验证封装

表单验证封装 任务目的 学习如何用San来封装支持自定义验证的表单 任务描述 根据给出的设计稿实现支持自定义验证的表单组件,并满足给定的API 学习如何利用开源社区中比较成熟的库 可以自己扩展实现更复杂的表单组件,尝试将日历组件、下拉组件集成到表单组件中 Form props 名称 类型 必须 默认值 描述 labelWidth String false 100px 标签宽度,带单位的宽度值,如100px,影响这个表单 rules Object false [] 验证规则 labelPosition String false left 标签位置,影响整个表单,可选值为to…

开始学习

难度:进阶时间:大约需要3

10人在学习该课程,有3人已经完成该课程

4.1 Todo MVC

任务目的 使用San编写一个具有一定复杂度的应用 学习San的数据/数组操作方法 学习如何使用San进行组件化的前端开发 任务描述 如 http://todomvc.com/ 网站demo所示,完成一个Todo MVC app。 要求: 新建一个todo item,点击回车确认内容。 修改todo的完成状态。完成/未完成状态可切换。 点击删除,可删除一项。 切换底部状态tab,展现对应列表内容。 双击某一todo item,可重新编辑其内容。 任务注意事项 你不需要过多关注css,样式可以在官网找到。小提示:也可以找一找npm包。 用localStorage存储数据。 对业务组件进行…

开始学习

难度:进阶时间:大约需要3

4人在学习该课程,有1人已经完成该课程

4.2 与san-router结合实现Todo MVC

任务目的 学习并实践前端路由的相关概念 学习如何使用san-router开发单页应用 任务描述 为Todo MVC任务中你实现的应用,添加前端路由,使之成为一个单页面应用。 要求: 当URL变化且URL匹配到某一路由规则时,页面会渲染路由对应的组件。 任务注意事项 你可能需要先了解前端路由的概念。 不需要精通,你可以了解一下restful api。 在线学习参考资料 san-router: https://github.com/baidu/san-router restful api设计资料: https://github.com/aisuhua/restful-api-desi…

开始学习

难度:困难时间:大约需要5

3人在学习该课程,有1人已经完成该课程

4.3 结合san-router与san-store优化Todo MVC

任务目的 学习如何使用flux模式进行前端应用的组件间通信和数据管理 任务描述 新增一个todo的编辑页面,你可以在编辑页面中为todo添加更为丰富的内容,如:todo类型、标签、配图、预期完成时间、甚至是markdown语法支持等等。 要求: 你的项目仍然是一个基于san-router的单页面应用 尽可能复用你的组件,并且使用san-store来进行组件间通信 任务注意事项 在使用san-store存储更新信息的基础上,尽可能实现更为完善的编辑功能。 你可以参考这里的代码: https://github.com/baidu/san-store/tree/master/example…

开始学习

难度:进阶时间:大约需要2

8人在学习该课程,有0人已经完成该课程

4.4 无限下拉的feed效果

任务目的 理解San的组件机制 学习利用San进行一个简单页面的开发 任务描述 参考百度App首页feed流实现一个可无限下拉的资讯流页面,要求 滚动到页面底部时动态加载数据,支持无限加载 页面滚动过程中不会出现明显卡顿 任务注意事项 不允许借助任何第三方组件库实现无限下拉功能 无限下拉功能可以组件化,使用插槽以支持自定义内容 数据请求可以本地Mock 请注意代码风格的整齐、优雅 代码中含有必要的注释 在线学习参考资料 scoped 插槽 Check if a user has scrolled to the bottom Complexities of an Infinit…

开始学习

难度:困难时间:大约需要3.5

2人在学习该课程,有0人已经完成该课程

4.5 antd规范的table组件

任务目的 练习运用san实现组件的封装 练习对于代码的抽象、封装以及接口的提供 任务描述 参照antd的table组件规范,基于san实现一个表格组件 表格组件通过传入columns和dataScoure属性来渲染表头和内容 表格组件至少具有行可选择、筛选排序、行/列合并、内容较多可展开、固定表头和列等基本功能 样式可参照antd,也可自行设定样式 任务注意事项 请注意代码风格的整齐、优雅 代码中含义必要的注释 建议实现antd规范的table组件全部功能,可以与antd的表格组件接口有少许不同,但建议保持一致 在线参考资料 san组件文档: https://baidu.githu…

开始学习

难度:困难时间:大约需要5

22人在学习该课程,有1人已经完成该课程

4.6 仿饿了么点餐页面

任务目的 理解san的运行机制 综合运用html + css + san开发一款单页面应用 任务描述 商品详情页DEMO 完成demo页面当中的点餐页面,包括商品列表,评论列表,商家详情三个子页面。 任务注意事项 使用s-transition在子页面切换,点击菜品等交互中优化体验 实现无线滚动加载列表以及下拉刷新和上滑刷新功能 构造多种用例探究san对于列表渲染的优化机制,同时与vue在渲染列表时的key机制做对比。 页面切换的效果可以使用san-router,也可以使用san提供的动态子组件的功能 考虑页面对于多种尺寸手机的兼容 适当添加缓存,提高整体项目的体验 使用CSS预处理器…

开始学习

难度:困难时间:大约需要10

2人在学习该课程,有0人已经完成该课程

5.1 vscode 支持 San 的语法高亮插件

vscode 支持 San 的语法高亮插件 任务目的 增强对 San 语法的熟悉度考察快速学习能力 任务描述 学习如何开发 vscode 插件 调研基于.san文件开发方式下语法高亮的实现 如 示例图 所示 支持 San 基本语法高亮任务注意事项 (提出问题) - 分析问题 - 拆分问题 - 解决问题在线学习参考资料 插件 相关 https://code.visualstudio.com/docs/extensions/overview https://code.visualstudio.com/docs/extensions/yocode San 相关 https://baidu.…

课程结束

难度:困难时间:大约需要5

0人在学习该课程,有0人已经完成该课程

5.2 Sublime Text 3支持San的语法高亮插件

san基础学院 任务目的 增强对 San 语法的熟悉度; 考察快速学习能力; 任务描述 学习如何基于Sublime Text 3拓展插件; 调研基于.san文件开发方式下语法高亮的实现; 完成基于 Sublime Text 3 的 San-ST3-highlight 并发布到个人主页(Github); 实现样例: 任务注意事项 (提出问题) - 分析问题 - 拆分问题 - 解决问题 是我们期望你具备的能力; Talk is cheap,实践出真知; 在线学习参考资料 YAML spec ST3 documentation …

开始学习

难度:困难时间:大约需要14

1人在学习该课程,有0人已经完成该课程

5.3 与san+mobx结合的todo MVC

任务目的 学习并理解san的数据管理机制 学习如何使用mobx模式进行前端应用的组件间通信和数据管理 任务描述 实现一个todo的编辑页面,你需要在编辑页面中为todo添加丰富的信息,如:todo类型、预期完成时间以及支持markdown语法编写功能等等,同时将你所有编辑的todo,以左侧导航的形式展现出来。 尽可能复用你的组件,并且使用mobx来进行组件间通信 具体界面设计,可以参考印象笔记,或者有道云笔记 任务注意事项 在使用mobx存储更新信息的基础上,尽可能实现更为完善的编辑功能。 你可以参考这里的代码: https://github.com/baidu/san-store/…