一、緩存簡介

緩存無處不在，瀏覽器端的緩存、服務器端的緩存、代理服務器的緩存、對象緩存、數據庫也有緩存……HTTP中具有緩存功能的是瀏覽器緩存和代理服務器緩存。下面說一下緩存的優點：



1.減少冗余的數據傳輸，節省了傳輸時間



2.減少服務器的負擔，大大提高了網站的性能



3.加快了客戶端加載網頁的速度



二、使用Fiddler如何查看緩存的Header

與緩存相關的內容放在Header中的Cache項里；Requests和Responses均是這樣。如圖：







三、緩存的新鮮度（通過什么方式判斷其是否，如何刷新緩存）

Web服務器通過兩種方式判斷瀏覽器緩存是否：



（1）瀏覽器把緩存文件的最后修改時間通過Header“If-Modified-Since”項傳遞給Web服務器。



（2）瀏覽器把緩存文件的ETag通過Header“If-None-Match”項傳遞給Web服務器。



簡單描述一下，瀏覽器端想請求一個文檔，它首先檢查本地緩存，發現存在這個文檔的緩存，獲取緩存文檔的最后修改時間，發送請求，將值放在Header中的“If-Modified-Since”項傳遞給Web服務器。Web服務器接收到請求后，將服務器的文檔修改時間（Last-Modified）與HTTP請求中的header中的“If-Modified-Since”值相比較，有兩種情況，如下面圖示：



1.緩存有效：







2.緩存無效：







截圖舉例：







上面說的是If-Modified-Since值對比的方式；下面說一下ETa'g；



四、ETag

ETag（Entity Tag）:實體標簽；是根據實體內容生成的一段hash字符串（類似MD5之后的結果），可以用來標識資源的狀態（當資源發送變化時，ETag也會跟著改變）；ETag是Web服務端產生的，然后通過response響應給瀏覽器。使用ETag，主要解決Last-Modified無法解決的情況：



（1.某些服務器不能得到文件的If-Modified-Since來判斷文件是否更新；



（2.某些文件修改非常頻繁，以小于秒的單元進行修改，而Last-Modified最單元為秒；



（3.有些文件最后修改時間變化了，但是內容并沒有變化，所以我們不希望瀏覽器以為文件已變化了；







五、與緩存相關的header

字段名稱 釋義

Cache-Control:max-age=0 以秒為單位

If-Modified-Since:Fri, 11 Jan 2019 01:55:04 GMT 緩存文件的最后修改時間

If-None-Match:W/"5c37f778-732" 緩存文件的Etag的值

Cache-Control:no-cache 不使用緩存

Pragma:no-cache 不使用緩存

Cache-Control:public 響應被緩存，可以共享與多用戶

Cache-Control:private 響應只能私有緩存，不可共享

Cache-Control:no-store 絕對禁止緩存（機密、敏感文件）

Cache-Control:max-age=60 60秒后緩存過期（相對時間）

Date:Fri, 11 Jan 2019 01:55:04 GMT 當前發送時間

Expires:Fri, 11 Jan 2019 01:55:04 GMT 緩存過期時間設置（絕對時間）

Last-Modified:Fri, 11 Jan 2019 01:55:04 GMT 服務器端文件的最后修改時間

Etag:W/"5c37f778-732" 服務器端文件的Etag值

六、關于緩存的常識

1.如何讓瀏覽器不使用緩存？



答：【Ctrl+F5】快捷鍵強制刷新瀏覽器，讓瀏覽器不使用緩存；此時Fiddler抓包所看到的請求Header中都會帶有Cache-Control:no-cache;







2.如何讓瀏覽器直接使用緩存，不請求服務器進行緩存驗證？



答：第一次訪問與第二次訪問同一個網頁；（注意：第二次訪問時，輸入網址，直接回車）瀏覽器會直接使用有效的緩存，而不會發生HTTP請求去服務器驗證緩存，這種情況稱之為緩存命中；



使用Fiddler抓包，現象：第一次訪問,有70多個Session；第二次訪問，僅40多個請求；



3.瀏覽器均可在設置中設置不使用緩存；



4.公有緩存、私有緩存的區別：一個可以多個不同的客戶端使用，一個只可唯一的客戶端使用；

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

Sandy現任阿里影業—淘票票體驗設計專家，2015年加入阿里巴巴，深耕B端行業產品，服務于電影產業鏈中的投資、宣發等角色。2017年起接觸C端用戶產品，推行價值導向和問題導向。2019年開始實踐線上線下全鏈路設計。

活動筆記：

阿里影業的服務涉及的面很廣，涉及到b端與c端全流程的體驗服務，包括面對片方的制作和宣發、發行、乃至面向用戶的售賣與放映，在每個節點都有涉及。而淘票票，經歷了四年的產品迭代，以一年一個版本的速度的進行優化。15年的理念是做一個好用的購票工具，16年新增了營銷，17年加強營銷，18年新賽道探索。到了2019年，改版應該進行新的思考：怎樣做？做什么？怎么做？做對了嗎？

此次淘票票9.0版本是根據用戶現有的習慣與市場的變化，由設計師發起的一次自下而上推進的改版。以下是淘票票9.0的設計策略與設計目標：

1. 內容設計賦能
   新服務，擴展觀影決策節點，幫助用戶發現好電影。
2. 購票流程體驗打磨
   新體驗，解讀用戶行為，體驗走查，打磨核心購票鏈路體驗。
3. 年輕化
   新用戶，關注用戶群體的變化，搜索年輕用戶群的品牌認知，提升年輕用戶滿意度。

接下來將對三點設計策略進行逐一的講解。

1. 新服務—內容的賦能

根據內容類型和場景進行劃分，結合內容特點和用戶喜好，打造全場景運營，例如提供影訊、通稿、片單、榜單、熱點、解讀、文章和活動等等多元化內容。通過提供不同的內容展現給用戶，將內容進行解構、把觸達的場景進行細化、優化設計的表達，從而達到幫助用戶可以更好的理解電影的目的。

2. 新體驗—打磨購票流程的體驗設計

設計前，首先應當熟知兩種設計思維導向：

• A.當設計目標是幫助企業完成商業目標時，是以價值為導向。
• B.當設計目標是為了提升用戶體驗，則是以思維為導向、問題為導向。

而這次9.0淘票票改版采用的是以問題為導向，期間經歷了五個流程：

2.1 找問題

首先出去找問題，找問題的方法有很多，如：用戶研究、定性、定量、業務數據和體驗走查，收集業務、用戶、客滿不同視角的疑似問題。

• 會通過支付寶、淘寶、百度糯米來比較價格高低，對比價格需要反復推出
• 進入不同的影院和場次，不太方便
• 希望看過的電影能夠產生一些紀念價值
• 不清楚80元和40元的座位有什么區別
• 不明確片尾是否有彩蛋
• 購票平臺的評分對自己沒有參考價值
• 電影院的地址、停車場是否免費等信息不夠準確
• 買完票到取票之間，需要反復確認訂單信息、分享訂單信息，但是訂單入口
• 藏得有些深
• …

2.2 看現象

找完問題之后，基于數據的支撐，去看用戶有哪些習慣的變化，看到目前的現象后再進行數據解讀。

• 影院頁和選座頁返回率高
• 越來越多的用戶購買當日的電影票
• 多數用戶選擇更短的買票路徑
• 大多數用戶去過的電影院在3家以內
• …

2.3 定位問題

基于使用場景和使用效率，進一步定位問題所在。

2.4 分析原因

分析出癥結，以便推進最終的解題環節。

• 癥結1：平臺服務與用戶決策心理脫節
  現有的流程是線狀的：選影片-選影院-選場次-選座-下單。但是用戶實際的心理決策是網狀的，用戶可能在選時間的時候考慮影評好不好，會在選場次的時候考慮價格是不是合理的。
  
• 癥結2：認知過載
  理想狀態是在傳達信息后，在用戶感知、接收和決策后，希望得到用戶方的正反饋，但是現實往往是用戶認為認知負擔過重，反饋失效的情況。其中信息傳達、顏色的設置最直觀的感受是“亂”。決策流程上最直觀的感受是“打擾”，提醒用戶是否確定要買某時候的票、提醒用戶確定退出選座頁不保留剛才選的座位，所有的提示的設計，都是采用一種打擾的方式進行詢問的。
  

2.5 解題

解題1：場景化探索。

以解決問題為目標，達到優化用戶體驗的目的，對場景進行預判、探索，把場景分為三個典型的場景：

• 典型場景1：短時決策–例如距離開場時間較短，對價格不敏感，希望找到距離合適的影院，快速完成購票決定。
• 典型場景2：追求體驗–對影廳的要求較高，希望找到放映效果最好的影廳。
• 典型場景3：價格敏感–找到符合自己價格預期的影院。

解決：針對第一種場景，選坐頁可以快速找到選場次的功能，淘票票提供常去影院、附近影院的選擇，減少用戶決策時間。針對第二種場景，部分觀影者不知道價格更高的IMAX廳、杜比廳的觀影效果，價格比普通廳貴了50塊錢，那么這個錢值在哪？淘票票使用視覺映射和科普的手段，例如當點擊進入杜比廳后，下拉可以呼出信息，了解相關的影廳，給予科普；而且界面設計不同，更貴的影廳視覺效果好，界面上也提供用戶更強的視覺沖擊。

解題2：用戶視角信息重構，進行信息降噪，減少認知負擔

認知負擔=信息呈現類型x信息量

以上公式可以看出，假設設認知負擔為定值，當信息量增多的時候，需要減少信息呈現類型，適當進行信息降噪與信息結構化。降噪是把想要突出的信息更加突出；信息結構化是把同類型的信息以結構化的呈現出來，讓用戶自然對信息產生親密性。

對于信息傳達，改變之前比較打擾的提示彈窗，現在淘票票會把所有信息都放在頁面中，用一種更輕量的方式提示用戶，不再打擾用戶。信息重構則是把需要用戶確認的信息放在最頭部，例如退票、改票，其次界面羅列的是優惠信息，最后才是影城卡營銷和賣小食的信息區域。新舊改版對比圖很好呈現出淘票票有效減少認知負擔所做的優化。

3. 新用戶—提升年輕用戶群對品牌認知

基于調研，淘票票的用戶群體趨近年輕化。改版中所制作情緒版、圖標、元素、字號、空間結構等視覺語言，注重和品牌元素的結合，產生出新的視覺語言與品牌形象，從而更加貼近年輕人的心理與喜好。

4. 體驗度量

根據heart模型進行設置，選出適合9.0版本的衡量維度：S，T，A。以體驗目標出發，符合業務目標進行探索。不一樣的體驗目標使用不一樣的度量方法。對于內容而言，需要衡量的是用戶的接受度，用戶需要看到它，接受它，并且需要知道用戶是否覺得有用。而對于核心購票流程，該流程則是比較偏向工具，度量方式則是任務完成度、完成任務時所花費的時長、信息有沒有被有效的傳達給用戶等來衡量的。最后對于視覺方向，用戶的想法會比較主觀，通過滿意度和推薦度來衡量。

現場問答：

提問者1：觀影者通常會在朋友圈、豆瓣和推薦來決定要看的影片，基本不會在淘票票上尋找值得看的影片，為什么淘票票會做這方面的探索？為什么要做內容決策這件事？

回答：從想看電影到下單的過程哪個地方淘票票是沒有做好的、做到的，根據定性調研，發現一半以上用戶都不會在淘票票上進行決策。但是淘票票還是希望嘗試一下，希望用戶可以在淘票票上完成完整的購票觀影體驗。從數據顯示，用戶心智還是不好但是有一些提升。而且豆瓣經歷了10年從pc到app，保留了用戶的歷史等數據，沒有辦法讓用戶直接轉到淘票票進行觀影決策，這也不是淘票票希望看到的。淘票票也希望可以和競品和合作方去提升觀影決策，達到共贏的目的。

提問者2：淘票票改版之后，有一個衡量它的改版效果S、T、A的度，有沒有考慮要做NPS？

回答：淘票票一直有在做，從這次改版之后來，淘票票所有用戶群指標提升了應該有五個百分點，然后年輕用戶的百分點在八個以上。NPS是一個非常關鍵的衡量用戶滿意度的指標。

追問：NPS是不是適合淘票票這個產品？還是適合于所以互聯網產品？

回答：NPS在集團內它的重視度是很高，基本上阿里系所有的產品都會有指標。

提問者3：我之前是淘票票的用戶，曾經用過淘票票做觀影決策，看下面的電影評價，結果發現電影評價是虛高的，就是說其實電影沒有那么好，但是評論會傾向性的選擇一個好的評論放在下面，經過這次經驗之后，就再也不用淘票票作為觀影決策了。想了解現在淘票票的評論機制，它是怎么個呈現的方式？是不是會優先選擇就是比較好的評論放在首評？或者是有一些什么樣的計算方式？另一方面對于現在的評論失真的這種情況，有沒有想到一些改進的措施？是最近有沒有做過一些改版之類的，就是關于這種內容方面的？除了剛才講的那些界面，視覺方面的，想了解內容方面有沒有一些提升？

回答：第一點，用戶群的不同。對于影評這個來決策，淘票票可能跟豆瓣用戶群有非常大的差異，豆瓣是影迷聚集地，愛電影這幫人的一個粉絲聚集地，圈子比較小，想要進入這個圈子有一定的成本。但是像淘票票它服務的是大眾場景，服務的有外賣小哥，也有大城市去打工的用戶，也有三四線在國企里那種的員工，淘票票服務的用戶是大眾的，所以對于評分虛高這件事，不是說它好或者不好，也就是不能單純的絕對說好還是不好，可能大眾的心智就是這樣的。用戶不像一個資深影迷，看到速度與激情會認為是大爛片，可能反而覺得好，非常值得去看。第二點，關于這種影評的一個分發策略涉及到產品策略，不是很方便講。但是淘票票在這方面一直有優化的，并且現在也是在持續優化，希望影評可以真正為用戶去提供這個觀影決策。第三點，淘票票的用戶其實不只是c端用戶，它還有還有影院還有片方，但是水軍應該不會有，至少淘票票平臺是非常不鼓勵這種情況，而且會有一定的反作弊、返水的機制。

提問者4：因為是以設計推動的一次改版，想了解一下推動的過程？第一就是因為平時改版都是產品的來做的，那這一次由設計來去推動的話，那設計跟產品之間的這個協作關系是什么樣的？然后改版歷時半年，是淘票票的設計歷程中是常態嗎？如果不是的話，平常的這個改版的節奏是什么樣的？

回答：第一點，設計要不斷的去跟產品、運營溝通，去跟不同角色溝通，溝通可能是最重要的一點。當所有人都達成共識了，確實有這樣的問題需要改，那全部門所有人就會去團結，去把這個事情搞出來。搞出來之后再去向上一層一層的去向上匯報。匯報的可能要經過很多輪，不斷有反饋的意見下來，因為本身視角輸入的也不夠全，接受到的聲音也沒有上游接觸的多，所以團隊會去接受意見，然后重新的進行。一輪review下來大概三四個月的時間，然后再去跟開發團隊溝通為什么要去升級設計語言，怎么樣去幫開發提效？怎么在下一次10.0改版的時候更容易。第二點，團隊第一次歷時半年進行改版，之前沒有停下腳步來去深耕用戶體驗，所以有一些坑或者一些彎路。平常的改版中基本上是兩周發一個版本，非常小步快跑的。對于設計如何跟產品團隊去協作？剛剛也有講過，達成共識之后，然后把這個事兒做起來，提需求、進版本，從需求池里評估需求優先級進版本。交互設計跟產品經理這個角色沒有絕對的一個邊界，可能都是去不斷的去觸碰，只要去配合合作的好，把這個產品去做出來，不用管處在一個什么樣的一個崗位。

提問者5：最開始的時候有問到淘票票和貓眼之間的一些對比，想了解在改版完之后和平時的工作中，是怎么會去了解和競品？怎么去比較？有沒有一些關注的量化的一些指標？

回答：不管服務于什么樣的產品，都會做競品調研。會關注市場的變化、競品的變化。對于設計團隊來說，其實主要的是關注的是用戶行為、功能和視覺界面。包括上了哪些個新的功能？在不同的渠道是怎么樣去運作的？運營思維是什么樣子的？淘票票團隊有在研究競品，有在做競品的一個分析，衡量的指標也主要是滿意度、推薦度，因為沒有辦法去看競品的數據，只能通過用戶反饋去看競品跟淘票票的差距。

 文章來源:uxren

測試代碼

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

    <button id="btn">按鈕</button>

    <script>

        let btn = document.getElementById("btn");

        btn.onclick = () => { // 鉤子函數

            console.log('我是鉤子函數');

        }

 

        btn.addEventListener("click",() =>{ // 回調函數

            console.log('我是回調函數');

        });

        // 這是給btn綁定了一個監聽器，后面那個函數是它的回調函數，

        // 因為消息捕獲的過程我們并不能參與，而在捕獲執行完畢的時候，

        // 回調函數才會執行，我們可以把對消息的處理寫在回調函數里。

    </script>

</body>

</html>

點擊按鈕后代碼輸出如下：







回調函數和鉤子函數的區別根本上是

鉤子函數在捕獲消息的第一時間就執行，而回調函數是捕獲結束時，最后一個被執行的。



什么是鉤子函數

一般認為，鉤子函數就是回調函數的一種，其實還是有差異的，差異地方就是：觸發的時機不同。

鉤子（Hook）概念源于Windows的消息處理機制，通過設置鉤子，應用程序對所有消息事件進行攔截，然后執行鉤子函數。 



什么是回調函數

回調函數其實是調用者將回調函數的指針傳遞給了調用函數，當調用函數執行完畢后，通過函數指針來調用回調函數。



鉤子函數和回調函數都是事件處理函數

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

有些產品經理會陷入這種誤區——需求評審做完了，自己就可以放羊不管了。而本文則認為需求評審完，產品經理還要做這六件事。

需求評審完，產品經理還要干的6件事

1. 確認需求評審的遺留問題并同步各方

2. 制定詳細&責任到人的項目計劃

3. 完成文案設計

4. 按照項目計劃，協同各方，往前推進，關鍵環節必須與各方確認。關鍵環節包括：

• 1）交互評審
• 2）視覺評審
• 3）推進聯調進度
• 4）推進測試進度
• 5）項目showcase
• 6）項目發布

5. 準備項目review

6. 開始下個需求的方案設計和需求文檔準備

這六件事具體怎么做？

產品經理A：需求終于評審完了。有種放飛的感覺，可以休假，去浪了！

產品經理B：你說真的嗎？為什么我評審完，還一直在被開發、測試、法務、財務窮追不舍？

產品經理C：你說真的嗎？為什么我評審完，從來都是我在窮追不舍開發、測試、法務、財務？

產品經理D：你們開玩笑的吧？就我這么慘！我不但要緊追不舍開發、法務、測試、法務、財務，還要被老板、被客戶窮追不舍。

產品經理A、B、C：哥們，來講講，最喜歡聽慘兮兮的故事了。你的傷痛最能撫平我的內心。

產品經理D：好吧。需求評審只講清楚了產品的骨架、細節，讓各方開始投資源。評審完，產品經理還有一堆事要推進，沒法放羊。

要跟的事情主要有下面6件：

1. 確認需求評審的遺留問題并同步各方

需求評審總有一些遺留問題要進一步確認，而后同步給各方。我不是圣人，有時候有些問題或者細節沒想到，評審的時候，大家提出來了，得趕快明確。

有時候需求評審中還有很大的bug沒想到，必須快速解決，要在開發沒動工前，都捋順。要不然變成需求變更，或者上線后被推倒重來，欲哭無淚。

我這種求生欲這么強，也沒人罩著的，必須狠命把需求做到95分以上。100分也不太敢說，畢竟眾口難調。

2. 制定詳細&責任到人的項目計劃

產品經理還得身兼項目管理，項目管理從來都是事有輕重、事無巨細，難以假手他人。雖然我會盡可能調動大家的積極性，讓大家自驅管理項目，但還得牽扯不少精力。

項目管理的關鍵點：明確項目計劃、關鍵節點、每個關鍵節點的負責人、驗收方案。

比如什么時候交互評審、視覺評審、聯調、showcase、發布？分別是誰主要牽頭負責，哪些人需要參與。

為了防止項目延期，每個節點都還得提前趕。真是操碎了心。

3. 完成文案設計

文案從來不是隨便寫寫。文案是和客戶交流的重要途徑，整幾個客戶看不懂的文案上去，后面客戶咨詢搞死人！

文案設計除了客戶視角之外，也不是自己想怎么寫就怎么寫，還要和法務、客服團隊溝通。因為文案被客戶投訴的案例，又不是沒有。

還有啊，我的產品有3種語言，簡體中文、繁體中文、英文，雖然每種語言有專門的文案設計師，但得跟他們說清楚，也要花不少時間、精力。

當然，也有很多產品經理，不管文案這種小事。可我覺得文案體現了產品經理最基本的素養，是產品的底子。

4. 按照項目計劃，協同各方，往前推進，關鍵環節必須確認

關鍵環節有6個：

1）交互評審

一般來說會由交互設計師發起，開發、測試、法務、財務都要參與。

這樣能保證大家在說同一件事情，避免我要的是頭牛，結果開發給了頭驢。

如果設計師項目參與度低，交互評審還得我自己上。哪里缺人，我就得到哪補坑。

2）視覺評審

一般來說，交互和視覺評審會一起。

有時候項目很復雜，或者交互、視覺分工明確，那就得分開了。

通常由視覺設計師發起。同樣，如果視覺設計師參與度低的話，我還是得補坑。

3）推進聯調進度

聯調是很容易扯皮的環節，大家來自不同域、不同職能團隊，各有各的小九九，所以得盯著，避免聯調成為坑王。

4）推進測試進度

進入到測試就意味著開發的七七八八了，當然有時候為了壓縮項目周期，開發、測試會階段性并行。

除了測試進度，還得關注測試發現的問題，可能開發還得返工，也可能會發現需求評審中大家都沒有注意到的問題，得及時補救。

5）showcase

Showcase，說白了就是項目驗收。

驗收前，得先列出來要驗收哪些內容，主流程、分支流程、逆向流程、重大關鍵節點。Showcase，也有可能發現新的問題，但基本上要避免在showcase環節發現重大問題，不然就得重大需求變更了。

showcase有時候由測試主導，有時候沒資源，我得自己上。

6）項目發布

如果一路順利，就該發布項目了。

項目發布計劃雖然也是之前就定好的，但要考慮的方方面面也還挺多的，可以看之前的文章《項目發布要考慮的因素》。

總而言之，要和各方溝通好，要保證項目順利發布呦。

5. 準備項目review

項目終于上線了，可我得天天得看客戶反饋，看數據，跟客戶聊，跟業務聊，準備復盤review。

產品狗似乎永遠都在準備復盤、復盤中、復盤后反思的路上。

6. 開始下個需求的方案設計和需求文檔

項目通常是并行的。在需求評審完后，我已經開始下一個需求的研究、設計了。

開發資源從上一個需求釋放出來的時候，產品經理肯定得把下一個需求方案設計好，開始新的需求評審，妥妥的做好資源銜接。資源一旦釋放出來，下次想要資源，難上加難啊。

產品也需要持續迭代，讓客戶感受到，我們的產品在成長、進步，給人希望。

文章來源：人人都是產品經理

前言

《以人為中心的設計指南》是我翻譯的第二本完整的設計書籍。在我開始廣泛的閱覽國外優秀的設計團隊、設計公司的沉淀輸出后，收獲頗豐。我意識到很多年輕的設計師尤其是傳統意義上的UI，苦于進階無門，很難系統的去學習設計理論、設計方法以及設計流程，無法系統化梳理設計知識，就只能在有限的設計范圍內修修補補，就像你在局限于視覺時沒有意識到體驗，在忠實于體驗時又忽略了商業，總是無法全面的考慮和輸出設計方案，這是源于沒有系統化的學習。

國外的人機交互、體驗設計領域的確發展較早，有著大量的理論和方法的沉淀，國內各大設計團隊雖然也開始持續輸出一些本土化的內容，但仍然擺脫不了系統化這個問題。因此我從今年開始，就有了翻譯國外設計論論體系及對應的成熟可用的設計方法的沖動。如果你讀了我往期的文章，你應該了解到了設計思維的五個步驟、了解了用戶體驗的七要素、可用性方法以及眾多可操作的實踐方法。

我翻譯的內容既有各大設計機構無私分享的內容，也有我自費購買的設計課程，我希望為大家帶來一些真正持續影響設計生涯的內容，要實現這一目標，軟件技法做不到，只有思維方法、系統化知識可以做到。

本次翻譯的《以人為中心的設計指南》是IDEO出產的一本設計工具書，包括具體的設計思路，規范的設計流程，以及各種關鍵設計原則。它將結合實例，教授設計師如何解決問題，如何以人為本的解決復雜問題。

本書內容量較大，共有四大模塊，及73個小章節，我將以連載的形式發布譯文，完整翻譯后，為大家排版一份PDF格式的電子書，分享給讀者，也分享給國內的所有設計師，每個人都可以盡一份力讓國內的涉及環境變得更好。

本篇文章主要翻譯介紹部分和第一模塊的7個小節（標紅部分），闡述了IDEO團隊在設計過程中一直堅守的心態。下面開始正文。

介紹

以人為中心的設計師意味著什么？
擁抱以人為本的設計意味著相信所有的問題，即使是那些看似棘手的問題，比如貧困、性別平等。此外，這意味著相信每天面對這些問題的人是掌握答案的人。以人為本的設計為任何類型的問題解決者提供了與社區與用戶一起設計的機會，深入了解我們所服務的人，構思各種想法，并根據人們的實際需求創造創新性的解決方案。
在IDEO，我們幾十年來一直使用以人為中心的設計來創造產品、服務、體驗和社會企業，這些產品、服務、體驗和企業之所以被采納和接受，是因為我們把人們的生活和訴求放在核心位置。社會各個領域的創新時機已經成熟，我們已經一次次證明我們的方法行之有效。作為一名以人為中心的設計師，你要相信，只要你堅持從別人身上學到的東西，你的團隊就能找到世界需要的新解決方案。有了這份實地指南，你現在就擁有了將這種信念變為現實所需的工具。

接受不同的心態
以人為中心的設計師不同于其他的問題解決者——我們修修補補，不斷測試，我們一開始就失敗了，而且經常失敗，我們花了大量的時間但可能仍然不知道問題的答案。然而，我們勇往直前。我們是樂觀主義者和創造者，是實驗者和學習者，我們感同身受，不斷重復，我們在意想不到的地方尋找靈感。我們相信解決方案就在那里。
通過專注于我們的目標群體并提出正確的問題，我們將一起達成目標。我們會想出很多點子，有些行得通，有些行不通。我們把我們的想法具體化，這樣我們就可以進行測試。

然后我們提煉它們。最終，我們的方法等同于瘋狂的創造力，不斷地推動創新并給予我們自信，它將我們引向我們開始時從未意識到的解決方案。現在，我們要分享我們的設計哲學和心態。
讓我們與眾不同的七種心態:同理心、樂觀、迭代、創造自信、實踐、接受不確定性，以及從失敗中學習。

理解的過程
以人為中心的設計并不是一個完美的線性過程，每個項目都有自己的特點，但無論你面臨什么樣的項目，你都將經歷三個主要階段:靈感、構思和實現。通過依次采取這三個階段，你將與你為之設計的用戶產生深刻的理解;你會弄清楚如何將你學到的東西變成設計新解決方案的機會；在最終將你的產品正式上線之前，你會建立并測試你的想法。在IDEO，我們使用以人為中心的設計來處理大量的設計挑戰，盡管我們的項目涵蓋社會企業到傳播活動到醫療設備各個領域，但這種創造性解決問題的特殊方法每次都能幫助我們度過難關。

靈感
在這個階段，你將學習如何更好地理解別人。你會觀察他們的生活，聽到他們的訴求和愿望，并逐漸加深你對這個設計挑戰的理解。
構思
在這里，你將理解你所了解的一切，產生大量的想法，確定設計的機會，并測試和改進您的解決方案。
實現
現在是你把你的解決方案帶到現實中的機會。你將弄清楚如何把你的想法推向市場，以及如何最大限度地發揮它在世界上的影響力。

使用工具
雖然沒有哪兩個以人為中心的設計項目是完全相同的，但是我們使用相同的設計流程和工具為每個項目進行設計。

例如，為了與我們要服務的人建立深厚的同理心，我們總是對他們進行訪談。

為了保持創造力和活力，我們總是在進行團隊協作。

為了使我們的思維更有創造力、更加敏銳，我們總是把我們的想法做成有形的原型，因為它幫助我們解決問題。

因為我們很少在第一次就成功，所以我們總是分享我們的產出，并根據我們得到的反饋進行迭代。

這本指南中的57種方法提供了一套全面的練習和活動，可以幫助你從制定設計挑戰到將其推向市場。有些方法你會用兩到三次，有些則不會。但是作為一個整體，他們會讓你走上持續創新的道路，同時讓你所設計的社區或用戶成為你工作的中心。 

相信這個過程，即使它讓你感到不舒服
以人為中心的設計是一種獨特的解決問題的方法，這種方法有時會讓人覺得很瘋狂而不像一個方法——但如果你總是使用傳統的解決方案，你就很少能找到創新的解決方案。這個過程的目的是讓你直接從用戶那里學習，敞開心扉，接受各種各樣的創造可能性，然后專注于最理想、最可行的方案。你會發現自己在這個過程中頻繁地推翻假設，當你完成它的三個階段時，你會從具體的觀察到高度抽象的思考快速變換，然后再回到原型的具體細節。我們稱之為發散和收斂（菱形設計法則）。 

在構思階段，通過更廣泛的思考（大范圍，多領域），我們想出了各種可能的解決方案。

但因為我們的目標是最具可行性的方案，所以我們必須確定，在這一系列的想法中，哪一個最有可能真正發揮作用。你會發散和收斂幾次，每一次新的周期，你會越來越接近一個投放市場級別的解決方案。

創建真正可用的方案
以人為中心的設計是一種獨特的定位，最終目的是達成解決方案的可取性（用戶角度），技術可行性，商業可行性。
首先從用戶開始，了解他們的希望、恐懼和訴求，我們很快就能發現什么是用戶亟需的。一旦我們確定了一系列能夠吸引用戶的解決方案，我們就開始著手于在技術上可行的方案以及如何使解決方案在經濟上的可行性。這是一個平衡的過程，但這對于設計成功且可持續的解決方案至關重要。

一：心態

1.創造性的信心

任何人都可以像設計師一樣理解世界。作為一個問題解決者，解鎖這種潛力所需要的只是創造性的信心。創造性的自信是指每個人都具有創造力的信念，而創造力不是繪畫或構圖或雕刻的能力，而是一種理解世界的方式。
創造性信心是以人為本的設計師在實現思維的飛躍，信任他們的直覺以及追求他們尚未完全弄清楚的解決方案時所依賴的品質。我們相信，您可以并且將會為問題提出創造性的解決方案，并且相信所有這一切都需要著手去實踐且深入嘗試。
它是一種自信，相信你所需要做的只是卷起袖子投入進去。創造性的自信會驅使你去做事情，去測試它們，去不斷犯錯，然后繼續前進，確信你會到達你需要去的地方，并且你一定會一路持續創新。
建立創造性的自信需要時間，實現這一目標的部分原因是相信以人為中心的設計過程將向您展示如何以創造性的方式解決手頭的任何問題。從微小的成功開始，然后建立一個更大的目標，你會看到你的創造性信心的增長，不久你就會發現自己變成了一個非常有創造力的人。

2.著手去做

作為以人為本的設計師，我們之所以這樣做，是因為我們相信有形（實物、可視化）的力量。我們知道，把一個想法變成現實，可以揭示出許多僅僅靠理論所不能揭示的東西。當目標是將有效的解決方案投入使用時，您不能生活在抽象和理論中。你必須讓它們成為現實。 以人為中心的設計師是實干家、修補匠、工匠和建設者。我們使用任何我們可以使用的東西，從紙板和剪刀到復雜的數字工具。我們建立我們的想法，這樣我們就可以測試它們，在真正去做一些東西后，我們會發現以前從來沒有想到的機會和復雜性。制作也是一種奇妙的思考方式，它有助于我們關注設計的可行性。此外，把想法變成現實是一種非常有效的分享方式。如果沒有來自人們的反饋，我們將不知道如何進一步完善我們的想法。

3.從失敗中學習

失敗是一個非常強大的工具，設計實驗原型、交互和測試他們是以人為本設計的核心。要知道并非所有這些能發揮作用，當我們想要解決一個大問題時，我們一定會失敗，但如果我們保持良好的心態，我們就會從中受益。

以人為中心的設計是從一個不知道如何解決設計挑戰的地方開始的。只有通過傾聽、思考、構建和提煉我們的答案，我們才能得到對我們的用戶有用的東西?！霸缡?，早成功”是IDEO的一個常見口號，它的力量之一就是允許出錯。由于拒絕冒險，一些設計師實際上與真正的創新機會失之交臂。
托馬斯·愛迪生說得好:“我沒有失敗。我剛剛發現了10000種行不通的方法。對于以人為中心的設計師來說，找出行不通的東西是找到有用的東西的一部分。
失敗是以人為中心的設計中固有的一部分，因為我們很少在第一次嘗試時就能取得成功。事實上，第一次嘗試就做好并不是重點。關鍵是把一些東西創造出來，然后用它來不斷學習，不斷提問，不斷測試。如果以人為本的設計人員最終取得成功，那是因為他們曾經失敗了無數次。

4.同理心

同理心是指站在別人的立場上，理解他們的生活，并從他們的角度解決問題的能力。 
以人為本的設計是以同理心為前提的，你為之設計的用戶是你通往創新解決方案的路標。你所要做的就是感同身受，理解他們，并在設計過程中把他們時刻掛在心里。

比如長期以來，國際發展界一直在設計解決貧困問題的方案，卻沒有真正同情和理解它所要服務的人民。但是，通過設身處地為我們的設計對象著想，以人為中心的設計師可以開始通過一個新的、強大的視角來看待這個世界，以及所有改善它的機會。
讓自己沉浸在另一個世界中，不僅會為你打開新的創造可能性，而且它能讓你拋開先入為主的理念和過時的思維方式。與你為之設計的用戶產生共鳴是真正理解他們生活的背景和復雜性的最佳途徑。但最重要的是，它將使你的設計過程完全圍繞用戶，從而產出對他們來講真正有用的東西。

5.接受不確定性

以人為中心的設計師總是從不確定的問題開始。在一些注重于快速找到方案的公司文化中，這或許不是一個好的開始。但是從第一步開始，接受不確定性的設計人員會勇敢的走出去，追求很多不同的想法，甚至找到意想不到的解決辦法。通過接受這種模糊性，并相信以人為中心的設計過程將引導我們走向一個創新的答案，我們實際上迸發出更強的創新能力。 

將以人為中心的設計師與其他設計師區別開來的一個特點是，我們相信總會有更多的創意。我們不再執著于自己的傳統想法，因為我們知道我們會擁有更多新的想法。因為以人為中心的設計是一個如此富有創造力的過程，而且因為我們倡導團隊合作構思，所以很容易拋棄不好的想法，保留一些一般的想法，并最終得到最好的想法。
雖然這似乎違反直覺，但這種不確定性實際上促使以人為中心的設計師進行創新。
如果我們一開始就知道答案，我們能學到什么呢?我們怎樣才能想出創造性的解決方案呢?我們為之設計的人會在哪里指引我們?擁抱不確定性實際上解放了我們的創造力，鼓勵我們去追求一個最初無法想象的答案，這讓我們走上了持續性創新的道路

6.樂觀

我們相信設計本身就是樂觀的。 

為了迎接一個艱難的挑戰，特別是像貧困這樣巨大而棘手的挑戰，我們必須相信，創新是唯一的方法。如果我們不這樣做，我們甚至不會去嘗試。樂觀是對可能性的擁抱，即使我們不知道答案，但我們相信總會有一個方案等待我們去挖掘。
除了推動我們走向解決方案，樂觀還使我們更有創造力，鼓勵我們在遇到死胡同時繼續前進，并幫助項目中的所有參與人員凝聚在一起。從解決問題的角度來處理問題，會給整個過程注入解決最棘手問題所需的能量和動力。
以人為中心的設計師總是專注于可能發生的事情，而不是可能遇到的無數障礙。這是我們的核心信念——每一個問題都是可以解決的——這就是以人為中心的設計師的樂觀。

7.迭代

作為以人為中心的設計師，我們采用迭代的方法來解決問題，從我們的用戶那里得到反饋是促使解決方案誕生的關鍵部分。通過不斷地迭代、持續改進我們的工作，我們會有更多的想法，嘗試各種各樣的方法，不斷釋放我們的創造力，更快地找到成功的解決方案。

迭代使我們保持敏捷、反應靈敏，并訓練我們一直專注于核心的想法，經過幾次迭代后，每個細節都恰到好處。如果你每次建立一個原型或分享一個想法時都追求完美，那么你就會花很長時間去完善一些不一定有效的東西。但是，通過構建、測試和迭代，您可以不花費過多的時間和資源來推進您的想法，直到您確定它是正確的。

在項目早期，我們不斷進行迭代，因為我們知道第一次不會得到正確的結果。迭代讓我們有機會去探索，去犯錯，去驗證我們的直覺，最終會得到一個將被采納的解決方案。我們進行迭代，因為它讓我們不斷學習。我們不是躲在工作室里，打賭某個想法、產品或服務會大受歡迎，而是迅速地走出去，讓我們的用戶成為我們的向導。

第一部分就到這里了，重新回顧下，在本篇文章中，你應該了解到IDEO在設計過程中一直堅守的7個心態。

他們分別是創造性的信心、著手去做、從失敗中學習、同理心、接受不確定性、樂觀、持續迭代。

數組常見方法

數組的方法

一、join() 方法 ----->不會改變原數組

二、concat() 方法 ----->不會改變原數組

三、splice(index, num, item) ----->會改變原數組

1. splice(index, num) 刪除功能
   
2. splice(index, 0, ...item)
   
3. splice(index, num, item)
   
4. splice(index)
   
   四、slice() -----> 不會改變原數組
   
   五、push() 和 pop() ----->會改變原數組
   
   六、shift() 和 unshift() -----> 會改變原數組
   
   七、sort() -----> 會改變原數組
   
   八、reverse() ----->會改變原數組
   
   九、indexOf() 和 lastIndexOf()
   
   十、includes()
   
   十一、forEach()
   
   十二、map() -----> 不會改變原數組
   
   十三、filter() -----> 不會改變原數組
   
   十四、every()
   
   十五、some()
   
   十六、reduce() 和 reduceRight()
   
   十七、Array.from() 將類數組轉化為數組
   
   十八、Array.of() 方法用于將一組值轉化為數組
   
   十九、數組實例的 find() 和 findIndex()
   
   二十、扁平化數組 flat() 方法 -----> 不會改變原數組
   
   數組的方法
   
   一、join() 方法 ----->不會改變原數組
   
   該方法可以將數組里面的元素，通過指定的分隔符以字符串的形式連接起來
   
   返回值：返回新的字符串
   
   
   
   // join() 將數組轉化為字符串
   
   let arr = [1, 2, 3, 4, 5]
   
   let str1 = arr.join('|')
   
   console.log(arr) // [1, 2, 3, 4, 5]
   
   console.log(str1) // 1|2|3|4|5
   
   // 當傳空字符串時
   
   let str2 = arr.join('') // 12345
   
   // 當不傳時
   
   let str3 = arr.join() // 1,2,3,4,5
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   二、concat() 方法 ----->不會改變原數組
   
   該方法可以把兩個數組里的元素拼接成一個新的數組
   
   返回值：返回拼接后的新數組
   
   
   
   let arr1 = [0, 1, 2]
   
   let arr2 = [2, 3, 4]
   
   let arr = arr1.concat(arr2)
   
   // 傳入二維數組
   
   let arrCopy = arr1.concat([12, [17, 26]])
   
   console.log(arrCopy) // [0, 1, 2, 12, [17, 26]]
   
   console.log(arr) // [0, 1, 2, 2, 3, 4]
   
   console.log(arr1) // [0, 1, 2]
   
   console.log(arr2) // [2, 3, 4]
   
   
   
   // ES6 擴展運算符
   
   let a = [1, 2]
   
   let b = [2, 3]
   
   let ab = [...a, ...b] // [1, 2, 2, 3]
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   三、splice(index, num, item) ----->會改變原數組
   
   index 參數：必傳，整數，規定添加或者刪除的位置，使用負數時，從數組尾部規定位置
   
   num 參數：必傳，要刪除的數量，如果為 0，則不刪除項目
   
   item 參數：可選參數，可以是多個，想數組添加的新項目
   
   splice 具有刪除，插入，替換的功能
   
   
   
5. splice(index, num) 刪除功能
   
   index 參數：開始位置的索引
   
   
   
   num 參數：要刪除元素的個數
   
   
   
   返回值：返回的是包含被刪除元素的數組對象
   
   
   
   // 刪除功能
   
   let array = [1, 2, 3, 4, 5]
   
   let newArr = array.splice(2, 2)
   
   console.log(newArr) // [1, 2, 5]
   
   console.log(array) // [3, 4]
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
6. splice(index, 0, …item)
   
   index 參數：插入元素的索引值
   
   0 參數：不刪除
   
   // 插入功能
   
   let arr = ['a', 'b', 'c', 'd', 'e']
   
   let newArr = arr.splice(1, 0, ['插入', 1217])
   
   console.log(newArr) // []
   
   console.log(arr) // ['a', ['插入', 1217], 'b', 'c', 'd', 'e']
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
7. splice(index, num, item)
   
   index 參數：開始的索引位置
   
   num 參數：刪除的項個數
   
   item 參數：替換項
   
   返回值：返回包含被刪除的元素的數組對象
   
   let arr = [1, 2, 3, 4, 5]
   
   let newArr = arr.splice(2, 2, '替換', '1226')
   
   console.log(newArr) // [3, 4]
   
   console.log(arr) // [1, 2, '替換', '1226', 5]
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
8. splice(index)
   
   當只傳一個值時，表示從傳入的 index 索引值開始截取到最后
   
   let arr = [1, 2, 3, 4, 5]
   
   let newArr = arr.splice(3)
   
   console.log(newArr) // [4, 5]
   
   console.log(arr) // [1, 2, 3]
   
   1
   
   2
   
   3
   
   4
   
   四、slice() -----> 不會改變原數組
   
   返回從原數組中指定開始下標到結束下標之間的項組成的新數組
   
   slice() 方法可以接受一或兩個參數，即要返回項的起始位置和結束位置
   
   array.slice(2) 若只設置一個參數，起始位置為2（包含下標2）開始到數組最后
   
   array.slice(2, 5) 若設置兩個參數，起始下標為2（包含下標2）到結束下標5（不包含下標5）的數組
   
   當 slice() 參數中有負數時，將負數加上數組的長度值來替換該位置的數
   
   let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
   
   let copyArr1 = arr.slice(2) // [3, 4, 5, 6, 7, 8, 9]
   
   let copyArr2 = arr.slice(2, 5) // [3, 4, 5] 
   
   let copyArr3 = arr.slice(-2) // [8, 9]
   
   let copyArr4 = arr.slice(2, -2) // [3, 4, 5, 6, 7]
   
   let copyArr5 = arr.slice(-2, -5) // []
   
   let copyArr6 = arr.slice(-5, -2) // [5, 6, 7]
   
   console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   五、push() 和 pop() ----->會改變原數組
   
   push() 可以接受任意數量的參數，將其逐個添加到數組的末尾，并返回修改后數組的長度（改變了原數組）
   
   pop() 刪掉數組末尾最后一項，改變了數組的 length 值，并返回刪除的項
   
   let arr = [1, 2, 3, 4, 5]
   
   let count = arr.push(0, 1217)
   
   console.log(count) // 7
   
   console.loh(arr) // [1, 2, 3, 4, 5, 0, 1217]
   
   
   
   let item = arr.pop()
   
   console.log(item) // 1217
   
   console.log(arr) // [1, 2, 3, 4, 5, 0]
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   六、shift() 和 unshift() -----> 會改變原數組
   
   shift() 刪除原數組的第一項，并返回刪除元素的值，如果數組為空折返回 undefined
   
   unshift() 將參數添加到原數組的開頭，并返回數組的長度
   
   let arr = [1, 2, 3, 4, 5]
   
   let item = arr.shift()
   
   console.log(item) // 1
   
   console.log(arr) // [2, 3, 4, 5]
   
   
   
   let count = arr.unshift(0, 'Jack')
   
   console.log(count) // 6
   
   console.log(arr) // [0, 'Jack', 2, 3, 4, 5]
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   七、sort() -----> 會改變原數組
   
   在排序時，sort() 方法會調用每個數組項的 toString() 轉型方法，然后比較得到的字符串，已確定如何排序，其本質是比較字符串的 ASCII 編碼
   
   即使數組中的每一項都是數值，sort() 方法比較的也是字符串，因此會出現以下情況：
   
   let arr1 = ['a', 'd', 'e', 'b', 'c']
   
   console.log(arr1.sort()) // ['a', 'b', 'c', 'd', 'e']
   
   
   
   let arr2 = [12, 26, 3, 99, 52]
   
   console.log(arr2.sort()) // [12, 26, 3, 52, 99]
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   解決辦法
   
   
   
   let arr3 = [12, 26, 3, 99, 52]
   
   arr3.sort((a, b) => {
   
   return a -b
   
   })
   
   console.log(arr3) // [3, 12, 26, 52, 99]
   
   1
   
   2
   
   3
   
   4
   
   5
   
   冒泡排序（優化版）
   
   
   
   function mySort (arr) {
   
   let count = 0 // 記錄循環次數
   
   // 外層循環  控制循環的次數，每次找到最大值
   
   for (let i = 0; i < arr.length - 1; i++) {
   
   count++
   
   // 判斷是否排序好了
   
   let isSort = true // 初始值默認已經排序好了
   
   for (let j = 0; j < arr.length - 1 - i; j++) {
   
   count++
   
   if (arr[j] > arr[j + 1]) {
   
   isSort = false
   
   // 交換位置
   
   let tmp = arr[j]
   
   arr[j] = arr[j + 1]
   
   arr[j + 1] = tmp
   
   }
   
   }
   
   // 某一趟結束，判斷一下是否結束
   
   // 如何判斷是否排序好，根據是否發生了位置交換，如果發生了位置交換就說明沒有排序好
   
   if (isSort) {
   
   break
   
   }
   
   }
   
   console.log(count)
   
   return arr
   
   }
   
   mySort([12, 26, 17, 520, 99])
   
   
   
   // 打印結果：count 9
   
   // arr [12, 17, 26, 99, 520]
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   13
   
   14
   
   15
   
   16
   
   17
   
   18
   
   19
   
   20
   
   21
   
   22
   
   23
   
   24
   
   25
   
   26
   
   27
   
   28
   
   29
   
   30
   
   31
   
   八、reverse() ----->會改變原數組
   
   反轉數組項的順序
   
   let arr = [1, 2, 3, 4, 5]
   
   arr.reverse()
   
   console.log(arr) // [5, 4, 3, 2, 1]
   
   
   
   1
   
   2
   
   3
   
   4
   
   九、indexOf() 和 lastIndexOf()
   
   indexOf() 接受兩個參數：要查找的項和查找起點位置的索引（可選項），其中從數組的開頭開始向后查找
   
   lastIndexOf() 接受兩個參數：要查找的項和查找起點位置的索引（可選項），其中是從數組的末尾開始向前查找
   
   返回值：當存在時，返回要查找的項在數組中首次出現的索引值；當不存在時，返回 -1
   
   可以用來判斷一個值是否存在數組中
   
   
   
   let arr = [1, 2, 3, 5, 7, 7, 8, 5, 12, 17]
   
   console.log(arr.indexOf(5)) // 3
   
   console.log(arr.lastIndexOf(5)) // 7
   
   
   
   console.log(arr.indexOf(5, 2)) // 3
   
   console.log(arr.lastIndexOf(5, 4)) // 3
   
   
   
   console.log(arr.indexOf('5')) // -1
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   十、includes()
   
   Array.prototype.includes() 數組實例的方法
   
   返回一個布爾值，表示某個數組是否包含給定的值
   
   推薦使用：可以用來判斷一個值是否存在數組中
   
   
   
   let arr = [1, 2, 3, 4, 5]
   
   console.log(arr.includes(3)) // true
   
   console.log(arr.includes(0)) // false
   
   1
   
   2
   
   3
   
   十一、forEach()
   
   對數組進行遍歷，對數組中的每一項運行給定函數，沒有返回值
   
   
   
   forEarch(function (item, index, array) {})
   
   
   
   參數 item：表示數組中的每一項
   
   參數 index：表示數組中每一項對應的索引值
   
   參數 array：表示數組本身
   
   let arr = [1, 2, 3, 4, 5]
   
   arr.forEach((item, index, array) => {
   
   console.log(item + '---' + index + '---' + (arr === array))
   
   })
   
   1
   
   2
   
   3
   
   4
   
   十二、map() -----> 不會改變原數組
   
   map() 方法是將數組中的每一項調用提供的函數，結果返回一個新數組，并沒有改變原來的數組
   
   映射
   
   
   
   let arr = [1, 2, 3, 4, 5]
   
   let newArr = arr.map(item => item * item)
   
   
   
   console.log(newArr) // [1, 4, 9, 16, 25]
   
   console.log(arr) // [1, 2, 3, 4, 5]
   
   1
   
   2
   
   3
   
   4
   
   5
   
   十三、filter() -----> 不會改變原數組
   
   filter() 方法是將數組中所有的元素進行判斷，將滿足條件的元素作為一個新數組返回
   
   過濾
   
   
   
   let arr = [12, 17, 26, 520, 1314]
   
   let newArr = arr.filter((item, index) => {
   
   return item > 20
   
   })
   
   console.log(newArr) // [26, 520, 1314]
   
   1
   
   2
   
   3
   
   4
   
   5
   
   十四、every()
   
   every() 判斷數組中每一項都是否滿足條件，只有所有項都滿足條件才返回 true，否則返回 false
   
   let arr = [1, 2, 3, 4, 5]
   
   let boolean1 = arr.every(item => item > 0)
   
   let boolean2 = arr.every(item => item > 3)
   
   
   
   console.log(boolean1) // true
   
   console.log(boolean2) // false
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   十五、some()
   
   some() 判斷數組中是否存在滿足條件的項，只要有一項滿足條件，就會返回 true，否則返回 false
   
   let arr = [1, 2, 3, 4, 5]
   
   let boolean3 = arr.some(item => item > 3)
   
   let boolean4 = arr.some(item => item < 0)
   
   
   
   console.log(boolean3) // true
   
   console.log(boolean4) // false
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   十六、reduce() 和 reduceRight()
   
   reduce() 方法是所有元素調用返回函數，返回值為最后結果，傳入的值必須是函數類型
   
   接受兩個參數：每一項調用的函數和作為歸并基礎的初始值（可選項）
   
   這個函數返回的任何值都會作為第一個參數自動傳給下一項。第一次迭代發生在數組的第二項上，因此第一個參數是數組的第一項，第二個參數就是數組的第二項。
   
   
   
   // 利用 reduce() 方法實現數組求和，給數組一開始家里一個初始值 3
   
   let arr = [1, 2, 3, 4, 5]
   
   let sum = arr.reduce((prev, cur, index, array) => {
   
   // 函數接受 4 個參數：
   
   // 前一個值、當前值、項的索引值、原數組對象
   
   console.log(prev, '---', cur, '---', index, '---', array)
   
   return prev + cur
   
   }, 3)
   
   console.log(sum) // 18 = 15 + 3
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   與之相對應的還有一個 Array.reduceRight() 方法，區別是這個是從右向左操作的
   
   
   
   十七、Array.from() 將類數組轉化為數組
   
   let arrayLike = {
   
   '0': 'a',
   
   '1': 'b',
   
   '2': 'c',
   
   '3': 'd',
   
   length: 4
   
   }
   
   // ES5 寫法
   
   let arr1 = [].slice.call(arrayLike) // ['a', 'b', 'c', 'd']
   
   
   
   // ES6
   
   let arr2 = Array.from(arrayLike) // ['a', 'b', 'c', 'd']
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   11
   
   12
   
   十八、Array.of() 方法用于將一組值轉化為數組
   
   Array.of總是返回參數值組成的數組。如果沒有參數，就返回一個空數組。
   
   
   
   Array.of(1, 2, 3, 4, 5) // [1, 2, 3, 4, 5]
   
   Array.of('abcd') // ['abcd']
   
   Array.of('abcd').length // 1
   
   Array.of() // []
   
   
   
   // Array.of 方法的實現
   
   function ArrayOf () {
   
   return [].slice.call(arguments)
   
   }
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   十九、數組實例的 find() 和 findIndex()
   
   數組實例的 find() 方法，用于找出第一個符合條件的數組成員
   
   它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為 true 的成員，然后就返回該成員，如果沒有符合條件的成員，則返回 undefined
   
   let arr = [1, 2, 3, 4, 5]
   
   let value= arr.find((item, index, array) => {
   
   // item 表示循環遍歷數組的每一項
   
   // index 每一項對應的索引值
   
   // array 原數組對象
   
   return item > 3
   
   })
   
   console.log(value) // 4
   
   console.log(arr) // [1, 2, 3, 4, 5]
   
   
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   數組實例的 findIndex方法的用法與find方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回 -1
   
   let arr = [1, 2, 3, 4, 5]
   
   let index = arr.findIndex((item, index, array) => {
   
   return item > 3
   
   })
   
   
   
   console.log(index) // 3
   
   
   
   [NaN].indexOf(NaN) // -1
   
   [NaN].findIndex(value => Object.is(NaN, value)) // 0
   
   [NaN].includes(NaN) // true
   
   1
   
   2
   
   3
   
   4
   
   5
   
   6
   
   7
   
   8
   
   9
   
   10
   
   由此可見：一般用來判斷數組中是否存在某個值，推薦使用 includes
   
   
   
   二十、扁平化數組 flat() 方法 -----> 不會改變原數組
   
   let arr = [1, [2, 3, [4, 5, [6]]]]
   
   let arrFlat = arr.flat(Infinity)
   
   console.log(arrFlat) // [1, 2, 3, 4, 5, 6]
   
   console.log(arr) // [1, [2, 3, [4, 5, [6]]]]
   
   1
   
   2
   
   3
   
   4
   
   利用遞歸實現數組扁平化
   
   
   
   let arrayFlat = []
   
   let myFlat = (arr) => {
   
   for (let i = 0; i < arr.length; i++) {
   
   let item= arr[i]
   
   // 判斷 arr[i] 是否是數組
   
   if (Array.isArray(item)) {
   
   // 如果是數組，繼續調用函數 myFlat
   
   myFlat(item)
   
   } else {
   
   arrayFlat.push(item)
   
   }
   
   }
   
   return arrayFlat
   
   }
   

   
   

   
   

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

目錄頁主要出現在一些篇幅比較長的書籍（畫冊）中，其位置一般被安排在扉頁之后，目錄雖然不是正文，卻概括了一本書的所有內容，具有便于讀者快速了解及查閱書本內容的作用，所以，即使說目錄頁是一本書中最重要的頁面也不為過。

既然如此，那么目錄頁的設計自然也是十分重要，于是乎，蔥爺整理了 8 個很不錯的目錄設計技巧分享給大家。

直線排版

直線在目錄設計中的作用主要有以下三個。

1. 連接

即把每節內容的標題與其對應的頁碼連起來，這是比較常規的一種做法，可以使目錄更加清晰，重復排列的線條會形成統一、規整的美感。采用這種排版方式時，標題與頁碼一般會設置成兩端對齊，這樣的效果更加整潔、清晰。

2. 創造形式

對于一些文字內容比較少的目錄頁，如果像上面的例子一樣排列會顯得比較單調和小氣，所以可以借助直線來增加其趣味性和張力。由于內容不多，所以即使不嚴格對齊也不會影響閱讀。

3. 信息區隔

比如在下圖的例子中，直線起到了兩個信息區隔的作用，一是區隔頁碼與大標題；二是使七個大章節的內容獨立開來。

加圖片

這種形式也適合內容比較少的目錄頁，當有了圖片后，目錄頁似乎也變成了一個內頁版面，更加豐富、飽滿。圖片在目錄設計中主要有兩個用法。

1. 概括章節的主要內容

其功能與標題一樣，所以如果要使用這種方式，那么就需要為目錄中的每個大標題都搭配對應的圖片。

2. 裝飾

這里的圖片不是與標題一一對應的，其目的是為了消除純文字目錄的單調感，使版面更豐富、更好看。

格子排版

即將目錄中的元素（頁碼、標題、圖片）用表格的形式來排列，這么做也可以使信息更加清晰，更有秩序。由于這種做法在目錄設計中并不常見，所以顯得很特別。

大頁碼

頁碼或者序號是目錄頁必不可少的元素，章節細分比較多的目錄都會標明頁碼，而分類比較少的目錄一般會采用序列號，用來區分幾個大板塊。把頁碼或序號拉大并使用筆畫比較粗的字體，除了可以使其更明了、醒目以外，還可以增加版面的大小對比，提升設計感。

把頁碼裁切一下，會更有設計感。

分欄排版

即把文字信息豎向等分成兩份或兩份以上，適用于文字比較多的版面，所以如果目錄頁的內容比較多時也適合分欄排版。由于每一欄的內容都嚴格對齊，且頁碼比較大，所以欄與欄之間即使錯位排列也不會影響閱讀。

除了文字還可以用圖片來分欄。

軸排版

即把目錄信息沿著某條軸排列，這種形式在目錄設計中也比較少見，適用于內容比較少的目錄頁。軸的形式一般為豎軸和橫軸，排列的形式通常為錯位排版。

上圖并不是以線為軸，而是以圖片和色塊為軸。

網格排版

我們都知道網格系統是畫冊設計的常用工具，可以有效組織版面信息，使其更有序、更整潔，所以內容比較多的目錄頁也可以用網格系統來排版，為了避免單調和無趣，通常會加入圖片元素。

留白

如果目錄的文字比較少，版面就容易顯得很空、很單調，常見的做法是增加圖片或者把文字拉大，其實主動保留大量空白也是一種解決辦法，比如把內容集中排列在版面的頂部、底部、左下角、右下角等位置，留出其他位置的空白。這么處理的版面雖然有一種不平衡感，但動感和設計感更強，大面積的留白還可以適當緩解眼睛的疲勞。

總結

無論做什么設計我們都要以它的最終目的為設計準則，由于目錄是為了方便瀏覽和查閱書本內容，所以設計時一定要注意視覺的整潔與信息的清晰，所以可以發現對齊和統一是最常被用到的兩個技巧。

如果經常聽評片會，許多朋友會聽過這樣一句話：「這樣拍會顯得畫面更有張力……」就攝影而言，我們認為張力，是讓一幅攝影作品在視覺上出效果的重要「內力」。此外「張力」還被廣泛應用在點評一段演唱，一幅畫，一次表演……我們都似乎能感受「張力」的意境，卻又似乎不能參透它的意思。

如何理解「張力」？如何借此來提高我們的攝影感悟？下面我就試著做個粗淺的分析吧。

追根溯源：「張力」到底是什么？

關于「張力」有很多略顯深奧的解釋。我認為下面這種解釋較為通俗，同時與攝影有一些關聯：

互補物、相反物和對立物之間的沖突或摩擦?！话愣?，凡是存在著對立而又相互聯系的力量、沖動或意義的地方，都存在著張力。（轉引自楊果〈隱藏的視點：中西「張力」范疇再辨〉，《江漢學術》，2013年10月）

盡管這段話不是針對攝影，甚至不是針對視覺藝術而寫的，但是卻很好的解釋了張力一詞?！笍埩Α梗╰ension）由「內涵」（intension）和「外延」（extension）二詞而來。其實它在物理學上的意思便是其在美學上的意義的絕佳比喻。

那么我們便可以粗淺感受一下「張力」在一張照片（或者說任何一種視覺藝術）中表達的是什么了：它通常表示了一幅照片對立而又統一的相互作用，這種作用通常產生緊張感、拉扯感，產生一種繁復的韻味。力的暗示、不平衡、斷裂、突發等效果都屬于張力范疇。

舉個極其通俗的例子，如果我要用圖片表達「跨欄」。

這張「沒有張力」，因為常規、平衡、穩定：

這張「有張力」，因為夸張，不平衡：

當我們在談論「張力」的時候，我們在談論什么？

當我們說一張照片的「張力」的時候，更多表達的是照片給我們帶來的主觀感受。通常情況下，一張「有張力」的照片背后蘊含著以下的特質。

1. 拉扯感

即我們可以感覺到「力量的存在」，似乎被某種力量拉扯著。哇，這是再直白不過的張力了。

以拍街頭行人為例，「奔跑」「轉向」或其他肢體較為夸張的動作和表情通常能讓我們體會到力量。人的潛意識總是會傾向于，試著讓一些看起來沒有達到穩態的東西趨向于達到穩態，夸張的動作同時也暗示著那些行人「將要跨出下一步」「將要轉過去」「將會拉扯肌肉」等等。

△ 韓松 / 攝 iPhone 7p， 莫斯科。奔跑的人。

△ 韓松 / 攝 iPhone 6， 馬爾丁，孩子的表情較為夸張，能感受到肌肉的拉扯，畫面感染力較強。

△ 韓松 / 攝 iPhone 6， 馬爾丁。同樣是人物照，這張就畫面張力略顯單薄。

而另一種拉扯感來自所拍攝的元素的形態本身。例如夕陽下被拉長的影子，具有縱深感的空間，夸張尖銳的幾何形態等。它們都會讓我們有被拖拽、被虹吸、被纏繞等感覺。

△ 韓松 / 攝 iPhone 7p， 布達佩斯。影子。

2. 沖突

制造各種對比與沖突。

例如強烈的色相對比，陰影和高光的高調對比等等。這無疑用畫面的色彩擊中我們的眼球。

再如一切能造成沖擊力的題材沖突：如抽象和具象，虛幻和真實，細膩與粗糙，動態與靜態等等。

△ 韓松 / 攝 iPhone 6， 香港。紅衣人物和綠色墻面的「撞色」。

△ 韓松 / 攝 iPhone 6， 里斯本。行人和影子。

3. 構圖

夸張的構圖也能產生張力。

斜線的構圖通常更有張力，因為它夸張而強烈。但斜線的構圖是需要磨練的，有時候「為了斜線而斜線」會顯得矯揉造作（之前的文章我建議大家先從擺正，拍平開始）。

△ 譚凌飛 / 攝 iPhone 6， 薩爾茨堡。斜射的影子讓不起眼的場景有了張力。

極度不遵從「三分法」「對稱」「平衡」等原則，而又在某種意義上很精妙地構圖，有時候也能造成張力。這種構圖的本質是打破了平衡感，擾動了我們潛意識里的平衡球。元素的極大和極小的對比，大量留白和極度撐滿，以及一些「莫名其妙」的夸張形式，都有可能成為視覺張力的發力點。

△ 韓松 / 攝 iPhone 6s， 北京。

△ 韓松 / 攝 iPhone 7p， 日本高松?！笜O大」的場景和「極小」的人物，拉開了比例。

△ 韓松 / 攝 iPhone 7p， 巴黎。雕塑和觀眾的比例和顏色對比形成張力，然而他們的動作又有一些聯系。

怎樣拍有張力？

1. 手機外置廣角或魚眼鏡頭

手機定焦鏡頭較為平和，如果加上外置的廣角或魚眼鏡頭能夠拍一些較有沖擊力的照片。廣角顧名思義是有很寬廣的視角，能夠近距離將比較寬的場景元素都拉扯在一起，讓斜線、曲線都更為夸張。

2. 勇敢面對那些「不舒服」的素材吧

其實本質還是在于不平衡。擁擠、窺視、抖動、不穩定的、轉瞬即逝，這些東西都不太舒服，但又常常因此形成視覺上的動感。擁擠人群中的一瞥，從奇特角度的窺探人物的活動、快速運動的騎車的人，匆匆而過的行人汽車等等，讓我們感到有「絲毫不安」，卻也預示著「這不是穩態」，是矛盾而拉扯著的。

△ 韓松 / 攝 iPhone 7p， 布拉格。擁擠的人群。

△ 韓松 / 攝 iPhone 7p， 日本奈良。透過吃草的鹿看后面的鹿。

△ 譚凌飛/ 攝 iPhone 6s， 巴黎。差點被遮住的鐵塔。

3. 不平衡的構圖

自不多說。對角線、夸張的引導線，螺旋線，撐滿畫面的構圖。那些找不到幾何中心而又精妙的構圖。

△ 韓松 / 攝 iPhone 7p， 日本。螺旋線。

4. 拍攝運動物體

跑步的人，快走的人，跳躍的人，快速通過的車。

△ 韓松 / 攝 iPhone 6s， 伊斯坦布爾。撐傘的人走過。

△ 韓松 / 攝 iPhone 7p， 莫斯科。拉手風琴的人與匆匆而過的行人。

5. 后期

通過調高飽和度等參數強化色相的對比等等。

△ 韓松 / 攝 iPhone 7p， 日本。后期調高了些飽和度，強化了人物和背景的顏色對比。

不得不承認，張力還是一個比較抽象的概念，我們從來不會以「張力」為目的去拍一張照片，更多的時候，我們是無意識地被「有張力」的場景所吸引，也具有從一堆原片中甄選出「有張力的照片」的能力。重要的是會在取景框中通過構圖的運用來制造張力的可能性。

文章來源：優設

一、首先找到第一次發起網絡請求的地址，將服務器返回set-cookie當全局變量存儲起來

wx.request({
  ......
  success: function(res) {
    console.log(res.header);
    //set-cookie:PHPSESSID=ic4vj84aaavqgb800k82etisu0; path=/; domain=.fengkui.net

    // 登錄成功，獲取第一次的sessionid,存儲起來
    // 注意：Set-Cookie（開發者工具中調試全部小寫）（遠程調試和線上首字母大寫）
    wx.setStorageSync("sessionid", res.header["Set-Cookie"]);
  }
}) 


    


    

二、請求時帶上將sessionid放入request的header頭中傳到服務器，服務器端可直接在cookie中獲取

wx.request({
  ......
  header: {
    'content-type': 'application/json', // 默認值
    'cookie': wx.getStorageSync("sessionid")
    //讀取sessionid,當作cookie傳入后臺將PHPSESSID做session_id使用
  },
  success: function(res) {
    console.log(res)
  }
}) 


    


    

三、后臺獲取cookie中的PHPSESSID，將PHPSESSID當作session_id使用

<?php
// 判斷$_COOKIE['PHPSESSID']是否存在，存在則作session_id使用
if ($_COOKIE['PHPSESSID']) {
    session_id($_COOKIE['PHPSESSID']);
}

session_start();
echo session_id(); 


    

        
    

    

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

jqGrid提供了表格底部匯總、合計行功能，我們先看下user-guide關于jqGrid合計行都有哪些說明？然后再看個DEMO，看看jqGrid表格底部匯總、合計行到底如何實現。



1、user-guide關于jqGrid合計行的說明

1）表格配置：footerrow, boolean, 默認false

If set to true this will place a footer table with one row below the gird records and above the pager. The number of columns equal those specified in colModel

表格是否顯示底部合計行。



2）表格配置：userDataOnFooter，boolean，默認false

When set to true we directly place the user data array userData in the footer if the footerrow parameter is set to true. The rules are as follows: If the userData array contains a name which matches any name defined in colModel, then the value is placed in that column. If there are no such values nothing is placed. Note that if this option is used we use the current formatter options (if available) for that column. See footerData method.

如果設為true，則userData可以用來填充匯總行。



3）匯總行賦值：footerData([string action], [object data], [boolean format])

This method gets or sets data on the grid footer row. When set data in the footer row, the data is formatted according to the formatter (if defined) in coModel. The method can be used if footerrow option is set to true.

parameters

string action - can be ‘get’ or ‘set’. The default is get. ‘get’ returns an object of type name:value, where the name is a name from colModel. This will return data from the footer. The other two options have no effect in this case. ‘set’ takes a data object and places the values in the footer The value is formatted according to the definition of the formatter in colModel - see next parameter. The object should be in name:value pair, where the name is the name from colModel

object data - data to be set in the footer in name:value pair, where the name should correspond to the name of colModel in order to be set in the appropriate cell.

boolean format - default is true. This instruct the method to use the formatter (if set in colModel) when new values are set. A value of false will disable the using of formatter



2、一個DEMO，如何利用gridComplete事件進行表格數據匯總并賦值給合計行

1）案例截圖



2）html代碼



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>jggrid底部匯總行</title>



<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css" />

<link rel="stylesheet" href="https://js.cybozu.cn/jqgrid/v5.3.1/css/ui.jqgrid.css" />

<script src=";

<script src=";

<script src=";

</head>

<body>

<div class="page-content container">

<div class="page-body"> <!-- page-body -->

<div class="panel panel-default" id="panel-orders">

<table id="orders"></table>

</div>

</div>

</div>

<script type="text/javascript">

var data = [];

function getBills() {

var rowCount = 10;

for (var i = 0; i < rowCount; i ++) {

data.push({

sid: i,

goods_no: i + 1,

goods_name: '零件名稱' + rowCount + i,

car_type_name: '車型' + rowCount + i,

package_name: '包裝器具' + rowCount + i,

unit_name: '件',

snp: 0.89,

bill_amount: rowCount + i,

goods_count: rowCount + i,

bill_no: 'BN0000000' + i,

qrcode: '1000000000' + i,

barcode: '1000000000' + i,

})

}

$("#orders").jqGrid("clearGridData").jqGrid('setGridParam',{data: data || []}).trigger('reloadGrid');

}

$(function() {

$("#orders").jqGrid({

colModel: [

{label: "零件號", name: "goods_no", width: 60},

{label: "零件名稱", name: "goods_name", search:false, width: 180},

{label: "車型", name: "car_type_name", width: 70},

{label: "包裝器具", name: "package_name", width: 70},

{label: "單位", name: "unit_name", width: 40},

{label: "訂單號", name: "bill_no", width: 120},

{label: "訂單數量", name: "goods_count", width: 80},

],

datatype: 'local',

rownumbers: true,

height: 300,

rowNum: 1000,

footerrow: true,

gridComplete: function() {

var rows = $("#orders").jqGrid("getRowData"), total_count = 0;

        for(var i = 0, l = rows.length; i<l; i++) {

        total_count += (rows[i].goods_count - 0);

        }

        $("#orders").jqGrid("footerData", "set", {goods_name:"--合計--",goods_count:total_count});

        }

});

getBills();

});

</script>

</body>

</html>



3）代碼說明：



表格構建時，設置：footerrow: true

gridComplete(jqGridGridComplete)事件處理，進行數據匯總并賦值給合計行

gridComplete fires after all the data is loaded into the grid and all other processes are complete. Also the event fires independent from the datatype parameter and after sorting paging and etc. Does not fire if datatype is a defined as function.



4）獲取匯總行數據

var row = $("#orders").jqGrid(“footerData”, “get”);

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