1

12

2

2

• 智能家居的目的

  以更低成本提供更便捷、丰富、友好体验的生活服务。

  • 便捷：家居使用更方便（比如扫地机）
  • 丰富：更多样的生活化服务（智能电视的视频TV，可节约成本和提供更丰富的视听内容）
  • 友好体验：用拖把拖地的体验其实不太好，体验需要提升

• 互联网时代的智能成功案例

  • 智能手机

  思前想后也只有手机在互联网时代的智能化是成功的。那么怎么定义“智能“呢？当然不能真的指望它能思考。所定义的智能至少包含以下几项特点：1. 有一个能支持多任务的系统，2.可动态扩展功能。3.能与互联网链接

• 为什么其他方面（除手机智能化）的智能化节奏那么慢？

  互联网时代（信息时代）的智能化均以人能更快捷的掌握信息为主。手机方便了人与人之间的信息通信（打电话，发短信），智能手机提高人与社会、人与周边事物的信息交换（链接互联网，可扩展的App功能）。

  智能家居是不会移动的，我们也不需要时时知道家里的情况（大多是场景是不需要时时获取到家里的信息的），这有别于信息时代以信息交换驱动发展的理论。智能电视是在家的一个信息媒介，最先被提起智能化（智能路由器也是同理了）。

• 家居真的需要智能吗？

  我们可以试想几个场景。

  1. 回家之前房间空调或者暖气已经提前开启。（友好体验）
  2. 扫地机器人帮你打扫房间（友好体验，便捷--虽然现在范围有限）
  3. 洗衣机也可以看做是半智能化（可以帮你洗衣服）
  4. 电热水器可以记住你的使用习惯，定时开启烧水（省电-低成本）

  姑且放开智能不谈，我想未来任何被我们所使用的家居都应该越来越低能耗（低成本）、便捷、体验友好。

• 如果大部分家居都智能了，家居遥控器怎么做？

  1. 抛弃遥控器概念，所谓智能家居不应该让使用者频繁做配置，不以单一逻辑条件判断是否。比如“电热水器是否开启“，首先得判断用户的平日的使用时间，再判断今天是否在家，这是一个多维度的判断）
  2. 如果以手机作为大多数家居的控制器，有2个问题
     1. 每个终端设备将对应一个App.这是不可接受的
     2. 手机不能成为遥控器（遥控器和控制器是有区别的，遥控器是指在短时间内频繁操作，需要具备快速打开，操作简单。控制器则更多是配置任务，需要集中精神配置较为复杂的逻辑）

区块等比

“区块等比”是什么？

案例1聚宝盆，案例2wap，demodemo

页面元素（区块）根据设备宽度展现不同大小，但是元素宽高比一致，推广到页面所有元素，最终将固定宽度的PSD转换为不同宽度的HTML页面。

为什么无线端会需要区块等比？

在PC的页面制作中，通常页面被固定宽度，拿到PSD以后只需要1:1还原即可。

无线端终端宽度各不相同（320，640，720，1080），并且页面均要求是全屏铺满，设计师以640作为宽度基准来制作页面，开发人员还原的时候就需要对页面针对不同设备宽度等比放大或缩小进行还原，所以无线端需要区块等比的还原方式。

如何实现

HTML

div class="box">
    <div class="in"></div>
</div>

CSS

        .box{   
            width:30%;
        }


        .box .in{
            padding-bottom:70%;
        }

子元素通过padding-bottom百分比继承父元素的宽度撑高区块，父元素通过显示的width设置继承body宽度。最终达到区块依据页面宽度等比

参考资料

• http://www.w3.org/TR/CSS2/box.html#propdef-padding-right

标准里如何说？

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
百分比计算是参考生成盒子包含快的元素宽度，即便对于它的padding-top和padding-bottom计算也是如此。如果包含快的元素宽度是根据这个因素的话，那么输出的结果在CSS3.1系统里面是未定义的。

vivo默认浏览器中使用md5算法导致setTimeout立即执行

• 环境

手机：vivo X710L
Android 版本:  4.3
vivo ROM: Funtouch OS_1.2
软件版本号: PD1302_A_1.21.1
内核版本: 3.4.0-perf
编译时间：2015-04-09

• 表现状态

使用默认浏览器在页面之间切换如果下一个页面使用了md5进行加密字符串，会导致页面中已经设置的setTimeout函数被立即执行。

• 分析

可能是内存泄露或者md5方法触发了浏览器的某个bug。没有发现其他浏览器有此bug

• 测试代码

以下 alert 被重写为在页面中输出信息
测试表现为 setTimeout 原本设置为 500 毫秒以后执行， 当执行完md5加密以后，setTimeout被立即执行了。

var t = Date.now();

setTimeout(function(){
    alert("time"+ (Date.now() - t) )
},500);

seajs.use("libs/md5", function(md5){
    var paramList = ["corpId=260", "type=1", "ver=1.0", "t=80856", "__sign__=39a7daceb6a952257bc874f30553f8eb"];
    alert(md5( paramList.sort().join("") ))
})

• md5源码

/*!
 * Joseph Myer's md5() algorithm wrapped in a self-invoked function to prevent
 * global namespace polution, modified to hash unicode characters as UTF-8.
 *  
 * Copyright 1999-2010, Joseph Myers, Paul Johnston, Greg Holt, Will Bond <[email protected]>
 * http://www.myersdaily.org/joseph/javascript/md5-text.html
 * http://pajhome.org.uk/crypt/md5
 * 
 * Released under the BSD license
 * http://www.opensource.org/licenses/bsd-license
 */

(function() {
    function md5cycle(x, k) {
        var a = x[0], b = x[1], c = x[2], d = x[3];

        a = ff(a, b, c, d, k[0], 7, -680876936);
        d = ff(d, a, b, c, k[1], 12, -389564586);
        c = ff(c, d, a, b, k[2], 17, 606105819);
        b = ff(b, c, d, a, k[3], 22, -1044525330);
        a = ff(a, b, c, d, k[4], 7, -176418897);
        d = ff(d, a, b, c, k[5], 12, 1200080426);
        c = ff(c, d, a, b, k[6], 17, -1473231341);
        b = ff(b, c, d, a, k[7], 22, -45705983);
        a = ff(a, b, c, d, k[8], 7, 1770035416);
        d = ff(d, a, b, c, k[9], 12, -1958414417);
        c = ff(c, d, a, b, k[10], 17, -42063);
        b = ff(b, c, d, a, k[11], 22, -1990404162);
        a = ff(a, b, c, d, k[12], 7, 1804603682);
        d = ff(d, a, b, c, k[13], 12, -40341101);
        c = ff(c, d, a, b, k[14], 17, -1502002290);
        b = ff(b, c, d, a, k[15], 22, 1236535329);

        a = gg(a, b, c, d, k[1], 5, -165796510);
        d = gg(d, a, b, c, k[6], 9, -1069501632);
        c = gg(c, d, a, b, k[11], 14, 643717713);
        b = gg(b, c, d, a, k[0], 20, -373897302);
        a = gg(a, b, c, d, k[5], 5, -701558691);
        d = gg(d, a, b, c, k[10], 9, 38016083);
        c = gg(c, d, a, b, k[15], 14, -660478335);
        b = gg(b, c, d, a, k[4], 20, -405537848);
        a = gg(a, b, c, d, k[9], 5, 568446438);
        d = gg(d, a, b, c, k[14], 9, -1019803690);
        c = gg(c, d, a, b, k[3], 14, -187363961);
        b = gg(b, c, d, a, k[8], 20, 1163531501);
        a = gg(a, b, c, d, k[13], 5, -1444681467);
        d = gg(d, a, b, c, k[2], 9, -51403784);
        c = gg(c, d, a, b, k[7], 14, 1735328473);
        b = gg(b, c, d, a, k[12], 20, -1926607734);

        a = hh(a, b, c, d, k[5], 4, -378558);
        d = hh(d, a, b, c, k[8], 11, -2022574463);
        c = hh(c, d, a, b, k[11], 16, 1839030562);
        b = hh(b, c, d, a, k[14], 23, -35309556);
        a = hh(a, b, c, d, k[1], 4, -1530992060);
        d = hh(d, a, b, c, k[4], 11, 1272893353);
        c = hh(c, d, a, b, k[7], 16, -155497632);
        b = hh(b, c, d, a, k[10], 23, -1094730640);
        a = hh(a, b, c, d, k[13], 4, 681279174);
        d = hh(d, a, b, c, k[0], 11, -358537222);
        c = hh(c, d, a, b, k[3], 16, -722521979);
        b = hh(b, c, d, a, k[6], 23, 76029189);
        a = hh(a, b, c, d, k[9], 4, -640364487);
        d = hh(d, a, b, c, k[12], 11, -421815835);
        c = hh(c, d, a, b, k[15], 16, 530742520);
        b = hh(b, c, d, a, k[2], 23, -995338651);

        a = ii(a, b, c, d, k[0], 6, -198630844);
        d = ii(d, a, b, c, k[7], 10, 1126891415);
        c = ii(c, d, a, b, k[14], 15, -1416354905);
        b = ii(b, c, d, a, k[5], 21, -57434055);
        a = ii(a, b, c, d, k[12], 6, 1700485571);
        d = ii(d, a, b, c, k[3], 10, -1894986606);
        c = ii(c, d, a, b, k[10], 15, -1051523);
        b = ii(b, c, d, a, k[1], 21, -2054922799);
        a = ii(a, b, c, d, k[8], 6, 1873313359);
        d = ii(d, a, b, c, k[15], 10, -30611744);
        c = ii(c, d, a, b, k[6], 15, -1560198380);
        b = ii(b, c, d, a, k[13], 21, 1309151649);
        a = ii(a, b, c, d, k[4], 6, -145523070);
        d = ii(d, a, b, c, k[11], 10, -1120210379);
        c = ii(c, d, a, b, k[2], 15, 718787259);
        b = ii(b, c, d, a, k[9], 21, -343485551);

        x[0] = add32(a, x[0]);
        x[1] = add32(b, x[1]);
        x[2] = add32(c, x[2]);
        x[3] = add32(d, x[3]);
    }

    function cmn(q, a, b, x, s, t) {
        a = add32(add32(a, q), add32(x, t));
        return add32((a << s) | (a >>> (32 - s)), b);
    }

    function ff(a, b, c, d, x, s, t) {
        return cmn((b & c) | ((~b) & d), a, b, x, s, t);
    }

    function gg(a, b, c, d, x, s, t) {
        return cmn((b & d) | (c & (~d)), a, b, x, s, t);
    }

    function hh(a, b, c, d, x, s, t) {
        return cmn(b ^ c ^ d, a, b, x, s, t);
    }

    function ii(a, b, c, d, x, s, t) {
        return cmn(c ^ (b | (~d)), a, b, x, s, t);
    }

    function md51(s) {
        // Converts the string to UTF-8 "bytes" when necessary
        if (/[\x80-\xFF]/.test(s)) {
            s = unescape(encodeURI(s));
        }
        txt = '';
        var n = s.length, state = [1732584193, -271733879, -1732584194, 271733878], i;
        for (i = 64; i <= s.length; i += 64) {
            md5cycle(state, md5blk(s.substring(i - 64, i)));
        }
        s = s.substring(i - 64);
        var tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        for (i = 0; i < s.length; i++)
        tail[i >> 2] |= s.charCodeAt(i) << ((i % 4) << 3);
        tail[i >> 2] |= 0x80 << ((i % 4) << 3);
        if (i > 55) {
            md5cycle(state, tail);
            for (i = 0; i < 16; i++) tail[i] = 0;
        }
        tail[14] = n * 8;
        md5cycle(state, tail);
        return state;
    }

    function md5blk(s) { /* I figured global was faster.   */
        var md5blks = [], i; /* Andy King said do it this way. */
        for (i = 0; i < 64; i += 4) {
            md5blks[i >> 2] = s.charCodeAt(i) +
                              (s.charCodeAt(i + 1) << 8) +
                              (s.charCodeAt(i + 2) << 16) +
                              (s.charCodeAt(i + 3) << 24);
        }
        return md5blks;
    }

    var hex_chr = '0123456789abcdef'.split('');

    function rhex(n) {
        var s = '', j = 0;
        for (; j < 4; j++)
        s += hex_chr[(n >> (j * 8 + 4)) & 0x0F] +
             hex_chr[(n >> (j * 8)) & 0x0F];
        return s;
    }

    function hex(x) {
        for (var i = 0; i < x.length; i++)
        x[i] = rhex(x[i]);
        return x.join('');
    }

    md5 = function (s) {
        return hex(md51(s));
    }

    /* this function is much faster, so if possible we use it. Some IEs are the
    only ones I know of that need the idiotic second function, generated by an
    if clause.  */
    function add32(a, b) {
        return (a + b) & 0xFFFFFFFF;
    }
    alert("md5 hello start")
    if (md5('hello') != '5d41402abc4b2a76b9719d911017c592') {
        alert("md5 hello end")
        function add32(x, y) {
            var lsw = (x & 0xFFFF) + (y & 0xFFFF),
                msw = (x >> 16) + (y >> 16) + (lsw >> 16);
            return (msw << 16) | (lsw & 0xFFFF);
        }
    }
})();


define("libs/md5_bak", function(require, exports, module){
    module.exports = md5;
});

Fast click

问题

• 移动上浏览WEB页面，click事件响应速度会被延迟300毫秒，这是浏览器为了触摸屏的双击而做出的特别的处理。

解决方案

1：高版本Chrome支持添加固定的meta

<meta name="viewport" content="width=device-width">

Chrome 32+版本会取消click事件的300毫秒延迟，但页面中必须包含一个 meta 头部。

但实际测试 iphone chrome 32 版本依然存在300毫秒延迟，而且考虑到其他andriod机型chrome 版本不一，这句 meta 可能也无济于事。

http://weibo.com/3244329632/AnxAi3TlH

https://code.google.com/p/chromium/issues/detail?id=169642

2: tappy.js

https://github.com/filamentgroup/tappy

• 足够简单，几十行代码，可自由修改

但有几个小问题需要注意

• 在 tap 之后绑定的 touchstart, touchend, click 不会生效，必须前置,也可通过注释源码中 trigger 方法的 e.stopImmediatePropagation();
• 滚动条在最上面，页面向下拉会触发 tap 事件，期望结果是不触发 tap 事件，BUG可能是 body.scrollTop 判断失误
• tap 事件并不会在touchend, touchstart 之后执行

    function trigger( e ){
        //e.stopImmediatePropagation(); //注释这里
        e.preventDefault();
        $( e.target ).trigger( "tap", [ e, $( e.target ).attr( "href" ) ] );
    }

3: fastclick.js

https://github.com/ftlabs/fastclick

• 非常健壮
• 依然使用 click 绑定事件，接入与移除更快
• 不依赖任何库
• 可异步载入执行，执行之前页面响应300+毫秒的click，执行之后300毫秒被取消

小结

fastclick 是最佳选择，健壮，低成本的接入与移除，异步载入执行，不增加页面初始化负担。

为什么是fastclick?

• 补丁式，可以在不修改已有代码的情况下顺利接入，并且接入移除成本很低
• 异步！增强型逻辑不增加页面初始化负担

http://news.cnblogs.com/n/213176/

问题的由来

　　每次去方所，看着高高的书架，满眼的书，一方面很庆幸，这个时代对爱书的人来说，是幸福的，一方面也很难过，这些书都像一个个陷阱，很多人陷在其中，而不自知。这就像现在的互联网一样，信息通畅，人人都可以发出自己的声音，各种论调都可以看到，但有价值的东西也被隐藏的更深了，不练就一双火眼金睛很难发现他们，互联网像一湾深海，如果没有高超的游泳技术和掌控能力，不想被互联网淹死，就只能远离它。

　　有一个现象，自信息革命以来，整个世界范围内，在各自领域内取得瞩目成就的年轻人大多集中在互联网和商业领域，而人文科学几乎找不到年轻人的身影了。可能很多人会说，人文科学需要经历和积累，心智成熟之后才会有所成就。先不说什么叫心智成熟，有什么样的评判标准，先看看近代历史上的一些人在他们年轻的时候都干了些什么：

　　维特根斯坦写《逻辑笔记》的时候，24 岁，尼采写《悲剧的诞生》时，28 岁，写《查拉图斯特拉如是说》时 39 岁，卡夫卡写出《变形记》刚刚 30，叔本华 30 岁就写出了《作为意志和表象的世界》完成自己的哲学使命，《共产党宣言》出版的时候，马克思也才刚刚 30 岁……

　　再看看国内的：

　　陈寅恪 36 岁，就与梁启超、王国维、赵元任并称“清华四大导师”，胡适 26 岁任北大教授，萧红去世时，也刚刚 30 多岁，却已经在**现代文学史留下了几部耀眼的作品……

　　上面提到的这些人本身具有的某种超越常人的品质肯定是不容置疑的，但是光有品质是远远不够的，对人类来说，每个时代人的品质应该是差不多的，不存在有的时代人的品质高，有的时代人的品质低，如果只从生物进化的角度来说，现在的人的身体素质与大脑发育应该是超越过去的，但现实的情况是，在当代做出巨大成就的艺术家与**家却乏善可陈。这当然跟环境有关，跟这个时代有关。

　　有位前辈说过：

你的问题是想得太多，而书读得太少

　　我想换个说法：你不是书读得少，你是经典读得少

　　我们这个时代，留给思考者的空间越来越小了，思考者要接受的挑战越来越难了。

　　大凡有所成就的人，内心笃定，有自己的主观意志，并坚持自己的世界观与价值观，最后越走越远，越走越闪耀。世界上本没有多少真理可言，有的只是角度的不同，你坚持自己的世界观，找到适合自己的表达方式，坚持下去，开辟蹊径，终会有所成就，就像叔本华生前极其讨厌黑格尔的哲学，但他坚持自己的观点，这并不妨碍叔本华与黑格尔都成为伟大的哲学家，我们的世界有足够的宽容与度量，容得下不同与异端。怕就怕自己没有独立的思考与意志，跟着那些粗枝大叶的浮于表层的潮流与声音四处飘泊，最终茫然不自知，埋怨社会的不公与人生的不平等，把浅薄当深刻，把高音当强音。我们现在这个时代，这些浮于表面的潮流与声音就特别多，充斥在书架上的评论集，充斥在社交工具上，充斥在一些精神导师的心灵鸡汤里。那些满是标签与结论的东西，根据触及不到事物的本质，只是一堆情绪的排泻物，但它们足够的多，年轻的孩子们很难穿过它们，找到一处安静之地，人烟稀小，用自己的头脑想点东西。

　　是的，现实的干扰是最大的敌人，教育的求全求偏、社会环境的嘈杂，互联网的泥沙俱下，这是这个时代对每一个渴望独立思考的人最大的挑战。很多人患上了偏见症，无法用无偏见的认识去深入社会与生活。而他们的这些偏见并不是自己独立思考的结果，是从别人那儿继承过来的。他们甚至不知道自己所持偏见的那些东西到底是怎么样的，就人云亦云地带着偏见，可笑而可悲。

　　举个例子，很多上学的孩子不爱学政治，他们觉得政治很无聊，都是骗人的，学这些就是变相地被洗脑。当然，这跟我们的教育方式有关，我们的教育太过偏重通识，永远的四平八稳，抓不住主次，枝叶讲的太多，主干讲得太少，根系根本不讲。但是那些打着反洗脑的孩子们，行为同样可笑，你们真的了解所学的那些政治到底是什么吗？马克思主义，你看过马克思的《资本论》、《共产党宣言》、《1844 年经济学哲学手稿》这些原著吗？马克思作为人类历史上最伟大哲学家之一，是世界公认的，不仅仅是我们这些社会主义国家在追捧他，他开创了哲学新的时代，他的**是人类的财富，他的观点你可以不喜欢，但他的思考方式也不值得学习吗？*****，你看过***的《湖南农民运动考察报告》、《实践论》、《矛盾论》、《论十大关系》吗，***带领的共产党的成功是偶然的吗，他们对当时**现状的了解是深刻的，并坚持着自己选择的道路，要不然“星星之火，可以燎原”岂能那么容易说出口的。***理论，你读过《解放**，实事求是，团结一致向前看》、读过***南巡时的一系列讲话吗？如果这些你都读过，并有着自己独特的见解，你可以厌恶他们，如果你只是从别人口里听得支言片语，请你慢着，你根本就不了解那些东西。你以为你是坚持自己，不想被政治洗脑，这是一种自欺欺人，你不了解他们何来洗脑，而这种为洗脑而走向另一边的行为也是另一种洗脑，只是方向不同而已，形式是一样的，而且这种洗脑更有害，你脑袋空空。作为一个反叛者，可以，但光有姿态是不行的，还要有内容，这样你的姿态才会美，才会让人动容。

　　不管是黄色的土，红色的土，还是黑色的土，都是可以长出大树的，关键土里要有树需要的营养，空空的脑袋里是长不出**的。我们需要的是独立的思考，是直接面对认识对象不带先入偏见的思考。而更多的时候，就像柏拉图的那个比喻里说的，我们直接面对的是认识对象的影子或者是影子的影子，而那些所谓的社会公知，那些不痛不痒的议论者，就像那些举着火把的人，把影子投射给我们，或者他们看到的也只是影子，他们贩卖的都是从别人那儿拣到一些零碎，如果你信了，你记下了，看似你收获了很多的东西，给了你一树的枝繁叶茂，可是在一棵树没有强壮的根系与枝干之前，枝越繁叶越茂，大树倾倒的就越快。那些相互矛盾不成体系的结论最终也会纠缠在一起，让事情越来越复杂，越来越浮于表象。

　　所以，打好根基，强壮树干，就请从经典读起，从源头读起。

　　简单说个例子，现在电影文化很火爆，人人都在写影评，谈电影，江湖上自称影评人的越来越多，张嘴法国新浪潮，闭嘴谈巴赞，不知道他们有多少人看过巴赞写的文章，如果看过了，又不知他们有多少人接着找来柏格森的《创造进化论》读读，如果不理解柏格森有关“意识”与“时间绵延”这些理论，是很难理解巴赞的。

　　我先大致说一下，我对经典的理解。经典是经过时间检验的，一个学科或者领域内的开创之作或集大成者，或者是表现人类对世界及自身探究的具有划时代意义的作品。

　　为什么要读经典

　　经典是一个学科的开创之作，是学科概念和框架刚刚形成的样子，是学习和理解一门学科或者领域的最佳途径。他会清晰地表示出一个学科的来历与去处，就像一个素颜的美女，真实而纯真。当然这样的作品里会有很多的缺陷。正是这些缺陷才好，正因为它有缺陷，才会有后来的发展和研究，当你真的通过自己的思考发现这些缺点，你就会知道后来者们都在说些什么东西，又是怎么解决这些东西的。自己发现这些缺陷与别人告诉你这些缺陷，是完全不同的概念，差距何止天上与人间。有些书就喜欢贩卖聪明，抛出大量的概念或者观点，没有丝毫来由，这些东西没有丝毫的价值，是浪费纸张。

　　前段时间，国内两位著名的哲学资深学者（自称或者他称是哲学家，在我看来，他们离哲学家还差得很远，哲学家与哲学教授根本不是一回事儿）在掐架，我细读了他们冗长的文章，说实话没看太懂他们说些什么和背后的逻辑，只看到满篇的标签和帽子，这是人类懒惰的表现，标签是思考上的懒人的发明，他抹杀了区别和个性，模糊了线条和纹理。哲学家可以有严重的个人好恶，但这些是建立在个人独立的思考之上的。你可以借鉴别人，从他人那儿吸取营养，但这些只是为自己的思考积累素材，而不是照搬硬填。尼采看了叔本华的《作为意志和表象的世界》而迸发出自己的灵感，开创了一种新的哲学观，库布里克从尼采哲学里找到素材，拍出了牛光闪闪的《2001 太空漫游》，这些都不妨碍他们也在各自的领域内留下经典，区别仅仅在于，他们从未停止自己的思考，并坚持自己的角度，最后找到合适的表达方式，表达了自己，丰富了别人。

　　可能你看了N多的佛教入门概述与解读，都不如你拿起一本佛经更直观地理解佛教的逻辑与世界观；

　　你听了N多经济学家在分析经济形势，各种理论，各种模型，各种矛盾，也有各种掐架骂街，你无所事从，拼命站队，不如你从看看《国富论》和《就业、利息和货币通论》开始，走进经济学，学着用自己的眼光看待那些问题。

　　不思考，不读书

　　要从读书里获得有价值的东西，必须要思考，只有思考才能透过书的表达理解作者背后的表达，也才能超越书里的内容。一本书摆在那儿，不是用来教导别人的，是用来被超越和批评的。

　　你可以不读书，但不能不思考，读书可以让人思考，修理一台摩托同样可以让人思考，扫地也可以，聊天也可以，恋爱可以，做爱当然也可以。

　　你说你只看武侠，只看情色，没有关系，你可看出金庸、古龙、梁羽生、温瑞安的区别，可看出梁羽生与温瑞安的不同，你可能看出武侠的世界观到底如何，江湖又是何等模样，**武侠小说的源头在哪儿，江湖的滥觞从哪儿开始？看看《昆仑奴》、《蜀山剑侠传》，想想武侠小说的清涩的模样，武侠的世界与现实的世界在哪儿交汇，又在哪儿背离。

　　看情色，《金瓶梅》的人性与欲望，《肉蒲团》里的佛与色，情与肉，《北回归线》里的意识，《查泰莱夫人的情人》的另类人生。

　　读书的方式就是你的生活方式，思考可能不会为你的生活增加什么，但会让你明白自己是怎么走到今天，如何更好地面对自己，面对他人，怎样能够活得更加坦然。

　　几条建议

少读或者不读评论集，看了也不要轻信；
多看经典原著，被引用的原著更要找来看，不要只听信别人的解读；
工具方法类的书，读一两本即可，重要的是去做；
直接面对认识对象，哪怕无法看清全貌，也不要只看它的影子；
不要随意推翻自己的价值观，要试着去修正和补充，这个世界没有真理，只有解释；
读书必需思考，不思考就不要读书；读书不重要，思考才最重要；
把新的知识与自己既有的知识体系连通起来，不要碎片化的知识点，人与搜索引擎的不同是，人的知识有体系，搜索引擎是堆积；
　　以上共勉

　　————————————————————————————————

　　更新（一）我们为什么无法专注

　　上次谈读经典的问题，很多朋友不以为然，觉得读经典枯燥，见效慢，很难投入，是的，在我们已经习惯了有问题找百度的年代里，我们越来越懒于思考，整个社会趋于浅层与变换，当所有东西都可以通过手指在屏幕上点点划划来搞定的时候，我们大脑已经不会再为解决一个难题而长时间专注于一个事情上了。我们的大脑更多的时候是面对数不清的信息，筛选、拼接、组合，所有的东西越来越趋同，越来越缺少原创与差异。我们追求快速的解决之道，追求效率，追求大数据的获取，当面对简单的信息或者无信息的时候，我们会恐慌，大脑失去创造能力。

　　我已经不记得最近一次反复看一本书，反复读一页书、思考一句话是什么时候了，当我发呆的时候，手机会响起来，地铁已经到站，新换上的美女广告牌上的大腿白花花，当我安静地走路时，红灯会突然亮起，背后有会车在鸣笛，前面突然伸出一只手，递来一份传单。当我安静地坐在屋子里时，我的大脑已经不习惯独处了，他让我拿起手机，打开电脑，打开一个又一个红红绿绿的网站，看各种各样奇奇怪怪的广告。

　　我三岁多的女儿，一个人的时候，情景通常是这样的，手里捧着一个 mini 玩游戏，旁边的 ipad 还要放着动画片，她还会顺手抢过我的 iphone 划几下，我替她的大脑累，可有什么办法呢？

　　这个时代把所有的东西都放在你的面前，让你选择，向左或者是向右，逆流或者是顺流，收获和错过都要自己承担。

　　读经典，是因为经典值得专注，经典是专注的结果，经典反映了时代的厚度，思考增加时代的厚度。

　　更新（二）再说几句有关经典

　　没有想到，那篇《你不是书读得少，你是经典读得少》引来了很多人的关注和热议，绝大多数的人表示赞同，这对一个贩卖观点的人来说，是很欣慰的，也看到有人写文谈自己的观点，很惊喜。

　　从表达角度来说，观点必然意味着偏激，四平八稳的观点是不能称之为观点的，所以观点是用来讨论、碰撞和交流的，毕竟双向的**交流，才能孕育新的东西，**这个东西，是异体有性繁殖的结果。多角度，多方位的解读才是对待观点的应有之法。所以，关于经典阅读，关于一些朋友的议论，再简单说几句。

　　一、读经典是一种深阅读，是阅读的一种方式，提倡深阅读，并不代表我认为浅阅读没有必要，我大谈有关读经典的问题，只是觉得现在深阅读缺失的比较严重。读经典是打基础，是建立一个框架，帮助个人形成**主干，而浅阅读是收集信息和素材，两者都不可或缺。

　　二、什么是经典？

　　我说过，经典是经得起时间检验的东西，但这不意味着经典等同于时代久远，让大家读经典，并不单纯是号召大家一味循古，只读读古人的东西，人类文明几千人，古人的确留下了很多经典的东西，而且这些东西一直流淌在我们的血液里，正因为如此，我们现在所有的创造与**都是在古人的基础上发展而来的，近现代，很多新的思潮涌起，留下很多灿烂的经典，近现代科学技术的飞速发展超过了历史上的任何一个时期，很多新的科技手段出现，这中间也产生了很多经典和值得传承的东西。时间只是一个模糊的概念，株守时间去分辨经典，未免太刻舟求剑了。在我看来，经典应该包括但不限于以下几种：

一个学科或者领域的发韧之作。俗话说，七岁看老，通过一个学科的童年，可以看出它将来的发展与轨迹，而且更易于把握它的本质与思维方式。比如《国富论》之于现代经济学，凯恩斯的《就业、利息和货币通论》之于宏观经济学，柏拉图的《理想国》之于哲学等等。

闪烁着个人**光芒的作品，发古人之未发观点，探索人类社会及人类本身的规律，给后人以巨大的震撼与启示。大部分的经典的哲学著作和艺术作品属于此类。

一个学科或者领域的集大成者，充分梳理学科知识的体系，有利于学科知识的标准化，或采用了更利于为人所接受的讲解方法，对一个学科的普及做出巨大成就的作品，大部分的自然科学领域的经典作品属于此类，一些经典教材诸如萨缪尔森的《经济学》，萨杜尔的《世界电影史》等等也应该包括在内。

短租月报

总数据

评价

我所理解的前端 MVC, MVP, MVVM

初看 MVC 、MVP 、 MVVM 这3个鬼名字那么像是多胞胎出来的吗? 然而并不是多胞胎的关系，而是进化关系。

本质上他们都是根据代码职责划分代码分离方式的架构。就好像把调色板的颜色分放在不通的区块一样，代码职责就好像调色板的各个颜色值，职责不一样就可以归类组织。

MVC 一种被大家熟知的代码架构方式。 模型(model)－视图(view)－控制器(controller)。比与后两种要先诞生许多，然而时代在发展，为了在更多场景中（前端，后端，Native, 中间层）更加适用，于是在MVC的基础上演化了 MVP 和 MVVM。 当然并不是说后两种会更高级，区分仅仅是为了适用于不通场景的而已。

MVC

模型(model)－视图(view)－控制器(controller)

图片来自阮老师的博客

唯一觉得不太认同的点是， Model --> View 这条线应该干掉， 应该是V->C->M->C->V.

好吧！其实我不太想说MVC

MVP

模型(model)－视图(view)－控制器(presenter)

其实我也不想说MVP，有兴趣可以查看后面的参考链接

MVVM（前端）

模型(model)－视图(view)－控制器(viewModel)

以下我们只讨论前端的MVVM。
在介绍MVVM之前，我们得先看看前端渲染页面的历史

需求：把数据正确的显示

• 通过选择器选中元素，然后设置元素的属性

//数据
var data = {
    name:"hello",
    age:21
}

//渲染到页面
$('#J_Name').text( data.name )
$('#J_Age').text( data.age )

简单又清晰，但是如果data在复杂一些，包含身份证号、手机号、身高、年龄 ...., 需要把值全部写入到页面，代码量就会增加，而且这种重复的选择再赋值，看起来有点傻（主要是工程师都比较懒）。

需求：把数据高效并正确的显示

• 使用模板引擎

//数据
var data = {
    name:"hello",
    age:21
}

var tmpl = '<div class="name">${name}</div>'+
'<div class="age">${age}</div>';

$('#detail').html( juicer( tmpl, data ) );

通过把所有变量依据某一个固定格式写入到字符串中，然后在用特定规则去插值，最后把结果一次性输入到页面中。无论是执行效率还是开发效率都较第一种方式高一些。

需求：频繁更新的数据高效并正确的显示 （MVVM）

// html 片段
/<div id="J_Info">  
    <div class="name">${name}</div>
    <div class="age">${age}</div>
</div>

//数据
var data = {
    name:"hello",
    age:21
}

$('#J_Info').bind(data) //伪代码 类似这样的语法

这一种方式最大的优点在于，当 name 被更新以后，页面会自动同步更新以后的值。而不需要写额外的代码，在高交互的数据展示场景尤为适用。

有理由相信MVVM是需要把动态（实时更新）的数据渲染到页面中， 更进一步为了达到用户与数据交互，通常viewModel渲染器允许开发中把常见的dom事件直接写在html中，渲染器负责绑定逻辑，并在用户触发动作的时候直接更新data。

参考

• http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
• http://kb.cnblogs.com/page/120678/
• http://www.cnblogs.com/lori/p/3501764.html

33

和鲁滨孙去冒险

放下一切，追逐梦想

可以选择最舒适的中产阶级生活，不会为了面包而终日忙碌，也不会为了过多利益而劳神费心。但鲁滨孙并未选择这种安排，对于一心想去航海的他来说，父母的劝解与中产阶级生活变成一种束缚。
离家出走的冒险并未得到亲人的支持，反而有父亲有对他未来呼援无门的预言。

第一个挫折

在获得一个可以免费跟船出海的机会后，鲁滨孙放下家人的反对，踏上了追逐梦想的路。但未来得及学会一些水手的基本技能，大船遭遇风暴，幸得及时得到沿路商船求助才得以脱险。身处险境时，曾向上帝祈祷若能平安登陆就再也不出海，鲁滨孙总是会忘记痛楚，这注定他会有挫折的后半生。

沦为奴隶

获救登陆在伦敦，结识了一位去几内亚做生意的船长。船长为人朴实，待人真诚，鲁滨孙和船长成为莫逆之交，并跟随他在次出海，不仅赚了一些钱，还学会了一些水手的基本技能。

受到利益的趋势，准备再次去几内亚，况且有前一次的成功经验，更是带上更多货物，期望暴富。但这次确是非常不幸的航行，货船在加那利群岛和非洲西海岸之间遭遇了土耳其海盗，海盗登船以后抵抗以没有意义，所有人成为俘虏，鲁滨孙也从此成为了海盗的奴隶。

逃离魔掌

在成为奴隶的2年后，鲁滨孙终于倒找一个逃跑的机会，并带上了另外一个摩尔人奴隶。接近一个月的恐惧沿岸航行中遇到了一艘西班牙商船，不仅安全在巴西上岸，还得到船长的无私照顾。上岸后委托船长把自己在伦敦的资产全数部转移到巴西，并买下荒地开始做种植园，种植园发展很好，4年后鲁滨孙有了一定的资本。也融入了当地人的生活，当地人对鲁滨孙的航海经历很感兴趣，并都期待一夜暴富，在当地人的怂恿下策划了下一次迈向死神的航行。

流落荒岛

依然是风暴，除鲁滨孙外的所有人都被大海吞没了，昨天还在巴西的种植园过着安逸的生活，今天就独自沦落荒岛，不知是不幸还是万幸。这可能是上帝的惩罚，也可能是鲁滨孙注定的命运，在这个遥远的岛上，并没有半点逃离海岛的希望，还必须面对未来在海岛上的生存威胁，可能有食人的野人部落，也可能有凶猛的野兽，万幸不被风暴吞噬，却也走进一个人间地狱。

计划与坚持

• 前几年

从沙滩上醒来，鲁滨孙来不及伤感，他必须辛苦的从报废搁浅的大船上淘下的工具和物质，在小岛上建立了栖身之所。并为在岛上长期生活做准备。有计划的外出寻猎，生活作息，记录日志与在木桩上记录日期。几月过去并未发现岛上会有大型食肉动物，自身安全不会受到太多威胁，也发现一些容易获取的食物渠道，比如山羊，葡萄，一些飞禽。飞禽和山羊都可以通过大船上淘下的抢轻易猎杀到，但火药有限必须节约使用。在接下来的几年，开始制作各种常用工具，为家周围插上栅栏，扩大洞室，熟悉小岛环境。

• 地震，风暴，疟疾

一次小地震让山洞的一边垮台，辛亏跑的及时才避免了被活埋，这也引发了搬家到开阔地带的想法。在海岛的深处有一处有大量葡萄和鳖的地方花费很长时间建立的新的住所。考虑到海岛深处远离海岸可能会错过来往的商船，所以只成为了一个别墅，算是海岛上另外一个家，大部分时间居住在外面，只在葡萄成熟的季节过去住一段时间，随便晾晒葡萄干。一次风暴淋了雨发烧，越来越严重，像是得了疟疾，这里没有任何药物，想必死无疑，人之将死自己胡乱治疗，阅读圣经向上帝祈祷，奇迹般好了。也使鲁滨孙对上帝充满了感激。

• 粮食种植

也是因为上次的风暴，无意散落地上的几颗小麦种子长出苗粟，鲁滨孙看到希望，把仅有的几颗进行播种，收获。再播种，再收获。一次一次反反复复，终于在第4个年头吃到了自己种出的粮食。更是希望可以做出面包，虽然制作面包的工艺他完全不会，不过他相信只要有更多的粮食，他一定能做出面包，就好像他可以独自烧制器皿，编织藤篮，制作凳子，桌子，甚至花上大半年把一颗大树削成独木舟。时间对他来说太多了，所有以前看似不会的事情都可以摸索出门道。

• 圈养山羊

已经生活在岛上生活了十一年，弹药越来越少，也不能只吃一种食物，鲁滨孙考虑抓小羊羔进行圈养，让羊自己繁殖这样就可以在没有弹药的情况下获得羊肉，用挖陷阱的办法抓住三只小羊，并悉心照顾，经过一两年的努力羊群初具规模，不仅可以保证没有火药时也能吃到羊肉，每天还可以喝到羊奶，这确实出乎意料。

• 一个脚印

第15个年头在别墅无忧无虑的度过酷暑，去沙滩偶然发现有一个人脚印，确信这是赤裸人的脚印，脚趾，脚后跟都清晰可见，这简直把鲁滨孙吓死了。他胡想连篇，海岛上还有其他人存在，那么多年自己都并未察觉，会不会是食人部落？脚印为什么只有一个？又为什么偏偏让我看到？他们已经发现我了吗？会不会他们明天就会冲进我的山洞杀死我！鲁滨孙几乎不敢再出门，心中充满了恐惧。以为对小岛已经足够了解，突然感觉又那么陌生，现在一点点风吹草动，都足够把他吓得半死。接近半个月，都不敢走出山洞。仅有的存粮快吃完了，只能祈求上帝保佑，才战战兢兢的走出洞，去挤些羊奶又马上回来，一连几天都这样没发现什么危险，才稍微敢出门一些。接下来的两年使鲁滨孙日夜忐忑不安，迫使他加固了围墙，转移了羊群，并不再随便放枪。

• 食人部落

距离发现那个脚印过了二年，鲁滨孙在环游小岛时，发现了食人部落在西海岸举行人肉宴会留下的痕迹，第一次看到这种沙滩上骸骨遍地大惊失色，仔细思考后推断他们不会在这个小岛上，应该是从其他小岛做独木舟过来，食人后再匆匆离开。一年后一个清晨食人部落在距离家不远的海岸登陆，举行完一个食人宴会回后离去，鲁滨孙被吓坏，但也看得真真切切，证明了前面的推断。于是有报复食人部落的想法，甚至觉得离开海岛可以从救一个被食的野蛮人开始，从野蛮人奴隶那里得到一些如何离开海岛的办法。他对营救做了详细规划，并开始等待他们再次登陆海岛实施营救。

• 营救星期五

第二十五年，一个食人部落上岸，准备宴会，其中一个俘虏向鲁滨孙的方向逃跑，抓住这个机会，鲁滨孙用抢干掉了追俘虏的两个野蛮人，俘虏特别感谢鲁滨孙，有意要跟随鲁滨孙，做他的终身奴隶，把俘虏带回了住所，取名为星期五。过了一年星期五已经会用抢了，而且会用简单的英语和鲁滨孙交流，又一次与登陆的食人族对战中营救了星期五的父亲以及一个西班牙人。

• 帮助一位船长

一艘叛变的商船登陆海岛，叛变者准备扔下原来的船长离开。鲁滨孙听到枪声后与星期五营救船长，并在与船上的叛变者斗智斗勇，最后成功帮船长夺回大船。船长带着鲁滨孙和星期五离开了生活28年的海岛。

一颗冒险的心

有些人愿意冒险，有些人愿意生活平淡。我选择了冒险，但平淡又有什么不好呢？

数据挖掘的基本步骤

别人总结的

• 1 抽象成数学问题

明确问题是进行机器学习的第一步。机器学习的训练过程通常都是一件非常耗时的事情，胡乱尝试时间成本是非常高的。
这里的抽象成数学问题，指的我们明确我们可以获得什么样的数据，目标是一个分类还是回归或者是聚类的问题，如果都不是的话，如果划归为其中的某类问题。

• 2 获取数据

数据决定了机器学习结果的上限，而算法只是尽可能逼近这个上限。
数据要有代表性，否则必然会过拟合。
而且对于分类问题，数据偏斜不能过于严重，不同类别的数据数量不要有数个数量级的差距。
而且还要对数据的量级有一个评估，多少个样本，多少个特征，可以估算出其对内存的消耗程度，判断训练过程中内存是否能够放得下。如果放不下就得考虑改进算法或者使用一些降维的技巧了。如果数据量实在太大，那就要考虑分布式了。

• 3 特征预处理与特征选择

良好的数据要能够提取出良好的特征才能真正发挥效力。
特征预处理、数据清洗是很关键的步骤，往往能够使得算法的效果和性能得到显著提高。归一化、离散化、因子化、缺失值处理、去除共线性等，数据挖掘过程中很多时间就花在它们上面。这些工作简单可复制，收益稳定可预期，是机器学习的基础必备步骤。
筛选出显著特征、摒弃非显著特征，需要机器学习工程师反复理解业务。这对很多结果有决定性的影响。特征选择好了，非常简单的算法也能得出良好、稳定的结果。这需要运用特征有效性分析的相关技术，如相关系数、卡方检验、平均互信息、条件熵、后验概率、逻辑回归权重等方法。

• 4 训练模型与调优

直到这一步才用到我们上面说的算法进行训练。现在很多算法都能够封装成黑盒供人使用。但是真正考验水平的是调整这些算法的（超）参数，使得结果变得更加优良。这需要我们对算法的原理有深入的理解。理解越深入，就越能发现问题的症结，提出良好的调优方案。

• 5 模型诊断

如何确定模型调优的方向与思路呢？这就需要对模型进行诊断的技术。
过拟合、欠拟合 判断是模型诊断中至关重要的一步。常见的方法如交叉验证，绘制学习曲线等。过拟合的基本调优思路是增加数据量，降低模型复杂度。欠拟合的基本调优思路是提高特征数量和质量，增加模型复杂度。
误差分析 也是机器学习至关重要的步骤。通过观察误差样本，全面分析误差产生误差的原因:是参数的问题还是算法选择的问题，是特征的问题还是数据本身的问题……
诊断后的模型需要进行调优，调优后的新模型需要重新进行诊断，这是一个反复迭代不断逼近的过程，需要不断地尝试， 进而达到最优状态。

• 6 模型融合

一般来说，模型融合后都能使得效果有一定提升。而且效果很好。
工程上，主要提升算法准确度的方法是分别在模型的前端（特征清洗和预处理，不同的采样模式）与后端（模型融合）上下功夫。因为他们比较标准可复制，效果比较稳定。而直接调参的工作不会很多，毕竟大量数据训练起来太慢了，而且效果难以保证。

• 7 上线运行

这一部分内容主要跟工程实现的相关性比较大。工程上是结果导向，模型在线上运行的效果直接决定模型的成败。 不单纯包括其准确程度、误差等情况，还包括其运行的速度(时间复杂度)、资源消耗程度（空间复杂度）、稳定性是否可接受。
这些工作流程主要是工程实践上总结出的一些经验。并不是每个项目都包含完整的一个流程。这里的部分只是一个指导性的说明，只有大家自己多实践，多积累项目经验，才会有自己更深刻的认识。

自己瞎BB

1. 分析题目
   1. 数据各字段含义
   2. 历史数据的数据量，大致展现了什么
   3. 题目要求的预测结果是什么？
   4. 各个字段与预测结果的大致规则是什么
2. 分析数据
   1. 详细分析数据字段
   2. 深入数据发现大致规律
3. 制定大致的预测方法
   1. 构建测试集合结果集
   2. 编写代码进行预测
4. 深入挖掘数据的逻辑
   1.
5. 不断投入和尝试

JSBrige 实现方案

1. native 识别 webview 中得 hybrid:// 协议
2. 根据协议规则执行native方法
3. 获得执行结果调用js全局方法 lib.windvane.onSuccess 或者 lib.windvane.onFailure

hybrid 协议

协议头://客户端类名:sid/客户端方法名?参数

例如：hybrid://nativeClassname:1/methodName?{"a":1,"b":2}

• sid js端调用生成，客户端处理完成以后回传给js
• nativeClassname methodName 双方约定
• ? 号后面紧跟json字符串格式参数

js如何把协议发送给native

页面调用libs/windvane.js 通过 lib.windvane.call('jsbrige', 'add', {a:1, b:2}, success, failure, timeout)

• android Native 通过 CordovaChromeClient.onJsPrompt（）中拦截处理
• ios native 通过监听url hybird协议来实现参数接收

native回传处理结果给js

• android 通过 webview.loadUrl("javascript:functionName(param)");
• ios 与android 类似

回传方法参数说明

lib.windvane.onSuccess and lib.windvane.onFailure 均接收两个参数分别是 sid data, sid是协议中的sid, data 是处理结果，直接的json数据。

data

{
   ret:'SUCCESS',错误代码 字符串
   data:null // 处理结果 可以是字符串 数字  或者一个 json 对象
}

实例

hybrid://nativeClassname:1/methodName?{"a":1,"b":2}

hybrid://jsbrige:1/add?{"a":1,"b":2} 返回 a+b 的和

正则匹配协议

/^hybird\:\/\/([\w\d]+)\:(\d+)\/([\w\d]+)\?(\S+)$/

一战记录

基本情况

• 时间
  • 1914年7月--1918年11月-持续4年4个月
• 事件
  • 奥匈帝国皇太子斐迪南大公夫妇（右图）在萨拉热窝视察时，被塞尔维亚青年加夫里若·普林西普枪杀。

3个矛盾

• 帝国主义经济发展不平衡
• 霸权矛盾
• 新旧殖**义矛盾激化

2个集团

• 同盟国
  • 德国、奥匈帝国、意大利
• 协约国
  • 法国、俄国、英国

主要战场

• 西线是英、法对德战场；
• 东线是俄国对德、奥战场；
• 南线是奥匈帝国对俄国与塞尔维亚战场

过程

• 德国西线进攻不顺利，重新把东线作为主要进攻点，获得几场胜利以后也变成拉锯战。
• 意大利倒戈
• 美国，日本，**加入协约国作战
• 俄国由于2月革命和十月革命退出

主要战役

• 马恩河战役
  • 德国攻占比利时以后在法国境内的第一场战役
• 加利波利战役
  • 协约国的主动战役，失利告终
• 凡尔登战役
  • 德军再次以西线为主要战场，双方死伤月100万（凡尔登绞肉机）

战后

• **
  • 54运动
  • 马克思**在**传播
• 英国
  • 巨大伤亡与物资损失
  • 经济亦因战争大受影响，出现严重衰退
• 俄国
  • 十月革命，建立社会主义国家
• 美国
  • 世界头号经济强国
• 德国
  • 未在本土作战，主要来自战后的经济、军事制裁。
  • 德国国民对强加给他们的条约有极强的抵触和反感情绪
• 欧洲
  • 妇女地位的提升

看《设计与生活》共公开课笔记
http://v.163.com/special/cuvocw/shejiyushenghuo.html

• 形式层面的美化只是设计最为基础的工作
• 设计是一种思考方式，帮助我们在工作，生活中做出合理的选择，创造更合理的生活方式和生活环境
• 设计的本质是创新，创新来自于对生活方式的理解，设计要站在生活的前面，站在社会的前面去承担一个引导的责任
• 更好的设计来源于对生活方式的理解

《逻辑思维》的观点

1. 网络沟通永远无法代替面对面真实感，一个眼神，一个表情的真实传递。
2. 你会损失掉很多机会，甚至自己都无法确定自我价值该如何实现。
3. “见识”少了，很多事不需要精通，但需要你了解，见过。

使用 React.js 遇到的一些问题

网站的代码整体设计是什么样？为什么这样？

例如如下代码

render(){
    return (
        <AComponent /> // 如果 Acomponent 报错， Bcomponent 无法正常渲染
        <BComponent />
    )
}

可以查看问题一的图片，我们所有渲染模块都继承于BaseModule, 渲染模块不直接使用覆盖render的函数，而是新做一个render2函数，BaseModule 会在 render的时候调用 render2 来完成模块渲染，此时对render2 try catch 避免出错。

代码如下

//  BaseModule
render(){
    //.... 其他逻辑
    try{
        this.render2();// 调用模块真正的render
    }catch(e){
        console.log(e)
    }
}

// Acomponent
render2(){ //注意这里不再是render，而是render2
    return <div>业务</div>
}

如何工程化的模块的各种状态（比如：加载中、加载失败、重试机制）

同样依赖于我们的BaseModule。

render(){
        // loading 不需要手动维护，我们在baseModule中ajax发起之前做了自动处理。
        if(this.state.loading){
            return <div>加载中...</div>
        }

        if( this.state && this.state.success == false ){
            return (<div onClick={this.componentDidMount.bind(this)}>请求失败，点击重试</div>)
        }else{
            try{
                //调用模块的正常渲染逻辑
                return this.render2();
            }catch(e){
                return <div onClick={this.componentDidMount.bind(this)}  >请求失败，点击重试</div>
            }
        }
    }

模块之间的通信你们如何解决？

有使用Redux、flux等来管理模块或者数据流吗？

元泉分享

• 前端基础知识
• ppthttp://yunpan.alibaba-inc.com/share/link/V5AUtAnby
• CSS 权重
  • style-->1000
  • id --> 100
  • class -->10
• 层叠上下文 z 高度
• haslayout
  • object.currentStyle.hashLayout
  • 清浮动
  • 阻止垂直外边距合并
  • 浮动元素塌陷问题
• BFC(block formatting contexts)
  • div:clear:both
  • 
    
  • overflow:hidden;_zoom:1
  • 父元素也浮动
  • 使用表格类元素作为浮动元素父容器
  • 父元 display:table 和 zoom:1
  • after:{content:"\20";display:block;clear:both;height:0}
• iframe高度
  • 同域名子页面直接设置 parent.iframe.style.height = widnow.document.scrollheight;
  • 子域不同 设置 document.domain = "";
  • 不同域 使用第3个代理页面
  • postMessage
  • window.name

1

2

React.js 的一般问题

React component的生命周期是？

• 挂载
  • getInitialState(): object在组件被挂载之前调用。状态化的组件应该实现这个方法，返回初始的state数据。
  • componentWillMount()在挂载发生之前立即被调用。
  • componentDidMount()在挂载结束之后马上被调用。需要DOM节点的初始化操作应该放在这里。
• 更新
  • componentWillReceiveProps(object nextProps)当一个挂载的组件接收到新的props的时候被调用。该方法应该用于比较this.props和nextProps，然后使用this.setState()来改变state。
  • shouldComponentUpdate(object nextProps, object nextState): boolean当组件做出是否要更新DOM的决定的时候被调用。实现该函数，优化this.props和nextProps，以及this.state和nextState的比较，如果不需要React更新DOM，则返回false。
  • componentWillUpdate(object nextProps, object nextState)在更新发生之前被调用。你可以在这里调用this.setState()。
  • componentDidUpdate(object prevProps, object prevState)在更新发生之后调用。
• 移除
  • componentWillUnmount()在组件移除和销毁之前被调用。清理工作应该放在这里。
  • http://reactjs.cn/react/docs/working-with-the-browser.html

在React component 中通常需要给循环中的标签添加key属性，请问有什么作用，一般正确的写法是如何的？

数据是有序的，为了保证数据元素在变化以后react不会重新渲染整个数组所有元素，可以为标签添加key。 用于校正每一行的数据。

• http://reactjs.cn/react/docs/multiple-components.html

CSS3 position:sticky;

说明

• sticky 属性效果类似 static 与 fixed 的结合,如果一个元素拥有该属性，在可视区域内表现为 static 定位随滚动条移动，当元素即将离开可视区域会变成类似fixed定位，但还是会占有原来的位置。

兼容性

• http://caniuse.com/#search=sticky

使用注意

• sticke 需要配合的 top|left。position:-webkit-sticky;top:0;
• 如果以BODY视图为可视区域，那么 sticke 元素最好设置为BODY的直接子元素,否则属性无效**(其实sticky是在父元素的可视区域内，不会超过父元素的范围，也就让页面可以制作多个sticky元素成为可能了)**
• sticky父元素不能设置overflow:hidden;

Javascript判断是否支持

一个拥有sticky属性的DOM,直接判断position的值就行，下面只展示了-webkit-内核下如何判断。（其他平台有可能是-moz-,-ms-等）

//DOM
<div style="position:-webkit-sticky;" id="nav"></div>

//JS
return $('#nav').css("position").indexOf("sticky") != -1

参考资料

http://lists.w3.org/Archives/Public/www-style/2012Jun/0627.html

CSS 单位

文字在显示在屏幕之前的单位是什么？浏览器最后一步是把什么样的文字单位转换为了设备物理点。

设计稿PSD的产出参数通常是PX，以PX来还原最为精准也容易计算。那么为什么还会有em和rem出现呢？

• px

  屏幕像素单位来设定网页内容大小

• em

  根据父级font-size来设定当前文字大小，当然最终的父级也是px

• rem

  根据根元素的font-size来设定当前文字大小，根元素的父级也是px

参考

• http://www.w3.org/Style/Examples/007/units.en.html

To make it even easier to make style rules that depend only on the default font size, a new unit is in development: the rem. The rem (for “root em”) is the font size of the root element of the document. Unlike the em, which may be different for each element, the rem is constant throughout the document.

Other units in development make it possible to specify sizes relative to the reader's window. These are the vw and vh. The vw is 1/100th of the window's width and the vh is 1/100th of the window's height.

Redux 解决了什么问题

1. 降低大型应用的整体复杂度
2. 跨组件通信的问题
3. 数据可预测

我正在收集这个问题的答案，然后在逐一分析每个问题的实际场景和Redux的解决思路。

小屋介绍

• Airban: https://zh.airbnb.com/rooms/4000915
• 小猪短租: http://hz.xiaozhu.com/fangzi/555435101.html

地图

位置:西溪花园流芳园 22幢 3单元 701室

从萧山机场

• 早上6:00到晚上21:00之间（机场大巴转公车）

  萧山机场乘坐机场大巴到蒋村公交中心，再从蒋村公交中心乘坐860或86路公交车到西溪花园竞舟苑（共5站），步行2分钟到西溪花园流芳苑

• 晚上21点以后（机场大巴转出租车或公车）

  方案A：直接出租车到西溪花园流芳苑（也可说：文二西路龙樟路）。时间大约50分钟，费用￥150左右

  方案B：如果在21：00到02:00区间内，可以乘坐机场大巴到武林门，然后出租车到西溪花园流芳苑（也可说：文二西路龙樟路），打的费用￥40左右，时间15-20分钟。

机场大巴参考：http://www.hzairport.com/bus.aspx

从杭州火车东站

• 方案A：（公车）

  火车东站179路公交到古荡新村西站换乘118路到西溪蒹葭苑站（全程26站，花费1小时20分左右），步行2分钟到西溪花园流芳苑。

乘坐出租车直接到西溪花园流芳苑（也可说：文二西路龙樟路），费用90左右

其他参考：可百度地图火车东站到西溪花园流芳苑掌握详细公交方案

从杭州火车城站

• 方案A: (公车)

  城站火车站900路公交到古翠路天目山路口站转118路到西溪蒹葭苑站（全程26站，花费1小时20分左右），步行2分钟到西溪花园流芳苑。

乘坐出租车直接到西溪花园流芳苑（也可说：文二西路龙樟路），费用90左右

其他参考：可百度地图杭州城站到西溪花园流芳苑掌握详细公交方案

• 至少还知道怎么写通顺一句话
• 记录生活也好，技术也好
• 并没有什么坏处，还能安静的思考一会

听两次分享《设计是什么》《共建式设计方法》有感。设计师做什么？工程师又做什么？或者他们分别擅长什么样的事情？

设计师做什么？

• 梳理需求转换为已知问题
• 引导
• 创新

工程师做什么？

• 解决已知问题
• 工程化解决问题的能力（使用工具，对同系列问题提供工程化的解决方案）
• 基础设施构建（设计师不能构建基础设施）

作为一个工程师的职业规划是什么？待思考

以上个人观点

这其实是一个work任务，需要整理一些效果分享给运营。让他们在以后的活动中能使用到。也算是技术驱动运营吧

整理前端效果

• http://work.ju.taobao.net/issues/219

• 效果名称：数字拼图
• 效果概述：可把任意一张图片用作拼图材料，缺点用户完成难度较大
• 预览地址：http://jun-lu.github.io/lujun/puzzle/index.html
• 前端预估：2天

• 效果名称：下雪花
• 效果概述：可以在整个网页或者部分区域出现下雪效果（当然不仅仅是下雪掉砖头也可以的 ^_^ ）
• 预览地址：http://demo.luidea.com/snow/index.html
• 前端预估：2天

• 效果名称：多层视觉
• 效果概述：把页面分层，给用户视觉上更好的体验，和鼠标的简单交互。效果简单，实现难度不大
• 预览地址：http://demo.luidea.com/jparallax/
• 前端预估：1天

• 效果名称：跟随鼠标的小顽皮
• 效果概述：跟随鼠标与用户产生比较强的交互 小交互
• 预览地址：http://manos.malihu.gr/tuts/cursor_following_menu.html
• 前端预估：需要看具体情况

• 效果名称：灯箱
• 效果概述：分阶段信息展示，可作为不同时段的预告等 活动预告
• 预览地址：http://demo.luidea.com/hmenu/
• 前端预估：2天

• 效果名称：圆形旋转展示
• 效果概述：选择性片段展示 12星座 人物展示
• 预览地址：http://demo.luidea.com/scoll_roll/
• 前端预估：2天

在 info.plist 文件中加入

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

互联网时代的个人言行

在传统媒体时代一个普通人的声音需要通过报纸，杂志等印刷品发表才能被看到，需要较长的时间才能被较多人关注到，用更多的时间才能引起观众共鸣。互联网的信息便捷性，打破了这个制约。如今微博、朋友圈、博客、贴吧这些地方都是个人发声的地方，局部事件一般进入大众视野，很容易被放大，最终得到连发表者都无法认同的解读。比如这次的“天猫电器商城事件”，仅仅是一个普通人的一条微博，到知乎上的热帖，整件事情被闹大时间仅仅是几天而已。

亲身经历了一次网络事件发酵的全过程，事件中的人物涉及到我。我被领导频繁的谈话了解经过，周围同事会开始谈论这事，自己也处于等待处理结果的通知中忐忑不安。

• 个人言行不受制约

  黄（事件主角简称）披露了在某互联网实习的经历，在某一个产品的实践中有“不道德”的地方，并最终得出结论“这是这家公司一贯作风”。（他实习不到2个月，仅完整参与1个中型项目），

  黄在最初并没有意识到他的事件会发酵，目的也仅是发表个人意见，甚至有出出风头的意味，写这些文字中对客观事实的发生场景进行了部分夸大，言语偏向自己的道德判断，所得出的一些自己的结论。

  在没有人监督的环境下中（互联网中），言行是随性的，不受约束的。当然我不是赞同互联网需要监管。

• 大众所看到的事实

  个人言行不是客观的反应了事件真相，大众看到了发言人包装过的，符合他主观判断的事实片面。

  事件在被更多人关注过程中，会被放在发言人制造的一个框架下讨论，已经失去了发生的时候的环境。比如黄的事件，最后就是放在一个纯粹的道德框架下讨论，公司这样做不道德，大家无法接受。

  譬如历史上的“巴黎和会”对**山东半岛的主权问题，当时代表团以及政府一致认为签字的利大于弊，但是国内在收到消息是通过某一个人报纸上的一篇评论，把问题引导到爱国主义的框架下讨论，签字就是卖国，卖国在道德上是得不到认可的，最终压力迫使代表团的人不敢签字。

• 大众是睿智的吗？

  我认为不是。

  1. 大众更多倾向弱势群体的利益。

     “阿凡提骗走了地主家的大铁锅“，这被看来是正义的。阿凡提是弱势群体，对他的容忍力度更大，他受到的优待是应该的，受到的不平等在道德上是不能接受的。

  2. 大多数人没有主观判断

     这并不是说自然人没有主观判断，主观判断还有一个参与度的问题，试问一个看热闹的人，你能指望他给你一个多深刻的结论吗？他能为这件事投入的精力是完全有限的，更别提花时间去判断。

  3. 被引导

     辩论赛是个好例子，你听四辩手的总结陈词都觉得很有有道理，甚至会认定这个观点是正确的。但无乱对方辩手总结的多好，另一方也能找出毛病，进行有力反驳。我们看社会时间，就像看辩论赛一样，如果你只听到一方的发言，就容易被引导。我们作为观众，不能立即进入辩手的角色，无法深刻体会事实的发生环境，以及当时的利弊考虑

黄的事件公司的处理结果已经出来，这里不是说黄的不是。仅仅是透过黄的事件有些感悟，对互联网新的认识，对自己的认识。我庆幸有这一次经历，没有严重到把我打趴下，又让我重新审视自己，再好不过了。

-webkit-backface-visibility 会是手机中的浏览器渲染变慢
等待后续更新

2

123

多想，多写，立帖为证

• hello
• nihao

哈哈

function a(){
    alert(1)
}

hello world

Line baidu

google [google][]

test em em

test em em

test strong strong

test strong strong

行内代码标记 var test = "hello world" 哈哈

题目：以19.6m/s的速度向垂直向上抛射小球，问小球关于时间t轨迹方程?

• 分析

  • vi(初速度)：19.6m/s (抛出物体的速度)
  • a(加速度)：-9.8m/s (不考虑空气阻力，小球的下落速度 = 重力加速度 = 9.8m/s，方向与抛物方向相反所以规定为负数)

• 解答：

  因为：

  1. S = v * t (距离 = 平均速度*时间)
  2. v = (vi + vf) / 2 (平均速度 = (初速度+末速度)/2)
  3. vf = vi + a * t (末速度 = 初速度 + 加速度 * t)

  所以：

  S = (vi + vi + a * t) / 2 * t

  化简可得：

  S = vi*t + a*t^2/2

• 答案：

  S = 19.6*t + 4.9*t*t

• demo http://jsfiddle.net/8w3579nf/5/

位移公式

• 基础公式：S = v * t (距离=平均速度*时间)
• 匀加速运动：S = vi * t + a * t^2 / 2(vi是初始速度) 推导过程

平均速度

• 平均速度 = (初速度 + 末速度) / 2
• 例子：从楼顶放下一枚硬币初速度是0m/s,到达地面一刻的速度是100m/s,那么硬币的空中的平均速度是(0 + 100)/2 = 50m/s。
  • 此题目可解答出楼的高度。
  • a=10m/s(重力加速度约定于10m/s)，
  • 100/10 = 10(空中停留时间t=10)
  • s = v * t = 50 * 10 = 500m(楼的高度是500m)

单位向量 demo

单位向量在向量的实际应用中非常方便，如果已知向量的分量x,y使用三角函数幅度可以方便的得到单位向量。

向量 v(x,y)表示为 ： v(10,5)

• 向量v(x,y)的模：a = |a| = sqrt(x^2 + y^2) = sqrt(10*10+5*5) = 11.1803
• 用反三角函数表示v与x轴的夹角幅度: A = Math.atan2( y, x ) = Math.atan2(5, 10) = 0.4636476090008061
• 单位向量(模表示)： vi = (x/a, a/y) = vi(10/11.1803, 5/11.1803) = (0.8944, 0.4472)
• 单位向量(三角函数表示)：vi = (cos(A), sin(A)) = (0.8944, 0.4472)

React , Redux 哪些观点挑战了我的认知

单向数据流

单向数据流 又一个新概念，按照Redux的实现，所有的数据是经过层层的传递，最终被一个无状态的模块渲染，所有的Action也是直接dispatch让所有观察者处理。

按照层层传递的实现，所有的模块都需要上下文的衔接是和全局绑定的，无法直接拿出来使用。因为数据是从上层传递下来的，能触发的Action也是提前规定好的。这种单向数据流和express.js midway 的实现有本质区别, express 的midway 的数据是标准化的（http协议），也可以在中间某一层直接处理返回结果，而Redux的每一个模块的数据都是独特的非标准化的，只有Action是标准化的。

单向数据流 直觉上能帮助我们让数据和Action更简单，但目前的flux Redux 等的实现，实在非常难看懂。

Redux 的文件拆分

actions, components,containers, reducers 。

actions reducers 的拆分简直让人奔溃。

以下代码来自官方demo

actions/index.js

export const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    id: nextTodoId++,
    text
  }
}

export const setVisibilityFilter = (filter) => {
  return {
    type: 'SET_VISIBILITY_FILTER',
    filter
  }
}

export const toggleTodo = (id) => {
  return {
    type: 'TOGGLE_TODO',
    id
  }
}

reducers/todos.js

const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      }
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state
      }

      return Object.assign({}, state, {
        completed: !state.completed
      })
    default:
      return state
  }
}

Redux 函数式编程的语法让人奔溃

//dispatch(addTodo(input.value))

一个普通的Click时间触发的动作。

dispatch(addTodo(input.value))

链接模块和Aaction的 connect 代码。

connect(select)(AddTodo)

第一个函数的返回值直接作为第二个函数的参数，这样的嵌套不会晕吗？或者说如果返回值不需要经过再处理，为什么不工程化的解决他呢？而是直接暴露给编码人员

我理想中搭配React的设计应该是怎样的？

• 保留无状态模块和有状态模块,就像 containers components,
• 有状态（containers中的模块是自给的），无需依赖其他可独立render到页面中，自己可以请求数据，处理子模块的Action。
• 无状态模块（components中的模块） 模块没有 state , 渲染的数据来自 props，模块的参数是尽可能简单。复杂参数的无状态模块应该是依赖于 containers 生存的，不要轻易调用。
• containers模块独立控制自己的数据，而应该从更大的 containers 传递过来。
• 父子模块之间的通信如React现在的这样，通过传递props传递值或者传递函数来互相捕捉。
• 兄弟模块之间的通信（多个同级模块依赖同一份数据）还没有想到应该怎么做

• 在npm注册账户，并邮箱验证

  https://www.npmjs.com/

  npm在国内比较卡，主要是由于网站中加载的资源被墙了，最快解决办法就是修改hosts(如果你没有vpn的话)

# 屏蔽以下资源不影响正常浏览
127.0.0.1 www.google-analytics.com
127.0.0.1 fonts.googleapis.com
127.0.0.1 s.gravatar.com
127.0.0.1 cnstrc.com
127.0.0.1 track.hubspot.com

• 验证用户

//在本地命令行验证你刚才注册的用户
npm adduser 

• 在需要发布的模块根目录下执行

//发布之前请确认当前项目的名字在npm上还未注册，可以去npm直接搜索项目名字看看有没有结果
npm publish

• 更新版本

npm version 0.0.4
npm publish

• 其他命令

npm install module_name  模块安装
npm -g install module_name 全局安装
npm search module_name 查找模块
npm docs module_name 查找模块文档
npm install 安装package.json指定的所有模块
npm start
npm test

.

学习 Redux 的一些疑问

Redux代码晦涩难懂，感觉完全没有可预测性啊

// connect不知道他具体对 select 和 app  做了什么操作
export default connect(select)(App);

//不知道 reduxers 什么时候执行被调用。
onTodoClick={index => dispatch(completeTodo(index))}

// actions 的定义 和 reducers 执行为什么要分开？
completeTodo(index) //被定义在  -> actions/index.js

//执行的方法在 --> reducers/todos.js

switch (action.type) {
    case ADD_TODO: //使用
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ];

// dispatch实际上是把所有的reducers都执行了一遍
// 通过console可以证明
function todos(state = [], action) {
  console.log( "todos" )

function visibilityFilter(state = SHOW_ALL, action) {
    console.log( "visibilityFilter" )

为什么我看着那么难受的代码，会有那么多人推崇它，观念上的冲突到底在哪儿？

2

2

以下是Sass的写法，请自行转换成一般的CSS写法即可。

缺点

• 最多可设置2条边after, before
• 覆盖起来比较麻烦

@mixin borderBottom1px( $color:$borderColor, $bgColor:#fff){


    border-bottom:1px solid $color;

    @media (-webkit-min-device-pixel-ratio: 2){
        border-bottom:none;
        position:relative;
        &:after{
            content:"";
            width:100%;
            height:1px;
            position:absolute;
            border-bottom:1px solid $color;
            bottom:-1px;
            left: 0;
            -webkit-transform: scaleY(0.5);
        }
    }


}

使用border-image

border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
border-width: 0px 0px 1px;

safari 浏览器 CORS 协议 cookie 设置不成功

CORS跨域资源共享,可以代替jsonp来实现跨域的 ajax 请求， 根据协议的定义可以设置cookie来实现用户验证

问题

根据协议来设置response头信息，跨域的请求限制可以解决，在Chrome或android浏览器中也可以正常使用 cookie .
但是在 mac safari 或 iPhone的webview, safari 浏览中设置 cookie 不生效。目前仅找到通过浏览器设置来解决，并不能从代码上解决此问题。

以下是 express node 服务端代码

res.setHeader('Access-Control-Allow-Origin', req.headers.origin); //设置来源域可访问
res.setHeader('Access-Control-Allow-Credentials', true);// 可用加密信息验证用户 cookie
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'); //支持的方法

//... other code

res.cookie("uid","111111") //设置 cookie 

客户端js 代码

var xhr = new XMLHttpRequest();
xhr.open("GET","http://abc.com:4000/adfda", true) //GET 其他域  异步
xhr.withCredentials = true;//允许使用 cookie
xhr.send();

safari 设置

通过safari偏好设置->隐私-> cookie和网站数据->始终允许, iPhone可在设置中找到->safari->cookie和网站数据->始终允许 。此方法无法直接解决用户端的问题。

更新

mac safari 版本 11.0.2 (12604.4.7.1.4) 已经不存在这个问题，其他环境还不知

1

IOS window.onscroll 无法捕捉过程

问题描述

在 iphone 中，页面滚动条事件 window.onscroll, 会在手势抬起以后才触发，页面的滚动过程无法捕获到，这与PC,android的触发机制不一样，并会带来一些体验上的问题。div.onscroll不存在此问题

期望结果

onscroll 事件能与PC触发机制一样，当页面滚动条数值**（document.body.scrollTop）** 值发生变化立即触发该事件。

解决

• 使用 touchmove 驱动，获取滚动条变化判断是否备触发onscroll 条件，如果为真则在document上dispatchEvent onscroll。clearonscrolldelay.js * 方案不完善,在滚动条缓动期间依然有延迟*
• setInterval 轮训监听页面滚动条？ 当页面发生滚动，IOS 会停止 setInterval 与 setTimeout 是停止调度，所以次方案不行
• 使用Worker ? 依然不行，Worker Post到当前页面的消息也会等待手指抬起才执行
• 如果你是想用onscroll来控制具有static|fixed属性的导航，可以选择CSS position: -webkit-sticky; ，但只有少数版本能支持 http://caniuse.com/#search=-webkit-sticky
• 使用DIV代替body?并设置 -webkit-overflow-scrolling:touch;overflow:auto;height:100%; ，DIV 代替BODY, 整个视图不具有持续下上拉的效果了。更多参见意外发现第二条

意外发现

• body 不支持设置 -webkit-overflow-scrolling:touch; ， DIV可以支持 DEMO
• 页面中最外层有滚动条的元素 onscroll 事件会无法捕捉滚动过程

最终方案

• 元素默认使用position: -webkit-sticky; 样式, JS判断无法支持的设备依然使用window.onscroll

  var nav = $('#nav');
  //如果当前环境不支持 css3 sticky 就用 window.onscroll 
  if (nav.css("position").indexOf("sticky") == -1) {
      $(window).bind("scroll", function() {
          // ...
      });
  }
  

因为最近要利用新浪微博的相册上传大量图片，所以....

var script = document.createElement("script");
script.onload = function(){
    $ = Zepto;

    var str = "\n\n";

    $('.parea img').each(function(a, b, c){
        str += "!["+ photoName +"]("+$(b).attr("src").replace("small","mw690")+")\n";
    });

    console.log( str+"\n\n" );

    $('.M_txtarea').each(function(){
        $(this).val( photoName  );
    });
};
script.src = "http://g.alicdn.com/ju/h5-libs/1.0.6/zepto.js";
document.body.appendChild(script);
var photoName = "xxx";//修改为照片的描述

使用说明：

1. 登录新浪微博到相册中 http://photo.weibo.com/upload/index
2. 选择要上传的N多图片，并点击页面中的上传按钮，等待照片全部上传完成（一定要等待上传完成）
3. 在完成页面打开浏览器控制台贴入以上代码片段
4. 控制台输出刚上传的所有照片URL（并使用markdown语法编辑好了）
5. 复制控制台输出的URL信息，然后点击页面中的保存按钮。

最近的状态以及思考

关于思考与读书

先自我认识一下，我到底是一个怎么样的人？

• 极为谨慎

防人之心不可无，在许多事情上，特别是涉及到个人安危，财产或自尊心，在这些方面，我绝对不允许受到威胁（欺骗）。所以我会想尽办法来把降低风险，做法甚至可能超出了一个正常的防范措施范畴，在别人看来都快不正常了。

• 自私

绝对不会干一件不会有利于我的事情。也会认为一切对我有利的行为都是有目的的。所以对我好的人都是图回报的，不会有那么多无私奉献。我可以帮助别人，但绝对不仅仅是做善事。必有我的目的。（请不要被这段话的价值观所误导，这仅是我个人对自私的看法）

自私的另一个坏处，就是永远把账算清楚，绝对不吃亏，也不希望合作方吃亏。

• 自尊心很强

以自己为中心，对意见的采纳度很低。也不希望别人给我提意见。这已经违背了主流的好人的标准。

• 内向

不善于与人沟通，特别不善于和比自己强的人沟通。完全找不到沟通切入点，也不敢表达自己的看法。

最近也一直在纠结，是要保持独立的个性还是应该日渐完善，让自己变得圆滑和世故。显然这两者在我看来都不太好，太个性往往难以融入群体，太世故只会让自己变成一个庸人。如何在保持自己独立性格的同时，变得善于融入群体呢？

说说读书

去年有兴趣的“心理学”书籍，已经搁置很久了，并未按照计划进行，这明显是自己拖延和懒惰的结果。必须重新拾起来

表现较好的是“证券行业基础知识”这门课顺利完成了，接下来正在学习“证券投资基金”，这门课考试过通过就可以拿到证券行业敲门砖“证券行业从业资格证”，虽然证书并没有什么卵用，的确没什么卵用，我又不准备去推销基金、也不要去拉别人开户。但反过来想我整天做了多少并没有卵用的事情，至少这件事看起来比其他事情要靠谱那么一点点。基于这一点理由也就够了吧