前端技術面——（js基礎二）

gulp強調的是前端開發的工作流程，我們可以通過配置一系列的task，定義task處理的事務（例如檔案壓縮合並、雪碧圖、啟動server、版本控制等），然後定義執行順序，來讓gulp執行這些task，從而構建專案的整個前端開發流程。

PS：簡單說就一個Task Runner

webpack是前端資源模組化管理工具和打包工具。可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模組進行程式碼分隔，等需要時再非同步載入。通過 loader的轉換，任何形式的資源都可以視作模組，比如 CommonJs 模組、AMD 模組、ES6 模組、CSS、圖片、JSON、Coffeescript、LESS 等。

PS：webpack is a module bundle

• gulp是側重於前端開發的整個過程的控制管理。著重於控制流程。例如自動重新整理頁面，雪碧圖，壓縮js,css,編譯less,檢查語法等。
• webpack側重於模組打包。把開發中所有資源都看做模組。webpack是通過loader(載入器)和plugins（外掛）對資源進行處理。是模組化方案。不管是AMD/CMD/ES6風格的模組化，都能編譯成瀏覽器認識的js。

• XSS：跨站指令碼（Cross-site scripting，通常簡稱為XSS）是一種網站應用程式的安全漏洞攻擊，是程式碼注入的一種。它允許惡意使用者將程式碼注入到網頁上，其他使用者在觀看網頁時就會受到影響。這類攻擊通常包含了HTML以及使用者端指令碼語言。

• CSRF：跨站請求偽造（英語：Cross-site request forgery），也被稱為 one-click attack 或者 session riding，通常縮寫為 CSRF 或者 XSRF， 是一種挾制使用者在當前已登入的Web應用程式上執行非本意的操作的攻擊方法。

• XSS： 通過客戶端指令碼語言（最常見如：JavaScript） 在一個論壇發帖中釋出一段惡意的JavaScript程式碼就是指令碼注入，如果這個程式碼內容有請求外部伺服器，那麼就叫做XSS！

• CSRF：又稱XSRF，冒充使用者發起請求（在使用者不知情的情況下）,完成一些違背使用者意願的請求（如惡意發帖，刪帖，改密碼，發郵件等）。

• 防禦XSS攻擊
  1，對使用者表單輸入的資料進行過濾，對javascript程式碼進行轉義，然後再存入資料庫；
  2，在資訊的展示頁面，也要進行轉義，防止javascript在頁面上執行。

• 防禦CSRF
  1，所有需要使用者登入之後才能執行的操作屬於重要操作，這些操作傳遞引數應該使用post方式，更加安全；
  2，為防止跨站請求偽造，我們在某次請求的時候都要帶上一個csrf_token引數，用於標識請求來源是否合法，csrf_token引數由系統生成，儲存在SESSION中。

• 就是當使用者瀏覽器或搜尋引擎訪問某個舊的網址時，伺服器告訴瀏覽器或搜尋引擎，「該網頁已經搬家了，新家的地址是……，請使用新地址來訪問該網頁」
• HTTP重定向又分為永久重定向(HTTP狀態碼為301)和臨時重定向(HTTP狀態碼為302)。永久重定向就表示該網址已經搬到到一個永久居住的「新家」，臨時重定向就表示該網址搬遷到了一個臨時居住的「公寓」
• 在某些情況下，我們可能需要將站點中的某個檔案移動到一個新的位置或更改該檔案的名稱。此時，使用者可能仍然會輸入以前收藏的網址來訪問該網頁檔案，因此，我們需要儘量保證以前的網址和新的網址都能夠訪問到最新的網頁內容。

•   .box1{
        display: table-cell;
        vertical-align: middle;
        text-align: center;        
    }
  複製程式碼

•   .box6 span{
        position: absolute;
        top:50%;
        left:50%;
        width:100%;
        transform:translate(-50%,-50%);
        text-align: center;
    }
  複製程式碼

• vertical-align屬性只對行內元素有效，對塊內元素無效！

連結

• this是js的一個關鍵字，隨著函式使用場合不同，this的值會發生變化。
• 但是有一個總原則，那就是this指的是呼叫函式的那個物件。
• this一般情況下：是全域性物件Global。 作為方法呼叫，那麼this就是指這個物件

ECMAscript 5新增了第二種執行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下執行。 設立"嚴格模式"的目的，主要有以下幾個：

優點：

• 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;
• 消除程式碼執行的一些不安全之處，保證程式碼執行的安全；提高編譯器效率，增加執行速度；為未來新版本的Javascript做好鋪墊。
• 注：經過測試 IE6,7,8,9 均不支援嚴格模式。

缺點：

• 現在網站的 JS 都會進行壓縮，一些檔案用了嚴格模式，而另一些沒有。
• 這時這些本來是嚴格模式的檔案，被merge後，這個就合併到了檔案的中間，不僅沒有指示嚴格模式，反而在壓縮後浪費了位元組。

1、建立一個空物件，並且 this 變數引用該物件，同時還繼承了該函式的原型。
2、屬性和方法被加入到 this 引用的物件中。
3、新建立的物件由 this 所引用，並且最後隱式的返回 this 。

• 查詢瀏覽器快取
• DNS解析、查詢該域名對應的IP地址、重定向（301）、發出第二個GET請求
• 進行HTTP協議會話
• 客戶端傳送報頭(請求報頭)
• 伺服器回饋報頭(響應報頭)
• html文件開始下載文件樹建立，根據標記請求所需指定MIME型別的檔案檔案顯示

{瀏覽器這邊做的工作大致分為以下幾步：
載入：根據請求的URL進行域名解析，向伺服器發起請求，接收檔案（HTML、JS、CSS、圖象等）。 解析：對載入到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部資料結構（比如HTML的DOM樹，JS的（物件）屬性表，CSS的樣式規則等等）}

• 1、rootScope
  原理：所有的應用都有一個rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。 $rootScope 可作用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，可以在各個 controller 中使用

• 2、用地址Url傳值——用$location獲得位址列裡的引數

• 3、通過事件的方式
  首先介紹一下angular中的事件廣播：

  • $on(name,handler) 註冊一個事件處理函式，該函式在特定的事件被當前作用域收到（從父級或者子級作用域）時將被呼叫。
  • $emit(name,args) 向當前父作用域傳送一個事件，直至根作用域。
  • $broadcast(name,args) 向當前作用域下的子作用域傳送一個事件。

• 4.通過服務
  在angular中服務是一個單例，所以在服務中生成一個物件，該物件就可以利用依賴注入的方式在所有的控制器中共享。