1. 程式人生 > >2018-10-31工作日報

2018-10-31工作日報

1.在我自己的專案實踐中,發現通過設定max-heightmin-height能有效解決很多問題,比如顯示的金額,由於長度不固定,導致其他div的定位無法固定。又比如下圖,這個使用者暱稱和評論內容,都是寬高無法寫死的元素。還有勳章跟在後面,這時有兩種解決辦法:
第一種是用max-width定一個最大寬度,保證暱稱和勳章始終在一起。
第二種是用css3的偽類::after即可

下面的評論內容,同時後面還必須有緊跟著的下面評論和點讚的div,這個時候也有兩種辦法,如果想要設定max-height也可,讓內容自動撐開亦可。
在這裡插入圖片描述

2.第二種實踐,下面這個列表由於無法使用flex佈局,同時金額也有不同的寬度要求,這時候也有兩種辦法:
第一種是寫死一個比較寬的寬度,然後使用margin-left

進行其他元素的定位。這種方法很麻煩的一點就是,不好量寬度,得一點一點調才可以。費很大精力。
第二種是把每個div寬度用百分比設定,這樣的話出來的效果相當於flex佈局,很方便。

在這裡插入圖片描述

3.要到了Vue專案的許可權,正好藉此來學習vue。之前雖然看完了vue的官方文件,但是包括vue-router、vuex以及ES6都亟待鞏固複習。

具體vue元件的頁面html是寫在<template>標籤裡的,樣式的話,如果無法複用,則可以用<style lang="stylus" scoped>寫在頁面最底下,表明作用域僅在當前vue頁面上。如果是複用多次的公共樣式,則需要寫在css裡並進行import。
順帶發現用到了我還沒見過的stylus

,趕緊來查一下:
stylus中文版參考文件之綜述

4.關於localStorage
localStorage使用總結
一般有三個方法用的比較多localStorage.removeItem(key)
localStorage.getItem(key) localStorage.setItem(key, value)

5.函式預設引數ES6

在ES5我們給函式定義引數預設值是怎麼樣?

function action(num) {
    num = num || 200
    //當傳入num時,num為傳入的值
    //當沒傳入引數時,num即有了預設值200
    return num
}

但細心觀察的同學們肯定會發現,num傳入為0的時候就是false,但是我們實際的需求就是要拿到num = 0,此時num = 200 明顯與我們的實際想要的效果明顯不一樣

ES6為引數提供了預設值。在定義函式時便初始化了這個引數,以便在引數沒有被傳遞進去時使用。

 function action(num = 200) {
        console.log(num)
    }
    action(0) // 0
    action() //200
    action(300) //300