陶路博客

陈年往事徒流过 幡然却在一梦中 点击跳转新地址

倘若程式过于“聪明”，那么世界会变成什么样呢？

成群结队的机器人饲养着人类？遇到天网派来的杀手？或是具现化到地球删除掉我们的城市河流？

由程式构成的世界云提城–其街道、天气、甚至天空的颜色都由程序控制。出厂的角色有音乐家、画家、设计师、赛车手、裁缝店老板、橄榄球运动员、官员议员还有程序管理者等，云提城是现代科技与艺术的完美结合，许多游客乘坐飞机和船只慕名来到此地。

一天，城市的管理员（罗伊斯 布莱克）发现了城市的另一端 观景城中有一把世界的钥匙–晶体管！他与好友数学天才（艾什肯德尔）发现通过晶体管可以轻松的创造或改变现有的世界 比如在观景城和金色长廊放置一座桥。好奇的他向晶体管内窥觑，仿佛看了另一个世界，他继续研究这个拥有魔力的东西。晶体管是一种单项通信的通道，所有人进来就不能回去。期间，他的另一位好友城市的管理者（格兰特肯德尔）得知此事，邀请他成立了一个组织–来不瑞德。

组织的愿景 是重新改造这个城市，但其他成员却被他们的leader欺骗了。格兰特只想要绝对的权利，他不断的杀死对城市产生影响的异端者，而其中的以外事件便是刺杀歌手红玲！我们的主人公红玲天生的嗓音对民众有着极强的感召力，在这座思想先进的城市中，不同的艺术家用不同的方式表达着不同的思潮，而无一例外的，这些创新行为给当权者带来了不稳定因素。受民众爱戴的歌手红玲在一次演出中 被格兰特用晶体管袭击 而男主人公挺身而出救了红玲。醒来的红玲失去了引以为豪的声音，而男主人公也被整合到晶体管内，迷茫的红玲跟随着晶体管内男主人公的声音踏上了，解开一切谜题，挑战来不瑞德的道路。

1.游戏中 晶体管收集了不同进入者的灵魂 根据不同灵魂生前的性格赋予了晶体管本身不同的函数 即不同的技能
2.不同的函数耗费的内存不同 最大耗费 4内存 最少为1 用户所有配置的函数内存消耗总和应小于等于用户的内存上限
3.函数 不同函数可以自由组合配置
作为主函数 （直接使用技能）
作为辅助函数 （增幅主函数技能）
作为全局函数（被动技能）
turn()函数 类似定时器 每隔一段时间 可以进行一次turn()函数操作进行行为规划 触发turn() 函数期间 用户可以移动 和 释放主动技能
4.限制器 增加游戏难度的设置 设置限制器会每次战斗会给与玩家额外经验值奖励
5.升级 可以获得 函数 全局函数槽 技能增幅槽 内存上限 限制器
6.剧情 游戏中除了根据男女主人公的对话获取信息和剧情 可以通过以下途径获取更多信息
OVC控制台
在游戏中检视 人物点 可以解锁函数（人物）的描述 根据不同任务描述推演剧情
击杀不同数量的机器人 解锁限制器的描述

变量提升–带有变量提升的变量会在js创建阶段 先赋值为undefined 在运行阶段 赋值为对应值

let声明的变量 没有变量提升特性 是在声明阶段进行赋值 var声明变量有变量提升

function a(){
  console.log(b);//undefine
  console.log(c);//会报错，错误信息：Uncaught ReferenceError: c is not defined
  var b = 1;
  let c = 2
}
a()

let声明变量作用域在对应代码块{}内 只能在对应代码块内调用 且不能被再次赋值

function a(){
  let b = 1;
  let b = 2;//会报错 错误信息：Uncaught SyntaxError: Identifier 'b' has already
}
a()

var声明在全局 则任何处都可以调用 声明在函数内 则在函数任意处都可以调用 声明在块内 也可以在父级域内调用（全局或某层函数）

function a(){
  for(var i=0;i<3;i++){
    console.log(i);//0,1,2
  }
  for(let j=0;j<3;j++){
    console.log(j);//0,1,2
  }
}
a()

function b(){
  for(var i=0;i<3;i++){
    setTimeout(function(){
      console.log(i);//3,3,3
    },0)
  }
  for(let j=0;j<3;j++){
    console.log(j);//0,1,2
    setTimeout(function(){
    },0)
  }
}
b()

weixinjsbridge.invoke()出现的版本更早 无需引用jssdk 无需wx.config方法注入 需要参数appId 使用回调 有详细的说明

而wx.choosewxpay出现的版本比较晚 需要jssdk注入 不需要参数appId 使用回调 只有SUCCESS 和 FAIL没有具体的说明

weixinjsbridge.invoke()是微信浏览器的内置方法 其实wx.choosewxpay在引用的微信jssdk文件中 也调用了weixinjsbridge.invoke() 是对weixinjsbridge.invoke() 的再次封装

综上所诉 这是微信前后设计的不同方法的支付 还是weixinjsbridge更方便一些 有具体的失败回调

1.PC宽度 自动100%

<meta name="viewport" content="width=device-width, initial-scale=1" />
width=device-width兼容winphone ie浏览器

2.文档类型/编码

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

3.对搜索引擎友好

<meta name="keywords" content="别搜我" />
<meta name="description" content="告诉你别搜我，对，就你" />
<meta name="revised" content="Frank, 2016/3/1" />
//定义网页版本
<meta name="robots" content="index,follow" />

4.重定向 相当于js跳转

<script>window.location.href="";</script>
<meta http-equiv="refresh" content="5;url=" http:="" zxlucky.com"="">

5.强制全屏/竖屏 移动端

<meta name="full-screen" content="yes" />
<meta name="browsermode" content="application" />

6.兼容ie浏览器的版本

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

7.360等国内浏览器 号称双核浏览器的渲染兼容模式

<meta name="renderer" content="webkit" />
//默认webkit内核
<meta name="renderer" content="ie-comp" />
//默认IE兼容模式
<meta name="renderer" content="ie-stand" />
//默认IE标准模式

8.其他

<meta name="author" content="" />
网站作者 <strong>iphone webapp常用meta标签小结</strong> 1.宽度
<meta name="”viewport”" content="”width=device-width;" initial-scale="1.0;" maximum-scale="1.0;" user-scalable="0;”" />
移动端safari浏览器宽度适配 尤其针对打开输入键盘后 iphone自动改变屏幕宽度有显著疗效

2.添加到主屏幕后，全屏显示。

<meta name="apple-touch-fullscreen" content="yes" />

3.去掉工具栏

<meta name="apple-mobile-web-app-capable" content="yes" />

这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

4.添加到主屏后的标题（iOS 6开始）

<meta name="apple-mobile-web-app-title" content="标题" />

5.设置状态栏的背景颜色

<meta name="apple-mobile-web-app-title" content="yes" />

6苹果手机浏览器safari会自动识别页面中的数字和邮件 并进行拨号和发邮件操作

<meta content=”telephone=no” name=”format-detection” />
<meta content=”email=no” name=”format-detection” />

今天一个项目用到地图，因为是基于微信公众号网页，因此选用腾讯地图。
优点：腾讯地图申请权限简单 只要有QQ号 填写基本的开发者认证资料即可 而且可以立刻获得秘钥 无需人工审核 经过验证，在实际项目中，即使不使用秘钥也可以开发项目，但腾讯官方的声明是不保证之后永久有效。
项目是网页开发模式,JDK选择 WEB开发 JavascriptAPI。前面获取点击位置，添加覆盖物等操作均没有问题，不过在进行为覆盖物添加点击事件的时候出现了问题。为一个覆盖物添加点击事件，OK没有问题，但在进行多个覆盖物的点击事件添加后。会出现每个覆盖物的事件都被覆盖（重写）成最后一个事件，也就是所有覆盖物出发的事件都是一个而且是最后一个添加的点击事件。

data是商铺数组信息
一开始，读了腾讯官方文档 写了如下代码，这是用单一插点 模拟的多个插点。


for(var i in data){
shop = data[i];
x = shop.shop_position.split(',')[0];
y = shop.shop_position.split(',')[1];
//--插点
marker = new qq.maps.Marker({
position: new qq.maps.LatLng(x,y),
animation: qq.maps.MarkerAnimation.BOUNCE,
map: map,
draggable: true,
icon: new qq.maps.MarkerImage("img/point.png"),
visible: true,
});
//--插点点击事件
qq.maps.event.addListener(marker[i], 'click', function() {
//--事件函数
});
//--跳转到最后一个搜索结果的位置
map.panTo(new qq.maps.LatLng(x,y));
}


结果是插点成功，但绑定的事件不成功，事件被最后一个覆盖。

之后看到有多个覆盖物的插点文档：http://lbs.qq.com/javascript_v2/case-run.html#sample-event-closure


for(var i in data){
shop = data[i];
x = shop.shop_position.split(',')[0];
y = shop.shop_position.split(',')[1];
//--标记插点
marker[i] = new qq.maps.Marker({
position: new qq.maps.LatLng(x,y),
animation: qq.maps.MarkerAnimation.BOUNCE,
map: map,
draggable: true,
icon: new qq.maps.MarkerImage("img/point.png"),
visible: true,
});

这次注意上面已经使用数组进行创建覆盖物和点击事件，插点点击事件1是弹出腾讯默认给出的提示框（蛮不错），插点点击事件2是项目需要的逻辑。又一次失败！但是再一次接近了真相！当时已经卡了一个多小时了，郁闷！

经过本大神冥思苦相，果然真相只有一个！说多了都是废话，还是上码吧，同志！

最后发现：腾讯地图中覆盖物点击事件触发时，调用的时JS在内存中储存的变量信息，我本以为既然官方文档中的marker既然是重复使用的，那么在创建覆盖物点击事件的时候，函数的内容已经固定（函数内部函数已经赋值），由此看到腾讯地图的开发者的习性！
而我的习惯是在元素创建时为其创建点击方法，在元素创建的时候，函数内容已经确定。比较起来，如果数据量大，创建元素众多的情况下，腾讯开发者的思路会减少浏览器储存的信息，占用的空间等于函数+变量（覆盖物信息数组）；而我的方法是创建一个函数数组（函数内含有数组信息）。

腾讯文档地址：http://lbs.qq.com/javascript_v2/demo.html