1.版本控制

• SVN
• GIT
  推薦使用git，git安裝和圖形化介面tortoiseGit安裝，git與github聯絡不在本文的討論範圍，請自行搜尋。
  在github中新建一個專案
  在本地使用圖形Git–>git clone
  或者使用命令：

git clone  git://github.com/someone/some_project.git

資料夾就是我們的專案資料夾。

2.前端自動化–gulp

當然目前比較流行的webpack,其配置過程大體一致，這裡不去贅述。

2.1 package.json初始化（包管理檔案）

npm init

一路回車確定

{
  "name": "cjeb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/zrysmt/cjeb.git"
  },
  "author": "",
  "license": "ISC",
  "bugs"
 
: {
    "url": "https://github.com/zrysmt/cjeb/issues"
  },
  "homepage": "https://github.com/zrysmt/cjeb#readme",
  "devDependencies": {  }
}

如果有package.json檔案

npm install

2.2 安裝區域性gulp

npm install --save-dev gulp

下載的包會存放在專案的node_modules資料夾下
包依賴會加入到package.json中:

"devDependencies": {
    "gulp"
 
: "^3.9.1"
  }

2.3 新建gulpfile.js檔案

例項見3.2 在gulpfile.js`中配置“.

2.4 在命令視窗就可以執行gulp命令

例項見3.3 命令執行.

3.SASS

‘CSS前處理器’，它的基本思想是，用一種專門的程式語言，進行網頁樣式設計，然後再編譯成正常的CSS檔案。

3.1 安裝

npm install --save-dev gulp-sass
npm install --save-dev gulp-watch

gulp-sass是用來將SASS轉化為CSS的，gulp-watch是用來觀察檔案修改的變化
我們來看package.json檔案的變化

  "devDependencies": {
      "gulp":"^3.9.1",
      "gulp-sass":"^2.3.1",
      "gulp-watch":"^4.3.6",
  }

3.2 在gulpfile.js 中配置

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var path = {
    sass_isstudy:'./modules/istudy/sass/',
};
gulp.task('default', function() {
    // 將你的預設的任務程式碼放在這
});

gulp.task('sass', function() {
    return gulp.src(path.sass_isstudy+'*.scss')
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(gulp.dest('./modules/istudy/css'));
});

gulp.task('sass:watch', function() {
     gulp.watch(path.sass_isstudy+'*.scss', ['sass']);
     // gulp.watch('./modules/istudy/sass/*.scss').on('change',livereload);
});   //監控sass變化

3.3 命令執行

gulp sass:watch

執行上訴命令，在sass檔案修改、儲存後，gulp就會將sass檔案轉化為css檔案

4.模組化程式設計

具體參見文章【javascript模組化程式設計】

4.1 ES5時代

依seajs為例：
CMD(Custom Module Definition)通用模組載入

4.1.1 seajs

引入seajs檔案

<script type="text/javascript" src="../../common/jsext/sea-debug.js"></script>

seajs 的簡單配置

seajs.config({
  base: "../sea-modules/",
  alias: {
    "jquery": "jquery/jquery/1.10.1/jquery.js"
  }
})
// 載入入口模組
seajs.use("../static/hello/src/main");//入口

定義模組：

// 所有模組都通過 define 來定義
define(function(require, exports, module) {

  // 通過 require 引入依賴
  var $ = require('jquery');
  var Spinning = require('./spinning');

  // 通過 exports 對外提供介面
  exports.doSomething = ...

  // 或者通過 module.exports 提供整個介面
  module.exports = ...

});

4.1.2 seajs-text

另外可以使用seajs-text載入html檔案或者tpl片段，seajs-css載入css檔案

<script src="path/to/sea.js"></script>
<script src="path/to/seajs-text.js"></script>

<script>
define("main", function(require) {

 // You can require `.tpl` file directly
 var tpl = require("./data.tpl")
//或者html
var html =require("./a.html");
$('.some_class').append(html);
})
</script>

4.1.3 seajs-css

<script src="path/to/sea.js"></script>
<script src="path/to/seajs-css.js"></script>

<script>

// seajs can load css file after loading css plugin.
seajs.use("path/to/some.css");
//很多時候可以使用require的方式
require("path/to/some.css");
</script>

4.2 ES6時代

//bar.js
function hello(who){
    return "hello "+who;
}

export {hello};

//foo.js
import {hello} from "bar";

var n = "zry";
function awe(){
    console.log(bar.hello(n).toUpperCase());
}

export {awe};

//baz.js
import {bar} from "bar";
import {foo} from "foo";

console.log(bar.hello('smt'));//hello smt

foo.awe();//HELLO ZRY

當然現在需要使用babel轉成es5，並且要使用打包工具browserify webpack rollup 等才能直接在現在的瀏覽器上執行。

5.元件化

元件化的思路是將一個模組獨立開來，比如要寫一個選擇器按鈕，將其分為三層：
- 資料層：用來決定按鈕個數以及按鈕是否選擇
- 表現層：按鈕使用現有的ui元件
- 邏輯層：按鈕事件等邏輯處理
元件化會單獨寫一個部落格分析。

參考閱讀：