玉英博客

家庭、工作、学习、旅行


  • 首页

  • 分类

  • 归档

  • 关于

程序员的十层楼

发表于 2017-07-10

自西方文艺复兴以来,中国在自然科学方面落后西方很多,软件领域也不例外。当然现在中国的许多程序员们对此可能有许多不同的意见,有些人认为中国的程序员水平远落后于西方,有些则认为中国的程序员个人能力并不比西方的程序员差,只是整个软件产业落后而已。

那 么,到底中国的程序员水平比西方程序员水平差,还是中国有许多优秀的程序员达到或超过了西方程序员同等水平呢?要解决这个问题,必须先知道程序员有多少种 技术层级,每个层级需要什么样的技术水平,然后再比较中国和西方在各个技术层级的人数,就可以知道到底有没有差距,差距有多大。

当然,对于如何划分程序员的技术层级,不同公司或不同人会有不同的划分标准,下面的划分仅代表个人的观点,如有不当之处,还请砸板砖予以纠正。

第1层 菜鸟

第1层楼属于地板层,迈进这层楼的门槛是很低的。基本上懂计算机的基本操作,了解计算机专业的一些基础知识,掌握一门基本的编程语言如C/C++,或者Java,或者JavaScript,…,均可入门迈进这层。

在这层上,中国有着绝对的优势,除了从计算机专业毕业的众多人数外,还有大量的通信、自动化、数学等相关专业的人士进入这一行,此外还有众多的其他专业转行的人士,人数绝对比西方多出甚多。并且还有一个优势就是我们这层人员的平均智商比西方肯定高。

没 有多少人愿意一辈子做菜鸟,因为做”菜鸟”的滋味实在是不咋的,整天被老大们吆喝着去装装机器,搭建一下测试环境,或者对照着别人写好的测试用例做一些黑 盒测试,好一点的可以被安排去写一点测试代码。当然如果运气”好”的话,碰到了国内的一些作坊式的公司,也有机会去写一些正式的代码。
所以,菜鸟们总是在努力学习,希望爬更高的一层楼去。

第2层 大虾

从 第1层爬到第2层相对容易一些,以C/C++程序员为例,只要熟练掌握C/C++编程语言,掌握C标准库和常用的各种数据结构算法,掌握STL的 基本实现和使用方法,掌握多线程编程基础知识,掌握一种开发环境,再对各种操作系统的API都去使用一下,搞网络编程的当然对socket编程要好好掌握 一下,然后再学习一些面向对象的设计知识和设计模式等,学习一些测试、软件工程和质量控制的基本知识,大部分人经过2~3年的努力,都可以爬到第2层,晋 升为”大虾”。

中国的”大虾”数量和”菜鸟”数量估计不会少多少,所以这层上仍然远领先于西方。

大虾们通常还是有些自知 之明,知道自己只能实现一些简单的功能,做不了大的东西,有时候还会遇到一些疑难问题给卡住,所以他们对那些大牛级的人物通 常是非常崇拜的,国外的如Robert C. Martin、Linus Torvalds,国内的如求伯君、王志东等通常是他们崇拜的对象。其中的有些人希望有一天也能达到这些大牛级人物的水平,所以他们继续往楼上爬去。

第3层 牛人

由 于”大虾”们经常被一些疑难问题给卡住,所以有了”大虾”们只好继续学习,他们需要将原来所学的知识进一步熟练掌握,比如以熟练掌握C++编程语 言为例,除了学一些基础性的C++书籍如《C++ Primer》,《Effective C++》,《Think in C++》,《Exception C++》等之外,更重要的是需要了解C++编译器的原理和实现机制,了解操作系统中的内部机制如内存管理、进程和线程的管理机制,了解处理器的基础知识和 代码优化的方法,此外还需要更深入地学习更多的数据结构与算法,掌握更深入的测试和调试知识以及质量管理和控制方法,对各种设计方法有更好的理解等。

学 习上面说的这些知识不是一挥而就的,不看个三五十本书并掌握它是做不到的。以数据结构算法来说,至少要看个5~10本这方面的著作;以软件设计来 说,光懂结构化设计、面向对象设计和一些设计模式是不够的,还要了解软件架构设计、交互设计、面向方面的设计、面向使用的设计、面向数据结构算法的设计、 情感化设计等,否则是很难进到这个楼层的。

当然除了上面说的知识外,大虾们还需要去学习各种经验和技巧。当然这点难不倒他们,现在出版的 书籍众多,网络上的技术文章更是不胜数,然后再去各种 专业论坛里泡一泡,把这些书籍和文章中的各种经验、技能、技巧掌握下来,再去学习一些知名的开源项目如Apache或Linux操作系统的源代码实现等。 此时对付一般的疑难问题通常都不在话下,菜鸟和大虾们会觉得你很”牛”,你也就爬到了第3层,晋升为”牛人”了。

看了上面所讲的要求,可能有些大虾要晕过去了,成为牛人要学这么多东西啊!要求是不是太高了?其实要求一点也不高,这么点东西都掌握不了的话,怎么能让别人觉得你”牛”呢?
(略去若干字涉及多核)

在 国内, 一旦成为”牛人”,通常可以到许多知名的公司里去,运气好者可以挂上一个架构师的头衔,甚至挂上一个”首席架构师”或者”首席xx学家”的头衔也不足为 奇。有不少爬到这层的人就以为到了楼顶了,可以眼睛往天上看了,开始目空一切起来,以为自己什么都可以做了,什么都懂了,经常在网络上乱砸板砖是这个群体 的最好写照。由此也看出,国内的牛人数量仍然众多,远多于西方的牛人数量,在这层上仍然是领先的。

也有不少谦虚的”牛人”,知道自己现在还不到半桶水阶段。他们深知爬楼的游戏就像猴子上树一样,往下看是笑脸,往上看是屁股。为了多看笑脸,少看屁股,他们并没有在此停步不前,而是继续寻找到更上一层的楼梯,以便继续往上爬。

第4层 大牛

从 第3层爬到第4层可不像上面说过的那几层一样容易,要成为大牛的话,你必须要能做牛人们做不了的事情,解决牛人们解决不了问题。比如牛人们通常都不懂写操 作系统,不会写编译器,不懂得TCP/IP协议的底层实现,如果你有能力将其中的任何一个实现得象模象样的话,那么你就从牛人升级为”大牛”了。

当 然,由于各个专业领域的差别,这里举操作系统、编译器、TCP/IP协议只是作为例子,并不代表成为”大牛”一定需要掌握这些知识,以时下热门的 多核编程来说,如果你能比牛人们更深入地掌握其中的各种思想原理,能更加自如的运用,并有能力去实现一个象开源项目TBB库一样的东西,也可以成为”大 牛”,又或者你能写出一个类似Apache一样的服务器,或者写出一个数据库,都可以成为”大牛”。

要成为”大牛”并不是一件简单的事情,需要付出比牛人们多得多的努力,一般来说,至少要看过200~400本左右的专业书籍并好好掌握它,除此之外,还得经常关注网络和期刊杂志上的各种最新信息。

当” 牛人”晋升为”大牛”,让”牛人们”发现有比他们更牛的人时,对”牛人”们的心灵的震撼是可想而知的。由于牛人们的数量庞大,并且牛人对大虾和 菜鸟阶层有言传身教的影响,所以大牛们通常能获得非常高的社会知名度,几乎可以用”引无数菜鸟、大虾、牛人竞折腰”来形容,看看前面提过的Linus Torvalds等大牛,应该知道此言不虚。

虽然成为”大牛”的条件看起来似乎很高似的,但是这层楼并不是很难爬的一层,只要通过一定的努力,素质不是很差,还是有许多”牛人”可以爬到这一层的。由此可知,”大牛”这个楼层的人数其实并不像想像的那么少,例如比尔·盖茨之类的人好像也是属于这一层的。

由于”大牛”这层的人数不少,所以也很难统计除到底是中国的”大牛”数量多还是西方的大牛数量多?我估计应该是个旗鼓相当的数量,或者中国的”大牛”们会更多一些。

看 到这里,可能会有很多人会以为我在这里说瞎话,Linus Torvalds写出了著名的Linux操作系统,我国并没有人写出过类似的东西啊,我国的”大牛”怎么能和西方的比呢? 不知大家注意到没有,Linus Torvalds只是写出了一个”象模象样”的操作系统雏形,Linux后来真正发展成闻名全球的开源操作系统期间,完全是因为许多支持开源的商业公司如 IBM等,派出了许多比Linus Torvalds更高楼层的幕后英雄在里面把它开发出来的。

可能有些菜鸟认为Linus Torvalds是程序员中的上帝,不妨说个小故事:

Linus,Richard Stallman和Don Knuth(高德纳)一同参加一个会议。

Linus 说:”上帝说我创造了世界上最优秀的操作系统。”

Richard Stallman自然不甘示弱地说:”上帝说我创造了世界上最好用的编译器。”

Don Knuth一脸疑惑的说:”等等,等等,我什么时候说过这些话?”

由 此可以看出,Linus Torvalds的技术水平并不像想像中那么高,只是”牛人”和”大虾”觉得”大牛”比他们更牛吧了。在我国,有一些当时还处于”大虾”层的人物,也能写 出介绍如何写操作系统的书,并且书写得非常出色,而且写出了一个有那么一点点象模象样的操作系统来。我想中国的”大牛”们是不会比西方差的,之所以没有人 写出类似的商业产品来,完全是社会环境的原因,并不是技术能力达不到的原因。

“大牛”们之所以成为大牛,主要的原因是因为把”牛人”给盖 了下去,并不是他们自己觉得如何牛。也许有很多菜鸟、大虾甚至牛人觉得”大牛”这层已经 到顶了,但大多数”大牛”估计应该是有自知之明的,他们知道自己现在还没有爬到半山腰,也就勉强能算个半桶水的水平,其中有些爬到这层没有累趴下,仍然能 量充沛,并且又有志者,还是会继续往更上一层楼爬的。

看到这里,也许有些菜鸟、大虾、牛人想不明白了,还有比”大牛”们更高的楼层,那会是什么样的楼层?下面就来看看第5层楼的奥妙。

第5层 专家

当 大牛们真正动手做一个操作系统或者类似的其他软件时,他们就会发现自己的基本功仍然有很多的不足。以内存管理为例,如果直接抄袭Linux或者其 他开源操作系统的内存管理算法,会被人看不起的,如果自动动手实现一个内存管理算法,他会发现现在有关内存管理方法的算法数量众多,自己并没有全部学过和 实践过,不知道到底该用那种内存管理算法。

看到这里,可能有些人已经明白第5层楼的奥妙了,那就是需要做基础研究,当然在计算机里,最重要的就是”计算”二字,程序员要做基础研究,主要的内容就是研究非数值”计算”。

非 数值计算可是一个非常庞大的领域,不仅时下热门的”多核计算”与”云计算”属于非数值计算范畴,就是软件需求、设计、测试、调试、评估、质量控制、软件工 程等本质上也属于非数值计算的范畴,甚至芯片硬件设计也同样牵涉到非数值计算。如果你还没有真正领悟”计算”二字的含义,那么你就没有机会进到 这层楼来。

可能有人仍然没有明白为什么比尔·盖茨被划在了大牛层,没有进到这层来。虽然比尔·盖茨大学未毕业,学历不够,但是家有藏书2 万余册,进入软件这个 行业比绝大部分人都早,撇开他的商业才能不谈,即使只看他的技术水平,也可以算得上是学富五车,顶上几个普通的计算机软件博士之和是没有问题的,比起 Linus Torvalds之类的”大牛”们应该技高一筹才对,怎么还进不了这层楼呢?

非常遗憾的是,从Windows操作系统的实现来看,其对计算的理解是很肤浅的,如果把Google对计算方面的理解比做大学生,比尔·盖茨只能算做一个初中生,所以比尔·盖茨永远只能做个大牛人,成不了”专家”。

看到这里,也许国内的大牛们要高兴起来了,原来比尔·盖茨也只和我等在同一个层次,只要再升一层就可以超越比尔·盖茨了。不过爬到这层可没有从”牛 人”升为”大牛”那么简单,人家比尔·盖茨都家有2万多册书,让你看个500~1000本以上的专业书籍并掌握好它应该要求不高吧。当然,这并不是主要的 条件,更重要的是,需要到专业的学术站点去学习了,到ACM,IEEE,Elsevier,SpringerLink,SIAM等地方去下载论文应该成为 你的定期功课,使用Google搜索引擎中的学术搜索更是应该成为你的日常必修课。此外,你还得经常关注是否有与你研究相关的开源项目冒出来,例如当听到 有TBB这样针对多核的开源项目时,你应该第一时间到Google里输入”TBB”搜索一下,将其源代码下载下来好好研究一番,这样也许你的一只脚已经快 迈进了这层楼的门槛。

当你象我上面说的那样去做了以后,随着时间的推移,总会有某天,你发现,在很多小的领域里,你已经学不到什么新东西 了,所有最新出来的研究成果你几 乎都知道。此时你会发现你比在做”牛人”和”大牛”时的水平不知高出了多少,但是你一点也”牛”不起来,因为你学的知识和思想都是别人提出来的,你自己并 没有多少自己的知识和思想分享给别人,所以你还得继续往楼上爬才行。

我不知道国内的”专家”到底有多少,不过有一点可以肯定的是,如果把那些专门蒙大家的”砖家”也算上的话,我们的砖家比西方的要多得多。

第6层 学者

当”专家”们想继续往上一层楼爬时,他们几乎一眼就可以看到楼梯的入口,不过令他们吃惊的是,楼梯入口处竖了一道高高的门槛,上面写着”创新”二字。不幸的是,大多数人在爬到第5层楼时已经体能消耗过度,无力翻过这道门槛。

有少数体能充足者,可以轻易翻越这道门槛,但是并不意味着体力消耗过度者就无法翻越,因为你只是暂时还没有掌握恢复体能的方法而已,当掌握了恢复体能的方法,将体能恢复后,你就可以轻易地翻越这道门槛了。

怎 么才能将体能恢复呢?我们的老祖宗”孔子”早就教导过我们”温故而知新”,在英文里,研究的单词是”research”,其前缀”re” 和”search”分别是什么意思不用我解释吧。或许有些人觉得”温故而知新”和”research”有些抽象,不好理解,我再给打个简单的比方,比如你 在爬一座高山,爬了半天,中途体力不支,怎么恢复体力呢?自然是休息一下,重新进食一些食物,体力很快就可以得到恢复。

由此可知,对体能 消耗过度者,休息+重新进食通常是恢复体能的最佳选择。可惜的是,国内的老板们并不懂得这点,他们的公司里不仅连正常国家规定的休 息时间都不给足,有些公司甚至有员工”过劳死”出现。所以国内能翻越”创新”这道门槛的人是”少之又少”,和西方比起来估计是数量级的差别。

再 说说重新进食的问题,这个重新进食是有讲究的,需要进食一些基础性易消化的简单食物,不能进食山珍海味级的复杂食物,否则很难快速吸收。以查找为例,并不 是去天天盯着那些复杂的查找结构和算法进行研究,你需要做的是将二分查找、哈希查找、普通二叉树查找等基础性的知识好好地复习几遍。

以哈 希查找为例,首先你需要去将各种冲突解决方法如链式结构、二次哈希等编写一遍,再试试不同种类的哈希函数,然后还需要试试在硬盘中如何实现哈希 查找,并考虑数据从硬盘读到内存后,如何组织硬盘中的数据才能快速地在内存中构建出哈希表来,…,这样你可能需要将一个哈希表写上十几个不同的版本, 并比较各个版本的性能、功能方面的区别和适用范围。

总之,对任何一种简单的东西,你需要考虑各种各样的需求,以需求来驱动研究。最后你将各种最基础性的查找结构和算法都了然于胸后,或许某天你再看其他更复杂的查找算法,或者你在散步时,脑袋里灵光一现,突然间就发现了更好的方法,也就从专家晋升为”学者”了。

学者所做的事情,通常都是在前人的基础上,进行一些小的优化和改进,例如别人发明了链式基数排序的方法,你第1个发现使用一定的方法,可以用数组替代链表进行基数排序,性能还能得到进一步提高。

由于学者需要的只是一些小的优化改进,因此中国还是有一定数量的学者。不过和国外的数量比起来,估计少了一个数量级而已。

也许有人会觉得现在中国许多公司申请专利的数量达到甚至超过西方发达国家了,我们的学者数量应该不会比他们少多少。因此,有必要把专利和这里说的创新的区别解释一下。

所 谓专利者,只要是以前没有的,新的东西,都可以申请专利;甚至是以前有的东西,你把他用到了一个新的领域的产品里去,也可以申请专利。比如你在房子里造一 个水泥柱子,只要以前没有人就这件事申请专利,那么你就可以申请专利,并且下次你把水泥柱子挪一个位置,又可以申请一个新的专利;或者你在一个柜子上打上 几个孔,下次又把孔的位置改一改,…,均可申请专利。

这层楼里所说的创新,是指学术层面的创新,是基础研究方面的创新,和专利的概念是完全不同的,难度也是完全不同的。你即使申请了一万个象那种打孔一类的专利,加起来也够不到这层楼里的一个创新。

当你爬到第6层楼时,你也许会有一种突破极限的快感,因为你终于把那道高高的写着”创新”二字的门槛给翻过去了,实现了”0”的突破。这时,你也许 有一种”独上高楼,欲望尽天涯路”的感觉,但是很快你会发现看到的都是比较近的路,远处的路根本看不清楚。如果你还有足够的体力的话,你会想爬到更高一层 的楼层去。

第7层 大师

从第6层楼爬到第7层楼,并没有多少捷径可走,主要看你有没有足够的能量。你如果能象Hoare 一样设计出一个快速排序的算法;或者象Eugene W. Myers一样设计出了一个用编辑图的最短路径模型来解决diff问题的算法;或者象M.J.D. Powell一样提出了一个能够处理非线性规划问题的SQP方法;或者你发现基于比较的排序算法,它的复杂度下界为O(NLogN);或者你发现用栈可以 将递归的算法变成非递归的;或者你设计出一个红黑树或者AVL树之类的查找结构;或者你设计出一个象C++或Java一样的语言;或者你发明了 UML;…,你就爬到了第7层,晋升为”大师”了。

上面举的这些例子中,其中有些人站的楼层比这层高,这里只是为了形象说明而举例他 们的某个成就。从上面列出的一些大师的贡献可以看出,成为大师必须要有较大的贡献。首先解决问题必须是比较重要的,其次你要比前辈们在某方面有一个较大的 提高,或者你解决的是一个全新的以前没有解决过的问题;最重要的是,主要的思路和方法必须是你自己提供的,不再是在别人的思路基础上进行的优化和改进。

看了上面这些要求,如果能量不够的话,你也许会觉得有些困难,所以不是每个人都能成为”大师”的。中国软件业里能称得上是”大师”的人,用屈指可数来形容,估计是绰绰有余。值得一提得是,国外的”大师”就象我们的”大牛”一样满天飞的多。

我 把我猜测本国有可能进到这层楼的大师列一下,以起个抛砖引玉的作用。汉王的”手写识别”技术由于是完全保密的,不知道它里面用了什么思想,原创思 想占的比重有多少,因此不知道该把它划到这层楼还是更高一层楼去。原山东大学王小云教授破解DES和MD5算法时,用到的方法不知道是不是完全原创的,如 果是的话也可进到这层楼来。

陈景润虽然没有彻底解决哥德巴赫猜想,但他在解决问题时所用的方法是创新的,因此也可以进到这层楼来。当然,如果能彻底解决哥德巴赫猜想,那么可以算到更高的楼层去。

求 伯君和王志东等大牛们,他们在做WPS和表格处理之类的软件时,不知是否有较大的原创算法在里面,如果有的话就算我错把他们划到了大牛层。由于所学有限, 不知道国内还有那些人能够得上”大师”的级别,或许有少量做研究的教授、院士们,可以达到这个级别,有知道的不妨回个帖子晾一晾。

鉴于”大师”这个称号的光环效应,相信有不少人梦想着成为”大师”。或许你看了前面举的一些大师的例子,你会觉得要成为大师非常困难。不妨说一下,现在有一条通往”大师”之路的捷径打开了,那就是多核计算领域,有大量的处女地等待大家去挖掘。

以前在单核时代开发的各种算法,现在都需要改写成并行的。数据结构与算法、图像处理、数值计算、操作系统、编译器、测试调试等各个领域,都存在大量的机会,可以让你进到这层楼来,甚至有可能让你进到更高一层楼去。

第8层 科学家

科学家向来都是一个神圣的称号,因此我把他放在了“大师”之上。要成为科学家,你的贡献必须超越大师,不妨随便举一些例子。

如果你象Dijkstra一样设计了ALGOL语言,提出了程序设计的三种基本结构:顺序、选择、循环,那么你可以爬到第8层楼来。顺便说一下,即使抛开这个成果,Dijkstra凭他的PV操作和信号量概念的提出,同样可以进到这层楼。

如果你象Don Knuth一样,是数据结构与算法这门学科的重要奠基者,你也可以进到这层楼来。当然,数据结构和算法这门学科不是某个人开创的,是许多大师和科学家集体开创的。

如果你象巴科斯一样发明了Fortran语言,并提出了巴科斯范式,对高级程序语言的发展起了重要作用,你也可以进到这层楼来。

或者你象Ken Thompson、Dennis Ritchie一样发明了Unix操作系统和功能强大、高效、灵活、表达力强的C语言,对操作系统理论和高级编程语言均作出重大贡献,那么你也可以进到这层楼来。

或者你有Frederick P. Brooks一样机会,可以去领导开发IBM的大型计算机System/360和OS/360操作系统,并在失败后反思总结,写出《人月神话》,对软件工程作出里程碑式的贡献,你也可以进到这层来。

或 者你提出了面向对象设计的基本思想,或者你设计了互联网的TCP/IP协议,或者你象Steven A.Cook一样奠定NP完全性的理论基础,或者你象Frances Allen一样专注于并行计算来实现编译技术,在编译优化理论和技术取得基础性的成就,…,均可进入这层。

当然,如果你发明了C++语言或者Java语言,你进不到这层来,因为你用到的主要思想都是这层楼中的科学家提出的,你自己并没有没有多少原创思想在里面。

看 了上面列出的科学家的成就,你会发现,要成为“科学家”,通常要开创一门分支学科,或者是这个分支学科的奠基者,或者在某个分支学科里作出里程碑式的重大 贡献。如果做不到这些的话,那么你能象Andrew C. Yao(姚期智)一样在对计算理论的多个方向如伪随机数生成,密码学与通信复杂度等各个方向上作出重要贡献,成为集大成者,也可以进入这层楼。

成为“科学家”后,如果你有幸象Dijkstra一样,出现在一个非常重视科学的国度。当你去世时,你家乡满城的人都会自动地去为你送葬。不过如果不幸生错地方的话,能不挨“板砖”估计就算万幸了。

从 上面随便举的一些例子中,你可能能猜到,西方科学家的数量是非常多的,于是你会想中国应该也有少量的科学家吧?我可以很负责任地告诉你一个不幸的结果,中 国本土产生的科学家的数量为0。目前在国内,软件领域的唯一的科学家就是上面提过的姚期智,还是国外请回来的,并不是本土产生的。

可能你 不同意我说的本土科学家数量为0的结论,因为你经常看到有许多公司里都有所谓“首席XX科学家”的头衔。我想说的是,这些所谓的“首席XX科学家”都是远 远够不到这层楼的级别的,有些人的水平估计也就是一个“牛人”或“大牛”的级别,好一点的最多也就一个“学者”的级别。尤其是那些被称作“首席经X学家” 的,基本上可以把称号改为“首席坑大家”。

虽然我国没有人能爬到这层楼上来,但是西方国家仍然有许多人爬到了比这层更高的楼上。如果要问我们比西方落后多少?那么可以简单地回答为:“落后了三层楼”。下面就来看看我们做梦都没有到过的更高一层楼的秘密。

第9层 大科学家

进 入这层楼的门槛通常需要一些运气,比如某天有个苹果砸到你头上时,你碰巧发现了万有引力,那么你可以进到这层楼来。当然,万有引力几百年前就被人发现了, 如果你现在到处嚷嚷着说你发现了万有引力,恐怕马上会有人打110,然后警察会把你送到不正常人类的聚集地去。因此,这里举万有引力的例子,只是说你要有 类似的成就才能进到这层楼来。

牛顿发现万有引力定律开创 了经典物理运动力学这门学科,如果你也能开创一门大的学科,那么你就从科学家晋升为“大科学家”。比如爱因斯坦创建了相对论,从一个小职员变成了大科学 家。当然大科学家可远不止这两人,数学界里比物理学界更是多得多,如欧几里得创建了平面几何,笛卡尔开创解析几何,还有欧拉、高斯、莱布尼茨等数不清的人 物,跟计算相关的大科学家则有图灵等人。

从上面列出的一些大科学家 可以发现,他们的成就不仅是开创了一个大的学科,更重要的是他们的成就上升到了“公理”的层面。发现公理通常是需要一点运气的,如果你的运气不够好的话, 另外还有一个笨办法也可以进到这层楼来,那就是成为集大成者。例如冯·诺伊曼,对数学的所有分支都非常了解,许多领域都有较大的贡献,即使撇开他对计算机 的开创贡献,成为大科学家照样绰绰有余。

当然,程序员们最关心的是 自己有没有机会变成大科学家。既然计算机这门大学科的开创性成果早就被冯·诺伊曼、图灵等人摘走了,那么程序员们是不是没有机会变成大科学家了呢?我们的 古人说得好:“江山代有才人出,各领风骚数百年”,现在在计算机这门学科下面诞生了许多非常重要的大的分支,所以你还是有足够的机会进到这层楼的。

如 果你能够彻底解决自然语言理解(机器翻译)这门学科中的核心问题,或者你在人工智能或者机器视觉(图像识别)方面有突破性的发现,那么你同样可以轻易地晋 升为“大科学家”。这样当某天你老了去世时,或许那天国人已经觉醒,你也能享受到如Dijkstra一样的待遇,有满城甚至全国的人去为你送葬。

现 在还剩下另外一个大家感兴趣的问题没有讨论,那就是这层中已经出现了牛顿、爱因斯坦、高斯等我们平常人都认为是顶级的科学家,是不是这层已经是楼顶了呢? 相信还记得本文标题的人应该知道现在仅仅是第9层,还有第10层没有到达呢。可能不少人现在要感到困惑了,难道还有人站在比牛顿、爱因斯坦、高斯等人更高 的楼层上?

这个世界上确实存在可以用一只手的手指数得清的那么几个人,他们爬到了第10层楼上。因此,第10层楼不是虚构的,而是确实存在的。如果对此有疑惑或者认为我在胡诌一番的话,那么不妨继续往下看下去,窥一下第10层楼的秘密。

第10层 大哲

看了这层楼的名字“大哲”,可能不少人已经猜到了这层楼的秘密,那就是你的成果必须要上升到哲学的高度,你才有机会能进到这层来。

当 然,上升到哲学高度只是一个必要条件,牛顿的万有引力似乎也上升到了哲学的高度,因为不知道引力到底是怎么来的,但是牛顿没有被划到这一层,因为进到这层 还有另外的条件,那就是你的成果必须引起了哲学上的深度思考,并能让人们的世界观向前跨进一大步。窃以为牛顿、爱因斯坦等人的成就还达不到让人们世界观向 前跨进一大步的程度。

所以,这层楼中的人的成就对我们普通人认识世界非常重要,你可以不学相对论,但是你不可以不对这层楼的人所作出的成 就不了解,否则你的世界观就是极其不完整的,会犯许多认识上的错误。不幸的是,中国的科普知识普及还不够到位,知道这层楼成就的人好像并不多,程序员中恐 怕更少。下面就来看看这些用一只手的手指数得清的大哲们,到底有什么成就,能比万有引力定律和相对论还重要。

vue-upload

发表于 2017-07-10

https://github.com/jinzhe/vue-upload

基于vuejs+webpack环境使用的上传组件
1.支持服务器的域名和接口单独设置
2.支持自定义提交字段
3.支持自定义xhr 提交的header字段/表单name/限定上传格式/文件大小/
4.支持图片上传前预先裁剪,其中包括裁减按钮替换、宽高、质量(quality)
5.支持自定义回调方法
6.支持裁减图片缩放,包括移动端手势支持

Options

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
:server (string) 服务器地址 // Server host,like "http://jinzhe.net"
:api (string) // Server api path,like "/api/v1/getdata/"
:params (object) 额外附加的字段,它是一个object
:filename (string) 文件表单名称,默认为file
:file (string) 返回的文件名或地址
:ext (string) 限制文件格式如“jpg,png,zip”
:header (object) 提交服务端的头部字段,它是一个object
:limit (int) 限制大小
:multiple (bool) 多文件上传
:preview (bool) 预览图片
:auto (bool) 是否自动上传
:crop (bool) 是否开启裁减
:width (int) 裁减宽度
:height (int) 裁减高度
:quality (float) 裁减质量 (0~1),默认0.8
:ok (string) 确定裁减显示文本
:cancel (string) 取消裁减显示文本
:container (DOM) 包含组件的根dom节点,这个是为了在网页内容很长的情况下为了显示正常使用的(移动滚动条),不设置默认指向document.body。
:success (function) 成功上传回调

How to use?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<template>
<div class="layout">
<div class="demo">
<upload
:server="upload.server"
:api="upload.api"
:params="upload.params"
:success="upload.success"
:file.sync="upload.file"
:crop="upload.crop"
:width="upload.width"
:height="upload.height"
:ok="upload.ok"
:cancel="upload.cancel">
<img src="./upload.svg">
</upload>
</div>
</div>
</template>
<script>
import upload from "./upload.vue"
export default {
components:{
upload
},
data() {
return {
upload:{
server:"",
api:"",
params:{
token:"test"
},
file:"",
preview:true,
crop:true,
width:400,
height:400,
cancel:"取消",
ok:"裁剪",
success:(data)=>{
alert(data.length)
}
},
}
}
}
</script>

在你的项目中执行命令

1
npm install vue-upload --save-dev

安装node的最新版本

发表于 2017-07-10

首先,看看你的node版本

1
node -v

清除node的cache

1
sudo npm cache clean -f

利用n来管理node的版本

安装n模块

1
sudo npm install -g n

在你的控制面板那里看你安装了node的那些版本

1
n

终端就显示出

1
2
ο node/6.6.0
node/7.10.0

因为我只安装了这两个版本
这个7.10.0的是我按照这个步骤安装的最新版本

想安装最新版本的话

1
sudo n latest

安装稳定版本的话

1
sudo n stable

删除某个版本,0.10.1是版本号

1
sudo n rm 0.10.1

想用一个指定的版本来执行脚本的话

1
sudo n use 版本号 some.js

安装完之后 你可以再看你的node版本

1
node -v

js阻止移动端默认事件以及只阻止横向滚动事件方法

发表于 2017-06-16
js阻止移动端默认事件,是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为,但是如果要实现阻止横向滚动事件而不阻止竖向滚动行为就要写一个方法通过手指滑动的
js阻止移动端默认事件,是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为,但是如果要实现阻止横向滚动行为而不阻止竖向滚动行为就要写一个方法通过手指滑动的偏移量来判断了。

在手机移动端手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,所以要先禁止缩放。

移动端禁止缩放

通过meta元标签来设置。

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"></pre>
移动端禁止滚动

preventDefault是阻止默认行为,touch事件的默认行为就是滚动。
event.preventDefault();

只禁止横向滚动而不禁止竖向滚动
1
2
3
4
5
6
7
8
9
10
move:function(event){
  //当屏幕有多个touch或者页面被缩放过,就不执行move操作 懒人建站
  if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
  var touch = event.targetTouches[0];
  endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
  isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时,表示纵向滑动,0为横向滑动
  if(isScrolling === 0){
    event.preventDefault(); //阻止触摸事件的默认行为,即阻止滚屏
  }
}

touchmove触发后,会生成一个event对象,在event对象中获取touches触屏列表,取得第一个touch,并记下pageX,pageY的坐标,算出差值,得出手指滑动的偏移量,使当前DOM元素滑动。
当然move方法要在touchmove事件中调用

阻止移动端默认事件完整测试代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var startPos = 0,endPos = 0,isScrolling = 0;
document.addEventListener('touchstart',function(event){
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch
startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值
isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
}, false);
//解绑事件 web前端开发
document.addEventListener('touchend',function(event){
document.removeEventListener('touchmove',this,false);
document.removeEventListener('touchend',this,false);
}, false);
document.addEventListener('touchmove',function(event){
//当屏幕有多个touch或者页面被缩放过,就不执行move操作
if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时,表示纵向滑动,0为横向滑动
if(isScrolling === 1){
alert(0);
event.preventDefault(); //阻止触摸事件的默认行为,即阻止滚屏
}
}, false);
例如
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script type = "text/javascript">
document.addEventListener('targetTouches', function(event) {
move(event);
event.preventDefault();
})
function move(event) {
if(event.changedTouches.length > 1 || event.scale && event.scale !== 1) return;
  var touch = event.changedTouches[0];
  endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
  isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时,表示纵向滑动,0为横向滑动
  if(isScrolling === 0){
    event.preventDefault(); //阻止触摸事件的默认行为,即阻止滚屏
  }
};
</script>
##### h5页面在移动端浏览器中旋转自适应
<script type="text/javascript">
window.addEventListener('resize', dpr);
dpr('init');
function dpr(type) {
var d = document;
const desWidth = 750;
var _dpr = (1 / window.devicePixelRatio);
var orientation =
screen.orientation && screen.orientation.type === 'portrait-primary' ? 0 : (window.orientation === 0 ? 0 : -90);
console.log('type:' + type + ' orientation:' + orientation);
_dpr = 1;
const _MaxWidth = 414 * window.devicePixelRatio;
const userAgent = navigator.userAgent;
var widthStr = 'device-width';
var isMobile = true;
var iWidth = 0;
var _html = d.getElementsByTagName('html')[0];
/* eslint eqeqeq: 0 */
if (userAgent.toLowerCase().indexOf('iphone') == -1 && userAgent.toLowerCase().indexOf('android') == -1) {
isMobile = false; // iWidth = _MaxWidth;
widthStr = iWidth + 'px';
}
d.querySelector('[name="viewport"]').setAttribute('content',
'width=' + widthStr + ' , initial-scale=' + _dpr + ', maximum-scale=' + _dpr + ', minimum-scale=' + _dpr + ', user-scalable=no');
// 竖屏
if (orientation === 0) {
iWidth = Math.min(d.documentElement.clientWidth, window.innerWidth);
} else {
iWidth = Math.min(d.documentElement.clientWidth, window.innerWidth, window.innerHeight);
}
console.log('clientWidth:' + d.documentElement.clientWidth + ' innerWidth:' + window.innerWidth + ' innerHeight:' + window.innerHeight);
console.log('iWidth: ' + iWidth + ' desWidth: ' + desWidth);
if (!isMobile) iWidth = _MaxWidth;
_html.style.fontSize = (((100 * iWidth) / desWidth)) + 'px';
_html.dataset.dpr = 1; // window.devicePixelRatio;
};
</script>

Mac上使用OpenVPN

发表于 2017-05-26

Mac

  1. 打开Mack中的命令行工具
  2. 在打开的命令行工具中输入如下语句:
1
ruby -e "$(curl --insecure -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. 按回车键
  2. 输入密码
    此时能够看到 installation successful 安装成功
  3. 此时可以在命令行中输入命令brew进行测试,可以看到如下结果,说明安装成功。

    1
    2
    3
    4
    5
    6
    6. brew install openvpn
    7. openvpn --version 查看版本
    8. git clone https://github.com/OpenVPN/easy-rsa.git
    9. cd easy-rsa
    10. cd easyrsa3
    11. cp openssl.conf openssl.conf
  4. 进入openvpn所在目录
    cd /usr/local/etc/openvpn

  5. 安装Tunnelblick https://tunnelblick.net

  6. 新增vpn 配置将config.ovpn文件拖拽到工具中

vue轮播图插件vue-awesome-swiper的使用

发表于 2017-04-27

最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤:

第一步安装

1
2
3
npm install vue-awesome-swiper --save
https://github.com/surmon-china/vue-awesome-swiper 官网地址
`

第二部在main.js中引入

1
2
3
4
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
`

然后就可以在组件中使用该插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
[html] view plain copy
<template>
<div>
<swiper :options="swiperOption" ref="mySwiper">
<!-- 这部分放你要渲染的那些内容 -->
<swiper-slide v-for="item in items">
</swiper-slide>
<!-- 这是轮播的小圆点 -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
//是一个组件自有属性,如果notNextTick设置为true,组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
notNextTick: true,
pagination: '.swiper-pagination',
slidesPerView: 'auto',
centeredSlides: true,
paginationClickable: true,
spaceBetween: 30,
onSlideChangeEnd: swiper => {
//这个位置放swiper的回调方法
this.page = swiper.realIndex+1;
this.index = swiper.realIndex;
}
}
}
},
//定义这个sweiper对象
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted () {
//这边就可以使用swiper这个对象去使用swiper官网中的那些方法
this.swiper.slideTo(0, 0, false);
}
}
</script>
<style>
</style>
`

如何安装Git

发表于 2017-04-27

Windows

下载安装 git

Linxu

Debian/Ubuntu

12.04 下

Ubuntu12.04中默认没有安装Git。需要自行安装

1
2
3
$ sudo add-apt-repository ppa:git-core/ppa
$ sudo apt-get update
$ sudo apt-get install git

12.04 以上

1
$ sudo apt-get install git

Centos/RedHat

1
2
$ sudo yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel
$ sudo yum -y install git-core

Mac

mac 下自带 git,也可以从官网下载安装 git

使用Hexo搭建Github个人博客

发表于 2017-04-27

网上关于hexo搭建博客的文章已经有很多,这里只做为个人博客的试笔文章,记录下hexo博客搭建的过程和心得。

Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

搭建准备

  • Node.js
  • Git & Github

Node.js安装方式很多,见 如何安装Node.js 文章
Git 安装方法,见 如何安装Git 文章

node.js 和 git 都安装完成后即可开始搭建hexo个人博客了。

开始搭建

安装 hexo

1
2
3
4
5
6
7
$ cd d:/hexo
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo g # 或者hexo generate
$ hexo s # 或者hexo server,可以在http://localhost:4000/ 查看

这里有必要提下Hexo常用的几个命令:

1
2
3
4
$ cd/themes
hexo generate (hexo g) 生成静态文件,会在当前目录下生成一个新的叫做public的文件夹/
hexo server (hexo s) 启动本地web服务,用于博客的预览
hexo deploy (hexo d) 生成部署

目前我安装所用的本地环境如下:(可以通过hexo -v查看)

1
2
3
4
5
6
7
8
9
10
11
12
hexo: 3.2.0
hexo-cli: 1.0.1
os: Windows_NT 6.3.9600 win32 x64
http_parser: 2.5.2
node: 4.4.1
v8: 4.5.103.35
uv: 1.8.0
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 46
openssl: 1.0.2g

安装主题

1
$ hexo clean

应用主题

1
2
3
4
5
$ cd/themes
$ git clone git@github.com:iissnan/hexo-theme-next.git
$ git pull
$ hexo g # 生成
$ hexo s # 启动本地web服务器

二:Github Pages设置

什么是Github Pages

GitHub Pages 本用于介绍托管在GitHub的项目,不过,由于他的空间免费稳定,用来做搭建一个博客再好不过了。

每个帐号只能有一个仓库来存放个人主页,而且仓库的名字必须是username/username.github.io,这是特殊的命名约定。你可以通过http://username.github.io 来访问你的个人主页。

这里特别提醒一下,需要注意的个人主页的网站内容是在master分支下的。

使用hexo deploy部署

hexo deploy可以部署到很多平台,具体可以参考这个链接. 如果部署到github,需要在配置文件_config.xml中作如下修改:

1
2
3
4
5
6
7
deploy:
type: git
repo: git@github.com:jiji262/jiji262.github.io.git
branch: master
$ cd/blog
$ npm install hexo-deployer-git --save

然后在命令行中执行

1
hexo d

即可完成部署。

1)如果出现下面这样的错误:

1
2
3
4
Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.

则是因为没有设置好public key所致。
在本机生成public key(参考github帮助):

1
2
3
4
5
6
7
#ssh-keygen -t rsa -b 4096 -C "963022018@qq.com"
回车
Overwrite (y/n)? y
yuying$ ls -a
cd /Users/yuying/.ssh/
.ssh yuying$ ls -a
cat id_rsa.pub

然后在#user_id/.ssh目录下会生成两个文件,id_rsa.pub和id_rsa.
然后登陆github,在SSH设置页面添加上刚才的public key文件也就是id_rsa.pub的内容即可。

Hexo 主题配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
# Header
menu:
主页: /
所有文章: /archives
# 随笔: /tags/随笔
# SubNav
subnav:
github: "dushao103500"
weibo: "DanD逆光之处是暖伤"
rss: "#"
zhihu: "#"
#douban: "#"
#mail: "dushao1314@foxmail.com"
#facebook: "#"
#google: "#"
#twitter: "#"
#linkedin: "#"
rss: /atom.xml
# Content
excerpt_link: more
fancybox: true
mathjax: true
# Miscellaneous
google_analytics: ''
favicon: /favicon.png
#你的头像url
avatar: ""
#是否开启分享
share: true
#是否开启多说评论,填写你在多说申请的项目名称 duoshuo: duoshuo-key
#若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论
duoshuo: true
#是否开启云标签
tagcloud: true
#是否开启友情链接
#不开启——
#friends: false
#是否开启“关于我”。
#不开启——
#aboutme: false
#开启——
aboutme: 我是谁,我从哪里来,我到哪里去?我就是我,是颜色不一样的吃货…

至此,Hexo+Github Pages搭建个人博客完成

我的面试过程

发表于 2017-04-27

作为半路出家转前端开发零基础的我,在经历了几年工作后再次面试前端所获得的一些经验,我想在这给大家分享一下(也是写给多年后的自己),
面试之前的小故事
精心准备的我,不停刷面试题,整夜整夜的看着HTML/JS/CSS知识点,还有那些最新的、时髦的技术,看看到时候能不能唬住面试官;而有些人对自己胸有成竹,这么多年的前端经验了,啥项目没有经历过,不就一个面试,怕啥呢。

很快或者很慢的来到那天。我打扮的清清爽爽漂漂亮亮的,打扮的好会有加分不,没错,第一印象也是挺重要的。途中有些人可能会还一直想着面试官会问啥题目呢,那啥**属性是什么来着呢,再次拿出手机默默的看起资料;有些人可能就会想着公司不知道环境和福利不知道咋样,最好别碰到傻逼一样的面试官哎,不然这以后咋相处好呢。

来到公司,大小公司大家都见多了嘛,也是得看发展是吧,我也不是肤浅的人,见到前台妹妹,领进会议室里,让稍等一下,她去通知面试官,过了一会儿,不是面试官进来,而是前台妹妹给我送来一杯水。面试官踱步向前,咦~,我是继续坐着呢,还是站着呢,还是站起来显礼貌一些嗯。

给面试的一般会是Team Leader或者非常资深的工程师。首先会让你自我介绍下,然后巴拉巴拉介绍自己,途中或者聊到面试官喜欢的部分那就会中断问几个问题吧,介绍完自己,就进入正式的战斗了吧,一般会有2-3轮的回合。

普通型
面试中问题会比较的零碎,html/js/css肯定都会有涉及。知识点不会有太大的规律,可能几个公司面试下来你遇到的问题一个都不带重复的。哎,前端的知识点就是乍一看深似海,仔细一看深似黑洞啊。问题好的话,一方面考察了面试人对前端接触的广度,深度的话也可以从中接触到一些。因为面试的时间有限,其实也非常考验面试官对一个人的洞察能力。

进阶型
除了基本的问题,面试中会有一些明显设计过的题目。针对某几个知识点,或让你手写代码,或让你提供算法或思路。如果之前没有遇到过这类问题的话其实一下子真的挺难回答,或者直接懵逼了,或者回答不出面试官满意的答案。这其实对工程师的要求也是比较的高,不能只是单纯的切切页面,用用插件,需要对某一类问题或者模式或者算法有深入的了解,对问题的解决思路有很好的把握。

算法可能不是前端工程师的长项,但作为优秀的工程师,对算法的了解应该会只深不浅。

依稀记得的面试题

1、实现一个左右两栏的布局,左边宽度固定为220px,右边宽带为自使用,使用三种以上的方式来实现。
2、设计一个dialog组件,列出设计思路。
3、设计一个页面全局的进度条,谈谈你的思路。
4、在浏览器里输入一个url,一直到页面呈现出来,这之间都发生了一些什么事?
5、实现浏览器的缓存有哪些方式?
6、js的闭包和模块化有什么关系?模块化如何管理? 它的优势是什么?
7、webpack的工作原理?
8、你熟悉的一种流行web框架是什么?他的有什么特点以及工作原理?
9、前端都有哪些攻击方式以及如何防范?
10、js构造函数的原型和原型链之间有什么区别?
11、es6的新语法有哪些?并说出他们的作用。
12、如何实现前后端分离?
13、node.js的多进程之间如何通信?底层是基于什么来实现数据传递?
14、使用nodejs如何做mysql的查询处理?
15、 gulp webpack的区别以及原理?
16、diff算法原理?
17、v8引擎?
18、写一段同步休眠的代码?
19、git flow的工作原理?
20、作者写h5的思想是什么?
21、node.js与浏览器环境javascript有那些区别
22、node.js作为web服务中间层可以做那些事情
23、redux原理
24、对作用域 原型的了解

Babel是如何读懂JS代码的

Babel的功能:以字符串的形式将源代码传给编译器,编译器就会返回一段新的代码字符串,输入语言是ES6+,编译目标语言是ES5。
分为三个阶段:
1、解析:将代码字符串解析成抽象语法树
2、变换:对抽象语法树进行变换操作
3、再建:根据变换后的抽象语法树再生成代码字符串

webpack承担了哪些工作?原理?功能?

1、依赖管理:方便引用第三方模块、让模块更容易复用、避免全局注入导致的冲突、避免重复加载或加载不需要的模块。
2、合并代码:把各个分散的模块集中打包成大文件,减少HTTP的请求链接数,配合UglifyJS可以减少、优化代码的体积。
3、各路插件:babel把ES6+转译成ES5-,eslint可以检查编译期的错误……

原理:最简单地说,就是分析代码,找到require、exports、define等“关键词”,并替换成对应模块的“引用”……

webpack主要就是模块化、处理依赖 和 打包-

举例来说。。我有个index.html
上面要引用一大堆JS/CSS文件,main.css、other.css、entry.js、a.js、b.js、c.js…

1
2
3
4
5
现在没有webpack,
a.js要调用b.js里的一个函数,所以a.js要放在b.js的后面
c.js又要调用b.js里的一个变量,c又要放b后面
b.js又要使用某个js里的数据。。。
有上百个js的时候,你要手动处理它们的关系你会立马死翘翘...搞错一个就完蛋

1
2
现在我有了webpack
webpack的理念就是一切皆模块,把那一大堆css,js在我的一个总入口文件require引入,剩下的事情?webpack会自动处理,包括所有模块的前后依赖关系打包压缩合并成一个js、公共代码抽离另外成为js、某些你指定的js单独打包...这些模块可以是css/JS/图片/字体。。等等等等

webpack与gulp

webpack是一个打包工具
gulp是构建工具

MVC

  1. View 传送指令到 Controller
  2. Controller 完成业务逻辑后,要求 Model 改变状态
  3. Model 将新的数据发送到 View,用户得到反馈

MVVM (model - View - ViewModle)分离视图和模型

  • ViewModel,注意这里的“Model”指的是View的Model,跟上面那个Model不是一回事。所谓View的Model就是包含View的一些数据属性和操作的这么一个东东,这种模式的关键技术就是数据绑定(data binding),View的变化会直接影响ViewModel,ViewModel的变化或者内容也会直接体现在View上。这种模式实际上是框架替应用开发者做了一些工作,开发者只需要较少的代码就能实现比较复杂的交互。

布局less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- 变量是@
- .class()作为mixin
- &:entend(.class); 直接引入
- 直接申明函数
.mixin(@x: 200px) {
text-align: center;
width: @x;
}
- when 代替if
- // 循环
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // next iteration
width: (10px * @counter); // code for each iteration
}

SASS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- 变量 $fontSize: 12px; 也可以以数组。map形式出现, !global。!default
- 变量作为属性或在某些特殊情况下等则必须要以#{$variables}
- @each遍历
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
- // mixin
@mixin center($aa: 100px) {
width: $aa;
}
.demo {
@include center(80px)
}
- 继承 @extend .class;

安全问题

1
2
3
4
5
XSS(cross-site-srcipting)
js注入
- 将前端输出数据都进行转义encodeURI
- cookie 加上HttPOnly
CSRF攻击—跨站请求伪造 -- 第三方请求调用

es6 新特性

箭头操作符

1
2
3
4
5
var arr = [1, 2, 3];
arr.forEach(function(i, v, a) {
console.log(v);
});
arr.forEach(v = > console.log(v));

类的支持

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//类的定义
class baseModel {
//ES6中新型构造器
constructor(options, data) { // class constructor,node.js 5.6暂时不支持options = {}, data = []这样传参
this.name = 'Base';
this.url = 'http://azat.co/api';
this.data = data;
this.options = options;
}
//实例方法
getName() { // class method
console.log(`Class name: ${this.name}`);
}
}
//测试我们的类
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName(); //输出 ‘My name is dummy’
wayou.sayName(); //输出 ‘My name is wayou’
wayou.program(); //输出 ‘I'm coding...’

字符串模板

1
2
3
4
// 产生一个随机数
var num = Math.random();
// 将这个数字输出到console
console.log(`your num is ${num}`);

解构

1
2
3
4
5
6
7
8
9
var [x,y]=getVal(),//函数返回值的解构
[name,,age]=['wayou','male','secrect'];//数组解构
function getVal() {
return [ 1, 2 ];
}
console.log('x:'+x+', y:'+y);//输出:x:1, y:2
console.log('name:'+name+', age:'+age);//输出: name:wayou, age:secrect

let与const 关键字

1
2
for (let i=0;i<2;i++)console.log(i);//输出: 0,1
console.log(i);//输出:undefined,严格模式下会报错

Promises

Promises是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的deferred 对象。当你发起一个异步请求,并绑定了.when(), .done()等事件处理程序时,其实就是在应用promise模式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//创建promise
var promise = new Promise(function(resolve, reject) {
// 进行一些异步或耗时操作
if ( /*如果成功 */ ) {
resolve("Stuff worked!");
} else {
reject(Error("It broke"));
}
});
//绑定处理程序
promise.then(function(result) {
//promise成功的话会执行这里
console.log(result); // "Stuff worked!"
}, function(err) {
//promise失败会执行这里
console.log(err); // Error: "It broke"
});

1、js的数据类型?

基本数据类型:String、boolean、Number、undefined、null
引用数据类型:Object、Array、Date、RegExp、Function

拓展:如何判断数组数据类型?
1、通过专有方法判断如:push(),pop(); //可自己给变量定义该方法,有时失效
2、obj instanceof Array 返回值判断;
3、es5和jquery都有方法Array.isArray()。
4、toString.call(param) 判断;返回格式 [object Undefined]
5、obj.constructor === Function 返回值判断

2、获取所有的checkbox?

1
2
3
4
5
6
7
8
9
var domlist = document.getElementsByTagName("input");
var checkboxlist = [];
var len = domlist.length;
for (var i = 0; i < len; i++) {
if(domlist[i].type == "checkbox"){
checkboxlist.push(domlist[i])
}
}

//(for效率更高)在测试五百多个不同input中,while:for = 3~2ms:1~0ms,显然for效率更高

3、数组:

1
2
3
4
5
6
7
var numberArray = [3,6,2,4,1,5];
倒序:numberArray.reverse();
numberArray.prototype.map.call(str, function(x) { //同时利用了call()方法
return x;
}).reverse().join('');
降序:numberArray.sort(function(a-b){return b-a})
a.concat(b,c,d)

4、随机取10个10-100数?

1
2
3
4
5
6
7
function getNumArr(n){
var arr = [];
for(var i = 0;i <n;i++){
arr.push(parseInt(Math.random()*90+10))
}
return arr;
}

5、闭包的使用?闭包可以简单理解成“定义在一个函数内部的函数“。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
for(var i = 0,len=domlist.length;i<len;i++){
domlist[i].onclick = function(){
console.log(i);
}
}
都输出domlist.length;
onclick 是一个异步函数;当onclick执行的时候i此时变成了domlist.length;
解决:(闭包)
```bash
for(var i=0,len=domlist.length;i<len;i++){
domlist[i].onclick = (function(a){
return function(){
console.log(a)
}
})(i);
}

//也可以设置私有属性;

6、双等号的类型转换?

1
2
3
4
5
6
7
8
9
10
11
12
13
var undefined;
undefined == null; // true
1 == true; // true
2 == true; // false
0 == false; // true
0 == ''; // true
NaN == NaN; // false
[] == false; // true
[] == ![]; // true
// alert(!![]) //true
// alert(![]) //false
// alert([] == 0) //true
// alert(false == 0) //true

分析:undefined与null 但不全等(===)
当为number与string时,会将string转换为number;
number和boolean时,会将boolean转换为number
number或string与Object,会将Object转换成number或string
(附:js中的数据类型转换?)
函数转换:parseInt()、parseFloat()、toString()
强类型转换:Boolean()、Number()、String()
弱类型转换:“==”、“-”、“+”、if()

(拓展:for循环中的效率问题?)

1
2
3
1.for(var i=0;i<arr.length;i++)
2.for(var i in arr)
3.for(var i=0,len=arr.length;i<len;i++)

第三种效率更高!
在大数据下:
第三种方式比第一种执行速度快3~4倍;
至于第三种比第三种快100多倍开外(详细数据:http://www.111cn.net/wy/js-ajax/39368.htm)

前端开发中会遇到哪些问题需要考虑

1
2
3
4
5
1. 组建化 模块化
2. 开发效率
3. 运行效率
4. 可维护性
5. 体验优化

在浏览器中输入域名 按下回车键后会发生哪些事情?

步骤1:需要查找域名的IP地址,DNS查找过程:
(1)浏览器缓存 – 浏览器的缓存DNS记录一段时间。
(2)系统缓存 – 如果在浏览器缓存里没有找到需要的记录,浏览器会做一个系统调用(windows里是gethostbyname)这样便可获得系统缓存中的记录。
(3)路由器缓存 – 接着,前面的查询请求发向路由器,它一般会有自己的DNS缓存。
(4)ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
(5)递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索,从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名,所以到顶级服务器的匹配过程不是那么必要了。
步骤2:浏览器给web服务器发送一个HTTP请求。请求中也包含浏览器存储的该域名的cookies。可能你已经知道,在不同页面请求当中,cookies是与跟踪一个网站状态相匹配的键值。这样cookies会存储登录用户名,服务器分配的密码和一些用户设置等。Cookies会以文本文档形式存储在客户机里,每次请求时发送给服务器。
步骤3:服务的永久重定向响应
步骤4:浏览器跟踪重定向地址
步骤5:服务器“处理”请求
步骤6:服务器发回一个HTML响应
步骤7:浏览器开始显示HTML
步骤8:浏览器发送获取嵌入在HTML中的对象

1
2
3
4
5
6
7
data.map((item) => (
)) 与
data.map((item) => {
})
的区别(something) == return { something }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
["1", "2", "3"].map(parseInt); //结果 [1, NaN, NaN] 如果想得到[1, 2,3]应该这么做
function returnInt(element){
return parseInt(element, 10);
}
["1", "2", "3"].map(returnInt);
```  
#### cookie、 sessionStorage 、localStorage之间的区别和使用
```bash
1.cookie:存储在用户本地终端上的数据
2.localStorage - 没有时间限制的数据存储
3.sessionStorage - 针对一个 session 的数据存储,当用户关闭浏览器窗口后,数据会被删除。
``` 
sessionStorage 、localStorage 和 cookie 之间的区别
共同点:都是保存在浏览器端,且同源的.
区别:cookie数据始终在同源的http请求中携带,cookie在浏览器和服务器间来回传递;cookie数据不能超过4k,
而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的
#### HTML语义化
语义化的标签 像标题(H1~H6)、列表(li)、强调(strong em)等等
好处:便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析
#### CommonJS规范
1、CommonJs规范的出发点:JS没有模块系统、标准库较少、缺乏包管理工具;为了让JS可以在任何地方运行,以达到Java、C#、PHP这些后台语言具备开发大型应用的能力;
2、在CommonJs规范中:
一个文件就是一个模块,拥有单独的作用域;
普通方式定义的变量、函数、对象都属于该模块内;
通过require来加载模块;
通过exports和modul.exports来暴露模块中的内容;
3、所有代码都运行在模块作用域,不会污染全局作用域;模块可以多次加载,但只会在第一次加载的时候运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果;模块的加载顺序,按照代码的出现顺序是同步加载的;
<!-- #### react-router 按需加载
程序应当只加载当前渲染页所需的 JavaScript,也就是大家说的“代码拆分" — 将所有的代码分拆成多个小包,在用户浏览过程中按需加载。
#### Webpack 配置
首先在 webpack.config.js 的 output 内加上 chunkFilename
```bash
output: {
path: path.join(__dirname, '/../dist/assets'),
filename: 'app.js',
publicPath: defaultSettings.publicPath,
// 添加 chunkFilename
chunkFilename: '[name].[chunkhash:5].chunk.js',
},

chunkhash 是文件的 hash 码,这里只使用前五位。

添加首页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ReactDOM.render(
(
<Router history={browserHistory}>
{/* 主页 */}
<Route path="/" component={App}>
{/* 默认 */}
<IndexRoute component={HomePage} />
{/* baidu */}
<Route path="/baidu" component={BaiduPage}>
<Route path="result" component={BaiduResultPage} />
<Route path="frequency" component={BaiduFrequencyPage} />
</Route>
{/* 404 */}
<Route path='/404' component={NotFoundPage} />
{/* 其他重定向到 404 */}
<Redirect from='*' to='/404' />
</Route>
</Router>
), document.getElementById('app')
);

按需加载之后,我们需要让路由动态加载组件,需要将 component 换成 getComponent。首先将路由拆出来(因为路由庞大之后全部写在一起会很难看),创建一个根路由 rootRoute:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const rootRoute = {
path: '/',
indexRoute: {
getComponent(nextState, cb) {
require.ensure([], (require) => {
cb(null, require('components/layer/HomePage'))
}, 'HomePage')
},
},
getComponent(nextState, cb) {
require.ensure([], (require) => {
cb(null, require('components/Main'))
}, 'Main')
},
childRoutes: [
require('./routes/baidu'),
require('./routes/404'),
require('./routes/redirect')
]
}
ReactDOM.render(
(
<Router
history={browserHistory}
routes={rootRoute}
/>
), document.getElementById('app')
);

history 不变,在 Router 中添加 routes 属性,将创建的路由传递进去。

这里有四个属性:

1. path

将匹配的路由,也就是以前的 path。

2. getComponent

对应于以前的 component 属性,但是这个方法是异步的,也就是当路由匹配时,才会调用这个方法。
这里面有个 require.ensure 方法

1
require.ensure(dependencies, callback, chunkName)

这是 webpack 提供的方法,这也是按需加载的核心方法。第一个参数是依赖,第二个是回调函数,第三个就是上面提到的 chunkName,用来指定这个 chunk file 的 name。

3.indexRoute

用来设置主页,对应于以前的 。

4.childRoutes

这里面放置的就是子路由的配置,对应于以前的子路由们。我们将以前的 /baidu、/404 和 * 都拆了出来,接下来将分别为他们创建路由配置。

路由控制 上面的childRoutes 里面,我们 require 了三个子路由,在目录下创建 routes 目录,将这三个路由放置进去。

1
2
3
4
5
6
7
8
9
10
11
12
routes/
├── 404
│ └── index.js
├── baidu
│ ├── index.js
│ └── routes
│ ├── frequency
│ │ └── index.js
│ └── result
│ └── index.js
└── redirect
└── index.js

和 rootRoute 类似,里面的每个 index.js 都是一个路由对象:

/404/index.js

1
2
3
4
5
6
7
8
module.exports = {
path: '404',
getComponent(nextState, cb) {
require.ensure([], (require) => {
cb(null, require('components/layer/NotFoundPage'))
}, 'NotFoundPage')
}
}

/baidu/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
module.exports = {
path: 'baidu',
getChildRoutes(partialNextState, cb) {
require.ensure([], (require) => {
cb(null, [
require('./routes/result'),
require('./routes/frequency')
])
})
},
getComponent(nextState, cb) {
require.ensure([], (require) => {
cb(null, require('components/layer/BaiduPage'))
}, 'BaiduPage')
}
}
``` -->
#### 浏览器缓存
1. http缓存是基于HTTP协议的浏览器文件级缓存机制。
2. websql这种方式只有较新的chrome浏览器支持.
3. IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据, IndexedDB 分别为同步和异步访问提供了单独的 API ,另外浏览器可能对indexDB有50M大小的限制,
4.cookie
5.localstorage
6.sessionstorage
#### apply、call、bind区别、用法
apply和call都是为了改变某个函数运行时的上下文而存在的(就是为了改变函数内部this的指向);
如果使用apply或call方法,那么this指向他们的第一个参数,apply的第二个参数是一个数组,call的第二个及其以后的参数都是数组里面的元素,就是说要全部列举出来;
他们的常用用法:
1.数组之间的追加;
2.获取数组中的最大值和最小值,利用他们扩充作用域拥有Math的min和max方法;
由于没有什么对象调用这个方法,所以第一个参数可以写作null或者本身;
```bash
var numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(Math, numbers), //458
maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

bind()–也是改变函数体内this的指向;
bind会创建一个新函数,当调用这个函数的时候,绑定函数会以创建它时传入bind()方法的第一个参数作为this,传入bind()方法的第二个及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数

bind与apply、call最大的区别就是:bind不会立即调用,其他两个会立即调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var fn = {
_int: 2,
fun: function () {
document.getElementById('box').onclick = (function () {
console.log(this._int);
}).bind <!-- call applay -->(this);
<!--
这里的this是fn,所以正确的访问_int,
使用bind,会在点击之后打印出来
call || applay 在网页刷新之后就会打印出来
-->
}
}
fn.fu();

都是用来改变函数的this对象的指向的;
第一个参数都是this要指向的对象;
都可以利用后续参数传参;
bind是返回对应函数,便于稍后调用,apply、call是立即调用;

JavaScript模块化:使用requireJS按需加载

通过模块加载器可以有效的解决这些问题:
JS文件的依赖关系。
通过异步加载优化script标签引起的阻塞问题
可以简单的以文件为单位将功能模块化并实现复用

设置国内npm镜像

发表于 2017-04-27

npm全称Node Package Manager,是node.js的模块依赖管理工具。由于npm的源在国外,所以国内用户使用起来各种不方便。下面整理出了一部分国内优秀的npm镜像资源,国内用户可以选择使用。

国内优秀npm镜像

淘宝npm镜像

  • 搜索地址:http://npm.taobao.org/
  • registry地址:http://registry.npm.taobao.org/

cnpmjs镜像

  • 搜索地址:http://cnpmjs.org/
  • registry地址:http://r.cnpmjs.org/

如何使用

有很多方法来配置npm的registry地址,下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例:

1. 临时使用

1
$ npm --registry https://registry.npm.taobao.org install express

2. 持久使用

1
2
3
4
5
$ npm config set registry https://registry.npm.taobao.org
// 配置后可通过下面方式来验证是否成功
$ npm config get registry
// 或
$ npm info express

3. 通过cnpm使用

1
2
3
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
// 验证
cnpm install express

文章转载自 国内优秀npm镜像推荐及使用

123
玉英(小丸子)

玉英(小丸子)

将来的你,一定会感谢现在拼命努力的自己

22 日志
Github
© 2017 玉英(小丸子)
由 Hexo 强力驱动
主题 - NexT.Pisces