文档章节

重新认识HTML,CSS,Javascript 之node-webkit 初探

ordinance
 ordinance
发布于 2015/11/27 14:21
字数 1217
阅读 90
收藏 1

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


什么是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 请求 服务器,把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,写一个 文件浏览器,来实践一下 ,这些技术是 怎么 结合 的?

以上 纯属个人 见解。


本文转载自:http://blog.csdn.net/zoutongyuan/article/details/38307063

共有 人打赏支持
上一篇: 人间好时节
下一篇: Spring常用注解
ordinance
粉丝 5
博文 27
码字总数 12093
作品 0
沈阳
程序员
私信 提问
How Webkit works笔记

主要是参考google的这个幻灯片 webkit的作用就是将html,css,javascript渲染成web page。 它的主要组件有: api接口 webkit,webkit2 和平台的具体实现做绑定 bindings。绑定的准确定义我还...

yhchinabest
2018/04/15
0
0
JavaFX WebView概述,很强大,内置了类似Electron的功能

来自 Murali Billa JavaFX技术人员的主要成员 在本博客中,我们将了解JavaFX如何呈现网页及其主要的组件 - 即WebView JavaFX是: 用于创建和交付桌面应用程序的软件平台,以及可以在各种设备...

GuoMengyue
2018/09/26
0
0
css3动画在android2.3老版本上的问题

页面代码如下: Document 做完scale动画后,紧接着做rotate动画,在安卓2.3及其以下版本的机子上,做rotate动画的过程中,$('#test')会恢复到做动画之前的大小,即恢复到第一帧(0%)的状态,...

huizhi167
2014/04/09
1K
1
无需图形界面环境下的浏览器项目一览表

本表几乎列出了所有无需图形界面环境下的浏览器开源项目,可用于自动化、测试或者其他用途。 软件名 介绍 支持语言 Awesomium 基于Chromium无图形界面浏览器引擎。 C++, .NET benv Benv是nod...

oschina
2016/07/27
13.5K
18
javascript统一世界?

[到微信关注我][1]今天facebook将react native框架的源码开源,瞬间火得一塌糊涂,目前github上的star已经快7000了。javascript作为这个框架的开发使用语言又一次出现在人们面前。这几年jav...

卢勇福
2015/03/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CSS 选择器参考手册

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...

Jack088
今天
1
0
数据库篇一

数据库篇 第1章 数据库介绍 1.1 数据库概述  什么是数据库(DB:DataBase) 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据...

stars永恒
今天
2
0
Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
昨天
3
0
day24:文档第五行增内容|每月1号压缩/etc/目录|过滤文本重复次数多的10个单词|人员分组|

1、在文本文档1.txt里第五行下面增加如下内容;两个方法; # This is a test file.# Test insert line into this file. 分析:给文档后增加内容,可以用sed 来搞定;也可以用while do done...

芬野de博客
昨天
4
0
深入理解JVM—JVM内存模型

深入理解JVM—JVM内存模型 我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区,用户磁盘和CPU的交互,而CPU运转速度越来越快,磁盘远远跟不上CPU的读写速度,才设计了内存...

onedotdot
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部