章节设计_第五章页面代码

1、HTML5 App商业开发实战教程课程教学章节设计第五章：页面代码授课教师：Web课程组授课班级:学时：11教学条件计算机、局域网环境教学素材教材、课件、授课录像、案例库、教学网站等教学目标设计知识目标：（1） 理解单页应用使用模块化JS的必要性（2） 掌握JS模块的定义方法（3） 理解数据绑定的用途（4） 掌握绑定表达式、过滤表达式和规则表达式的用途及设置方法（5） 掌握常用JS方法以及调试方法能力目标：（1） 学会自定义JS类（2） 使用数据绑定设置绑定表达式实现控制组件是否显示（3） 使用数据绑定设置过滤表达式控制列表显示的数据（4） 使用数据绑定设置规则表达式实现自动计算（5） 熟练掌

2、握获取组件JS对象的方法、数据组件的方法以及打开页面的方法（6） 掌握调试自己写的JS代码，以及系统JS代码的方法教学内容（1） 介绍实现数据绑定功能的绑定表达式、过滤表达式、规则表达式的用法；（2） 介绍常用组件的JS方法和系统JS类的常用方法、以及调试方法。重点：（1） 掌握绑定表达式、过滤表达式、规则表达式的用法（2） 常用组件的JS方法和系统JS类的常用方法（3） 掌握调试JS代码的方法难点：（1） 定义符合AMD规范的JS文件（2） 理解表达式环境变量及上下文对象（3） 理解表达式中当前行和计算行的区别（4） 调试系统JS方法课后作业（1）5.2.5同步训练：设置绑定表达式实现控制折

3、扣信息是否显示、设置过滤表达式实现使用一级分类ID过滤二级分类列表、设置规则表达式实现购物车页中的商铺合计金额、商品种类数量的计算；（2）5.3.5同步训练：参照附录中仿微店App的页面介绍，将开发出来的页面基本串通起来。教学过程设计节5-1：JS基础（学时数：1）主要步骤教学内容教学方法教学手段师生活动问题 引入单页应用如何提高客户端性能？教师讲授引导文法多媒体学生：思考教师：演示知识讲解知识点1： 对单页应用来说模块化的开发和设计相当重要，能够实现异步、动态加载，从而提高客户端性能知识点2： 使用RequireJS实现模块化。让客户端的代码分成一个个模块，实现异步、动态加载知识点3： 模块

4、管理遵守AMD规范（Asynchronous Module Definition）知识点4：通过define方法，将代码定义为模块；通过require方法，加载模块知识点5： W文件同名的JS文件包含一个JS模块，JS模块包含一个JS类，JS类包括构造方法、属性、实例方法启发讲解讨论归纳多媒体课件演示学生：思考、记录笔记教师：启发示范 操作操作1： 打开一个JS文件，展示JS模块的定义，展示JS模块中JS类的定义，包括构造方法、属性、实例方法操作2： 演示自定义一个符合AMD规范的JS文件操作3：在其它JS文件中，引用自定义的JS文件问题引导操作演示分析归纳多媒体系统演示学生：观摩思考教师：归

5、纳总结评估讨论（1） 讨论在单页应用中使用模块化的必要性（2） 展示学生的讨论结果（3） 考核学生结果教师启发讨论归纳分数激励多媒体学生：思考教师：结果演示课堂总结（1） WeX5的JS文件是一个符合AMD规范的JS模块。在这个JS模块中定义了一个JS类并作为模块的返回结果，这个JS类是页面代码的核心，所有的页面代码都在这个JS类中实现（2） JS文件包括两部分内容：声明模块引用和JS类定义（3） 在JS文件中，this就是JS类本身，通过this访问JS类的属性，调用JS类的方法。在W文件中$model等同于JS文件中的this，同样可以通过$model访问JS类的属性，调用JS类的方法（4

6、） 在WeX5中，定义模块时需要符合以下规则：一个文件定义一个模块；所有模块都定义为匿名模块，按模块路径的方式引用。最常用的是一个模块定义一个JS类。教师讲解多媒体课件演示学生：整理笔记教师：引导创新教学过程设计节5-2：JS表达式 （学时数：4）主要步骤教学内容教学方法教学手段师生活动问题 引入在学生成绩单上使用红色显示不及格分数，这种需求要写代码实现吗，数据绑定有没有简便的方法？教师讲授引导文法 多媒体学生：思考教师：演示知识讲解知识点1： 绑定表达式是展现组件的公共属性，可以用数据控制组件的属性。常用bind-visible控制组件是否显示，用bind-style和bind-css控制组

7、件的显示样式知识点2： 过滤表达式特指在list组件的filter属性上设置的表达式，用于list组件的数据过滤知识点3： 规则表达式是数据组件的特性，用数据控制其他数据的只读、必填、约束以及计算公式知识点4： 每种表达式都有自己的环境变量和上下文对象，用于表达式的计算启发讲解讨论归纳多媒体课件演示学生：思考、记录笔记教师：启发示范 操作操作1：演示在商品列表页面中，设置折扣span的绑定表达式bind-visible，实现折扣小于10时才显示，否则不显示操作2：演示在一级分类页面中，打开二三级分类页面，同时将选中的一级分类的ID作为参数传给二三级分类页面操作3：演示在二三级分类页面中，使用传

8、入的一级分类ID过滤二级分类列表操作4：演示在购物车页中，设置商品数据组件的金额列fMoney的计算规则，计算单个选中商品金额操作5：演示在购物车页中，设置商铺数据的合计金额列的计算规则，计算商铺中已选中商品的合计金额问题引导操作演示分析归纳多媒体系统演示学生：观摩思考教师：归纳总结实战 训练完成5.2.5同步训练动手实践做中学多媒体真实系统环境学生：实践操作教师：巡视检查评估讨论（1） 讨论表达式环境变量及上下文对象的区别和作用（2） 展示学生的讨论结果（3） 考核学生结果教师启发讨论归纳分数激励多媒体学生：思考教师：结果演示课堂总结（1） 展现组件有很多绑定属性，通过设置表达式控制组件的展

9、现（2） 常用的绑定属性有bind-text：控制组件显示的文本bind-visible：控制组件是否显示bind-style和bind-css：控制组件显示的样式（3） 列表组件中的数据不等同于数据组件中的数据。列表组件中的数据可以是一个数组，也可以是数据组件中的一部分数据（4） 数据组件才有规则属性（5） 通过设置规则表达式控制整个数据集的只读，或者某个列的只读、必填、计算公式、约束规则 教师讲解多媒体课件演示学生：整理笔记教师：引导创新课后作业完成5.2.5同步训练中的拓展训练教师讲授多媒体学生：听讲教师：布置作业、提出要求教学过程设计节5-3： 常用JS （学时数：4）主要步骤教学内容

10、教学方法教学手段师生活动问题 引入组件有很多方法，系统又提供了很多JS类库，哪些是常用的方法？哪些是必须会的方法？教师讲授引导文法 多媒体学生：思考教师：演示知识讲解知识点1： WeX5为了支持单页应用模式，特别提供了Shell，用于维护单页应用中页面的调度，包括打开页面，关闭页面，显示首页、显示侧边栏等知识点2： 当需要调用组件的方法时，就需要先获取组件的JS对象，才能调用组件的方法。通过ModelBase中的comp方法来获取组件JS对象知识点3： 页面之间可以传递三种参数，其中的?参数就是需要在当前页面的上下文中获取知识点4： 掌握数据组件的方法对于实现页面逻辑至关重要知识点5： WeX

11、5核心库中引入了jQuery，因此在页面逻辑中，可以直接使用jQuery操作DOM；除此之外，还可以使用ModelBase以下的api来获取DOM元素启发讲解讨论归纳多媒体课件演示学生：思考、记录笔记教师：启发示范 操作操作1：演示定义页面标识，使用页面标识打开页面，传递参数操作2：演示使用组件的xid获取组件的JS对象操作3：演示使用to方法定位行操作4：演示删除购物车中选中的商品问题引导操作演示分析归纳多媒体系统演示学生：观摩思考教师：归纳总结实战 训练完成5.3.5同步训练动手实践做中学多媒体真实系统环境学生：实践操作教师：巡视检查评估讨论（1） 讨论为什么数据组件的方法是常用方法（2）

12、 展示学生的讨论结果（3） 考核学生结果教师启发讨论归纳分数激励多媒体学生：思考教师：结果演示课堂总结（1） Shell打开页面有两种方法，一是使用页面标识，二是使用页面路径（2） 数据组件的方法是最常用的JS方法。例如：取input组件中的值，不使用input组件的val方法，而是使用数据组件的val方法，这两个方法取到的值是一样的，但是使用数据组件的方法有两个好处，一是如果把input组件换成了select组件，代码不用改；二是只要掌握数据组件的方法即可，不用掌握其他组件的方法，使用变得简单教师讲解多媒体课件演示学生：整理笔记教师：引导创新课后作业完成5.3.5同步训练中的拓展训练教师讲授

13、多媒体学生：听讲教师：布置作业、提出要求教学过程设计节5-4： JS调试 （学时数：2）主要步骤教学内容教学方法教学手段师生活动问题 引入JS代码可以调试吗？如何调试？教师讲授引导文法 多媒体学生：思考教师：演示知识讲解知识点1： 使用Chrome浏览器的开发人员工具调试JS代码知识点2： 在JS代码中加debugger;语句，在Chrome浏览器中操作页面，触发代码执行到debugger;语句，进入调试知识点3： WeX5将系统JS文件合并，以减少网络请求，调试系统JS文件前，先将JS合并文件重命名，合并文件失效后，即可调试系统JS文件启发讲解讨论归纳多媒体课件演示学生：思考、记录笔记教师：启发示范 操作操作1：演示使用Chrome浏览器调试购物车页的shopCheckboxChange方法操作2：演示重命名系统JS合并文件common.min.js文件操作3：演示调试data组件的find方法问题引导操作演示分析归纳多媒体系统演示学生：观摩思考教师：归纳总结实战 训练调试自定义的JS方法调试系统的JS方法动手实践做