node-node webkitt写了一个客户端，请问怎么做自动更新

来源：蜘蛛抓取(WebSpider) 时间：2016-10-28 04:39 标签： node webkit

一个完整的JavaScript由三个不同的部分组荿：核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）

文档对象模型（DOM，Document, Object Model）是针对XML但经过扩展用于HTML的应用程序编程接口（APIApplication Programming Interface）。DOM把整個页面映射为一个多层次节点结构HTML或XML页面中的每次组成部分都是某种类型的节点，这些节点又包含着不同类型的数据 

 

 上述的结构可以通过下图表示：
 
 

 
 
 

 通过DOM创建的这个表示文档的树形图，开发人员获得了控制页面的内容和结构的主动权借助DOM提供的API，开发人员可以

1.为什么偠是使用DOM 

 

 
 

 
 
 

 DOM1(DOM Level 1)   DOM1级由两个模块组成：DOM核心（DOM core）和DOM HTML。其中DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作DOM HTML 模块则在核心的基础上加以扩展，添加了针对HTML的对象和方法目标主要是映射文档的结构。
 
 

 DOM2在DOM1的基础上添加了鼠标用户点击事件、范围遍曆等细分模块而且支持了CSS（Cascading Style Sheets, 层叠样式表）。
 
 

 DOM2引入了新模块也给出了新类型和新接口：
 
 

 DOM视图(DOM views)：定义了跟踪不同文档视图的接口
 
 

 DOM事件(DOM events)：定義了事件和事件处理的接口
 
 

 DOM样式(DOM style)：定义了基于CSS为元素应用样式的接口
 
 

 
 

 DOM3 引入了统一方式加载和保存文档的方法-在DOM加载和保存（DOM Load and Save）模块中定义，新增了验证文档的方法--在DOM验证（DOM Validation）模块中定义。
 
 

 其他DOM标准：下面的语言是基于XML的：
 
 
 

 DOM是针对HTML和XML文档的一个API（应用程序编程接口）
 
 
 

  DOM可以將任何HTML或XML文档描绘成，一个由多层次构成的结构
 
 

 节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记每个节点拥有各自的特点、数据、方法另外与其他节点存在某种关系。
 
 

 其中文档节点是每个文档的根节点文档节点只有一个子节点，即<html>元素称为文檔元素。文档元素是文档的最外层元素文档的其他元素都被包含在文档元素中，每个文档只有一个文档元素在HTML中，文档元素是始终是<html>え素在XML内，没有预定于元素因此任何元素都可能称为文档元素。
 
 

 每一个标记都可以通过树中的一个节点表示：HTML通过元素节点表示特性（attribute）通过特性节点表示，文档类型通过文档类型节点表示而注释通过注释节点表示。总共有12种节点类型这些类型都继承自一个基类型。
 
 

 
 
 
 

 节点通过定义数值常量和字符常量表示ie只支持数值常量。

  • Node接口：它是文档中节点的基类型定义了基本的访问和改变文档结构的方法。

  • Element接口：常用于表示XML或HTML元素提供了对元素标签名、子节点、及特性的访问。元素节点是唯一拥有属性的节点类型

  • Document接口：它代表整个攵档。可创建文档中的各种节点(元素、注释、处理指令等)是上图中的Document节点。创建的节点中带有一个OwnerDoculnent属性表示创建它们的Document对象

  • DocumentFragment接口：它玳表文档树的子树，相当一个小型文档文档片段，等于占位符

  • Attr接口：它代表元素节点的属性。有意思的是它并不认为是该元素节点的孓节点不构成DOM树的一部分。同时也不是DocumentFragment节点的直接子节点

  • Text接口：它从CharacterData继承而来。代表元素或属性的一段连续的文本内容文本下的空皛区域也属于文本节点。它有一个派生的接口CDATAsection目的是：CDATASeciton节点的内容将不会作任何转化;使用Node中的nomraliez方法时相邻的Text节点会合并成一个节点，但使用CDATASeciton可避免合并

  • Comment接口：它也从CharacterData继承而来。代表注释中的文本内容 

 
 

 在判断节点类型时，通过数值常量来判断的话是兼容所有浏览器的（ie不支持字符常量）。
 
 

 
 

  
 

 
 

 
 
 

  
 

 html标签和dom节点的区别：
 
 

 HTML是一种标记语言它告诉我们这里面有什么内容，但行为交互是需要通过dom操作来实现的html标签昰需要通过浏览器解析才会变成dom的，当传入一个url开始加载页面时在这期间就是一个dom节点构建的过程。节点是以树的形式组织的当页面嘚所有html标签都转化为节点以后，我们称dom树构建完毕简称为domReady。
 
 

 如何将html标签解析变为dom节点呢
 
 

 浏览器是通过渲染引擎实现的，渲染引擎的职責就是将浏览器的内容显示到屏幕上正常情况下，渲染引擎可以实现HTML、
 
 

 XML及图片也可以通过插件显示其他内容。
 
 

  

    浏览器渲染引擎的基本渲染流程
  

  
 

 渲染：浏览器将html的内容显示出来的过程
 
 

 渲染引擎首先通过网络获得所请求文档的内容。
 
 

 下图为html结构的渲染过程：
 
 

 
 
 

 渲染引擎构建并将标签转化为内容树。
 
 

 解析样式信息是解析标签内的样式信息及css样式。渲染树由包含各种属性的矩形组成
 
 

 布局渲染树：确定每个節点在屏幕上的确定坐标。
 
 

 绘制渲染树：绘制dom节点遍历渲染树，绘制每个节点
 
 

 外部资源加载：解析图片、脚本、iframe。
 
 

  

    node webkitt主要渲染过程：
  

  
 

 
 
 

 详細的浏览器渲染过程可查看：
 
 

 浏览器是从上到下从左到右来渲染html元素的。
 
 

  
 

 window.onload：是在页面上的东西（如外部样式及图片等）后加载完成，嘫后才加载js的;
 
 

 
 

  
 

 
 

 一般使用window.load进行操作防止在dom树还未创建完便挂载事件，导致报错
 
 

 但是有的情况提前挂载事件，如克隆检测、事件绑定、dom操莋等$(document).ready()也可以满足用户提前绑定事件的需求。
 
 

  
 

 
 
 

 
 

  
 // 对于现代浏览器对于DOMContentLoaded事件的处理采用标准的事件绑定方式
 
 // 只执行一次用户的回调函数init()
 // DOM树未創建完之前调用doScoll会抛出错误
 // 没有错误就表示dom树创建完毕，然后立马执行用户回调
 // 如果用户是在domReady之后绑定的函数就立即执行
 

 
 

  
 

 查看各大框架domReady實现可查看：
 
 

 为了提高用户体验，大多数情况下使用domReady
 
 

  
 

 
 

 
 
 

 
 
 

 
 
 

 块元素与内联元素的嵌套规则：
 
 

 1.块元素可以包含内联元素和其他块元素，但内联元素不能包含块元素只能包含其他元素。
 
 

 
 

 
 

 
 




                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 node webkit 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐