項目實踐 · JS與WEB前端框架技術

# 知識點 * [ ] 使用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> ```