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

以上纯属我的看法。