臺積電總裁魏哲家：今年資本支出不變，維持 400-440 億美元
阿新 • • 發佈：2022-04-14
1.資料視覺化
資料視覺化的主要目的：藉助圖形化的手段，清晰有效地傳遞與溝通訊息
資料視覺化可以把資料轉換成圖形，揭示蘊含在資料中的規律和道理
- 常用的資料視覺化庫
- D3.js：目前Web端評價最高的javascript視覺化工具庫
- ECharts.js：百度出品的一個開源JavaScript資料視覺化庫
- Highercharts.js：國外的前端資料視覺化庫，非商用免費
- AntV：螞蟻金服全新一代資料視覺化解決方案
- Echarts使用五部曲
- 下載並引入echarts.js檔案
- 準備一個具備大小的DOM容器
- 初始化echarts例項物件
- 指定配置項和資料（option）
- 將配置項設定給echarts物件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title> Echarts體驗</title> 6 <!-- 1.下載引入echarts檔案 --> 7 <script src="js/echarts.js"></script> 8 </head> 9 <body> 10<!-- 2.準備一個盒子用來裝生成的圖表 注意：這個盒子必須具備大小 --> 11 <div id="main" style="width: 600px;height:400px;"></div> 12 <script> 13 // 3.例項化echarts物件 14 var chart = echarts.init(document.querySelector("#main")); 15 // 4.指定配置項和資料 16 varoption = { 17 title: { 18 text: 'ECharts 入門示例' 19 }, 20 tooltip: {}, 21 legend: { 22 data: ['銷量'] 23 }, 24 xAxis: { 25 data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] 26 }, 27 yAxis: {}, 28 series: [ 29 { 30 name: '銷量', 31 type: 'bar', 32 data: [5, 20, 36, 10, 10, 20] 33 } 34 ] 35 }; 36 // 5.將配置項和資料(option)設定給例項物件(chart) 37 chart.setOption(option); 38 </script> 39 </body> 40 </html>
- 選擇不同型別圖表（官網-例項-官方例項）
- 相關配置講解
| title | 標題元件 |
| tooltip | 提示框元件 |
| legend | 圖例元件 |
| toolbox | 工具欄 |
| grid | 直角座標系內繪圖網格 |
| xAxis | 直角座標系grid中的x軸 |
| yAxis | 直角座標系grid中的y軸 |
| series | 系列列表。每個系列通過type決定自己的圖表型別 |
| color | 調色盤顏色列表 |
-
- series：系列列表
| type | 型別（什麼型別的圖表）比如line是折線bar柱形 |
| name | 系列名稱，用於tooltip的顯示，legend的圖例篩選變化 |
| stack | 資料堆疊，蛇果設定相同值則會資料堆疊（資料一次疊加） |
- 邊框圖片及其切割原理
- 邊框圖片使用場景
盒子大小不已，但是邊框樣式相同，此時就需要邊框圖片來完成
-
- 邊框圖片（在CSS3中新增了border-image屬性，這個新屬性允許指定一幅影象作為元素的邊框）
- 邊框圖片切圖原理：
- 將四個角切出去（九宮格的由來，中間部分可以鋪排、拉伸或者環繞）上右下左
- 邊框圖片使用語法
| 屬性 | 描述 |
| border-image-source | 用在邊框圖片的路徑 |
| border-image-slice | 圖片邊框向內偏移（裁剪的尺寸，一定不加單位，上右下左的順序） |
| border-image-width | 圖片邊框的寬度（需要新增的的單位）邊框圖片的寬度，不會擠壓文字 |
| border-image-repeat | 圖片邊框是否應平鋪（repeat）、鋪滿（round）或拉伸（stretch）預設拉伸 |
-
- 通過類名呼叫字型圖示
- 在HTML頁面引入字型圖示中css檔案
- 標籤直接呼叫圖示對應的類名即可
- 通過類名呼叫字型圖示
2.JavaScript面向物件程式設計
- 面向過程程式設計：POP
面向過程就是分析出解決問題所需要的步驟，然後使用函式將步驟實現，最後通過呼叫函式解決問題
- 面向物件：OOP
將事務分解成為一個個物件，然後由物件之間分工合作（面向物件是以物件功能來劃分問題，而不是步驟）
- 面向物件的特性
- 封裝性
- 繼承性
- 多型性
- 面向過程和麵向物件的對比
| 面向過程（蛋炒飯） | 面向物件（蓋澆飯） |
|
優點：效能比面向物件高，適合跟硬體聯絡很緊密的東西 例如：微控制器就採用面向過程程式設計 |
優點：易維護、易複用、易擴充套件，由於面向物件有封裝、繼承、多型的特性 可以設計出低耦合的系統，是系統更加靈活，更加易於維護 |
| 缺點：沒有面向物件易維護、易複用、易擴充套件 | 缺點：效能比面向過程低 |
- ES6中的類和物件
- 面向物件的思維特點
- 抽取物件公用的屬性和行為組織（封裝）成一個類
- 對類進行例項化，獲取類的物件
- 物件
- 物件是一個具體的事務
- 物件特指類中的某一個，通過例項化一個具體的物件
- 類
- 可以使用class關鍵字宣告一個類
- 類抽象了物件的公共部分，它泛指某一大類
- 類抽取了物件的公共部分，它泛指某一大類
- 面向物件的思維特點
- 建立類
- 類constructor建構函式
constructor()方法是類的建構函式，用於傳遞引數，返回例項物件，通過new命令生成物件例項時，自動呼叫該方法
如果沒有顯示定義，類內部會自動給我們建立一個constructor()
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>建立類</title> 6 </head> 7 <body> 8 <script> 9 //1.建立類class 建立一個明星類 10 class Star{ 11 constructor(uname) { 12 this.uname = uname; 13 } 14 } 15 //2.利用類建立物件 16 var bbh = new Star('邊伯賢');//只要包含new，自動呼叫constructor 17 console.log(bbh.uname); 18 /* 19 1.通過class關鍵字建立類，類名我們還是使用首字母大寫 20 2.類裡面有個constructor函式，可以接受傳遞過來的引數，同時發返回例項物件 21 3.constructor函式只要new生成例項時，就會自動呼叫這個函式，如果我們不寫這個函式，類也會自動生成 22 4.生成例項new不能省略 23 5.語法規範：建立類，類名後面不要加小括號，生成例項，類名後面加小括號，建構函式不需要加function 24 */ 25 </script> 26 </body> 27 </html>
- 類中建立共有方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>類中建立共有方法</title> 6 </head> 7 <body> 8 <script> 9 //1.建立類class 建立一個明星類 10 class Star{ 11 constructor(uname) { 12 this.uname = uname; 13 } 14 sing(song){ 15 console.log(this.uname+'唱'+song); 16 } 17 } 18 //2.利用類建立物件 19 var bbh = new Star('邊伯賢');//只要包含new，自動呼叫constructor 20 console.log(bbh.uname); 21 //3.我們類裡面所有的函式不需要寫function 22 //4.多個函式之間不需要新增逗號分隔 23 bbh.sing('Amusement park'); 24 </script> 25 </body> 26 </html>
- 類繼承和super關鍵字
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 //1.類的繼承 10 class Father{ 11 constructor(xing) { 12 this.xing = xing; 13 } 14 money(sum){ 15 console.log(this.xing+'某某的兒子繼承了他的'+sum+'元財產'); 16 } 17 } 18 class Son extends Father { 19 // constructor(ming) { 20 // this.ming = '伯賢'; 21 // } 22 //報錯： Must call super constructor in derived class before accessing 'this' 23 // or returning from derived constructor at new Son 24 constructor(xing) { 25 super(xing); 26 } 27 } 28 var son = new Son('邊'); 29 son.money(1000000); 30 // super關鍵字用於訪問和呼叫物件父類上的函式，可以呼叫父類的建構函式，也可以呼叫父類的普通函式 31 </script> 32 </body> 33 </html>
-
- super呼叫父類的普通函式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 class Father { 10 say(){ 11 return "兒子兒子我是你爸爸~~~"; 12 } 13 } 14 class Son extends Father { 15 say(){ 16 // console.log("爸比你會唱小星星嗎???"); 17 console.log(super.say()+'Σ(⊙▽⊙"a唱錯了'); 18 //super.say就是呼叫父類中的普通函式say 19 } 20 } 21 var son = new Son(); 22 son.say(); 23 //繼承中的屬性或者查詢原則：就近原則 24 //1.繼承中，如果例項化子類輸出一個方法，先看子類有沒有這個方法，如果有就先執行子類的 25 //2.繼承中，如果子類裡面沒有，就去查詢父類有沒有這個方法，如果有，就執行父類的這個方法（就近原則） 26 </script> 27 </body> 28 </html>
-
- 子類繼承父類方法同時擴充套件自己的方法
子類建構函式中使用super，必須放到this前面
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>子類繼承父類方法同時擴充套件自己的方法</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 class Father{ 10 constructor(x,y) { 11 this.x = x; 12 this.y = y; 13 } 14 sum(){ 15 console.log(this.x + this.y); 16 } 17 } 18 // 子類繼承父親加法方法 同時 擴充套件減法方法 19 // 子類建構函式中使用super，必須放到this前面(必須先呼叫父類的構造方法，再使用子類構造方法) 20 class Son extends Father { 21 constructor(x,y) { 22 //呼叫父類的建構函式 23 super(x,y); 24 this.x = x; 25 this.y = y; 26 } 27 sum(x,y){ 28 super.sum(x,y); 29 } 30 multiply(){ 31 console.log(this.x - this.y); 32 } 33 } 34 var son = new Son(5,3); 35 son.sum(); 36 son.multiply(); 37 </script> 38 </body> 39 </html>
- 注意點
- 在ES6中沒有變數提升，所以必須先定義類，才能通過類例項化物件
- 類裡面共有的屬性和方法一定要加this呼叫
-
類裡面this的指向問題
- constructor裡面的this指向的是建立的例項化物件
- 方法裡面的this指向的是這個方法的呼叫者
- 面向物件案例（動態新增標籤頁）
- html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/jquery-3.6.0.js"></script> 7 <script src="js/tab.js"></script> 8 <style type="text/css"> 9 * { 10 padding: 0; 11 margin: 0; 12 } 13 14 .box { 15 margin-top: 100px; 16 text-align: center; 17 } 18 19 .tab { 20 position: relative; 21 margin: 20px auto; 22 width: 600px; 23 height: 300px; 24 border: 1px solid firebrick; 25 } 26 27 .lab { 28 float: left; 29 position: absolute; 30 top: 0; 31 left: 0; 32 } 33 34 .lab li { 35 position: relative; 36 float: left; 37 list-style: none; 38 height: 30px; 39 width: 80px; 40 border-right: 1px solid firebrick; 41 border-bottom: 1px solid firebrick; 42 line-height: 30px; 43 cursor: pointer; 44 } 45 46 .close { 47 position: absolute; 48 height: 10px; 49 width: 10px; 50 top: 0; 51 right: 0; 52 color: white; 53 background-color: #000000; 54 border-bottom-left-radius: 8px; 55 font-size:8px; 56 line-height: 10px; 57 text-align: right; 58 cursor: pointer; 59 } 60 61 .btn { 62 float: right; 63 margin-top: 8px; 64 margin-right: 8px; 65 width: 15px; 66 height: 15px; 67 background-color: rgb(255, 255, 255); 68 border: 1px solid firebrick; 69 line-height: 15px; 70 } 71 72 .add { 73 float: right; 74 height: 30px; 75 border-bottom: 1px solid firebrick; 76 } 77 78 .content { 79 height: 269px; 80 margin-top: 31px; 81 } 82 83 .lab .current { 84 border-bottom: none; 85 } 86 87 .content section { 88 display: none; 89 } 90 91 .tab .now { 92 display: block; 93 text-align: left; 94 line-height: 30px; 95 text-indent: 1em; 96 } 97 98 .lab li textarea { 99 display: inline-block; 100 margin-top: 5px; 101 height: 20px; 102 width: 75px; 103 } 104 .content textarea { 105 display: inline-block; 106 margin: 5px auto; 107 height: 250px; 108 width: 570px; 109 } 110 </style> 111 </head> 112 <body> 113 <div class="box"> 114 <h5>JS 面向物件 動態新增標籤頁</h5> 115 <div class="tab"> 116 <ul class="lab"> 117 <li index = '0' class="current"> 118 測試1 119 <div class="close">x</div> 120 </li> 121 <li index = '1'> 122 測試2 123 <div class="close">x</div> 124 </li> 125 <li index = '2'> 126 測試3 127 <div class="close">x</div> 128 </li> 129 </ul> 130 <div class="add"> 131 <input class="btn" type="button" value="+"/> 132 </div> 133 <div class="content"> 134 <section id = "0" class = "now">測試1</section> 135 <section id = "1">測試2</section> 136 <section id = "2">測試3</section> 137 </div> 138 </div> 139 </div> 140 </body> 141 </html>
-
- tab.js
1 $(function(){ 2 change(); 3 function change(){ 4 var add = document.querySelector(".add"); 5 var lab = document.querySelector(".lab"); 6 var tab = document.querySelector(".tab"); 7 add.style.width = tab.offsetWidth - lab.offsetWidth - 1 + 'px'; 8 } 9 /* 10 Tab實現的功能 11 1.頁面切換 12 2.頁面新增 13 3.頁面刪除 14 4.頁面編輯 15 */ 16 var that; 17 class Tab{ 18 constructor(box) { 19 that = this; 20 this.box = box; 21 this.lis = this.box.querySelectorAll("li"); 22 this.btn = this.box.querySelector(".btn"); 23 this.sections = this.box.querySelectorAll(".content section"); 24 this.content = this.box.querySelector('.content'); 25 this.ul = this.box.querySelector(".lab"); 26 this.init(); 27 } 28 init(){ 29 this.updateTab(); 30 this.btn.onclick = this.addTab; 31 for(var i = 0 ; i < this.lis.length ; i++){ 32 this.lis[i].onclick = this.toggleTab; 33 this.lis[i].ondblclick = this.modifyTab; 34 this.lis[i].children[0].onclick = this.delTab; 35 } 36 for(var j = 0 ; j < this.sections.length ; j++){ 37 this.sections[j].ondblclick = this.modifyTab; 38 } 39 } 40 //更新資料 41 updateTab(){ 42 that.lis = that.box.querySelectorAll(".lab li"); 43 that.sections = that.box.querySelectorAll(".content section"); 44 } 45 //1.頁面切換 46 toggleTab(){ 47 that.init(); 48 for(var i = 0 ; i < that.lis.length ; i++){ 49 that.lis[i].className = ''; 50 that.sections[i].className = ''; 51 } 52 this.className = "current"; 53 var section = document.getElementById(this.getAttribute("index")); 54 section.className = 'now'; 55 change(); 56 } 57 //2.頁面新增 58 addTab(){ 59 that.init(); 60 var num = Math.random()*100; 61 if(that.lis.length == 0){ 62 var li = "<li index = "+that.lis.length+" class='current'>新增<div class='close'>x</div></li>"; 63 var section = "<section id = "+that.sections.length+" class = 'now'>新建"+num+"</section>"; 64 that.content.insertAdjacentHTML('beforeend',section); 65 that.ul.insertAdjacentHTML('beforeend',li); 66 }else { 67 var key = +that.lis[that.lis.length-1].getAttribute("index") + 1; 68 var li = "<li index = "+key+" class='current'>新增<div class='close'>x</div></li>"; 69 var section = "<section id = "+key+" class = 'now'>新建"+num+"</section>"; 70 that.content.insertAdjacentHTML('beforeend',section); 71 that.ul.insertAdjacentHTML('beforeend',li); 72 } 73 that.init(); 74 that.lis[that.lis.length-1].click(); 75 } 76 //3.頁面刪除 77 delTab(e){ 78 if(this.parentNode.className === 'current' && this.parentNode.previousElementSibling != null){ 79 this.parentNode.previousElementSibling.click(); 80 }else if(this.parentNode.className === 'current' && this.parentNode.previousElementSibling == null && this.parentNode.nextElementSibling != null){ 81 this.parentNode.nextElementSibling.click(); 82 } 83 this.parentNode.remove(); 84 var section = document.getElementById(this.parentNode.getAttribute("index")); 85 section.remove(); 86 //阻止冒泡到li的點選事件 87 e.stopPropagation(); 88 change(); 89 } 90 //4.頁面修改 91 modifyTab(e){ 92 // 阻止預設選中文字 93 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 94 var str = this.firstChild.nodeValue; 95 var reg = /\S/g; 96 this.innerHTML = '<textarea></textarea>'; 97 this.children[0].value = str.match(reg).toString().replace(/,/g,''); 98 this.children[0].select(); 99 this.children[0].addEventListener("blur",function(){ 100 var word = this.value; 101 if(this.parentNode.tagName === "LI"){ 102 this.parentNode.innerHTML = word+'<div class="close">x</div>'; 103 }else{ 104 this.parentNode.innerHTML = word; 105 } 106 }) 107 this.children[0].onkeyup = function(e){ 108 if(e.key === 'Enter'){ 109 this.blur(); 110 } 111 } 112 e.stopPropagation(); 113 } 114 } 115 new Tab(document.querySelector(".box")); 116 })