[关闭]
@GivenCui 2016-05-25T20:23:06.000000Z 字数 6062 阅读 850

第二课 名片管理器(0524)_JS高级教程

js高级

目录

JS课程合集跳转链接

一. 名片管理器( eg.钱包 )

  • 名片用数组存储管理
  • 新建钱包实例
  • 新建名片实例
  • 新建三个方法： 增加、删除、显示

名片其实是一个数据模型

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>名片管理器(初级)</title>
  6.     <script type = "text/javascript">
  7. /*
  8. 需求 : 名片管理器管理名片
  10. 构造函数 : 名片Card、名片管理器CardManager
  11. 名片属性 : 姓名、公司、电话、邮箱
  12. 名片管理器属性 : 名片数组
  13. 名片管理器方法 : 添加名片、显示所有名片信息、删除名片
  14. */
  16. // 名片构造函数
  18. function Card (name, company ,phoneNum ,email) {
  19.     this.name = name;
  20.     this.company = company;
  21.     this.phoneNum = phoneNum;
  22.     this.email = email;
  23. }
  25. // 名片管理器构造函数
  27. function CardManager () {
  29.     // 名片数组的属性,用来存储名片的
  31.     this.cards = new Array();      // 实际创建了个Array对象
  32. }
  34. // 添加名片的方法
  36. CardManager.prototype.addCard = function (newCard) {
  38.     // 把名片添加到管理器的名片数组里
  39.     // 栈  "先进后出"
  41.     this.cards.push(newCard);    // 入栈的操作
  42. }    
  44.     // 显示所有名片信息的方法
  46.     CardManager.prototype.showAllCardInfo = function () {
  48.         // 通过循环遍历卡片数组得到每个卡片对象
  50.         for(var i = 0; i<this.cards.length; i++){
  52.            // 遍历每个卡片对象
  54.            var tempCard = this.cards[i];   
  56.             // 格式化输出
  58.            console.log(" \n 名字: " + tempCard.name +" \n 公司: " + tempCard.company + " \n 电话: " + tempCard.phoneNum + " \n 邮箱: " + tempCard.email)                 
  59.         }
  60.     }
  62. }
  64. ////////////////////////////////////////////////////
  65. ///////////自己封装的工具方法//////////////////////
  67. // 模仿indexOf()方法
  68. // 给数组Array加的方法,所以this指定是Array这个对象
  70. Array.prototype.myIndexOf = function (removeCard) {
  71.     for(var i = 0; i < this.length; i++) {
  72.         if(this[i] === removeCard) {
  73.             return i;
  74.         }
  75.     }
  76.     return -1;      // 模拟indexOf()没找到返回-1
  77. }
  79. //  模拟其他面向对象语言的按照指定元素删除的方法
  81. Array.prototype.removeObj = function (removeObj) {
  82.     var index = this.myIndexOf(removeObj);
  83.     if(index > -1){
  84.         this.splice(index, 1);
  85.         return;
  86.     }
  87.     console.log("没有找到要删除的名片!");
  88. }
  91. // 删除名片的方法
  92. // (因为JS中没有按照指定元素的方法,所以我们要通过给数组构造函数的原型添加额外的方法)
  94. CardManager.prototype.removeCard = function (removeCard) {
  95.     this.cards.removeObj(removeCard);
  96. }
  97. /////////////////////////////////////////////////////////
  100. // 创建名片管理器对象实例
  102. var cardManager = new CardManager();
  104. // 创建很多名片对象
  106. // 数字存成字符串避免 数字类型 的上下限问题
  108. var card1 = new Card("Mars" , "育知同创" , "18688889999" , "Mars@163.com");
  109. var card2 = new Card("刘强东" , "京东" , "136000555" , "liuqingdong@126.com");
  110. var card3 = new Card("乔布斯" , "苹果" , "1869466513" , "Qiaobusi@qq.com");
  112. // 添加名片
  113. // 数组是有序的,用push
  114. // *****任何数组都是有序的,可以重复的****
  116. cardManager.addCard(card1);
  117. cardManager.addCard(card2);
  118. cardManager.addCard(card3);
  120. // 显示所有名片信息
  122. cardManager.showAllCardInfo();
  124. // 删除card3
  125. cardManager.removeCard(card3);
  127. // 打印分隔符
  128. console.log("------------------------------------")
  130. // 显示所有的名片信息
  132. cardManager.showAllCardInfo();
  134. // 验证删除不存在的名片信息
  135. var card4 = new Card("abc", "ddd" ,"能看见我不");
  137. // 删除card4
  138. cardManager.removeCard(card4);
  140. // 打印分隔符
  141. console.log("------------------------------------")
  143. // 显示所有的名片信息
  145. cardManager.showAllCardInfo();
  150.     </script>
  151. </head>
  152. <body>
  154. </body>
  155. </html>

作业 : 书签管理器

书签是指浏览器中的书签,用面向对象思想实现
需求 : 查询、增加、删除、修改
构造函数 ： 1. 数据模型 2. 管理器 3. 创建UI代码

拓展 : 表格的每一行是一个对象,例如购物车中的一行,用一个构造函数来实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>书签管理器</title>
  6.     <script type = "text/javascript">
  7. /*
  8. 需求: 通过书签管理器来管理网页中的书签项.
  9. 功能: 增、删、改、查
  10. 构造函数 : 书签管理器BookManager 、书签Book
  11. 书签的属性 : 网址url、标题title、星级star
  12. 书签管理的属性 ： 书签数组books
  13. 书签管理器的方法 ：　
  14. １、添加书签 （要求不能重复添加标题或网址）
  15. ２、显示所有的标签信息 （要求： 按照星级排序）【查有待完善】
  16. ３、删除标签 （通过标题删除）  
  17. ４、修改标签 （通过标题去修改）
  18. */
  19. // 书签构造函数  (属性:网址、标题、星级)
  20. function Book (url, title, star) {
  21.     this.url = url;      // 书签的网址属性 url
  22.     this.title = title;  // 书签的标题属性 title
  23.     this.star = star;    // 书签的星级属性 star
  24. }
  25. // 书签管理器构造函数   (属性 : 书签数组)
  26. function BookManager () {
  27.     // 书签数组属性
  28.     // 这是属性,同时也是一个数组对象实例(本质)
  29.     this.books = new Array();   
  30. }
  31. // 添加书签的方法
  32. // Prototype模式添加方法
  33. // newBook是一个对象
  34. BookManager.prototype.addBook = function (newBook) {
  35.     // 遍历书签数组中的每个书签,目的是和新加的书签做判断
  36.     for (var i = 0; i< this.books.length; i++) {
  37.         // 得到每个书签对象
  38.         var temBook = this.books[i];
  39.         // 为了实现不能重复添加标题或网址的需求
  40.         if (temBook.title === newBook.title || temBook.url === newBook.url) {
  41.             console.log("网址已经存在");
  42.             return;     // 函数结束
  43.         }
  44.     }
  45.     // this指向BookManager对象
  46.     // 用 books属性 (同时也是数组)
  47.     // 经过循环判断没有重复的才可以添加新标签
  48.     this.books.push(newBook);
  49. };
  50. // 显示所有标签信息的方法 (要求 : 按照星级star排序)
  51. // 拓展: 传个参数实现升序排序和降序排序
  52. BookManager.prototype.showAllBookInfo = function () {
  53.     // 冒泡排序星级从大到小
  54.     for (var i = 0; i < this.books.length-1; i++) {
  55.        for(var j=0;j<this.books.length-1-i; j++) {
  56.             // 把位置为j和j+1的对象取出
  57.             var tempBook1 = this.books[j];
  58.             var tempBook2 = this.books[j+1];
  59.             // 判断相邻两个对象的星级属性大小
  60.             if (tempBook1.star >= tempBook2.star) {
  61.                 // 利用数组的splice()方法来实现两个位置替换
  62.                 this.books.splice(j,1,tempBook2);
  63.                 this.books.splice(j+1,1,tempBook1);
  64.             }
  65.        }
  66.     // 格式化输出书签信息    
  67.     for (var i = 0; i < this.books.length; i++) {    
  68.         // 得到每一个书签对象
  69.         var tempBook = this.books[i];
  70.         // 格式化输出书签信息
  71.         console.log(" \n 标题: " + tempBook.title + " \n 网址: " + tempBook.url + " \n 星级: " + tempBook.star);
  72.     }
  73.     }
  74. };
  75. // 给数组构造函数的原型添加方法 (从删除中抽离出来的)
  76. // 按指定的标题查找元素的下标,并返回
  77. Array.prototype.myIndexOf = function (removeTitle) {
  78.     for (var i = 0; i < this.length; i++){
  80.         // 得到数组里的每个元素
  81.         var tempObj = this[i];      // this好强大
  82.         //找到匹配项并返回下标
  83.         if (tempObj.title === removeTitle){
  84.             return i;
  85.         }
  86.     }
  87.     return -1;      // 没找到的时候返回-1,模拟indexOf()方法
  88. };
  90. // 给数组构造函数的原型添加方法(通过指定元素的标题删除)
  91. Array.prototype.removeObj = function (removeTitle) {
  92.     var idx = this.myIndexOf(removeTitle);
  93.     if (idx > -1) {
  94.         this.splice(idx, 1);
  95.         return;
  96.     }
  97.     console.log("没有找到该标题的书签! ");
  98. };
  101. // 删除书签
  102. // removeTitle是个字符串,这里传的不是对象
  103. BookManager.prototype.removeBook = function (removeTitle) {
  105.     // 正常的方法
  106.     /*for (var i = 0; i < this.books.length; i++) {
  107.         if (this.books[i].title === removeTitle) {
  108.             this.books.splice(i, 1);
  109.             break;
  110.         }
  111.     }*/
  112.     this.books.removeObj(removeTitle);
  113. };
  115. // 通过标题修改书签的所有属性 (这里只举例修改url)
  116. BookManager.prototype.modifyBookUrlByTitle = function (targetTitle,modifyUrl) {
  117.     // 遍历书签数组,得到每一个书签对象
  118.     for (var i = 0; i < this.books.length; i++) {
  119.         // 得到每一个书签对象
  120.         var tempBook = this.books[i];
  121.         // 找到给定标题元素
  122.         if (tempBook.title === targetTitle) {
  123.             // 找到后,修改该书签的url
  124.             tempBook.url = modifyUrl;
  125.             return;
  126.         }
  127.     }
  128.     console.log("没有匹配的书签可以修改");
  129. };
  131. /*****************以上构造函数相关**************************/
  133. // 创建一个书签管理器对象
  134. var bookManager = new BookManager();
  135. // 创建一堆书签对象
  136. var book1 = new Book("www.baidu.com", "百度", 2);
  137. var book2 = new Book("www.tencent.com", "腾讯", 3);
  138. var book3 = new Book("www.google.com", "谷歌", 5);
  139. var book4 = new Book("www.163.com", "网易", 4);
  140. var book5 = new Book("www.sina.com", "百度", 5);    // 验证
  141. var book6 = new Book("www.baidu.com", "必读",1);    // 验证
  142. // 添加书签     (完善成批量添加)
  143. bookManager.addBook(book1);
  144. bookManager.addBook(book2);
  145. bookManager.addBook(book3);
  146. bookManager.addBook(book4);
  147. bookManager.addBook(book5);
  148. bookManager.addBook(book6);
  150. // 显示所有书签信息
  151. bookManager.showAllBookInfo();
  153. // 删除腾讯书签
  154. bookManager.removeBook("腾讯");
  156. // 打印分隔符
  157. console.log("********************************");
  159. // 显示所有书签信息
  160. bookManager.showAllBookInfo();
  162. // 修改书签 
  163. bookManager.modifyBookUrlByTitle("网易","www.1234.com");
  165. // 打印分隔符
  166. console.log("********************************");
  168. // 显示所有书签信息
  169. bookManager.showAllBookInfo();
  171. //修改书签（通过标题修改网址）
  172. bookManager.modifyBookUrlByTitle("网易2", "www.120.com");
  174. //打印分隔符
  175. console.log("===================");
  177. //显示所有书签信息
  178. bookManager.showAllBookInfo();
  180. </script>
  181. </head>
  182. <body>
  183. </body>
  184. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注