作者通過以進度條的設計深入淺出的講解關于FUI的設計思路。雖然FUI設計看起來很復雜，只要找準規(guī)律，從一些作品中總結(jié)分析細節(jié)，再運用到我們的設計中。想要了解的小伙伴可以嘗試一下。

前言

看到上期小伙伴想了解一下 FUI 的設計教程，所以這次再次和大家聊一下關于 FUI 的設計風格，我們以“進度條”的設計教程為例，深入淺出的聊一下關于 FUI 的設計思路，因為主要設計思路的延展，所以不會出現(xiàn)具體的數(shù)據(jù)參數(shù)，小伙伴們要諒解啊。

目錄

1.風格介紹

2.設計思路

3.總結(jié)

1.風格介紹

關于 FUI 的定義，閱讀過我上一篇文章的小伙伴可能對 FUI 的定義有了一個較為清晰的定義，即 FUI 是：虛構(gòu)的、未來的、幻想的用戶界面。

2.機甲風格

機甲風格相對于軍事風格的最大特點就是：“具有一定的裝飾圖形元素，或多或少?！睓C甲風格最大的特點便是具有機械或者機甲風格的裝飾元素，其中多為異形元素。其靈感來源于工業(yè)設計，從機械和機甲的工業(yè)設計語言中提取圖形元素，在運用到界面設計上。如下圖，異形的機甲風格讓機器人的頭部設計顯得更加統(tǒng)一，如果換成當前流行的扁平化設計，可能就顯得有點奇怪了。

機甲風格的發(fā)展歸功于科幻題材故事的發(fā)展，為人們打開腦洞，暢想更多的可能性。在設計上激發(fā)了 FUI 的誕生，無論是賽博朋克、廢土題材、還是漫威、DC宇宙中的科幻影視作品中我們都能看到機甲風格的界面設計。

我們可以放入界面當中感受一下視覺效果：

設計樣式 – 機甲風格

我們再來進階一下，設計一個機甲元素的的進度條。

機甲風格看似裝飾圖形復雜，設計難度復雜，但其實我們只需要掌握好 – “提煉元素”這項技能就能完美應對機甲風格的設計。

我們再回顧對創(chuàng)意設計的定義：是把再簡單不過的東西或想法不斷延伸給予的另一種表現(xiàn)方式。這里我們可以理解為將機甲元素進行提煉總結(jié)，延伸到彈框設計當中。例如下圖，漂亮的小姐姐一秒鐘變機械美女，就是通過對機械元素延展到模特身上。

第一步，照一張你喜歡的不錯的參考，這里你可以找成熟的界面設計作品，也可以找一張不錯的關于機甲風格的參考，以便于自己進行元素提取。這里我們以大家熟悉的高達為例：

我們從中提取我們需要的圖形，如下圖：

最后我們我們需要仔細思考將圖形進行組合，多嘗試幾次他們的組合方式。這里我對提取的元素進行了二次加工，將圖形一和圖形四進行了結(jié)合，打破固有的組合規(guī)律，讓圖形看起來更加生動。

最后我們可以放入界面當中感受一下視覺效果：

轉(zhuǎn)載自簡書

作者：極創(chuàng)設計

鏈接：https://www.jianshu.com/p/77665c771153

來源：簡書

著作權歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權，非商業(yè)轉(zhuǎn)載請注明出處。

藍藍設計( www.miumiuwan.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

大多數(shù)文章中，我們并未特別注意CSS文件的可維護與可讀性的問題，當完成一項前端的工作之后，許多人都會忘記該項目的結(jié)構(gòu)與細節(jié)。然而代碼并不是馬上就能完全定型，在余下的時間里還有不斷的維護工作，而這些工作也許不會是你自己完成。所以，結(jié)構(gòu)優(yōu)良的代碼能很大程度上優(yōu)化它的可維護性。下面列出四則技巧提高CSS文件可維護性的方法，以此作為指南，以一種較好的CSS樣式組織習慣來進行WEB前端開發(fā)。



一、CSS樣式文件分解



對于小項目，在寫代碼之前，按頁面結(jié)構(gòu)或頁面內(nèi)容將代碼分為幾塊并給予注釋。例如，可以分別將 全局樣式、布局、字體樣式、表單、評論和其他分為幾個不同的塊來繼續(xù)工作。



而對于較大的工程，這樣顯然不會有什么效果。此時，就需要將樣式分解到幾個不同的樣式表文件。下面的master stylesheet 就是這一方法的例子，它的工作主要是導入其他樣式文件。使用這一方法不僅能優(yōu)化樣式結(jié)構(gòu)，而且有利于減少一些不必要的服務器請求。而分解文件的方法就有許多種，master stylesheet 使用了最常見的一種。



@import "reset.css";

@import "layout.css";

@import "colors.css";

@import "typography.css";

@import "flash.css";

/ @import "debugging.css"; /



同時對于大型項目，你也可以加上CSS文件的升級標志或者一些診斷等其他措施，這里不再詳述。大家注意在實現(xiàn)工作中總結(jié)與思考，也歡迎多參考webjx.com的相關文章。



二、為CSS文件建立索引



為了能夠迅速的了解整個CSS文件的結(jié)構(gòu)，在文件開頭建立文件索引是一個不錯的選擇。

一種可行的方法是建立樹形的索引，結(jié)構(gòu)上的id 和 class 都可以成為該樹的一個分支。



[Layout]

• body
  
        + Header / #header
  
        + Content / #content
  
              - Left column / #leftcolumn
  
              - Right column / #rightcolumn
  
              - Sidebar / #sidebar
  
              - RSS / #rss
  
              - Search / #search
  
              - Boxes / .box
  
              - Sideblog / #sideblog
  
        + Footer / #footer
  
  Navigation         #navbar
  
  Advertisements         .ads
  
  Content header         h2
  
  
  
  或者也可以這樣：
  
  
  
  [Contents]
  
        1. Body
  
        2. Header / #header
  
              2.1. Navigation / #navbar
  
        3. Content / #content
  
              3.1. Left column / #leftcolumn
  
              3.2. Right column / #rightcolumn
  
              3.3. Sidebar / #sidebar
  
                    3.3.1. RSS / #rss
  
                    3.3.2. Search / #search
  
                    3.3.3. Boxes / .box
  
                    3.3.4. Sideblog / #sideblog
  
                    3.3.5. Advertisements / .ads
  
        4. Footer / #footer
  
  
  
  新建一個前端學習qun438905713，在群里大多數(shù)都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。
  
  
  
  另一種方式可以只是先簡單的將內(nèi)容列舉出來，也不需要縮進。下面的一個例子中，如果你需要跳至RSS部分你只需要簡單的搜索。
  
  
  
  [Contents]
  
  1. Body
     
  2. Header / #header
     
  3. Navigation / #navbar
     
  4. Content / #content
     
  5. Left column / #leftcolumn
     
  6. Right column / #rightcolumn
     
  7. Sidebar / #sidebar
     
  8. RSS / #rss
     
  9. Search / #search
     
  10. Boxes / .box
      
  11. Sideblog / #sideblog
      
  12. Advertisements / .ads
      
  13. Footer / #footer
      
      /--[8. RSS / #rss]--/
      

      rss { ... }
      

      rss img { ... }
      

      
      
      定義這樣一個樣式檢索可以很有效的使其他人閱讀學習你的代碼變得容易。在制作大項目的時候，你也可以將檢索打印出來從而在你閱讀代碼的時候方便查閱。您還可以參考下面的文章。
      
      
      
      三、格式化CSS屬性
      
      
      
      當我們編寫代碼的時候，使用一些特殊的編碼風格會對提高CSS代碼的可讀性有很大幫助。許多人都有各自不同的編碼風格。一部分人習慣于將顏色和字體的代碼放在前面，另外一部分則更喜歡將類似浮動和定位的更“重要”的屬性放在前面。類似的，也可以將頁面元素按照它在布局中的結(jié)構(gòu)進行排序：
      
      
      
          body,
      
                h1, h2, h3,
      
                p, ul, li,
      
                form {
      
                        margin: 0;
      
                        padding: 0;
      
                        border: 0;
      
                 }
      
      
      
      一些開發(fā)者用一種更為有意思的方法：他們將屬性按首字母的順序排列。值得注意的是，這樣一種方法可能對某些瀏覽器會產(chǎn)生問題。不管自己的格式如何，你要確保你已經(jīng)清晰的定義了這些格式方法。這樣，你的同事在閱讀你的代碼的時候?qū)兄x你的努力。您還可以參考下面的文章。
      
      
      
      四、合理的利用縮進
      
      
      
      為了讓你的代碼給人感覺更為直觀，你可以使用一行來定義大綱元素的樣式。當指定的選擇器里的屬性超過三個的時候，這種方式將帶來混亂。但是，適度的使用這種方式，你可以很清楚的區(qū)分相同類的不同點。
      
      
      

      main-column { display: inline; float: left; width: 300px; }
      

          #main-column h1 { margin-bottom: 20px; }
      
          #main-column p { color: #333; }
      
      
      
      同時，樣式修改的維護也是個比較麻煩的問題。很多人修改樣式之后就忘記了，結(jié)果后來又發(fā)現(xiàn)修改的樣式導致了頁面出錯，不得不苦苦尋找。因此，為修改的樣式構(gòu)建一個特殊的格式就很必要了。一種很簡單的方式是，給修改過的樣式縮進，同時，也可以使用一些注釋（比如"@new"）來做一個標識。
      
      
      

      sidebar ul li a {
      

             display: block;
      
             background-color: #ccc;
      
                  border-bottom: 1px solid #999; / @new /
      
             margin: 3px 0 3px 0;
      
                  padding: 3px; / @new /
      
      }
      
      
      
      總的來說，只有建立一個合適的樣式指南才會對樣式表的可讀性有所幫助。記住，移去每一個對你理解文件沒有幫助的樣式指南，避免對過多的元素使用過多的樣式指南。然后，為了一個可讀性可維護性良好的CSS文件而努力吧。不要忘記和webjx.com分享您的經(jīng)驗，歡迎參與評論
      
      
      

在學習應用css之前我們要先了解一下什么是css。CSS是Cascading Style Sheets(層疊樣式表)的簡稱.

• CSS語言是一種標記語言,它不需要編譯,可以直接由瀏覽器執(zhí)行(屬于瀏覽器解釋型語言).
  
  
  
• 在標準網(wǎng)頁設計中CSS負責網(wǎng)頁內(nèi)容(XHTML)的表現(xiàn).
  
  
  
• CSS文件也可以說是一個文本文件,它包含了一些CSS標記,CSS文件必須使用css為文件名后綴.
  
  
  
• 可以通過簡單的更改CSS文件,改變網(wǎng)頁的整體表現(xiàn)形式,可以減少我們的工作量,所以她是每一個網(wǎng)頁設計人員的必修課.
  
  
  
• CSS是由W3C的CSS工作組產(chǎn)生和維護的.
  
  
  
  新建一個前端學習qun438905713，在群里大多數(shù)都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。
  
  
  
  了解了什么是css后我們就可以方便對其應用了，我們可以用以下兩種方式加入你的博客當中去，由于css的應用方式有就近原則。也就是說最接近目標的樣式定義優(yōu)先權越高。高優(yōu)先權樣式將繼承低優(yōu)先權樣式的未重疊定義但覆蓋重疊的定義。
  
  
  
  鏈入外部樣式表文件 (Linking to a Style Sheet)
  
  
  
  你可以先建立外部樣式表文件（.css），然后使用HTML的link對象。示例如下：
  
  
  
  <head>
  
  <title>文檔標題</title>
  
  <link rel=stylesheet href="http://www.123-seo,cn/dhtmlet.css" type="text/css">
  
  </head>
  
  
  
  而在XML中，你應該如下例所示在聲明區(qū)中加入：
  
  
  
  <? xml-stylesheet type="text/css" href="http://www.123-seo.cn/dhtmlet.css" ?>
  
  
  
  定義內(nèi)部樣式塊對象 (Embedding a Style Block)
  
  
  
  你可以在你的HTML文檔的<HTML>和<BODY>標記之間插入一個<STYLE>...</STYLE>塊對象。 定義方式請參閱樣式表語法。示例如下：
  
  
  
  <html>
  
  <head>
  
  <title>文檔標題</title>
  
  <style type="text/css">
  
  <!--
  
  body {font: 10pt "Arial"}
  
  h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
  
  h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
  
  p {font: 10pt/12pt "Arial"; color: black}
  
  -->
  
  </style>
  
  </head>
  
  <body>
  
  
  
  請注意，這里將style對象的type屬性設置為"text/css"，是允許不支持這類型的瀏覽器忽略樣式表單。
  
  
  

邊框(border): css控制的邊框?qū)傩园╞order-width, border-color, border-style.



Border之所以讓人很困惑主要源于IE5錯綜復雜的BUG, 由于IE5是一個“will soon be dead” 的瀏覽器, 這里只例舉一個最為知名的關于border-width的BUG, 讓大家更好的理解border的含義, 先看下圖:







如上圖所示, 對象A(白色矩形)周圍有藍色邊框B, 可以看出A的實際寬度為ef, 而IE5不這么認為, 它把cd的長度定義為對象A的寬度, 這個bug在邊框的寬度小時幾乎察覺不到, 但在邊框與對象寬度相差不大時顯得尤為明顯.



新建一個前端學習qun438905713，在群里大多數(shù)都是零基礎學習者，大家相互幫助，相互解答，并且還準備很多學習資料，歡迎零基礎的小伙伴來一起交流。



現(xiàn)在, 結(jié)合以上說明, 可以看出border是獨立于對象之外, 位于magin與padding之間(后說明), 具有固定寬度, 顏色和樣式的區(qū)域.

1. border-width: 其可有具體數(shù)值(如1px, 2px等)或是描述性(thin, medium, thick)的屬性值. 由于瀏覽器及個人設置的不同導致thin, medium, thick這些屬性值的表現(xiàn)不一, 不推薦使用. css代碼如下:
   
   
   
   border-width: 1px;
   
   border-width: 2px;
   
   border-width: thin;
   
   border-width: medium;
   
   border-width: thick;
   
   
   
   寬度效果如下(注意不同瀏覽器下的區(qū)別):
   
   
   
    1px    2px    thin    medium    thick 
   
   
   
2. border-style: 邊框樣式包括solid, dashed, dotted, double, groove, ridge, inset, outset等, 代碼如下:
   
   
   
   border-style: solid;
   
   border-style: dashed;
   
   border-style: dotted;
   
   border-style: double;
   
   border-style: groove;
   
   border-style: ridge;
   
   border-style: inset;
   
   border-style: outset;
   
   
   
   樣式效果如下(你可能需要Firefox或是Opera才能看到后四種效果):
   
   
   
    solid   
   
   
   
    dashed   
   
   
   
    dotted   
   
   
   
    double   
   
   
   
    groove   
   
   
   
    ridge   
   
   
   
    inset   
   
   
   
    outset   
   
   
   
3. border-color: 邊框顏色屬性和一般顏色屬性是一樣的, 可以參看屬性篇(1).
   
   
   
   Summary: 以上例舉的都是四邊相同樣式的情況, 其實可以分別設置border-top, border-right, border-bottom, border-left四邊的屬性, 比方說想要表現(xiàn)一個寬2px, 藍色(blue), 樣式為solid的上下邊框, 代碼如下:
   
   
   
   border-top-width: 2px;
   
   border-top-color: blue;
   
   border-top-style: solid;
   
   border-bottom-width: 2px;
   
   border-bottom-color: blue;
   
   border-bottom-style: solid;
   
   
   
   簡寫為:
   
   
   
   border-top: blue 2px solid;
   
   border-bottom: blue 2px solid;
   
   
   
   表現(xiàn)如下:
   
   
   
    寬2px,藍色,樣式為solid的邊框 
   
   
   
   鏈接(link): 在html里用<a></a>標明鏈接, 在css里用a作為鏈接的選擇器名.
   
   
   
   css的缺點和它的優(yōu)點一樣明顯, 其最大的缺陷就在于網(wǎng)頁的動態(tài)表現(xiàn)不足, 在這一點上和Flash差距尤為突出.
   
   
   
   好在css還是留了一手, 那就是鏈接的偽類選擇器, 所謂偽類就是指依賴于瀏覽器或是用戶的狀態(tài). 對于鏈接來講, 存在link, hover, visited, active四種狀態(tài), 即四種偽類選擇器: a:link(存在鏈接, 但無鼠標動作), a:visited(被點擊或訪問過), a:hover(鼠標懸停于鏈接上時的狀態(tài)), a:active(鼠標點擊與釋放之間的狀態(tài)).
   
   
   
   css便是以這幾個偽類選擇器實現(xiàn)了其為數(shù)不多的動態(tài)效果. 目前最為常用的就是導航條和按鈕的動態(tài)顯示. 以下用一個動態(tài)按鈕的實例來說明這四個偽類選擇器.
   
   
   
4. 首先準備一副圖片(button.png), 如下圖(160px240px), 其由四幅160px60px的小圖自上而下排列而成.
   
   
   
    
   
   
   
   
   
   
   
5. 接著需要往你的本地調(diào)試文件夾(調(diào)試環(huán)境的建立方法參考屬性(1)中的說明)的index.htm中寫入html代碼, 如下:
   
   
   
   <div id=”button”><a href=”#”></a></div>
   
   
   
6. 在style.css中寫入以下代碼:
   
   
   
   body {background-color: #FFF;}
   

   button a{
   

   width:160px;
   
   height:60px;
   
   display:block;
   
   background:url(../image/button.png) no-repeat 0 0;
   
   } 
   

   button a:link { background-position:0 0;}
   

   button a:hover { background-position:0 -60px;} 
   

   button a:active { background-position:0 -120px;}
   

   button a:visited { background-position:0 -180px;}
   

   
   
   可以看到如 Example2 的效果.
   
   
   

7. 代碼解釋:
   
   
   
   <div id=”button”><a href=”#”></a></div>
   
   
   
   在index.htm寫入如上代碼, 目的在于插入一個id名為”button”的盒子(div),且其內(nèi)含有一個鏈接<a href=”#”></a>.
   
   
   

   button a{
   

   width:160px;
   
   height:60px;
   
   display:block;
   
   background:url(../image/button.png) no-repeat 0 0;
   
   }
   
   
   
   在css文件中寫入以上代碼, 目的在于控制盒子中鏈接的表現(xiàn), 通過名為”#button a”的選擇器來實現(xiàn). 鏈接的寬高為160px*60px, 背景為圖片button.png.
   
   
   
   在這強調(diào)一下display:block的作用. 由于在html文件中,鏈接<a href=”#”> </a>中沒有任何的內(nèi)容(content)填充, 如果沒有聲明”display:block”, 那么即使聲明了選擇器”#button a”的寬高, 瀏覽器也會因為html文件中沒有內(nèi)容而無法顯示鏈接. 所以”display:block”在這里的作用就在于強制瀏覽器顯示沒有內(nèi)容填充的鏈接. 
   
   
   

   button a:link { background-position:0 0;}
   

   
   
   用偽類選擇器a:link聲明鏈接的背景圖片在左上角顯示, 即距離左邊和頂邊分別0, 0. 但由于已經(jīng)在選擇器 “#button a”中聲明了圖片位置, 此代碼可有可無.
   
   
   

   button a:hover { background-position:0 -60px;} 
   

   button a:active { background-position:0 -120px;}
   

   button a:visited { background-position:0 -180px;}
   

   
   
   用偽類選擇器a:hover聲明鼠標懸停時, 背景圖片上移60px, 而使排在第二位的綠色小圖片顯示出來;
   
   
   
   用偽類選擇器a:active聲明在鼠標點擊與釋放之間的狀態(tài)時, 背景圖片上移120px, 而使排在第三位的紅色小圖片顯示;
   
   
   
   用偽類選擇器a:visited聲明在鏈接被點擊或訪問過時, 背景圖片上移180px, 而使排在第四位的灰色小圖片顯示;
   
   
   
   現(xiàn)在你基本了解了css動態(tài)按鈕的制作過程, 但以上css代碼還存在一個嚴重的缺陷, 相信你會很快發(fā)現(xiàn)問題所在——這個按鈕居然是一個”一次性按鈕“, 也就是說這個按鈕在點擊第一次后, 就一直顯示那個灰色小圖片, 你能想出解決方法嗎?
   
   
   

文章目錄

一、this

1.什么是this

2.this 代表什么

3.綁定 this 的方法

4.this的指向

5.改變指向

二、Function.prototype.bind()

三、call/apply

1.定義

2.語法

3.異同

一、this

1.什么是this

this 關鍵字在大部分語言中都是一個重要的存在，JS中自然不例外，其表達的意義豐富多樣甚至有些復雜，深刻理解this是學習JS、面向?qū)ο缶幊谭浅Ｖ匾囊画h(huán)。



2.this 代表什么

this代表函數(shù)（方法）執(zhí)行的上下文環(huán)境（上下文，類似與你要了解一篇文章，了解文章的上下文你才能清晰的了解各種關系）。



但在 JavaScript 中 this 不是固定不變的，它會隨著執(zhí)行環(huán)境的改變而改變。



1.在方法中，this 表示該方法所屬的對象。



2.如果單獨使用，this 表示全局對象。



3.在函數(shù)中，this 表示全局對象。



4.在函數(shù)中，在嚴格模式下，this 是未定義的(undefined)。



5.在事件中，this 表示接收事件的元素。



6.類似 call() 和 apply() 方法可以將 this 引用到任何對象。



3.綁定 this 的方法

this的動態(tài)切換，固然為 JavaScript 創(chuàng)造了巨大的靈活性，但也使得編程變得困難和模糊。有時，需要把this固定下來，避免出現(xiàn)意想不到的情況。JavaScript 提供了call、apply、bind這三個方法，來切換/固定this的指向。



4.this的指向

1.在一般函數(shù)方法中使用 this 指代全局對象



function test(){

this.x = 1;  //這里this就是window

console.log(this.x);

}

test(); // 1



JS規(guī)定，函數(shù)中的this，在函數(shù)被調(diào)用時確定，它指函數(shù)當前運行的環(huán)境。



2.作為對象方法調(diào)用，this 指代上級對象



var x =3;

function test(){

alert(this.x);

}

var o = {

  x:1,

  m:test 

};

o.m(); // 1



如果函數(shù)作為對象的方法時，方法中的 this 指向該對象。



3.作為構(gòu)造函數(shù)調(diào)用，this 指代new 出的對象



function test(){

console.log(this);

}

var o = new test();

       test();

//可以看出o代表的不是全局對象



new關鍵詞的作用是調(diào)用某個函數(shù)并拿到其中的返回值，只是調(diào)用過程稍特殊。在上面的代碼實例中。test函數(shù)被new關鍵詞調(diào)用時，內(nèi)部依次執(zhí)行了以下步驟:



（1）創(chuàng)建一個空對象。



（2）將這個空對象的原型，指向這個構(gòu)造函數(shù)的prototype。



（3）將空對象的值賦給函數(shù)內(nèi)部的this（this就是個空對象了）。



（4）執(zhí)行函數(shù)體代碼，為this這個對象綁定鍵值對。



（5）返回this，將其作為new關鍵詞調(diào)用oop函數(shù)的返回值。



所以構(gòu)造函數(shù)中的this，依舊是在構(gòu)造函數(shù)被new關鍵詞調(diào)用時確定其指向，指向的是當前被實例化的那個對象。



4.箭頭函數(shù)中的this

箭頭函數(shù)是ES6的新特性，最重要的特點是它會捕獲其所在上下文的this作為自己的this，或者說，箭頭函數(shù)本身并沒有this，它會沿用外部環(huán)境的this。也就是說，箭頭函數(shù)內(nèi)部與其外部的this是保持一致的。



this.a=20

var test={

    a:40，

    init:()=>{

        console.log(this.a)

        function go(){

            this.a=60

            console.log(this.a)

        }

        go.prototype.a=50

        return go

    }   

}



var p=test.init()

p()

new (test.init())()

//輸出 20 60 60 60



5.改變指向

this的動態(tài)切換，固然為 JavaScript 創(chuàng)造了巨大的靈活性，但也使得編程變得困難和模糊。有時，需要把this固定下來，避免出現(xiàn)意想不到的情況。JavaScript 提供了call、apply、bind這三個方法，來切換/固定this的指向。



bind方法和apply、call稍有不同，bind方法返回一個新函數(shù)，以后調(diào)用了才會執(zhí)行，但apply、call會立即執(zhí)行。



二、Function.prototype.bind()

bind()方法主要就是將函數(shù)綁定到某個對象，bind()會創(chuàng)建一個函數(shù)，函數(shù)體內(nèi)的this對象的值會被綁定到傳入bind()中的第一個參數(shù)的值，例如：f.bind(obj)，實際上可以理解為obj.f()，這時f函數(shù)體內(nèi)的this自然指向的是obj；



示例：



function f(y, z){

    return this.x + y + z;

}

var m = f.bind({x : 1}, 2);

console.log(m(3));

//6

1

2

3

4

5

6

這里bind方法會把它的第一個實參綁定給f函數(shù)體內(nèi)的this，所以這里的this即指向{x : 1}對象，從第二個參數(shù)起，會依次傳遞給原始函數(shù)，這里的第二個參數(shù)2，即是f函數(shù)的y參數(shù)，最后調(diào)用m(3)的時候，這里的3便是最后一個參數(shù)z了，所以執(zhí)行結(jié)果為1 + 2 + 3 = 6分步處理參數(shù)的過程其實是一個典型的函數(shù)柯里化的過程（Curry）。



三、call/apply

1.定義

每個函數(shù)都包含兩個非繼承而來的方法：call()方法和apply()方法。



call和apply可以用來重新定義函數(shù)的執(zhí)行環(huán)境，也就是this的指向；call和apply都是為了改變某個函數(shù)運行時的context，即上下文而存在的，換句話說，就是為了改變函數(shù)體內(nèi)部this的指向。



2.語法

call()



調(diào)用一個對象的方法，用另一個對象替換當前對象，可以繼承另外一個對象的屬性，它的語法是：



Function.call(obj[, param1[, param2[, [,...paramN]]]]);

1

obj：這個對象將代替Function類里this對象

params：一串參數(shù)列表



說明：call方法可以用來代替另一個對象調(diào)用一個方法，call方法可以將一個函數(shù)的對象上下文從初始的上下文改變?yōu)閛bj指定的新對象，如果沒有提供obj參數(shù)，那么Global對象被用于obj。



apply()



和call()方法一樣，只是參數(shù)列表不同，語法：



Function.apply(obj[, argArray]);



obj：這個對象將代替Function類里this對象

argArray：這個是數(shù)組，它將作為參數(shù)傳給Function



說明：如果argArray不是一個有效數(shù)組或不是arguments對象，那么將導致一個TypeError，如果沒有提供argArray和obj任何一個參數(shù)，那么Global對象將用作obj。



3.異同

相同點



call()和apply()方法的相同點就是這兩個方法的作用是一樣的。都是在特定的作用域中調(diào)用函數(shù)，等于設置函數(shù)體內(nèi)this對象的值，以擴充函數(shù)賴以運行的作用域。



一般來說，this總是指向調(diào)用某個方法的對象，但是使用call()和apply()方法時，就會改變this的指向，看個例子：



function add(a, b) {

    return a + b;

}



function sub(a, b) {

    return a - b;

}



console.log(add.call(sub, 2, 1));//3



為什么add.call(sub, 2, 1)的執(zhí)行結(jié)果是3呢，因為call()方法改變了this的指向，使得sub可以調(diào)用add的方法，也就是用sub去執(zhí)行add中的內(nèi)容，再來看一個例子：



function People(name, age) {

    this.name = name;

    this.age = age;

}



function Student(name, age, grade) {

    People.call(this, name, age);

    this.grade = grade;

}



var student = new Student('小明', 21, '大三');

console.log(student.name + student.age + student.grade);//小明21大三



在這個例子中，我們并沒有給Student的name和age賦值，但是存在這兩個屬性的值，這還是要歸功于call()方法，它可以改變this的指向。

在這個例子里，People.call(this, name, age);中的this代表的是Student，這也就是之前說的，使得Student可以調(diào)用People中的方法，因為People中有this.name = name;等語句，這樣就將name和age屬性創(chuàng)建到了Student中。



總結(jié)一句話就是call()可以讓括號里的對象來繼承括號外函數(shù)的屬性。



至于apply()方法作用也和call()方法一樣，可以這么寫：



People.apply(this, [name, age]);

1

或者這么寫：



People.apply(this, arguments);

1

在這里arguments和[name, age]是等價的。



不同點



從定義中也可以看出來，call()和apply()的不同點就是接收參數(shù)的方式不同。



1.apply()方法接收兩個參數(shù)，一個是函數(shù)運行的作用域（this），另一個是參數(shù)數(shù)組。

2.call()方法不一定接受兩個參數(shù)，第一個參數(shù)也是函數(shù)運行的作用域（this），但是傳遞給函數(shù)的參數(shù)必須列舉出來。



在給對象參數(shù)的情況下,如果參數(shù)的形式是數(shù)組的時候,比如之前apply()方法示例里面?zhèn)鬟f了參數(shù)arguments,這個參數(shù)是數(shù)組類型,并且在調(diào)用Person的時候參數(shù)的列表是對應一致的(也就是Person和Student的參數(shù)列表前兩位是一致的)就可以采用apply()方法。



但是如果Person的參數(shù)列表是這樣的(age,name)，而Student的參數(shù)列表是(name,age,grade)，這樣就可以用call()方法來實現(xiàn)了,也就是直接指定參數(shù)列表對應值的位置Person.call(this,age,name)。

一、什么是字體圖標

字體圖標：簡單的說，就是一種特殊的字體，通過這種字體，顯示給用戶的就像一個個圖片一樣，但它的本質(zhì)是文字。目前在移動端應用比較廣泛！







二、字體圖標的使用步驟

這里以阿里巴巴矢量圖標庫為例?。。?br />


sep1：

百度搜索iconfont,找到阿里巴巴矢量圖標庫官網(wǎng)



網(wǎng)址在這里https://www.iconfont.cn/

進去之后注冊或登錄，共有3種登錄方式，在這里我使用新浪微博賬號登錄





好了，登錄之后我們就可以在里面選擇自己想要的字體圖標啦?。?！那么，如何選擇下載并應用到自己的項目中呢？？別著急，跟著我走！



sep2：下載字體圖標字體庫

在這里我們可以根據(jù)自己的需求輸入相應的關鍵字進行搜索（中英文都可以）



鼠標放上去，然后就可以把自己喜歡的寶貝加入購物車啦！



網(wǎng)購的趕腳有木有，

我知道，看到這里大家就該有疑問了，

還要花錢買嗎？

放心！

答案是：不需要！



我們選的東西都在購物車里啦！



打開購物車，就能看到你選的圖標了??！

接下來你要做的是把它們下載到本地。



由于要在網(wǎng)頁中使用

在這里我們選擇 下載代碼



下載后將壓縮包解壓，為了方便后續(xù)使用我們改一下文件夾名稱，在這里我改為 icon (注意：在HTML中導入路徑時，記得帶上你所改的文件夾名稱)



打開之后你會發(fā)現(xiàn)里面有不同類型的文件（建議都不要刪除）



打開后綴名為.html的這個文件（可以更直觀地查看自己下載的字體圖標）







step3：在項目中引用字體圖標

不要走開，重點來了?。。?br />
官方提供了三種引用方法（下面對應的都有步驟）





Unicode 引用

Unicode 是字體在網(wǎng)頁端最原始的應用方式，特點是：

兼容性最好，支持 IE6+，及所有現(xiàn)代瀏覽器。

支持按字體的方式去動態(tài)調(diào)整圖標大小，顏色等等。

但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標，就算項目里有多色圖標也會自動去色。

注意：新版 iconfont 支持多色圖標，這些多色圖標在 Unicode 模式下將不能使用，如果有需求建議使用symbol 的引用方式

Unicode 使用步驟如下

第一步：拷貝項目下面生成的 @font-face

@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }

第二步：定義使用 iconfont 的樣式

.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

第三步：挑選相應圖標并獲取字體編碼，應用于頁面

<span class="iconfont">&#x33;</span>



font-class 引用

font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直觀，語意不明確的問題。

與 Unicode 使用方式相比，具有如下特點：

兼容性良好，支持 IE8+，及所有現(xiàn)代瀏覽器。

相比于 Unicode 語意明確，書寫更直觀?？梢院苋菀追直孢@個 icon 是什么。

因為使用 class 來定義圖標，所以當要替換圖標時，只需要修改 class 里面的 Unicode 引用。

不過因為本質(zhì)上還是使用的字體，所以多色圖標還是不支持的。

使用步驟如下：

第一步：引入項目下面生成的 fontclass 代碼：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑選相應圖標并獲取類名，應用于頁面：

<span class="iconfont icon-xxx"></span>



symbol 引用

這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個 SVG 的集合，與另外兩種相比具有如下特點：

支持多色圖標了，不再受單色限制。

通過一些技巧，支持像字體那樣，通過 font-size, color 來調(diào)整樣式。

兼容性較差，支持 IE9+，及現(xiàn)代瀏覽器。

瀏覽器渲染 SVG 的性能一般，還不如 png。

使用步驟如下:

第一步：引入項目下面生成的 symbol 代碼：

<script src="./iconfont.js"></script>

第二步：加入通用 CSS 代碼（引入一次就行）：

<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>

第三步：挑選相應圖標并獲取類名，應用于頁面：

<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>



下面，我就跟大家詳細說說 font-class 引用的引用方式：



打開編輯器（在這里我使用的是 VS Code編輯器），新建一個項目文件夾(demo)





將解壓后的字體圖標文件夾（icon）直接放到demo目錄下





在demo文件夾下面新建一個html文件 demo.html



導入icon文件夾里面的外部樣式表

<link rel="stylesheet" href="./icon/iconfont.css">



iconfont.css 里面就是我們下載的字體圖標的所有css樣式了，我們打開看看吧！

你會發(fā)現(xiàn)里面有一個 iconfont類名（這里劃重點！后面要用），它是所有字體圖標的公用樣式。





這時我們就可以在頁面中使用這些字體圖標啦！上面我們只是導入了整個css樣式表，現(xiàn)在我們要針對性地把某個圖標引用到html頁面中，并在網(wǎng)頁中顯示出來。

下面 我們就開始寫頁面的主體部分吧！



<p> 我有一個夢想：能夠擁有一套 <span class="iconfont icon-home"></span> </p>

這里的span標簽里面放的就是要用的某個字體圖標了，你會發(fā)現(xiàn)它用了兩個class類名。

第一個是iconfont，也就是我前面劃的重點（到這里不明白的話，可以再回頭看看）

第二個是icon-home，這個類名從何而來呢？

來，繼續(xù)往下看，再次打開icon文件夾下的



話不多說，直接看圖



是不是對應上啦！簡單地說就是你要用那個圖標就添加它的class類名。



到這里，恭喜你已經(jīng)學會了如何在網(wǎng)頁中插入字體圖標啦?。?！

那么，趕快運行一下看看效果吧！



到這里是不是還滿足不了你的需求，會有這樣的疑問：如果是這樣的效果，跟一張圖片有什么區(qū)別呢？？？

當然不是啦！

之所以叫做字體圖標，顧名思義，它在網(wǎng)頁中就是一種字體的存在，不過它比普通字體長得好看些有木有！

我們可以像更改文字樣式一樣去更改它的樣式，比如說 大小、顏色、陰影…



Symbol 引用方式還可以實現(xiàn)下面原圖標的彩色效果哦！可以自己照著官方提供的步驟試試看





下面附上Font class引用方法的 源代碼 供參考

前面的步驟一定要看！??！

如果前期工作沒做的話，直接用我的源代碼是實現(xiàn)不了的。



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>字體圖標</title>

    <link rel="stylesheet" href="./icon/iconfont.css">

    <style>

        .iconfont{

            font-size: 200px;

            color: palevioletred;

            text-shadow: 18px 17px 17px gray;

        }

    </style>

</head>

<body>

    <p>

        我有一個夢想：能夠擁有一套

        <span class="iconfont icon-home"></span>

    </p>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

花費了很長時間整理出來的。

很簡單是不是?。。?br />
看到這里還不會的話，建議重新再看一遍！



其中有錯誤的話，還請指出，我會虛心接受并改正?。?！

————————————————

版權聲明：本文為CSDN博主「Humy.」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/weixin_42678796/article/details/104569773