admin 管理员组

文章数量: 887021


2023年12月22日发(作者:论文abstract翻译)

《前端开发框架技术》课程教学大纲

一、课程基本信息

课程名称

课程类别

课程性质

总学分

开课单位

适用专业

(方向)

先修课程

教学环境

网页设计、JavaScript

理论:■一体化机房 □多媒体教室 □讨论课教室

实践:□一体化机房 ■实验机房

前端开发框架技术

□通识必修 □通识选修□专业必修■方向必修 □任意选修 □创业必修 □创业选修

■理论+实践 □理论 □实践

总学时

执行学期

理论学时

考核方式

实践学时

■考试 □考查

二、课程简介

本课程是面向软件工程专业开设的一门专业必修课,涉及网页设计、CSS样式、JavaScript、面向对象程序设计,响应式、前端常用框架等内容,通过本课程的学习,学生能够了解web前端开发中,使用面向对象编程思想进行代码封装的基本方法与基本思路;在此基础上学习目前较为流行的、优秀的前端框架,比如jQuery,和;并且通过这些框架的学习和使用,培养学生运用新技术,解决web前端开发的综合能力。

本课程是在《网页设计》、《JavaScript》、《面向对象程序设计》的基础上开设的课程,为后继课程《混合式开发技术》等课程奠定理论和实践的基础。

三、课程教学内容对指标点的支撑

(1)理论教学安排

序号 知识模块

支持毕业要求的细化指标

1. ▲掌握js语言面向对象编程的特点

2. ★掌握js对象与构造函数

3. ★掌握js原型与原型链

4. 理解js继承

1. ▲理解框架封装的原理

2. ★▲掌握封装自己的框架

1

教学内容

1. js语言面向对象编程的特点

2. js对象与构造函数

3. js原型与原型链

4. js继承

学时分配

学生任务

1.掌握课上基本内容

2.使用面向对象的思想,封装一个自己的AJAX库

1.封装自己的动画框架

2.封装自己的属性框架

3.封装自己的DOM1

JavaScript面向对象编程

2

2 框架封装

1. 框架封装的原理

2. 封装自己的框架

4

序号 知识模块

支持毕业要求的细化指标

教学内容

学时分配

学生任务

框架

3 jQuery高级

1. ▲理解jQuery框架分析

2. ★掌握jQuery常用api

3. ★▲掌握jsonp

4. 掌握常用web api

5. ★掌握art-template

1. 理解传统框架与新兴框架的差别

1. 理解是什么

2. ▲理解MVVM模式

3. ★掌握如何使用

4. 理解的开发模式

1. jQuery框架分析

2. jQuery常用api

3. jsonp

4. 常用web api

5. art-template

1. 常见的前段框架介绍

2. 新型前端框架与传统框架的差别简介

1. 是什么

2. 如何使用

3. 的开发模式

6

完成通过访问聚合数据api,制作菜谱案例

常见前段框架概述

2

下载,安装,测试课堂所提到的常见框架包

4 框架概述 2

使用开发自己的第一个前端程序hello world

5

6

7

1. Vue基本语法

2. Vue常用系统指1. ★掌握的基本令

语法

3. 数据绑定

2. ★▲掌握的基基本用法 4. 过滤器

本框架用法

5. 生命周期

3. ★了解常见组6. 路由

件及其用法

7. 过渡效果

8. 组件

1. 了解其他常见框架 1. Angular基本介绍

2. 了解Angular框架优势 2. Angular与Vue等Angular框架概述

3. ★了解Angular基本用其他框架的区别

法 3. Angular基本用法

1. ★掌握综合使用前端框架技术开发实际项目的基本方法综合项目分析 和基本原则 1. 综合项目分析

2. 理解模块划分原则

3. 掌握前端和后端完全独立的开发模式

10

1.掌握课堂内容,独立完成课堂演示demo

2.开始策划和分析商城案例

2

4

独立完成美食食谱案例的开发

注:★表示重点内容,▲表示难点内容

(2)实践教学安排

序号 项目名称 支持毕业要求的细化指标

2

学时项目分配 类型

每组人数

学生任务

序号 项目名称

1.

2.

3.

4.

1.

2.

支持毕业要求的细化指标

掌握VS Code开发工具

掌握原生AJAX技术

掌握原生jsonp跨域请求

掌握封装框架的基本原理

掌握jQuery基本用法

掌握jQuery下的jsonp跨域请求

3. 掌握art-template用法

4. 掌握正确的代码书写风格

5. 掌握基本用法

6. 掌握使用互联网查询技术文档的能力

7. 掌握使用常见互联网平台提供的api数据服务

8. 掌握前端和后端完全独立的开发模式

9. 理解模块划分原则

10. 了解团队开发模式

学时项目分配 类型

4 验证

每组人数

1

学生任务

1. 封装自己的框架

2. 完成天气查询项目

1. 使用jQuery和art-template改造天气查询

1 天气查询1

2

天气查询2

4 验证 1

3 美食菜谱 8 设计 3-4

1. 设计美食菜谱UI

2. 设计美食菜谱

3. 任务划分

注:项目类型可以是验证型、设计型、综合型

四、课程考核

表1 课程考核细则

分值比例(%)

分项 总评

考核环节 考核要求

平时

考核

考勤

项目1

天气查询1

实践

考核

项目2

天气查询2

项目3

美食菜谱

结课

考核

期末测试

每次上课班长点名,旷课1节20分,无故旷课5节以上取消考试资格

/CSS/JS代码分离(25%)

2.界面美观(25%)

3.类库封装规范,采用了面向对象思想进行封装(50%)

/CSS/JS代码分离(25%)

2.界面美观(25%)

3.正确使用art-templ (50%)

1.界面美观(25%)

2.正确使用Bootstrap,实现响应式布局(25%)

3.正确使用互联网数据平台提供的api服务(25%)

3.正确使用框架,功能模块齐全(25%)

提交作品:

/CSS/JS代码分离(10%)

2.界面美观(20%)

3.正确使用Bootstrap,实现响应式布局(20%)

4.正确使用互联网数据平台提供的api服务(10%)

5.正确使用框架,功能模块齐全(20%)

6.认真撰写项目报告(20%)

100%

25%

10%

25%

20%

50%

100% 70%

3

五、课程评价及改进

课程考核结束后,任课教师遵循软件学院教学工作指导委员会通过的课程达成度评价机制和评价方法,对本课程的毕业要求达成度进行自我评价。此外,学院的教学工作委员会将指派专门的教师,依据学生的考试成绩和平时成绩等资料,对本课程的达成度进行评价,并出具达成度评价报告。教师根据评价结果,改进其教学方法和教学内容,以便更好地支撑学生毕业要求的达成。

七、教材及参考资料

参考书籍:

4


本文标签: 框架 课程 掌握 使用 封装