最近发现一款优惠券神器 —— 蜜源APP,专门搜集淘宝天猫优惠券

蜜源APP这款神器搜集了很多淘宝天猫的优惠券,按照下面的步骤,有很大概率领取到大额优惠券(可能是渠道限制,在淘宝上不一定能找到):

  1. 在淘宝天猫商品详情页长按复制“商品标题”或“ 商品链接 ”;
  2. 打开蜜源APP,自动弹出搜索界面,提示搜索同款商品;
  3. 有优惠券的商品会优先展示;
  4. 软件除了搜集优惠券,在订单完成后还有返现(有点像返利网);
  5. 返现是自动的,我目前最大一笔订单返现50块,相当于打9折。

这款软件注册时需要输入邀请码,我是别人推荐注册的。通过邀请码注册,可以免费升级永久vip,神奇-_-||。不通过邀请码,就不能注册

蜜源邀请码 FBEMYW,注册时填写该邀请码,邀请人和被邀请人都有额外奖励,不过非常少,主要还是通过这款APP领取淘宝和天猫优惠券。

一般只要不是特别小众的商品,基本上都会搜索到淘宝上的同一家店。当然不是每款商品都有优惠券。

(商品无关,纯举例)假设在淘宝上看到某款商品:

  • 1. 在淘宝上浏览商品,有购买意向,才去搜一下;
  • 2. 复制商品标题或链接,打开蜜源,自动弹出搜索界面;
  • 3. 点击搜索刚才的商品,在搜索结果列表中,第一个是刚刚在淘宝店里看到的便携式折叠车,其它是相似商品;预估收益是购买后能够拿到的最高返现,只有真的需要时才去购买,其他时候看看就好
  • 4. 点击第一个结果,查看和领取蜜源搜集的优惠券;点击立即领券,会跳转到淘宝领取优惠券,购买也是在淘宝内完成的。

使用下来,这款APP不提供商品,但搜集了很多商品的优惠券。

  • 5. 如果有通过蜜源APP在淘宝上购买商品,那么能在我的收益里看到记录。
  • 6. 提现是直接转账到支付宝,最新一次提现记录,(*^▽^*)。优惠券在下单时就能使用,返现结算周期有点长,统一在月底结算和提取上个月收益,结算后就能提现。

最后再来一下,蜜源官方APP下载二维码和蜜源客服微信,最新找到的图片。会跳转到应用宝进行下载。

蜜源 APP 下载二维码 ,跳转到应用宝进行下载。

蜜源 APP 注册有效邀请码 FBEMYW

除了领取优惠券,这款 APP 里还有大家发的购买攻略,尤其在电商平台做活动期间能够有效避免被坑。

也可以在蜜源里把商品分享给别人购买,这个还没试过。

JavaScript 浮点数计算问题

JavaScript 浮点数神坑当属 0.1 + 0.2 == 0.3false

> 0.1 + 0.2 == 0.3
false
> 0.1 + 0.2
0.30000000000000004
>

还有一些比较隐蔽的问题,比如 Math.roundNumber.prototype.toFixed 也都不是能完全正常工作的。

> Math.round(1.105 * 100)
111
> Math.round(1.015 * 100)
101
> Math.round(1.025 * 100)
102
> 0.25.toFixed(1)
'0.3'
> 0.35.toFixed(1)
'0.3'

Math.round、toFixed 计算出错主要因为浮点数不能精确表示。

在这里 0.35 和 1.015 的值都不准确,一个办法是转换成整数计算再除以对应的十百千;另一个办法是采用现有的 lib,比如 accounting

> 1.015 * 100
101.49999999999999

代码运行环境

D:\node -v
v8.1.0

JavaScript const、let、var 对比

ECMAScript 6 新增 const 和 let 命令,用来声明变量。

声明方式 变量提升 作用域 初始值 重复定义
const 块级 需要 不允许
let 块级 不需要 不允许
var 函数级 不需要 允许

变量提升:const 和 let 必须先声明再使用,不支持变量提升

console.log(c1, l1, v1);
// 报错
// Uncaught ReferenceError: c1 is not defined

const c1 = 'c1';
let l1 = 'l1';
var v1 = 'v1';

作用域:const,let 支持块级作用域,有效避免变量覆盖

const c21 = 'c21';
let l21 = 'l21';
var v21 = 'v21';

if (0.1 + 0.2 != 0.3) {
    const c21 = 'c22';
    let l21 = 'l22';
    var v21 = 'v22';

    console.log(c21, l21, v21);
    // 输出 c22 l22 v22
}

console.log(c21, l21, v21);
// 输出 c21 l21 v22

块级作用域,在外层不能直接访问内层变量

if (0.1 + 0.2 != 0.3) {
    const c22 = 'c22';
    let l22 = 'l22';
    var v22 = 'v22';

    console.log(c22, l22, v22);
    // 输出 c22 l22 v22
}

console.log(c22, l22, v22);
// 报错
// Uncaught ReferenceError: c22 is not defined
// 同样地, l22 is not defined

const 定义常量,该常量不能赋值,但该常量的属性可以赋值

const c231 = {};
const c232 = [];

c231.name = 'seven';
c232.push(27);

console.log(c231, c232);
// 输出 {name: "seven"} [27]

// 禁止给对象赋值,应该使用 Object.freeze

const c233 = Object.freeze({});
const c234 = Object.freeze([]);

c233.name = 'seven';
// 普通模式下不报错
// 严格模式下报错
// Uncaught TypeError: Cannot add property name, object is not extensible
    
c234.push(27);
// 普通模式下就会报错
// Uncaught TypeError: Cannot add property 0, object is not extensible

console.log(c233, c234);
// 输出 {} []

全局变量不再设置为顶层对象(window)的属性,有效避免全局变量污染

const c24 = 'c24';
let l24 = 'l24';

console.log(c24, l24);
// 输出 c24 l24

console.log(window.c24, window.l24);
// 输出 undefined undefined

符合预期的 for 循环

for (var i = 0; i != 3; i++) {
    setTimeout(function() {
        console.log(i);
    },10);
}
// 依次打印
3
3
3

for (let i = 0; i != 3; i++) {
    setTimeout(function() {
        console.log(i);
    },10);
}
// 依次打印,为啥呢
0
1
2

可以看到在 for 循环中使用 let 方式声明变量才是符合预期。
在 for 中每一次循环,let 都是重新声明变量,并且因为 JavaScript 引擎会记住上一次循环的值,初始化 i 时在上一轮的基础上计算。

可以看到在 for 循环中至少有两层作用域,看下面的例子更容易理解。

for (let i = 0; i != 3; i++) {
    let i = 'seven';
    console.log(i);
}
console.log('eight');
// 依次打印
seven
seven
seven
eight

初始值:const 声明的变量必须设置初始值,且不能重复赋值。

const c3 = 'c3';
let l3 = 'l3';
var v3 = 'v3';

console.log(c3, l3, v3);
// 输出 c3 l3 v3

c3 = 2; // Uncaught TypeError: Assignment to constant variable
l3 = 2;
v3 = 2;

console.log(c3, l3, v3);
// 输出 c3 2 2

const c32;
// 报错
// Uncaught SyntaxError: Missing initializer in const declaration

重复定义:const 和 let 不支持重复定义

const、let 缩小了变量作用域,完美避免变量污染;const 固定变量(即固定变量类型),对于弱类型 JavaScript 来说,可以明显提升性能。推荐在应用中使用 const、let 声明变量。

使用 JavaScript 对中文进行排序

在网页上展示列表时经常需要对列表进行排序:按照修改/访问时间排序、按照地区、按照名称排序。

对于中文列表按照名称排序就是按照拼音排序,不能简单通过字符串比较—— ‘a’ > ‘b’——这种方式来实现。

比如比较 ‘北京’ vs ‘上海’,实际是比较 ‘běijīng’ vs ‘shànghǎi’;比较 ‘北京’ vs ‘背景’,实际是比较 ‘běijīng’ vs ‘bèijǐng’。
一般需要获取到字符串的拼音,再比较各自的拼音。

JavaScript 提供本地化文字排序,比如对中文按照拼音排序,不需要程序显示比较字符串拼音。

String.prototype.localeCompare 在不考虑多音字的前提下,基本可以完美实现按照拼音排序。

在没有出现意外的情况下,各个支持 localeCompare 的浏览器都很正常。最近将 Chrome 更新到 58.0.3029.110,突然发现中文排序不正常。

// 正常应该返回 1, 拼音 jia 在前, kai 在后
'开'.localeCompare('驾');
// 得到
-1;

// Chrome 58.0.3029.110 下返回 -1, 其他浏览器正常

// 确认之后是 localeCompare 需要明确指定 locales 参数
'开'.localeCompare('驾', 'zh');
// 得到
1

在 Chrome 下传递 locales 参数才能获得正常预期结果

Edge 浏览器支持 localeCompare

Firefox 浏览器支持 localeCompare

IE 11 浏览器支持 localeCompare

其他浏览器对 localeCompare 支持也很友好,目前也不需要明确传递 locales,浏览器支持参考 developer.mozilla.org

使用CSS变量提高代码复用率

CSS 支持通过 ––variable-name: variable-value 声明变量,并通过 var(––variable-name) 使用变量。

CSS 使用变量示例

.parent {
    --color-red: red;
}

.child {
    color: var(--color-red);
}

Less 和 Sass 已分别使用 $ 和 @ 声明变量,CSS 则采用双划线声明变量。

Less / Sass 变量示例

/* Less 变量示例 */

@blue: #f938ab;

.blue {
    color: @blue;
}

/* Sass 变量示例 */

$blue: #1875e7;

.blue {
    color: $blue;
}

不同于 Less/Sass 在最外层声明, CSS Variable 需要在具体 selector 下声明变量,因此可以在子元素下覆盖父元素定义的变量

一般将 CSS Variable 定义在伪类 :root 下,让所有子元素都可以继承。

定义在伪类 :root 下

:root {
  --base-color: #333;
  --base-size: 14px;
}

.btn {
    color: var(--base-color);
    font-size: var(--base-size);
}

变量继承与重写

div {
    padding: 2px;
}

.one {
    --border: 1px solid red;
    border: var(--border);
}

.two {
    border: var(--border);
    --border: 2px solid green;
}

.three {
    border: var(--border);
}
<div class="one">
    1
    <div class="two">
        2-1
        <div class="three">3</div>
    </div>
    <div class="two">2-2</div>
</div>

解析到 .two selector 会优先解析 .two 拥有的变量,再应用。因此 .two 应用的 --border2px solid green
.three 也会应用 .two 定义的变量。

动态修改 CSS Variable

网页渲染完成之后,再修改变量值,会重新应用 CSS。

因为 val(variable-name) 返回的是 variable-value,所以当 variable-value 不包含单位是,某些样式需要明确指定单位。

:root {
    --line-height: 20;
}

p {
    line-height: var(--line-height)px;
}

这点不像 jQuery 自动检测浏览器设置的默认单位。需要显示设置单位