JavaScript 书写规范及技巧

强类型检查

使用 === 而不是 ==

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
0 == false // true 
0 === false // false
2 == "2" // true
2 === "2" // false

// example
const val = "123";
if (val === 123) {
console.log(val);
// it cannot not be reached
}
if (val === "123") {
console.log(val);
// it can be reached
}

变量命名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 不推荐
let daysSLV = 10;
let y = new Date().getFullYear();
let ok;
if (user.age > 30) {
ok = true;
}

// 推荐
const MAX_AGE = 30;
let daysSinceLastVisit = 10;
let currentYear = new Date().getFullYear();
...
const isUserOlderThanAllowed = user.age > MAX_AGE;

// 不要添加一些额外且不必要的词汇到你的变量名称中。

let nameValue;
let theProduct;

// 推荐
let name;
let product;

设置原型的构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Person(name) {
this.name = name;
}


function Student(name) {
Person.call(this, name);
}

Student.prototype = Object.create(Person.prototype);
// Student 的原型会被设置为 Person。

// 实际上想要将 Student 的原型设置为 Student。
// 需要这么写
Student.prototype.constructor = Student;

// 或者
class Student extends Person {
}

创建 Web Workers

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script id="worker" type="javascript/worker">
self.onmessage = (e) => {
self.postMessage('msg');
};
</script>
<script>
const blob = new Blob([
document.querySelector('#worker').textContent
]);

const worker = new Worker(window.URL.createObjectURL(blob));
worker.onmessage = (e) => {
console.log(e.data);
}
worker.postMessage("hello");
</script>

map 技巧

map 里使用 parseInt 会返回 NaN

1
2
3
4
5
6
//  不要这么写
['1','2','3'].map(parseInt)

// 可以
['1','2','3'].map(Number)
['1','2','3'].map(num => parseInt(num, 10))

三目运算符

1
2
3
4
5
// 当 x === 1 返回 false 不想调用 doSomethingElse 时
x === 1 ? doSomething() : doSomethingElse();

// 可以
x === 1 && doSomething();

清除 Yarn 中的缓存

1
yarn cache clear

innerText 在 IE 有效,其他浏览器无效

1
2
const el = document.getElementById('foo');
el.textContent = 'foo';

[译] JavaScript 技巧 —— 子代构造函数,文本选择,内联 Workers 等等
【译】JS代码整洁之道——快速最佳实践
JavaScript闭包应用介绍
如何精确统计页面停留时长

程序员跨过de坑

软件工程

代码管理

  • 长时间不提交代码(至少每天提交一次)
  • 单分支开发,代码发布之后生产环境不打 tag(多分支开发,正式上线打 tag)
  • Git 权限分配

持续集成

  • 本地构建没有集成环境
  • 无法跟踪开发进度
  • 服务器配置低,分批次构建
  • 权限管理

文档管理

  • 程序设计文档(程序员)
  • 数据结构文档(后端程序员或 DBA)
  • 使用说明文档(产品经理或客服)
  • 文档和程序更新不同步

以上是我对下列视频及文章的归纳和总结。
大胖逼逼叨 14-程序员跨过这些坑少走 3 年弯路

程序员快速成长

打字
练习打字
练习打字

工具
熟悉工具,快捷键,减少鼠标操作,提升效率

基础篇

如何快速学习一门语言或框架

  • 看书、看视频、看技术博客、看文档
  • 敲例子、示例 =>最好是 todolist(练习:增删改查)
  • 扩展
  • 查看官网文档
  • 写博客记录学习过程
  • 工程实践(区别于实战项目:代码管理、版本持续集成、测试用例、代码审查)在工作中

进阶篇

  • 阅读 github 上的优秀开源项目的代码(从最早的版本开始阅读,弄明白每次版本迭代的动机)

  • 重构应用

    • 写组件
    • 写框架
    • 推荐书籍《javaScript 框架设计》
  • 设计模式

    • 了解基本概念
    • 识别设计模式
    • 刻意练习使用设计模式
    • 尝试在日常工作中使用设计模式
    • 重构代码并使用设计模式
    • 推荐书籍《设计模式》《重构与模式》

时间管理

技术博客推荐:


以上是我对下列视频及文章的归纳和总结。
大胖逼逼叨 11-程序员快速成神三部曲-基础篇
大胖逼逼叨 12-程序员快速成神三部曲-进阶篇
大胖逼逼叨 13-程序员成神三部曲时间管理

程序员如何在业余时间提升自己?

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.