Original Repository: ryanmcdermott/clean-code-javascript
JavaScript 风格指南目录
介绍
变量
函数
对象和数据结构
类
测试
并发
错误处理
格式化
注释
介绍作者根据 Robert C. Martin 《代码整洁之道》总结了适用于 JavaScript 的软件工程原则《Clean Code JavaScript》。
本文是对其的翻译。
不必严格遵守本文的所有原则,有时少遵守一些效果可能会更好,具体应根据实际情况决定。这是根据《代码整洁之道》作者多年经验整理的代码优化建议,但也仅仅只是一份建议。
软件工程已经发展了 50 多年,至今仍在不断前进。现在,把这些原则当作试金石,尝试将他们作为团队代码质量考核的标准之一吧。
最后你需要知道的是,这些东西不会让你立刻变成一个优秀的工程师,长期奉行他们也并不意味着你能够高枕无忧不再犯错。千里之行,始于足下。我们需要时常和同行们进行代码评审,不断优化自己的代码。不要惧怕改善代码质量所需付出的努力,加油。
变量使用有意义,可读性好的变量名反例:
var yyyymmdst ...
思考如何通过一个标签实现如下效果:
一般我们实现的方式如下:
<span>¥</span><span>100</span>
定义两个标签分别设置不同的样式来搞定。
新思路通过CSS属性::first-letter可以通过一个标签来实现类似效果。
<div class="price">¥100</div>
.price::first-letter {
font-size: 72%;
}
效果如下:
first-letter的兼容性也是很好的。可以在实际项目中使用。另外,他有一个缺点就是他只能修改开头第一个字符,如果需要修改末尾单位的字符样式。也可以通过另外一个属性来设置。
size-adjust+ unicode-rangesize-adjust 浏览器将调整字体大小,无论字体系列(”宋体”性质值0.58)
unicode-range 设置font-face特定的字符。
<div class="m ...
方法export default (Vue) => {
Vue.directive('auth', {
mounted(el, binding) {
let vm = binding.instance;
let userAuthList = vm.$store.getters.authList;
if (!Vue.config.globalProperties.$_has(binding.value, userAuthList)) {
el.parentNode.removeChild(el)
}
},
})
Vue.config.globalProperties.$_has = (value, userAuthList) => {
let isExist = false
...
1、首先全局安装yalcnpm install yalc -g
#或者
yarn install yalc -g
2、在npm组件库项目中执行下面命令yalc publish
3、在依赖该组件的项目中执行下面命令yalc add my-npmPackage
4、后期npm组件包build之后直接yalc push 即可推送更新5、本地联调完成后执行下面命令删除本地依赖yalc remove --all
来自 yalc文档
实际开发的过程中,遇到取某个对象下的某个值,或者是未知对象下的某个属性的值。如果不确定这个值有没有怎么办?
res.data.money.list[0].price
比如上面这种,想获取data下面list数组的第一个的price的值。如果我们直接这样写,在money下没有list的时候就会报Uncaught TypeError: Cannot read property ‘list’ of undefined。之前是这样处理的。
if (res.data.money.list[0] && res.data.money.list[0].price) {
// 实际业务逻辑部分
}
或者是更全的
if (
res &&
res.data &&
res.data.money &&
res.data.money.list &&
res.data.money.list[0] &&
res.data.mone ...
坚持
坚持
gogogo