环境:
根据changeLog安装对应版本的sonarlint
根据自己的环境配置
1 | "sonarlint.connectedMode.connections.sonarqube": [ |
解释:
serverUrl:sonarqube应用地址
token:在sonarqube应用的“我的账号>安全”可以生成
connectionId:任意填写
sonarlint.ls.javaHome:java的path
sonarlint.pathToNodeExecutable:node的path
在项目的.vscode/setting.json
下配置
1 | { |
解释:
connectionId:跟vscode的connectionId保持一致
projectKey:项目标识。在sonarqube应用中能找到
配置了connect mode后,update一下绑定配置拉取服务器的规则,就生效了。在vscode每打开代码文件后,就会扫描文件了,然后在控制台的PROBLEMS页签下显示出现的问题。
Q:如果使用中有时不起作用了,比如遇到下面的错误
A: 关掉vscode重新启动一下
Q: 没有cli工具吗,可以在提交时检查
A: 以前有,现在官方废弃掉了
Q: 每次打开文件才扫描,能否全局项目扫描检查
A: sonarlint暂时做不用,只能通过sonarQube做了
原文:An Overview of JavaScript Testing in 2021,本文是对原文消化后的部分整理,如果以前未接触过前端测试,请读者看原文
框架 功能 | Test lanuchers | Testing structure providers | Assertion functions | Generate and display test progress and summary | Mocks, spies, and stubs | Generate and compare snapshots | Generate code coverage | Browser Controllers | Visual Regression Tools |
Karma | ✔️ | ✔️ | |||||||
Jasmine | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ||||
Jest | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ||
TestCafe | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ||||
Cypress | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ||||
webdriverio | ✔️ | ||||||||
Mocha | ✔️ | ✔️ | |||||||
Cucumber | ✔️ | ||||||||
Chai | ✔️ | ||||||||
Unexpected | ✔️ | ||||||||
Sinon | ✔️ | ||||||||
enzyme | ✔️ | ||||||||
testdouble | ✔️ | ||||||||
Ava | ✔️ | ||||||||
Instanbul | ✔️ | ||||||||
Blanket | ✔️ | ||||||||
Nightwatch | ✔️ | ||||||||
Nightmare | ✔️ | ||||||||
Phantom | ✔️ | ||||||||
Pupperteer | ✔️ | ||||||||
Applitools | ✔️ | ||||||||
Percy | ✔️ | ||||||||
Wraith | ✔️ | ||||||||
WebdriverCSS | ✔️ |
模拟用户行为,比如:点击鼠标、拖拽、上滑、码字和导航等
借助安装驱动,比如selenium, protractor, webdriverIO, Nightwatch, Apium
Your code on Node.js <> WebDriver <> FF/Chrome/Safari Driver <> Browser
注入脚本,比如testCafe, Cypress
document.getElementByID('someButton').dispatchEvent(clickEvent)
暴露浏览器的原生API,比如puppeteer
Your code on Node.js <> Browser's API
像Jest, Jasmine, TestCafe, Cypress是集成型的可以开箱即用。而有些需要组合使用比如一种常见的组合:mocha + chai + sinon
建议从两个方面考虑:1、单元测试和集成测试;2、端对端测试(功能测试)。因为功能测试特别耗时间,特别是测试不同浏览器时
集成型的简单,开箱即用,功能也强大。而非集成型的比较灵活,可以任意组合
各种测试类型需要的测试框架能力:
单元测试一般用于函数式编程和尽可能保持纯洁(无副用作),越纯洁测试就越容易
集成测试应该涵盖重要的跨模块过程。有时它们扩展到跨多个类的流程,有时扩展到测试不同的系统,如前端-后端交互
声明式渲染
1 | var app5 = new Vue({ |
指令
单向数据绑定:v-bind:title
或{{}}
,(title为元素特性),v-bind
的缩写::
条件:v-if
、v-else
、v-else-if
循环:v-for
事件:v-on:click
缩写:@
双向数据绑定:v-model
插槽:v-slot
缩写:#
v-html
组件,模板语言
1 | Vue.component('todo-item', { |
Vue实例属性与方法
生命周期
事件修饰符
1 | // 触发event.preventDefault() |
.stop
.prevent
.capture
.self
.once
.passive
计算属性与监听器
计算属性:是基于它们的响应式依赖进行缓存的
1 | var vm = new Vue({ |
监听器,当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
按键修饰符
直接将 KeyboardEvent.key
暴露的任意有效按键名转换为 kebab-case 来作为修饰符。
vue为了兼容,定义了常见的按键码别名:
.enter
.tab
.delete
(捕获“删除”和“退格”键).esc
.space
.up
.down
.left
.right
系统修饰键
.ctrl
.alt
.shift
.meta
组件
一个组件的 data
选项必须是一个函数,每个实例可以维护一份被返回对象的独立的拷贝。
在组件上使用v-model
1 | Vue.component('custom-input', { |
1 | <custom-input v-model="searchText"></custom-input> |
通过插槽分发内容:
1 | <alert-box> |
1 | Vue.component('alert-box', { |
动态组件:
1 | <!-- 组件会在 `currentTabComponent` 改变时改变 --> |
Prop
大小写
prop类型
非Prop的特性
替换/合并已有的特性
禁用特性继承,可以手动决定这些特性会被赋予哪个元素
1 | Vue.component('base-input', { |
1 | <base-input |
自定义事件
自定义组件的v-model
1 | Vue.component('base-checkbox', { |
1 | <base-checkbox v-model="lovingVue"></base-checkbox> |
将原生事件绑定到组件
1 | Vue.component('base-input', { |
现在 <base-input>
组件是一个完全透明的包裹器了,也就是说它可以完全像一个普通的 input
元素一样使用了:所有跟它相同的特性和监听器的都可以工作。
Props, data, computed, method加载顺序
关于子组件activated不执行的问题:需要设置keepAlive
复杂类型,数据更新检测
数组:> Vue 不能检测以下变动的数组:>> 1. 当你利用索引直接设置一个项时,例如:`vm.items[indexOfItem] = newValue`> 2. 当你修改数组的长度时,例如:`vm.items.length = newLength`- 变异方法:splice, sort, reserve, push, pop, shift, unshfit- 替换数组(非变异方法):例如:`filter()`, `concat()` 和 `slice()`对象:- `Vue.set(vm.userProfile, 'age', 27)`- `Object.assign()`
和渲染无关的数据
vue
中data
的数据默认便会进行双向数据绑定,若是将大量的和渲染无关的数据直接放置在data
中,将会浪费双向数据绑定时所消耗的性能,将这些和渲染无关的数据进行抽离并配合Object.freeze
进行处理
1 | const columnList = Object.freeze([ |
路由组件传参,通过props解耦
1 | const User = { |
父子组件的加载、销毁顺序
1 | // 加载顺序 |
通过@hook
监听子组件的生命周期
1 | <list @hook:mounted="listMounted" /> |
革命性变化:
1G的诞生,模拟电路
从1G到2G,模拟电路->数字电路,由于采用了专用集成电路,单位能量传输和处理信息的能力提高了两个能量级
从2G到3G,实现了从语音通信到数据通信的飞跃。电话功能退居2线,上网成为主导。
从3G到4G,实现了移动通信网络和传统电信网络的融合,将云计算等互联网技术运用于移动通信,使得不同区域之间的流量能够动态平衡,大大地提高了带宽的使用率
四个要点:
单位能量的信息传输率越来越高
网络不断融合
设备的辐射越来越小(香农定律,5G基站距离小200-300m,功率数量级降低)
每一代都有新的主导型公司出现:1G是摩托罗拉,2G是诺基亚,3G、4G是苹果、谷歌和高通,5G是华为
2G,100的字要分成两条发送;3G以图片和小视频为主,QQ和语音;4G直播、大视频。手机上集成了越来越多的功能,涵盖人类的衣食住行各个方面,颠覆了很多传统行业,很多方面也在变革,如家庭电话、民用相机、MP3音乐播放器,掌上游戏机、交通卡、钱包等。
香农公式:C = W log2(1+S/N) b/s
C:信道的极限信息传输速率
W:为信道的带宽(以 Hz 为单位)
S:为信道内所传信号的平均功率
N:为信道内部的高斯噪声功率
信道的带宽或信道中的信噪比越大,则信息的极限传输速率就越高。 只要信息传输速率低于信道的极限信息传输速率,就一定可以找到某种办法来实现无差错的传输。 实际信道上能够达到的信息传输速率要比香农的极限传输速率低不少。
无论是第一代,还是第二代互联网,全世界形成了一个高度耦合的产业,在这个产业里有详细的分工。
控制产业的是把控操作系统和核心芯片的企业,接下来是设备制造商和软件开发商。
第一代互联网winIntel,第二代互联网是arm+Android。苹果吃独食。为什么第一代的公司在第二代不适应:基因决定的(在一个商业环境优化得非常适应环境的公司基因,很难在另一个生态环境重新适应和发展)。机会:变革式的洗牌+市场规模。
每一代互联网,上述位置中的企业都会更换,这是由单位能量传输、存储和处理更多信息的要求决定的,也是由公司的基因决定的。在未来也是如此,为了适用IoT的发展,需要新的芯片技术和操作系统。
每一次这样大的变局,就给那么多人带来了机会。
架构图。绿色是核心模块。更多的人可能是从应用入手。
真实案例:
1)使用IoT及早的发现猪瘟,给每只猪安装可穿戴设备,监控其体温和进食,一旦发现有猪瘟,将这一栏的猪全部处理掉;
2)NBA的勇士队使用一种叫SportVU(它是数据采集的工具),识别每一位球员,跟踪人的踪迹,记录传球的配合的准确率,过人的效率和投篮的命中率等;另一种辅助工具MOCAP(大数据处理和智能决策工具),用来帮助制定的战术熟练的练好
美国最大的移动通信运营商Version把5G的应用概括为八大模块:
如何判断是否商业操作,伪5G:
5G的15版本(3GPP-R15)标准两步走:第一步,非独立组网模式(NSA),即采用4G为核心网,4G为主,5G为辅,对应的标准3GPP-R15-NSA,于2018年底确定了;第二步,独立组网模式(SA),5G作为核心网,只有5G基站工作,对应的标准3GPP-R15-SA,于2019年6月确定。
5G的三大根本性原则:增强型移动宽带(eMBB),超可靠低时延(uRLLC),海量机器类通信(mMTC)
邬贺铨院士估计,中国完成5G的建设,至少需要10年时间,投入1万亿以上。5G用户要达到移动通信的比列的85%,需要比4G时间长(中国花了6、7年)。5G有4万亿美元的市场
两个大阵营:华为(盟商:英特尔、诺基亚)提出5G方案是在6000兆赫,也就是在Wi-Fi之上,好处是技术简单,能较好的利用4G资源,绕过障碍物能力强,但是窄带宽,速度受限;另一个阵营高通(可能的盟商三星,高通虽然设计芯片,但是本生没有生产线,制造要依赖三星或者台积电),方案比较跃进,直接上到了28千兆赫,好处是和现在所有的无线通信都不冲突,宽带可以扩展的非常宽,但是技术复杂,传输距离短。邬贺铨认为中国5G未来还得使用28千兆赫(即所谓的毫米波)
目前全世界真正决定建设5G的电信强国只有中国、美国、韩国
目前中国5G取得了一些先机,华为的早起投入,中国较强的工程能力,中国的国力,以金钱换时间
大企业的优势:华为优势在于全面性,通信设备、基站建设、手机和芯片制造,还有标准上。高通,从来没有在移动通信中落伍,在半导体设计上的经验要比华为强。三星,3.5GHz的测试,象征意义
要与运行商结合,全世界用户超过5000万的运营商有24家。运营商比较保守,新品至少要在18个月后才接受,不太可能再诞生一个华为
出现的根源:
React: 始终整体“刷新”页面,无需关注细节
Flux架构:单向数据流
component
render
jsx:直接在JavaScript代码中直接写HTML标记。本质:动态创建组件的语法糖
1 | const name = "Jimmy Luo"; |
props
state
function component
immutability
React elements: React elements are first-class JavaScript objects; we can pass them around in our applications. To render multiple items in React, we can use an array of React elements.
unique “key” prop: Keys tell React about the identity of each component which allows React to maintain state between re-renders. If a component’s key changes, the component will be destroyed and re-created with a new state
Component Lifecycle: mounting(componentDidMount())->updating(componentDidUpdate())->unmouting(componentWillUnmount())
Controlled component
本书是专门写给程序员看的团队管理书籍。比起其他管理书籍,这本书比较薄,才170多页。我没看此书此前,在自己项目管理中或多或少用了里面的一些理念,这本书很好的把精华写出来了。本书其实围绕如何维护一个健康有效率的社区,很多经验可以借鉴一下。
此书分为六章。第一章以天才程序员开头,毕竟天才极少,还是要靠团队完成任务。由此引出去全书的主题:HRT(hummer respect trust),谦虚、尊重、信任。第二章培养团队文化,文化是啥?为什么要培养团队文化?以及一些好的方法。第三章把项目经理(主管)比作是大海航行的船长,”仆人式主管”,须为团队服务,然后还讲了领导的一些处世之道和激励。第四章将如何对付害群之马,保护团队。第五章如何管理团队组织。第六章程序员也要有服务用户意识,软件需要用户友好,需要包装和营销。
放下自负
学会批评和接受批评。建设性批评,谦虚的把问题归到自己头上。别把你的自尊和你的代码等同起来
快速失败-学习-迭代
不要等到完美的时候才出来,只要产品大致可以,就立刻把他按照原样公布给大众。
事后检讨。”学到了什么”,”怎么改正”。
简要 | |
---|---|
时间线 | |
主因 | |
影响和损失评估 | |
立即修改正问题的步骤 | |
防止此事再次发生的步骤 | |
得到的教训 |
为学习预留时间。人一旦攀至顶峰,往往就会停止学习。偶尔跳出舒适区,接受挑战。
学习保持耐性。
学会示弱。承认自己的无知
市面上写给经理们看的管理书很多,而本章却是专门写给那些客串管理的工程师看的
经理要关心怎么干,而主管只负责设定大方向。
TL(技术主管,tech leader): 负责产品整体(或者部分)技术走向。
TLM(技术主管经理,tech leader manager):除了负责产品整体(或者部分)技术走向,还需关系手下工程师的职业发展和愉快程度。
放下自负,鼓励多提问,学会聆听,学会道歉
做一个禅师。保持淡定和冷静。多问问题,引导工程师解决自己的问题。
成为催化剂。引导大家达成共识。
让你的团队了解到你的帮助他们解决障碍的意愿和能力。
给与他们安全感,培养敢于冒风险的氛围。
当一个导师。三个基本条件:
设置明确的目标。每个人都在同一方向上使劲吗?定期检查他们有没有偏离方向。
坦诚。坦诚有些事不能告诉成员。避免使用”三明治赞美法”,这样可能不能准确传达自己的意图。直接了当反馈和批评,但是注意自己的表达方式,不要让工程师被你弄得很防备。
记录快乐程度。不但关注职业生涯,更是可以让你的队员有机会得以成长。每次在会议结束之前问队员”你还有什么要求吗”
其他建议和窍门:
作者是结合自己的实际,由于SVN项目是开源项目,里面涉及到很多外部人员的相处之道。
向上请求许可,向下请求谅解。
路是人走出来的。寻求改变的办法就是拉拢群众。
学习向上管理。做承诺的时候要谨慎,而干工作的时候要尽最大努力。
“进取型”(用户看得到的)和”防御性”(产品长期健康的)工作。
运气与互惠的经济学。
晋升到安全的位置。掌控自己在公司的命运。
和有能量的人交朋友。
如何通过E-mail向忙碌的管理层求助。10秒钟读完,”三个论点,一个行动”。
主要是用户体验方面的。营销、易用性、客服
2、环境
git version 2.19.0
3、解决
1)编辑/etc/bash.bashrc
1 | # Uncomment to use the terminal colours set in DIR_COLORS |
2)编辑/etc/DIR_COLORS文件
想改成其他颜色,请参看上面的数字对应的颜色说明
4、效果
OVER!!
]]>1 | $ nvm use 7.2.0 |
nvm安装的时候,路径不要中文和空格
]]>CNPM源码目录结构
1 | cnpm config set registry http://localhost:7001 //或者在当前电脑用户目录下配置.cnpmrc文件 |
1 | constructor() { |
但是换成webpack后,这样就报错了,识别不了,查了一些资料,换成下面的就可以了。
1 | constructor() { |
或者用这种方法http://stackoverflow.com/questions/12766117/how-does-prototype-extend-on-typescript
觉得这种方法不是很好,也没亲测
]]>1 | <p-dropdown name="adjustflagId" class="dp-position" [options]="codeTable.adjustAccountFlag" |
代码复制的,name属性相同所致。
]]>