1. 程式人生 > >前端開發實習日記 -2

前端開發實習日記 -2

  這周開始在導師的帶領下嘗試些功能點。

因為以前沒有真切接觸過nodejs開發,儘管看了一些教程,但水平遠遠不夠。只是讓我寫一個小介面,也用了整整一天時間。但是主要是功能點雖然不麻煩,但是涉及到的外掛及庫都沒有接觸過,所以必須不斷百度,理清程式碼。而且程式碼弄清楚之後,儘管知道實現功能的思路,但就是不知道該怎麼下手。不過總算是掙扎著寫出了程式碼。下面來總結一下自己的收穫。

一. Async:

Async是一個流程控制工具包,提供了直接而強大的非同步功能。基於Javascript為Node.js設計,同時也可以直接在瀏覽器中使用。相比其他流程控制庫,async還是相當靠譜及強大的。主要實現了三個部分的流程控制功能:

  1. 流程控制:control flow
  2. 集合處理:collections
  3. 工具類:util

1). 集合: Collections

  1. each: 如果想對同一個集合中的所有元素都執行同一個非同步操作(可以與js中陣列操作foreach類比
  2. map:  對集合的每一個元素執行一步操作,得到的結果將彙總到最終的callback中。而each不關心最後的值。
  3. filter:對集合元素進行篩選
  4. reject:與filter相反,將返回為true的值拋棄。
  5. reduce:類似於js陣列操作的reduce方法。並且也有reduceRight方法
  6. detect:獲取集合中第一個滿足條件的元素
  7. sortBy:對集合內元素進行從小到大0排序
  8. some:對元素進行或操作,只要有一個元素滿足條件,callback得到的值為true,否則為false;
  9. every:對元素進行與操作。只有所有元素滿足條件,callback得到的值為true,否則為false
  10. concat:將多個非同步操作得到的結果合併為一個數組。
(具體的程式碼例子在週末有時間的時候補上)

2). 流程控制: Control Flow 

1. series(tasks,[callback]): 序列執行,一個函式陣列中的每個函式依次執行。只有上一個函式執行完畢,才回執行下一個函式

如果任何一個函式向它的回撥函式中傳了一個error,則後面的函式都不會被執行,並且將會立刻會將該error以及已經執行了的函式的結果,傳給series中最後那個callback.

當所有的函式執行完後(沒有出錯),則會把每個函式傳給其回撥函式的結果合併為一個數組,傳給series最後的那個callback。

多個series呼叫部分先後。因為series本身也是非同步呼叫

2. parallel(tasks,[callback]): 並行執行。每個函式都是立即執行,不需要等待其他函式先執行。傳給最終callback的陣列中的資料按照tasks中宣告的順序,而不是執行完成的順序。

如果某個函數出錯,則立刻將err和已經執行完的函式的結果值傳給parallel最終的callback。其它未執行完的函式的值不會傳到最終資料,但要佔個位置。同時支援json形式的tasks,其最終callback的結果也為json形式。

3. waterfall(tasks,[callback]): 按順序依次執行一組函式。前一個函式的輸出將會成為下一個函式的輸入。

......

(還有其他的流程控制方法,有時間的繼續寫。以上三種是我在看程式碼遇見比較多,以及自己寫程式碼遇到的印象比較深刻的。)

3). 工具類: Utils

1. memoize: 讓某一個函式在記憶體中快取它的計算結果。對於相同的引數,只計算一次,下次就直接拿到之前算好的結果。

2. unmemoize: 讓已經被快取的函式,返回不快取的函式引用。

3. log: 執行某非同步函式,並記錄它的返回值,日誌輸出。

4. dir: 與log類似,不同之處在於,會呼叫瀏覽器的console.dir()函式,顯示為DOM檢視。

5. noConflict: 如果之前已經在全域性域中定義了async變數,當匯入本async.js時,會先把之前的async變數儲存起來,然後覆蓋它。僅僅用於瀏覽器端,在nodejs中沒用。

二、 外掛

 除了async之外,還接觸了不少外掛 

1. select2  下拉列表外掛

2. plupload  檔案上傳元件

3. UEditor   是一套開源的線上HTML編輯器

最後,感謝我的導師不嫌棄我速度慢。而且教了我很多東西~

參考文章:

相關推薦

前端開發實習日記 -2

  這周開始在導師的帶領下嘗試些功能點。 因為以前沒有真切接觸過nodejs開發,儘管看了一些教程,但水平遠遠不夠。只是讓我寫一個小介面,也用了整整一天時間。但是主要是功能點雖然不麻煩,但是涉及到的外

Web前端開發面試題2

1、CSS引入的方式有哪些?link和@import的區別是? 本質上,這兩種方式都是為了載入CSS檔案,但還是存在著細微的差別。 差別1:老祖宗的差別。 link屬於XHTML標籤,而@import完全是CSS提供的一種方式。 link標籤除了可以載入CSS外,還可以

前端爬坑日記(1),你在初入vue專案開發過程中可能會掉進的坑!

這篇文章是記錄我在vue專案開發中遇到的各種巨坑,希望看了能對你有一些幫助,這篇文章會長期更新 1.Vue中使用sass 首先通過以下程式碼安裝sass的依賴: npm i sass-loader node-sass - s 然後在webepack.base.conf.js目錄下配置

前端開發-2-HTML-table&form&表單控制 標籤

 1、table標籤 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>表格</title> <

前端開發-2-HTML-body標籤

 body標籤 h、p、a、ul、ol、div、img、  想要在網頁上展示出來的內容一定要放在body標籤中。 把我們之前海燕那一段HTML程式碼貼過來,儲存到一個HTML格式的檔案中。 <!DOCTYPE HTML> <html>

前端開發-2-HTML-head標籤

browser英 /'braʊzə/ 美 /'braʊzɚ/ 瀏覽器 explorer英 /ek'splɔːrə(r)/ 美 /ɪk'splɔrɚ/ 探險者,資源管理器 1.index 2.head標籤相關內容 3.

前端開發IDE之用WebStorm進行Angularjs 2開發

WebStorm是進行JS和前端開發的不二之選的IDE工具,雖然目前版本已經更新了,但是由於Angular 2的成熟度還沒那麼高,所以用WebStorm進行Angular 2的工程建立,還是沒有其他語言的方便。自己嘗試用WebStorm搭建Angular 2的工程,搭建過程特別是在Windows上磕

開發日記2 --通過網頁內連結跳轉url正常而直接輸入url則報404錯誤的問題

通過網頁內連結跳轉url正常而直接輸入url則報404錯誤的問題 又經過一天的編寫,現在前臺入口網站已經完成了前三個功能(網站首頁,球隊成員,球隊相簿)我將其釋出到伺服器上後訪問我的ip地址xxx,重定向到xxx/welcome,如圖: 點選球隊成員後頁面轉變

我的春招實習+秋招總結【前端開發

雙非本科,通訊工程,算是轉到IT行業這邊的了。從大二暑期正式開始學習前端,想想已經一年的時間了。期間經歷了很多,從迷惘到清晰,從艱難自學到找到實習,從備戰秋招到找到工作。能經歷的我都經歷過了。來說說那些【前端工作者】的艱辛與歡樂。 開始自學前端 大二暑期留在學校,一邊參加數學

前端開發日記之點選懸浮框之外的地方隱藏懸浮框

本次遇見的問題是:在拒絕訂單時,頁面彈出了一個懸浮框用於輸入拒絕理由。需要我做的是:彈出懸浮框時,點選頁面其它位置時會將懸浮框隱藏。 在此處貼出程式碼://拒絕彈出框在點選彈出框其它位置時,隱藏彈出框

Java Web 高效能開發,第 2 部分: 前端的高效能

原文地址:http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf2/ 引言 在前端優化的第一部分中,主要講解了對靜態資源的一些優化措施,包括圖片壓縮、CSS Sprites 技術、GZIP 壓縮等。這一部分,本文將

2. web前端開發分享-css,js進階篇

一,css進階篇:   等css哪些事兒看了兩三遍之後,需要對看過的知識綜合應用,這時候需要大量的實踐經驗, 簡單的想法:把qq首頁全屏另存為jpg然後通過ps工具切圖結合css轉換成html,有無從下手的地方可以用firebug, chrome除錯工具分析網站結構樣式。如果技術熟練自信可以自己先寫,寫完

工作隨記2-前端開發常見報錯處理(不定時更新)

1、頁面有空的src屬性(src = "")報錯資訊:GET http://xxxx.com/xxx/ 403 (Forbidden)   :formatted:181 2、ios事件代理on()不起作用 $(document).on("click", ".submitBt

指尖上行--移動前端開發進階之路(讀書筆記)----2.1動畫形式

chapter 2 技術創意形式 動畫形式 移動裝置 Web API 詳解 WebVR 創意點 2.1 動畫形式 2.1.1 CSS3 CSS3 Cascading Style Sheets 層疊樣式表。 CSS3是CSS技術的一個升級版本,

前端開發step1,2,3

step1:  找到合適的元件,把他拼成自己想要的樣子;step2:  mock相應的datasource,使自己的UI按照約定的API渲染出來;step3: 遠端get or post 資料,實現UI和服務端的互動。step4: 真實環境下,結合後端API進行測試

前端開發經典面試題之一:將2個有序陣列排序

實現2個有序陣列的排序 比如將如下兩個有序陣列 [1, 3, 5, 7, 9, 12, 15, 18] 和 [2, 8, 11, 16, 19] 排序後,我們希望得到新陣列[ 1, 2, 3, 5, 7, 8, 9, 11, 12, 15, 16, 18,

Java實習日記2-1)

2018年1月9日,實習的第二天,今天主要包括兩部分 第一部分是對zookeeper的學習和安裝 點選Download後頁面如下,第一個連結是推薦的下載映象 點選推薦連結,推薦下載穩定版 下載後解壓縮,開啟zookeeper-3.4.11,修

自學前端開發:模擬Array功能 不是擴展子類

自學 下使用 .cn 解決 shift this var 擴展 method function MyArray(){};//創建模擬數組功能的構造函數 MyArray.prototype.length=0;//解決IE下使用擴展子類

前端開發中的JS調試技巧

pre 整潔 選擇 輸入 越來越大 代碼執行 auto move ctr 前言:調試技巧,在任何一項技術研發中都可謂是必不可少的技能。掌握各種調試技巧,必定能在工作中起到事半功倍的效果。譬如,快速定位問題、降低故障概率、幫助分析邏輯錯誤等等。而在互聯網前端開發越來越重要的今

實習日記 怎麽讓菜單欄默認打開

block 系統 style 代碼 class splay clas display 備份    <li> <h3><i class="fa fa-fw fa-cog" ></i>系統設置</h3> &l