leetcode 记录

好久没刷题了..  刷题使我快乐

相关答题记录在我的 git 上:https://github.com/xunge0613/leetcode-practice

2018年6月7日18:03:19

771. Jewels and Stones

描述:
统计在字符串B中出现的A字符中的字符个数

想法:
1  练习算法题,先实现、再优化
2 目的是为了让自己进步,所以需要不断的练习,感悟
3 自己完成以后,学习其他人优秀的代码
4 看完别人的代码以后,对比一下,找一找自己的不足之处或者薄弱之处:函数式,代码优雅、可读性

思路:
1 遍历字符串 S
扩展:JS 各种遍历
扩展:reduce
2 查找 S 中的字符串是否在 J 中

记录:
1 第一次提交 60ms
2 第二次想尝试优化一下,用 map 来缓存记录,结果发现运行速度更慢了
3 第三次回到第一次的方法,
4 第四次,参考大佬们的代码,用函数式写了一下.. 运行速度疑似变快了一点点,但是代码确实整洁了许多.

回顾:
耗时 30 min 开发
耗时 1 hour 思考、学习、记录

821. Shortest Distance to a Character

想法:
1 将端点坐标记录在数组中
2 相应的距离通过端点坐标来进行计算(分为3段)
每个端点的值用 indexOf() 的值来记录
最初到第一个端点:倒序输出即可
最后一个端点到结束:总字符串长度 减去 该端点到起点的线段长度,正序输出即可
其余情况:实际上转换为了一道数学题,1 2 3 2 1 (5),计算 5 的展开式……
判断是奇数还是偶数,然后对称位置加上同样的数,最后补上端点自身的 0,对于奇数,中间的那位数也要补上,偶数则不需要. 对于 0 的话,作为偶数,但不进入循环,直接补上自身的 0
3 复杂度预计为 o(n*pn*(pv /2)) ??? pn 为端点的个数 、pv 为端点的值

知识储备:
1 数组拼接 concat
2 字符串分割 substring

记录:
1 第一次提交,WA,没有考虑到奇数情况的端点处理(tempResult[element – index – 1]),此处未减 1
2 第二次提交,通过,68ms,但貌似提交总数有点少,不知道自己的运行效率如何。估计只能算一般,甚至更糟。

2018年6月6日16:41:17

7. Reverse Integer

描述:
给定32位带符号整数,返回倒序后的数字

分析:
1 倒序
2 判断正负数 ,并相应处理
3 倒序后,开头0的处理
4 判断大数(> 2^31 – 1 or < -2^31),并相应处理

记录:
第一次提交答题时由于没有判断大数,所以 WA 了.. 用 js 写感觉好偷懒……

34. Search for a Range

描述:在有序数组中,查找某一特定值在数组中所在范围;不存在则返回 [-1,-1];复杂度不能超过 O(log n).

分析:
本质上就是一个搜索,分别查找最小索引和最大索引,而且数组已经排序过,所以用二分查找比较合适。
每一次二分查找,都是通过循环,调整临时的最大、最小索引,不断逼近,查找出此次的极值(最小或最大),

记录:
第一次尝试使用的是二分法查找,结果写了半天写不下去了,觉得逻辑有问题.
第二次尝试,改用最基础的正向遍历和反向遍历完成了答题,一次通过,运行速度超过了92%的js提交…… 60ms
第三次尝试,学习了讨论区里大佬们的算法,改成对最小索引和最大索引分别进行二分查找,运行速度超过了98%的js提交… 56ms

思考:
作图更有助于理解本题
中间值就是每一次进行查询的索引
在二分查找过程中,会遇到几种搜索情况:
第一种,未命中,且当前值小于待查询值,于是设置最小索引值为中间值 + 1(向右查询)
第二种,未命中,且当前值大于待查询值,于是设置最大索引值为中间值 – 1(向左查询)
第三种,已命中,若当前查找最小索引,则设置最大索引值为中间值 – 1,(向左查询)
第四种,已命中,若当前查找最大索引,则设置最小索引值为中间值 + 1,(向左查询)
当最大索引值与最小索引值相同时,此时的中间值,就是最终确定下来的边界值

读后感:《你在天堂里遇见的五个人》

前言: 前天(周四 6月15日)一位好友推荐、分享了一篇短篇小说《你在天堂里遇见的五个人》。于是那天夜里抱着试试看的心态看了一部分,觉得这本书很有趣,然后昨天晚上着迷般读完了昨晚看剩下的一半,不长,几个小时即可读完。

也因为这本书挺有趣,所以就稍微写一点文字作为读后感(虽然小时候特别讨厌写读后感,但现在发现确实是一个不错的学习方法)。希望不要因为这篇文章掉粉啊(总感觉这句话是个 flag……=。=),毕竟当年高考语文没及格的我,语文作文一直是我硬伤……

高能预警:严重剧透

高能预警:严重剧透

高能预警:严重剧透

每一个人都会对另一个人造成影响,另一个人又对其他人造成影响,这整个世界充满了故事,然而所有的故事共同串连成一个完整的故事。

先说说读这本书的感受,

起初读这本书时,会感到一些恐惧,但是渐渐会被温暖、慰藉所代替。当沉浸于这本书时,内心变得安宁、平和。

不自禁地会把自己代入进去:会去反思自己过去所做所为,重新审视对他人的看法是不是带有偏见、误会,会去尝试换位思考。会去思考,谁可能是我遇见的五个人?

看到第三个人说完爱迪父亲真实的死因的时候,就感觉自己快流眼泪了;接着继续看到最后,遇见的第五个人,小女孩的故事,终究还是没忍住流下眼泪……

比较巧合的是,前几天(6月13日)刚巧是我生日,而这本书里面,也频繁出现了主角爱迪的生日场景。有点巧。

再说说自己的联想

看完整本书以后,第一个想到的就是一首歌,最近经常单曲循环,骑车回家的路上也经常哼的一首歌:五月天的《少年他的奇幻漂流》。如果感兴趣可以看看这首歌的 MV 以及歌词(都很用心):《少年他的奇幻漂流》MV

以下是部分节选,看到书中遇见的第一个人:蓝皮人的时候…… 就想起了其中的一段歌词……

诸神已离开 鬼在狂欢 而人们在纠缠
谁生错血脉 谁长错色彩 谁梦错了期待

漂流无边汪洋 不叫做孤单
夜色的最黑暗 那不是最黑暗
而是人们无穷 无尽的争端
将你我推向了 最远两端
异端 极端 遗落的遗憾

我们会航向怎样的未来
无数命运流转
打造了 无数的
相异的罗盘

如果世界只剩你我存在
为何人们依然
争论著 那未来
而践踏着现在

我们该珍惜如何的现在
无数交织自传
相遇在 汪洋中

第四个人,玛格丽特说的话,

失去的爱仍然是爱,只不过形式不一样了。你看不见他们的笑容,不能为他们端上三餐,不能拨弄他们的头发,不能拥着他们在舞池里转。可是,随着这些感受的褪去,会有另一种感觉逐渐转浓。那是记忆。记忆变成你的伴侣。你灌溉它,你拥有它。你与记忆共舞。

“人生总会结束。”她说:“爱,没有终点。”

这让我忆起同样是五月天的《转眼》,也是我很喜欢的一首歌:

我不怕死亡 只害怕遗忘

回忆是你我 生存的地方

然后脑洞大开,突然又回忆起大学时选修《英美诗歌》这门跨专业选修课,貌似还是第一堂课介绍的莎翁的《Sonnet 18》,异曲同工。

Nor shall death brag thou wander’st in his shade,
When in eternal lines to time thou grow’st,
So long as men can breathe, or eyes can see,
So long lives this, and this gives life to thee.

而关于全书最后的那段话:

每一个人都会对另一个人造成影响,另一个人又对其他人造成影响,这整个世界充满了故事,然而所有的故事共同串连成一个完整的故事。

有一种《云图》的既视感……六个环环相扣的故事,时间跨度从十九世纪到后末日时代,波及全球各地……

接着说说个人理解,

在读完前四个人的故事后,我的理解是:作者想表达每个人要理性、慎重、谨慎地做出生活中的每一个决定,但我觉得若过于极端的话,就可能导致人变的消极、犹豫、无为、懊悔;

直到读完最后一个故事,自我救赎。觉得作者还是希望人们不必太自责,要放下过去,“悟已往之不谏,知来者之可追”。毕竟人无完人,每个人在各自成长过程中,难免会留下遗憾,也难免会给别人带来伤害,我们能做的便是宽恕他人、宽恕自己、积极面对生活、善待他人、善待自己。

而这篇小说的几个核心:公平、牺牲、宽恕、爱、自我救赎。给我的感觉是作者主要描述的还是一些理想的概念,现实生活中必然受限于各种因素,包括且不限于文化的差异、价值观的差异、经济的差异等等。作者只是将这些概念抛出来,虽然略带有说教性质,但主要目的还是希望能引起读者的自我思考,也算是一件积极的事情。

至于这本书对我的影响,

也许以后我也会思考,我接下来做的事情,也许哪怕是不经意的事情,会给别人带来多少影响?就比如前阵子我结合我个人的  『前端开发技术成长过程中的知识点整理』,以及 『team leader 的实践经历』 写了两篇文章,也许会对他人有所影响、有所帮助、有所改变。

也坚定了我成为一名优秀引导者的信念,因为我的成长过程中,离不开他人的指导,也就是所谓的站在巨人的肩膀上,而我也愿意为之出一份力,希望有一天我也能通过我的努力,对他人的成长带来积极的影响。前阵子产出的一篇关于『前端实习生培养体系』的文章就是依赖于前辈们的经验,再结合自己的想法、理念完成的。

每一个人都会对另一个人造成影响,另一个人又对其他人造成影响,这整个世界充满了故事,然而所有的故事共同串连成一个完整的故事。

最后,

突然觉得活着、积极地生活着、朝着理想生活积极地活着真的都是很美好的事情。

Carpe diem.

附:

一些语录

一次意外看似偶然,其实也有它的必然。你的一次不经意的决定也许就会改变另一个人的命运。

出生和死亡,皆是一个整体的一部分”。人的存在就是这样强烈地影响了另外一个人。这种影响,关乎死亡,看起来很随机,与公平、公正没有丝毫关系。

年轻人上战场,有时是因为他们不得不去,有时是因为他们想去。但是,他们永远觉得,他们应该去。千百年悲哀的、错综复杂的人类历史让人们误认为拿起武器便是勇敢,放下武器便是怯懦。

“你不明白,自我牺牲其实是生命的一部分。就应该是这样。它不是需要惋惜,而是值得追求的东西。渺小的牺牲。宏大的牺牲。一位母亲去工作,以便送她的儿子上学。一个女儿搬回家住,以便照顾她患病的父亲。

“我开枪打了你,没错,”他说道,“你失去了一些东西,但你也得到了一些东西。你只是不知道而已。我也得到了一些东西。” “我得以遵守了我的诺言。我没有让你掉队。”

“在你出生以前所发生的事情,还是会影响到你。”她说:“比你早来到这世上的人,也会对你造成影响。 “我们每天进出的场所,如果没有前人的付出,今天就绝对不会存在。我们每天在工作场所投注许多时间,我们常常以为,那些地方是因为有了我们之后才出现的。其实并非如此。”

露比朝着他走去,柔声叫了他一声“艾德华”。这是她第一次喊他的名字:“听我的劝告。心中留着愤怒,对人是有害处的。愤怒会腐蚀你的内心。我们以为怨恨是一项武器,可以用来攻击那些伤害过我们的人。可是,仇恨是一把弯曲的刀;我们造成了伤害,其实是伤害了自己。

“艾迪啊,失去的爱仍然是爱,只不过形式不一样了。你看不见他们的笑容,不能为他们端上三餐,不能拨弄他们的头发,不能拥着他们在舞池里转。可是,随着这些感受的褪去,会有另一种感觉逐渐转浓。那是记忆。记忆变成你的伴侣。你灌溉它,你拥有它。你与记忆共舞。

“人生总会结束。”她说:“爱,没有终点。”

白色。只有白色。没有地,没有天,没有大地之间的地平线。只有一片纯洁而宁静的白,有如最寂静的黎明时分落下最深的雪,安静无声。

每一个人都会对另一个人造成影响,另一个人又对其他人造成影响,这整个世界充满了故事,然而所有的故事共同串连成一个完整的故事。

吃土小2叉
2017年6月17日20:26:38

写给 25 岁、26 岁以及 17 岁的自己

前言:这是一篇非技术文,这个月我会不断维护、迭代,目的是为了自我认知更全面,以及凭借我糟糕的文笔,不断完善本文措辞。好记性不如烂笔头,通过这篇文章记录一下自己成长过程中属于此刻的独特阶段。(逢文章写前言的习惯看来是改不掉了)

初衷:个人成长

  • 自我认知:2016.06 ~ 2017.06
  • 自我分析:2017.06
  • 自我规划:2017.06 ~ 2018.06 & 2017.06 ~ 20xx.xx

自我认知

尽量只描述客观事实,避免情绪化干扰

经历

写给 25 岁的自己:记录了我 25 岁这一年,对于我来说影响比较大的一些经历

  • 2016-03 ~ 2016-11
    • 单反弃坑 2016.06
    • 王者荣耀弃坑 2016.06
    • 沉迷天涯明月刀 2016.06 ~ 2016.11
    • 在后端客服系统中初次应用 Require.js 2016.06 ~ 2016.07
    • 追妹子(第三年)
      • 澳洲 7 日游 2016.03
      • 澳洲代购 2016.03 ~ 2016.11
      • 放弃 2016.11
      • 天涯明月刀弃坑 2016.11
  • 2016-07 ~ 2016-12
    • 周末一天学开车
  • 2016-09 ~ 2017-01
    • Vue 从入门到上线项目 2016.09 ~ 2017.01
      • 对比 React & Vue 2016.08
      • 学习 Vue.js 2016.09
        • 官方文档
        • hackernews
        • vuestrap、elementui
      • 开发 UI 基础组件库 2016.09 ~ 2016.10
        • 团队分工协作
      • 在多页传统网站中应用 Vue.js、Vuex 2016.11 ~ 2017.01
        • 后端渲染数据保存至 Vue 实例
        • 假的 table 组件
          • 2.0 版本已弃用的 Vue.partial
        • Vuex 的 XX 式应用
        • 写业务过程中,不断迭代基础 UI 组件库
        • 业务业务业务
    • 购置二手旧房 2016-10 ~ 2016-11
      • 物色合适房源
      • 学习如何避免买房遇到坑
      • 花完了家中全部积蓄
      • 公积金贷款 15 年 + 商业贷款 30 年
  • 2017-02 ~ 2017-03 转折点
    • 小程序从入门到上线项目 2017.02 ~ 2017.03
      • 学习小程序
        • 官方 API 文档
        • 微信小程序联盟
      • 开发公司的小程序
      • 参与到技术社区:微信小程序联盟论坛
        • 论坛发帖
        • QQ 群每日答疑
      • 小程序推广的想法
  • 2017-02 ~ 2017-05
    • 关键点
      • 2017 前端生存指南 by XX // 2017.02
        – 关键词:修炼、协作、产出
      • GitChat // 2017.04
        • 非常棒的技术分享交流模式
        • 技术成长上,感谢小爝大大的一篇文章
          • 让我时隔 3 年多,重新在 GitHub 开了新项目并投入了不少精力
        • 团队建设、个人综合成长方面,最想感谢姬光老司机的文章
          • 启发我完成了两篇文章《前端开发负责人修炼指北》、《前端开发实习生织梦计划》
      • 马克飞象
        • 非常适合我的写作工具,让我重新爱上写博客
    • 前端开发 leader 的自我修养
    • 沉迷翻译
    • 恢复写博客
    • 项目救火、填坑
      • 京东合作
      • 努比亚合作
      • 锤子合作
      • 芝麻信用合作
      • 后端收货系统

过失、困境、困惑

Learn from your mistakes , adversity and worries.

过失

困境

困惑

收获

喜好

厌恶

价值观

自我分析

写给 26 岁的自己

SWOT

Strengths

  • 收集信息
  • 写计划
  • 写总结
  • 学习能力
    • 前期活跃,中期疲软,后期发育尚可型
  • 基础能力
  • 知识掌握程度
    • 广度不错
    • 深度比较平均

Weaks

  • 依赖于明确的目标与计划
  • 价值观导向
    • 如果某件事情不符合我的价值观,会很困惑

Opptunity

Threats

成长

自我规划

前阵子,参加了书虫部落的一次线下读书交流会,关于《 On Managing Yourself 》的纯英文导读交流会。为了认真参加这次交流会,我比较认真地回答了一些很有价值的导读问题。而这些问题以及我的解答,之后我会详细整理一下再写一篇文章。

而正是这一次交流会,以及准备参与到这个交流会的过程,促使我明确了未来自己努力挖掘的特质

核心:改变

USED 落实方案

Use

Stop

Exploit

Defend

一年内规划

理想中的自己

What you wanna be ?

特质

很多没做的事情,其实可以串联到同一个目标上(安慰自己)

舍弃,减法生活

想对 17 岁时自己说的话

每一年都是 17 岁

版本规划

  • 过去
    • 高中
    • 大学
    • 职场
      • 前三年
      • 近半年
  • 现在
    • 学习
    • 工作
    • 健身
  • 未来
    • 特质
    • 价值观

前端开发知识点整理

Growth Front-End Knowledge Summary

前言: 本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS

初衷。写这篇文章主要有以下几个初衷:

  • 梳理知识体系。网上虽然有许多类似的内容,但每个人都有各自独特的思维方式,适合自己的才是最好的。
  • 探索不足之处。明确自己到底掌握了哪些,哪些本应掌握但还没有学习。
  • 完善公司的前端培训方向。前端技能培训的方向由懂前端、懂公司前端团队的人来设定最好不过了。
  • 希望借此激发大家的一点思考。我们都在路上,我不是成功的例子,我写下我的思考,希望借此激发大家的一点思考。
  • 一个梗。自 2012 年以来,我知乎上获赞最多的答案却是引用他人的答案……有点尴尬:《一名合格的前端工程师的知识结构是怎样的?》

目录

专业技能

前端理论

浏览器

  • 浏览器内核渲染原理
    • HTML 解析器
    • CSS 解析器
    • JavaScript 引擎
    • 渲染流程
      • 加载
      • 解析(确定结构、计算样式)
      • 构建 DOM 树、应用样式
      • 绘制
      • 回流
      • 重绘
  • 浏览器调试
    • 工具
      • F12
      • 扩展插件
      • 浏览器常用快捷键
    • 调试内容
      • 元素
        • 结构
        • 属性
      • 样式
      • 脚本
        • 日志
        • 断点
        • 事件
        • 变量监听
        • 调用堆栈
      • 性能
        • snapshot
        • 耗时
      • 网络请求
        • 模拟请求
        • 审查网络
        • 模拟网络环境
      • 内存
      • 本地存储信息
        • cookie
        • local storage
        • cache
    • 调试技巧
  • 浏览器事件
    • 常见事件
      • 鼠标事件
      • 表单元素事件
      • 键盘事件
      • 文档事件
      • CSS 事件
      • ……
    • 事件处理、添加、移除
  • 浏览器任务调度机制
    • micro queue
    • macro queue
  • 浏览器兼容性
    • 各平台浏览器的坑(家家有个难填的坑,有的坑深,有的坑浅)
      • 移动端浏览器
        • UC
        • Safari
        • 微信浏览器
        • 百度
        • ……
      • PC 端浏览器
        • Chrome
        • Firefox
        • IE
        • Edge
        • ……
      • 小程序
    • 不同浏览器内核差异
      • CSS 私有属性前缀(注:建议使用 postcss 自动化补全)
      • Polyfill
    • HTML、CSS、Javascript 特性支持度
      • MDN
      • Can I use ?
  • 常见问题
    • 请求跨域
    • iframe 跨域通信
    • 各种兼容性问题
    • 网页加载速度慢
    • 按钮点击没反应……

HTML

吃土小2叉:据说 HTML 和 CSS 一起学习体验最佳哦

  • 语法 & 语义
    • !DOCTYPE HTML 文档标准
    • head
      • meta 元数据标签
        • 网页描述
        • 设备描述
        • HTTP 请求描述
        • HTTP Client Hints
    • body
      • 装饰型标记(不推荐、部分已废弃)
      • 功能型标记
        • 无语义容器(div、span)
      • 用户交互(交互型标记)
        • 输入框
        • 选择器
        • 多选框
        • 单选框
        • 按钮
      • 数据可视化(展示型标记)
        • 定义列表
        • 无序列表
        • 表格
        • 结构化数据标记、微数据
        • 多媒体
          • 图片
          • 视频
          • 音频
        • SVG、Canvas
        • 文章(正文、摘要、段落、章节、前言、结语、引用)
  • 规范
    • HTML 代码规范
    • HTML 使用规范(标签嵌套规则)
      • 标签类型
  • 可访问性、无障碍体验
  • 常见问题
    • 图片空 src 导致页面加载两次
    • iframe 空 src 导致无限循环加载本页面

Alt text

上图据说是 HTML5 规范中关于 HTML 标签嵌套规则的示意图

CSS

吃土小2叉:用设计师的思维去理解 CSS,用程序员的思维去写 CSS

  • 语法(CSS 从入门到放弃)
    • 基本用法
    • 选择器
    • 媒体查询
    • 简写属性
    • 注释
    • 属性运算 calc()
  • 规范(编写可读性良好的 CSS)
    • 用例规范
      • 权限控制
      • 最佳实践
      • 不良习惯
    • 格式规范
      • 风格
      • 复用
      • BEM 规范
  • 逻辑特性(在 CSS / Less 中运用 OO 思想和设计模式)
    • 权重(优先级)
    • 作用域
    • 封装(mixins)
    • 组合(mixins+)
    • 扩展(:extend)
    • 继承(mixins)
    • CSS 变量、Less 变量
    • 模块化(import)
  • 视觉设计(单一状态设计)
    • 布局
      • 盒模型(高度、宽度、边框、外边距、内边距、溢出控制)
      • 定位方式
      • 层叠上下文(z-index)
      • display 类型(table、inline、inline-block、block、flex、grid)
      • 浮动
      • 伪元素::after、:before
    • 字体排印(厉害了 word 哥)
      • 字体(字体族、网络字体)
      • 文本(删除线、下划线、斜体、粗细、字号)
      • 段落(行高、缩进、断句方式、换行方式)
      • 对齐
      • 方向
    • 装饰(神说,要有光)
      • 颜色
      • 背景
      • 边框(border、outline)
      • 圆角
      • 阴影
      • 渐变
      • 透明度
      • 变形(旋转、缩放、矩阵变化)
  • 交互设计(多状态设计)
    • 动画(运动和静止是对立的统一)
      • 过渡效果
      • 动画关键帧
    • 反馈
      • active、checked 状态
    • 引导
      • 结合 Javascript
      • CSS 动画
    • 互动
      • hover 状态
  • 多设备设计
    • 响应式设计(多套代码,多种设备)
      • 媒体查询
    • 自适应设计(一套代码,多种设备)
      • 最小固定宽度布局
      • 百分比布局
      • 栅格布局、弹性布局
      • js + rem 方案(rpx)
  • 常见问题
    • 视觉还原度
    • 调试技巧
    • 属性“失效”问题
      • transition “失效”?
      • z-index “失效”?
    • 外边距合并
    • 边框 1px 问题
    • 垂直居中
    • 大屏幕 rem 小屏幕 px
    • 图片适配
    • 可维护性
      • 权重控制
      • 嵌套层级
      • 语义性
  • 扩展内容
    • 预处理器:Less、Sass
    • 后处理器:postcss
    • 小程序的 WXSS
    • Weex、RN 中的 CSS

JavaScript

吃土小2叉:至今还没看完一遍《JavaScript 高级程序设计》的我是该好好面壁思过了。

本段内容大量参考了:《The Modern JavaScript Tutorial》http://javascript.info/ ,推荐阅读。

  • JavaScript 标准
    • 严格模式
    • 兼容模式
  • 开发工具
    • IDE
    • 轻量编辑器
  • 基础语法
    • 数据类型
      • 基本数据类型 numberstringbooleannullundefinedobjectsymbol
      • 数据类型检测
      • 解构赋值
        • 数组
        • 对象
      • date 与时间
      • JSON
        • 格式说明
        • 序列化
        • 反序列化
      • 数组
        • 数组操作(增、删、改、遍历、复制)
        • 多维数组
    • 变量
      • 声明 varletconst
      • 声明提升
    • 作用域
    • 逻辑控制
      • 循环
      • 分支
      • 判断
    • 对象(基础部分)
      • 对象操作(增、删、改、查、复制)
      • Symbols
      • 类型转换
      • 垃圾回收机制
      • 对象方法中的 this
      • new
    • 函数
      • 函数默认值
      • 函数声明
      • 立即执行函数
      • 箭头函数
    • 运算符
      • 数值运算
      • 逻辑运算
    • 事件
      • 浏览器事件
      • 冒泡、捕获
      • 事件捕获
      • 浏览器默认行为
    • 文档
      • DOM 树
      • 节点
        • 节点类型
        • 节点标签
        • 节点内容
      • window 对象
    • DOM 操作
      • 元素节点(增、删、移、换、复制)
      • 元素属性(增、删、改、查)
      • 文本内容(增、删、改、查)
    • 网络请求
      • ajax(回调函数)
      • Promise
      • async、await
  • 深入细节
    • 对象、类、继承
      • 属性标记与属性描述
      • 原型、原型链
      • 继承
      • 属性定义
      • 对象混合
      • 类型检测
    • 数据类型
      • 基本类型
    • 函数进阶
      • 递归、调用堆栈
      • 闭包
      • 函数绑定、上下文
      • 剩余参数、扩展语法
      • 函数对象
      • 任务调度:定时器
      • 柯里化
      • 深入箭头函数
      • 函数式
    • 面向对象
    • 错误处理
      • 错误捕获
  • 代码质量
    • 注释
    • 相关工具
      • ESLint、JSLint
      • Standard.js
      • Prettify
      • 自动化测试工具:Jest、Mocha
    • 用例规范
      • 最佳实践
      • 不良习惯
    • 格式规范
      • 风格
  • 正则表达式
    • 普通字符、转义字符
    • 元字符
    • 字符类
    • 分支条件
    • 分组
    • 反义
    • 贪婪与懒惰
    • 后向引用
    • ……

编程通用

软件工程的核心就是管理复杂度 —— 《代码大全 2》

推荐阅读:来自法海@淘宝前端团队《从达标到卓越 —— API 设计之道》

  • 达标(语法、词法)
    • 正确拼写
    • 准确用词
    • 注意单复数
    • 不要搞错词性
    • 处理缩写
    • 用对时态和语态
  • 熟练(语义、可用性)
    • 单一职责
    • 避免副作用
    • 代码一致性
    • 合理设计函数参数
    • 合理运用函数重载
    • 使返回值可预期
    • 固话术语表
    • 遵循一致的代码风格
  • 卓越(系统性、大局观)
    • 版本控制
    • 确保向下兼容
    • 设计扩展机制(易于扩展)
    • 控制 API 的抽象级别
    • 设计模式
    • 注释
    • DRY
    • 编码规范
    • 解耦
    • 复杂度控制

SEO & 数据统计 & 数据分析

吃土小2叉:尽人事,听天命(天者,用户也)

  • SEO
    • 影响因素
      • 相关性
        • title
        • 关键词密度
      • 权威性
        • 外链
        • 内链
        • 域名年限
        • 网站收录
        • 安全性
      • 用户体验
        • 广告
        • 加载速度
        • 内容质量:内容真实性、内容原创性、内容有益性
    • 不良行为
      • 堆叠关键词
      • 抄袭、作弊
      • 大量低价值外链
      • 广告、木马、病毒 -数据统计
    • 工具
      • 统计、埋点工具:Google Analytics、百度统计、Piwik……
      • 站长工具:Google Webmaster 、百度站长工具
      • 其他工具:百度指数、SEO 各项指标助手工具……
  • 数据分析
    • 工具
      • 同数据统计工具
      • 脑子是个好东西
    • 分析方法
      • 归因、排查
      • 细分
        • 来源、渠道
        • 用户属性
          • 人口统计学
        • 用户行为
          • 站内搜索关键词
          • 自定义事件(埋点事件)
          • 浏览频率、时间、跳出页
          • 访问内容
          • 访问漏斗
        • 站点属性
      • 对比
        • 时间维度
        • 统计指标维度
    • 目标设置
      • 转化路径
      • 转化目标
      • 转化价值

网络基础

此处是不是又要出现,经典问题:当你在浏览器输入 URL 并回车(非单页应用的传统网站),直到你看见这个页面,此时经历了哪些过程(略去浏览器渲染环节)。

  • TCP / IP
    • HTTP
      • 请求
        • 请求头
        • 请求正文
      • 响应
        • HTTP 状态码(2xx、3xx、4xx、5xx)
        • 响应头
        • 响应正文
      • 过程:三次握手
    • HTTP2
    • HTTPS
    • Web Socket
    • CORS
    • Session、Cookie
    • RESTful / RPC
  • DNS 、域名、IP
    • 域名劫持
    • 内网、公网地址段
  • 缓存
    • 服务端缓存
    • 客户端缓存
  • 常用工具
    • F12 Network Panel
    • Advanced REST client
    • EditThisCookie
    • Wireshark
    • Fiddler、Charles
  • 常见问题
    • HTTP 迁移到 HTTPS 站点部署问题
      • HTTPS 证书部署
        • TLS 版本问题
        • 证书作用域(是否包含子域名)
        • 证书、秘钥配置文件
      • 资源加载同协议
        • error 级
          • 外部 JavaScript 加载
          • iframe
        • warning 级
          • img
          • CSS
      • 网络请求同协议
        • error
          • ajax
          • jsonp

交叉领域理论

吃土小2叉:学习交叉领域知识的一个很朴实的目的 —— 掌握如何甩锅

产品设计相关

吃土小2叉:学会优雅地质疑设计 => 给用户更好的体验

  • 与设计师的沟通、协作
  • 设计理念 => 用户体验
    • 一致性
    • 可用性
    • 易用性
    • 反馈
  • 提升审美
    • 单反穷三代 // 单身狗 XX:也许学好摄影就能追到女神了呢?
    • 竞品分析 // 知己知彼,重视对手
  • 常用工具

后端基础

吃土小2叉:只要把这篇文章《系统设计入门》上面你不认识的术语弄懂就可以了 (迷之微笑)

XX 的观点:时刻谨记编程语言只是一种工具,分别有不同适用的场景罢了。理性、客观、结合实际。

  • 与后端开发工程师的沟通、协作
    • 明确分工
    • 文档先行
    • mock 数据
  • 简单了解一门后端语言 // XX 注:如果你已经自己搭建了个人博客站点,后端语言的语法层面足够了。
  • 了解前端路由与后端路由的区别
  • 简单应用数据库(MySQL)
    • 增、删、改、查
    • 备份、导出
  • 了解作用与概念
    • GraphQL
    • Nginx
    • Redis
    • 负载均衡
    • CDN
    • 数据库主从备份
  • 计算机相关基础知识 // 有时间多重温(预习)重温(预习)
    • 数据库
    • 操作系统
    • 编译原理
    • 离散数学
    • 数字逻辑

前端实践

实践是检验真理的唯一标准,在此引用 Vue.js 作者尤雨溪的一段话:

技术方案都是先有问题再有思路同时伴随着取舍。在选择衡量技术的时候,尽量去思考这个技术背后是在解决什么问题,它做了怎样的取舍。这样一方面可以帮助我们更好的理解和使用这些技术,也为以后哪天你遇到业务中的特殊情况,需要自己做方案的时候打好基础。

解决实际问题

Learn from you mistakes.

吃土小2叉:写下这篇文章的时候恰逢今年高考,很感谢高一的英语老师当时给我们布置的一个作业:整理考试错题集。因为经历过太多次,同样类型的题目这次错,下次仍然错。而我又是一个比较较真的人,每次整理错题的时候,不单单只记录做错的问题和答案,还会去分析这里的考点,所涉及的知识点,去试着换位思考如果我是出题人,会怎么出这道题,考哪些知识点可以坑一下考生。而这一过程,又有着考试做错题的心理愧疚感,记忆会特别深刻。另一方面,在复习阶段,也可以更具有针对性地复习,为自己减压。要尽量把大脑当成 CPU 来用,或者倒排索引,而非硬盘、数据库。

Learn from your practice.

而在编程过程中,也是比较接近。我们可以记录下自己犯过的错误,不良的编码案例。同时,我们也可以像经常收集一些名人名言、固定搭配等写作套路一样,去整理、收集自己在开发过程中的最佳实践。当然若是有时间再去思考、反思、优化,那就更好了。

Learn from your worry & adversity.

另外,抱着积极的态度强大的内心去面对开发过程中的任何困惑、困境,都是助力快速成长的好机会。

前阵子我在 GitHub 上也开了一个项目,专门记录、收集我最近在前端开发过程中遇到的一些问题,有已经解决的,也有仍待解决的。

https://github.com/xunge0613/front-end-practice-collections

目前整理的已解决问题有:

仍待解决的问题:

  • 如何优雅地监听元素高度变化?
  • 移动端 banner 轮播图自适应的各种坑

当然我也简单写了一些方法论,包括:

后续我也会不断完善这一块内容。重点是:形成一套属于自己的最佳实践经验库。

学习型项目

这一部分内容更推荐大家关注 Phodal 大神的 Growth 系列

https://github.com/phodal/growth

而我给准备入门前端的新手的建议是:

拥有一个完全属于自己的博客、域名、网站、服务器,并每周固定更新博客文章、每年为博客更新一次主题。

前端工程

勿忘自己的 title:前端工程师

以下引用张云龙 dalao 的文章:前端工程 —— 基础篇

第一阶段:库/框架选型 第二阶段:简单构建优化 第三阶段:JS/CSS模块化开发 第四阶段:组件化开发与资源管理

由于先天缺陷,前端相比其他软件开发,在基础架构上更加迫切的需要组件化开发和资源管理,而解决资源管理的方法其实一点也不复杂:

一个通用的资源表生成工具 + 基于表的资源加载框架

第一阶段:框架应用

吃土小2叉:只要是一个文档友好的框架,遇到不会的问题,去翻翻文档,如果解决不了,再去认真翻一次。因此,第一阶段,亦可认为是:面向文档编程

此处建议再回忆一下刚才提及的尤大的话。

以下是我个人的框架/库应用路线:

jQuery => jQuery + artTemplate => Vue.js + lodash => Vue.js 全家桶

  • jQuery // 此处参考张鑫旭的 jQuery 1.4 中文文档
    • 核心
      • 对象访问
      • 数据缓存
      • 队列控制
      • 插件机制
      • 多库共存
    • 事件
      • 页面载入
      • 事件处理
      • 事件委托
      • 事件切换
      • 常用事件
        • 鼠标事件(click、dbclick、hover、mouse*……)
        • 键盘事件(key*……)
        • 表单事件(blur、change、focus、submit、select)
        • 浏览器事件(error、resize、scroll)
        • 触摸事件(touch*……)
    • 选择器
      • 基本
      • 组合
      • 伪类
      • 内容
      • 可见性
      • 属性
      • 表单
    • 筛选器
      • 过滤
      • 查找
      • 串联
    • CSS
      • CSS
      • 位置
      • 尺寸
    • DOM 操作
      • 元素节点(增、删、移、换、复制)
      • 元素属性(增、删、改、查)
      • 文本内容(增、删、改、查)
    • 网络请求
      • Ajax
      • when
      • deferred
    • 特效
      • 基本(显示、隐藏)
      • 滑动
      • 淡入淡出
      • 自定义动画控制
    • 辅助工具(类似于 lodash)
      • 数组、对象操作
      • 函数操作
      • 字符串操作
      • 浏览器及特性检测
      • 类型检测
      • JSON 序列化
  • artTemplate
    • 模板引擎
  • Vue.js
    • MVVM 思想
    • 声明式渲染
    • 条件与循环
    • 处理用户输入
    • 数据绑定、响应式数据
    • 组件化应用构建
      • 组件间通信
  • lodash.js // 提供各种 helper 方法,专注于数据处理
    • 数据类型
      • 数组
      • 集合
      • 日期
      • 函数
      • 数值
      • 对象
      • 字符串
    • 语言特性
      • 类型检测
      • 类型比较
      • 复制
    • 数学运算
    • 辅助工具

XX:

  • 学你会用 artTemplate 以后,会发现 Vue.js 很容易上手
  • 当你学会 Vue.js 以后,你会发现小程序真的很容易上手

第二阶段:简单自动构建优化

专注业务开发

  • 工具
    • Grunt
    • Gulp
  • 预处理
    • Less
    • Babel
    • TypeScript
  • 后处理
    • PostCSS
  • 校验
    • ESLint
  • 压缩
    • 代码
    • 图片
  • 合并
  • 打包
  • 自动化测试
  • mock 接口调试

第三阶段:JS/CSS模块化开发

张云龙:分治、分治、分治

  • AMD
  • CommonJS
  • UMD
  • ES6 Module
  • ……

第四阶段:组件化开发与资源管理

核心目的:提高开发效率 & 兼顾运行性能

  • 分治、解耦、自由组合、就近维护
  • Vue.js 组件化开发
    • 抽象业务逻辑组件
      • 组合基础 UI 组件形成业务组件
      • 独立编写业务相关组件
      • ……
    • 定制基础 UI 组件库
      • 轮播图组件
      • 弹窗组件
      • ……
  • 资源管理

项目技术选型

理性、客观、避免偏见

  • 预计投入
    • 开发资源
      • 时间
      • 人手
      • 技术储备
    • 项目资源
      • 沟通成本
      • 设计文档、功能文档、产品原型
      • 后端接口文档
      • 项目排期
    • 产品资源
      • 用户群体
        • 浏览器兼容性
        • SEO 问题
  • 期望回报
    • 开发人员自我成长
    • 公司技术栈
    • 开发效率
    • 可维护性
    • 性能、稳定性
    • 易于测试
    • 易于把控项目周期
  • 应急预案
    • 兼容方案
    • 回退方案
    • A / B Test
    • 渐进增强
    • Plan B

造轮子

要么站在巨人的肩膀上,要么自己成为巨人

未完待续……

  • UI 组件库
  • 前端工具
  • 前端微服务
  • 前端框架
    • (以下内容是 XX 的 YY 内容)
    • 学习优秀框架源码
    • 仿写核心内容
    • 掌握山寨一个框架的套路
    • 发现问题
    • 具备扎实的前端基础 + 运气 + 灵感
    • 解决问题

版本规划

本文会在 GitHub 上持续维护,欢迎大家提 issue ~

地址是:https://github.com/xunge0613/front-end-growth/blob/master/tech-growth/growth-front-end-summary.md

v x.x.x

  • 更新 造轮子
  • 考虑翻译成英文?
  • 加入重要性评分功能
    • 引导目前阶段应该掌握哪些
    • 分为:初级、中级、高级

v 0.0.3 内容迭代

  • 更新 编程通用
    • 条目更新
  • 更新 JavaScript
  • 更新 前端实践
    • 新增引导语
  • 更新支付宝图标、微信图标……

===== 当前版本分割线 =====


v 0.0.2 内容迭代

  • 新增 后端基础
  • 新增 前端工程 第一阶段 jQuery、Vue.js 介绍
  • 新增 常见问题
  • 更新 前言
  • 更新 网络基础
  • 更新 学习型项目

致谢

  1. 前端工程 —— 基础篇 by 张云龙
  2. 从达标到卓越 —— API 设计之道 by 法海@淘宝前端团队
  3. The Modern JavaScript Tutorial by Ilya Kantor
  4. jQuery 1.4 中文文档 by 张鑫旭
  5. MDN Web 开发 // 这里有个小彩蛋,这个页面右上角有某 XX

联系方式

欢迎联系我讨论本文的不足、问题或者意见。

可以在我的 GitHub 主页上找到我的联系方式

亦可关注我的微信公众号:清风迅来

清风迅来

结语

作为一个老菜鸟,我只是知识的搬运工

本文大多讨论的是有哪些知识点(what),至于如何学习与应用这些知识点(how & why),敬请期待我之后的一系列文章,目前已完成一些雏形,仅供试阅:

感谢您一路看到这里,欢迎点击阅读原文在我的博客上进行留言一同探讨。(小透明表示公众号至今未开通留言功能……)

若有帮助,尽情打赏!^_^

ps: 好像图片有点大=。=

如果有帮助,欢迎打赏~如果有帮助,欢迎打赏~

许可

MIT

TECH × 大学路 第二期小结(和尤大合影了!)

内心非常excited


上线了组织的一场小型技术交流会,地点就在大学路,真的离公司好近好近好近。(听完讲座还可以回公司加个班,完美)
全英文的演讲非常有趣(非常庆幸自己最近沉迷翻译技术文)
特地早到坐在最前排,近距离和尤大接触还合照了~ 迷弟心愿达成√

下面说说技术小结,毕竟全英文演讲,很可能我理解错了哈哈哈哈,如有错误望指正~
这次有三个演讲,第一个演讲是一个德国小哥,聊了聊V8引擎的工作原理,包括JS API 调用后经历哪些过程(例如:console.log()),pre-parse 和 full-parse 的区别,以及如何利用立即执行函数提升性能(避免 pre-parse?)?

另外花了较多篇幅讲了内存分配,并提到几个优化内存分配的方法或者说一些避免额外内存开销的原则:

比如:同一类型对象,应该保持相同的属性,避免不同属性:

//  good
a.prop1;
b.prop1;

// bad: extra memory allocation for that
a.prop1;
b.prop1, b.prop2;

另外还介绍了几种不同数据结构的内存使用量,包括对象,数组,也提到了在数组中,尽量保持数组元素类型一致,可以优化内存分配。

原始例子:[1,2,3],3个基本类型,假设占据3单位内存

反面例子:[1,2,”abc”],在内存中,此处1,2会被隐式转为 { num : 1 },{ num : 2 },不再是基本类型而是复杂类型?而 “abc” 此时同样也是引用类型。这样会大大增加内存的开销。

so,简而言之就是涨姿势了。

 

第二位演讲者是strikingly的创始人郭达峰,主要议题是介绍了几次 react conf 的心得体会。

2015 React Conf

  • flux,flux,flux,flux,flux; // 大会重点讨论 flux
  • Redux;  // 有人提出了 redux
    • hotreload
    • time travel
    • functional
  • css in js;
  • GraphQL;
  • React as the UI virtual machines.

2016 React Conf

  • redux,redux,redux,redux,redux; // 今年轮到 redux 成了焦点
  • react native; // 有人提出 RN
  • more GraphQL // 更多的人讨论 GraphQL

2017 React Conf

  • performance:
    • react fiber
      •  reconciliation
      • Priority Scheduling 优先级调度
    • react 16
    • SSR
    • streaming,rakt(leaf,preserve)
  • pollishing tools:
    • create-react-app
    • Jest // 2年前一般般的测试工具,现在咸鱼翻身了:)
      • fast,
      • snapshot testing,
      • nice interactive CLI
  • js fatigue
  • mature community
  • AOT (gatsby, svelte,prepack)
    • less runtime cost,
    • less framework,
    • more build time cost

以及提到未来的js可能的方向:

in other languages

  • Reason:OCaml
  • Closure script:Closure
  • Web Assembly

XX注:关于 React Fiber ,突然觉得很像是平时开发团队的项目管理模式。每周五分配任务A、任务B、任务C,按优先级一个个完成。假如周一还在做任务A的时候,突然来了一个临时的老板级紧急需求任务D,那么就先把任务D安排到任务A前面……

最后是尤大…前端界的颜值担当
首先介绍了Vue 受哪些启发

  • Braid
  • web components
  • Ractive

然后是vue单文件组件实现原理,

先讲了 template,script,style 分别是如何解析,然后介绍了这三者是如何合在一起构成一个组件的。

另外提到了 hot reload 的注意事项,script 层面由于 state 的问题,需要整个component 全部 reload,避免副作用?

最后还提及一个等式:

Standard source format + extension compilation pipeline = evolution with less churn…

后面就是问答环节,印象比较深的一个按业务级切分文件,某个业务涉及到的文件(style,js,template,lib)组织在一起

尤大也提到希望有一个比 Vuex 或者 Redux 更轻量的状态管理工具?

另外尤大又提到了,技术方案,必须要结合实际问题,结合真实场景。

引用一下前几天尤大的知乎 live 的总结:

总结一下吧,我们聊了很多东西,可能比较杂,但我希望大家发现其中一些共性的东西:技术方案都是先有问题,再有思路,同时伴随着取舍。在选择衡量技术的时候,尽量去思考这个技术背后是在解决什么问题,它做了怎样的取舍。这样一方面可以帮助我们更好的理解和使用这些技术,也为以后哪天你遇到业务中的特殊情况,需要自己做方案的时候打好基础。

以上,可能有一些内容理解有误~ 望大家指正哈~ 多谢~ ……

最后再次感谢strikingly这么棒的一次分享活动,干货满满。

其实我还是蛮期待平时可以多交流交流, 大神就在离公司那么近的地方~~~

吃土小2叉

2017年6月3日21:31:26

前端开发实习生培养体系的探索:前端开发实习生织梦计划

前端开发实习生培养体系的探索:前端开发实习生织梦计划 v 0.1.0

谨以此名称『织梦』致敬 15 年前在初中第一次接触“前端”时用的编辑器: Dreamweaver

前言:

由于意识到目前的前端团队趋于稳定,可以适当加入一些实习生为团队注入活力。于是这段时间主动积累了一些相关经验,决定就前端技术团队的实习生培养这一主题,进行概念梳理以及雏形规划,顺便文末整理了一些优质学习资料和学习社群。另外,受限于 XX 的前端水平只有中级左右,文中对知识体系的整理可能不够深入和全面,也欢迎大家提提建议!

XX 的价值观 —— 80%+ 完美主义:当意识到重要性的时候,就应该充分利用已有资源,做到当前迭代的最好状态,或者至少是最好状态的 80%

强烈推荐: 姬光大佬的 gitchat《怎样实习才能成长最快》,非常感谢姬光大佬的这篇文章

注意:

此版本未经过任何实践!有待验证,仅供参考。

此版本未经过任何实践!有待验证,仅供参考。

此版本未经过任何实践!有待验证,仅供参考。

设定

定位(角色)、要求(输入)、愿景(输出)

以某 MMORPG 游戏为参考系,结合实习生系统(实习荣耀??),分别描述主要角色的定位、要求(输入)、愿景(输出)

尝试站在不同角色,不同角度思考各种问题,并简要概括

公司

定位:游戏世界

要求:

  • 实习薪资、下午茶(补给、金币、回血、回蓝)
  • 提供办公设备(游戏装备)
  • 公司氛围(buff、赠送 VIP 会员)
  • 公司文化(mutation @elona)
  • 公司理念、愿景(我司:减法新生活~)

愿景:

  • 实习生 => 公司
    • 树立、传播公司良好形象
    • 公司文化的传承
  • 公司 => 实习生
    • 公司文化的影响
    • 物质

业务

定位:游戏任务

要求:

  • 安排合适的业务任务(游戏主线任务)
  • 鼓励发现、提出业务问题(游戏支线任务)

愿景:

  • 实习生 => 业务
    • 提出业务的改进意见
    • 不强求解决业务问题,但如果能,再好不过。
  • 业务 => 实习生
    • 了解公司业务

团队

定位:NPCs、可爱的小姐姐们、帅气的大叔们(雾

要求:

  • 交流(提供任务线索)
  • 知识点、概念指点(buff、治疗)
  • 学习方向引导(buff、T)

愿景:

  • 实习生 => 团队
    • 沉淀团队技术、整理文档(经验包)
    • 储备新鲜血液、给团队注入活力(欢迎新 dalao……)
    • 打造技术学习小社区(战队、公会)
  • 团队 => 实习生
    • 熟悉团队开发模式(通用技能)
    • 团队技术知识库 wiki(各类技能书、经验包)

导师

定位:新手村村民(头上带问号的?王者农药主界面右下角的妲己?)

要求:

  • 理性维度
    • 技术指导、方法指导(讲清楚的程度、通通透透)
    • 善于观察(了解实习生的长处与短板)
    • 客观评估:对事不对人
    • 代价:额外占用时间(蛤?-1s)
  • 感性维度
    • 真诚待人
    • 认真负责
    • 谦虚谨慎
    • 乐于助人
    • 充分沟通
    • 忍耐能力

愿景:

  • 实习生 => 导师:
    • 成就感
    • 教学相长:基础知识梳理、深入理解、剖析、总结(经验包)
    • 沟通能力(带团能力)
    • 团队贡献积分(DKP)
  • 导师 => 实习生
    • 个人成长
      • 知识、技能(经验、技能)
      • 学习方向、职业规划(职业进阶路线)
    • 人脉(游戏好友)
    • 激励(buff)
    • 评估(战斗力估算?游戏解说???)

实习生

XX 注:人无完人,对于小公司而言,千里马难觅。要善于挖掘实习生的亮点,借助团队这个小社区引导实习生各方面成长。

定位:勇者

要求:

  • 理性维度 (能力 ability)
    • 学习能力
      • 知识记录、梳理、总结、抽象
      • 学习方法
      • 学习态度
    • 解决问题能力
      • 提问技巧
      • 思考、针对性练习、反思
    • 自我管理 & 效率
      • 碎片时间
      • 专注
      • 能量管理
    • 业务能力
      • 负责、谨慎、细心
  • 感性维度(特质 traits)
    • 心态、自信、耐心、不浮躁
    • 认真、积极、主动
    • 沟通能力
    • 友善、虚心、正直

愿景:

  • 实习生 A => 实习生 B
    • 竞争(排行榜)
    • 协作(队友、基友)
  • 实习生 A <=> 实习生 A
    • 个人成长(经验、技能、职业进阶选择)
    • 个人经历(成就、称号)

监督人

定位:新手村村长(隐藏 BOSS?大龙???)

要求:

  • 理性维度
    • 中立、客观
    • 观察力
  • 感性维度
    • 包容但不偏袒

愿景

  • ???

方案

总共招 1~2 个实习生

人员安排

1 监督人: XX 1 导师:老员工(2 年+经验) 1~2 实习生

实习生任务列表

师傅领进门,修行靠个人

注:实际安排的任务因人而异,可选择性增加或加强……:)

任务标准:SMART 任务 + 主动汇报

  • 主动汇报
    • 每日日报:产出(工作内容)、收获(知识)
      • 主动、认真
      • 审视、自省、回顾
      • 规范
    • 每周周报
      • 一周总结
  • SMART 任务
    • 【SMART】
  • 隐藏任务
    • GitHub
      • 鼓励分享、鼓励创新

任务内容

  • 个人成长线(高经验值主线)
    • 综合
      • 【SMART】博客文章(每周一篇)
      • 优秀源码学习
        • Bootstrap
        • jQuery
        • Element UI
        • Vue.js、lodash
    • 实践
      • 学习型项目
        • 【SMART】phodal growth 系列
        • 【SMART】导师自定义任务
    • 理论
      • 通用技能
        • 《暗时间》
        • 《On Managing Yourself 自我发现与重塑》
        • ……
      • 专业技能
        • 相关工具
        • 推荐书单
        • 编程基础
          • 软件构建
            • 《代码大全 2》
          • 算法
            • 【SMART】leetcode 刷题
          • 设计模式
            • 《Head First 设计模式》
          • 编码规范
            • 迭代 wiki 的“编码规范”
        • 前端理论
          • HTML、CSS、Javascript
            • 《CSS 揭秘》、《Javascript 高级程序设计》
            • 【SMART】freecodecamp、codewar 练习题
            • MDN 文档
          • Vue.js
            • Vue.js 官方文档
          • 前端工程、组件化、前端服务化
      • 前端应用
        • 团队相关
        • 业务相关项目
          • 根据实习生实际情况,安排合适的任务量、任务复杂度
  • 团队贡献线(高 DKP 支线)
    • 综合
      • 协作
        • 与前端
        • 与后端
        • 与测试
        • 与设计师
        • 与产品
    • 理论
      • 更新团队知识库 wiki
        • 维护团队插件、组件说明文档
        • 经验分享、bug 记录……
      • 撰写团队技术博客文章
      • 参与每周前端组周会
    • 实践
      • 学习型项目(团队 wiki 站点、团队技术博客站点维护迭代等)
  • 业务线(高 DKP 支线)
    • 综合
      • 发现、提出业务问题,尝试解决
    • 实践
      • 【SMART】解决导师布置的业务需求
    • 理论
      • 梳理业务流程图
      • 梳理网站功能

导师任务列表

  • 传道
    • 前端的 what、why、how
    • 开阔技术视野
    • 解决问题的套路
    • 愿景(vision)
  • 授业
    • 介绍团队
    • 工作流程
    • 学习方法
    • 文档说明
    • 安排工作
  • 解惑
    • 告知所以然
    • (若导师无法解答,很正常,毕竟闻道有先后、术业有专攻。重点在于)
  • 评估
    • 认真审查实习生的 ① 日报 ② 周报 ③ 文档、代码、文章并积极、客观反馈
    • 定期与实习生交流
      • 主动挖掘实习生存在的问题,予以引导
      • 主动挖掘实习生的长处,并加以培养
  • 激励
    • 适当的团队活动
    • 正面引导
    • 不要吝啬表扬
  • 负责
    • 对实习生的代码负责
      • Code Review
      • 追踪代码质量、产品上线后的质量
      • 跟踪项目进度,把控风险
    • 对实习生负责
      • 真诚
      • 正面引导
    • 对自己负责
      • 不断提升自己的姿势水平
      • 共同成长

举例

背景

1 个本科大三暑期实习生,2 个月的工作时长,每周来 4 天。

已知

  • 实习生
    • 协作 专业能力 无工作经历
    • 专业能力 能使用 jQuery 较为熟练地写带有简单交互的静态页面
    • 专业能力 只照官网写过 Vue.js demo,没有写过具体项目
    • 协作 代码不规范
    • 专业能力 会一些 PHP
    • 通用能力 性格偏外向、求知欲强、不够细心、略微有点浮躁
  • 任务痛点
    • 团队 团队编码规范不完善、未统一
    • 团队 团队的知识库不完善
      • 缺少组件库说明文档(Vue.js 组件库,总共约 20 个 UI 组件)
      • 缺少公共方法说明文档
    • 团队 项目代码注释不完善
    • 业务 偶尔有紧急的市场活动小需求插入
    • 公司 培养储备人才

方案

注:方案中,专业能力 表示此任务对于 专业能力 有要求或能带来提高,即任务目的(why)

第一个月

  • 整理团队组件库使用说明文档(每周至少完成 1+ 个组件说明文档;最坏情况在指导下可能需要 24 天,熟悉后预计工时 0.52 天)
    • 专业能力 阅读组件源码
    • => 通用能力 学习能力 技术视野 导师指导(最坏情况在指导下可能需要 12 天,熟悉后预计工时 00.5 天)
    • 代码规范 专业能力找出源码中难以阅读、理解的代码块
    • 文档沉淀 代码规范 编写说明文档
    • => 通用能力 学习能力 技术视野 导师审查文档 => 反馈
  • 应对紧急的市场活动页面(预计工时 1 天)
    • 业务需求 编写静态页面
    • => 通用能力 学习能力 技术视野 导师审查代码 => 反馈
  • 【待定】团队知识库站点搭建(预计总工期 2 个月,每周安排 1~2 个工作日开发)
    • 团队 专业能力 代码编写
  • 阅读推荐资料
    • 专业能力 Vue.js 官方文档阅读、《某书》
    • => 通用能力 学习能力 导师指导答疑
  • 每天日报 (预计工时 0.5~1 小时,合计 0.5 天)
    • 通用能力 专业能力 知识收获
    • 通用能力 专业能力 工作内容
  • 每周周报(预计工时 1~2 小时,合计 0.25 天)
    • 通用能力``专业能力 知识收获
    • 通用能力 专业能力 工作内容

未完待续……

推荐资料

以下仅收集 XX 读过的资料或者经常参与讨论的社群。也欢迎大家推荐~

书单

通用能力

《暗时间》、《On Managing Yourself 自我发现与重塑》

专业能力

《代码大全 2》 《CSS 揭秘》 《Javascript 高级程序设计》 《Head First 设计模式》

博客

学习社群

引用庄表伟大佬的一段话……

求知欲不能教授 但可传染 学习能力无从教 却能修炼

  • 群(吹水少、禁广告)
    • 豪情大佬 QQ 群
    • 前端之巅微信群
  • 组织
  • gitchat 、知乎 live 活跃大神
    • 专业技能
      • 姬光、hax、小爝、justjavac、phodal……
    • 通用技能
      • Lachel、Warfalcon……
  • 小密圈
    • T 型学院
    • 前端早读课
    • 小胡子哥
  • 微信公众号
    • 前端早读课(起床第一件事……看前端早读课……肯定有更新……)
    • 前端大全
    • ……
  • github 学习项目

参考资料

  • 强烈推荐:姬光大佬 gitchat《怎样实习才能成长最快》
  • 姬光大佬 gitchat《老司机导师陪你聊聊带新人的那些“套路”》
  • ZoomQuite 大佬 gitchat 《初学者如何通过技术社区加速成长?》
  • 刘未鹏 《暗时间》

版本规划

本文和上次写的《前端开发负责人修炼指北》一样,会在 GitHub 上持续维护,欢迎大家提 issue ~

本文地址是:https://github.com/xunge0613/front-end-growth/blob/master/team-growth/weave-dreams-for-interns.md

v 0.1.1

  • 完善举例
  • 导师任务优化
    • 加入【SMART】 类型任务
  • 完善监督人模块内容
    • 增加监督人任务
    • 完善监督人描述
  • 推荐资料更新
  • 考虑是否要在后续版本更新“公司”、“业务”相关内容

结语

v 0.1.0 版本主要是理论的规划,由于自己 80%+ 的完美主义特质,希望能借此规划团队的实习生体系,并不断优化,对团队的实习生负责,对团队负责。也希望这篇文章能给大家带来一些思考。接下来会在实践的过程中思考、反思,不断迭代该计划。

最后,以《云图》全书最后一段结尾:

“要和人性的九头蛇进行斗争的人必须以经受巨大的痛苦为代价,而且他的家人必须跟他一起为此付出代价!不见棺材不落泪,你要明白,你生命的价值不过像是无边无垠的海洋里的一滴水!”

“但是如果没有众多的水滴,哪会有海洋呢?” *“What is any ocean but a multitude of drops?” *

鸣谢

感谢姬光大佬的两篇文章…… 强烈建议大家读一读……

感谢提出宝贵意见的大伙伴们~

感谢大家抽出时间来围观我这篇文章……

感谢马克飞象这款性价比超高的记录工具~

最后,感谢自己~

如果有帮助,欢迎打赏~

提高阅读效率的技巧:提问式导读、引导式目录、引导者作者

纯英文读书会|《On Managing Yourself》,5.29

首先感谢哈比同学推荐的这个活动,这篇文章里有一大段关于《On Managing Yourself 自我发现与重塑》的导读,在回答了一半导读问题,之后在洗澡的过程中,突然来了灵感,以下是脑洞时间,见笑了。

就技术类、科普类书籍来说,如果内容质量高,为了方便读者理解,那么该书作者最好是一个好的“引导者”,并且有一个好的引导式目录,或者有一篇好的提问式导读。

关于好的目录,私以为一级目录至少需要蕴含 how 和 why,或者具有一定抽象,而不单单只有 what。借助于 how 和 why ,那么能帮助读者更快理解相关知识的作用、目的及原理。举个例子:《代码大全 2》的第一部分、第二部分目录的标题是:打好基础、创建高质量的代码。这样读者可以更有选择性地并且带着目的性地去了解相关内容。

【划重点】关于好的导读,而我更欣赏“提问式导读”,就像是小时候做英语考卷的阅读理解题,先快速记下全部问题的关键点,若能当场解决就直接做掉,若不能,就带着问题(目的)去阅读文章,这样可以大大提高阅读的速度。就如同这篇文章中,有十分详尽的导读问题。虽然还没看这本书,但凭感觉认为回答了这些问题后,就好像是换位思考,将自己置于作者的角度,去进行思考,同时也深刻了解了书籍的范畴、关键点、核心内容。这样再去阅读这本书可以大大提升自己的阅读效率并且加深理解和记忆。

而为了做出如此详尽的“提问式导读”,那么必然也需要对原文进行深入的理解,或者说自身具有较高的抽象能力,对于一本高质量的书,写下这些问题的过程也是十分有价值的。

以上,一些脑洞。非常兴奋,感觉发现了如何阅读一本好书的新技巧。(前提是有高质量的“提问式导读”)

 

from 吃土小2叉

2017-05-29

 

 

前端知识问答整理

本文主要整理一些我回答别人的前端问题……

如何写博客文章

答:可以学习下这篇文章:http://blog.jobbole.com/91942/ 。“写”的套路。
最开始初学前端时候写的:http://xuxun.me/blog/2012/03/word-press-problems-met-solved/ 。这是我写的第一篇技术文…………现在看特别low
其实很简单,就是记录一下自己学到了什么知识点。第一步做到这个就可以了。
然后写博客的好处就是,如果有别人看到你的博客,如果他们同样感兴趣,并且看到你文章中的不足,会帮你指正出来。这一个交流的过程就是一个很棒的学习过程。
第一步如果说是你学到的 what,那么接下来就尝试写写 how,甚至 why。知其然,知其所以然。在这个过程中你会发现你为了记录一个问题,会学习到更多相关的知识。这样你会发现你进步速度会有质变。

JavaScript 新手问题

A:知道思路就是不知道用代码怎么写。
B:举个例子?
A:就是简单的都不会:(

答:https://freecodecamp.cn/challenges/learn-how-script-tags-and-document-ready-work。我觉得你可以试试这个。由浅入深教你怎么写前端,通过一个个demo,从基础教起。我觉得光看视频还是不够的,还是要自己多写,多积累写的经验,多遇到难题然后想办法解决。

 

对于 > 750 设备宽度,设置 rem 作为字体单位;
对于 小于 750 设备宽度,设置 px 作为字体单位。

问:为什么是大于750用rem啊,不是小于750用rem么,我是新手。麻烦讲一下,我做的手机端的都是用rem啊。小屏幕的……

答:布局之类的用 rem 没问题的~
主要问题出在文字上,开发时候遇到一些问题。
当小屏的时候使用 rem 可能会导致文字过小,而用 px 可以保证文字显示正常.
但是 px 对于大屏幕就不友好了,屏幕大的时候使用 px 因为字体不会随屏幕放大,所以在超大屏幕上可能会使得页面文字有些空。
大致是以上这个情况 -。-

地址:http://www.ruanyifeng.com/blog/2017/05/css-variables.html

CSS 样式失效?

问:
但是 方框二 跟 方框三 咋效果一样呢?
我没查出来,难道它是默认 p 段落吗?

答:

首先,如果说效果一样的话,含义就是指,最终应用到元素上的 css 是一样的
如果说结构不同的话,那么有可能就是 p 元素的默认样式和浏览器对 body 元素的默认css样式是一样的
因为上面一个方框内容,实际上 Click here for 是 body 的子元素
over

md 与 html

好好理解一下每个标签的语义还是很有必要的
所以 md 其实也可以理解为另一种形式的 html
往深里说,这个就涉及到浏览器的渲染原理
简单来说,不管html还是md,对于开发者来说,都只是一种标记而已
不同的是他们的目的。 md 是为了出于写作方便而生

html 是浏览器能直接识别的语言
md 是对 html 的一层封装

【译】解密 Quantum:现代浏览器引擎的构建之道

解密 Quantum:现代浏览器引擎的构建之道

2016 年 10 月,Mozilla 公布了 Quantum 项目 —— 旨在开创下一代浏览器引擎。现在这一项目已然步入正轨。实际上,我们在上个月刚更新的 Firefox 53 中首次包含了 Quantum 的部分核心代码

但是,我们意识到对于那些不从事浏览器开发的人来说(而且是大多数人),很难明白这些改动对于 Firefox 的重大意义。毕竟,许多改动对于用户来说是不可见的。

意识到这点后,我们开始撰写一系列博客文章来深度解读 Quantum 项目正在做什么。我们希望这一系列的文章能够帮助大家理解 Firefox 的工作原理,以及 Firefox 是如何打造一款下一代浏览器引擎,从而更好地利用现代计算机的硬件性能。

作为这系列文章的第一篇,最好还是先说明一下 Quantum 正在改变哪些核心内容。

浏览器引擎什么?它的工作原理又是什么?

那么,就从头开始说起吧。

Web 浏览器是一种软件,它首先加载文件(通常这些文件来自于远程服务器),然后在本地显示这些文件,并且允许用户交互。

Quantum 是项目的代号,Mozilla 启动这个项目是为了大幅度升级 Firefox 浏览器的某个模块,这个模块决定了浏览器如何根据远程文件将网页显示给用户。这一模块的行业术语叫“浏览器引擎”,如果没有浏览器引擎,用户就只能看看网站源代码而不能浏览网站了。Firefox 的浏览器引擎叫 Gecko。

可以简单地把浏览器引擎看作一个黑盒(有点类似于电视机),灌入数据后由黑盒来决定展示在屏幕上的数据形态。现在的问题是:浏览器引擎是如何呈现页面的?它是通过哪些步骤将数据转化为我们所看见的网页?

网页数据通常有许多类型,但总的来说可以划分为三大类:

  • 用于描述网页结构的代码
  • 用于提供样式的代码,描述了网页结构的视觉外观
  • 用于控制浏览器行为的脚本代码,包括:计算、人机互动以及修改已初始化的网页结构和样式。

浏览器引擎将页面结构和样式结合从而在屏幕上渲染出网页,同时确定可以互动的内容。

这一切要从网页结构说起。浏览器会根据给定的地址去加载一个网站。这个地址指向的是另一台电脑,当它收到访问请求时,会返回网页数据给浏览器。至于这个过程的具体实现可以查阅这篇文章,反正最后浏览器拿到网页数据了。这个数据以 HTML 的格式返回,它描述了网页的结构。那么浏览器又是如何读懂 HTML 的呢?

浏览器引擎包含一类称为解析器的特殊模块,它将数据从一种格式转换为另一种可以存储在浏览器内存中的格式。举个例子,HTML 解析器拿到了以下 HTML 内容:

<section>
 <h1 class="main-title">Hello!</h1>
 <img src="http://example.com/image.png">
</section>

于是,解析器开始解析、理解 HTML,下面是解析器的独白:

嗯,这里有个章节。在这个章节里有个一级标题,这个标题包含的文本内容是 “Hello!”。另外在这个章节中,还有一张图片。这个图片的数据从这里获取:http://example.com/image.png

网页在浏览器内存中的结构被称为文档对象模型,简称 DOM。DOM 以元素树的形式来表示页面结构,而非长文本形式,包括:每个元素各自的属性以及元素间的嵌套关系。

A diagram showing the nesting of HTML elements

除了用于描述页面结构,HTML 同样包含指向样式文件和脚本文件的地址。浏览器发现这些后,就开始请求并加载数据。然后浏览器会根据数据的类型,指定相应的解析器来处理。脚本文件可以在 HTML 文件解析的同时,改变页面的结构和样式。而样式规则,CSS, 在浏览器引擎中发挥以下作用。

关于样式

CSS 是一门编程语言,开发者可以借助 CSS 描述页面元素的外观。CSS 全称 Cascading Style Sheets (译注:层叠样式表),之所以这样命名是因为多个 CSS 指令可以作用在同一个元素上,后定义的指令可以覆盖之前定义的指令,权重高的指令可以覆盖权重低的指令(这就是层叠的概念)。下面是一些 CSS 代码。

section {
  font-size: 15px;
  color: #333;
  border: 1px solid blue;
}
h1 {
  font-size: 2em;
}
.main-title {
  font-size: 3em; 
}
img {
  width: 100%;
}

大部分 CSS 代码被分割在称为规则的一个个分组中,每条规则包含两个部分。其中一个部分是选择器,选择器描述了 DOM 中需要应用样式的元素(上文说过,还记得吗?)。另一部分则是一系列样式声明,应用于与选择器匹配的元素。浏览器引擎中包含一个名为样式引擎的子系统,用于接收 CSS 代码,并将 CSS 规则应用到由 HTML 解析器生成的 DOM 中。

举个例子,在上述 CSS 中,我们有一条规则指定了选择器 “section”,这会匹配到 DOM 中所有 section 元素。接着,浏览器引擎会为 DOM 中的每一个元素附上样式注解。直到最后每个 DOM 元素都应用了样式,我们将该状态称为元素样式计算完毕。而当多个选择器作用在一个元素上时,源代码次序靠后的或者权重更高的 CSS 规则最终会应用到元素上。可以认为样式表是层叠的薄透写纸,上层覆盖下层,但同时也能让下层透过上层显示出来。

一旦浏览器引擎计算好了样式,接下来就要派上用场了!布局引擎接下来会接手 DOM 和已计算的样式,并且会考虑待绘制布局所在的窗口大小。然后布局引擎会分析该元素应用的所有样式,并通过各种算法将每个元素绘制在一个个内容盒子中。

页面布局绘制完毕后,是时候将页面蓝图转化成你所看见的实际页面了。这一步骤称为 painting(绘制),这也是先前所有步骤的最终整合。每个由布局定义的内容盒子都将被绘制,其内容来自 DOM,其样式源自 CSS。最终,从代码一步步重组而成的页面,展现在用户眼中。

以上就是以前的浏览器引擎所做的事情。

当用户滚动页面的时候,浏览器会进行重绘来显示原先在可见窗口外的页面内容。然而,显然用户都喜欢滚动页面!浏览器引擎清楚地意识到自己肯定会被要求展示初始窗口以外的内容(也称视口)。现代浏览器根据这个事实在页面初始化的时候绘制了比视口更多的页面内容。当用户滚动页面的时候,这部分用户想要看的内容早就已经绘制完毕了。这样的好处就是页面滚动变得更快更流畅。这种技术是网页合成的基础,合成是一种减少所需绘制量的技术术语。

另外,我们有时候也需要重绘部分页面内容。比如用户有可能正在观看一个每秒 60 帧的视频。也可能页面上有一个图片轮播或者滚动列表。浏览器能够检测出页面上哪一部分内容将要移动或者更新,并且会为这些更新的内容创建一个新的图层,而非重新渲染整个页面。一个页面可以由多个彼此重叠的图层构成。每个图层都可以改变定位方式、滚动位置、透明度或者在不触发重绘的前提下控制图层的上下位置!相当方便。

有时候一些脚本或者动画会修改元素的样式。这个时候,样式引擎就需要重新计算这个元素的样式(可能页面上许多其他元素也要重新计算),重新计算布局(产生一次回流),然后重绘整个页面。随着计算量的增加,这些操作会耗费很多时间,但只要发生的频率低,那么就不会对用户体验产生负面影响。

在现代 web 应用中,文档结构经常会被脚本改变。而哪怕只是一点小改动,都会或多或少地触发整个渲染流程:HTML 解析成 DOM、样式计算、回流、重绘。

Web 标准

不同浏览器解释 HTML、CSS 和 JavaScript 的方式也不一样。这就产生了各种影响:小到细微的视觉差异,大到用户无法在某些浏览器上正常浏览网站。近年来在现代互联网中,大多数网站在不同浏览器下似乎都表现的不错,而且也没有关注用户具体使用的是什么浏览器。那么,不同浏览器又是如何达到这种程度的一致性体验呢?

网站代码的格式,以及代码的解释规则、页面的渲染规则都是由一种由多方认可的文件定义的,即 Web 标准。来自浏览器厂商、Web 开发者、设计师等行业成员的代表组成的委员会制定了这些标准文档。他们一起确定了对于给定的代码片段,浏览器引擎应该显示的明确行为。Web 标准包括 HTML、CSS 和 JavaScript 标准以及图像、视频、音频等数据格式的标准。

为什么说 Web 标准是重要的?因为只要保证遵循了 Web 标准,就可以开发出一个全新的浏览器引擎,这个引擎可以处理互联网上数以亿计的网页,并绘制出和其它浏览器一样的结果。这也意味着在某些浏览器中才能运作的“秘密配方”不再是秘密了(译者注:例如,不再需要 CSS 私有前缀)。另外,正因为 Web 标准的存在,用户可以凭自己的喜好挑选浏览器。

摩尔定律的终结

过去,人们只有台式电脑。曾经有一个相对保守的假设:计算机只会变得更快更强大。这个想法是基于摩尔定律的推测:集成电路上可容纳的元器件的数目,约每隔 2 年便会增加一倍(因此半导体芯片的性能也将提升一倍、体积也将缩小一倍)。令人难以置信的是,这种趋势一直持续到了 21 世纪,并且有人认为这一定律仍然适用于当今最前沿的研究。那么为什么在过去十年中,计算机的平均运算速度似乎已经趋于稳定了?

顾客买电脑的时候不单单考虑运行速度,毕竟速度快的电脑很可能非常耗电、非常容易发热还非常贵!有时候人们想要一台续航时间良好的笔记本电脑。有时候呢,人们又想要一个微型的触屏电脑,带摄像头,又小到可以塞进口袋,并且电量足够用一天!计算能力的进步已经让这成为可能(真的很惊人!),不过代价就是运行速度下降。正如你在飙车的时候无法有效(或者说安全)地控制行车路线,你也无法让电脑超负荷计算的同时处理大量任务。现在的解决方案都是借助于单 CPU 多核。因此,现在智能手机普遍都有 4 个较小、较弱的计算核心。

不幸的是,过去的浏览器设计是基于摩尔定律(性能提升)会继续有效的假设。另外,编写能够充分利用多核 CPU 的代码也是极为复杂的。所以,我们该如何在这个到处都是小型计算机的时代,开发一款高速又高效的浏览器呢?

我们已经想到了!

在接下来的几个月中,我们将更进一步关注 Firefox 的变化,以及这些变化将如何更好地利用现代硬件来实现一个更快更稳定的浏览器,从而让网站更加多姿多彩。

皮皮虾,我们走!