正文
javascript痛点的简单介绍
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
JavaScript 入门哪本书最好
入门可以看《javascript高级程序设计》与《javascript dom 编程艺术》尤其是后者，真是好书。我以前看了许多视频，翻那本很厚的指南与高程，最后还是靠《javascript dom 编程艺术》激发我学习兴趣入门。
看了三四次《javascript高级程序设计》就可以看蝴蝶书《javascript语言精辟》，这是讲JS的语法设计，那些语法应该用，那些不应该用（如==、 with、 eval、 argument.caller），这提高你的代码质量必不可少。
如果你想写一个插件或一个库，就要涉及大量DOM，BOM知识了。毕竟javascript是胶水语言，而CSS与HTML在JS里都会映射为DOM，此外还有一些涉及浏览器的东西，叫BOM。
掌握各大浏览器提供的底层DOM、BOM API，及了解它们之间的差异，如何检测它们是否支持，如果屏蔽它们之间的差异性，如何选用最佳的API是我们成为高手的关键。
《PPK 谈 Javascript》，主要是说DOM的兼容性与可用性问题。
《JavaScript DOM高级程序设计》，这本非常优秀，不知为何被理没了（也可能是出版社的缘故，很早就买断货就不知道补课），我在这里了解许多操作CSS的API。
《JavaScript框架设计》这完全是本面向中高级的书，涉及一般书没有讲解过的模块加载器，事件管理系统，选择器引擎，异步列队，动画引擎，及时下日益流行的MVVM架构。
《数据结构与算法JavaScript描述》，越复杂的系统，最后都在架构与算法与数据结构上下功夫，虽然用得不多，但作为一个高手，算法不精真是一个痛点。比较实现一个选择器引擎，人家都会问你比jQuery的快吗？加之JS在这方面也有它的特殊点，因此还得学习。
时下也有许多angular与backbone的书，我本人认为他们基本上照搬官网的API文档，很少能讲到底层的实现，能获得的知识点太少了，它们只能用于入门（你英语不好的话），因此不建议入。
相关问答
Q1: 如何让scss变量能够当做js变量来使用
当前我们使用scss变量有两个痛点：
需要手动导入
无法与js建立联系或者很难，后续不能在此基础上做一些骚操作 为了解决这两个问题，我们以创建js文件以json格式定义scss变量，然后通过配置webpack的解析规则来达到即能像普通scss一样使用，又能作为js变量使用的目的。
scss变量使用规范
变量创建
所有scss变量在style/variables.scss.js编写，格式要求为：
只允许使用小写字母
单词间以下划线"_"连接
命名应简洁易懂，以一个大的模块或高级别的单词开头_后面跟功能描述单词结尾
const variables = {
'header_height': '60px',
'header_background': `#ededed`
}
module.exports = variables;
注意：命名以下划线连接是为了在js文件中能够单个import, 使用中已经在webpack进行转换，必须按照此格式！
在scss变量中使用是正常的scss变量：$header-height
在js中使用是定义时的变量格式：import { header_height } from "@/style/variables.scss.js";
变量使用
配置webpack中sass解析方式，一般来说项目构建者已经处理完毕，项目成员无需关心。
使用时无需引入，直接在样式文件中正常使用即可。
scss中使用示例
.the-nav{
height: $header-height;
}
js中使用示例
import { header_height } from "@/style/variables.scss.js";
...
data(){
return {
header_height: header_height
}
}
...
配置讲解
vue.config.js 中 cuecli3+
let scssVariables = require('./src/style/variables.scss.js');
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: Object.keys(scssVariables)
.map(k = `\$${k.replace('_', '-')}: ${scssVariables[k]};`)
.join('\n')
}
}
}
};
注意：此处有个坑，新版本的sass-loader更换了api参数prependData但是似乎没有文档说明
老版本的sass-loader vue.config.js 中 cuecli3+
let scssVariables = require('./src/style/variables.scss.js');
module.exports = {
css: {
loaderOptions: {
sass: {
data: Object.keys(scssVariables)
.map(k = `\$${k.replace('_', '-')}: ${scssVariables[k]};`)
.join('\n')
}
}
}
};
老版本data = 新版本 prependData
webpack.config.js中 vuecli2
let scssVariables = require('./src/style/variables.scss.js');
...
{
test: /\.scss$/,
use: [
'css-loader',
'postcss-loader',
{
loader: 'sass-loader',
options: {
data: Object.keys(scssVariables)
.map(k = `\$${k.replace('_', '-')}: ${scssVariables[k]};`)
.join('\n')
}
}
]
}
链接:
Q2: TypeScript 解决了什么痛点？
原文：
1. TS是什么 ?
TypeScript = Type + Script（标准JS）。
2. 为什么要用TS ?
目标：生命周期较长（常常持续几年）的复杂SPA应用，保障开发效率的同时提升代码的可维护性和线上运行时质量。
3. 使用 TS 的成本
学习成本
理论上学习并应用一门新语言是需要很高成本的，但好在 TS 本身是 JS 的超集，这也意味着他本身是可以支持现有 JS 代码的，至少理论上是这样。学习一下类型系统的相关知识和面向对象的基础知识，应该可以 hold 住 TS，成本不会很高。官方文档是最好的学习材料。
4. 社区发展
从 Stackoverflow 的2017年开发者调查报告、Google趋势、npm下载量趋势上可以到看，TypeScript社区发展很快，特别是最近几年。特别是伴随着 VS Code 的诞生（ TS 写的，对 TS 支持非常友好），VS Code + TypeScript 的组合让前端圈产生了一股清流，生产力和规范性得到了快速提升。从 Google 对 TS 的支持（Angular 高于 2 的版本是 TS 写的）看到，国际大厂也是支持的。
从蚂蚁集团内部看，Ant Design、Basement 等产品也是基于 TS 写的（至少是在大量使用），虽然有一些反对的声音，但总体还是看好的，有合适的土壤就会快速发展，如 Ant Design。
5. 接受TS
TS 刚出来时我是有点抵触的，或者对她的感觉就跟和CoffeeScript、Dart等编译到JS语言差不多，感觉就是其他语言往JS渗透的产物，近一两年，社区中TS的声音越来越强，而我也开始做大型 JavaScript 应用，随之逐渐重新认识 TS，逐渐认识到 TS 的类型系统、TSC 的静态检查、VS Code 等 IDE 的强力支持对于开发出可维护性好、稳定性高的大型 JavaScript 应用的重要性。
6. 权衡
如何更好的利用 JS 的动态性和 TS 的静态特质，我们需要结合项目的实际情况来进行综合判断。一些建议：
至于到底用不用 TS，还是要看实际项目规模、项目生命周期、团队规模、团队成员情况等实际情况综合考虑。
所以 TypeScript 能不能成为了你的 “刚需” 就看你自己的情况了。
7. 项目实战
Vue3.0 将使用 TS 重写，重写后的 Vue3.0 将更好的支持 TS。2019 年 TypeScript 将会更加普及，能够熟练掌握 TS，并使用 TS 开发过项目，将更加成为前端开发者的优势。
笔者最近也用 vue + TypeScript + Element 进行了一次实战，感觉还是不错的。
虚影：Vue + TypeScript + Element 项目实战及踩坑记
zhuanlan.zhihu.com
TypeScript 的出现， 终于让 JavaScript 不会因为没有静态类型检查，而被后端工程师看低了。
