代码整洁之道

2015-07-07 00:00:00 +0000

[美]Robert C. Martin 《代码整洁之道》 阅读笔记

你是个程序员，你想成为更好的程序员。

整洁代码

整洁代码就像绘画一样。整洁的代码如同优美的散文。干净利落的抽象。

简单代码的规则

  • 能通过所有测试
  • 没有重复代码
  • 体现系统中的全部设计理念
  • 包括尽量少的实体，比如类、方法、函数等。

消除重复和提高表达力。

有意义的命名

做有意义的区分，废话都是冗余，使用读得出来的名称， 使用可搜索的名称，避免使用编码，避免思维映射，类名，方法名，别扮可爱，每个概念对应一个词，别用双关语，使用解决方案领域名称，使用源自所涉问题领域的名称，添加有意义的语境，不要添加没用的语境。

目的：提高代码可读性。

函数

短小、只做一件事、每个函数一个抽象层级、switch 语句、使用描述性的名称、函数参数、无副作用、分隔指令与询问、使用异常替代返回错误码、别重复自己、结构化编程。

注释

  • 不能美化糟糕的代码
  • 用代码来阐述
  • 阐述
  • 坏注释：喃喃自语、多余、误导性、循规式、日志式、废话、可怕、能用函数或变量就不该用注释、位置标记、括号后面的、归属与署名、注释掉的代码、HTML 注释、非本地信息、信息过多、不明显的联系、函数头、非公共代码中的 Javadoc、范例

格式

保持良好的代码格式，选用一套简单规则并贯彻之。

  • 垂直格式
  • 团队规则
  • 格式规则

对象和数据结构

  • 数据抽象
  • 数据、对象的反对称性
  • 德墨忒尔率
  • 数据传送对象

错误处理

  • 使用异常而非返回码
  • 先写 Try-Catch-Finally 语句
  • 使用不可控异常
  • 给出异常发生的环境说明
  • 依调用者需要定义异常类
  • 定义常规流程
  • 别返回 null 值
  • 别传递 null 值

边界

  • 使用第三方代码
  • 浏览和学习边界
  • 学习性测试的好处不只是免费
  • 使用尚不存在的代码
  • 整洁的边界

单元测试

测试驱动，单元测试。

  • TDD
  • 保持整洁
  • 整洁的测试
  • 每个测试一个断言
  • F.I.R.S.T

类

  • 类的组织
  • 短小
  • 为了修改而组织

系统

  • 将系统与构造使用分开
  • 扩容
  • 代理
  • 框架
  • 测试驱动系统架构
  • 优化决策
  • 明智使用添加了可论证价值的标准
  • 系统需要领域特定语言

迭进

  • 通过迭进设计达到整洁的目的
  • 运行所有测试
  • 重构
  • 不可重复
  • 表达力
  • 尽可能少的类和方法

并发编程

挑战、防御原则、执行模型、警惕同步方法之间的依赖、保持同步区域微小、很难编写正确的关闭代码、测试线程代码。

逐步改进

JUnit 内幕

  • 框架

重构 SerialDate

  • 首先，让它能工作
  • 让它做对

味道与启发

注释、环境、函数、名称、测试。

全栈工程师

2015-06-29 00:00:00 +0000

余果 《谈谈全栈工程师》阅读笔记

介绍

全栈工程师（full-stack engineer）是一个全球热议的话题。“栈”是指 software stack 或者 solution stack。

要开发一个 Web 页面，工程师需要使用操作系统、服务器、数据库以及几种编程语言，这些技术组合在一起叫做 Web Stack。 擅长 Web Stack 的工程师就可以称为 web stack Engineer。以此类推，擅长所有 Stack 的工程师就是全栈工程师。

全栈工程师是一个阴谋，老板都想雇佣一个人做三份工，拿两份工资。Web 2.0 之前，工程师就符合全栈，一个人包揽整个网站的构建。随着技术发展，Web 开发流程也有了一条流水线。用研、交互、视觉、重构、前端、后台、运维和测试。当然还有项目经理。项目经理和技术 leader 很需要是全栈的人担当，不只是小公司，大公司也如此。

当然全栈很适合自由职业和创业，对个人而言，全栈的发展空间是很巨大的，当然首先要成为 top 10 呢。

酷炫之路

我们都是普通人，所以要成为全栈大神就要慢慢积累，先精后广，一专多长。

找工作的时候，看招聘信息，很简单，很容易，但是仅仅满足招聘要求是不够的，什么都做一点，那就是无亮点。

多关注商业项目，多关注用户体验，在某个领域挖深学习。前端招聘，大家都喜欢前端基础过硬，有脱颖而出的亮点和经历，后台也写得不错，移动端原生也 OK，再要是个妹子，恩，你懂的。

大前端

  • 前端是棵大树，HTML+CSS+JS 是主干。
  • Web 语义化：无障碍网页应用（WAI-ARIA）
  • 命名规范
  • 《Designing with Web Standards》

最难？

缓存

  • 数据库缓存
  • 内存缓存，硬盘缓存
  • 静态化
  • 浏览器本地缓存

请求

  • 哪些？
  • 花费时间？
  • 请求类型
  • 状态码
  • 流量
  • gzip

依赖管理

资源打包，优雅地使用他人代码。

  • npm
  • bower
  • 其他

移动端是大势所趋

  • Web app，技术简单，无缝移植，–> Hybrid app。
  • iOS native app，OC，Swift
  • Android native app，JAVA
  • Windows phone。。。
  • 微信公众号。

多看书

《禅意花园》《网页重构》《超越CSS》《CSS Mastery》等 还有《写给大家看的设计书》

语言的应用场景

什么情况用什么语言都是需要考究的，语言各有优缺点，适合的就是最好的。

一专多长

专精：看这门语言最开始的设计思想是什么，理解语言的设计背景，运行环境，做了哪些优化，以及做了哪些妥协。比如 Ruby，它 care 的是程序员写代码的效率而不是程序运行的效率。

多长：熟悉很多不同类型的语言，理解语言的长处，使用对应的设计模式。

推荐《七周七语言》

多读书–>《代码大全》《黑客与画家》《设计模式》等

设计模式

  • MVC 架构
  • DRY
  • 惯例优于设置

学一点设计

推荐《写给大家看的设计书》

设计：

  • 亲密性：亲密的元素放在以前，表现相关性
  • 对齐
  • 重复：重复使用相同的图形，线条颜色
  • 对比：不一样的就让它完全不一样。

版本管理

CVS–>SVN–>Git

用 Git 就好了，使用 Github Flow。

开源

收获

  • 朋友
  • 声望
  • 代码完善
  • 自省
  • 完善履历

VPS

自己搭建服务器也可以从中了解到整个网站的搭建。（不折腾会死星人）

  • 了解网站全貌
  • 部署自己的环境
  • 学习 Linux
  • 理解 HTTP
  • 关注服务器安全
  • 翻墙。。。

作品集（portfolio）

向其他人展示自己的才能

  • 老板
  • 潜在客户
  • 潜在雇主
  • 潜在朋友
  • 任何人
  • 自己

If you do it right, open sourcing code is great advertising for you and your company. 作品发布在 Github/dribbble，可以用 Github pages 显示。

突出 portfolio 的重点。

沟通

沟通是能力的一部分，针对目标听众，有方法，表达自己的想法

脚本语言

。。。

高效

消除重复的工作，考虑贡献，授权，优先级，精力管理。

最厉害的编程语言

…

高性能网站建设指南

2015-06-25 00:00:00 +0000

Steve Souders 《高性能网站建设指南》 读书笔记

这本书是 08年印刷的，因此有些理论可能已经不适应现在的 Web 前端开发了。当然书中主要的理论还是适用的。

本书适合 Web 架构师、信息架构师、Web 开发人员及产品经理阅读和参考。我也相信产品汪可以在这里学到很多有趣并且实用的技能的。

首先这是 O’Reilly Media, Inc 系列的书，该系列的书非常值得阅读。

后端：分析用户请求、执行数据查询并对结果进行组织，形成浏览器可以呈现的内容； 前端：负责将后端生成的内容通过网络发给客户端浏览器。

我们固有的印象是后端更复杂，以“后端开发”为荣，当有性能问题的时候也优先考虑后端上面的优化。而其实前端对网站性能的影响也是同样重大，我们需要正视前端的问题，并着手解决。

减少 HTTP 请求

最简单方式就是减少组件数量。

  • 图片地图（Image Maps），联合所有到一个单独图片。
  • CSS Sprites 同图片地图一样，把所有图片合并在一起。
  • 内联图片，就是把图片变成代码嵌入到 HTML 里面。
  • 合并脚本和样式表。

使用内容发布网络

  • 就是用 CDN 分摊流量。

优点：缩短响应时间，备份、扩展存储能力和进行缓存。 有助于缓和 Web 流量峰值压力。

缺点：响应时间可能受到其他网站影响。无法直接控制组件服务器所带的特殊麻烦。

添加 Expires 头

  • 简而言之是使用缓存减少 HTTP 请求数量。

压缩组件

压缩后传输的数据少了。

将样式表放在顶部

因为 DOM 绘制的时候，需要对应 CSS

将脚本放在底部

因为脚本是会阻碍页逐步显示的，阻塞页面的加载。

使用外部的 JavaScript 和 CSS

减少 DNS 请求

精简 JavaScript

避免重定向

移除重复脚本

使用 Ajax 可缓存

说话的艺术

2015-06-24 00:00:00 +0000

林语堂 《说话的艺术》 读书笔记

林语堂，大师，你懂的，介绍可以翻百度百科。

时间

时间很宝贵，时间即生命。“圣人不贵尺之璧而重寸之阴，时难得而易失也。”

诗人渥资华斯有句：尘世耗用我们的时间太多了，夙兴夜寐，赚钱挥霍，把我们的精力都浪费掉了。

历史之源

2015-06-16 00:00:00 +0000

[英国]约翰·H. 阿诺德 《历史之源》 读书笔记

历史永远不会真正地结束，历史是一个过程。

作者重申了他的观点：“历史是一个过程、一种论辩，是由关于过去的真实故事所构成的。

为何研究历史：

  • 乐趣
  • 将历史作为某种思考的工具
  • 以不同的方式思考自我，推断我们人类作为个体是如何“产生”的，也是为了认识到以不同方式行事的可能性

１　关于谋杀和历史的问题

纯洁派：一个好上帝，他创造了灵魂；一个坏上帝，他创造了一切有形之物。

历史是一个过程、一种论辩，是由关于过去的真实故事所构成的。

２　从海豚之尾到政治之塔

海伦没有被诱拐，一直滞留在埃及，荷马实际上知道这一点，却选择接受一个与之不同的虚构故事。

３　“事实是怎样的”：真相、档案和对旧事物的热爱

伏尔泰：让细节见鬼去吧！后人会把它们全都抛开。它们是侵蚀宏伟著作的一种寄生虫。

４　声音与沉默

资料自己会说话。资料不会“自己说话”，它也从来没有这样做过。它们代表别人说话，那些已经死去、永远消逝的人。

５　千里之行

人们出于与当下相关的原因，在与当下相关的环境中行事。但他们的所做所为激起了波浪，超出其自身并向外扩展，又与无数其他人所激起的波浪相互作用。在这些相互碰撞的波浪所构成的模式中，历史就在某处发生了。

６　杀猫；或，过去是异邦吗？

历史是为了什么。

７　说出真相

“但这也是真的：故事能够拯救我们。”

牛顿新传

2015-06-10 00:00:00 +0000

[英] 罗布·艾利夫 《牛顿新传》 读书笔记

Rob Iliffe 萨塞克斯大学学术史和科学史教授。《科学史》杂志编辑。曾发表过多篇有关早期现代诗和科学是的学术文章。他还是一个有关牛顿的国际项目的编辑总监，该项目致力于整理出牛顿所有著作的完整电子版本。

牛顿 – 百科全书式的“全才”。

一位英格兰物理学家、数学家、天文学家、自然哲学家和炼金术士。

他不仅发表了《自然哲学的数学原理》和《光学》等著作，总结了他的科学贡献，也留下了五十多万字的炼金术手稿和一百多万字的神学手稿这些非科学的东西。

1 一位爱国者

享年 84 岁。

丰特奈尔承认，牛顿所有的重大发明几乎都是他二十岁出头的那几年做出的。（我等为之汗颜）

凯恩斯对牛顿的评价：最后一位术士，最后一位巴比伦人和苏美尔人，最后一位伟大的智者：他的眼光与将近一万年前就开始构建我们文化遗产的那些人的眼光相同，他用这样的眼光来观察着这个可见的、理性的世界。

2 哲学式玩耍

牛顿自小就喜欢折腾，手工很好。他“天天跟工匠们待在一起”，“非常准确地掌握了风车的制作机理，然后自己制作了一个真正的、完美的风车模型”。（牛顿和小风车的故事一定是某位坑爹货杜撰的）他艺术方面很出色，素描作诗也不错。

少年牛顿能够娴熟地使用机械工具，加之具有素描与设计的专长，这对他后来拥有出色的实验技能帮助极大。

非常罕见的是，牛顿具有成为一位伟大自然哲学家的所有素质，诸如“深邃的洞察力”，“坚定不移、百折不挠的解决问题的精神”，“延伸其推论［与］演绎链的巨大思维力量”，“无与伦比的代数技能以及其他使用符号的方法”。（=。= 评价都这么高 真的好吗？）

牛顿和人打架，虽然不够人家健壮，但他斗志昂扬，打到对手求饶。

他年纪轻轻就回家放牛，母亲让他辍学。可是他从小热爱学习，为此还故意把放的牛弄丢？学习之勤奋以致校长免除其膳食费用。自小聪慧，奖学金随便拿，根本不可能会考试不及格。

3 神奇岁月

1665年初，牛顿基本上弄清了切线法与求积法是互逆的运算，也就是说，那时的牛顿已经掌握了微积分的基本定理。

牛顿会干的事情：用一根粗线压迫自己的眼球并使之变形。

4 挑剔的大众

舌战群儒。

5 真正的炼金术哲学家

牛顿先生的炼金理念，岂是我等能明白的？他站在巨人肩上，这是一封吐槽回信。

6 少数蒙选者之一

牛顿相信上帝选择了自己来发现基督教衰落的真相，并且坚信这项工作是他将从事的最最重要的工作。

7 神圣之书

返乡照顾母亲，顺便提出了第二运动定律，又顺便提出了第三运动定律。

《原理》最伟大之处是提出了万有引力，以实验作为数学定律的基础。

8 都市之中

。

9 万有之主

牛顿被认命为造币厂督办，有钱。他做这份工作做得相当好。然后出版了他的光学，继续与莱布尼兹作斗争。

10 马人与其他动物

1727年春，牛顿与世长辞。

Web

2015-06-09 00:00:00 +0000

摘自：https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md 有删改。

#前端开发面试题（题目列表+答案 完整版）

目录

  1. 前言
  2. HTML 部分
  3. CSS 部分
  4. JavaScript 部分
  5. 其他问题
  6. 优质网站推荐

前言

本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！

面试有几点需注意：(来源程劭非老师 github:@wintercn)

  1. 面试题目：根据你的等级和职位变化，入门级到专家级：广度↑、深度↑。

  2. 题目类型：技术视野、项目细节、理论知识，算法，开放性题，工作案例。

  3. 细节追问：可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。

  4. 回答问题再棒，面试官（可能是你面试职位的直接领导），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲）

  5. 资深的工程师能把 absolute 和 relative 弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能（靠谱）。

前端开发面试知识点大纲：

HTML&CSS：
    对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端

JavaScript：
    数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

其他：
   HTTP、WEB安全、正则、优化、重构、响应式、团队协作、可维护、SEO、UED、架构、职业生涯

作为一名前端工程师，无论工作年头长短都应该必须掌握的知识点：

此条由 王子墨 发表在 前端随笔

1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

2、DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。

3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。

4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。

5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。

6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型

7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们

8、浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题。

9、HTML与XHTML —— 二者有什么区别，你觉得应该使用哪一个并说出理由。

10、JSON —— 作用、用途、设计结构。

备注：

根据自己需要选择性阅读，面试题是对理论知识的总结，让自己学会应该如何表达。

资料答案不够正确和全面，欢迎补充答案、题目；最好是现在网上没有的。

格式不断修改更新中。

HTML

Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?

  • <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

  • 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

  • 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

  • DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

  • CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的 display 值，
    • 比如 div 默认 display 属性值为 “block”，成为“块级”元素；
    • span 默认 display 属性值为 “inline”，是“行内”元素。
  • 元素
    • 行内元素有：a b span img input select strong（强调的语气）
    • 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
    • 知名的空元素：br hr img input link meta
    • 鲜为人知的是：area base col command embed keygen param source track wbr

  • link属于XHTML标签，而@import是CSS提供的;

  • 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

  • import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;

  • link方式的样式的权重 高于@import的权重.

浏览器的内核分别是什么?

  • IE浏览器的内核 Trident、Mozilla 的 Gecko、Chrome 的 Blink（WebKit 的分支）、Opera 内核原为 Presto，现为 Blink；

常见兼容性问题？

  • png24 位的图片在 IE6 浏览器上出现背景，解决方案是做成 PNG8.

  • 浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的 * { margin: 0; padding: 0; } 来统一。

  • IE6 双边距 bug：块属性标签 float 后，又有横行的 margin 情况下，在 IE6 显示 margin 比设置的大。

  • 浮动 IE 产生的双倍距离 #box { float: left; width: 10px; margin: 0 0 0 100px; }

    • 这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 —— _display:inline; 将其转化为行内属性。(_这个符号只有 IE6 会识别)

  • 渐进识别的方式，从总体中逐渐排除局部。

    • 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
    • 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

    CSS：

      .bb {
      background-color:#f1ee18; /*所有识别*/
      .background-color:#00deff\9; /*IE6、7、8识别*/
      +background-color:#a200ff; /*IE6、7识别*/
      _background-color:#1e0bd1; /*IE6识别*/
  }
  • IE 下,可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox 下，只能使用 getAttribute() 获取自定义属性。
    • 解决方法：统一通过 getAttribute() 获取自定义属性。
  • IE下，even对象有 x，y 属性，但是没有 pageX，pageY 属性；Firefox下，event对象有pageX，pageY属性，但是没有x，y属性。
    • 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
  • Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示，
    • 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
  • 超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active 了
    • 解决方法是改变CSS属性的排列顺序：L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和

HTML5？

  • HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

  • 绘画 Canvas
    • 用于媒介回放的 video 和 audio 元素
    • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

    • sessionStorage 的数据在浏览器关闭后自动删除

    • 语意化更好的内容元素，比如 article、footer、header、nav、section
    • 表单控件，calendar、date、time、email、url、search
    • 新的技术webworker, websockt, Geolocation

  • 移除的元素

    • 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
    • 对可用性产生负面影响的元素：frame，frameset，noframes；
支持 HTML5 新标签：
  • IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

  • 当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

      <!--[if lt IE 9]>
      <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
  <![endif]-->

如何区分： DOCTYPE声明\新增的结构元素\功能元素

  • 语义化的理解？

    • 用正确的标签做正确的事情！
    • html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
    • 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
    • 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
    • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

  • HTML5的离线储存？

    • localStorage 长期存储数据，浏览器关闭后数据不丢失；
    • sessionStorage 数据在浏览器关闭后自动删除。

(写)描述一段语义的 html 代码吧。

（HTML5 中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）就是基于语义化设计原则）

<div id="header">
    <h1>标题< /h1>
    <h2>专注Web前端技术< /h2>
</div>

iframe 有那些缺点？

  • iframe 会阻塞主页面的 Onload 事件；

  • iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。

HTML5 的 form 如何关闭自动完成功能？

  • 给不想要提示的 form 或下某个input 设置为 autocomplete=off。

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie 在浏览器和服务器间来回传递。 sessionStorage 和 localStorage 不会
sessionStorage 和 localStorage 的存储空间更大；
sessionStorage 和 localStorage 有更多丰富易用的接口；
sessionStorage 和 localStorage 各自独立的存储空间；

如何实现浏览器内多个标签页之间的通信? (阿里)

调用 localstorge、cookies 等本地存储方式

PS：浏览器在发送 post，get 请求的时候会带有 cookie，所以 cookie 不宜过大。

webSocket 如何兼容低浏览器？(阿里)

  • Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR

CSS

介绍一下CSS的盒子模型？

  • （1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的 content 部分包含了 border 和 pading；

  • （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)。

    • W3C 标准盒模型，width 不包括 padding 与其之外的。
    • IE 盒模型包含至 border。

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

* 1. id选择器（ # myid） 2. 类选择器（.myclassname） 3. 标签选择器（div, h1, p） 4. 相邻选择器（h1 + p） 5. 子选择器（ul < li） 6. 后代选择器（li a） 7. 通配符选择器（ * ） 8. 属性选择器（a[rel = “external”]） 9. 伪类选择器（a: hover, li: nth - child）

  • 可继承的样式： font-size font-family color, UL LI DL DD DT;

  • 不可继承的样式：border padding margin width height ;

  • 优先级就近原则，同权重情况下样式定义最近者为准;

  • 载入样式以最后载入的定位为准;

    优先级为: !important > 内联 > id > class > tag

    CSS3 新增伪类举例：

      p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
  p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
  p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
  p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
  p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
  :enabled  :disabled 控制表单控件的禁用状态。
  :checked        单选框或复选框被选中。

如何居中div？如何居中一个浮动元素？

  • 给div设置一个宽度，然后添加 margin:0 auto; 属性

    div{ width: 200px; margin: 0 auto; }

  • 居中一个浮动元素

     确定容器的宽高 宽500 高 300 的层
 设置层的外边距

 .div {
     width: 500px;
     height: 300px; //高度可以不设
     margin: -150px 0 0 -250px;
     position: relative;相对定位
     background-color: pink; //方便看效果
     left: 50%;
     top: 50%;
 }

列出 display 的值，说明他们的作用。position 的值， relative 和 absolute 定位原点是？

1.
    block 象块类型元素一样显示。
    none 缺省值。象行内元素类型一样显示。
    inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
    list-item 象块类型元素一样显示，并添加样式列表标记。

2.
    * absolute
    生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

    * fixed （老IE不支持）
    生成绝对定位的元素，相对于浏览器窗口进行定位。

    * relative
    生成相对定位的元素，相对于其正常位置进行定位。

    * static  默认值。没有定位，元素出现在正常的流中
    *（忽略 top, bottom, left, right z-index 声明）。

    * inherit 规定从父元素继承 position 属性的值。

CSS3有哪些新特性？

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg); //旋转,缩放,定位,倾斜
增加了更多的CSS选择器  多背景 rgba

一个满屏 品 字布局 如何设计?

经常遇到的CSS的兼容性有哪些？原因，解决方法是什么？

为什么要初始化CSS样式。

  • 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

  • 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

  • 最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）

  • 淘宝的样式初始化：

      body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
  body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
  h1, h2, h3, h4, h5, h6{ font-size:100%; }
  address, cite, dfn, em, var { font-style:normal; }
  code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
  small{ font-size:12px; }
  ul, ol { list-style:none; }
  a { text-decoration:none; }
  a:hover { text-decoration:underline; }
  sup { vertical-align:text-top; }
  sub{ vertical-align:text-bottom; }
  legend { color:#000; }
  fieldset, img { border:0; }
  button, input, select, textarea { font-size:100%; }
  table { border-collapse:collapse; border-spacing:0; }

absolute 的 containing block 计算方式跟正常流有什么不同？

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

对BFC规范的理解？

（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。）

解释下浮动和它的工作原理？清除浮动的技巧

用过媒体查询，针对移动端的布局吗？

使用 CSS 预处理器吗？喜欢那个？

SASS

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是60Hz，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60＊1000ms ＝ 16.7ms

display:inline-block 什么时候会显示间隙？(携程)

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

CSS animation 与 CSS transition 有何区别

animation 功能与 transition 都能通过改变 css 的属性值来实现动画效果，他们的不同之处是：transition 只能指定属性的开始值和结束值来达到渐变，不能像 animation 那样定义关键帧来实现比较复杂的动画效果。

transition 从 :hover 延伸出来
animation 从 flash 延伸出来

transition 关注的是 CSS property 的变化，property 值和时间的关系是一个三次贝塞尔曲线。
animation 作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果。

JavaScript

JavaScript原型，原型链 ? 有什么特点？

eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行；
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

null，undefined 的区别？

写一个通用的事件侦听器函数。

// event(事件)工具集，来源：github.com/markyun
markyun.Event = {
	// 页面加载完成后
	readyEvent : function(fn) {
		if (fn==null) {
			fn=document;
		}
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = fn;
		} else {
			window.onload = function() {
				oldonload();
				fn();
			};
		}
	},
	// 视能力分别使用dom0||dom2||IE方式 来绑定事件
	// 参数： 操作的元素,事件名称 ,事件处理程序
	addEvent : function(element, type, handler) {
		if (element.addEventListener) {
			//事件类型、需要执行的函数、是否捕捉
			element.addEventListener(type, handler, false);
		} else if (element.attachEvent) {
			element.attachEvent('on' + type, function() {
				handler.call(element);
			});
		} else {
			element['on' + type] = handler;
		}
	},
	// 移除事件
	removeEvent : function(element, type, handler) {
		if (element.removeEventListener) {
			element.removeEventListener(type, handler, false);
		} else if (element.datachEvent) {
			element.detachEvent('on' + type, handler);
		} else {
			element['on' + type] = null;
		}
	},
	// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
	stopPropagation : function(ev) {
		if (ev.stopPropagation) {
			ev.stopPropagation();
		} else {
			ev.cancelBubble = true;
		}
	},
	// 取消事件的默认行为
	preventDefault : function(event) {
		if (event.preventDefault) {
			event.preventDefault();
		} else {
			event.returnValue = false;
		}
	},
	// 获取事件目标
	getTarget : function(event) {
		return event.target || event.srcElement;
	},
	// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
	getEvent : function(e) {
		var ev = e || window.event;
		if (!ev) {
			var c = this.getEvent.caller;
			while (c) {
				ev = c.arguments[0];
				if (ev && Event == ev.constructor) {
					break;
				}
				c = c.caller;
			}
		}
		return ev;
	}
};

Node.js 的适用场景？

高并发、聊天、实时消息推送

介绍js的基本数据类型。

number,string,boolean,object,undefined

Javascript如何实现继承？

通过原型和构造器

[“1”, “2”, “3”].map(parseInt) 答案是多少？

[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix)，其中 radix 表示解析时用的基数。map 传了 3 个 (element, index, array)，对应的 radix 不合法导致解析失败。

如何创建一个对象? （画出此对象的内存图）

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.sing = function() { alert(this.name) }
}

谈谈This对象的理解。

this 是 js 的一个关键字，随着函数使用场合不同，this的值会发生变化。

但是有一个总原则，那就是 this 指的是调用函数的那个对象。

this 一般情况下：是全局对象 Global。 作为方法调用，那么 this 就是指这个对象

事件是？IE 与火狐的事件机制有什么区别？ 如何阻止冒泡？

1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
2. 事件处理机制：IE是事件冒泡、火狐是 事件捕获；
3. ev.stopPropagation();

什么是闭包（closure），为什么要用它？

执行 say667() 后，say667() 闭包内部变量会存在，而闭包内部函数的内部变量不会存在。使得 Javascript 的垃圾回收机制 GC 不会收回 say667() 所占用的资源，因为 say667() 的内部函数的执行需要依赖 say667() 中的变量。这是对闭包作用的非常直白的描述.

function say667() {
	// Local variable that ends up within closure
	var num = 666;
	var sayAlert = function() { alert(num); }
	num++;
	return sayAlert;
}

var sayAlert = say667();
sayAlert()//执行结果应该弹出的667

  • “use strict”;是什么意思 ? 使用它的好处和坏处分别是什么？

  • 如何判断一个对象是否属于某个类？

       使用instanceof （待完善）

    if(a instanceof Person){
        alert('yes');
    }

  • new操作符具体干了什么呢?

          1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
      2、属性和方法被加入到 this 引用的对象中。
      3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

 var obj  = {};
 obj.__proto__ = Base.prototype;
 Base.call(obj);

  • Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

     hasOwnProperty

  • JSON 的了解？

     JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
 它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
 {"age":"12", "name":"back"}

  • js延迟加载的方式有哪些？

     defer和async、动态创建DOM方式（用得最多）、按需异步载入js

  • ajax 是什么?

  • 同步和异步的区别?

  • 如何解决跨域问题?

     jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

  • 模块化怎么做？

    立即执行函数,不暴露私有成员

         var module1 = (function(){
         var _count = 0;
         var m1 = function(){
         　　//...
         };
         var m2 = function(){
         　　//...
         };
         return {
         　　m1 : m1,
         　　m2 : m2
         };
     　　})();

  • AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

  • 异步加载的方式有哪些？

       (1) defer，只支持IE

   (2) async：

   (3) 创建script，插入到DOM中，加载完毕后callBack

  • documen.write和 innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

  • .call() 和 .apply() 的区别？

       例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);

   注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。

     function add(a,b)
     {
         alert(a+b);
     }

     function sub(a,b)
     {
         alert(a-b);
     }

     add.call(sub,3,1);

  • Jquery与jQuery UI 有啥区别？

     *jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

 *jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
  提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

  • JQuery的源码看过吗？能不能简单说一下它的实现原理？

  • jquery 中如何将数组转化为json字符串，然后再转化回来？

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：

	$.fn.stringifyArray = function(array) {
		return JSON.stringify(array)
	}

	$.fn.parseArray = function(array) {
		return JSON.parse(array)
	}

	然后调用：
	$("").stringifyArray(array)

  • 针对 jQuery 的优化方法？

     *基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。

 *频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。
  比如：var str=$("a").attr("href");

 *for (var i = size; i < arr.length; i++) {}
  for 循环每一次循环都查找了数组 (arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：
  for (var i = size, length = arr.length; i < length; i++) {}

  • JavaScript中的作用域与变量声明提升？

  • 如何编写高性能的Javascript？

  • 那些操作会造成内存泄漏？

     内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

 setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

  • JQuery一个对象可以同时绑定多个事件，这是如何实现的？

  • 如何判断当前脚本运行在浏览器还是node环境中？（阿里）

      通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中

  • BOM 和 DOM 的区别

      浏览器支持浏览器对象模型（BOM），允许对浏览器窗体的访问和操作。使用BOM，开发者可以移动窗体，改变状态栏中的文字，以及实现其他与页面内容不直接相关的操作。

  BOM
  1. BOM是Browser Object Model的缩写， 即浏览器对象模型。
  2. BOM没有相关标准。
  3. BOM的最根本对象是window。

  DOM

  1. DOM是Document Object Model的缩写， 即文档对象模型。
  2. DOM是W3C的标准。
  3. DOM最根本对象是document（ 实际上是window.document）。

  BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

      弹出新的浏览器窗口
      移动、关闭浏览器窗口以及调整窗口大小
      提供 Web 浏览器详细信息的定位对象
      提供用户屏幕分辨率详细信息的屏幕对象
      对 cookie 的支持
      IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

  window对象对应着浏览器窗口本身，这个对象的属性和方法通常被称为BOM

其他问题

  • 你遇到过比较难的技术问题是？你是如何解决的？

  • 常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

  • 页面重构怎么操作？

  • 列举IE 与其他浏览器不一样的特性？

  • 99%的网站都需要被重构是那本书上写的？

  • 什么叫优雅降级和渐进增强？

  • WEB应用从服务器主动推送Data到客户端有那些方式？

  • 对Node的优点和缺点提出了自己的看法？

      *（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
    因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
    此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
    因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

  *（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
    而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

  • 你有哪些性能优化的方法？

       （看雅虎14条性能优化原则）。

    （1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

    （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

    （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

    （4） 当需要设置的样式很多时设置className而不是直接操作style。

    （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

    （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

    （7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。

    （8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

  • http状态码有那些？分别代表是什么意思？

      100-199 用于指定客户端应相应的某些动作。
  200-299 用于表示请求成功。
  300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
  400-499 用于指出客户端的错误。400  1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403  服务器已经理解请求，但是拒绝执行它。
  500-599 用于支持服务器错误。 503 – 服务不可用

  • 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

          查找浏览器缓存
      DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
      进行HTTP协议会话
      客户端发送报头(请求报头)
      服务器回馈报头(响应报头)
      html文档开始下载
      文档树建立，根据标记请求所需指定MIME类型的文件
      文件显示
      [
      浏览器这边做的工作大致分为以下几步：

      加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。

      解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）
      }

  • 除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？

  • 你常用的开发工具是什么，为什么？

  • 对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

           前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
      1、实现界面交互
      2、提升用户体验
      3、有了Node.js，前端可以实现服务端的一些事情


  前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，

   参与项目，快速高质量完成实现效果图，精确到1px；

   与团队成员，UI设计，产品经理的沟通；

   做好的页面结构，页面重构和用户体验；

   处理hack，兼容、写出优美的代码格式；

   针对服务器的优化、拥抱最新前端技术。

  • 加班的看法？

      加班就像借钱，原则应当是------救急不救穷

  • 平时如何管理你的项目？

              先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；

          编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

          标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

          页面进行标注（例如 页面 模块 开始和结束）；

          CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；

          JS 分文件夹存放 命名以该JS功能为准的英文翻译。

          图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

  • 如何设计突发大规模并发架构？

  • 说说最近最流行的一些东西吧？常去哪些网站？

          Node.js、Mongodb、npm、MVVM、MEAN、three.js

  • 移动端（Android IOS）怎么做好用户体验?

          清晰的视觉纵线、信息的分组、极致的减法、
      利用选择代替输入、标签及文字的排布方式、
      依靠明文确认密码、合理的键盘利用、

  • 你在现在的团队处于什么样的角色，起到了什么明显的作用？

  • 你认为怎样才是全端工程师（Full Stack developer）？

  • 介绍一个你最得意的作品吧？

  • 你的优点是什么？缺点是什么？

  • 如何管理前端团队?

  • 最近在学什么？能谈谈你未来3，5年给自己的规划吗？

  • 想问公司的问题？

          问公司问题：
      目前关注哪些最新的Web前端技术（未来的发展方向）？
      前端团队如何工作的（实现一个产品的流程）？
      公司的薪资结构是什么样子的？

优质网站推荐

  1. 极客标签： http://www.gbtags.com/

  2. 码农周刊： http://weekly.manong.io/issues/

  3. 前端周刊： http://www.feweekly.com/issues

  4. 极客头条： http://geek.csdn.net/

  5. Startup News：http://news.dbanotes.net/

  6. Hacker News： https://news.ycombinator.com/news

  7. InfoQ： http://www.infoq.com/

  8. w3cplus： http://www.w3cplus.com/

  9. Stack Overflow： http://stackoverflow.com/

  10. Atp： http://atp-posts.b0.upaiyun.com/posts/

THE WILLPOWER INSTINCT

2015-06-03 00:00:00 +0000

[美] 凯利·麦格尼格尔 《自控力》 读书笔记

自控力是对一个人来说非常重要的能力。自控力，一个人对自己自身冲动，感情，欲望的自我控制能力。自控力是一个人成熟度的体现，没有自控力就难以有良好的习惯。

《自控力》这本书是斯坦福大学一门叫做“意志力科学”课程的基础，作者凯利•麦格尼格尔是一位著名的健康心理学家，也是医学健康促进项目的健康教育家，她的工作就是帮助人们管理压力，并在生活中做积极的改变。

意志力入门

你必须知道自己为啥失败，我要做，我不要，我想要。 自控只是一时的行为，而力不从心与失控却是常态。提高自控力的最有效途径在于，弄清自己如何失控，为何失控。自知之明。

我要做，我不要，我想要

牢记自己真正想要什么。意志力是一种抑制冲动的能力。能够更好地控制自己的注意力，情绪和行为的人，能更幸福。脑袋里有两个自我，一个任意妄为、及时享乐，另一个克服冲动、深谋远虑。要专注，杜绝因为心理想其他而冲动选择。尽早发现冲动的苗头，意识到自己在做什么，阻止自己。

训练大脑增强自控力，比如说冥想。冥想让更多的血液流进前额皮质。冥想的时候不要太分心，不要忘了最初的目标。（5分钟冥想，把注意力集中在呼吸上）

意志力的本能

人生来就能抵制奶酪蛋糕的诱惑。即使你全身上下都在说我想要，你也要说出“我不想”。因为你不可能真的消灭一个欲望，因为欲望在你的内心和身体里，没有办法自动消失。三思而后行。

任何给你的身心带来压力的东西都会影响自控力的生理基础，甚至摧毁你的意志力。

减压方法：锻炼、良好睡眠、健康饮食、和朋友共度良好时光等。

压力和自控的生理学基础是互相排斥的。

累到无力抵抗

自控力是有极限的，每次使用都会消耗，并且自控是很消耗能量的。疲惫不是一种身体反应，而是一种感觉，一种情绪。

我们不能控制所有事，提高意志力的唯一方法就是提升我们的极限，像肌肉一样。

容忍罪恶

当罪恶看起来像美德。对补偿的渴望常常使我们堕落，因为我们很容易认为，纵容自己就是对美德最好的奖励。这是向诱惑屈服。

减肥锻炼可以多吃吗？当然不可以。

道德许可是一种身份危害。通过付钱把责任推给别人，逃避。

大脑的弥天大谎

奖励的承诺

那又如何

情绪低落使人屈服于诱惑

出售未来

及时享乐

传染

社会与群体

别读这章

我不要的局限性。

参与感

2015-05-27 00:00:00 +0000

黎万强 《参与感》阅读笔记

《参与感：小米口碑营销内部手册》这本书是黎万强在小米四年的工作笔记，也是十年前雷总布置给他的作业。 小米品牌快速崛起的背后是因为社会化媒体下的口碑传播，而小米口碑的核心关键词是“参与感”。

小米是用什么方法让口碑在社会化媒体上快速引爆？

参与感，参与感，参与感。重要的事情说三遍。

黎万强，小米科技联合创始人。 小米网负责人，负责小米的市场营销、电商和服务。原金山词霸总经理，曾任金山软件设计中心设计总监，建立了国内最早的软件用户体验设计团队。互联网新营销旗手，参与感、手机控、F码、米粉节等互联网热词的创造者。曾被《财富》评为“中国40岁以下的商界精英”，获得《第一财经周刊》评选的“2013中国商业创新50人”，获得光华龙腾奖2013年第九届“中国设计十大杰出青年”。

–摘自百度百科。

  • 互联网思维就是口碑为王
  • 团队第一
  • 忠诚度大于知名度
  • 做自媒体
  • 人比制度重要
  • 一图胜千言

参与感

参与感就是讲做一个产品，让人参与进来，与产品一起成长，产品服务于人。

雷军在创建小米之前已经有人有钱有声望，创建小米，纯粹就是因为梦想。所以热爱是最好的老师。小米发布的时候没有做任何营销活动，因为 MIUI 通过一年的时间积累了 50W 用户。

参与感的三三法则： 战略：

  • 做爆品
  • 做粉丝
  • 做自媒体

三个战术为：

  • 开放参与节点
  • 设计互动方式
  • 扩散口碑事件

ps：黎万强曾一年两次要离职，雷军就约他喝酒，两瓶白酒喝趴下了，他回家内疚就不提离职了。

雷军曾说过的三个创业成功的关键：

  • 选个大市场
  • 组件最优秀的团队
  • 拿到花不完的钱

小米因为专注于口碑，每周快速迭代，全员客服。专注，极致，口碑，快。

  • 发动机：产品
  • 加速器：社会化媒体
  • 关系链：用户关系

产品

和用户做朋友。从功能式->品牌式->体验式->参与式。用户模式大于一切工程师吗。

用户体验是：好用好看。为谁而设计

极致就是把自己逼疯。

最重要的是团队，其次才是产品，马云成功的关键也是他的18个联合创始人。一个靠谱的工程师顶10个，可能是100个。

品牌

产品思维，潜入大脑。用户对品牌的真实感很在意，请讲真话。把产品的美誉做到用户的心里去。因为米粉，所以小米。

小米：为发烧而生，谷歌：整合全球信息，使人人皆可访问并从中受益，阿里巴巴：让天下没有难做的生意。纯粹，just do it。

好产品是1，包装、海报、营销、推广都是后面的0。

新媒体

让自己的公司成为自媒体。先做服务，再做营销。内容品质最重要讲人话。小米的媒体运营是让员工成为粉丝，尝试让粉丝成为员工。

微博，QQ 空间都是值得用来推广的地方，微信公众号更关键。

小米的工程师有硬性泡小米论坛的义务。

服务

人比制度重要，让客服对企业有归属感，热爱这份工作。小米的商业模式是做好服务收消费，所以必须把服务做好。小米之家做得像家一样的感觉。小米有极速配送，1小时快修敢赔。发货要够快，资讯响应要够快，售后维修要够快，核心：快。

提高工作效率，人是环境的孩子。

设计

直接，切中要害。设计要有期待感。

简单直接，可感知的情怀。

一看二问三 PK。好设计是由内向外都会包装自己。

设计三板斧：

  • 坚持战略
  • 死磕到底
  • 解放团队

有玩者之心。

啊黎笔记

第一现场的参与感，科技要有慰藉人心的力量，像艺术家创作般热爱

史玉柱自述 读书笔记

2015-05-20 00:00:00 +0000

优米网 《史玉柱自述》阅读笔记

史玉柱自述

1. 营销：

脑白金10年广告 你要卖给谁？ 像脑白金，它要卖给老人家的子女。通过送礼，通过脍炙人口的语言，积累，反复记忆，定位：推销产品。

脑白金十差广告之首，因为很烦。脑白金用卡通人物只是因为很多奇怪的限制。 播一年的广告，有计划，比如说两天播一次或者针对购买旺季播放

2. 做最有效的广告

使用什么广告媒体，降低广告成本，铺天盖地的广告，猪圈上都有，各种放小广告。 广告的概念：送礼，改善睡眠。摸索出营销策略，改广告。跟消费者谈心。

3. 企业管理

同一个时间只做好一件事，好游戏也是改出来的。

网游：

  • 让玩家有荣誉感
  • 有钱人为好友花钱
  • 男人为女人花钱

研究消费者的心理，靠口碑宣传，大家都在玩。 去检验书里面的理论，去了解，然后去做。靠心血浇灌成功。

4. 如何做好产品

决策失误的代价，该做什么不该做什么。 巨人大厦的失败

5. 对网游的体会

最重要的是游戏性，玩家需求—— 荣耀。目标，互动，惊喜。 不搞促销降价。

6. 经验与教训

中国的民族性，导致创业初期股权一定不能分散。 不要做超出自己能力的事，没有把握的事不要做。 高负债对公司来说有很大的危险，企业法人会因此发生金融欺诈。 你的老师是消费者。 收入与自我价值的实现。 营销的基础是好产品。

7. 逆境成长

失败总结的经验是真实的。

8. 在中国成长

做自己喜欢的事，只认功劳。 失败有各种可能。

9. 创新与市场竞争

创新是以企业为基础，从实际出发。 市场与竞争从消费者的需求出发。 市场的竞争是人才的竞争。 把一个产品的好处发挥出来，专注于此。做自己了解的事。

10. 人生

人生无常，有得有失。