從新認識HTML，CSS，Javascript 之node-webkit 初探

時間 2019-11-13

標籤從新認識 html css javascript node webkit 初探欄目 HTML 简体版

原文原文鏈接

今天咱們來系統的、全面的瞭解一下前端的一些技術，將有助於咱們寫出更優秀的產品出來。javascript

什麼是HTML？css

HTML 是用來描述網頁的一種語言。
html

HTML 包含一些根節點，子節點，文本節點，屬性節點，組成，前端

它經過一系列預約義標籤來描述網頁結構，如： <title>This is title</title> ，這個代表該網頁的標題是 This is title。html5

什麼是CSS？java

CSS 指層疊樣式表 (Cascading Style Sheets)，它描述瀏覽器顯示如何顯示html元素。
node

看下面代碼，瀏覽器將會以 20px綠色字體顯示 p標籤中的文本節點android

p{font-size: 20px;color: green;}

這些html元素、css樣式是由W3C組織制定規範；ios

而後由不一樣瀏覽器實現，全部你會看到同一個網頁頁面，經過不一樣的瀏覽器查看，顯示會有一些差異。css3

下面圖片是說明瀏覽器如何解析 html 和 css的:

html 就是一個文本文件，

一、瀏覽器經過http 請求服務器，把html文檔下載下來

二、把html解析成dom樹，同時提供dom接口，方便其餘編程語言操做dom樹，如：javascript

三、下載並，解析css樣式規則

四、把樣式規則依附在html元素上（以css選擇器做爲依賴）

五、渲染dom樹

六、顯示

爲何說html，css，javascript 是跨平臺的？
html，css，javascript 其實就是一個文本文件，而後經過瀏覽器不一樣的引擎去解析相應的代碼來執行，

因此只有實現某個平臺下的瀏覽器就好了，就能夠在這個平臺上使用這個 Web Project，聽起來是否是以爲頓悟了。

而java 跨平臺的原理則是，把 java源文件翻譯成與平臺無關的class文件，而後經過 JVM 去加載執行。

值得一提的是 JVM 也是一個規範，使用普遍的JVM 是 Java HotSpot ，若是你能力夠強的話，能夠基於openjdk

來開發本身的jdk ，來實現jdk級別的優化。

如此分析，是否是以爲HTML、CSS、Javascript 很可愛，它其實就是一個規範，

如今HTML5 、CSS3 ,EcmaScript6 提出不少新的特性，概論，若是一旦瀏覽器獲得了更好的支持，那就移動Web開發將成爲主流，而 android，ios ，這類原生的程序將會慢慢的減小。

想象一下，經過瀏覽器，就能夠實現全部的請求，好比聊天，看視頻，上網方式將會變得很是優美，不是麼。

好吧，接下來說一下 node-webkit，個人理解是它是一個nodejs引擎+ webkit 引擎。

經過nodejs引擎解析 js ，而經過 webkit 引擎解析 html 、 css ，因此在網頁中能夠嵌入 nodejs 的代碼。

有些html 、 css、js的經驗的話，會很平滑的過渡，來開發一些東西。

那咱們來掀起node-webkit的蓋頭來吧。

打開nw.exe 來看看

乍一看，就是谷歌瀏覽器啊，好吧，來點乾貨吧。

index.html

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>what's node-webkit?</title>  
    <style>  
        h1 {  
            color: red;  
        }  
  
        p {  
            font-size: 20px;  
            color: green;  
        }  
    </style>  
    <script>  
        console.log('當你看到這段文字，說明這段代碼被nodejs引擎，解釋，執行了');  
        console.log(this);  
    </script>  
</head>  
<body>  
<h1>This is a nw app.</h1>  
  
<p>它是一個nodejs引擎+ webkit 引擎 </p>  
  
</body>  
</html>

package.json

{  
    "name": "nw-frist",  
    "version": "0.0.1",  
    "main": "index.html"  
}

打包成zip格式的文件，而後執行 nw.exe nw-first.zip 來運行它

第一圖是用 nw 去執行，第二圖是在Google Chrome 中查看，

能夠看出，效果是同樣的。

好吧，來添加點不同的。

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <title>what's node-webkit?</title>  
    <style>  
        h1 {  
            color: red;  
        }  
  
        p {  
            font-size: 20px;  
            color: green;  
        }  
    </style>  
    <script>  
        console.log('當你看到這段文字，說明這段代碼被nodejs引擎，解釋，執行了');  
        console.log('this : ', this);  
        console.log('global : ', global);  
    </script>  
</head>  
<body>  
<h1>This is a nw app.</h1>  
  
<p>它是一個nodejs引擎+ webkit 引擎 </p>  
  
</body>  
</html>

能夠看到咱們輸出 global 對象的信息，

這意味着node-webkit javascript 運行環境是 nodejs，

那咱們就能夠在 html script標籤中使用 nodejs 進行編程，包括，讀取本地文件，進行網絡請求，訪問本地硬件設備。。。等等，這是否是意味着能夠用來開發本地程序？答案固然是 true ，並且能夠跨平臺，就如上面分析的同樣。咱們可使用html5 、css3 開發很是優美，交互更棒的本地 web app ，有大量的 nodejs 包和 js lib 使用，試想一下用 c++ ， vb ，Python 開發一個漂亮的本地程序，要自定義一些組件，那是多麼麻煩。

有時間咱們將經過 node-webkit，寫一個文件瀏覽器，來實踐一下，這些技術是怎麼結合的？

以上純屬我的看法。