本文是依據 Browserify 官網及網路參考資料逐步學習記錄的內容

Browserify 讓我們可以在瀏覽器中使用Node.js 風格的模組，不管是 AMD / CMD / ES6 …..風格的模塊化，它都能認識，並且編譯成瀏覽器認識的JS。

Browserify 運作的方式，會先在代碼中以靜態分析(static analysis)搜尋有調用 require()的內容，彙整出調用依賴關係圖(dependency graph)，並且將關鍵字解析成路徑，然後根據路徑找到檔案， 接著，檔案會被打包(bundle)成單一獨立的 javascript 檔案，讓你可以直接在網頁中直接使用。 並且，打包的檔案預設都會使用嚴格模式 ```use

接下來，開始介紹 Browserify 安裝方式及用法說明:

在使用 nodejs ，時常遇到版本無法支援的狀況，導致會出現找不到相關模組的情況

例如: Cannot find module ‘github-url-from-git’

處理的方式分別有以下幾種

在一頁式網頁架設登入系統通常是一件非常麻煩棘手的事情，

在一開始要思考的是該挑選哪個主流框架 Angular、React或Vue…

然後開始建立一個前後端分離的架構，只透過RESTful API來進行溝通，

在這樣的架構下，搭建CMS相當容易，前端通常只需要取得資料後，進行render出來即可，

##SESSION BASE 無用武之地 如果要建設會員或管理者權限功能，傳統 session-based 的權限登入方式相當簡單，

但是在透過 RESTful API 應用的框架中，session-based的方式則行不通，

此外，單純使用SESSION的情況，也必須解決資料跨 Server 的問題

Token

Token是一串加密字串，並儲存在前端， 當使用者再次操作時，就能在後端從資料庫中比對token， 檢查是否為有效的使用者， 但是這樣的查詢也會產生伺服器的負擔

Language of the browser: zh-TW var x = "Language of the browser: " + navigator.language; var txt = ""; txt += "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt += "<p>Browser Name: " + navigator.

安裝typescript

npm install -g typescript

接著測試看看是否能正常運作 先建立一個 helloworld.ts 內容寫入

let hi: string = "helloworld";

接著在下指令

tsc helloworld.ts

如果有產生一個對應的helloworld.js 那就代表能正常運作

var hi = "helloworld";

#Basic Types 紀錄一些Typescipt基本型態用法，主要參考自Typescript官網 Basic Types https://www.typescriptlang.org/docs/handbook/basic-types.html

##Boolean

let isDone: boolean = false;

##Number 在typescirpt中，所有numbers都是以符點數來表示，因此可以支援十六進位、十進位、八進位、二進位數值格式。

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

https://www.smashingmagazine.com/2016/09/content-security-policy-your-future-best-friend/ http://www.ruanyifeng.com/blog/2016/09/csp.html Content Security Policy - 簡稱 CSP，是一個瀏覽器安全保護使用者的策略。 主要用於降低 cross-site scripting (XSS) 的風險。 網站傳送Header時﹑夾帶 CSP header 告訴瀏覽器哪些是合法的內容，哪些是不合法的。 在基本的規則中，Header meta name 命名為 Content-Security-Policy 接下來就可以定義規則 定義的方式可以依照你使用的環境及語法而定 首先可以直接使用HTML meta的方式來定義 例如: <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.

AMP 簡介 根據Google統計報告指出，載入網頁時間如果大於三秒，流失用戶的可能性就會大增， 因此，在 Google 在 2016 年正式推出了"加速行動版網頁"(Accelerated Mobile Page, AMP)，以下簡稱 AMP， AMP 能讓跨裝置的使用者都能更快速的載入網頁，讓網頁能有更好的體驗， 只要根據官方的HTML結構進行設定，調整 html、js、css 設定， 再將頁面提交給Google DNS，Google就會將AMP頁面進行快取緩存， 當使用者搜尋你的網頁時，Google會先將快取裡的資料顯示給使用者， 依據官方資料顯示，經過AMP優化的頁面可以提高四倍的載入速度! 接下來就開始來了解 AMP 的原理~ AMP 結構說明 AMP可以分成三個部分 AMP HTML - AMP HTML基本上是使用定制AMP屬性擴展的HTML AMP JS - AMP JS 庫，主要是處理AMP HTML頁面的快速渲染 AMP Cache - 用於提供緩存的AMP HTML頁面 SEO 目前官方說明僅透露 AMP 設定不會影響SEO，

作為一個工程師，我們了解這行業的步調演變得非常快，超快。事實上，我們未必能夠即時跟上這些新的程式庫、框架及目前所使用工具的最新版本。但是，仍然必須保持動力，確保能夠繼續的產出，以符合老闆及客戶的期望。 新的一年已經度過了兩個多月，一些新趨勢也已經開始形成初期的規模。在本文中，將介紹三個值得在2015年關注的程式庫即框架。 React.js [React.js](http://facebook.github.io/react/)，也可簡稱為 React，主要用於開發使用者介面。由 Facebook 及 Instagram 聯手打造出來。目前，由這兩家公司進行維護，使用者群包含有 Yahoo, Airbnb, Sony, Facebook及Instagram。 React.js並不是一個完整的框架，因此會找不到一些存在 Ember或Angular JS的功能。他所倡導的精神主要在產生可以重複使用的UI元件，可以根據時間來調用數據。也因為這樣，很多人都習慣將它是為MVC中的V。並且和Angular JS最大的不同處在於: Angular JS是使用雙向數據綁定，而React是偏向於單向數據綁定模式。 最重要的是，這個專案是以類似DOM的概念。 你可以用來設定元素，控制數據，以及調整頁面中的DOM。 You can think of it as a set of elements that you can modify with your data and which, in the end, will modify the page’s real DOM.