小白致力於成為前後端開發程式設計師

BOBO~發表於2023-01-05

小白有個煩惱,做前端專案的時候,遇到兩種情況
一種是在vue框架下,使用HTML寫頁面,script部分程式碼裡面的方法基本上使用JS來寫;
一種同樣在vue框架下,透過安裝的框架來構建頁面,script中使用的方法也多是安裝的框架中封裝好的方法。
小白是個倒黴催的孩子,負責的專案比較多,常常在兩種情況下切來切去,以至於在寫JS處理資料時,常常用不對方法,
再加上小白JS基礎本來就不雄厚,常常花費很長時間處理一個JS問題,這還是透過搜尋解決的。
於是小白就想寫一點總結的內容,把遇到的點滴問題記錄下來,逐步增加處理VUE中JS的方法
那麼第一個問題就寫JS物件處理吧。

1.物件屬性的刪除

1   let object = {key:value,key1:value1}
2   this.$delete(this.object, 'key')
3   或者 delete this.object[key]

2.判斷是否存在某屬性

1   let object = {key:value,key1:value1}
2   this.object.hasOwnProperty('key') 

第二個問題寫JQuery陣列處理
1.陣列物件的刪除

1   let array = []
2  delete this.array[index]

2.陣列物件的查詢

1   let array = [{field:v1},{field:v2}]
2   let index = this.array.findIndex(a => a.field == 'v2')
3   let item = this.array.find(a => a.field == 'v1')

這邊需要注意一個方法:remove,remove方法應該是JQuery用於處理刪除html元素的,在處理資料時不應考慮

3.陣列的批次刪除

1   let array = ['mark', 'go', 'C#']
2   this.array.splice(index, num)

4.最後一個問題不是一個JQuery的問題,而是一個關於CSS的問題,記錄下來一是因為對於CSS真的會的不多,一是覺著這個問題應該會普遍。
就是input type='date'的html時間控制元件,只能點選一個小圖示選擇日期,透過修改CSS使可點選範圍擴大到選擇的時間,不多說直接上CSS程式碼

 1     input[type="date"]::-webkit-calendar-picker-indicator {
 2         background: transparent;
 3         bottom: 0;
 4         color: transparent;
 5         cursor: pointer;
 6         height: auto;
 7         left: 0;
 8         position: absolute;
 9         right: 0;
10         top: 0;
11         width: auto;
12     }

經過梳理小白發現整理的都是最基礎的問題,也瞭解了本質是自己對JQuery掌握不熟練才會有混亂的感覺,才會不知道如何去用方法處理資料。
事實上,NodeJs是在JS的基礎上開發出來的,只要掌握JS JQuery的方法,直接拿到開發VUE中同樣是可以使用的,不管VUE如何封裝,
如何包裝方法,其本質是不會變的,就是在JS和html的基礎上做了封裝。雖然小白整理的方法都很基礎,但是透過整理小白發現了本質,解決了困惑這個才是最重要的。

關於掌握不熟練有混亂的感覺,小白想起來在學習 go 的時候,碰到各種列印方法——Print、Fprint、Sprint,同樣會有混亂的感覺。好在 Go 的所有原始碼在安裝好Go後都會在安裝目錄中找到,
於是小白檢視了fmt包中的 print.go 的原始碼並對其中的Print的方法做了筆記和整理,下面是小白整理的筆記:

透過檢視包fmt中的print.go檔案,查詢到print的相關方法有:
Fprintf、Printf、Sprintf、Fprint、Print、Sprint、Fprintln、Println、Sprintln
print.go檔案中有以上9個方法的具體實現,在這僅僅做一下總結,想看原始碼就直接開啟print.go檔案檢視即可

 1         1.Fprintf 方法簽名:Fprintf(w io.Writer, format string, a ...interface{}) (n int, err error)
 2                   具體使用:甲:n, err := fmt.Fprintf(os.Stdout, "%s is %d years old.\n", name, age),返回寫的位元組數和是否有錯誤
 3                           乙:fmt.Fprintf(os.Stderr, "Fprintf: %v\n", err),其中返回值也可以忽略    
 4 
 5         2.Fprint   方法簽名:Fprint(w io.Writer, a ...interface{}) (n int, err error)
 6         
 7         3.Fprintln 方法簽名:Fprintln(w io.Writer, a ...interface{}) (n int, err error) 列印到指定輸出並換行
 8         
 9         4.Printf   方法簽名:Printf(format string, a ...interface{}) (n int, err error)
10                    具體使用:fmt.Printf("%d bytes written.\n", n) 
11                    內部呼叫Fprintf並指定標準輸出
12         
13         5.Print    方法簽名:Print(a ...interface{}) (n int, err error)
14                    內部呼叫Fprint並指定標準輸出
15         
16         6.Println  方法簽名:Println(a ...interface{}) (n int, err error)
17                    內部呼叫Fprintln並指定標準輸出
18         
19         7.Sprintf  方法簽名:Sprintf(format string, a ...interface{}) string                
20         
21         8.Sprint   方法簽名:Sprint(a ...interface{}) string
22                    具體使用:s := fmt.Sprint(name, " is ", age, " years old.\n")
23                 
24         9.Sprintln 方法簽名:Sprintln(a ...interface{}) string
25                    具體使用:s := fmt.Sprintln(name, "is", age, "years old.")
26                    使用其運算元的預設格式格式化並返回結果字串。運算元之間總是新增空格並附加換行符。
27         
28         區別:1.F 開頭輸出到指定輸出,S 開頭返回字串,P 開頭輸出到標準輸出
29              2.f 結尾,指定格式化方式格式化字串,t 結尾,使用運算元預設的格式化方式,ln 結尾,使用運算元預設的格式化方式,並換行

 透過這次整理,小白完全弄清楚了Print不同的使用方式,再也沒有了混亂的感覺!

相關文章