项目实践 · uni-app跨平台移动应用开发

# 知识点 * [ ] 使用class实现类 * [ ] 继承 * [ ] 静态方法 * [ ] 属性 * [ ] 剩余参数 * [ ] map/reduce/filter高阶函数 * [ ] Set * [ ] Array * [ ] forEach迭代 * [ ] 数组拼接 * [ ] 使用正则表达式进行字符串分割 # 面向对象方式实现的标签系统 ```js //使用面向对象的方式实现 class Tags extends Object { static merge(...tags) { let tagArray = tags.reduce((previous, current) => { return previous.concat(current); }); return [...new Set(tagArray)]; } /** * 将标签字符串转换为标签数组，支持多种分隔符号 * @param {标签自负换} tagString */ static create(tagString) { let newTag = tagString.trim(); // 匹配中文的和英文的逗号和分好作为分隔号，支持：,;#，； // 考虑英文但此间可能有空格，所以不能用空格间隔 const regex = /,|;|，|；|#/; let newTags = newTag.split(regex).map((val) => { return val.trim(); //去掉每个标签的首尾空格 }).filter((s) => { //把一个Array中的空字符串删掉 return s && s.trim(); // 注意：IE9以下的版本没有trim()方法 }); let set = new Set(newTags); //标签去重 set.delete('');//去掉零长度字符串 return [...set] //输出数组形式 } constructor() { super(); this._tags = []; //初始化 } get tags() { return this._tags } set tags(value) { this._tags = value; } //tag.add("tag1","tag2","tag3") //tag.add("tag1,tag2,tag3") add(...tags) { tags.forEach((tagString) => { if (Array.isArray(tagString)) { this.tags = Tags.merge(this.tags, tagString) } else { let tags = Tags.create(tagString); this.tags = Tags.merge(this.tags, tags) //或者使用如下的语法 //this.tags = this.constructor.merge(this.tags, tags) } }) } // tag.delete('tag') delete(tag) { let set = new Set(this.tags); set.delete(tag); this.tags = [...set]; } } ``` ``` <html> <head> <script src="tags.js"></script> <script> const tagInstance = new Tags(); tagInstance.add("软件"); tagInstance.add("背景，前端，，，，中国，电脑，人名币 "); tagInstance.add('计算机', '电脑'); tagInstance.add(['测试', '北京']); tagInstance.delete("计算机"); console.log(tagInstance.tags); //["软件", "背景", "前端", "中国", "电脑", "人名币", "测试", "北京" </script> </head> <body> <h1>标签录入系统</h1> </body> </html> ```