blog's People
blog's Issues
为项目添加Jest
以 Vue 项目为例:
- devDependencies 中加入依赖包
"babel-jest": "^24.7.1",
"jest": "^24.7.1"
yarn add jest babel-jest --dev
- Jest 配置
在 package.json 加入:
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
"transformIgnorePatterns": [
"/node_modules/(?!vue-awesome|normalize.css)"
],
"collectCoverage": true,
"collectCoverageFrom": [
"**/*.{js,vue}",
"!**/node_modules/**"
]
}
- package.json script 下加入:
"test": "jest",
执行上下文,作用域链和 JavaScript 内部运行原理
翻译自Execution context, Scope chain and JavaScript internals
执行上下文(Execution context ),简称 EC,被定义为 JS 代码执行的环境。「环境」往往用来指代这样一个集合 —— 不是我创造却可以使用的东西。当这里提及环境时,指的是 JS 代码能够访问的 this
值、变量、对象和函数,这些组成了 JS 代码的环境。
JS 中的执行上下文有三种:
- 全局执行上下文(Global execution context),简称 GEC,当 JS 文件在浏览器下载下来,开始执行 JS 代码时的默认执行上下文。所有的全局代码都执行在全局上下文。在浏览器里,如果代码执行在严格模式,
this
的值是undefinded
, 否则是window
对象。对于 JS 的代码执行来说只能有一个全局上下文。 - 函数执行上下文(Functional execution context),简称 FEC,为函数内代码执行所创建的上下文称为函数上下文。每个函数都有它自己的执行上下文。函数执行上下文可以不只有一个。当代码在全局上下文执行时,如果 JS 引擎遇到一个函数调用,就会为这函数创造一个函数执行上下文。
- Eval :eval 函数里代码的执行上下文称为 Eval。
执行上下文栈:所有在JS代码运行时创建的执行栈会储存在栈数据结构里,称为执行上下文栈。
全军执行上下文默认出现在执行上下文栈,而且在栈的底部。当执行全局上下文的代码时,如果遇到函数调用就会创建函数执行上下文,然后把该上下文推到栈的顶部。JS引擎执行上下文在栈顶部的函数。一旦函数所有的代码执行完。JS引擎就会把该函数的执行上下文从栈中推出,然后开始执行下面的函数。
用下面的例子来帮助理解:
var a = 10;
function functionA() {
console.log("Start function A");
function functionB(){
console.log("In function B");
}
上面的代码在浏览器一加载完成,JS引擎就会在执行栈推入全局上下文。当在全局上下文调用functionA,JS引擎会把functionA的执行上下文推入上下文栈然后开始执行functionA。
当 functionA 内调用 functionB,JS引擎把functionB的上下文推入执行栈。一旦 functionB 的代码执行完,它的上下文就会被推出。functionA 的上下文处于最顶端,JS 引擎开始执行 functionA 剩下的代码。
当所有的代码执行完,JS 引擎会推出全局上下文,结束 JS 执行。
到目前为止我们讨论了引擎怎样使用执行上下文。现在我们讨论引擎怎样创建执行上下文。
为项目添加 lint 和 commit msg 检查
- 修改package.json
-
添加 .eslintrc.js 和 .eslintignore
以 vue 项目为例: .eslintrc.js
.eslintignore -
添加 lint script:
"scripts": {
"lint": "eslint --ext .js,.vue src",
"lint-fix": "eslint --ext .js,.vue src --fix"
}
- 添加 gitHooks:
"gitHooks": {
"pre-commit": "lint-staged",
"commit-msg": "node scripts/verify-commit-msg.js"
}
- 添加 lint-staged 的配置:
"lint-staged": {
"*.{js,vue}": [
"eslint --fix",
"git add"
]
}
- 在 script 文件夹下添加 verify-commit-msg.js
https://gist.github.com/xiaoshude/a8cd454383f3f86423a271f0d76d0da1#file-verify-commit-msg-js
- 添加依赖包
"devDependencies": {
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"lint-staged": "^7.0.0",
"yorkie": "^1.0.1"
}
eslint 及 eslint 开头的包就不解释了
lint-staged 支持 lint-staged 命令,用于仅仅 lint add to stagging 的代码
yorkie 用于在支持在 package.json 的 gitHooks 钩子
示例 package.json
最后把这个文件加在项目里 COMMIT_CONVENTION
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.