继上次用Qt实现了显示地图和MQTT通信之后(X-MagicBox-820的luatOS之路连载系列5),说是要研究下地图的开放接口,也看了标记点和线的方法(地图上自定义标记点和轨迹线的实现).这次就来调试剩下的部分:GPS数据在地图上的呈现. 下图就是测试的结果 这个轨迹的测试还是让家里小闺女帮助完成的 结合之前的基础,实现图上的轨迹标记主要两个技术点.一是Qt的WebEngineView模块实现C++层面与HTML层面的通信,二是JS数据的解析. (1)增加派生类WebClass,用来在JS…

上次说到定位成功后,显示的数据准确性问题.专门查询了下我所在地区的经纬度信息. MagicBox的显示数据是这样的: 网络上查到的经纬度数据是这样的: 可以看出定位精度还可以,毕竟我这个查询的数据没有具体到所在的小区.其他的卫星数据暂时不计较.接下来是要将经纬度信息通过MQTT发布到服务器,供其他客户端来订阅. 首先要提一点就是MQTT协议虽然是所谓的发布/订阅模式的轻量级通信协议,但依然是建立在TCP/IP之上的.使用它的意义在于低开销,低带宽占用.对于老王这个经纬度数据来说再合适不过了.网络…

这块MagicBox小巧但外设丰富,盖板上的小液晶屏竟有240*240的分辨率.点亮后若是用最小字体,真有看瞎老王的不瞎之眼之势. 这种屏在某宝也是比较多的,大概就是长这样子: 我们这个820的盖板上的液晶用的就是常见的ST7789控制器,而且驱动程序也已经在资料中了,那么亮屏就是小菜一碟了.模块本身就内置了专用于LCD的SPI外设,只需要配置额外的复位引脚和命令控制选择引脚. 完整的初始化程序如下代码: function init() local para = { width = 240, -…

第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.name; } }; console.log( User.showName() ); //有了es6之后,这么写 let User = { name : 'ghostwu', showName (){ return this.name; } }; console.log( User.showName()…

发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房源信息,根据手头上掌握的客户联系信息(买房的人的手机号),通知买房的人,他充当了发布者的角色 卖主想卖掉自己的房子,就需要告诉中介,把信息交给中介发布 二,网站订阅信息的用户 订阅者角色:需要订阅某类信息的网民,如某个网站的javascript类型文章 发布者角色:邮箱服务器,根据网站收集到的用户订…

什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的值.另一个是done,他是一个布尔值,用来表示该迭代器是否还有数据可以返回. 3,迭代器还会保存一个内部指针指向当前集合中的值 设计模式中有个迭代模式,跟迭代器是差不多的,我之前有写过2篇文章关于迭代模式: [js高手之路] 设计模式系列课程 - 迭代器(1) [js高手之路] 设计模式系列课程 -…

这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝,可以为对象方便的扩展属性和方法, jquery的插件扩展机制,大致就是这个原理. var G = function ( selector, context ) { return new G.fn.init( selector, context ); }; G.fn = G.prototype = { constructor : G, init: function ( s…

接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般都有Symbol.iterator属性,你可以在控制台中用console.dir打印数组,Map,Set,在他们的原型对象(prototype)上面就能找到.这个属性与迭代器密切相关,通过该函数可以返回一个迭代器,下文,我会举一个例子.一般来说所有的集合对象(数组,Set,Map 以及字符串)都是可…

本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用的是v-on绑定 window.onload = function(){ var c = new Vue({ el : 'body', methods : { say : function(){ alert( '你好' ); } } }); } <input type="button"…

所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理,由主板,电源,内存条,显卡, 机箱,显示器,外设等组成的 把一个成型的产品组成部件,分成一个个独立的部件,这种方式可以做出很多灵活的产品,这就是组合模式的优势 比如:家用台式机电脑,要求配置比较低, 这个时候只需要主板+电源+内存条+机箱+显示器+外设就可以了,不需要配置独立显卡 鸡腿堡+鸡翅+紫薯…

关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下promise的常见用法. 为什么会有promise,他的作用是什么? promise主要是为了解决js中多个异步回调难以维护和控制的问题. 什么是promise? 从图中,我们可以看出,Promise是一个函数,这个函数上有在项目中常用的静态方法:all, race, reject,resolve等,原…

箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过new关键字调用 没有原型, 因为不能通过new调用,所以没有原型 没有this, super,arguments和new.target绑定, new.target和super关键字是es6新增的 箭头函数中的this,取决于他的上层非箭头函数的this指向 没有arguments对象,但是可以获取到外层函…

function show( flag ){ console.log( a ); if( flag ){ var a = 'ghostwu'; return a; } else { console.log( a ); return null; } } 我们从es5的变量提升开始说起, 由于变量提升的原因, 上述程序, 在第2行和第7行都能访问到a的值, 只不过是undefined, 如果你不熟悉javascript这种变量的预解释机制,可能会认为第2行和第7行会报错, 只有flag为true的时…

在ES6之前,我们一般用短路表达式处理默认参数 function show( a, b ){ var a = a || 10; var b = b || 20; console.log( a, b ); } show( 100, 200 ); //100, 200 show(); //10, 20 show( 0, 0 ); // 10, 20, 0会被当做false 短路表达式(就是上例中的 || )的运算规则是: var res = a || 20;   如果a是true 就返回a, 如果a…

三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式:  在形参面前加三个点( ... ) 用在数组前面,可以把数组的值全部打散,展开,叫展开运算符. 语法格式:  在数组面前加三个点( ... ) 求不定参数的和,以前可以用arguments来做,现在可以用不定参数来做,如下: function add( ...values ){ console.log( values ); // [10, 20, 30] let…

解构通俗点说,就是通过一种特定格式,快捷的读取对象/数组中的数据的方法, es6之前,我们通过对象名称[键] 读取数据 var User = { 'name' : 'ghostwu', 'age' : 22 }; console.log( User.name, User.age ); //ghostwu, 22 var User = { 'name' : 'ghostwu', 'age' : 22 }; let { name, age } = User; console.log( name, a…

通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet&quo…

组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id="box"> <ccc></ccc> </div> <ccc></ccc> <script> //构造组件 var c = Vue.extend({ template : '<h3>这是个标题<…

一.我们从一个简单的构造函数+原型程序开始 var G = function(){}; G.prototype = { length : 5, size : function(){ return this.length; } } 上例是个非常简单的程序,如果需要调用,我们可以用new的方式 var oG = new G(); console.log( oG.size() ); //5 1.常见的错误调用方式1 console.log( G.size() ); //报错 G.size这种调用,是把…

什么是单例呢? 单,就是一个的意思.例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如:弹出一个模态框,一般来说在网站中弹出的模态框,不停的一直点击,一般只能创建一个.还有后台的数据库连接,一般都是保证一个连接等等.今天的主题就是单例在模态框中的应用,我们先要搞清楚,怎么弄个单例出来. 我们先看下普通的构造函数加原型方式.下面这种是常见的方式 function Singleton (…

在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 <ul> <li>跟着ghostwu学习javascript设计模式的应用1</li> <li>跟着ghostwu学习javascript设计模式的应用2</li> <li>跟着ghostwu学习javascript设计模式的应用3</li> <l…

模块化的诞生标志着javascript开发进入工业时代,近几年随着es6, require js( sea js ), node js崛起,特别是es6和node js自带模块加载功能,给大型程序开发带来了极大的便利.这几个东西没有出来之前,最原始的开发全部是利用全局函数进行封装,如: function checkEmail(){} function checkName(){} function checkPwd(){} 这种开发方式,非常容易造成一个问题,全局变量污染(覆盖) 如:有个页面需要…

我们还是从一些现有的需求和问题出发,为什么会有set,他的存在是为了解决什么问题? 我们看一个这样的例子,为一个对象添加键值对 var obj = Object.create( null ); obj[5] = 'ghostwu'; console.log( obj["5"] ); //ghostwu console.log( obj[5] ); //ghostwu 以null为原型对象,创建一个对象,给对象添加一个数字键5, 在输出的时候,数字键5会自动转换成字符键"5&q…

迭代器是指通过一种形式依次遍历数组,对象,或者类数组结构中的每个元素. 常见的有jquery中的each方法, ES5自带的forEach方法. 下面我们就来自定义一个类似jquery或者ES5的迭代器方法 1 function each( arr, fn ) { 2 for( var i = 0, len = arr.length; i < len; i++ ){ 3 fn.call( arr, arr[i], i ); 4 } 5 } 6 each( [ 'zhangsan', 'lisi'…

如果你对jquery比较熟悉的话,应该用过 eq, first, last, get, prev, next, siblings等过滤器和方法.本文,我们就用迭代设计模式来封装实现,类似的功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi…

ECMAScript 6中的Map类型是一种存储着许多键值对的有序列表.键值对支持所有的数据类型. 键 0 和 ‘0’会被当做两个不同的键,不会发生强制类型转换. 如何使用Map? let map = new Map(); 常用方法: set( 键,值 ):  添加新的键值对元素 get( 键 ): 获取键对应的值,如果这个值不存在,返回undefined let map = new Map(); map.set( '0', 'ghostwu' ); map.set( 0, 'ghostwu'…

es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 function Person( uName ){ if ( this instanceof Person ) { this.userName = uName; }else { return new Person( uName ); } } Person.prototype.showUserNam…

其实es6的面向对象很多原理和机制还是ES5的,只不过把语法改成类似php和java老牌后端语言中的面向对象语法. 一.用es6封装一个基本的类 class Person{ constructor( uName ){ this.userName = uName; } sayName(){ return this.userName; } } 是不是很向php和java中的类, 其实本质还是原型链,我们往下看就知道了 首先说下语法规则: class Person中的Person就是类名,可以自定义…

一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { background: #000; /*background: green;*/ } </style> window.onload = function(){ var c = new Vue({ el : '#box', data : { red_color : 'red', bg_color : 'b…

一.设置属性的值: {{data中的数据}} window.onload = function () { var c = new Vue({ el : '#box', data : { url : 'https://img6.bdstatic.com/img/image/smallpic/weijupaishefensetu.jpg' } }); } <div id="box"> <img src="{{url}}" alt=""…