又一次认识HTML，CSS，Javascript 之node-webkit 初探-CSDN博客

今天我们来系统的、全面的了解一下前端的一些技术，将有助于我们写出更优秀的产品出来。

什么是HTML？

HTML 是用来描写叙述网页的一种语言。

HTML 包括一些根节点。子节点，文本节点。属性节点。组成，

它通过一系列提前定义标签来描写叙述网页结构。如： <title>This is title</title> 。这个表明该网页的标题是 This is title。

什么是CSS？

CSS 指层叠样式表 (Cascading Style Sheets)，它描写叙述浏览器显示怎样显示html元素。

看以下代码，浏览器将会以 20px绿色字体显示 p标签中的文本节点

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

这些html元素、css样式是由W3C组织制定规范。

然后由不同浏览器实现，全部你会看到同一个网页页面，通过不同的浏览器查看。显示会有一些区别。

以下图片是说明浏览器怎样解析 html 和 css的:

html 就是一个文本文件，

1、浏览器通过http 请求 server，把html文档下载下来

2、把html解析成dom树。同一时候提供dom接口，方便其它编程语言操作dom树，如：javascript

3、下载并，解析css样式规则

4、把样式规则依附在html元素上（以css选择器作为依赖）

5、渲染dom树

6、显示

为什么说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。写一个文件浏览器，来实践一下，这些技术是怎么结合的？

以上纯属个人见解。