1. 程式人生 > >簡單理解JavaScript,TypeScript和JSX

簡單理解JavaScript,TypeScript和JSX

面向對象 靜態類型 oid 解析 廣泛 java windows 組成 world

JavaScript:

基本概念:

JavaScript一種直譯式腳本語言,是一種動態類型、弱類型、基於原型的語言,內置支持類型。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於瀏覽器客戶端的腳本語言。

組成部分

ECMAScript,描述了該語言的語法和基本對象。
文檔對象模型(DOM),描述處理網頁內容的方法和接口。
瀏覽器對象模型(BOM),描述與瀏覽器進行交互的方法和接口。
基本特點
JavaScript是一種屬於網絡的腳本語言,已經被廣泛用於Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

是一種解釋性腳本語言(代碼不進行預編譯)。
主要用來向HTML(標準通用標記語言下的一個應用)頁面添加交互行為。
可以直接嵌入HTML頁面,但寫成單獨的js文件有利於結構和行為的分離。
跨平臺特性,在絕大多數瀏覽器的支持下,可以在多種平臺下運行(如Windows、Linux、Mac、Android、iOS等)。
Javascript腳本語言同其他語言一樣,有它自身的基本數據類型,表達式和算術運算符及程序的基本程序框架。Javascript提供了四種基本的數據類型和兩種特殊數據類型用來處理數據和文字。而變量提供存放信息的地方,表達式則可以完成較復雜的信息處理。
日常用途
嵌入動態文本於HTML頁面。
對瀏覽器事件做出響應。
讀寫HTML元素。
在數據被提交到服務器之前驗證數據。
檢測訪客的瀏覽器信息。
控制cookies,包括創建和修改等。
基於Node.js技術進行服務器端編程。

TypeScript:

基本概念:

TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個超集,而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。安德斯·海爾斯伯格,C#的首席架構師,已工作於TypeScript的開發。
TypeScript擴展了JavaScript的語法,所以任何現有的JavaScript程序可以不加改變的在TypeScript下工作。TypeScript是為大型應用之開發而設計,而編譯時它產生 JavaScript 以確保兼容性。

TypeScript 支持為已存在的 JavaScript 庫添加類型信息的頭文件,擴展了它對於流行的庫如 jQuery,MongoDB,Node.js 和 D3.js 的好處。

特性
類 Classes
接口 Interfaces
模塊 Modules
類型註解 Type annotations
編譯時類型檢查 Compile time type checking
Arrow 函數 (類似 C# 的 Lambda 表達式)

JavaScript 與 TypeScript 的區別
TypeScript 是 JavaScript 的超集,擴展了 JavaScript 的語法,因此現有的 JavaScript 代碼可與 TypeScript 一起工作無需任何修改,TypeScript 通過類型註解提供編譯時的靜態類型檢查。
TypeScript 可處理已有的 JavaScript 代碼,並只對其中的 TypeScript 代碼進行編譯。

JSX:

JSX就是Javascript和XML結合的一種格式。React發明了JSX,利用HTML語法來創建虛擬DOM。當遇到<,JSX就當HTML解析,遇到{就當JavaScript解析。

jsx常用語法:

  • 在 { },內寫js表達式
  • 代碼註釋寫法: { /* 註釋內容 */ }
  • HTML顯示: 空格顯示: 可以使用Unicode轉碼
  • HTML顯示: <div dangerouslySetInnerHTML={{__html: html}} />
  • 樣式綁定:通過style屬性來定義,但和真實DOM不同的是,屬性值不能是字符串而必須為對象。<div style={{color: ‘#ff0000‘, fontSize: ‘14px‘}}>Hello World.</div>
  • 事件綁定:JSX采用駝峰寫法來描述事件名稱,大括號中是標準的JavaScript表達式,返回一個事件處理函數。<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>

簡單理解JavaScript,TypeScript和JSX