Tsrot Space

锋阅网杂志APP产品体验分析

2018-10-20T05:05:46.000Z

我是一个阅读爱好者，在高中时代，读者、意林、青年文摘基本上每期都买。里面的每篇文章都选取的还不错，让人深受启发或感动。所以第一眼看到这类APP我是充满兴趣的，我是带着情怀去体验的。

市场与需求分析

1、产品的用户群体是哪些？

根据APP的推荐文章和杂志阅读排行榜来看，APP的用户应该还是偏年轻，所以我认为APP的目标用户应该是24岁以下的学生群体或一些自由作家等，主要偏高中生、初中生等。他们有一些课外时间，比较有兴趣去阅读这些简短的文章。在繁重的学习作业之外，这可能是他们唯一的释放学习压力的课外读物。

因为没有做问卷调查和用户访谈，没法精准的做一些用户画像分析。我用了一些互联网用户分析工具。下面是易观万象的一些统计截图。

根据分析工具，我们发现：这部分目标用户大部分为女性，消费水平偏中下水平，使用的手机主要还是中低档手机，人群分布主要在长三角、珠三角等沿海发达城市。

2、产品的用户需求是什么？

根据每个人的所处环境和生活习惯不同，读文章和看书籍的品味也是不一样的。一般来说，读者，意林等杂志类的书刊，是有一些共同性的，也就有类似的用户需求：

（1）从内容上得到一些启发。读者一类的书刊，文章都是短篇的，具有较为完整的寓意和结构，一般结尾都是有情感的抒发和道理的论述。我们读一读，有的时候会有一些思维上的启发，这是比较重要的。

（2）打发时间。虽然这样说起来有一些唐突，但实际上，因为都是短篇的小文章，更适合于短时间内品读。比如等车的时候，外出乘车的时候，阶段性的时间内可以打发一下时间，这类书刊主要针对的就是这些情况。

（3）写作素材，这些杂志里的文章都还选取的不错，对于一些中学生来说，可以得到一些不错的写作素材。

（4）文化的传播，这类书刊一般价格较低，更能被大众接受。有些文章是可以从其他书刊上转载来的，也相对精华。由于传播范围较广，也能使一些精华的文章被更多人品读，这也是在一定程度上，对于优秀文化的传播，起到了推动作用。

上面介绍的是纸质书就可以解决的用户需求，为什么要用APP去看这些杂志书籍呢？

（1）在APP里看杂志方便，只要打开手机就能看，不受时间、空间的限制。可以充分利用碎片时间，无论是乘车、课间、饭后、还是睡前都可以看。

（2）在APP里看杂志省钱，一本杂志大概是七八块钱左右，一个月按两期算，订两三种，一个月大概要几十块钱左右。而在APP里可能也就十几块钱。

（3）在APP里内容更加丰富，我可以看同类型的所有杂志，我也可以快速找到我想看的文章。

（4）在APP里更加方便的收藏好的文章、好的句子，更加方便的去做一些笔记。

###3、用户需求的市场量有多大？

行业概述：2017年中国移动阅读市场规模稳步上升达132.2亿，同比增长32.1%，增长率相比去年有所降低。2017年中国移动阅读行业用户规模达到3.4亿，同比增长13.2%，增长率较之去年有明显下降。

发展现状：移动阅读行业正版化得到极大的发展，各大内容平台的优势逐渐凸显，整个市场竞争格局趋于稳定。其中阅文集团、掌阅科技、咪咕数媒、阿里文学以超过7%的APP月度覆盖人数占比稳坐第一梯队。

发展趋势：移动阅读APP不断正版化，用户付费习惯逐渐养成且持续提升。影视二次元游戏全IP化，共享版权模式出现。

轻阅读领域类似产品情况如下：

这些APP2018年2月月活量分别是一个148万、知乎日报158万、每天读点故事63万、诗歌本42万。在轻阅读领域已经算非常不错了，毕竟这个需求不是像即时通讯那么大众。

根据百度和其官网等一些渠道可得知：读者月发行量大约在800万左右，意林月发行量大约在200万左右。如果能将这些纸质上的用户完全转化为产品用户，那其实也是一个比较可观的用户量。

意林2010年6月，数字出版部成立。

读者2011年首款苹果App上线，当年客户端下载量即突破300万。

随着移动互联网的崛起，传统杂志社逐渐面临转型，杂志类移动数字阅读变得越来越重要。

4、这个市场是否存在竞争对手，对手的情况如何？

（1）移动数字阅读 VS 传统纸质阅读

现如今，对于读者、意林等杂志用户数量传统纸质阅读应该还是占据主导，但随着出版社和用户观念的逐渐转变，相信移动数字阅读会逐渐展现优势。

传统纸质阅读代表：线下书店。

（2）杂志数字出版物 VS 网络文学出版物

杂志数字出版物和网络文学出版物，在用户层次上将会有大部分重合，所以它们可能存在竞争关系。但在需求层次上，它们将是两个不同的需求，杂志数字出版物面对的需求可能更多的是学习、心灵启发等；网络文学出版物更多是快餐式文化，解决的是用户精神娱乐层面的需求。

网络文学出版物代表：咪咕、阅文集团、掌阅等。

（3）杂志数字出版物 VS 其他数字出版物

杂志数字出版物与其他数字出版物，在用户层次上有部分重合，杂志数字出版物偏向于24岁以下的学生群体，他们学习压力较重，没有足够多的时间去阅读内容较长的文学作品，他们更多的精力是会花在课内学习中；而其他数字出版物偏向于毕业之后的上班白领阶级，他们有较好的收入，有积极提升自己的意向。

其他数字出版物代表：一些职业提升书籍、世界名著等。

产品分析

下面的产品分析没有说明的部分，都以小读APP为例。

1、产品定位分析

定位：成功人士的随身轻阅读应用

slogan：小读怡情

主要亮点：

1、每日小文推送，小读怡神旷心

告别碎片阅读，告别长篇大论，小读，带给你不一样的阅读体验

2、千册杂志更新，小读增雅添趣

海量杂志，随时阅读，“小读”会员，畅读百余种国内主流杂志，轻松掌握各类讯息。
杂志内容完整，排版精良，阅读体验媲美纸版杂志
高质量的文章与图片,负责任的内容。
您将无需再奔波于路边报刊亭,或翻阅厚重的纸刊，轻松下载既可享受时尚的阅读新体。

3、查找便捷

可以搜索你想看的杂志和内容

上面都是小读APP里介绍的，经过几天的体验和一些用户分析，说说我的感受。

产品是内容定位是杂志类内容阅读，用户群体大部分是从纸质阅读迁移过来的。所以产品的用户群体应该只是纸质用户的一个子集。从产品的用户数据来看这部分用户大部分是24岁以下的年轻用户。APP里排名前三的杂志分别是：读者、故事会、意林。这些杂志的用户群体应该都是偏年轻的，而不是偏商业的。而且推荐文章也基本上是偏娱乐、文艺的，而不是偏商业的。所以用户定位为成功人士我感觉是矛盾的。

“告别碎片阅读，告别长篇大论”，并没有突出重点。我认为应该突出“精选阅读，推荐优质文章，告别信息繁多，无效阅读”。

2、产品功能分析

（1）产品功能结构分析

产品分为5大板块：小文、小书、全站畅读、书架、我的。

小文：每日推送文章，用户可以签到，可以阅读自己喜欢的文章，也可以搜索自己喜欢的文章，但是查找功能有点弱，只能按标题名或杂志书名查找，其实可以给文章分类加标签等，用户搜索的时候可以查找的范围包括标题、书名、标签等，这样查找出的内容可能更符合用户思维。

进入文章页面，可以阅读文章，可以调整自己的阅读风格，阅读完文章，系统将推荐两篇相关文章，当然也可以为该文章点赞，可以评论文章等。

小书：这个版块，用户一进入就可以看到书籍分类菜单，左上角也可以查看分类信息，用户可以直接了当的进入自己喜欢的类目。如果用户比较盲目，不知道看哪些书，那么系统将会给一些推荐，如排行榜、免费专区、编辑推荐、新书上架等。如果用户一进入页面目标就很明确，那么用户也可以用右上角的搜索书籍功能。

选择好自己想要阅读的书名后，用户可以查看该书的所有期数，可以选择查看哪期，然后进入当前期杂志页面，在该页面你可以查看到这本杂志的一些介绍，阅读、下载、关注该杂志。系统也将会为用户推荐看过此杂志的人还看过哪些杂志。这个阅读书籍的路径有点长，对于用户来说，是比较烦的一个过程，每次阅读一本杂志都要经过这么长的一个路径，应该尽量缩短阅读路径。在小书界面，查找或选中那本杂志之后，直接进入该杂志最新一期的杂志介绍页面，至于往期杂志的入口也可以放在这个地方。对于用户来说，尤其是经常使用的用户，他往往想看的就是最新一期的杂志。在产品设计理念里，用户路径最好控制在三层以内。

全站畅读：这个版块做的其实比较简单，就是一个付费订阅页面，而且放在一个最显著的位置。我感觉是有点不妥的。整个APP到处都放着VIP订阅入口，感觉还是以传统的思维在做互联网产品，这似乎时刻在告诉用户：“你再不付费，我就不给你看了”。其实放在这也不是不可以，可以参考喜马拉雅APP的VIP页面，作为一个产品，你得要有足够的吸引力，才能促使用户付费，不是说我一直在你耳边念叨着“赶紧付费，赶紧付费，赶紧付费 ….. ”，用户就会付费订阅，这样只会引起用户的反感。

书架：在书架版块你可以查看到你最近阅读的是哪本书，你的书架里有哪些书。你可以整理你的书架，把一些不看的书籍删掉。如果你的书籍很多，你可以用右上角的搜索去搜索你想看的书，当然这里的书是指你书架里的书。有个不好的体验，这里书籍的排列顺序是按照你加入的时间，之后的顺序就不能再变化了，因为并不能对书籍排序。整理书籍和查找书籍，我猜想可能正是为了解决这个问题吧。

点击最近阅读进入的是该书的目录页面，并没有回到你上次阅读的起点，也没有书签功能。点击下面的书籍进入的是该书籍集合页面，选择哪期后才能进入该书的目录。这个阅读路径还是比较长，虽然文章很短，但有时也不知道自己读到了哪里，没有书签真的是会比较麻烦，至少也要告诉用户哪些是已经阅读过的。

我的：在“我的”版块，用户可以看到自己的一些个人账户信息、关注收藏信息，还有一些设置项。这个版块有个不好的地方是，直接把用户的手机号作为用户名了，虽然这个地方可以修改，但有些不注重个人信息隐私的人，将很容易泄露自己的电话号码。

（2）产品UI与交互分析

产品的整体UI看来，感觉还是比较陈旧。

“小文”这个模块有点像资讯类APP，感觉内容过多，页面过于凌乱，在这个信息爆炸的时代，你越能击中用户的需求点，就越能获取用户的喜爱。精准的推荐和简洁的界面是产品比较欠缺的。

里面文章的阅读风格还是偏资讯类的风格，并没有突出自己的特点。很多用户可能都是从纸质阅读迁移过来的，他们更希望能体验到纸质阅读那种畅快。作为一页到底的去展示一篇文章，而不是书籍翻页去展示，我感觉是比较好的。评论模块，我感觉是体验比较差的，虽然需要评论，但可以隐藏一点，我有自己的感想，我有自己的认知，我不想受别人影响，可能也不想和别人分享。毕竟杂志类文章，不是时事评论，不是新闻资讯，里面的文章基本上是观点类文章。

书籍阅读界面不太统一。有的像资讯文章界面，有的是PDF扫描版。我觉得需要统一，尽可能保持一致的体验。

支付宝支付接口经常支付失败。

（3）用户评价

从用户评价反馈来看，还是有挺多待优化的地方，丰富的内容是APP最大的优势。

优点：内容丰富、更新比较快。

缺点：交互体验差、不太稳定，时常黑屏闪退。

3、产品运营数据分析

毕竟是一款比较小众的APP，网上可以查询到数据太少了，只做了一个大概的下载量和月活数的推测。其他的用户人群分析、访问时长与时段、访问终端等数据还是比较难推测。

我从锋阅网APP中选取了用户量最大的三个APP，作为此次运营分析的重点。以下数据来源根据艾瑞数据、易观千帆、七麦数据、APP Annie等数据源推测而来，数据为Android和iOS的总和。

	读者	意林	小读
下载量	约162万	约67万	约25万
月活	约3万	小于1万	小于1万

简单介绍一下我的数据推算过程

下载量：下面是七麦数据关于读者杂志APP的下载量统计，其中华为的下载量占比约为25.69%，而我的华为手机下载量显示34万，则安卓的下载量大约为132.3万，iOS的下载量为29.8万，所以总下载量大约为162万。

月活：直接查看的艾瑞指数，读者2018年8月大约3万月独立设备数。

无论是读书，还是看杂志都是一种提升自我、丰富生活、充满正能量的事情。但并不是每个人都能坚持去阅读，兴趣使然的用户可能仅是一小部分，怎样使更多的人去养成这种习惯，是产品经理和运营人员都得考虑的一个问题。

产品规划预测

只做简单的介绍，抛个砖，不做深入探讨，毕竟没有深入了解过这个行业，不敢妄下结论。但无论什么行业什么产品，完美的解决用户需求、更好的实现企业发展、良好的用户体验与粘性都是产品规划必须要考虑的。曾经有个做产品的师长对我说，产品无小事。的确，做好一个产品你得关注每一个细节，每个节点。

1、痛点深度挖掘

（1）更加便捷的获取信息

（2）更纯粹的还原纸质阅读

（3）智能化推荐文章

（4）优化产品交互体验

2、内容布局拓展

（1）提高书籍制作的质量

（2）内容多样化，后面可以增加纸媒、非杂志类出版物等

（3）UGC内容社区或者PGC内容社区

3、商业模式拓展

（1）内容付费

（2）优质内容打赏

（3）衍生IP产品

总结

优势（Strengths）：丰富的杂志内容，这将吸引一大批相应杂志的喜爱者，这一优势将明显降低用户获取成本和提高用户付费转化率。

劣势（Weaknesses）：相对于纸质杂志阅读，在体验上还有待提升。对于杂志，更多人可能还是更喜欢纸质阅读。降低产品的转移成本，提高产品使用体验。

机会（Opportunities）：综合性的杂志阅读APP基本上是一片空白，虽然有一些杂志出版社也推出了属于自己的APP，但用户群体还是仅限于喜爱该杂志的用户。

威胁（Threats）：品牌识别度过小，用户缺乏对APP的信任感。受杂志出版社的版权限制。

关于梦想

2018-07-21T09:32:16.000Z

好久没写文章了，今天其实想谈一下关于梦想的事。

2017年，在我身上其实发生了很多事。也许没有找到合适且懂你的人，很多事都宁愿埋在自己的心里，也不愿和别人分享。

2017年前，我一直以为我会是一个很好的前端，会在这条道路上越走越远，成为一个别人认为很厉害的人，这应该是我当初的梦想。可是人生的轨迹似乎总是难以预料。

2017年3月，我眼睛出现了问题，视网膜脱落，很严重。我请了三个月的病假，在家养病。这段时间，我不能看电脑玩手机，一切需要眼睛做的事情，我都做不了。我除了吃饭，就是躺在床上听有声书、广播新闻等。有一段时间，我真的很沮丧，迷茫。可能已经不能用迷茫来描述了，应该是绝望。

这段时间让我想了很多，我考虑了最坏的情况，也想了我的未来。我在想，我未来会不会在哪个盲人按摩店，帮客人按摩，或是在街头卖艺乞讨 . . .

我其实挺感谢老天给我这次经历的，虽然这远远不是我最悲惨的一段时光。养病期间，我一天可能十八小时都在听喜马拉雅，我听一些有声小说，一些心理学，一些历史评书，一些经融财经等等。这段时间让我明白了很多东西，让我再次回到社会的时候学会了怎么淡然处事，怎么管理情绪，怎么去规划自己。

2017年6月，我再次回到了工作岗位，工作时眼睛还是很不舒服。虽然很不想去面对，但是现实的一些原因，我不得不去工作。我边工作边考虑怎么转行去做一些其他的事情。例如，去做销售，去做一些体力活，回老家开个小店 . . .

2017年11月，我辞职了，辞去了技术的工作，开始了销售工作。由于没有销售经验，干的很吃力，我不懂得怎么找客户，不会打电话，不知道怎么向客户介绍产品。干了将近两个月，我还是放弃了。我重新考虑自己的职业发展，虽然我不能再回到技术岗位上了，但我还是热爱互联网这个行业。于是我决定，我要从事这个离技术最近的岗位，我要做产品。

2018年1月，我正式开始了产品相关的工作。其实我发现自己一直有一个产品的梦想，12年大一的时候，学习着怎么去建站，怎么去运营推广网站，16年小程序火的时候，熬夜去看了微信的开发文档，想去做一款小游戏，17年年初的时候，想做一款别致的社交APP，熟人间的匿名社交，当初和朋友同事谈了想法后，好几个人都想和我一起去开发这款应用，我都开始准备写文档做原型了，可是后面因为眼睛的问题便放弃了。

自从做了产品经理后，发现很多事情并不是自己想的那么简单。以前关于产品经理的理解都停留在“术”的层面，以为懂了一些画原型的工具就以为可以做产品经理了。现在逐渐明白“道”才是产品经理的关键。

关于产品，我一直认为，一个好的产品，它要满足企业的需求，它能解决用户需求，有黏性，有良好的交互体验。在这半年多时间里，我也一直往这个方向学习，理解并辅助公司的发展战略，学习挖掘用户需求，分析需求，管理需求，优化业务流程，保证良好的交互效果，分析运营数据，提高用户黏性。

努力去做好一个产品经理，努力去做好一个产品。不求可以改变世界，只想把事情做成，让用户更满意，但求可以为社会创造一点价值。

React学习资源汇总

2016-11-05T18:44:46.000Z

React是如今最热门的前端框架，它设计思路独特，性能卓越，逻辑简单，受到了广泛开发者的喜爱。一旦接触她，你就会被她深深吸引。
我断断续续的学了将近两个月，今天终于有时间把自己学习React的一些学习资料总结一下。

React 官方
官网地址：http://facebook.github.io/react/
Github地址：https://github.com/facebook/react

设计思想

学习React之前，我们先了解一下它的设计思想，它与如今其他热门的前端框架有什么不同？它能为我们的开发解决哪些痛点？

1、React 设计思想
2、React的设计哲学 - 简单之美
3、颠覆式前端UI开发框架:React

初学者入门

文章

可以结合一些简单demo去看文章，例如你在看阮一峰的React 入门实例教程时，可结合他写的入门demo，或官方给的demo。当然你也要边学习边自己去写一些简单demo，去改改别人写的一些React 项目。一定要多动手。

1、React 入门实例教程-阮一峰：建议先看demo
2、一看就懂的ReactJs入门教程（精华版）
3、React 教程-菜鸟教程：安装那节好像有点错
4、React 入门，5个常用DEMO展示
5、如何学习React
6、给新手的 React&Webpack 上手教程
7、ReactJS 傻瓜教程
8、React 最简单的入门应用项目

入门 demo

1、官方入门 demo：可结合官方的入门文档
2、入门 demo-阮一峰：结合入门文章
3、模仿知乎界面的一个简单React demo：结合 ReactJS中文基础视频教程-爱酷

入门视频教程

一定要边看边写，不要囫囵吞枣的看一遍就好了。

1、React入门-慕课网
2、ReactJS中文基础视频教程-爱酷
3、ReactJS中文视频教程
4、React教程- 汇智网

入门实战视频

了解React开发流程，作者的编码思路，写作规范。

1、React实战–打造画廊应用（上）
2、React实战–打造画廊应用（下）
3、ReactJS中文基础视频教程
4、构建实时聊天应用

开发文档

开发其实不用详细去全看，在你做项目时，遇到不懂的就去查看一下文档，我认为这样效率更高一点。当然你有时间也可以一步步去阅读。

1、官方文档
2、中文文档

学习网站

在学习中我们会遇到一些问题，可以去社区或一些网站寻找答案，下面推荐一些好的React 社区和学习网站。

1、React中文社区
2、React 中文索引
2、React知识库
3、A quick start to React
4、stack overflow
5、知乎 React 话题
6、segmentfault React 话题

React技术栈

React是一款非常优秀的前端框架，你要发挥它完全的性能，你就要结合其他一些技术，例如webpack、redux、react-router等。

1、React 技术栈系列教程
2、百度母婴技术团队—基于Reactjs实现webapp
3、Building a React Universal Blog App
4、React为啥非得使用immutable.js
5、React Server Side Rendering 解决 SPA 应用的 SEO 问题

6、webpack官方文档
7、Webpack 中文指南
8、webpack一小时快速入门
9、使用webpack轻松构建你的第一个react开发框架

10、react-router
11、React Router 中文文档
12、React Router 官方 demo

13、Redux官网
14、Redux 中文文档
15、Redux 官方 demo
16、Redux 莞式教程
17、Redux 视频教程
18、redux 大法好
19、Flux 傻瓜教程
20、react+redux渲染性能优化原理

React 开源项目

介绍一些国内外比较好的 React 开源项目。

国内：
1、阿里的 React 组件库
2、Ant Design
3、简易留言板
4、react-zhihu
5、React的扫雷游戏
6、在线聊天室
7、使用React技术栈开发SPA
8、阔论留言评论
9、React版cnode社区

国外：
1、Relax
2、SoundRedux
3、Gatsby
4、isomorphic500
5、NuclearMail
6、Picard
7、React Color
8、Sentry
9、react-hn
10、Perseus

模仿知乎界面的一个简单React demo

2016-11-04T17:13:44.000Z

这是一个模仿知乎界面的简单React demo。这个React demo能让你从零开始学习React，并逐渐掌握React。它包括了一个项目从零到项目完成的整个过程。

项目地址：https://github.com/tsrot/react-zhihu
项目预览：http://blog.xieliqun.com/react-zhihu/

项目运行

$ git clone https://github.com/tsrot/react-zhihu.git
$ cd react-zhihu
$ npm install
$ bower install
$ gulp server   //用浏览器打开 localhost:5000

搭建开发环境

初始化npm bower

1
2
3

npm init  //一直enter，默认就好
bower init //同上

安装必要的开发工具包

gulp ：基于流的自动化构建工具
gulp-browserify ：前端模块及依赖管理
gulp-concat ：文件合并插件
gulp-react ：JSX语法转化工具
gulp-connect ：构建本地开发Web服务器
lodash ：一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库
reactify ：React 编译器

1	npm install gulp gulp-browserify gulp-concat gulp-react gulp-connect lodash reactify --save-dev

安装生产环境依赖包

react ：主要框架
react-dom ：React的DOM操作类
bootstrap ：bootstrap样式

1
2
3

npm install --save react react-dom
bower install --save bootstrap

写入gulp配置文件gulpfile.js

你可以在npm的网站上找到相应插件的gulp配置写法。我配置的gulpfile.js

开发

切分相应的模块
分清UI组件和容器组件
学会如何在组件之间通信
注意写作规范和开发细节

部署生产

请切换分支到 product 分支

修改gulpfile文件

//添加copy任务
gulp.task('copy',function(){
    gulp.src('./app/css/*')
    .pipe(gulp.dest('./dist/css'));
    gulp.src('./bower_components/**/*')
    .pipe(gulp.dest('./dist/libs'));
    gulp.src('./*.html')
    .pipe(gulp.dest('./dist'));
});
//生产服务器
gulp.task('connect-pro',function(){
    connect.server({
        root:'./dist',
        port:port,
        livereload:true,
    })
});
//添加build任务
gulp.task('build',['browserify','copy']);
//添加启动生产服务器任务
gulp.task('server-pro',['build','connect-pro','watch']);

修改index.html引用目录

"stylesheet" href="./libs/bootstrap/dist/css/bootstrap.css">
"stylesheet" href="./css/index.css">

使用gulp-gh-pages部署到github pages

下载gulp-gh-pages插件

1	npm install --save-dev gulp-gh-pages

在gulpfile文件中添加配置gulp-gh-pages代码

var ghPages = require('gulp-gh-pages');
gulp.task('deploy', function() {
  return gulp.src('./dist/**/*')
    .pipe(ghPages());
});

后续

将在分支中更新使用下列技术的版本

webpack
webpack + redux
webkack + redux + react-router

深入了解JavaScript，优化作用域链（2）

2016-10-06T04:58:03.000Z

作为一个良好的开发者必需考虑程序的运行性能，作用域链的层级关系是JavaScript性能优化的一个重要部分。因为这关系到变量在内存里的读写速度。

尽量使用局部变量

从作用域链的结构可以看出，在执行上下文的作用域链中，标识符所在的位置越深，读写速度就会越慢。

全局变量总是存在于执行上下文作用域链的最末端，因此在标识符解析的时候，查找全局变量是最慢的，并且全局变量将常驻内存直到程序退出，而局部变量会在函数运行完直接销毁。所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。

一个好的经验法则是：如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。例如：

function toggle(){
if(document.getElementById('btn').className == 'active'){
document.getElementById('btn').className = '';
//do someThing
}else{
document.getElementById('btn').className = 'active';
//do someThing
}
}

以上代码中document.getElementById('btn').className被引用了三次，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到document，然后再去找它的方法和属性，这样严重的影响了程序性能。我们可以改为：

function toggle(){
var btnClass = document.getElementById('btn').className;
if(btnClass == 'active'){
btnClass = '';
//do someThing
}else{
btnClass = 'active';
//do someThing
}
}

尽量不要改变作用域链

函数每次执行时对应的执行上下文都是独一无二的，所以多次调用同一个函数就会导致创建多个执行上下文，当函数执行完毕，执行上下文会被销毁。每一个执行上下文都和一个作用域链关联。一般情况下，在执行上下文运行的过程中，其作用域链只会被 with 语句和 catch 语句影响。

with语句是对象的快捷应用方式，用来避免书写重复代码。例如：

var o = {href:"github.com"};
var href = "blog.xieliqun.com";
function buildUrl(){
     var q = "?name=tsrot";
     with(o){
          var url = href+q;
     }
     return url;
}
var result = buildUrl();
alert(result);  //github.com?name=tsrot
alert(href);    //blog.xieliqun.com

第一个alert使用的o对象里的href，所以弹出github.com?name=tsrot，第二个alert使用的就是全局的href。

当代码运行到with语句时，运行期上下文的作用域链临时被改变了。一个新的可变对象被创建，它包含了参数指定的对象的所有属性。这个对象将被推入作用域链的头部，这意味着函数的所有局部变量现在处于第二个作用域链对象中，因此访问代价更高了。此时的作用域链为：


scope -> with.AO -> with.VO -> buildUrl.AO -> Global Object
with.AO = {
url : undefined
}
with.VO = {
href : "github.com"
}
buildUrl.AO = {
q : "?name=tsrot"
}
Global Object = {
o : {href:"github.com"},
href : "blog.xieliqun.com",
buildUrl : ,
result : undefined
}

另外一个会改变作用域链的是try-catch语句中的catch语句。当try代码块中发生错误时，执行过程会跳转到catch语句，然后把异常对象推入一个可变对象并置于作用域的头部。在catch代码块内部，函数的所有局部变量将会被放在第二个作用域链对象中。

闭包问题

一个函数只要内部函数未销毁（内部函数存在被调用的可能），这个函数就不会销毁，将一直存在于内存中，只有所有内部函数都销毁了，并所有的业务代码都已执行完，这个函数才会被释放。我们看看最常见的闭包问题：

function show(){
var li = document.getElementsByTagName('li');
var length = li.length;
for(var i=0;ili[i].onclick = function(){
alert(i);
}
}
}
show();

当点击li标签时，弹出的一直都是length的大小。这是一个比较经典的错误。为什么会这样呢？

由于show的内部函数（click事件处理程序时刻有调用可能），所以show的作用域链不能被销毁（只能页面卸载是销毁），i的值一直保持for循环执行完后的length值，此时的click的函数只是进行了声明而未运行，当click触发的时候，函数才开始执行，这个时候i的值已经是length了。所以每次触发onclick的时候才会alert length。我们进行改一下：

function show(){
var li = document.getElementsByTagName('li');
var length = li.length;
for(var i=0;i(function(n){
li[n].onclick = function(){
alert(n);
}
})(i)
}
}
show();

为什么这样就行了呢，这时候onclick引用的变量变成了n，而由于立即执行函数的原因，每个onclick函数在作用域链中分别保持着对应的n（0~length-1），这时候就可以了。

闭包会使子函数保持其作用域链的所有变量及函数与内存中，内存消耗很大，在使用的时候尽量销毁父函数不再使用的变量。你经常访问一些范围之外的标识符，每次访问都将导致一些性能损失。

深入了解JavaScript，从作用域链开始（1）

2016-10-05T19:16:45.000Z

作用域是每种计算机语言最重要的基础之一，当然它也是JavaScript最重要的概念之一。要想真正的深入了解JavaScript，了解JavaScript的作用域链非常必要。现在让我们深入了解JavaScript作用域和作用域链的工作原理。

JavaScript的作用域是什么

作用域，在维基百科上解释是：在电脑程序设计中，作用域（scope，或译作有效范围）是名字（name）与实体（entity）的绑定（binding）保持有效的那部分计算机程序。
简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种，局部作用域又称为函数作用域。

全局作用域

在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下几种情形拥有全局作用域：

（1）程序最外层定义的函数或者变量

var a = "tsrot";
function hello(){
alert(a);
}
function sayHello(){
hello();
}
alert(a);     //能访问到tsrot
hello();      //能访问到tsrot
sayHello();   //能访问到hello函数，然后也能访问到tsrot

（2）所有末定义直接赋值的变量（不推荐）

function hello(){
a = "tsrot";
var b = "hello tsrot";
}
alert(a);  //能访问到tsrot
alert(b);  //error 不能访问

（3）所有window对象的属性和方法

一般情况下，window对象的内置属性都拥有全局作用域，例如window.name、window.location、window.top等等。

局部作用域（函数作用域）

局部作用域在函数内创建，在函数内可访问，函数外不可访问。

function hello(){
var a = "tsrot";
alert(a);
}
hello(); //函数内可访问到tsrot
alert(a); //error not defined

作用域链是什么

了解作用域链之前我们要知道一下几个概念：

变量和函数的声明
函数的生命周期
Activetion Object（AO）、Variable Object（VO）

变量和函数的声明

在JavaScript引擎解析JavaScript代码的时候，首先，JavaScript引擎会把变量和函数的声明提前进行预解析，然后再去执行其他代码。

变量声明：变量的声明只有一种方式，那就是用var关键字声明，直接赋值不是一种声明方式。这仅仅是在全局对象上创建了新的属性（而不是变量）。它们有一下区别：
（1）因为它只是一种赋值，所以不会声明提前

alert(a); // undefined
alert(b); // error "b" is not defined
b = 10;
var a = 20;

（2）直接赋值形式是在执行阶段创建

alert(a); // undefined, 这个大家都知道
b = 10;
alert(b); // 10, 代码执行阶段创建
 
var a = 20;
alert(a); // 20, 代码执行阶段修改

（3）变量不能删除（delete），属性可以删除

a = 10;
alert(window.a); // 10
 
alert(delete a); // true
 
alert(window.a); // undefined
 
var b = 20;
alert(window.b); // 20
 
alert(delete b); // false
 
alert(window.b); // 仍然为 20，因为变量是不能够删除的。

但是，这里有一个意外情况，就是在“eval”的上下文中，变量是可以删除的：

eval('var a = 10;');
alert(window.a); // 10
 
alert(delete a); // true
 
alert(window.a); // undefined

有些debug工具也是可以删除的，因为它们使用了 eval()方法来执行代码的。

函数声明：函数的声明有三种方式
（1）function name( ){ }直接创建方式

function add(a,b){
return a+b;
}
add(5,4);

（2）new Funtion构建函数创建

1
2
3

var add=new Function("a", "b", "return a+b;");
add(4,5);

（3）给变量赋值匿名函数方法创建

var add = function(a,b){
return a+b;
}
add(4,5);

后面两种方法，在声明前访问时，返回的都是一个undefined的变量。当然，在声明后访问它们都是一个function的函数。

注意：如果变量名和函数名声明时相同，函数优先声明。

alert(x); // function
var x = 10;
alert(x); // 10
 
x = 20;
function x() {};
 
alert(x); // 20

函数的生命周期

函数的的生命周期分为创建和执行两个阶段。

在函数创建阶段，JS解析引擎进行预解析，会将函数声明提前，同时将该函数放到全局作用域中或当前函数的上一级函数的局部作用域中。

在函数执行阶段，JS引擎会将当前函数的局部变量和内部函数进行声明提前，然后再执行业务代码，当函数执行完退出时，释放该函数的执行上下文，并注销该函数的局部变量。

什么是AO、VO

英文解释：
AO：Activetion Object（活动对象）
VO：Variable Object（变量对象）

VO对应的是函数创建阶段，JS解析引擎进行预解析时，所有的变量和函数的声明，统称为Variable Object。该变量与执行上下文相关，知道自己的数据存储在哪里，并且知道如何访问。VO是一个与执行上下文相关的特殊对象，它存储着在上下文中声明的以下内容：

变量 (var, 变量声明);
函数声明 (FunctionDeclaration, 缩写为FD);
函数的形参

举个例子：

function add(a,b){
var sum = a + b;
function say(){
alert(sum);
}
return sum;
}
// sum,say,a,b 组合的对象就是VO，不过该对象的值基本上都是undefined

AO对应的是函数执行阶段，当函数被调用执行时，会建立一个执行上下文，该执行上下文包含了函数所需的所有变量，该变量共同组成了一个新的对象就是Activetion Object。该对象包含了：

函数的所有局部变量
函数的所有命名参数
函数的参数集合
函数的this指向

举个例子：

function add(a,b){
var sum = a + b;
function say(){
alert(sum);
}
return sum;
}
add(4,5);
//  我用JS对象来表示AO
//  AO = {
//    this : window,
//    arguments : [4,5],
//    a : 4,
//    b : 5,
//    say : ,
//    sum : undefined
//  }

JavaScript作用域链

现在我们回到主题，作用域链。

当代码在一个环境中执行时，会创建变量对象的一个作用域链（scope chain）来保证对执行环境有权访问的变量和函数的有序访问。作用域第一个对象始终是当前执行代码所在环境的变量对象（VO）。

function add(a,b){
var sum = a + b;
return sum;
}

假设函数是在全局作用域中创建的，在函数a创建的时候，它的作用域链填入全局对象,全局对象中有所有全局变量，此时的全局变量就是VO。此时的作用域链就是：

此时作用域链（Scope Chain）只有一级,就为Global Object
scope(add) -> Global Object(VO)
VO = {
this : window,
add : 
}

如果是函数执行阶段，那么将其activation object（AO）作为作用域链第一个对象，第二个对象是上级函数的执行上下文AO，下一个对象依次类推。

add(4,5);

例如，调用add后的作用域链是：

此时作用域链（Scope Chain）有两级，第一级为AO，然后Global Object（VO）
scope(add) -> AO -> VO
AO = {
this : window,
arguments : [4,5],
a : 4,
b : 5,
sum : undefined
}
VO = {
this : window,
add : 
}

在函数运行过程中标识符的解析是沿着作用域链一级一级搜索的过程，从第一个对象开始，逐级向后回溯，直到找到同名标识符为止，找到后不再继续遍历，找不到就报错。

看过上面的内容后，可能还有人不懂，我再通熟易懂的解释一遍，先举个例子：

var x = 10;
 
function foo() {
    var y = 20;
 
    function bar() {
        var z = 30;
 
        console.log(x + y + z);
    };
 
    bar()
};
 
foo();

上面代码的输出结果为”60″，函数bar可以直接访问”z”，然后通过作用域链访问上层的”x”和”y”。此时的作用域链为：

此时作用域链（Scope Chain）有三级，第一级为bar AO，第二级为foo AO,然后Global Object（VO）
scope -> bar.AO -> foo.AO -> Global Object
bar.AO = {
z : 30,
__parent__ : foo.AO
}
foo.AO = {
y : 20,
bar : ,
__parent__ : 
}
Global Object = {
x : 10,
foo : ,
__parent__ : null
}

未完待续。。。

Yeoman 中文网

2016-09-20T16:51:50.000Z

如今前端的项目变得越来越庞大，靠人工手动终究不符合现代化技术发展的趋势。作为一名前端开发人员，我们需要更加自动化的coding。由于国内关于Yeoman的技术资料还是比较少，而且比较基础，比较过时，所以前段时间，我把Yeoman官网，翻译成了中文：www.yowebapp.com。

Yeoman是一个比较好的前端解决方案，它优化了前端开发的工作流，让前端开发人员更加专注业务代码的开发，像什么项目构建、代码校验、项目测试等，这些都交给Yeoman来做。

Yeoman中文
1、中文翻译（可能有些地方翻译的很粗糙）
2、提高页面加载速度
3、使用 google 字体镜像资源
4、优化国内 youtube 视频不能加载

欢迎访问 Yeoman中文,如有错误欢迎指正。

折腾：coding.net IDE node环境的安装

2016-08-27T04:11:24.000Z

作为一个码农，我们经常会有这样一个痛点：项目出现一个紧急bug，但自己又不在公司，怎办呢？虽然项目可能在git或者svn上，但clone下来安装测试环境也是个麻烦的是啊。于是，我们想到了在线IDE。作为一个前端开发者nodeJS环境是非常重要的，今天花了一个多小时折腾了下coding.net。虽然coding IDE可以切换nodeJS环境，但是当你需要多种环境的时候就有点必要了。

IDE介绍

以前我一直在用nitrous.io的在线IDE，它是一个国外的在线IDE，访问有点慢，一旦网络不好就掉线，挺好的地方就是，它每个月有50个小时的免费使用。coding.net相当于是一个国内版的github，也是一个远程的git仓库，它有个在线IDE还挺好用的。有终端命令面板、支持vim和 Emacs的编辑器、在线运行环境、支持git。

下面进入主题。

安装nvm

nvm是nodejs版本管理工具。可以在多个nodejs版本中进行切换，降低了升级nodejs时的成本。

下载nvm，直接在终端面板把它clone过来就行了。为了不影响项目目录，我们把它clone在项目根目录的同级目录。

1 2	-> ~ cd .. -> ~ git clone https://github.com/creationix/nvm.git

接下来，进入nvm目录

1	-> ~ cd nvm

安装nvm

1	-> ~ ./install.sh

安装完后，让系统自动执行它

1	-> ~ source ./nvm.sh

现在就可以使用nvm命令了，查看一下help

1	-> ~ nvm -help

安装nodeJS

查看可以安装的nodejs版本，这里将会输出一大堆可供安装的nodejs版本

1	-> ~ nvm ls-remote

选择一个进行安装，我安装的是v4.5.0

1	-> ~ nvm install v4.5.0

当然你可以安装多个版本，例如我还要安装最新版本，测试一下它的新特性

1	-> ~ nvm install v6.4.0

当你想切换回原先稳定版本时，你可以

1	-> ~ nvm use v4.5.0

安装完node，你就可以使用node和npm了。你可以安装一些自动化工具啊，一些插件啊什么的。

一些问题

1、这些在线IDE虽然挺方便的，但毕竟没有本地的好，还有一些安全和网络限制的问题，另外到后面可能还要收费。

2、nvm问题，因为coding没有给用户root权限,不能够执行source /root/nvm/nvm.sh，让nvm每次启动项目自动执行。所以你每次在运行node前都必须先执行一下nvm。

1
2
3

-> ~ cd ..
-> ~ cd nvm
-> ~ source ./nvm.sh

END

window.name跨域详解

2016-08-25T17:31:00.000Z

window.name属性的神奇之处在于name 值在不同的页面（甚至不同域名）加载后依旧存在（如果没修改则值不会变化），并且可以支持非常长的 name 值（2MB）。并且window.name很方便。

用法介绍

name 在浏览器环境中是一个全局/window对象的属性，且当在 frame 中加载新页面（可以是不同域的）时，name 的属性值依旧保持不变（只要不重新赋值）。name属性的值虽然不变，但对它的访问还是受到同域原则，不允许访问。所以我们要把iframe重新定向回原域，这样name的值也没变，并且可以访问了。

在最顶层，name 属性是不安全的，对于所有后续页面，设置在 name 属性中的任何信息都是可获得的。然而 windowName 模块总是在一个 iframe 中加载资源，并且一旦获取到数据，或者当你在最顶层浏览了一个新页面，这个 iframe 将被销毁，所以其他页面永远访问不到 window.name 属性。

函数封装

为了方便以后的使用，我们把window.name进行一下封装。

function proxy(url, func){
  var isFirst = true,//判断url第一次是否加载完
      ifr = document.createElement('iframe'),
      loadFunc = function(){
        if(isFirst){
        //加载完url后，重新定向回原域
          ifr.contentWindow.location = 'about:blank';
          isFirst = false;
        }else{
        //iframe回到原域后，获取name的值，执行回调函数，然后销毁iframe
          func(ifr.contentWindow.name);
          ifr.contentWindow.close();
          document.body.removeChild(ifr);
          ifr.src = '';
          ifr = null;
        }
      };
  ifr.src = url; //第一次加载url
  ifr.style.display = 'none';
  document.body.appendChild(ifr);
  //监听iframe是否加载，加载完执行loadFunc
  if(ifr.attachEvent){
  ifr.attachEvent('onload', loadFunc);
  }else{
  ifr.onload = loadFunc;
  }
}

详细案例

假设我现在在http://127.0.0.1:8080 ，我有一个页面叫做a.html，现在我想获取http://127.0.0.1:9090 上的b.html的数据。

a.html


"en">