# HyUI內訓會議記錄
###### tags: `HyUI4.0`
時間:2022/12/13.14
參與人員: 琬樺 恬恬 切切切成員 奕雯
會議紀錄：
## 12/13
### 定義github相關規範
* 增加 github hyui readme 相關規範
* 以後下載hyui模板都經由releases下載，確保是最新的檔案
* 以後回報問題時可以使用github的issue功能，可以直接連commit的問題，並且可以指定需要注意的人員
* github Milestones的相關教學
* github Projects的相關教學
### vscode git 終端機基礎教學
### vscode 設定安裝
* 寵物設定檔分享
* 工作區與User設定建立討論
* 推薦套件分享
### JS簡介 / 變數 / 資料型別
* 由網景開發(Netscape)，後續由google工程師撰寫V8引擎，後來瀏覽器就開始支援javascript
* javascript可使用在前端、後端、手機app
* javascript的前世今生
* javascript是弱型別語言
* javascript可分為原始型別、物件型別
* 原始型別有七種 Number、String、Undefined、Null、Boolean、Symbol(於 ECMAScript 6 新定義)、BigInt
* 自動轉型有明的和暗的(Number+String = String / String*Number = Number)
* 有宣告沒附值就會是Undefined
* NaN等於Number不等於NaN
* Null等於物件，但這是Bug
### 陣列與物件
##### 陣列
* 有兩種方式可以產生陣列
```javascript=
//Array Constructor (陣列建構式)
let array = new Array()
//Array Literal (陣列實字)
let array = [1,2,3,4]
```
* 陣列使用[]包裹，使用[]取值 array[0]
* length可以計算陣列內的數量，又或是更改陣列的數量，變更後的數量如果比原始的小，該陣列的值會直接消失，就算把數量加回來，也會是空值(Undefined)
* 陣列第一筆為0
* 可以用.push()增加陣列內容
* 可以利用array[X]增加陣列內容
* 陣列內可以有字串、數字、物件、陣列、function
##### 物件
* 有兩種方式可以產生物件
```javascript=
//Object Constructor (物件建構式)
let object = new Object()
//Object Literal (物件實字)
let object = [1,2,3,4]
```
* 物件使用{}包裹內容，使用 ./['']取值 object.object / object['object']
* 物件內可以有字串、數字、物件、陣列、function
* 可以用object.object = xxx 增加物件內容
### 函式 & ES6語法介紹
##### 函式
* 函式會包含三個部分
```javascript=
function xxx(){}
```
1.函式的名稱
2.()參數，參數與參數之間會 用逗號 , 隔開
3.{}執行的內容，是函式功能的主要區塊
* 定義函式的方式有三種
1.函式宣告(Function Declaration)
```javascript=
function xxx(){}
```
2.函式運算式(Function Expressions)
```javascript=
let fn = function(){}
```
3.透過 new Function 關鍵字建立函式
```javascript=
let fn = new function()
```
* 變數的有效範圍有分全域(window)和區域(function)，區域變數無法被全域抓到，只能在區域內使用
##### Hoisting
* 變數會被提升，但附值不會
```javascript=
function(){ var x = 100;}
function(){
var x;
x = 100;
}
```
* function 整體會被提升，不論在哪邊執行都可以運行function
##### ES6語法介紹
###### let、const
* ES6新增了let、const
* let、const沒有變數提升
* let、const不可重複命名
* let、const以{}為作用域
###### 樣板字面子
* 傳統要新增字串使用''/""，es6新增``可使用
* 不需要再使用+來連結字串並使用${表達式}
```javascript=
let name = 'jack';
console.log(`Hello ${name}`) //Hello jack
```
* 可以有預設資料使用 || 區隔
```javascript=
let name = '';
console.log(`Hello ${name || 'Mark'}`)
//Hello Mark
```
* 以前需要另外使用 \ 來將字串做換行，es6會依照輸入的字串分斷顯示在前台也會直接分斷
###### 箭頭函示
```javascript=
// 以前的宣告方式
let fn = function(){
return 'Hello'
}
//es6 的箭頭函示
let fn = () => {
return 'Hello'
}
//當函式只有一個參數時，不需要使用括號
const greeting = person => `Hello, ${person}`;
greeting('Aaron'); // Hello, Aaron
// 等同於這樣寫
const greeting = function (person) {
return `Hello, ${person}`;
};
//當函式沒有參數時，則一定要有括號
var callSomeone = () => '小明' + '吃飯了'
console.log(callSomeone())
```
12/14
### 控制判斷
* 呼叫 function 時的參數，或者透過 = 賦值時 在 = 「右側」的部分都屬於運算式
* 運算子的類型很多，依照性質來分類
* 算術運算子包括 數學四則運算「加、減、乘、除」
* 數字跟字串相加會變字串 10 + '100' = '10100'
* a++ 等於 a = a+1 / a-- 等於 a = a-1
* =是附值， == 是比較，=== 嚴謹比較，會比較型別
```javascript=
1 == '1' //true
1 === '1' //false
```
* a && b
```javascript=
var a1 = true && true; // t && t 回傳 true
var a2 = true && false; // t && f 回傳 false
var a3 = false && true; // f && t 回傳 false
var a4 = false && (3 == 4); // f && f 回傳 false
var a5 = "Cat" && "Dog"; // t && t 回傳 Dog
var a6 = false && "Cat"; // f && t 回傳 false
var a7 = "Cat" && false; // t && f 回傳 false
```
* a || b
```javascript=
var o1 = true || true; // t || t 回傳 true
var o2 = false || true; // f || t 回傳 true
var o3 = true || false; // t || f 回傳 true
var o4 = false || (3 == 4); // f || f 回傳 false
var o5 = 'Cat' || 'Dog'; // t || t 回傳 Cat
var o6 = false || 'Cat'; // f || t 回傳 Cat
var o7 = 'Cat' || false; // t || f 回傳 Cat
```
* 三元運算子
```javascript=
條件 ? 值1 : 值2;
//若不需要else也必須輸入''
條件 ? 值1 : '';
```
##### if / else if 介紹
##### switch 介紹
## 12/14
### for 迴圈
### for/while/do...while差別及介紹
for：
留意for括號最後面的元素是指跑完迴圈後，跑下一個迴圈前的變更
while 與 for 的差別：
for: 確定迴圈要跑多少次
while：不確定迴圈要跑多少次
do while：至少會跑迴圈一次
### foreach 寫法
```javascript
let data=[30,40]
data.forEach(
function(item,idx,array){
console.log(item,idx,array)
})
//第三個參數用到的機會不多
//寶弟demo
let arr=[8,5,4];
let count=0;
arr.forEach((item)=>{
count += item
})
console.log(count); //17
```
### 立即執行函式
立即執行的函式
在區域外無法調用函式
可以用window全域物件來傳遞
onclick只會執行最後一次綁定的
### addEventlister
addeventlister 預設是 false
冒泡事件與捕獲事件
console.log(e) 顯示執行的 event
e.target 執行該event的Dom元素
### JS常用語法
classList.add
classList.remove
style
main.style.paddingTop='20px'
要用駝峰命名
inertBefore
innerHtmL
...族繁不及備載
相關可參考
[HyUI 內訓大綱](https://hackmd.io/fVp_jjH_T7WOxOpyUsLtsQ)
### JS JQ 差異
...族繁不及備載
相關可參考
[HyUI 內訓大綱](https://hackmd.io/fVp_jjH_T7WOxOpyUsLtsQ)
### JS this
要看函式在哪裡執行 所決定this指向哪裡
### HYUi4.0
* icon 名稱錯誤
* color的部分 等更新ＵＩ再來做討論
(Hyui 可以再增加多色功能)
* @layer 裡面不要有!important
* swiper 介紹
* Hyui JS介紹
* JS語系支援問題(可問交力)
* fatfoot 開關
* 搜尋欄位 下拉開關
* git 解衝突 協作問題
## 臨時動議
#### 大家如果有問題 也可以在下方留言
Sign in with Wallet
Connect another wallet