**第一周（2.17~2.23）** * Node.js CLI工具编写 * [Mobx](https://cn.mobx.js.org/)入门 * 阅读《CSS权威指南 第四版》 * [浏览器的原理](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/) * OOCSS * 浏览《精通CSS》和《CSS3艺术》 * React实践 **第二周（2.24~3.1）** * 骨架屏选择，[page-skeleton-webpack-plugin](https://github.com/ElemeFE/page-skeleton-webpack-plugin)和[react-content-loader](https://github.com/danilowoz/react-content-loader) * [Emotion](https://emotion.sh/docs/introduction) * React组件通信 * [OOCSS](https://github.com/stubbornella/oocss/wiki)、[BEM](https://en.bem.info/methodology/)、[SMACSS](http://smacss.com/) * [YUI](https://yuilibrary.com/) * [Ant Design中的设计风格指南](https://ant.design/docs/spec/introduce-cn) **第三周（3.2~3.8）** * Excel查询函数 * 组件间通信 * ref和useEffect() **第四周（3.9~3.15）** * CSS Shapes * 微信公众号 JS-API踩坑 **第五周（3.16~3.22）** * CSS渐变 * CSS矩阵、三维变形 * CSS滤镜 * CSS合成 * CSS裁剪和遮罩 * [LibreOffice]([https://www.libreoffice.org/](https://www.libreoffice.org/)) **第六周（3.23~3.29）** * CSS网格布局 * 阅读Node.js书籍《狼书》 **第七周（3.30~4.5）** * CSS网格布局 * Node.js Buffer、流和事件 **第八周（4.6~4.12）** * Node.js 文件系统和网络 * Node.js 编写命令行 * 编译原理 **第九周（4.13~4.19）** * 重温躬行记 * webpack构建过程、特点、热更新、优化 * 前端路由原理 * 双向绑定，defineProperty和Proxy **第十周（4.20~4.26）** * 自制前端脚手架 * webpack集成Jest * webpack集成ESLint * webpack集成TypeScript * 制作命令行工具 **第十一周（4.27~5.3）** * Koa * Mongoose * MongoDB * ESLint踩坑 * Ant Design **第十二周（5.4~5.10）** * 转盘 **第十二周（5.11~5.17）** * 雪碧图动画，逐帧，steps() * 在JavaScript中编写动画 **第十二周（5.18~5.24）** * SVG精髓 **第十二周（5.25~5.31）** * HTMLMediaElement事件 **第十三周（6.1~6.7）** * 牛客网刷题 **第十四周（6.8~6.14）** * 前端基础题准备 * 前端架构设计 **第十五周（6.15~6.21）** * 各类原理准备 **第十六周（6.22~6.28）** * 性能优化书籍阅读 **第十七周（6.29~7.5）** * 撰写性能优化系统文章 **第十八周（7.6~7.12）** * 算法学习 **第十九周（7.13~7.19）** * 算法实践 **第二十周（7.20~7.26）** * 阅读《算法 第四版》 * 阅读《程序员面试金典》 **第二十一周（7.27~8.2）** * LeetCode做题 **第二十一周（8.3~8.9）** * 阅读浏览器工作原理 **第二十二周（8.10~8.16）** * 记录浏览器工作原理 **第二十三周（8.17~8.23）** * 阅读设计模式之美 **第二十四周（8.24~8.30）** * 记录设计模式之美 **第二十五周（8.31~9.6）** * Flutter学习 **第二十六周（9.7~9.13）** * React原理研究 * Web的音频和视频学习 **第二十七周（9.14~9.20）** * 阅读《黑客攻防技术宝典》 **第二十八周（9.21~9.27）** * 交接 **第二十九周（9.28~10.4）** * 适应新环境 **第三十周（10.5~10.11）** * 欢度国庆

记录了一些自己平时工作或闲暇时所做的事情，只要我觉得有必要记录都会写上，例如： * 新技术或新思想的学习。 * 阅读书籍，技术或非技术的。 * 工作感悟或总结。 * ......

  继续维护专栏，开辟了Web优化和算法栏目，并且补充了React、Node.js等栏目。   继续GitHub仓库，除了完善[daily](https://github.com/pwstrick/daily)之外，还新增了一个性能分析工具，代号[pineapple](https://github.com/pwstrick/pineapple)，不过没有坚持维护下去，也没机会在线上做验证。   除此之外，在年中的时候做了个一个重要的决定：跳槽，离开呆了4年多的公司，跳出这么多年的舒适区，开始新的历程，期间也经历了各种波折，不过都是些不错的体验。下面是一些感悟。   最近跳槽到一家创业多年的小公司，带一个前端小团队。   在这一个多月中，主要是熟悉业务，维护老代码，编写新业务等，期间也发现了当前团队出现的种种问题，打算在接下来的日子里好好改造。   接下来给自己定的小目标是，改变混乱的局面，提升工作效率，团队更加稳定和规范化。 :-:  ## 一、适应新的环境 **1）规章制度**   首先要适应公司的规章制度，主要还是要习惯上下班时间，这和以往不同，本来是到点就走的。现在的话，每天都比较忙碌，下班时间也不定。 **2）新的角色**   其次是要适应自己的新角色，新公司负责的事情要比老公司多很多，以往还是蛮闲的，但现在不同。   并且要带团队，考虑的层面也得比以前更高一点。不能只想着自己的个人发展，更多的是要关注团队发展，为团队的每个人负责。 **3）开发模式**   接着是要适应当前的开发模式，上家公司只做H5相关的事情，也就是做些效果、小程序之类的纯前端工作。   而这里还会涉及到一些后端任务，用Node做了中间层，整合各类数据，执行Redis缓存，有时候还要直接操纵数据库。   刚开始还真有点不适应，不仅要学会用终端，还得知道怎么通过看日志来排查各类问题等等。 **4）业务逻辑**   最后就是要熟悉业务逻辑，前提就是要把项目跑起来，知道怎么修改。   目前公司缺失各类文档，员工离职后很多信息就只能通过代码来了解其中的逻辑了。   为了方便调试，特地搭建了单元测试（主要测试Node方面的代码，[Mocha](https://mochajs.cn/)+[Chai](https://www.chaijs.com/)+[Supertest](https://github.com/visionmedia/supertest)），这样既能保障代码质量，也方便了解某个函数的功能、变量的值等。   目前还有很多我不了解的业务，未来将会经常遇到。对于这些未知业务，除了被动的遇到后再了解之外，还可以主动与各个组的相关负责人了解，未雨绸缪。 **5）难点**   祖传代码还在运行中，代码写的杂乱无章，并且很多服务已无人维护，但是由于缺乏文档，难以轻易地修改。   人员缺乏，每天都疲于修复各种BUG，以及各种杂七杂八的事情，经常要花大精力去查看代码、日志和数据库，计划要写的代码或要做的事情经常无法按时完成，难以达到平衡。虽然短期内加班可以解决，但长期的话还是得补充人员。 ## 二、制订游戏规则 **1）前后端真正分离**   当前公司对前端的要求有点高， 既要会市面上主流的前端技术（HTML和CSS是必须的，还有React、Vue等），也要有后端开发的经验，比如操作MongoDB和MySQL等。   之前公司已经有好几个员工因为这些原因而离职了。以后如果还这么招人，定会遇到许多阻碍，毕竟没有大厂的条件。   前端会负责一个比较庞大的后台管理系统，如果是些简单的查询更新等数据库语句，其实复杂度上倒也没什么，只不过费时间而已。   但前端还要处理金额敏感信息，这块还是需要交接出去，过来后就和后端的大佬们讨论了方案，做到真正的分离，后端组的人也是积极响应，不过这种交接过程将是比较漫长的，毕竟资源有限。   未来尽量由后端服务器组提供数据源，前端就做数据整合以及页面效果的工作，尽量做到专精。 **2）统一技术栈**   当前前端有些技术栈比较老旧，有些活动页面甚至还在用jQuery制作，这样很限制团队成员的发展。   因此打算统一技术栈，将后续的项目迁移到Vue或React这些目前比较主流的库，这样也有利于团队成员的自身发展。 ## 三、补全各类文档 **1）技术文档**   在我进新公司之时，有个老员工要离职了，他了解很多业务，于是就安排他尽可能多的记录到内网的Wiki中。文档虽然不算全，但好歹有个雏形，未来慢慢补全。   当前前端组维护了多个项目，这些项目又分别使用了不同的技术栈。   例如后台管理系统前台采用的是[UmiJS](https://umijs.org/zh-CN)+[DvaJS](https://dvajs.com/)+[Ant Design](https://ant.design/index-cn)+[React](https://react.docschina.org/)，后台采用的是[KOA2](https://koa.bootcss.com/)+[NodeJS](http://nodejs.cn/)+[MySQL](https://www.mysql.com/)+[MongoDB](https://www.mongodb.com/)。   自己花了点时间和精力探索了一下这两个项目的运行过程（画了几张流程图），还对其中的技术细节做了归纳和总结，降低后续新加入的小伙伴的理解难度。 **2）代码注释**   未来的话，还需要完善源代码的各种注释，目前很多组件和函数都是没有注释的，只能一行一行的看代码来理解，很是费劲。   公司也打算用工具（例如[swagger](https://swagger.io/)）通过写注释的方式，自动生成接口文档。 **3）各类业务**   其他组应该也会有相关文档，未来需要有个引导页面，跳转到相关业务中。如果没有的话，需要找个协商人，让他安排人手去补齐。 ***** > 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎阅读。 

  经常会在群里或论坛上看到有人问：“学习前端有什么捷径？”，一般都是卖油翁式的回答：“无他唯手熟尔”。那么该如何让手熟练呢？其实也就是该如何系统的学习前端。在本文中，我会结合自身的经历，分享一下自己学习前端的过程，期间会穿插引用我过去各个阶段所写的博文。 ## 一、启蒙   刚出来混的时候并不是专门做前端的，只是兼顾一下。那时候使用的编程软件是微软的Visual Stadio 2005，开发网页都是拖封装好的控件，做个系统后台，使用的也是简单的模板，改动HTML、JavaScript和CSS的机会也都比较少，这个时候其实对前端还没有什么意识。   然后过了一年，和朋友一起帮人做网站，那个时候就算是正式接触前端了。有一件事印象很深刻，当时负责写静态页面的朋友一直没时间写，于是我就想自己动手，但是完全无从下手，只能等待。在他写了几张页面之后，我就开始研究他的源码，这时候也仅仅是能看懂，再做点小修改，还无法独立布局。   在接下来的几年里，陆续呆了多家公司，无一例外的我都会兼顾前端页面，这也大大提升了我对前端的理解。不过，虽然做了那么多的页面，但总有一种感觉，就是怎么每次布页面都会碰到这样那样的问题，好像永远都无法驾驭布局。现在想想，最主要的还是自己的地基不牢固，很多时候的布局并不难，但会涉及到很多细节，而这些细节很容易产生问题，例如CSS中的百分数计算规则、JavaScript中的全等和相等比较的区别、HTML元素表格的特点等等。这些在开发过程中都会碰到的，我那时候都是碰到了，再去翻资料，很是被动。如果事先就学会了或准备好了文档的话，那么就能提升工作效率，减少开发周期。我将这个混沌的时期称为启蒙阶段。 ## 二、博学   博学就是广泛的学习，吸收知识。我当时首先学习的就是HTML、CSS和JavaScript，然后是数据结构、简单的算法和网络，接着是性能、设计模式和安全，最后还学习了调试工具、营销推广等各类知识，有的与编程有关，有的与编程无关。下面会依次列举学习过程中所涉及的相关知识。 **1）HTML**   HTML很容易被忽略，因为总觉得这个不难。其实的确不难，只是有时候会给人留坑，让人踩进去防不胜防。比如常用的[表格](https://www.cnblogs.com/strick/p/3789114.html)，在全方位的了解了它的特点之后，就能知道表格布局的缺点、它的属性有哪些、它的CSS样式该怎么重置、各个浏览器的呈现有何区别等。再比如[iframe](https://www.cnblogs.com/strick/p/3814872.html)，在过去常用来异步上传文件，在知道它的特性之后，就能明白其中的原理，碰到此类问题时就能游刃有余了。   如果要系统的学习HTML的话，我推荐阅读《[HTML5权威指南](https://book.douban.com/subject/25786074/)》、[MDN元素参数](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element)，还有[W3C官方规范](https://www.w3.org/TR/html5/introduction.html)，但这个比较拗口，理解起来会有难度。过去写的一篇《[前端基础学习分享](https://www.cnblogs.com/strick/p/4377213.html)》也可以参考。 **2）CSS**   CSS要学的内容比HTML要多一些，在CSS2时代，提供的CSS属性并不多，但自从CSS3发布之后，引入了众多新属性，大大提升了CSS的操控性。学习CSS首先要了解该属性或概念是属于CSS2还是CSS3，因为页面要考虑浏览器的兼容性，即对CSS的支持度有差异，很多时候需要权衡。比如[动画属性](https://www.cnblogs.com/strick/category/847675.html)，这是CSS3新增的，不仅能让页面生动真实，还能摆脱对Flash的依赖，远离大段的JavaScript脚本。虽然效果很强大，但像IE8、IE9等浏览器并不支持，在这些浏览器中要么降级，要么干脆去掉这些特效。还有一些基础概念，例如盒模型、BFC、选择器、层叠、定位等，也是必须要了解的。   如果要系统的学习CSS的话，我推荐阅读《[CSS权威指南](https://book.douban.com/subject/2308234/)》，目前英文已经出到了第四版，中文的第四版今年肯定会出。第三版没有讲到CSS3的属性，只是列举了CSS2和CSS的基础概念，讲的还是很细的，可以将这本书当做词典来用，需要的时候翻一下。这部书要细读，才能发现平时不注意的CSS细节。当然，[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference)是肯定用的到的，也少不了[W3C规范](https://www.w3.org/TR/selectors-3/)。再分享一个，我平时会用到的在线[CSS参考手册](http://css.doyoe.com/)，如果开发PC端的网页，还可以参考我以前的[一篇CSS分享](https://www.cnblogs.com/strick/p/4704356.html)。   目前非常流行的CSS预处理器也有必要了解一下，例如[SASS](http://sass.bootcss.com/docs/sass-reference/)、[LESS](http://lesscss.cn/)等。简单地说，它们就是为CSS设计的编程语言，可以减少工程师的开发量，提升效率。 **3）JavaScript**   这是前端的核心，刚开始的话，先学习JavaScript的语法。我那时候不重视语法，拿来就是干，写出来的代码没有JavaScript的味道，在看别人的代码时，也经常会感到疑惑，不能理解他们的写法，例如获取变量默认值“a || b”、迭代方法forEach()、every()、some()等。学习语法首推《[JavaScript权威指南](https://book.douban.com/subject/10549733/)》、《[JavaScript高级程序设计](https://book.douban.com/subject/10546125/)》和《[深入理解ES6](https://book.douban.com/subject/27072230/)》，可以先读权威指南，然后再去高级程序设计，它们都可以当成字典来用。深入理解ES6主要是讲[ES6](https://www.ecma-international.org/ecma-262/6.0/)标准的，前面两本目前的版本主要是讲[ES5](https://www.ecma-international.org/ecma-262/5.1/)标准的，还有一套《[你不知道的JavaScript](https://book.douban.com/subject/26351021/)》系列，需要先有前面的基础，然后再去读的话，会好理解很多。关于ES6的学习，还可以关注我正在连载的《[ES6躬行记](https://www.cnblogs.com/strick/category/1372951.html)》系列，以基础为主，力求简单而又清晰不遗漏的介绍ES6的方方面面。各大浏览器对ES6的支持，可以参考[ECMAScript 6 compatibility table](http://kangax.github.io/compat-table/es6/)。   我以前学习JavaScript没有那么系统，都是根据项目中碰到了某个知识点，然后再去查相关的资料，例如《[触屏touch事件记录](https://www.cnblogs.com/strick/p/5155042.html)》、《[typeof、toString、instanceof、constructor与in](https://www.cnblogs.com/strick/p/4979949.html)》等。东一点西一点的这样补，很是费劲。 **4）数据结构和算法**   大学里有一门数据结构课，但当时感受不到它的威力，工作后才知道，数据结构是多么的重要。数据结构包括队列、栈、链表、树和图等，具体有什么好处可以参考[这篇知乎](https://www.zhihu.com/question/29587605)，里面有各种角度的回答。算法被称为程序的灵魂，经典巨著就是《[算法导论](https://book.douban.com/subject/20432061/)》了，我算法太渣，看这本书蛮吃力的。   我后面还专门去学习了一些数学，想着算法实现基于数学，那么先学习更底层的，可能就会好理解一点。之后就去读了《[程序员的数学思维修炼（趣味解读）](https://book.douban.com/subject/25854719/)》、《[生活中的数学](https://book.douban.com/subject/26646345/)》、《[生活中的概率趣事](https://book.douban.com/subject/26220204/)》和《[枕边算法书](https://book.douban.com/subject/30163021/)》等书。大学里还学过一门离散数学，当时觉得枯燥而无用，进了社会后才知道其实很有用，它可以提高抽象思维和严格的逻辑推理能力。现在还在读大学的工科生，真的很有必要将数学打扎实，对以后会有很大的帮助。 **5）网络**   “[网络](https://www.cnblogs.com/strick/category/832640.html)”我只学习了与我的工作相关的内容，例如HTTP、TCP、HTTPS等协议。做前端，至少得看得懂基本的报文，理解TCP的连接、HTTPS的安全性、HTTP的特点等概念。知道这些后，就能方便自己在调试页面的时候，定位BUG，同时也能更和谐的与后端沟通，例如你调个接口，但是没有数据返回，你可以将报文截图，然后发给后端，这样的话，他们就能知道请求和响应的信息，方便他们定位问题。   大学的网络课很枯燥，等于没学。工作后开始买些网络相关的书看，有《[图解HTTP](https://book.douban.com/subject/25863515/)》和《[图解TCP/IP](https://book.douban.com/subject/24737674/)》，这两本比较通俗，容易消化。还有一本加《[HTTP权威指南](https://book.douban.com/subject/10746113/)》，这本非常专业，内容也很全，就是理解起来费劲一点，可当字典来使用。 **6）工具**   作为前端开发，除了要会使用浏览器的Debugger工具之外，还需要会些其它的工具。首推的是Windows上的[Fiddler](https://www.cnblogs.com/strick/p/4570006.html)，Mac上可用Charles替代，Fiddler很适合移动端开发，因为手机上的浏览器不像PC上的Chrome、Firefox那样可以打开调试工具，它们在移动端是不存在。如果要抓取手机访问页面时的通信信息，就得借助Fiddler了。再推[Wireshark](https://www.cnblogs.com/strick/p/6344486.html)网络抓包工具，这个工具抓取的信息要比Fiddler更加底层，例如能抓取TCP三次握手的通信。   前端开发目前都需要自动化构建化工具，例如[Gulp](https://www.cnblogs.com/strick/p/5151714.html)、[Webpack](https://webpack.docschina.org/concepts/)等。构建工具可以编译JavaScript、CSS和HTML，例如将ES6代码编译成浏览器支持的ES5代码、SASS文件编译成普通的CSS文件、合并和压缩JavaScript脚本等，改变了前端的开发模式，解放生产力、提高生产效率。   计算机学习需要上机操作，上面所列的知识都需要上机验证，古语云：“纸上得来终觉浅，绝知此事要躬行”，只有真的做了，才能有更深刻的体会。性能、设计模式和安全等知识，对于初学者来说还不适合学习，目前还是以打基础为核心目标。 ## 三、慎思   慎思就是谨慎的思考，学习不是填鸭式的，需要经常思考，这样才能进步。 **1）技术引入**   我以前每次学到点新技术，就迫不及待的想引入到项目中，例如2011年的时候刚学Ajax，就把整个网站的数据交互用Ajax实现，页面渲染就用简陋的字符串拼接完成，代码丑陋至极（详见《[忆2011年的秋天](https://www.cnblogs.com/strick/p/10007237.html)》）。在项目经历越来越多之后，就会谨慎的看待新技术。对新技术保持旺盛的求知欲，是件毋庸置疑的好事儿，但是把它引用到项目中，就得斟酌一下了，例如要考虑可维护性、与之前代码的兼容度、性能和学习成本等方面。   如果工作中的项目不行，那么可以自己开辟一个开源项目，把想要的新技术加进来。例如自己以前学习了CSS3，就试着做了个[在线简历](https://www.cnblogs.com/strick/category/907450.html)，用到了阴影、圆角、动画等CSS3新属性。 **2）知其然而所以然**   “[jQuery](https://jquery.com/)”曾经在前端界有着举足轻重的地位，甚至影响了W3C标准的制订，以前很好奇jQuery是怎么运转的，于是就去查看里面的源码，奈何水平有限，很难读懂。而在移动端有个与之类似的精简DOM库：[Zepto.js](https://zeptojs.com/)，这个库的代码量少了很多，还是可以读懂的。接着我就试着写一个类似的库，起名叫“[iSelector](https://www.cnblogs.com/strick/p/5357210.html)”。为何要重复造这个轮子，因为在造的过程中，能够了解到以前不知道的Element、Array等相关的方法或属性，加深对DOM的理解，而且在使用Zepto的时候，能够选取最合适的方法。还有一点在《[制造自己的榫卯](https://www.cnblogs.com/strick/p/5347551.html)》中曾提到过，即应用自己封装的函数，就好比榫卯，拿来即可用，而不需要特定的钉子。   除了造轮子之外，研究开源库的源码也是一种理解原理的途径，例如手势插件[Hammer.js的分析](https://www.cnblogs.com/strick/category/907457.html)，[开源网站流量统计系统Piwik源码分析](https://www.cnblogs.com/strick/p/9599023.html)等。 **3）举一反三**   对于同一个问题，会有多种解决方案。在平时的学习中，也有必要举一反三，这样在实际应用时，就能选取最优的方案。自己曾经研究过[Loading（加载）动画效果](https://www.cnblogs.com/strick/p/4551818.html)，搜集了网上的4种实现方式，分别是PNG图片+CSS3动画、spin.js、Ladda和Sonic.js。这是一个有趣的过程，不仅可以了解到它们各自的优缺点，还能了解它们不同的实现原理。 **4）开发习惯**   开发也是学习的过程，总结出自己独有的开发习惯，能够提升自己的工作效率。我自己在开发中遇到技术或工具都会做个总结，比如项目中用到了HTML5新增的[Canvas元素](https://www.cnblogs.com/strick/category/847676.html)，我就会搜集它的属性、方法和第三方库，再将它的实际应用（如海报生成、图像裁剪、文字合成等）从项目中抽象出来，整理成文。再比如以前为了撰写在线文档而使用了静态页面生成器Jekyll，在事后写了[两篇总结](https://www.cnblogs.com/strick/category/823089.html)（关于安装、配置和应用），以备自己日后阅读。   对于工作中遇到的问题，我也会记录下来，例如[IE6的BUG记录](https://www.cnblogs.com/strick/p/3776378.html)，我入行的早期还是IE6横行的时代，兼容IE6是必须的，它那千奇百怪的问题折磨着一代人。   程序员要时刻充电，阅读书籍是最好的一个途径之一。每次在阅读完整本书或某个章节后，[我也喜欢做个总结](https://www.cnblogs.com/strick/p/10053205.html)，可以简单的把自己感兴趣的内容摘抄下来，也可以根据书中的内容做一次实践，还可以做简单的记录汇总。   我的开发习惯简单的概括就是：总结和记录。 ## 四、笃行   笃行就是学以致用，践履所学，做到知行合一。 **1）PrimusUI**   在学习了CSS3后，为了能使用到那些新属性，于是就设计了一个UI库，名字叫“[PrimusUI](https://www.cnblogs.com/strick/p/5536321.html)”。这是一个轻量、响应式、移动端、易上手、可定制的UI库。包含文本、表单、列表、网格等13个模块，涉及伸缩盒、自定义字体、阴影、伪元素等属性。 **2）制作插件**   要制作一个插件不仅需要懂得HTML和CSS，还要熟悉JavaScript。我制作的[几个插件](https://www.cnblogs.com/strick/category/847678.html)都是从实际项目中剥离封装出来的，例如[移动端H5通用表单验证插件](https://www.cnblogs.com/strick/p/6801453.html)，可验证文本框的字数、格式等，并且将验证规则作为控件的一个属性，写在控件的html中，有点MVVM模式的味道。 **3）抽象共性**   平时我还会想各种方式来提升自己的工作效率，以前曾整理出[网站的通用部分](https://www.cnblogs.com/strick/p/3826485.html)，对其中的[注册页面](https://www.cnblogs.com/strick/p/3871374.html)做了详细的分解，包括提示、图标、限制和特效等，准备了这些代码，在以后需要时，就能拿来做更新，而不用再重新编写。 **4）表述**   很多时候看了不代表就懂了，得用自己的语言描述某个技术或概念，一直到自己觉得准确了为止，这个过程也能检验出自己对知识的理解到底处于哪个深度。还可以将自己的体会整理成一套符合自己需求的知识体系。 ***** > 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎阅读。 

  开辟前端躬行记栏目，对ES6、React、TS、Vue、CSS3等各种主流技术来了一次系统性的梳理，并将自己的心得记录下来。   在GitHub上发布一个前端面试的仓库：[daily](https://github.com/pwstrick/daily)，不断完善其中的内容，加入各类面试干货，在V站中也做了几次推广，效果不错。   重拾英语，读了一本计算机专业英语和英语语法大全（如下图所示），一下子就点醒了我，让我知道了为何每次阅读外文资料都会头疼，理由就是我只重视词汇量，但却忽略了词法分析。每次碰到英语长句就会无从下手，很多单词虽然会读（当然更多时候是单词也读不懂，我的词汇量非常有限），但总是无法有效的组织起来，因为我不会分析这些长句。为了弥补自己这方面的缺陷，在70周年国庆期间，我特地记录了英语基础语法以及书中提到的一些实用的知识点。文章很长，可以作为备忘资料使用。 :-:  ## 一、英语基础语法 **1）词类**   英语的词分为十大类：名词、冠词、代词、数词、形容词、副词、动词、介词、连词和感叹词。 （1）**名词**（n = noun）：表示人、事物、地点或抽象概念的名称。 （2）**冠词**（art = article）：在名词之前的一个虚词，不能单独使用，也没有词义，分为不定冠词（a或an）和定冠词（the）两种。 （3）**代词**（pro = pronoun）：用来指代人或事物的词，代词包括： 1. 人称代词，例如：I，you，they，it等。 2. 物主代词，例如：my，his，their，our，mine，hers等。 3. 反身代词，例如：myself，yourself，itself，ourselves，oneself等。 4. 相互代词，例如：each other，one another等。 5. 指示代词，例如：this，that，these，those，such，same等。 6. 疑问代词，例如：who，whom，whose，which，what等。 7. 关系代词，例如：who，whom，whose，which，that等。 8. 不定代词，例如：some，any，no，all，one，every，many，a little，someone，anything等。 （4）**数词**（num. = numeral）：表示“数量”和“顺序”的词，前者称为基数词，例如one、twenty等；后者称为序数词，例如first、twentieth等。 （5）**形容词**（adj. = adjective）：用来修饰名词，表示名词属性的词。 （6）**副词**（adv. =adverb）：可分为四种： 1. 普通副词，例如：together（一起），well（好），carefully（仔细地）等。 2. 疑问副词，例如：when（何时），where（何地），how（如何），why（为什么）等。 3. 连接副词，例如：therefor（因此），then（然后），however（然而），otherwise（否则）等。 4. 关系副词，例如：where，when，why等。 （7）**动词**（v. = verb）：表示动作或状态的词，动词根据其意义和作用可分为实义动词、系动词、情态动词和助动词。 1. 实义动词：有完全的词义，并能独立作谓语，例如：explain，stay，have等。实义动词还可根据是否需要宾语分为及物动词和不及物动词。 2. 系动词：用来辅助主语的动词，不能单独做谓语，包括6大类： a）状态系动词，用来表示主语状态，只有be一词。 b）持续系动词，用来表示主语继续或保持一种状况或态度，主要有keep, remain, stay, lie, stand。 c）表像系动词，用来表示"看起来像"这一概念，主要有seem, appear, look。 d）感官系动词，感官系动词主要有feel, smell, sound, taste。 e）变化系动词，这些系动词表示主语变成什么样，变化系动词主要有become, grow, turn, fall, get, go, come, run。 f ）终止系动词，表示主语已终止动作，主要有prove, turn out, 表达"证实"，"变成"之意。 3. 情态动词：表示能力、义务、必要、猜测等说话人的语气和情感。情态动词只能和动词原形一起构成谓语动词。英语情态动词主要有can，may，must及其过去形式could， might等。 4. 助动词：常和主要动词一起构成各种时态、语态、语气等动词形式，以及用于否定和疑问等结构中。英语助动词主要有shall，will，have，be，should，would，do等。 （8）**介词**（prep = preposition）：又叫前置词，放在名词、代词或相当于名词的词之前，表示它后面的词与句子中其它成分之间的关系。介词在句中一般不重读，也不能单独作句子成分。介词后面的名词或代词叫做介词宾语。介词和介词宾语合称为介词短语。 1. 简单介词，例如：in，at，for，since等。 2. 复合介词，例如：into（进入）， as for（至于）， out of（出自）。 3. 二重介词，例如：until after（直至……之后）， from among（从……当中）。 4. 短语介词，例如：according to（根据）， because of（因为）， in front of（在……之前）， in the event of（如果）。 5. 分词介词，例如：regarding（关于）， considering（考虑到）， including（包括）。 （9）**连词**（conj. = conjunction）：连接词、短语、从句或句子的词。连词是虚词，在句中一般不重读，也不能在句中单独作句子成分。根据连词本身的含义及其所连接的成分的性质，可分为并列连词和从属连词。 1. 并列连词是连接并列关系的词、短语、从句或句子的连词，例如：and， or， but， for（因为）， not only……but also（不仅……而且）， neither……nor（即不……也不）。 2. 从属连词是连接主从复合句的主句和从句的连词，例如：that， if， whether（是否）， when（当……时候）， although， because， so that（结果）。   从连词本身的结构形式看，又可分为： 1. 简单连词，例如：but，because， if。 2. 关联连词，例如：not only……but also， as……as（和……一样）。 3. 分词连词，例如：supposing（假如）， provided（倘若）。 4. 短语连词，例如：as if（好象）， as soon as（一旦……就）， in order that（以便）。 （10）**感叹词**（interj = interjection）：表示喜怒哀乐等感情的词，例如：oh， well， why， hello等。 **2）句子成分**   句子成分包括主语、谓语、表语、宾语、状语、补足语和定语。 （1）**主语**是句子的主体，句子所要说明的人或事，通常位于句首，能担当主语的可以是名词、代词、数词、动词不定式、动名词和从句等。 （2）**谓语**对主语加以陈述，用来说明主语的动作或状态，只有动词才能担当谓语，位于主语之后。 （3）**表语**用来说明主语的身份、特征和状态，一般位于系动词之后，能担当表语的可以是名词、代词、形容词、数词、介词短语和副词等。 （4）**宾语**表示动作的对象或承受者，位于及物动词和介词之后，能担当宾语的可以是名词、代词、数词和动名词等。 （5）**定语**用来修饰名词或代词的词、短语或句子，单个词作定语通常位于所修饰的词之前；但短语、从句作定语时通常位于所修饰的词之后，能担当定语的可以是名词、形容词、数词、介词短语、副词和从句等。 （6）**状语**用来修饰动词、形容词、副词等的句子成分，表示地点、时间、原因、目的、结果、条件、方式等，能担当状语的可以是名词、副词、介词短语、动词不定式等。 （7）**补语**用来补充说明主语和宾语，分为宾语补足语和主语补足语，通常由名词、形容词、介词短词或动词不定式等担当。 ## 二、专业英语语法 （1）经常要将一个**被动语态**句子翻译成主动形式，以便强调某个重点，同时更适合汉语的习惯。专业英语中被动语态的句子要占1/3~1/2。 > 例句：The procedure by which a computer is told how to work is called programming. 译文：告诉计算机如何工作的过程称为程序设计。（句子结构：The procedure is called programming.）   语态是动词的一种形式，它表示主语和谓语的不同关系。语态有两种：主动语态和被动语态。**主动语态**表示句子的主语是谓语动作的发出者；**被动语态**表示主语是谓语动作的承受者。也就是说，主动语态句子中的宾语，在被动语态中做句子的主语。由于被动语态句子的主语是谓语动作的承受者，故只有及物动词才会有被动语态。在科技英语中，为了着重说明客观事物和过程，被动语态用得更为广泛。被动语态构成如下： > 主语 + be +（及物动词）过去分词 1. **一般现在时**的被动语态构成如下： > 主语 + am（is，are）+及物动词的过去分词 例句：I am asked to solve this problem by him. 译文：他请我解决这个问题。 2. **一般过去时**的被动语态构成如下： > 主语 + was（were）+及物动词的过去分词 例句：That plotter was not bought in Beijing. 译文：那台绘图仪不是在北京买的。 3. **一般将来时**的被动语态构成如下： > 主语 + will be + 及物动词的过去分词 例句：What tools will be needed for the job? 译文：工作中需要什么工具？   当主语是第一人称时，可用： >主语 + shall be + 及物动词的过去分词 例句：I shall not be allowed to do it. 译文：不会让我做这件事的。 4. **现在进行时**的被动语态构成如下： > 主语 + is（are）being + 及物动词的过去分词 例句：Our printer is being repaired by John. 译文：约翰正在修理我们的打印机。 5. **过去进行时**的被动语态构成如下： > 主语 + was（were）being + 及物动词的过去分词 例句：The laboratory building was being built then. 译文：实验大楼当时正在建造。 6. **现在完成时**的被动语态构成如下： > 主语 + have（has）been + 及物动词的过去分词 例句：New techniques have been developed by the research department. 译文：研究部门发展了新技术。 7. **过去完成时**的被动语态构成如下： > 主语 + had been + 及物动词的过去分词 例句：Electricity had been discovered for more than one thousand years by the time it came into practical use. 译文：电在发现一千多年之后，才得到实际应用。 （2）**祈使语句**（无主语）常用来表示指示、建议、劝告和命令等意思，可以用于说明书、操作规程和注意事项等资料中。 > 例句：Must be structure field name. 译文：需要的是结构字段名。 （3）用**虚拟语气**（if）表达假设或建议。在说明事理并涉及到各种前提和条件时，也可以用虚拟语气。 > 例句：Backing up your files safeguards them against loss if your hard disk fails or you accidentally overwrite or delete data. 译文：当硬盘发生故障或用户意外覆盖、删除数据时，备份可以保护文件，避免损失。  （4）**It...结构**在专业英语中用的较多。 1. It is +名词+从句 * It is a fact that…… 事实是…… * It is a question that …… ……是个问题 * It is no wonder that …… 毫无疑问…… * It is the law of nature that …… ……是自然规律 * It is a common practice to …… 通常的做法是…… 2. It is +形容词+从句 * It is necessary that …… 有必要…… * It is clear that …… 很清楚…… * It is important that …… 重要的是…… * It is natural that …… 很自然的是……  3. It is +过去分词+从句 * It is said that …… 据说…… * It is believed that …… 确信…… * It has been proved that …… 已证明…… * It is generally considered that …… 人们普遍认为…… 4. It is +介词短语+从句 * It is from this point of view that ……由此看来…… * It is of great significance …… ……具有重大的意义 * It is only under these conditions that …… 只有在这些条件下才能…… 5. It +不及物动词（后面不跟宾语）+从句 * It follows that …… 由此可见…… * It turned out that …… 结果是…… * It may be that …… 可能…… * It stands to reason that …… 显然…… （5）**面对长句**，首先是找出谓语和主语，其次是找出连接词（包括连接代词、连接副词、关系代词和关系副词等）。 （6）**多重复句**的分句之间有两种关系，一种是并列，另一种是主从，这两种关系常常同时出现在一个句子中。 > 例句：This instrument works on the principle that each individual substance emits a characteristic spectrum of light when its molecules are caused to vibrate by the application of heat, electricity, etc.; and after studying the spectrum which he had obtained on this occasion, Hildebrand reported the gas to be nitrogen. 译文：这个仪器工作的原理是，当物质的分子由于加热、通电等而引起振动时，每种物质产生一种独特的光谱；在研究了此种情况下收集到的光谱后， Hildebrand宣布这种气体是氮。（用and连接的两条并列的主句） （7）**动词不定式**是非谓语动词的一种，由不定式符号to加动词原形构成，可以有自己的宾语、状语及宾语补足语。 1. 动词不定式（短语）作**主语**，较多地用来表示一个特定的行为或事情，谓语动词需要用第三人称单数，且常用it作形式主语。 > 例句：To know something about computer is important. 译文：懂得一些计算机的知识很重要。（To know something about computer是动词不定式短语） 不定式短语作主语时，为了句子的平衡，常常把它放在句尾。而用it作形式主语代替不定式放在句首。 例句：It is necessary to learn Visual BASIC. 译文：学习Visual BASIC是很有必要的。 2. 不定式可放在系动词后面作**表语**。 > 例句：To see is to believe. 译文：眼见为实。（to believe作表语） 3. 不定式（短语）在某些及物动词后可作**宾语**。这类及物动词通常有：want，like，wish，hope，begin，decide，forget，ask，learn，help，expect，intend，promise，pledge等。 > 例句：This helps to save coal and reduce the cost of electricity. 译文：这有助于节约用煤以及降低发电成本。   当某些动词后面作宾语的不定式必须有自己的补语才能使意思完整时，要用it作形式宾语，而将真正的宾语（即不定式）后置。常用这种结构的动词有：think、find、make、consider、feel等。 > 例句：The use of semiconductor devices together with integrated circuits make it possible to develop miniaturized equipment. 译文：半导体装置和集成电路一起使用使得发展微型设备成为可能。（to develop miniaturized equipment作宾语） 4. 动词不定式（短语）作**定语**时，通常放在它所修饰的名词（或代词）之后。 > 例句：He never had the change to learn computer. 译文：他从来没有学习计算机的机会。（to learn computer作定语） 5. 不定式作**状语**可以修饰句中的动词、形容词、副词或全句。主要表示目的、程度、结果、范围、原因等。 > 例句：We are glad to hear that you have bought a computer. 译文：听说你买了一台计算机，我们十分高兴。（表示原因） 例句：To meet our production needs, more and more electric power will be generated. 译文：为了满足生产的需要，将生产越来越多的电力。（表示目的） 例句：Solar batteries have been used in satellites to produce electricity. 译文：人造卫星上已经用太阳能电池发电。（表示结果） 6. 某些及物动词要求不定式作**宾语补足语**。宾语补足语是对宾语的补充说明。 >例句：A force may cause a body to move. 译文：力可以使物体移动。（to move是宾语补足语）   当make、let、have、see、hear、watch、notice、feel等动词后面用不定式 作宾语补足语时，不定式都不带to。 >例句：I often hear people talk about this kind of printer. 译文：我经常听人们谈论这种打印机。（talk about this kind of printer是个不带to的动词不定式短语） 7. 当主动语态的句子变成被动语态时，主动语态句子中的宾语补足语就在被动语态中变成**主语补足语**。 > 例句：He was asked to do the experiment at once. 译文：有人请他马上做实验。   当make、let、have、see、hear、watch、notice、feel等动词的句子变为被动语态时，原来在主动语态时作宾语补足语的动词不定式这时也变为主语补足语，此时，动词不定式中的to不能省略。 > 例句：He was made to finish repairing the printer. 译文：他被迫马上修好打印机。 8. 不定式的特殊句型。 > 例句：I am afraid the box is too heavy for you to carry it. 译文：这箱子太重，恐怕你搬不动。（too…to  太……以至于……） 例句：Go in quietly so as not to wake the baby. 译文：轻点进去，别惊醒了婴儿。（so as to  以至于，为了） （8）**定语从句**又称关系从句，在句子中起定语作用，修饰一个名词或代词，有时也可修饰一个句子。被定语从句修饰的名词、词组或代词叫先行词，定语从句通常跟在先行词的后面。 > 例句：This is the software that I would like to buy. 译文：这就是我想买的那个软件。（that I would like to buy是定语从句，this software是先行词）   通常，定语从句都由关系代词that、which、who、whom、whose和关系副词when、where、why、how引导。关系代词和关系副词往往放在先行词和定语从句之间，起联系作用，同时还代替先行词在句中担任一定的语法成分，如主语、宾语、定语和状语等。 1. **限定性定语从句**与先行词关系密切，是整个句子不可缺少的部分，没有它，句子的意思就不完整或不明确。这种定语从句与主句之间不用逗号隔开，译成汉语时，一般先译定语从句，再译先行词。   限定性定语从句如果修饰人，一般用关系代词who，有时也用that。若关系代词在句子中作主语，则who用得较多，且不可省略；若关系代词在句子中作宾语，就应当使用宾格whom或that，但在大多数情况下都可省略。若表示所属，就应用whose。限定性定语从句如果修饰物，用that较多，也可用which。他们可在句中作主语，也可作宾语。若作宾语，则大多可省略。 >例句：Those who agree with me please put up your hands. 译文：同意我的观点的人请举手。（who agree with me是定语从句，修饰Those，who既是引导词，也是句中的主语，不能省略） 2. **非限定性定语从句**与先行词的关系比较松散，从句只对先行词附加说明，如果缺少，不会影响句子的主要意思。从句与主句之间常用逗号隔开，译成汉语时，从句常单独译成一句。   非限定性定语从句在修饰人时用who、whom或whose，修饰物时用which，修饰地点和时间时用where和when引导。关系代词that和关系副词why不能引导非限定性定语从句。 >例句：We do experiments with a computer, which helps to do many things. 译文：我们利用计算机做实验，计算机可帮助做许多工作。（which引导的定语从句是对先行词a computer的说明） （9）英语中的**状语从句**通常由从属连词和起连词作用的词组来引导，用来修饰主句中的动词、形容词、副词等。   状语从句可位于主句前，也可位于主句后；前置时，从句后常用逗号与主句隔开；后置时，从句前通常不使用逗号。状语从句在句子中作状语，修饰可表示时间、原因、目的、结果、条件、比较、方式、让步和地点等不同含义。  1. 引导**时间状语从句**的连词或词组很多，但可根据所表示时间的长短以及与主句谓语动词行为发生的先后这两点去理解和区别。这些连词或词组有： * as（当 ┅ 时候，随着，一边 ┅一边），after（在 ┅之后）， * as soon as（一 ┅就），before（在 ┅ 之前） * when（当 ┅ 时候），while（在 ┅ 期间）， * until（till）（直到 ┅ 才），since（自从 ┅以来） * no sooner…than（刚一 ┅就┅），once（一旦）， * every time（每次）等。 >例句：It changes speed and direction when it moves. 译文：在运动时它改变速度和方向。  2. 引导**原因状语从句**的连词和词组有：because（因为），as（由于），since（既然，由于），now that（既然），in that（因为）等。 >例句：Electric energy is used most widely mainly because it can be easily produced, controlled, and transmitted. 译文：电能用得最广，主要是因为发电容易，而且控制和输送也方便。 3. **目的状语从句**由in order that（为了，以便），so that（为了，以便），that（为了），lest（以免，以防），for fear that（以免，以防）等引导。 >例句：He handled the instrument with care for fear that it should be damaged. 译文：他小心地弄那仪器，生怕把它弄坏。 4. 引导**结果状语从句**的连词有：so that（结果，以致），so … that（如此……以致），such … that（这样的……以致）等。注意so后接形容词或副词，而such后跟名词。so还可以与表示数量的形容词many，few，much及little连用，形成固定搭配。 >例句：This problem is very difficult that it will take us a lot of time to work it out. 译文：这道题很难，我们要用很多时间才能解出。 5. **条件状语从句**用来表示前提和条件。通常由以下连词引导： * if（如果），unless（除非），provided / providing that（假如）， * as long as（只要），in case（如果），on condition that（条件是……）， * suppose / supposing（假如）等。 >例句：A physical body will not tend to expand unless it is heated. 译文：除非受热，否则物体不会有膨胀的倾向。 6. **比较状语从句**经常是省略句，一般都是省略了重复部分；省略之后不影响句意，反而结构简练。部分比较状语从句还有倒装现象。比较状语从句由下列连词引导： * as … as（像…… 一样），than（比）， * not so（as）… as（不像…… 一样）， * the more … the more（愈……愈）， * as … so（正如……那样）等。 >例句：Electron tubes are not so light in weight as semiconductor devices. 译文：电子管的重量不如半导体器件那么轻。 7. **方式状语从句**通常由as（如同，就像），as if（as though）（好像，仿佛）等连词引导。 >例句：The earth itself behaves as though it were an enormous magnet. 译文：地球本身的作用就像一个大磁铁一样。 8. **让步状语从句**表示在相反的（不利的）条件下，主句行为依然发生了。引导让步状语从句的有： * (al)though（虽然），even if（though）（即使）， * as（尽管），however（无论怎样）， * whatever（不管），whether…or（不论 ┅ 还是）， * no matter（how，what，where，when）（不管怎样，什么，哪里，何时）等。 >例句：It is important to detect such flows, even if they are very slight, before the part is installed. 译文：在安装部件之前，即使变形很轻微，也必须探测出来。 9. 引导**地点状语从句**的词常用的有：where（在 ┅ 地方，哪里），wherever（在任何地方），everywhere（每一 ┅ 地方）等。 >例句：She found her pen where she had left them. 译文：她的笔是她在原来放笔的地方找到的。 10. 状语从句的翻译方法。   a）**顺译法**。当表示目的、原因等的状语从句在主句之前出现时，直接按照原句语序翻译。如果这些状语出现在主句之后，可以将它们提前或者保持原句顺序，翻译在主句之后，对主句意思起到补充说明的作用。 >例句：Whenever you need any specific information, you can search it by Internet. 译文：每当你需要任何专业信息时，你都可以通过互联网搜索得到。   b）**倒译法**。当原文中的时间状语和地点状语在主句后面时，必须倒译；当原文中的原因状语从句、条件状语从句和让步状语从句在主句后面时，一般也可以倒译；另外当特殊比较从句在主句后面时，必须倒译。 >例句：Many business became aware of network when they bought an expensive laser printer and wanted all the PCs to print to it. 译文：当企业购买了一台昂贵的激光打印机，并希望其所有的计算机都能使用该打印机时，他们就想到了网络。   c）**转译法**。当通过对原文的逻辑含义进行分析后，会发现when、where不再单纯的表示时间、地点，或者翻译成“当……”或“在……”不合适时，可以考虑这些词也可以表示“如果”的意思。另外，当状语从句比较短，而关联词可以省略时，可以把状语从句翻译成并列成分，这样也使得句子比较紧凑。 >例句：Where the Hz is too small a unit, we may use the MHz. 译文：当用赫兹作单位太小时，我们可以使用兆赫兹。   d）**缩译法**。有些关联词，比如“so…that…”在很多情况下，可以省略翻译，这样使得汉语的译文就很简练，对于这样的句子就可以采用“缩译法”进行翻译。 >例句：Computers work so fast that they can solve a very difficult problem in a few seconds. 译文：计算机工作如此迅速，一个很难的题目几秒钟内就可以解决。 ## 三、专业英语词汇 （1）**功能词**，包括介词、连词、冠词、代词等，为词在句子中的结构关系提供了结构信号，出现频率最高的10个词都是功能词，其顺序为： * the，of，in，and，to，is，that，for，are，be。 >例句：When the recorder is operated in the record mode, previous recordings are automatically erased. 译文：当录音机工作在录音模式时，以前的录音被自动擦除。 （2）**合成词**，多数以连字符“-”连接单词构成（例如object-oriented、file-based、input、online等），或者采用短语构成（例如machine building、liquid crystal等）。 * 合成方法有名词+名词、形容词+名词、动词+副词、名词+动词、介词+名词、形容词+动词等。 （3）**派生词**，通过对词根加上各种前缀和后缀构成的新词。这些词缀有： * 名词词缀，例如inter-，sub-，in-，tele-，micro-等。 * 形容词词缀，例如im-，un-，-able，-al，-ing，-ed等。 * 动词词缀，如re-，under-，de-，-en，con-等。   加前缀构成新词只改变词义，不改变词性 ，例如multimedia 、interface 、hypertext等。   具有否定意义的前缀： * anti- 表示“反对” 　　antibody（抗体） * counter- 表示“反对，相反” 　　counterbalance（反平衡） * contra- 表示“反对，相反” 　　contradiction（矛盾） * de- 表示“减少，降低，否定” 　　decrease（减少） * dis- 表示“否定，除去”　　disassemble（拆卸） * in- il-（在字母l前）表示“不” 　　inaccurate（不准确的） illegal（违法的） * im-（在字母m、b、p前）表示“不”　　impure（不纯的） * mis- 表示“错误” 　　non- 表示“不，非”　　mislead（误导） * un- 表示“不、未、丧失”　　unaccountable（说明不了的）   加后缀构成新词改变词性： * electric（形容词）+ ity → electricity（名词：电，电学） * liquid（名词）+ ize → liquidize（动词：液化） * conduct（动词）+ or → conductor（名词：导体） * invent（动词）+ ion → invention（名词：发明） * propel（动词） + l + er → propeller（名词：推进器） * simple（形容词） + icity → simplicity（名词：单纯，注意拼写有变化） * maintain（动词） + ance → maintenance（名词：维修，注意拼写有变化） （4）**借用词**，是指借用公共英语及日常生活用语中的词汇来表达专业含义。一般来自厂商名、商标名、产品代号名、发明者名、地名等，也可将公共英语词汇演变成专业词意而实现，例如cache、firewall、flag等。 （5）通过**词类转化**构成新词，指一个词不变化词形，而由一种词类转化为另一种或几种词类，英语中名词、形容词、副词、介词可以转化成动词，动词、形容词、副词、介词可以转化成名词。 * coordinate（动词）协调→ coordinate（名词）坐标 * center（名词）中心 → center（动词）集中 * Asian（名词）亚洲人 → Asian（形容词）亚洲的 * break（动词）打破 → break（名词）间歇 * close（关上） → close（副词）靠近 * clear（形容词）明确的 → clear（动词）清除 （6）**分词**是非谓语动词的一种。分词有现在分词和过去分词两种。规则动词的现在分词由动词原形加-ing构成，过去分词由动词原形加-ed构成；不规则动词的分词形式，其构成是不规则的。分词具有形容词和副词的作用；同时还保留着动词的特征，只是在句中不能独立作谓语。 1. 现在分词。 >(1) 作定语 例句：They insisted upon their device being tested under operating conditions. 译文：他们坚持他们的装置要在运转条件下检测。 (2) 作表语 例句：The result of the experiment was encouraging. 译文：实验结果令人鼓舞。 (3) 作补足语 例句：You’d better start the computer running. 译文：你还是把计算机启动起来好。 (4) 作状语 例句：While making an experiment on an electric circuit, they learned of an important electricity law. 译文：他们在做电路实验时，学到了一条重要的电学定律。 2. 过去分词。 >(1) 作定语 例句：The charged capacitor behaves as a secondary battery. 译文：充了电的电容就像一个蓄电池一样。 (2) 作表语 例句：Some substances remain practically unchanged when heated. 译文：有几种物质受热时几乎没有变化。 (3) 作补足语 例句：I don’t know if we can get the computer repaired in time. 译文：我不知道我们能否按时修好计算机。 (4) 作状语 例句：Given the voltage and current, we can determine the resistance. 译文：已知电压和电流，我们就可以求出电阻。 （7）**动名词**是一种非谓语动词，由动词原形加词尾-ing构成，形式上和现在分词相同。由于动名词和现在分词的形成历史、意义和作用都不一样，通常把它们看作是两种不同的非谓语动词。动名词具有动词词性和名词词性，因而又可以把它称为“动词化的名词”和“名词化的动词”。在句中充当主语、表语、定语和宾语等， 动名词也可以有自己的宾语和状语，构成动名词短语。 1. **作主语**，表示一件事或一个行为，其谓语动词用第三人称单数。 >例句：Changing resistance is a method for controlling the flow of the current. 译文：改变电阻是控制电流流动的一种方法。   动名词作主语时，也可用it作形式主语，放在句首，而将真正的主语——动名词短语放在谓语之后。  >例句：It’s no good using this kind of material. 译文：采用这类材料是毫无用处的。 2. 动名词可以在一些及物动词和介词后**作介词宾语**。要求动名词作宾语的常用及物动词有：finish，enjoy，avoid，stop，need，start，mean等。 >例句：This printer needs repairing. 译文：这台打印机需要修理一下。   英语中，suggest、finish、avoid、stop、admit、keep、require、postpone、practice、fancy、deny等动词都用动名词作宾语，不能用不定式作宾语。但是在love、like、hate、begin、start、continue、remember、forget、regret等词后面可以用动名词作宾语，也可以用动词不定式作宾语。 >例句：Do you like watching/to watch TV ? 译文：你喜欢看电视吗？   动名词作宾语时，如本身带有补足语，则常用it作形式宾语。而将真正的宾语——动名词放在补足语的后面。 >例句：I found it useless arguing with her. 译文：我发现与她辩论没有用。 3. 动名词**作表语**为名词性表语。表示主语的内容，而不说明主语的性质。主语常为具有一定内涵的名词，这点与不定式作表语相似。动名词作表语与进行时的区别在于主语能否执行该词的行为。能执行，即为进行时；否则，即为动名词作表语（系表结构）。 >例句：The function of a capacitor is storing electricity. 译文：电容器的功能是存储电能。（storing是动名词，storing electricity作表语） 4. 动名词**作定语**为名词性定语，说明名词的用途，与所修饰名词之间没有逻辑主谓关系，这点是与现在分词作定语相区别的关键。动名词作定语只能使用单词，不可用动名词短语；只能放在所修饰名词前面，不可后置。 >例句：English is one of the working languages at international meeting. 译文：英语是国际会议上使用的工作语言之一。 5. 动名词在句中的作用相当于名词，故可**做宾语补足语**。动名词只能在少数动词后作宾语补足语，补充说明宾语的性质、行为或状态，与宾语具有逻辑主谓关系。 >例句：We call this process testing. 译文：我们称这个过程为检测。（testing作宾语this process的补足语） ## 四、专业资料的翻译 **1）阅读**   **词汇和语法结构**是阅读所必备的语言知识，但仅此是难以进行有效阅读的，还需具备运用这些语言知识的能力，包括根据上下文来确定准确词义好猜测生词词义的能力，辨认主题和细节的能力，正确理解连贯的句与句之间、段与段之间的逻辑关系的能力。阅读能力的提高可从三个方面进行训练。 1. **打好语言基本功**。首先，词汇是语言的建筑材料。其次，语法是语言中的结构关系，用一定的规则把词或短语组织到句子中，以表达一定的思想。 2. **在阅读实践中提高阅读能力**。在打好语言基本功的基础上，还要进行大量的阅读实践。 3. **掌握正确的阅读方法**。阅读时，注意每次视线的停顿应以一个意群为单位，而不应以一个单词为单位。   可以把一篇文章分成几个小部分、几页来读，甚至一次就读一个自然段。阅读要想有效果，就要能够辨认并记住文章中的重要细节。一个细节就是一个段落中的一条信息或一个事实。它们或者给段落的主体提供证据，或者为其提供例子。 **2）翻译技巧** 1. **原文的分析与理解**。采用分组归类的方法辨明主语、谓语、宾语及各种修饰语，联系上下文来分析和理解句与句之间、主句与从句之间的关系。重视语法分析，突出句子骨架，采用分解归类，化繁为简，逐层推进理解的策略。 >例句：The technical possibilities could well exist, therefore, of nation-wide integrated transmission network of high capacity, controlled by computers, interconnected globally by satellite and submarine cable, providing speedy and reliable communications throughout the world. 译文：因此，在技术上完全有可能实现全国性的集成传输网，这张网络容量大，可由计算机控制，并能通过卫星和海底电缆与全球相联系，提供全世界范围内高速、可靠的通信。 （possibilities是主语，could well exist是谓语，介词短语of nation-wide...cable除了修饰possibilities之外没有其他名词可以承受， 分词短语controlled...和interconnected...又进一步修饰介词短语中的network，providing...the world表示结果的状态） 2. **词义的选择和引申**。由于英语词汇来源复杂，一词多义和一词多性的现象十分普遍，因此，一定要选择合适的词义。 >例句：The electronic microscope possesses very high resolving power compared with the optical microscope. 译文：与光学显微镜相比，电子显微镜具有极高的分辨率。 例句：Energy is the power to do work. 译文：能量是指做功的能力。   英语一词多义现象使得在汉语中很难找到绝对相同的词。如果仅按词典意义原样照搬，逐字硬译，不仅使译文生硬晦涩，而且会此不达意，造成误解。因此，有必要结合语言环境透过外延看内涵，把词义做一定程度的扩展、引伸。 >例句：Two and three make five. 译文：二加三等于五。（make本意为“制造”，这里扩展为“等于”） 例句：The report is happily phrased. 译文：报告措词很恰当。（happily不应译为“幸运地”） 3. **词语的增减与变序**。在英译汉时，不可能要求二者在词的数量上绝对相等。通常应该依据句子的意义和结构适当增加、减少或重复一些词，以使译文符合汉语习惯。 >例句：The more energy we want to send, the higher we have to make the voltage. 译文：想要输电越多，电压也就得越高。（省略we）   英语中各种短语或定语从句作修饰语时，一般都是后置的，而汉语的修饰语几乎都是前置的，因而在翻译时应改变动词的顺序。同时，还应注意英语几个前置修饰语（通常为形容词、名词和代词）中最靠近被修饰词的为最主要的修饰语，翻译时应首先译出。此外，英语中的提问和强调也大都用倒装词序，翻译时应注意还原。 >例句：Such is the case. 译文：情况就是这样。（倒装还原） 例句：The transformer is a device of very great practical important which makes use of the principle of mutual induction. 译文：变压器是一种利用互感原理的在实践中很重要的装置。（从句） 4. **词性及成分的转换**。尝试改变原文中某些词的词性以适应汉语的表达习惯，如实词之间，虚词之间以及实词和虚词之间都可以互换。 >例句：Extreme care must be taken to the selection of algorithm in program design. 译文：在程序设计中必须注意算法的选择。（名称care转为动词并作为谓语来翻译）   视具体情况将句子的某一成分（主语、谓语、宾语、定语、表语、状语或补语）译成另一成分，或者将短语与短语、主句与从句、短语与从句进行转换。 >例句：Electronic computers must be programmed before they can work. 译文：必须先为电子计算机编好程序，它才能工作。（从句译为主句） 5. **标点符号的处理**。 * 英语中逗号的使用范围远远大于汉语，其具有汉语的顿号、逗号和其他一些标点符号的作用。 * 英语分号的使用范围较汉语广，也不一定像汉语那样用于连接并列成分。 * 英语中的破折号和省略号都较汉语的短，只及汉语中相应符号长度的一半。 6. **长句的翻译**。在处理长句时，一般采用顺译法、倒译法和分译法。其中分译法可将长句分解成几个独立的句子，顺序基本不变，并注意前后连贯，同时注意增加一些连词。 >例句：The structure design itself includes two different tasks, the design of the structure, in which the sizes and locations of the main members are settled, and the analysis of this structure by mathematical or graphical methods or both, to work out how the loads pass through the structure with the particular members chosen. 译文：结构设计包括两项不同的任务：一是结构设计，确定主要构件的尺寸和位置；二是用数学方法或图解方法或二者兼用进行结构分析，以便在构件选定后计算出各载荷通过结构的情况。 7. **翻译科技资料时应注意的问题**。 * 首先要把原文全部阅读一遍，了解其内容大意，专业范围和体裁风格，然后开始翻译。 * 然后遇到生词，不要马上查字典，应该先判断是属于普通用语，还是属于专业用语。 * 接着在翻译时，最好不要看一句译一句，更不能看一个词译一个词。而应该看一小段，译一小段。这样做便于从上下文联系中辨别词义，也便于注意句与句之间的衔接，段与段之间的联系，使译文通顺流畅，而不致成为一句句孤立译文的堆彻。 * 翻译科技文献要求译文必须概念清楚，逻辑正确，数据无误。文字简练，语句流畅。 参考资料： [零基础入门英语之零基础英语语法入门](https://zhuanlan.zhihu.com/p/22509992) [英语基本语法有哪些](https://www.tutorabc.com.cn/About/NewsDetail/7542.html) [英语基础语法知识](https://wenku.baidu.com/view/8a23a8114431b90d6c85c73c.html) [英语十大词类讲解](https://www.tutorabc.com.cn/About/NewsDetail/6927.html) [系动词](https://baike.baidu.com/item/%E7%B3%BB%E5%8A%A8%E8%AF%8D) ***** > 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎阅读。 

  在2018年9月，经过三个多月的出版社三审三校，撰写的书籍终于正式出版，登录到了各大在线电商网站以及线下书店，除了出版社会做推广之外，自己也会想办法做点推广。例如： 1. 编写软文、海报和迷你书，将迷你书上传到一些平台中。 2. 在百度百科和豆瓣读书建立词条。 3. 在V站和博客中组织评论赠书活动。 4. 在知乎的相关问答中植入书籍名称。 5. 百度搜索关键词优化，收效甚微。   下面是当时写的软文，标题是“面试的自信来源于扎实的基础”。 ## 一、前端四部分   跳槽是每个人都会经历的一件事，而进新公司的途径也是多样的。有的人依靠朋友推荐，直接加入，但更多的人是通过层层面试，最后符合该公司要求后才加入的。而面试的时候就会被提问，问到的问题可以说五花八门，令人不知所措，常说机会留给有准备的人，因此，不管怎样，都得在面试前好好准备准备。但前端这个工种和后端有很大的不同，它的技术栈非常广，知识的更新迭代络绎不绝，每年都会涌现出新的概念、思想或框架，最后给人的感觉就是要准备的知识量非常巨大，无从下手。无论是新接触前端的年轻工程师，还是工作多年的老鸟，有时候都会有这样的迷茫，为了能够成功拿到offer，面试之前该如何系统的学习前端知识，该完善自己的哪些不足。我个人觉得要拿下offer，首先要有扎实的前端基础，而这绝对不是一朝一夕就能实现的，需要经历一个艰难的过程才行。   前端离不开三部分：HTML、CSS和JavaScript。HTML是一种用于创建网页的标记语言，最新版本是HTML5，HTML5不仅仅是HTML的最新版本，它还是一系列Web技术的集合，包括CSS3、JavaScript、多媒体、缓存和无障碍访问等，关于HTML有一本经典的书籍《[HTML5权威指南](https://book.douban.com/subject/25786074/)》。CSS即层叠样式表，是一种样式语言，用于控制页面的表现（外观和内容排版），是HTML的补充，最新版本是CSS3，关于CSS也有一本经典的书籍《[CSS权威指南](https://book.douban.com/subject/2308234/)》，不过目前第三版只讲到了CSS2.1，如果要查阅CSS3相关的内容，可以参考大漠老师编撰的《[图解CSS3](https://book.douban.com/subject/25920727/)》。JavaScript是一种通过解释执行的高级编程语言，目前主流的版本是ES6，但很多浏览器还不能完美支持该版本的特性，因此ES5使用的也比较多，JavaScript可参考的数据比较多，例如《[JavaScript权威指南](https://book.douban.com/subject/10549733/)》、《[JavaScript高级程序设计](https://book.douban.com/subject/10546125/)》、《[你不知道的JavaScript系列](https://book.douban.com/subject/26351021/)》、《[深入理解ES6](https://book.douban.com/subject/27072230/)》等，都非常经典。可先阅读《JavaScript高级程序设计》，然后有疑惑的地方可以结合《JavaScript权威指南》来对比。并且可把《JavaScript权威指南》当成字典使用，因为直接读的话，可能索然无味，但当细细品味的时候，里面会有很多惊喜。前面两本中ES6的内容比较少，《你不知道的JavaScript系列》有专门讲解ES6的，并且该系列表述言简意赅，还提到了许多平时没有意识到的JavaScript中的盲点。《深入理解ES6》是专门讲解ES6的，内容非常丰富，结合许多实例，深度剖析了内在原理，而不仅仅流于表面，当然，还有阮一峰老师的开源书籍《[ES6标准入门](https://book.douban.com/subject/27127030/)》也是值得推荐的。除了这三部分之外，前端还需要修炼网络通信原理，这是与每个前端都息息相关的，理解其中的门道，非常有助于日常的项目开发，推荐阅读通俗易懂的《[图解HTTP](https://book.douban.com/subject/25863515/)》和《[图解TCP/IP](https://book.douban.com/subject/24737674/)》，然后在此基础上可以去阅读《[HTTP权威指南](https://book.douban.com/subject/10746113/)》，这本比较拗口，也可当作字典使用。  ##  二、稳扎稳打   前面所列的四部分仅仅是些前端基础，但内容已经非常多了，如果自己的时间有限，并且想在用短期内有所成效的话，推荐阅读《[前端程序员面试笔试宝典](http://product.dangdang.com/25342065.html)》。这部书浓缩了刚刚提到的四部分，可以将其作为前面部分的补充，书中列举了平时用的比较频繁的知识点，包括HTML5和CSS3等最新的知识点，并且在每一节中都配置了几道例题，让人加深印象，还介绍了一些面试技巧，最大程度的帮助读者能拿到自己满意的offer。 :-:    讲了这么多，其实上面也仅仅是第一步，要想完全驾驭前端，还需要掌握其它各项软硬技能。这其中包括数据结构、算法、数学、计算机组成原理、设计模式、前端框架（React、VUE等）、前端工程化（Gulp、Webpack等）、性能优化、正则和安全等硬技能。这里顺便说一下，个人觉得前端有必要掌握一门服务器语言，PHP、Java、Node.js等都可以，这样在与服务器沟通的时候能减少障碍，合作更加愉快，毕竟与服务器要经常打交道，把关系弄僵不利于开展工作。前端从业人员最好还要具备一些沟通、用户体验、产品知识等软技能，因为前端起到一个承上启下的作用，解决了下层的服务器的问题，还要解决上层的产品和UI的问题，有了这些软件技能后，就能避免不必要的麻烦出现，有时候让产品和UI接受自己的建议，能够很大程度上减少许多工作量，更快速的完成目标。最后，说一个外行对我们程序员的误解，他们总是觉得程序员的英语都很棒，但其实不然，很多人的英语都很菜，只不过代码用英文字符比较多，让人产生了误解。不过，如果你的英语很溜，那么你不但能获得更多的机会，而且能比别人学到更多的知识，毕竟很多软件技术都来源于国外，会英语的话就能在第一时间尝鲜，并且遇到问题，用英语搜索能得到许多不错的答案，国内很多都是重复的。   本文并没有列举面试的技巧，只是简单介绍了如何有系统性的学习前端基础，古人云：“千里之行，始于足下”，只要勇敢的迈出第一步，坚持稳扎稳打，相信很快就会有收货。 ***** > 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎阅读。 

  最近有点浮躁，也有点膨胀，工作也提不起劲，有点混混的节奏。   在此期间看到了本书《[工匠精神](https://link.zhihu.com/?target=https%3A//book.douban.com/subject/24502209/)》，读了几遍，矫正了一下自己。正像高达OO中的人物们一样，找到了一个战斗的理由。 ## 一、大家对工作的常规理解 1. 好工作的定义：薪水多，轻松，社会地位高。 2. 工作就是为了赚钱，养家糊口，图生存，工作等于钱。 3. 埋怨工资低，待遇差，羡慕别人的福利比自己好。 4. 工作是一种伤害身心健康的事。 5. 高收入等于快乐，人的快乐指数跟工作息息相关。 6. 仅仅看到别人的收获，却不想想人家的付出。 7. 快餐式生活，只求速度，不求内涵。反映在工作上是功利心，浮躁心和投机心。想着投机取巧，以小博大。 8. 做事总想多快好省，工作毛毛糙糙，只想着交差。有点付出，就想要回报，否则觉得吃亏不划算。 9. 缺失信仰，或者说信仰是权利和财富。 10. 这么干差不多就好了，给多少工资干多少活 11. 抱怨公司和领导不重视自己的才华，没有给他提供能展示自己能力的舞台。 12. 急功近利，发财要快，做什么都要快。什么事情都想快点完成，在最快的时间里拿到成果。   大家在工作中肯定会有上面的理解，很正常。但是如果长久以往下去，可能就会杂念太多（薪酬福利职位），按捺不住自己欲望的膨胀。浮躁投机功利的价值观慢慢主导着自己，利己心攀比心索取心与日俱增。为了赚钱而工作，渐渐抛弃了自己当初对这份工作的热爱，不再把它当成一项事业，仅仅是个工具。工作也不再快乐，长久下去，就会越干越吃力，压力越来越大，身体越来越差。每天充斥着埋怨、嫉妒、贪婪、自私，周围被满满的负能量环绕着。自己的心逐渐被侵蚀，成为暴戾的、碌碌无为的人。   有的时候，可以停下来，静静思考一下，反省一下，改变一下自己，洗涤一下心灵，培养一下工匠精神。 **工匠精神**： >有信仰的踏实和认真，勤劳，敬业，投入，全身心奉献，热爱自己的事业。对自己的事业执着专注，对所做的事情和作品精雕细琢、精益求精、一丝不苟。工匠，是那种把每个当下都做到极致的人，工匠做的只是自己，遵循本心做事，遵循本性做人。   结合一部当年火遍大江南北的动画《[中华小当家](https://link.zhihu.com/?target=https%3A//movie.douban.com/subject/2993424/)》，阐述一下这个工匠精神！这部动漫讲的是一群有梦想有目标的厨师们，靠料理拯救世界，保护全人类的故事。 :-:  ## 二、人生态度 **1）好工作**   好工作应该是一份适合你的工作，它能让你有用武之地，而且能长期做下去。工作不能按照别人的标准，父母的期望或亲友的建议来。事业是属于自己的职业之旅，小公司未必不是好公司，高收入未必是好事业。   掌握好自己的节奏，清楚自己在做什么，要做什么，不要着急，相信水到渠成。小当家中的人物，无论是光明料理界，还是黑暗料理界，都找到了适合他们的工作——厨师，虽然大家的目的不同。 :-:  **2）把工作当事业**   为钱工作的人，除了钱难以得到其他的东西。工作除了钱之外，还有宝贵的经验、良好的训练以及才华的展现。与金钱相比，工作中获得的能力、成长、经历、经验和尊重更有价值。   黑暗料理界的人完完全全诠释了将自己的厨师工作当成自己的事业，不惜杀人放火绑架、拐卖儿童、除善扬恶，各种坏事干尽，只为完成通过料理控制人心和统治世界地目的。 :-:  ## 三、幸福 **1）工作是影响幸福的重要因素**   高尔基说：“工作是快乐时，人生便是幸福；工作是义务时，人生便是苦役。”   有四样东西可以让人获得幸福：**被爱、被赞美、为他人服务和被他人需要**。小当家在用料理帮助人们的时候，是非常快乐幸福的。他对料理的执着，以及人格品质，手艺都得到了敌人和朋友的认可。 :-:  **2）在工作中注入爱**   乔布斯说：“从事一份伟大工作的唯一方法，就是去热爱这份工作。”   快乐本来就很简单，如果你能在工作中投入热情，工作本身就是一种快乐。锅巴料理专家贾雄大师，在对料理注入了自己最大的热情，发明了独特锅巴料理，此锅巴料理在视觉、听觉和味觉上给人极大的冲击和震撼。即使80多岁了，仍然对料理充满热情，还要做出更多让人们喜欢的料理。 :-:  ## 四、梦想 **1）拥有梦想，提高素养**   拥有梦想，提高素养，是在工作中展现魅力的两大条件。只有做到这两点，你的工作才真正成为你起飞的平台，而不仅仅是养家糊口的工具。   敬业、诚信、正直、勤奋、谦虚、勇敢、节制是做人的原则，说起来容易，做起来难，所谓知易行难。小当家原先的梦想是让父母的餐馆菊下楼成为全国第一的餐馆。但随后在多次粉碎黑暗料理界的阴谋后，提高了自己品格、技艺、素养等各方面的水准，升华了自己的梦想。此时的梦想就是找到传说中的厨具，打倒黑暗料理界。 :-:  **2）工作让我们的梦想得以实现**   立志要如山、行道要如水。不如山，不能坚定；不如水，不能曲达。现在的人不是没有能力而是没有方向，或者有了方向不能持之以恒，或者轻易放弃目标而重新开始。   当生活中只求速度不求内涵的“快餐”越来越多时，原本美好的东西也变了味道，反应在工作上就是功利心、浮躁心和投机心。 ## 五、信仰   你的信仰是什么？信仰是一种强大的精神支柱，一种信念。   短暂的激情靠兴趣，持续的激情靠信仰。很多人存在三大缺失：信仰缺失、诚信缺失和感恩缺失。   前几天看了《[血战钢锯岭](https://link.zhihu.com/?target=https%3A//movie.douban.com/subject/26325320/)》，主角多斯贯彻了自己的信仰：“不杀人，仅救人”，在战场上救了75个人的性命。小当家中的大陆第一特级面点师解师傅，在与面点王白罗的对决中，就强调了自己的信仰，他说道：“料理是为了让你快乐而存在的！”，强烈抨击了白罗的镇魂信仰。 :-:  ## 六、思维   注重细节，神韵存在于细节，所谓细节，往往都是我们觉得差不多、无所谓的地方，最后问题往往产生在这些地方。要想改变我们的人生，要先改变我们的思维。有三种常见思维，阻碍我们完成人生价值。 1. 交差思维，草草交差完事，从不关心做事的品质和成果。 2. 差不多思维，没有精品意识和精益求精的精神。 3. 走捷径思维，我们很少有问问题的习惯，失去了好奇心，长此以往，我们获取知识，工作的方式就喜欢走捷径。   小当家与阿Q在制作青椒肉丝的时候，一直为阳泉酒家的青椒肉丝而苦恼，直到最后时刻才发现了用柿子来做料理，从而解决了难题。他们没有仅仅为了交差、差不多而草草的完成料理。 :-:  ## 七、心 **1）心的问题**   治天下者必先治己，治己者必先治心。   经营心灵要学会解读宽恕的意义，懂得“这个世界上没有什么坎是过不去”的道理。任何事，可以大，可以小。找到适当的参照物，可以让一滴水澎湃，也可以让一座山静默。及第师傅的同门李严，16年来一直憎恨着及第，不能释怀，不惜踏入黑暗料理界，并将当年的食材做成16年的干货，这个复仇的心真是执着。但最终还是被小当家解开了他的心结，摘下了面具，重新做人。 :-:  **2）心性**   心性左右我们的行为，决定我们的生活，影响我们的未来，人的心性一半是天使，一半是魔鬼。   天使的一半是爱心、欢乐、理想、无私、诚实、谦逊、正直和廉洁；   魔鬼的一半是冷酷、自卑、嫉妒、自私、奸诈、狂傲、残暴和贪婪。   工作就是修行，通过工作，我们可以提高人性，修炼灵魂。仙女阿贝师傅的弟子绍安，就是个不折不扣被心性左右的人，不但将阿贝师傅害死，还要拿下菊下楼，在被小当家打败后，憎恨着他。然而讽刺的是，第一次是被阿贝师傅的料理打败，第二次是因为做了阿贝师傅的料理而被打败。不过最后在小当家嘴盾的攻势下，内心瓦解，选择了弃暗投明。 :-:  ## 八、修行 **1）极致**   如何将事情做到极致？ 1. 注重细节，神韵存在于细节，所谓细节，往往都是我们觉得差不多、无所谓的地方，但最后问题恰恰是产生在这些地方。 2. 重视品质，品质就是顾客满意、符合标准和零缺陷。 3. 持续、专注地工作，活在当下，对得起此刻的每分每秒。   七星刀雷恩的刀工技术举世无双，他的绝技“猛牛青龙斩”，可以不流一滴血，不掉一滴汁的将一头巨牛瞬间肢解，把最普通的杀牛工作发挥到了极致。 :-:  **2）专注**   简单的事情重复做，你就是专家；重复的事情用心做，你就是赢家。   放下抱怨的心情，把精力集中到面前的本职工作，聚精会神、全力以赴。你会发现，专业其实并不那么高不可攀。提亚的哥哥库柔，为了培育出纯正的乌骨鸡，投入了巨大的精力和财力，不惜倾家荡产，最后积劳成疾而去世。但他的目标最终还是实现了，并且在小当家的帮助下，解除了大家对乌骨鸡的误解，还了他一个清白。 :-:  **3）价值**   价格是别人给的，但价值是自己创造的。给多少工资干多少活，失去的是在工作中发挥才干，挖掘潜能的机会，放弃的是迅速成长，持续加薪的希望。   先有为后有位：你有了作为，为组织做出了贡献，组织就给你更好的位置，让你施展自己的才华。小当家刚到阳泉的时候，没有人瞧得起他，及第师傅还给他出了个难题：炒青菜，但最终被他用自己的方法解决了，赢得了大家的认可。在后面与许多高手对决后，将对手打败的同时，也赢得了他们的尊重与认可。 :-:  **4）慢**   欲速则不达，事情一步一步来，按部就班，不可能不经过耕耘就有收获。   不论做什么，都不要急于求成。罗马不是一日早就的，工匠不是一天炼成的。颜丽小姐为了在总督面前露一手，用美人计蛊惑了小当家，让他研究失传的绝技，后面虽然知道了使用方法，但还缺少了一步重要操作。然而颜丽小姐太急功近利，把小当家关起来后，就迫不及待的去献宝了，最终的结果可想而知，当然是失败了。 :-:  ## 九、特级程序员 **当你编写的代码完成后，亮出你的软件的时候是下面这样的：**  **让客户、同事朋友、领导、老板、竞争对手们体验的时候，大家的反应将先是下面这样：**  **然后再依次是下面这样：**  **接着会有人提出下面的疑惑：**  **赶紧亮出你的身份：**  **史上最杰出的特级程序员——“XXX”，在下图的模板中可替换成你的头像：**  ***** > 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎阅读。 

  2017年5月份的时候，在博客园收到一条私信，问我有没有兴趣一起写本关于前端的书。我自己从来没有想过写书，最多只是在博客园发几篇博文而已，突然收到这么一条消息，内心既忐忑又激动。怀着试一试的心情，加了发信人的QQ和微信，语音了几个小时。了解到要写一本有关前端面试方面的书，由机械工业出版社出版，主要要做的就是对前端基础知识的梳理，最大的挑战是坚持。这是一场持久战，知识点的梳理不是一朝一夕就能完成的，为此我将失去很多休息的时间。白天要忙碌的工作，晚上还得挑灯夜战，精神和肉体都将承受巨大的压力。并且一写就是一年，一直到2018年的6月，在这一年的时间中，博客完全没有更新，甚至都很少登录，大部分精力都投入到了创作中。   虽然要面临如此之多的困难，但是思前顾后最终还是接下了这个活。一则是为了不想让自己留下遗憾，乘着年轻做些有意义的事；二则是为了巩固自己所学的知识，虽然看了很多书，参与了很多项目，但是很多时候，不能学以致用，有些知识看了以后，并不会在工作中用到，也没有做合适的记录，慢慢就会被遗忘；三则是为了将自己所知的分享给大家，目前市面上各种高级前端技术层出不穷，令人眼花缭乱，而基础知识一直不受人重视，因此我想撰写一本这样的书，希望读者通过此书能快速了解各个基础知识点，再为自己查漏补缺。 ## 一、前期准备   前端面试必然离不开各种笔试题目，因此前期的准备工作就是搜集市面上已知的前端题目。通过笔试网站、个人博客、Github等各种途径，搜集到了国内和国外的各类习题，总计大概有3、4千道，每道题目会涉及一个或多个前端知识点。这些知识点并没有覆盖前端的所有方面，我只挑选了书中将会用到的部分。下图是国外某个网站的题目列表。 :-:    在搜集到这么多题后，下一步就是对它们进行分类。分类不能随便分，是要有根据的，因此要参考一些市面上的权威技术资料。可以是[W3C标准文档](https://www.w3.org/TR)，也可以是已出版的书籍，例如CSS权威指南、JavaScript权威指南和HTML5权威指南（如下图所示）等。最终我融合了多处资料，列出了让我满意的目录，这其实也是本书目录的雏形。之所以叫雏形，是因为在撰写过程中，我一直在调整，有的合并、有的分开，挑出重点，更有针对性的讲解，同时令其更容易让读者理解。搜集题目和对其进行分类，前前后后大概花了两周不到的时间，然后就将开始正文的编写。 :-:  ## 二、撰写过程 **1）参考资料**   在撰写过程中，主要参考书籍和[标准文档](https://www.w3.org/TR)。相比较个人分享的博文，书籍所写的内容措辞更严谨、描述更清晰，并且更具权威性。而标准文档虽然内容比较晦涩难读，但是是官方所出，所以准确性更高、术语更专业，如下图所示。当无法理解或对书籍和文档中所记载的内容有疑惑时，我会浏览网上的资料，结合这些资料后，再做出最终的判断。这里吐槽一下网上的资料，很多都是抄来抄去，并且缺少深入的分析，大部分都只是告诉你怎么做，但却不会告诉你其中的内在原理。 :-:  **2）措辞严谨**   撰书和写博文有个很大的区别就是措辞。写博文的话可以比较随性，想到什么就写什么；而写书就不一样了，这是要印在白纸上的，比较严肃一点。因此要用最精准的词语来描述自己所要传达的意思。每次遇到这种情况就会思前想后，还要搜索词语的意思，再分别放到语句中，反复体会，最后才会敲定用哪个词语。虽然不会像文学那样讲究，但为了更严谨一些，词语的推敲还是有必要的。例如在编写时遇到了“制定”和“制订”，两个词语发音都是一样的，并且字也差不多，稍不留神就会混用，最后查了词语释义后，才弄清楚两者之间的区别，“制定”偏重于做出最后决定，使完全确定下来，“制订”偏重于从无到有的创制、草拟而后的订立。“制定”常与政策、法令、方针、路线等搭配，“制订”常与计划、方案等搭配。再例如“的”和“地”、“判定”和“判断”等，它们的用法都要加以区别，否则就会混用。 **3）专业术语**   无论是CSS、HTML，还是JavaScript都包含许多专业术语，而最容易忽略的恰恰是这些专业术语。因为在平时的交流中，大家想不到或者说不必用专业术语来交流，都会用约定俗成的口语来表述。例如最常见的引用CSS样式，可以分为内联样式、内嵌样式和外部样式，但我们平时可能就不这么称呼，内联样式可以叫做标签内的样式、内嵌样式可以叫做页面内的样式、外部样式可以叫做CSS文件内的样式。在平时交流中这么称呼都没问题，但在书中却不能这么做，如果每次都用这么口语化的称呼，那么难免会显得不专业，并且内容还特别冗余，语句的前后很难连贯。自己以前也不怎么注意这些专业术语，因此每次都要翻阅好几本技术书籍，以及浏览相关的标准文档。标准文档是最权威的，但都是英文的，当把英文翻成中文时，又会有很多个版本。由于每个版本都会有些差异，因此我在选择时都会反复斟酌。 **4）描述清晰**   以前写博文的时候，为了贯彻自己简洁的风格，都会跳着写，前后并不会连贯，类似于记笔记。虽然很方便，但这种方式却不能移植到写书中，因为两段内容之间没有承上启下的过渡，就会不容易理解。书写出来是为了给读者看的，读者如果看不懂，那么这就是一部失败的作品。在写书的时候，时时刻刻都在提醒自己要站在读者的角度理解。举个简单的例子，在说明某个知识点的时候，通常会配一段代码。以往我都是直接写在相关内容的前面或后面，而且并不会对代码做进一步的说明。想当然的以为读者在浏览这段内容后，就能知道这段代码与内容是有关联的。这是大错特错，应该避免让读者去猜，这样既浪费时间，也会影响阅读体验，有百害而无一利。每次要描述一个知识点或术语（例如对语义化的说明）时，都会出现欲言又止的情况，心里明明很清楚这是什么，但就是无法用文字来准确的描述出来。这种情况循环往复的出现着，书到用时方恨少，这种时候真的对自己的词汇量感到无奈。每次在翻阅许许多多的资料后，才能写出令自己满意的文案。每当写完一篇章节时，都会觉得自己的身体被掏空了一次。 **5）细节把握**   除了刚刚所说的四点，还有一点很重要，那就是细节的把握。例如全书中的写法要统一，无论是标点符号还是刚刚所说的术语，都要一样，如果用了中文符号，那么没有特殊情况就一律用中文符号。如果把HTML元素的style属性中定义的样式叫内联样式，那么所有的地方都要这么叫。还有其它一些细节，例如示例代码的编排，为了提升阅读体验，可以将各条语句的注释以首字母对齐；为每张图设定一个编号，可以在阅读时更精准的定位到某张图等；在合适的位置用句号来结束一段话。 ## 三、总结   著书的过程是痛并快乐着的，我花费了半年多的时间，将自己所有的精力都扑在了写书上，放弃了很多业余生活。虽然每写一篇文章的过程都很艰辛，但我的收获也不少，我对HTML、CSS和JavaScript的认识又上升了一个高度，并且顺带便复习了一下数学（如坐标轴、除数和被除数等）以及网络原理（如HTTP、TCP等协议）等周边知识。看问题也不再那么片面，能从更高的点来分析问题。做事也更加细心，整本书我自己总共校验了六次，每一次我都会认真对待，并且将书中的示例代码整理了一份，已上传到[Github](https://github.com/pwstrick/FrondEndInterviewCode)中。还总结了四张思维导图（也已上传至[Github](https://github.com/pwstrick/FrondEndInterviewCode)），将书中讲到的HTML、CSS、JavaScript和网络相关的知识囊括进了图中，方便平时的复习和浏览。本书的名字叫做《前端程序员面试笔试宝典》，封面如下图所示，如果要支持本书，可点击[此处](http://product.dangdang.com/25342065.html)。 :-:    虽然我尽了自己最大的努力，但是时间仓促，并且自己的能力也是有限的，难免会有错误，还望大家多多指正。本书侧重的是前端基础知识部分（如下图所示），包括CSS/CSS3、HTML/HTML5和JavaScript（以ECMAScript 5为主），因此一些比较高级的知识点都没涉及到。像如日中天的React、VUE、TypeScript等，在本书中都没涉及到。再比如复杂一点的性能优化、算法等，也没有涉及到。 :-:  ***** > 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎阅读。 

  “[PrimusUI](http://pwstrick.github.io/PrimusUI/)”是自己在借鉴了如今网上很多开源的UI库，再经过自己整理加工的一个简单代码集合。   每个功能块的CSS代码都很少，力求简单易懂，低门槛，代码可根据自己实际情况轻易修改，改到符合自己场景为止。 ## 一、制作的理由 :-:    之所以重复造轮子，有以下几点原因： **1）现今开发很多时候讲究效率，给你很短的时间，完成很多的内容。**   如果不备点存货，那只能加班加点的赶进度。 **2）由于是加班加点赶出来的项目，百分百会有各种问题，兼容性啊、功能性啊、与设计图偏差。**   如果碰到挑细节的测试或领导，搞不好就要让你1像素1像素的调界面了。 **3）如果有套经历过沉淀的UI库，那么能够通过样式组件，快速搭建页面，并且兼容性等各方面都有保证。**   开发的时候只要关注各个页面中的细节即可，从容的写代码。 **4）网上的很多开源库都比较大，当需要在实际项目中使用的时候，可能就需要修改部分代码。**   正因为比较大，改动的时候就比较费劲。 **5）很多开源库都做些精细的雕琢，但自己公司的UI设计可能并不喜欢这种风格。**   这样他们设计出来的页面会与那些库不一致，就会出现第4种的情况。 **6）写一套自己的UI库，可以提升自己的想象空间，激发创造力。**   CSS3提供了很多新特性，但平时可能都没用到，不是不想用，而是想不到该如何用，例如伪元素、弹性布局等。 **7）开发的过程也是学习和实践的过程，将平时看到的，用到的，组合到一起，做了以后才会看到问题，再解决实际问题。**   古人说的绝知此事要躬行还是很有道理的。 **8）整套UI库，其实更可以把其看成是套骨架，一套你可以随意修改的骨架，要血肉丰满可以自己动手，这样更有成就感。**   这里只是分享一下思路，抛钻引玉。 :-:  ## 二、开发环境   现在前端开发与以前不同了，以前只要个带颜色的文本编辑器，一个浏览器即可。   现在前端项目也越来越大，也需要管理配置。 **1）工程搭建**   本次开发使用了构建工具“[Gulp](http://www.gulpjs.com.cn/)”，基于流的构建工具。利用“Node.js”丰富的包管理，可以将各种插件收入囊中。   如果不熟悉这个玩意儿，可以参考一下我以前写的一篇小教程《[前端自动化构建工具gulp记录](http://www.cnblogs.com/strick/p/5151714.html)》。   也可以参考[PrimusUI](http://pwstrick.github.io/PrimusUI/)库的文档中《[安装](http://pwstrick.github.io/PrimusUI/docs/gulp/install.html)》与《[插件](http://pwstrick.github.io/PrimusUI/docs/gulp/widget.html)》 **2）CSS开发**   CSS现在也可以预编译了，[SASS](http://sass-lang.com/)就是一种，有了预编译，写CSS也可以模块化开发，并且能够自动打包。   预编译可以使用Gulp中的插件“[gulp-sass](https://npm.taobao.org/package/gulp-sass)”，在那篇两教程中有提到过。   还装了浏览器属性兼容插件，rem自动计算插件等。 **3）页面自适应**   借助[flexible.js](https://github.com/amfe/lib-flexible)， 通过计算html中的font-size（用于计算rem），设置viewport的放大倍数，来实现移动自适应。 **4）文档库编辑**   说明的文档库是很有必要的，让人更有感性的认识。   文档库是用[jekyll](http://jekyllrb.com/)编写的，这是一个静态网站生成器，前面一段时间也整理过两篇小教程，《[安装与配置](http://www.cnblogs.com/strick/p/5448570.html)》和《[实际应用](http://www.cnblogs.com/strick/p/5484779.html)》 ## 三、应用技巧 :-:    所有的文件就如上图所示，下面就介绍下CSS的开发过程，demo展示页面与文档编辑就直接略过了。 **1）rem**   rem（font size of the root element）是指相对于根元素的字体大小的单位。    库中大部分都用了这个单位，这样能做更好的适配。但字体、边框等使用了px单位。   由于要计算，如果手工算的话，那要累成狗了，所以可以使用“Gulp”中的插件“[postcss-px2rem](https://npm.taobao.org/package/postcss-px2rem)”自动计算。 **2）网格（grid.scss）**   在做网格之前，曾经看过[Bootstrap](http://www.bootcss.com/)中的网格代码，就是用float加百分比宽度，或px定宽实现的。   但移动端的话，这么写还不够，移动端的浏览器比PC端的先进，所以可以用更新的CSS3属性来实现。   CSS3中有个弹性布局（Flexible），这是个好东西，可以自动计算宽度的，非常适合手机屏幕。   由于手机屏幕尺寸很多，很多情况下不能写死，即使用百分比，某种角度来说，还是写死的。   弹性布局还有个好处，那就是对齐，我以前碰到过两个字体大小不一样，但是要在同一行底部对齐，当时做起来很费劲。   而使用弹性布局只要一个属性即可，我在这个CSS模块中，封装了多种对齐样式。   如果对这个还比较陌生，可以参考下前面写的一篇小教程《[CSS3伸缩盒Flexible Box](http://www.cnblogs.com/strick/p/5204082.html)》   用网格可以轻易实现元素位置的摆放，而不像以前要用float、position来做布局，列表、布局、表单的实现就需要与网格的协作。 :-:  **3）预编译**   CSS代码用了[预编译](http://www.w3cplus.com/sassguide/syntax.html)，就和开发服务器代码差不多了，下面几个文件里面放的就是全局会用到的mixin、变量或函数。 :-:    预编译有很多优点： 1. 减少代码，预编译中有条件判断和循环，这样能组织更多的逻辑，还能复用。 ~~~css @for $col from 1 through 12 { .ui-col-#{$col} { @include flex($col); } } ~~~ 2. 变量的定义，能够使得值更有语义。 3. 嵌套语法，可以让CSS更有层次，一眼就能看出父级是谁，不像以前还得写一长串。 ~~~css .ui-flex { display: flex; width: 100%; box-sizing: border-box; & > [class^="ui-width-"], & > [class^="ui-rem-"]{ flex-basis: auto; } } ~~~ 4.  混合（mixin）与函数（function）可以将通用的逻辑或代码提炼出来，能更好的复用。 5. CSS也可以做模块化，通过“@import”引用不同的功能块，适应不同的场景。    “[PrimusUI](http://pwstrick.github.io/PrimusUI/)”虽然代码量不多，但制作过程还是挺有劲的，虽然在使用SASS、Jekyll与Gulp的时候有点学习成本，但都是非常轻量的。   会用了以后能够做很多事情，方便开发，提升效率。希望这个库对大家平时的开发会有帮助。   【[GitHub](https://github.com/pwstrick/PrimusUI)】的项目页面用英文写了些介绍，更接地气点。 ***** > 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎阅读。 

## 一、榫卯   榫卯（sǔn mǎo），是古代中国建筑、家具及其它器械的主要结构方式，是在两个构件上采用凹凸部位相结合的一种连接方式。   若榫卯使用得当，两块木结构之间就能严密扣合，达到“天衣无缝”的程度，并且不用钉子。 :-:    下面这张图来自于山西悬空寺，屋檐下面的那些都是用榫卯做成的，没有用一颗钉子。 :-:  ## 二、JavaScript与榫卯   在开发页面的时候，或多或少的要写JavaScript，除了些业务逻辑的代码外。   还有DOM操作，AJAX处理，事件绑定，实用功能，Promises/A+规范实现，样式、集合、数组、函数、对象、时间、URL、动画、模版、cookie等各种操作。   现在网上相关的开源库很多，例如封装DOM操作的，有[Zepto](https://github.com/madrobby/zepto)、[Sizzle引擎](https://github.com/jquery/sizzle)等，实用库[Underscore](http://underscorejs.org/)、[Sugar](http://sugarjs.com/)等。 :-:    这些封装好的库使用起来方便兼容性好，但是有些时候我仅仅是需要使用里面的个别方法，例如做活动页面。   就为了这几个个别方法而把整个库都引进来，有种杀鸡用牛刀的感觉。   当看到下面那位非洲朋友用圣剑来切牛排，囧，瞬间就能体会那种感觉。 :-:    而如果想把里面的个别方法抽出来，又不能直接用，因为这些方法可能引用了库中的私有方法属性等，就好像建筑里的钉子，需要钉子来衔接。   所以这个时候就需要使用自己封装的函数，就好比榫卯，拿来即可用，而不需要特定的钉子。 ## 三、构建榫卯结构   要想构建，最方便的还是要参考下现有的库是如何做的，这样能少走些弯路。   在Github上面看到了两个页面，专门记录了各种类库《[Front-End-Develop-Guide](https://github.com/icepy/Front-End-Develop-Guide)》与《[Awesome JavaScript](https://github.com/sorrycc/awesome-javascript)》   有些时候也不用一定要自己写，有相关的类库就直接收录进来，要用的时候就不用再到网上去各种搜索啦！ **1）DOM选择器**   这是在平时开发页面必用的，ES5规范出来后，定义了很多实用的方法，可以不再像以前那样编写大量的兼容代码。   原生的“[querySelectorAll](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/querySelectorAll)”和“[querySelector](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector)”非常强大，语法和JQuery中的选择器大致一样。 [Sizzle](https://sizzlejs.com/)也就是是[jQuery](https://jquery.com/)的选择器引擎，将近2000行的代码，不过很多代码是在兼容IE6、IE7等古老的PC浏览器，关于这个引擎可以参考《[jQuery中的Sizzle引擎分析](http://www.cnblogs.com/strick/p/5078435.html)》   我现在都是在移动端开发，移动端的浏览器都要高级些，所以我打算参考[Zepto](https://github.com/madrobby/zepto)来封装。   这个是针对移动端浏览器，并且是模块化的，想参考里面的3个模块，event是事件模块。 :-:    还看到两个更小的库，[HTML](http://nbubna.github.io/HTML/)和[140 medley](https://github.com/honza/140medley)。 **2）实用库**   实用库我打算参考[Underscore](http://underscorejs.org/)与[Sugar](http://sugarjs.com/)，这两个库都有各自的主页，分类也很清晰。   Underscore还有个带注释的[源代码页面](http://underscorejs.org/docs/underscore.html)。   Underscore分为Collection、Array、Function、Object、Utility几大部分。   Sugar分为Array、String、Number、Date、Object、Function、RegExp、Range几大部分。   根据他们的分类，两个库之间有些地方应该还能互补一下。 :-:  **3）其他相关的库** 1. 对时间的各种操作，有两个库用的人蛮多，[Datejs](http://www.datejs.com/)和[moment](http://momentjs.com/)。我是比较前者，代码比较少，比较容易看源码。 2. Promises/A+规范的实现，相关库比较多，[when.js](https://github.com/cujojs/when)、[Zepto中的deferred.js](https://github.com/madrobby/zepto/blob/master/src/deferred.js)还有[promise-polyfill](https://github.com/taylorhakes/promise-polyfill)。如果对这个规范概念不是很清楚，可以参考《[Promises/A+规范的实现](http://www.cnblogs.com/strick/p/5092092.html)》 3. 模板喜欢用[mustache](https://github.com/janl/mustache.js)，代码简洁，但功能不简洁，用了以后就会知道很方便。 4. 本地存储的封装，可以借鉴或直接引用[store.js](https://github.com/marcuswestin/store.js)，代码就100多行，完全能看懂。 5. cookie的各种操作，可以借鉴或直接引用[js-cookie](https://github.com/js-cookie/js-cookie)，源码也是我喜欢的100多行。 6. 对URL的基本操作，可以借鉴或直接引用[domurl](https://github.com/Mikhus/domurl)。   我选择库都会选择小巧、功能比较单一、而且不依赖第三方库。   源码看起来也能方便点，抽出代码的时候也能少费点时间。   这里只是做个抛砖引玉，具体怎么构建可以根据实际情况来操作。 ***** 参考资料： [Zepto源码分析](https://github.com/mominger/blog) [前端开发指南](https://github.com/icepy/Front-End-Develop-Guide) [Awesome JavaScript](https://github.com/sorrycc/awesome-javascript) ***** > 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎阅读。 

  在被裁员的那一周，正好看到以前的同事在朋友圈发招聘前端的公告。本来自己就对前端感兴趣，于是就联系了那同事。周五就去面试，他那边非常缺人，上一个前端团队都离职了，他也是从其他部门转过去的，每天忙的飞起来，我过来后就能帮他分摊掉很多事情，他也可以早点下班了。这家公司工作到至今还没换过，从事纯前端，后端有专们的人负责。   刚进公司的时候，分在了前端组。后面在2017年6月的时候，公司内部调岗，CTO将我从原先的前端组转到了广告组。　　 **1）技术部**   公司CTO是从腾讯过来的，挖了很多腾讯的人过来，技术部的规模比以往要大很多，大概有六七十人，其中后端的PHP开发人数最多。前端组重新组建，只有3个人，都是认识的老同事。前端开发也是让我耳目一新，首次接触ES6、gulp、webpack、nodejs、SASS、Jade、React等等新工具新概念，给了我巨大的冲击，原来前端是这么玩的。公司选用的版本控制系统是Git，不再是SVN了。做的页面也从PC端转到移动端，移动端的页面制作起来比PC端的要快一些，毕竟内容要少很多，这段时间的博文创作也是最多的。 **2）职责**   公司的主营业务都由客户端完成，前端主要做些辅助任务。最多的就是制作活动页面，基本都是一周或两周的时间周期，由产品、运营等部门提出需求，再设计页面。项目都比较小，公司也就没配项目经理，但基本都是按时完成的，与设计、产品、后端等部门的配合都比较默契，从没出现过冲突。记得2016年巴西奥运会的时候，CTO亲自操刀，做个奥运夺金的活动，我们小组的人都参与，前前后后搞了将近一个月，预期日活是100W，不过最终没那么高，只到达了30W。 **3）读书**   这段时间阅读了大量的前端著作，过去也会读技术书籍，但很多时候都是随便翻翻。现在不同，在读完后，会抽时间做点记录，消化学到的知识，并整理成一篇篇文章，再加点自己的一些体会或实践书中的代码，验证书中所述的是否正确。将这些留作[记录](https://www.cnblogs.com/strick/category/1258243.html)，可供自己日后浏览。 **4）开源**   自己的闲暇的时候也制作了些简单的脚本插件，例如表单验证、提示框等，还上传到了Github上，很有趣。公司里还搞了个简单的内部UI库，封装了一些常见的模块，提升工作效率。关于这个UI库的具体细节，可以浏览《[小身材大用途，用PrimusUI驾驭你的页面](https://www.cnblogs.com/strick/p/5536321.html)》。 ## 一、广告组 **1）活动页面**   转到广告组后，职能相对就比较单一，主要负责与广告业务相关的活动页面。布局方面也比较统一，与以前的活动完全不同，没有各种花哨的特效，以及独特的功能，而广告业务的活动关注的是线索搜集，没啥特别多的特效。但就是工期经常很短，可能今天说要做，后天就要上线，甚至是明天就要上线，很注重效率。 **2）技术狩猎**   在业余时间，会去研究一些新技术或基础概念。也是在进入这家公司后，我意识到了自己基础的薄弱，需要补一补，于是研读了很多技术基础书籍，为此还做了各种实践，例如重新学习了DOM、CSS的渐变、正则表达式等。   这段时间不仅学习了ES6、HTML5和CSS3等基础知识，还学习了React、性能优化、设计模式等实用技能，不断地弥补自身的不足，期间还加强了对英语的学习。 ***** > 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎阅读。 

  2016年之前的前端开发主要还是以PC端为主，移动端做的比较少。   这里想总结些编写网页的经验，以PC端的为主，前面总结过后台的，今天写些前台的，参考了[bootstrap3.3.5](http://www.bootcss.com/)、[bootstrip2.3.2](http://v2.bootcss.com/index.html)和模版[matrix](http://matrix.pwstrick.com/)。   前段时间还写过一篇[《前端基础学习分享》](http://www.cnblogs.com/strick/p/4377213.html)，比较基础的文章。   每次写CSS，总感觉不用写那么多CSS，但是精简的时候， 又难以下手。越写越觉得代码越来越多，越来越乱，所以这次我打算整理出一套比较灵活的结构，供以后使用。   CSS应该也可以像其他那些语言写的有层次，有结构。 ## 一、规划 1. 在拿到psd效果图后，我会将所有的效果图看一遍，然后开始打草稿，在纸上画，在PS中标注都可以。一般都是做个大概的统计，太详细不太现实，既费时间也费精力。 2. 网站的浏览器兼容性要顾及到哪些，IE6，IE7还是IE8以上等，[点击查看浏览器分布情况](http://gs.statcounter.com/)。写CSS的时候还得照顾下低版本的浏览器。 3. 页面中的字体大小有几种；颜色有几种；超链接的:visit，:hover，:visit样式有几种 4. 网站中有多少个小图标，是否可以用现有的字体库替代小图片 5. 网站中是否用到了表格table，有哪几种表格款式，能否做出抽象 6. 有几种按钮款式，扁平的、3D的还是啥样的 7. 写些通用点的宽度与位移类，要能与其他地方配合，例如表单，文本等 8. 表单中是横排的还是竖排的；输入框是怎么样的；下拉框单选框多选框又是啥样的，有些高逼格的网站无法忍受下拉框等的默认样式，那就得美化；颜色有几种 9. 需要哪些辅助类，比如情境背景色等 10. 网站可以抽象出许多可复用的组建，例如分页、错误页面等 11. CSS也可以有面向对象的思维，将通用的结构抽象出来，做成一个基类。 12. 开发的时候将CSS手册打开，一些周边的在线网站准备好，例如[CSS参考手册](http://css.doyoe.com/)，[webkit css library - 属性速查](http://ued.ctrip.com/blog/wp-content/webkitcss/quicksearch.html)，[CSS3样式生成器](http://www.css88.com/tool/css3Preview/)等。 ## 二、低版本浏览器支持   以IE6、IE7为代表的一些低版本的浏览器很多CSS3、HTML5都不支持，有些伪类也不支持，例如:before等。这个时候就要做些兼容的操作。 **1）modernizr.js**   “[Modernizr](http://modernizr.com/)”是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前，通过检验浏览器对一系列测试的处理情况，Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。可自定义脚本下载。使用了这个插件后，在html标签中会显示class，如下图所示，如果不支持某个CSS3，就会以“no-”开头。这样做的 话，就能优雅降级，在不支持这种样式的时候，换成另外一种样式。 :-:  **2）respond.js**   “[Respond.js](https://github.com/scottjehl/Respond)”是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。 ## 三、基本的CSS设置 **1）CSS的reset**   重新默认样式，这个肯定有必要。参考了[HTML5 Boilerplate](http://www.bootcss.com/p/html5boilerplate/)。模版里的CSS注释是洋文的，自己翻译了一些。 ~~~css /** * HTML5标签 在IE 8 / 9没有定义。 * 在IE 10/11 Firefox 中没有定义`details` or `summary` * 在IE 11中没有定义main */ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary { display: block; } figure,menu{ margin:0; padding:0; } ul,ol{ padding:0; list-style-type:none; } h1,h2,h3,h4,h5,h6,p,ul,ol,form,dl,dt,dd,li{ margin:0; } ....... ~~~ **2）CSS的通用样式** 1. 左浮动，有浮动，清浮动；左对齐，右对齐，居中；字体粗细，加粗，斜体，普通等；宋体、雅黑字体等 2. position定位，相对定位，绝对定位等；display属性，block、inline、inline-block等 3. overflow属性，有hidden、scrolldeng；zoom属性；cursor属性；text-decoration属性 4. margin的四个方向；padding的四个方向 ~~~css .l{float:left;}.r{float:right;}.cb{clear:both;} .n{font-weight:normal; font-style:normal;}.b{font-weight:bold;}.i{font-style:italic;} .fa{font-family:Arial;}.fg{font-family:Georgia;}.ft{font-family:Tahoma;}.fl{font-family:Lucida Console;}.fs{font-family:'宋体';}.fw{font-family:'微软雅黑';}.fe{font-family:'serif';} .tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;} .rel{position:relative;}.abs{position:absolute;}.fixed{position:fixed;} .db{display:block;}.dib{-moz-inline-stack:inline-block; display:inline-block;}.di{display:inline;}.dn{display:none;} .ovh{overflow:hidden;}.ovs{overflow:scroll;}.vh{visibility:hidden;}.vv{visibility:visible;} .z{_zoom:1;}.zoom1{*zoom:1;} .mt5{margin-top: 5px;}.mt10{margin-top: 10px;}.mt15{margin-top: 15px;}.mt20{margin-top: 20px;} .mr5{margin-right: 5px;}.mr10{margin-right: 10px;}.mr15{margin-right: 15px;}.mr20{margin-right: 20px;} .mb5{margin-bottom: 5px;}.mb10{margin-bottom: 10px;}.mb15{margin-bottom: 15px;}.mb20{margin-bottom: 20px;} .ml5{margin-left: 5px;}.ml10{margin-left: 10px;}.ml15{margin-left: 15px;}.ml20{margin-left: 20px;} .pt5{padding-top: 5px;}.pt10{padding-top: 10px;}.pt15{padding-top: 15px;}.pt20{padding-top: 20px;} .pr5{padding-right: 5px;}.pr10{padding-right: 10px;}.pr15{padding-right: 15px;}.pr20{padding-right: 20px;} .pb5{padding-bottom: 5px;}.pb10{padding-bottom: 10px;}.pb15{padding-bottom: 15px;}.pb20{padding-bottom: 20px;} .pl5{padding-left: 5px;}.pl10{padding-left: 10px;}.pl15{padding-left: 15px;}.pl20{padding-left: 20px;} .cursor-pointer{cursor:pointer;} .line-del{text-decoration:line-through;} ~~~ **3）工具样式** 1. 清除浮动　　 2. 强制换行　　 3. 两边对齐等样式　　 4. 单选框复选框文字对齐　　 5. 截断文本，多出的文字显示...　　 6. 小三角显示 ~~~css .input_align{vertical-align:-3px;}/*单选框复选框文字对齐*/ .interception{white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}/*多出的显示...*/ .br{word-wrap:break-word;word-break:break-all}/*强制换行*/ .same_height{margin-bottom:-3000px; padding-bottom:3000px}/*两边齐平*/ .fix{*zoom:1;} .fix:after,.fix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}/*清浮动*/ .min_fix{overflow:hidden;_zoom:1} /** * 小三角 * 纯色的就用一个，如果不是纯色的就用两个重叠再绝对定位 */ span[class^="triangle-"]{ content: ''; height: 0; width: 0; position: absolute; pointer-events: none; } .triangle-top{ border: solid transparent; border-width: 10px;/*宽度自定义*/ border-top-color: #821134;/*四个方向 需要显示那个位置的就设置*/ } ~~~ **4）视网膜屏幕（Retina）**   现在的手机，或苹果电脑等，屏幕都是Retina屏的，高清分辨率，就要做单独处理了。下面的属性参考了[bootstrap](http://v3.bootcss.com/css/)。 ~~~css @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .css{ /*background-image: url(img_2x.png);*/ } } ~~~ **5）移动端CSS**   这里简单的介绍下移动端的开发。在这篇[《移动web资源整理》](http://www.cnblogs.com/PeunZhang/archive/2015/03/03/3407453.html)的文章中有更多详细的说明，我里面的代码也是参照这篇文章修改的。 ~~~html ~~~ ## 四、字体ICON **1）自定义字体** 1. 以前的icon基本都是用图片sprite技术，现在有了自定义字体，在高版本的浏览器中可以替代图片了。这里我选用了[Font-Awesome](https://fortawesome.github.io/Font-Awesome/icons/)，有400多个图标可以选择。 2. 下载后，稍微修改下那个CSS。第二个样式使用了属性选择符，这样的话只要是“fa-”开头的就是会显示字体。 3. 可以直接引用字体库的CSS，也可以按需引用，写到自己的CSS文档中。 4. 这里顺便介绍下[Simple Icons](http://www.bootcss.com/p/simple-icons/)，收集众多网站的Logo，并提供高质量、不同尺寸的png格式图片给广大网友。里面是图片，不是字体。 ~~~css @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .fa, i[class^="fa-"]{ display: inline-block; font: normal normal normal 14px/1 FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); } ~~~ **2）h1--h6标签**   这里参考了[bootstrap](http://v3.bootcss.com/css/)中对这几个标签的重置，设置标题、副标题等可以用到，不然老是用p标签加字体大小，页面中的标签就太不丰富啦。 ~~~css h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h1 small,h2 small,h3 small,h4 small,h5 small,h6 small, .h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small, h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small, .h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small { font-weight: normal; line-height: 1; color: #777; } h1,.h1,h2,.h2,h3,.h3 { margin-top: 20px; margin-bottom: 10px; } h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small, h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small { font-size: 65%; } h4,.h4,h5,.h5,h6,.h6 { margin-top: 10px; margin-bottom: 10px; } h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small, h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small { font-size: 75%; } h1,.h1 {font-size: 36px;} h2,.h2 {font-size: 30px;} h3,.h3 {font-size: 24px;} h4,.h4 {font-size: 18px;} h5,.h5 {font-size: 14px;} h6,.h6 {font-size: 12px;} ~~~ ## 五、表格   网站中或多或少会用到些表格结构，关于表格的一些属性，我在文章[《关于table的一些记录》](http://www.cnblogs.com/strick/p/3789114.html)中做过记录。   实际应用中的表格是多种多样的，绝不是[bootstrip](http://v3.bootcss.com/css/)模版中的几个样式所能摆平的，但模版中的思路可以借鉴，将样式抽象出来做到复用。   在CSS中单独开辟一段专门给表格的样式区域。 **1）加.table样式** 1. 表格内的单元格是居中，居左还是居右可根据实际情况来定。 2. 准备了三个对齐类.tr、.tc和.tl :-:  **2）条纹状网格.table-striped** 1. 这里是依赖:nth-child CSS 选择器实现的，这样就会有兼容性的问题，IE8浏览器及以下的都不支持 2. 但可以写的普通点，就是在偶数或单数的tr上面单独加样式 :-:  **3）带边框的表格.table-bordered** 1. 就是给td、th加上border属性。 2. 注意标题下面的border是2像素，这些都可以找到相应的代码自定义。 :-:  **4）鼠标悬停.table-hover** 1. 就是给tr加个:hover :-:  **5）颜色状态** 1. 有时候要给标题栏或内容栏给定不同的颜色，这里做了几个示例颜色 2. 实际情况可能就是几种完全不同的颜色 :-:    根据实际情况可以组合运用   也可以自定义自己实际项目中的样式，组合也行，单独使用也行 ## 六、按钮 1. 这里还是参照[bootstrip](http://v3.bootcss.com/css/)的按钮做demo。 2. 如果模版中没有合适的，可以点击[Buttons](http://www.bootcss.com/p/buttons/)网站，一个开源的按钮CSS样式库，款式众多，也可自定义，总有一款适合你吧。 3. 有三种标签可以做成按钮，\、\和\ **1）普通样式按钮** :-:  1. 如上图所示，我们常见到的 2. 抽象出一个通用类.btn，然后根据颜色不同再编写不用的类.btn-default、.btn-success等，还有一个disabled，不可点击时候的样式。 3. 将大小类也独立出来，.btn-lg、.btn-sm等 4. 根据实际情况也可以做这三次的抽象，实际的按钮肯定与这里的不一样 5. CSS代码仅仅是部分的，将抽象基类展示了出来 ~~~html

按钮

按钮 按钮 按钮 按钮