EXT初探

发表于 2015-12-17 |

今天上手Ext.js，简单做一下小结，后续再补充。

认识

Ext.js是一个用javascript写的，主要用于创建RIA（富互联网）应用前端用户界面应用的前端ajax框架。

特点

擅长各种图表，适合企业内部使用的信息管理类系统，不适合电商、门户网站。因为大部分HTML代码是由JS生成的，所以对搜索引擎不是十分友好，不适合需要SEO的网站。
EXT是纯JS框架，用来展示后端数据，适合后端程序员兼修，而纯前端人员学习难度稍大。
文档详细到令人发指~不过是英文~

EXT内置对象

Ext.MessageBox（简写Ext.Msg）
Ext.window.Window（简写为Ext.Window）
等等

亮点

看到一种Button的配置值的写法buttons: Ext.Msg.YES | Ext.Msg.NO | Ext.Msg.CANCEL，还真的能渲染出“yes”“no”“cancel”三个按钮来，很奇怪——三个按钮同时显示的Button常量值不应该是YESNOCANCEL吗？用位运算或“|”是什么鬼？

Ext.onReady(function(){
    Ext.Msg.show({
        title: '地址',
        msg: '轻请输入地址：',
        width: 500,
        buttons: Ext.Msg.YES | Ext.Msg.NO |  Ext.Msg.CANCEL,
        //buttons: Ext.Msg.YESNOCANCEL,
        fn: function(){
            console.log(arguments);
        },
        animateTarget: 'addAddressBtn',
        icon: Ext.window.MessageBox.INFO,
    });
});

点源码进去看（笔者IDE是Webstrom，Ctrl+鼠标左键），发现EXT里的button常量的值并不连续：

OK : 1,

YES : 2,

NO : 4,

CANCEL : 8,

OKCANCEL : 9,

YESNO : 6,

YESNOCANCEL : 14,

一寻思，原来这个Button的取值是真的在做按位或运算：

9=1|8 即 OKCANCEL = OK | CANCEL
14=2|4|8 即 YESNOCANCEL = YES | NO | CANCEL

无论在字面语义上还是在值的运算上都可以用或来解释，这个设计真的很赞~

如何正确地辩论

发表于 2015-12-15 |

转自新浪囧知的一篇文章，我觉得所有人都有必要读。其实我记得上中学那会我们都挺严谨的，语文老师还举办过班级辩论赛，逻辑都挺清晰。为啥现在感觉越活越回去了呢，难道是被熏陶的？！

舍入误差

发表于 2015-11-15 |

1 引例

先举个栗子：

var a=2;
var b=1.7;
console.log(a-b);

打印结果是0.30000000000000004。

2 概念

上述现象叫做计算机中的舍入误差。原本关于舍入误差，我只记得一句话：计算机底层运算时二进制的，无法精确表示0.1这个十进制数，所以会造成舍入误差。今天逛知乎看到关于这个问题的精彩答案，觉得有必要摘过来存下~感谢作者Adam Wen。

3 原理

不管是什么数, 在计算机中最终都会被转化为 0 和 1 进行存储, 所以需要弄明白以下几点问题：

一个小数如何转化为二进制
浮点数的二进制如何存储

浮点数的二进制表示

首先我们要了解浮点数二进制表示, 有以下两个原则:

整数部分对 2 取余然后逆序排列
小数部分乘 2 取整数部分, 然后顺序排列

0.1 的表示是什么?

我们继续按照浮点数的二进制表示来计算

0.1 * 2 = 0.2 整数部分取 0
0.2 * 2 = 0.4 整数部分取 0
0.4 * 2 = 0.8 整数部分取 0
0.8 * 2 = 1.6 整数部分取 1
0.6 * 2 = 1.2 整数部分取 1
0.2 * 2 = 0.4 整数部分取 0
…

所以你会发现, 0.1 的二进制表示是 0.00011001100110011001100110011……0011
0011作为二进制小数的循环节不断的进行循环.

这就引出了一个问题, 你永远不能存下 0.1 的二进制, 即使你把全世界的硬盘都放在一起, 也存不下 0.1 的二进制小数.

浮点数的二进制存储

Python 和 C 一样, 采用 IEEE 754 规范来存储浮点数. IEEE 754 对双精度浮点数的存储规范将 64 bit 分为 3 部分.

第 1 bit 位用来存储符号, 决定这个数是正数还是负数
然后使用 11 bit 来存储指数部分
剩下的 52 bit 用来存储尾数
Double-precision_floating-point_format

而且可以指出的是, double 能存储的数的个数是有限的, double 能代表的数必然不超过 2^64 个, 那么现实世界上有多少个小数呢? 无限个. 计算机能做的只能是一个接近这个小数的值, 是这个值在一定精度下与逻辑认为的值相等. 换句话说, 每个小数的存储(但是不是所有的), 都会伴有精度的丢失.

浮点数计算的问题

0.1 + 0.2 == 0.3

0.1 在计算机存储中真正的数字是0.1000000000000000055511151231257827021181583404541015625,0.2 是0.200000000000000011102230246251565404236316680908203125,0.3 是0.299999999999999988897769753748434595763683319091796875

这就是为什么 0.1 + 0.2 != 0.3 的原因

点这里查看原文By Adam Wen From ZhiHu.

百度地图API之JS版

发表于 2015-11-11 |

得益于丰富的的API和完善的中文开发文档，百度地图在国内地图类第三方地图支持市场的占有率一直比较高。百度地图的API在百度开发者中心可以找到，今天简单地介绍一下百度地图的API。

用百度账号登录百度开发者中心，进入百度地图开放平台页面，页面中可以找到申请密钥的按钮，点击申请。

进入应用页面，创建应用，应用名称自拟；
应用类型根据需要选择，这里选择服务端；
启用服务最好全选，省去后续做其他领域的开发时再次设置；
请求校验方式选择IP白名单校验，按下方提示输入即可。
如果已经有应用，最好点“设置”按钮检查一下是否全部勾选。
点击提交，创建应用，应用出现在应用列表。
copy你的AccessKey（简称AK），待会要用。至此，准备工作就绪。

回到百度地图开放平台首页http://developer.baidu.com/map/，点击WEB开发，选择JavaScript API大众版做示例。

进入API页面，就可以看到清晰、详细的说明。话不多说，上DEMO：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>

注：

BMap是百度地图类库的根对象
centerAndZoom()是地图的初始化方法。

在上述案例中，有两点要注意的：

在<head>部分的<script>中引入百度API在线的js库，参数中“您的密钥”用你之前copy下来的密钥字符串替换；
内部style是必要的，因为我们必须指定一个具体大小的容器，否则默认的div是没有大小的，导致运行结果是空白。

因为百度给出的文档已经非常详细，具体的API介绍请移步官方文档类参考，本文仅作为入门指引。

如有不足，敬请指正！

Bootstrap框架的原理一句话总结

发表于 2015-11-05 |

Bootstrap框架的原理简要概述

样式原理：

CSS重置

行为原理：

自定义属性，通过元素选择器找到它，然后为其绑定事件。