本周學習總結(ng-zorro/MDN索引/讀書筆記)

按鈕

<button ng-button nzType="primary">Primary</button>
nzType=""   primary/default/dashed/danger

按鈕內部嵌入圖標

 <button nz-button nzType="primary">
    Search<i nz-icon type="search"></i>
  </button>

大小

nzSize large 大 small 小

按鈕組

<nz-button-group [nzSize]="size">     
      <button nz-button nzType="primary"><i nz-icon type="left"></i>Backward</button>
      <button nz-button nzType="primary">Forward<i nz-icon type="right"></i></button>
    </nz-button-group>
size='large'
可以統一設置按鈕組的大小

禁用

<button nz-button nzType='primary' disabled>禁用</button>
<button nz-button nzType='primary' [disabled]=false>不禁用</button>

加載的按鈕

<button nz-button nzType="primary" nzLoading>
    Loading
  </button>

  <button nz-button nzType="primary" [nzLoading]=false>
    Loading
  </button>

nzBlock

按鈕適合父寬度
    <button nz-button nzType="primary" nzBlock>Primary</button>

圖標

使用<i nz-icon></i>  聲明組件
nzType 設置對應的圖標
nzSpin 屬性實現動畫旋轉
  <i nz-icon [nzType]="'sync'" [nzSpin]="true"></i>

nzTheme 屬性為 twotone 來渲染雙色圖標
[nzTwotoneColor]  來設置顏色
<i nz-icon [nzType]="'check-circle'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#52c41a'"></i>

使用阿里圖標庫(這個很好用)

html

<i nz-icon [nzIconfont]="'icon-twitter'"></i>

ts
import { NzIconService } from 'ng-zorro-antd';

 constructor(private _iconService: NzIconService) {
    this._iconService.fetchFromIconfont({
      scriptUrl: '../../../assets/iconfont.js' //下載圖標路徑的js
    });
  }

兼容圖標的寫法

<i nz-icon [type]="'star'" [theme]="'fill'"></i>

設置class或者style會以SVG的形式渲染

<i nz-icon [type]="'message'" style="font-size: 16px; color: #08c;"></i>

ng-zorro 布局篇

    <div nz-row>
      <div nz-col nzSpan="12">col-12</div>
      <div nz-col nzSpan="12">col-12</div>
    </div>
父盒子帶有 nz-row 子盒子帶有nz-col,因為24柵格,nzSpan="6"

柵格常常需要間隔 nzGutter
父元素
<div nz-row nzGutter="16">  推薦 8n+8
 
左右偏移
子盒子   nzoffset="4"

ng-zorro Flex布局

父元素添加 nzType="flex"
水平方向  nzJustify=""  start,center,end,space-between,space-around
<div nz-row nzType="flex" nzJustify="start">
        <div nz-col nzSpan="4">col-4</div>
垂直方向 nzAlign=""  top  middle  bottom
 <div nz-row nzType="flex" nzJustify="space-around" nzAlign="middle">

響應式布局

xs	      sm	     md    lg	xl	xxl
12刪格
<768      >=768     >=992     1200    
    
     <div nz-row>
          <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">
     </div>
         
[nzXs]	<576px 
[nzSm]	≥576px 
[nzMd]	≥768px 
[nzLg]	≥992px 
[nzXl]	≥1200px 
[nzXXl]	≥1600px 

向右移動的個數

[nzPull]	柵格向左移動格數	
[nzPush]	柵格向右移動格數
   <div nz-row>
      <div nz-col [nzSpan]="18" [nzPush]="6">
        col-18 col-push-6
      </div>
      <div nz-col [nzSpan]="6" [nzPull]="18">
        col-6 col-pull-18
      </div>
    </div>
可以調換兩個盒子的順序,但是不會改變他們的大小,,如果要交換位置就是這個,
    不行的話就用偏移

圖釘

nz-affix 標簽
 [nzOffsetTop]="120"  下面滾動距離上面的距離 
   <nz-affix>
      <button nz-button [nzType]="'primary'">
        <span>Affix top</span>
      </button>
    </nz-affix>

[nzOffsetBottom]	距離窗口底部達到指定偏移量后觸發	number	
[nzOffsetTop]	距離窗口頂部達到指定偏移量后觸發   number
注意圖釘不要使用定位

表格

<nz-table #nzTable
[nzShowPagination]="total>10"
nzShowSizeChanger 
nzShowQuickJumper
[nzFrontPagination]="false"
[nzData]="searchResult" 
[nzPageSizeOptions]="[10, 20, 50, 100]" [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize"
[nzShowTotal]="totalTemplate"
    [nzTotal]="total" [nzLoading]="loading" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
    
  [nzShowPagination]	是否顯示分頁器 
  [nzShowSizeChanger]	是否可以改變 nzPageSize
  [nzShowQuickJumper]	是否可以快速跳轉至某頁
  [nzFrontPagination]	是否在前端對數據進行分頁，如果在服務器分頁數據或者需要在前端顯示全部數據時傳入 false
[nzData]	數據數組
[nzPageSizeOptions]	頁數選擇器可選值
[nzPageIndex]	當前頁碼，可雙向綁定
[nzPageSize]	每頁展示多少數據，可雙向綁定
[nzShowTotal]	用於顯示數據總量和當前數據范圍，用法參照 Pagination 組件

<ng-template #totalTemplate let-total>共 {{total}} 條</ng-template>

分頁

 <nz-table #nzTable [nzShowPagination]="total>10"
                  nzShowSizeChanger nzShowQuickJumper
                  [nzFrontPagination]="false"
                  [nzData]="listOfData" [nzPageSizeOptions]="[10,
                  20, 30,40]" [(nzPageIndex)]="page"
                  [(nzPageSize)]="page_size"
                  [nzShowTotal]="totalTemplate" [nzTotal]="total"
                  [nzLoading]="loading"
                  (nzPageIndexChange)="searchData()"
                  (nzPageSizeChange)="searchData(true)">
                      
<ng-template #totalTemplate let-total>共 {{total}} 條</ng-template>                
ts

  // 表格的設置項
  public page = 1;
  public page_size = 10;
  public total: any; //多少條數據
  public listOfData: any = [];//表單數據

  searchData(reset: boolean = false) {
    if (reset) {
      this.page = 1;
    }
    this.loading = true;
    const params = {
      page: this.page,
      page_size: this.page_size
    };
    this.http.get('/api/v1/get_ip/shows_blocked_ips/', params).subscribe(res => {
      console.log(res);
      if (res['status'] === 1) {
        this.total = res['total'];
        this.listOfData = res['data'];
        this.loading = false;
      } else {
        this.loading = false;
        this.nzMsg.create('error', `請求出錯！`);
      }
    })
  }

Layout布局

nz-layout  布局容器
下面的標簽都只能放在nz-layou中
        nz-header  頂部布局
        nz-sider   側邊欄
        nz-content  內部部分
        nz-footer   底部布局
[nzWidth]="numer"   寬度
[nzTheme]="'light'"  主題顏色,默認藍色 'light'｜'dark'  白色或者藍色
<nz-layout>
  <nz-header>header</nz-header>
  <nz-layout>
    <nz-sider>left sidebar</nz-sider>
    <nz-content>main content</nz-content>
    <nz-sider>right sidebar</nz-sider>
  </nz-layout>
  <nz-footer>footer</nz-footer>
</nz-layout>

面包屑

自動面包屑

路由
 {
    path: 'apple',
    component: ArticleComponent,
    data: {
      breadcrumb: 'Apple'
    },
    children: [
      {
        path: 'steve',
        component: ArticleComponent,
        data: {
          breadcrumb: 'Steve'
        },
        children: [
          {
            path: 'jobs',
            component: ArticleComponent,
            data: {
              breadcrumb: 'Jobs'
            }
          }
        ]
      }
    ]
  }

html

<nz-breadcrumb [nzAutoGenerate]="true"></nz-breadcrumb>

<nz-divider></nz-divider>  //分割線

<router-outlet></router-outlet>
See the first: <a [routerLink]="'apple'">Apple</a><br>
See the second: <a [routerLink]="'apple/steve'">Steve</a><br>
See the third: <a [routerLink]="'apple/steve/jobs'">Jobs</a><br>

不會的話就用簡單點
  <nz-breadcrumb>
      <nz-breadcrumb-item>
        <a [routerLink]="['../../']">Home</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        Breadcrumb
      </nz-breadcrumb-item>
    </nz-breadcrumb>

前言

網址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Index?tdsourcetag=s_pctim_aiomsg

接下來很長的不斷時間我將會學習MDN索引的所有內容,我會記錄學習過程中我平時忽略又覺得很重要的知識點,有時候覺得自己基礎不太好,所以要多重復,多復習才能讓自己變得更加優秀

今天看到一遍文章,說的是類似<<師說>>到底在學習互聯網是否需要老師,雖然每個人都希望能有一個老師帶自己,但是現實也是很殘酷的,很多時候我們都是自己一個坑一個坑的去填,雖然那篇文章說的好,牛逼的人會向比他們更牛逼的人吸取技能,但是當我們身邊沒有這樣的人,也沒有能夠跟你一起談論學習,一起探討學習方法的人,但是我還是覺得人生要有追求,熱情這東西只有再該有的年齡才會有的,如果你錯過了這個時期,可能以后就沒有機會

隨着我們年紀越來越大,我們的記憶力思想積極性都變得越來越沒有意義,有時候在想,怎么讓自己的生活變得越有意思,我覺得有追求的生活是最有意思的,比如讓自己成為大牛

樹立好自己的人生方向和目標,比如反婚(不走老套路,讓自己能有更多時間的去追求自己想要的東西),還有時間這東西,還是不說吧,沒准過過幾年我會覺得自己的想法是多么的幼稚

黃金十年

Array.entries(), Array.key() ,Array.vlaues()

var arr = ["a", "b", "c"];
var iterator = arr.entries();
for (let e of iterator) {
    console.log(e);
}

// [0, "a"] 
// [1, "b"] 
// [2, "c"]

let a = ['a', 'b', 'c'].keys();
for(let key of a){
  console.log(key); //0 ,1 ,2
}

let a = ['a', 'b', 'c'].values();
for(let key of a){
  console.log(key);
}
// 'a' 'b' 'c'

其實可以用  for in 拿到索引    for of 拿到值

Array.fill(value[,start[,end])

value
用來填充數組元素的值。
start 可選
起始索引，默認值為0。
end 可選
終止索引，默認值為 this.length。

console.log([1, 2, 3, 4, 5, 6].fill(4,4));
// [ 1, 2, 3, 4, 4, 4 ]

filter

搜索過濾條件

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
const filterItem=query=>{
    return fruits.filter(value=>
                        value.toLowerCase().indexOf(query.toLowerCase())>-1
                        )
}

理解 indexOf 找到返回索引沒有找到返回-1
console.log('abc'.indexOf('bc'));  //1

扁平化

var arr1 = [1, 2, [3, 4]];
console.log(arr1.reduce((a, v) => a.concat(v), []));

多層
var arr1 = [1, 2, [3, 4, [3, 4, [4, 5, [7, 8, 9, [5, 6]]]]]];
const flatDeep=(arr)=>{
  return arr.reduce((a, v) => Array.isArray(v) ? a.concat(flatDeep(v)) : a.concat(v), []);
};
console.log(flatDeep(arr1));

reduce等價map

[1,2,3,4,5].reduce((a,v)=>a.concat(v*2),[])

includes

參數  
*  元素值
* 	索引(可選)   從第幾個索引開始
[1,2,3].includes(2)   //true
[1,2,3,NaN].includes(NaN)  //true
當索引大於數組長度,該數組不會搜索
當索引小於0,則整個數組都會搜索

書(深入理解javascript特性)

可計算屬性名

var grocery = {
  id: 'bananas',
  name: 'Bananas',
  units: 6,
  price: 10,
  currency: 'USD'
};
let groceries={
  [grocery.id]:grocery
};
console.log(groceries);


//第二種情況
function getEnvelope(type, description) {
  return {
    // type:description 不行的
    [type]:description
  }
}

console.log(getEnvelope('sss', 'ggg'));

方法的定義

let obj={
    emit(){
        return {name:'zhangsan',age:12}
    }
}

擴展運算符

var list = ['a', 'b', 'c', 'd', 'e'];
let {a,b,...other}=list;
let [c,d,...first]=list;
console.log(other);//類數組
console.log(first);//數組
		ES5							ES6
list.push.apply(list, items)    list.push(...items)

class

class LocalStorage {
  constructor(key) {
    this.key = key
  }
  get data() {
    return JSON.parse(localStorage.getItem(this.key))
  }
  set data(data) {
    localStorage.setItem(this.key, JSON.stringify(data))
  }
}

const ls = new LocalStorage('groceries');
ls.data = ['a', 'b', 'c'];
console.log(ls.data);