什麼是持續集成,什麼是統一代碼倉庫,前端工程化,自動化構建
持續集成
持續集成需求
- 持續集成式通過平臺串聯各個開發環節,實現和沉澱工作自動化的方法;
- 線上代碼和代碼倉庫不同步,影響迭代和團隊協作;
- 靜態資源發佈依賴人工,浪費開發人力;
- 缺少自動化測試, 產品質量得不到保障;
- 文件簡單修改上線,需要技術介入
持續集成解決
- 統一代碼廠庫通過分支管理合並主幹svn / git;
- 自動化構建工具,編譯,部署,測試,監控,本機開發上線環境;(可以移步我的QA工程師篇博客)
- 持續集成平臺. :jenKins, Trevis CI
- 部署工具:rsync , shelljs 可以幫助自己寫shell, yargs 可以拿到 - 命令行後面的參數 -v
- 運營同學有權限操作運營頁面保存即可上線;
統一代碼倉庫多開分支
svn 開發階段圖示;
同事z: 從主幹A上面拿取分支 A-01;
同事x: 從主幹A上面拿取分支 A-02;
同事z: A-01幹好活了, 把代碼上傳到Trunk上 此時A更新成了B;
同事x: 此時A-02也幹好活了,把更新的B默認拉去過來,合併代碼, 然後把代碼送到新的主幹上去; B更新成了C;
C-back 留下tags 方便回滾
前端工程化
1.自動化編譯
2.前端模塊化
```
// CMD 同步
/**
* require, 去加載別的模塊
* exports, 導出模塊
* module , 就是把很多東西一起導出
*/
define(function (require, exports, module) {
var a = require('./a')
a.doSomething()
// 此處略去 100 行
var b = require('./b')
// 依賴可以就近書寫
b.doSomething()
})
```
```
// AMD 默認推薦的是 異步
define(['./a', './b'], function (a, b) {
// 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething()
})
```
```
//RequireJS.js
require(['math'],function (math) {
math.add(2,3)
})
```
3.定位靜態資源;
1. 有時候瀏覽器緩存,需要我本地自動清楚緩存;
```
//以前,我們是這樣做的.我們的邏輯js文件 每次都不一樣;
<script src="7.js" v="1.0.0"></script>
```
2. 現在呢.加了MD5版本戳,代替了
3. 這裏延伸一個問題?有些公司發佈一定要是半夜才能發佈.那麼可不可做到隨時發佈呢?
4. 配置超長時間的本地緩存---節省帶寬,提高性能
5. 採用內容摘要作爲緩存更新依據 ---精準的緩存控制
6. 靜態資源cdn部署----優化網絡請求
7. 更新資源發佈路徑實現非覆蓋發佈---平滑升級
4.前端開發組建化;
`Web Components `
1. Custom Elements
```
class ButtonHelloElement extends HTMLButtonElement{
constructor(){
super()
this.addEventListener('click',()=>{
alert("hello world")
})
}
}
customElements.define("button-hello",ButtonHelloElement,{extends:"button"})
//<button-hello> chenjing </button-hello>
```
2. HTML Imports
是在一種HTMLs中引用以及複用其他HTML文檔的方式, 可以理解爲 我們常見的模板中的 include之類的作用
```
//header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="logo">
我是header頁面
</div>
</body>
</html>
```
```
<meta charset="UTF-8">
<link rel="import" href="./header.html">
<script>
const link = document.querySelector('link[rel=import]');
const header = link.import;
const pulse = header.querySelector('div.logo')
const d = document.currentScript.ownerDocument;
console.log(link)
console.log(header)
console.log(pulse)
console.log(d)
</script>
```
3. HTML Templates
4. Shadow DOM 沙箱環境
用來隔離組建代碼的作用域, 列如我組建的css 不影響其他組建之類的, 而iframe 又太重會出現很多奇怪的問題, 旨在提供一種更好的組織頁面的方式,避免代碼互相影響;沙箱裏面的css 寫法也不太一樣;
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shadow DOM</title>
</head>
<body>
<div class="host">Hello World!</div>
<script>
var host = document.querySelector('.host');
var root = host.createShadowRoot();
var node = document.createElement('h1');
node.textContent = 'Shadow DOM 介紹';
var para = document.createElement('p');
para.textContent = 'Shadow DOM 詳細信息';
root.appendChild(node);
root.appendChild(para);
</script>
</body>
</html>
```
5.自動化部署測試配合版本庫;
Jenkins Travis CI
