Skip to content

Latest commit

 

History

History
110 lines (75 loc) · 4.44 KB

1.0 web 前端基本素养.md

File metadata and controls

110 lines (75 loc) · 4.44 KB

web 前端基本素养

---:: You are the owner of your career.

找一些比较准确的,你可以确定它真的足够全面的资料当作线索。
对 Web 平台的 API,用反射:

for(var p in window){console.log(p)}  

浏览器里给出来的这个属性列表是不会骗人的,用这个东西作为线索

高效率工作与学习

合理利用搜索引擎

远离百度,拥抱谷歌,一般程序员 + google = 超级程序员。
掌握搜索引擎的高级用法,比如双引号(精确搜索) 站内搜索(site:) 通配符(星号) 文档类型(filetype:pdf)

选择合适工具

Dash, Alfred, Zeal, Wox, Everything, Emment, Markdown….
时间少,不被打断 coding 思路,从而提升效率。

做好时间管理

明确「最小可用时间」的概念
凡事都要列计划,计划之外无工作
利用好工具:便签,番茄工作法,forest;让自己更有压迫感.TED 公开课自行学习

阅读优质资源

阅读聚合筛选后的文章,比如稀土掘进,企业前端团队博客,其他个人专业博客等,订阅号,有道笔记。可以通过 RSS 订阅自己整合。

养成总结习惯

书写是为了更好的思考,可以通过书写进行知识的沉淀,刚开始先将工作学习中遇到的问题,选择的方案以及解决的方法记录下来。持续一段时间后,然后对这类事情进行挖掘再整理。转载收藏,网络存档, 自己的理解提炼主旨进一步再整理。

写博客进行知识沉淀。 搭建博客 (Hexo + Github page + 七牛)

正确的沟通方式

异步沟通,谨慎;语言组织;有迹可循;防止被人中途思路被打断,看似回复变慢,其实更加高效。

正确的提问

提问前做足够研究。(你做过足够的研究么,你尝试过搜索么,你试过 debug 么,仔细检查、避免低级错误)
在适当的地方提问(比如你在 stackoverflow,而非在百度知道, 国内 segmentfault, gitter(举例:Ant-design), github 提issue)
直入主题,少说废话。精确描述问题。(提问的智慧)
用清晰、正确、精准并语法正确的语句。反面例子:(冰天雪地跪求解答,十万火急。)

使用明确、有意义的标题。

语法正确、格式清晰。

描述事实、而不是猜测。

要有具体场景,描述问题发生的环境

如果是业务bug提前demo,jsbin,jsfiddle, codepen 复现)并写下你自己尝试过的解决方法。

降低别人对问题理解的时间成本,对自己对问题提炼有帮助。有时候问题描述清楚,问题也就解决了。

编写优雅的代码

可读性目的:使别人理解它所需的时间最小化。 可读性代码就是一种艺术,优雅程度决定是否好的艺术品。

提高代码的可读性

风格统一 把信息装到名字里 注释言简意赅 简化循环和逻辑 参考AirBnb, Google, facebook 举例:

// bad
console.log(object.hasOwnProperty(key));
// good
console.log(Object.prototype.hasOwnProperty.call(object, key));
// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
/* or */
import has from 'has';
// ...
console.log(has.call(object, key));

HOW

  • 借助自动化工具(e: esLint, pre-commit)
  • Code Review (不局限几天,一个人,结对互评也可以做)
  • 一些新的 web 技术

    • shadow DOM:隔离组件代码作用域
    • Service Worker :网络代理,数据缓存,离线应用,推送通知
    • WebRTC:通过 JavaScript api 接口网页实时通讯
    • PWA :网页可以渐进式地变成 App 可以添加到主屏幕图标,具有 Service Worker 的能力
    • Web Components :组件化标准,只规范接口,而底层的实现是完全自由的。包括(HTML Templates、HTML Import、Custom Element、Shadow DOM)
    • WebAssembly: Web 的二进制格式(一般的在 JavaScript 文档其实就是简单的文本文件,先是从服务器下载,然后由浏览器中的 JavaScript 引擎解析并编译)可以让不能用来开发 web 应用的语言来进行 web 开发

代码规范

参见 编码规范 by @mdo

  • 中英文之间留一个空格
  • 代码注释
  • 避免使用大长段代码

前端工作流和规范