妙味课堂 - 2017年春季“上海”公开课现场聚会活动

上海·妙味课堂 - 实体活动聚会邀请函

2017年春季,诚邀 关注妙味课堂的朋友、前端爱好者们 来到上海妙味分点,报名参加现场聚会活动!!

注:活动全程免费,路费须自理。

公开课时间:

  • 2月18日(本周六) 14:00~17:00
  • 2月19日(本周日) 14:00~17:00

地点:上海 - 七宝·宝龙城 - T4楼九层 902 室


公开课分享内容:组件化开发

☑ 移动端组件开发

☑ 基于的 AngularJs 的 UI 组件开发


什么是组件化:

WEB 中的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用。页面就是由一个个类似这样的部分组成的,比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。

组件的特性:

1、高内聚性,组件功能必须是完整的,如我要实现下拉菜单功能,那在下拉菜单这个组件中,就把下拉菜单所需要的所有功能全部实现;

2、低耦合性,通俗点说,代码独立不会和项目中的其他代码发生冲突!在实际工程中,我们经常会涉及到团队协作,传统按照业务线去编写代码的方式,就很容易相互冲突,所以运用组件化方式就可大大避免这种冲突的存在。

3、每一个组件都有自己清晰的职责,完整的功能,较低的耦合便于单元测试和重复利用;

前端组件化必要性:

多年以前前端开发者们就一直尝试在组件化的道路上不断探索,从一开始的 YUI、ExtJS 到现在的 Angular Directives、React Components、Vue.js Components、Bootstrap 等,前端的组件化道路从来没有停止过……

组件化的好处:

为什么大家会这种热衷组件化,看下组件化给我们带来的好处,其必要性就不言而喻:

  • 提高的开发效率
  • 方便重复使用
  • 简化调试步骤
  • 提升整个项目的可维护性
  • 便于协同开发

第一天 - 2月18日 - 周六下午:14:00~17:00

- 移动端组件开发 -

课程摘要:

  • 组件的应用案例
    • Bootstrap
    • 饿了么APP
  • 如何做到组件化
    • 代码功能的分析抽离
    • 代码段的独立性
    • 功能本身的完善性
    • 统一的接口规则
  • 组件化实战:“索引列表”组件
    • 功能分析与抽离
    • 自定义属性关联
    • 移动端快速滑过菜单选项,焦点不能切换问题
      • 坐标反向定位元素
    • 小提醒:面向过程封装和面向对象封装带来的差异和问题
  • 完善整个应用,添加数据
    • 掌握原生 JS 的必要性
    • 中文汉字转换拼音组件使用
    • 数据分类与排序
    • 页面结构生成
  • 总结
    • 组件化的必然趋势
    • 原生是组件化开发的根基

第二天 - 2月19日 - 周日下午:14:00~17:00

- 基于的 AngularJs 的 UI 组件开发 -

课程摘要:

一、原生开发

二、基于框架的开发

  • AngularJS
  • React
  • Vue
  • ...

三、基于 AngularJS 的组件库:angular-bootstrap

>> 官网地址

>> API 文档

1、项目创建
  • 创建项目工程目录
  • 引入 框架/库 文件
  • 使用 AngularJS 创建并启动模块
  • 使用 AngularJS 的依赖注入(DI)ui.bootstrap
2、功能开发
  • 通过 Collapse (ui.bootstrap.collapse) 组件创建顶部导航
  • 通过 ng-click 调用 Modal (ui.bootstrap.modal) 组件创建模态框
  • 确定基础数据结构,通过 Modal 添加用户数据
  • 通过 bootStrap 表格展示数据
  • 使用 Pagination (ui.bootstrap.pagination) 组件显示数据分页效果
  • 通过 angular.Module.config() 进行组件初始化配置
    • uibPaginationConfig 配置常量
  • 数据删除功能
  • 解决数据变化(添加、删除)对分页效果的影响,实现同步
  • angular-bootstrap 其他组件的介绍
3、总结
  • angular-bootstrap 以及其他第三方组件库的优缺点

优点: 减少开发、维护成本,提高工作效率,好的组件库有较好的安全健壮性

缺点: 学习成本相对较高、个性化扩展不方便(没有一个组件库能够满足所有项目开发过程中可能会出现的需求)

4、延展性思考:
基于angular-bootstrap扩展自己的组件:ui.bootstrap.aside - 侧边栏组件
  • angular-bootstrap 源码结构分析

  • angular.module() 创建 ui.bootstrap.aside 模块

  • 通过 angular.Module.directive() 创建 aside 指令

  • 通过 angular.Module.provider() 初始化 aside 服务

  • 使用 ui.bootstrap.aside 完成侧边栏信息预览


特别提醒: 公开课后,我们会把现场视频整理好,发到 VIP 视频平台,供大家交流学习。


妙味上海讲师介绍

妙味资深讲师:莫涛

  • H5移动端开发专家;
  • 妙味课堂创始人之一,精通H5移动端开发技巧;
  • 妙味官网核心功能开发者、海量的H5、CSS3、移动端系列视频录制者;
  • 妙味最新移动端课程研发者,同时具备多年丰富的教学经历;
  • 为人谦逊,处事低调,与之接触学员均对其赞赏有加;
  • 现主导妙味新课程研发与移动端课程标准化工作,
  • 同时负责妙味实体班、远程班、公开课与最新案例研究重任。

高级讲师、全栈开发专家:钟毅

  • 妙味高级课程讲师、妙味新课程研发、规划专家,
  • 多年资深 PHP 高级工程师、node.js 高级开发者,深刻理解 ES6 规范,
  • 是一位经验丰富的全栈技术专家。
  • 曾录制多套妙味高级视频教程,如:JS 面向对象、node.js 系列、组件开发系列……
  • 同时具备 5 年以上丰富的授课经验,深受妙味学员爱戴。
  • 钟毅为人性情温和、对教学工作有极大的耐心。
  • 教学中擅长系统讲解知识点、并能延伸扩展到课程以外的知识体系;
  • 让学员感受到其扎实而深入的知识脉络体系。

妙味上海分点环境实拍:

七宝·宝龙城是 5A 甲级写字楼,宝龙城效果图(实地效果达到90%还原度):

七宝·宝龙城 - 外景:

河堤景观:

宝龙城是一个小资情调十足的繁华商圈:

教室楼下:

宝龙城 T4 号楼大门:

进入 T4 号楼大厅,从这里进电梯上 9 楼:

从 9 层电梯出来就能看到哦:

妙味课堂欢迎你到来:


公开课免费报名方式:

  • 报名QQ:2852509866、2852509867、2852509868
  • 电话:010-57269690(统一由北京客服部报名,安排上海工作人员热情接待)

打开微信扫描二维码,关注妙味课堂最新动态:

妙味网友
请登录后留言,请登录注册