展开

关键词

编码篇 — 一个DataModel小例领略指针的魅力

做过的项目中曾经有这样的需求:货品录入(商品入库),弹框弹出所有的货品(很多),选择其中的一个,则下次弹框弹出所有货品时不再显示选择了的那件货品。当然,录入功能...

16430

HTML5五种客户端离线存储方案

dataModel.size(); console.log(dataModel.size() + datas are saved); return value;}function restore(dataModel ) { var value = dataModel.serialize(); document.cookie = DataModel= + escape(value); document.cookie (DataCount) + datas are restored); return value; } return ;}function clear() { if(getCookieValue(DataModel )){ console.log(getCookieValue(DataCount) + datas are cleared); document.cookie = DataModel=; expires request = indexedDB.open(DataModel);request.onupgradeneeded = function() { db = request.result; var store

39760
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML5的五种客户端离线存储方案

    整个示例主要就是将HT for Web的DataModel数据模型信息进行序列化和反序列化,这个过程很简单通过dataModel.serialize()将模型序列化成JSON字符串,通过dataModel.deserialize 的持久性存储外,还有针对本次回话的sessionStorage方式,一般情况下localStorage较为常用,更多可参考 http:www.w3.orgTRwebstoragefunction save(dataModel ){      var value = getCookieValue(DataModel);    if(value){        dataModel.deserialize(value);         )){        console.log(getCookieValue(DataCount) +  datas are cleared);        document.cookie = DataModel request = indexedDB.open(DataModel);request.onupgradeneeded = function() {      db = request.result;

    20250

    原 HTML5五种客户端离线存储方案

    整个示例主要就是将HT for Web的DataModel数据模型信息进行序列化和反序列化,这个过程很简单通过dataModel.serialize()将模型序列化成JSON字符串,通过dataModel.deserialize 的持久性存储外,还有针对本次回话的sessionStorage方式,一般情况下localStorage较为常用,更多可参考 http:www.w3.orgTRwebstoragefunction save(dataModel ){      var value = getCookieValue(DataModel);    if(value){        dataModel.deserialize(value);         )){        console.log(getCookieValue(DataCount) +  datas are cleared);        document.cookie = DataModel request = indexedDB.open(DataModel);request.onupgradeneeded = function() {      db = request.result;

    32640

    基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(二)

    在服务端我们该如何创建 HT 的 DataModel 和 ForceLayout 呢? 其实也很简单,我们可以看看下面的代码:var ht = global.ht = this.ht = require(......buildht-debug.js).ht, dataModel = new ht.DataModel(), reloadModel = require(..util.js).reloadModel;reloadModel(dataModel, { A: 3, B: 5 }); require(......buildht-forcelayout-debug.js);var forceLayout = new ht.layout.Force3dLayout(dataModel) (dataModel, root, iNode); for (var j = 0; j < info.B; j++) { var jNode = createNode(dataModel, ip + count

    29570

    通过 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(二)

    在服务端我们该如何创建 HT 的 DataModel 和 ForceLayout 呢? 其实也很简单,我们可以看看下面的代码:var ht = global.ht = this.ht = require(......buildht-debug.js).ht, dataModel = new ht.DataModel(), reloadModel = require(..util.js).reloadModel;reloadModel(dataModel, { A: 3, B: 5 }); require(......buildht-forcelayout-debug.js);var forceLayout = new ht.layout.Force3dLayout(dataModel) (dataModel, root, iNode); for (var j = 0; j < info.B; j++) { var jNode = createNode(dataModel, ip + count

    38670

    基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(二)

    在服务端我们该如何创建 HT 的 DataModel 和 ForceLayout 呢? 其实也很简单,我们可以看看下面的代码:var ht = global.ht = this.ht = require(......buildht-debug.js).ht, dataModel = new ht.DataModel(), reloadModel = require(..util.js).reloadModel;reloadModel(dataModel, { A: 3, B: 5 }); require(......buildht-forcelayout-debug.js);var forceLayout = new ht.layout.Force3dLayout(dataModel) (dataModel, root, iNode); for (var j = 0; j < info.B; j++) { var jNode = createNode(dataModel, ip + count

    32920

    基于 HTML5 Canvas 的 Web SCADA 组态电机控制面板

    DateModel 作为承载 Data 数据的模型,管理着Data数据的增删以及变化事件派发, HT 框架所有组件都是通过绑定 DataModel,以不同的形式呈现到用户界面;同时组件也会监听 DataModel var dataModel = new ht.DataModel();var graphView = new ht.graph.GraphView(dataModel);通过以下代码来进行一些基础操作上的设置 );  changeAlarmColor(dataModel, Alarm2, flag);  changeAlarmColor(dataModel, Alarm3, flag);  changeAlarmColor (dataModel, Alarm4, flag);  flag = ! (dataModel, pump3);}, 2500);function changePumpState(dataModel, tag) {  var tag = dataModel.getDataByTag

    52710

    Vue.js基础特性

    } var vm = new Vue({ el: #app, data: dataModel, 我们可以像绑定普通属性那样绑定计算属性:计算属性定义在computed内部,和data类似 computed } var vm = new Vue({ el: #app, data: dataModel, 使用methods: 每次使用都会执行一次函数,不存在像计算属性那样的缓存,会浪费性能 methods: 这个按钮呗点击了 {{clickNum}} 次 var dataModel = { message: hello world! dom事件,需要使用特殊变量$event将它传入方法 {{ message }} 不带参数 带参数 特殊参数 var dataModel = { message: hello world! {{ message }} ... ... var dataModel = { message: hello world!

    34110

    Android MVP升级路(二)时尚版

    时尚版MVP架构Model层结构如上图所示,时尚版MVP架构的Model层中,Presenter 请求数据不再直接调用具体的Model对象,统一以 DataModel 类作为数据请求层的入口,以常量类 DataModel会根据Token的不同拉取底层对应的具体Model。 代码实现根据上节结构图中的描述在考虑到实际情况,我们需要设计以下几个类:DataModel: 数据层顶级入口,项目中所有数据都由该类流入和流出,负责分发所有的请求数据。 DataModel由于DataModel负责数据请求的分发,所以最初打算作成一个简单工厂模式的样子,通过switch(token)语句判断要调用的Model。 但如果这样设计的话,在实际开发中我们每次添加一个数据请求接口,不光需要新建对应的Model和Token,还需要在DataModel类的switch(token)语句中新增加对应的判断,贼麻烦~思来想去,

    67670

    基于HTML5 Canvas 点击添加 2D 3D 机柜模型

    今天又返回好好地消化了一下我们的数据容器 DataModel,这里给新手做一个典型的数据模型事件处理的例子作为参考。 例子地址:http:hightopo.comguideguidecoredatamodelexamplesexample_datamodel.html这是我改造之后的模样,将 dataModel 数据容器共享 = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dataModel);g3d.setGridVisible(true);设置网格可见g3d.setEye ht.SelectionModel管理 DataModel 模型中 Data 对象的选择状态, 每个 DataModel 对象都内置一个 SelectionModel 选择模型,控制这个 SelectionModel 即可控制所有绑定该 DataModel 的组件的对象选择状态, 这意味着共享同一 DataModel 的组件默认就具有选中联动功能。

    45180

    原 基于HTML5 Canvas 点击添加

    今天又返回好好地消化了一下我们的数据容器 DataModel,这里给新手做一个典型的数据模型事件处理的例子作为参考。 这是我改造之后的模样,将 dataModel 数据容器共享,通过对数据容器的增删事件的监听得到的现在的结果,并且在显示上做了一点“手脚”。 = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dataModel);g3d.setGridVisible(true);设置网格可见g3d.setEye ht.SelectionModel管理 DataModel 模型中 Data 对象的选择状态, 每个 DataModel 对象都内置一个 SelectionModel 选择模型,控制这个 SelectionModel 即可控制所有绑定该 DataModel 的组件的对象选择状态, 这意味着共享同一 DataModel 的组件默认就具有选中联动功能。

    24840

    数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

    创建数据容器dataModel = new ht.DataModel(); 创建拓扑图、属性页、列表、树、表格、树表组件graphView = new ht.graph.GraphView(dataModel );propertyView = new ht.widget.PropertyView(dataModel);listView = new ht.widget.ListView(dataModel);treeView = new ht.widget.TreeView(dataModel);tablePane = new ht.widget.TablePane(dataModel);treeTablePane = new ,但用户的代码依然主要在 Data 和 DataModel 上的操作,这也是 HT 架构设计的优势,用户使用更多组件并没有增加新的学习成本,只要掌握的 DataModel 的基本操作,更多的组件也是如此 虽然图元属性设置、增加变化甚至是选中操作都可以通过 DataModel 搞定,但并不意味着 DataModel 是万能的,有些需求还是需要通过 View 视图进行。

    1.4K50

    数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

    创建数据容器dataModel = new ht.DataModel(); 创建拓扑图、属性页、列表、树、表格、树表组件graphView = new ht.graph.GraphView(dataModel );propertyView = new ht.widget.PropertyView(dataModel);listView = new ht.widget.ListView(dataModel);treeView = new ht.widget.TreeView(dataModel);tablePane = new ht.widget.TablePane(dataModel);treeTablePane = new ,但用户的代码依然主要在 Data 和 DataModel 上的操作,这也是 HT 架构设计的优势,用户使用更多组件并没有增加新的学习成本,只要掌握的 DataModel 的基本操作,更多的组件也是如此 虽然图元属性设置、增加变化甚至是选中操作都可以通过 DataModel 搞定,但并不意味着 DataModel 是万能的,有些需求还是需要通过 View 视图进行。

    1.5K50

    HTML5实现3D和2D可视化QuadTree四叉树碰撞检测

    QuadTree算法将大大减少需要测试碰撞的次数,从而提高游戏刷新性能,本文例子基于HT for Web的Canvas拓扑图和WebGL的3D引擎组件,通过GraphView和Graph3dView共享同一数据模型DataModel 我构建了HT(http:www.hightopo.com)的GraphView和Graph3dView两个组件,通过ht.widget.SplitView左右分割,由于两个视图都共享同一DataModel ,因此我们剩下的关注点仅是对DataModel的数据操作,构建了200个ht.Node对象,每个对象的attr属性上保存了随机的运动方向vx和vy,同时保存了将要反复插入quadtree的矩形对象,这样避免每帧更新时反复创建对象 g3d = new ht.graph3d.Graph3dView(dataModel);                                                      g2d  = new ht.graph.GraphView(dataModel);                       mainSplit = new ht.widget.SplitView(g3d,

    38560

    HT for Web可视化QuadTree四叉树碰撞检测

    采用QuadTree算法将大大减少需要测试碰撞的次数,从而提高游戏刷新性能,本文例子基于HT for Web的图形引擎,通过GraphView和Graph3dView共享同一数据模型DataModel, 我构建了HT的GraphView和Graph3dView两个组件,通过ht.widget.SplitView左右分割,由于两个视图都共享同一DataModel,因此我们剩下的关注点仅是对DataModel 所有代码如下供参考:function init(){   d = 200; speed = 8; dataModel = new ht.DataModel();                                 g3d = new ht.graph3d.Graph3dView(dataModel);                                                   g2d =  new ht.graph.GraphView(dataModel);                    mainSplit = new ht.widget.SplitView(g3d, g2d);

    42710

    HT for Web可视化QuadTree四叉树碰撞检测

    采用QuadTree算法将大大减少需要测试碰撞的次数,从而提高游戏刷新性能,本文例子基于HT for Web的图形引擎,通过GraphView和Graph3dView共享同一数据模型DataModel, 我构建了HT的GraphView和Graph3dView两个组件,通过ht.widget.SplitView左右分割,由于两个视图都共享同一DataModel,因此我们剩下的关注点仅是对DataModel 所有代码如下供参考:function init(){ d = 200; speed = 8; dataModel = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView (dataModel); g2d = new ht.graph.GraphView(dataModel); mainSplit = new ht.widget.SplitView(g3d, g2d);

    70790

    HTML5实现3D和2D可视化QuadTree四叉树碰撞检测

    QuadTree算法将大大减少需要测试碰撞的次数,从而提高游戏刷新性能,本文例子基于HT for Web的Canvas拓扑图和WebGL的3D引擎组件,通过GraphView和Graph3dView共享同一数据模型DataModel 我构建了HT(http:www.hightopo.com)的GraphView和Graph3dView两个组件,通过ht.widget.SplitView左右分割,由于两个视图都共享同一DataModel ,因此我们剩下的关注点仅是对DataModel的数据操作,构建了200个ht.Node对象,每个对象的attr属性上保存了随机的运动方向vx和vy,同时保存了将要反复插入quadtree的矩形对象,这样避免每帧更新时反复创建对象 所有代码如下供参考:function init(){ d = 200; speed = 8; dataModel = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView (dataModel); g2d = new ht.graph.GraphView(dataModel); mainSplit = new ht.widget.SplitView(g3d, g2d);

    48690

    3D拓扑自动布局之Web Workers篇

    function reload() { var info = { A: parseInt($(A).value), B: parseInt($(B).value) }; reloadModel(dataModel , info); worker.postMessage(info); } function init() { dataModel = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView (dataModel); toolbar = new ht.widget.Toolbar(items); borderPane = new ht.widget.BorderPane(); borderPane.setTopView importScripts(ht.js);importScripts(ht-forcelayout.js);importScripts(util.js); ht = self.ht;dataModel = new ht.DataModel();forceLayout = new ht.layout.Force3dLayout(dataModel); forceLayout.onRelaxed = function

    579100

    自绘制HT For Web ComboBox下拉框组件

    那么接下来就开始具体的方案介绍,废话不多说,上代码:function createGradientComboBox(dataModel){ var sm = dataModel.sm(), gradientComboBox 0, h); } }; gradientComboBox.onValueChanged = function(oldValue, newValue){ onComboBoxValueChanged(dataModel function(data){ data.setStyle(style, newValue); }, scope); }}代码很简单,做的事情也很简单,接下来我们就来分析下代码的具体实现:方法的入参:dataModel (数据容器),oldValue(comboBox老值), newValue(comboBox新值), style(要改变的样式名称), scope(方法调用者);从dataModel中获取相应的selectionModel sm;根据sm.size()来判断在GraphView中选取了多少个data,如果一个都没选中,则修改dataModel中的所有data的属性;如果有选中的data,则只修改所选中data的属性。

    35460

    扫码关注云+社区

    领取腾讯云代金券