水木資本網(wǎng) www.svmuu.com
SvmuuWeb
SvmuuWeb是針對PC端開發(fā)搭建的工程化架構(gòu)
目前系統(tǒng)平臺(tái)發(fā)現(xiàn)的問題
-
三要素問題：部分頁面的css,html,js混合在一起，不便于優(yōu)化，管理及后期維護(hù)，需分離解耦。 -
頁面加載優(yōu)化問題：有些頁面加載了不必要的js及css文件，還有多次http資源請求，造成加載速度慢，影響用戶體驗(yàn)，浪費(fèi)網(wǎng)絡(luò)資源，需采用按需加載模式及壓縮合并相關(guān)資源文件。 -
代碼重用問題： 部分功能頁面代碼重復(fù)很多，后期需要組件化，模塊化來解決這部分問題，便于管理和開發(fā)。 -
變量問題：發(fā)現(xiàn)系統(tǒng)中多采用的是全局變量，這樣會(huì)造成命名沖突、代碼的脆弱性、難以預(yù)測、意外的全局變量不可控等問題。后期采用命名空間，閉包等來解決此類問題。 -
文件結(jié)構(gòu)問題：后期規(guī)范這塊。 -
依賴js庫版本管理：后期采用grunt前端工具來優(yōu)化版本管理，壓縮合并，打包等這一流程。 -
未發(fā)現(xiàn)問題：在后期開發(fā)中遇到的問題，找合適解決方案。
目的----提升性能和編碼效率，便于管理及后期維護(hù)擴(kuò)展
工程化 | 模塊化 | 組件化 | 規(guī)范化
-
提高前端開發(fā)效率前端一些常見的任務(wù)，如js庫的下載和管理、css文件的轉(zhuǎn)換、js文件合并壓縮、js測試的執(zhí)行等，要把這些跟業(yè)務(wù)無關(guān)的問題都在架構(gòu)層面處理掉。 -
項(xiàng)目模塊化管理采用AMD異步加載模式，按需及并行加載js庫，方便開發(fā)，擴(kuò)展及維護(hù)。 -
工程化打包最終產(chǎn)出標(biāo)準(zhǔn)的前端模塊。
采用的技術(shù)棧
-
Grunt– Js任務(wù)管理工具，通過各種插件對項(xiàng)目進(jìn)行各種操作，比如文件轉(zhuǎn)換、運(yùn)行測試、打包部署等實(shí)現(xiàn)自動(dòng)化。 -
Bower– Js庫依賴管理工具。當(dāng)你需要jquery時(shí)，不需要手動(dòng)下載，只需要執(zhí)行bower install jquery -
RequireJs– Js庫加載管理，及模塊化支持。AMD異步加載模式，可以按需及并行加載js庫，可以把我們的代碼以模塊化的方式組織。 -
jquery– 一個(gè)優(yōu)秀的Javascript庫。它是輕量級(jí)的js庫 ，它兼容CSS3，還兼容各種瀏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+). -
backbone– 構(gòu)建javascript應(yīng)用程序的一個(gè)優(yōu)秀的類庫。他簡潔、輕量級(jí)、功能實(shí)在,采用MVC模式，本身提供了模型、控制器和視圖從而我們應(yīng)用程序的骨架便形成。 -
sass一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開發(fā)，變得簡單和可維護(hù)。 -
第三方插件– ......
文件大小
Backbone.js 6.5
RequireJs 96kb
jquery 84kb
介紹說明
目錄介紹：
--架構(gòu)目錄
svmuu
└── dist
└── grunt
│ ├── clean.js
│ ├── connect.js
│ ├── copy.js
│ ├── watch.js
│ ├── ...
└── documents
└── node_modules
└── src
└── .bowerc
└── bower.json
└── Gruntfile.js
└── package.json
└── README.md
-
dist放置打包處理后的工程 -
gruntgrunt各功能任務(wù)的配置 -
src文件夾存放的是所有的的源代碼和其他靜態(tài)資源（比如圖片，iconfont) -
documents存放開發(fā)文檔相關(guān) -
node_modulesgrunt依賴工具庫下載 -
Gruntfilegrunt入口配置 -
READMEmarkdown文件
--開發(fā)環(huán)境目錄
src
└── data
└── frm
│ ├── base
│ │ ├── jquery
│ │ ├── requirejs
│ │ ├── backbone
│ │ ├── ....
│ │
│ ├── static
│ │ ├── css
│ │ ├── js
│ │ ├── images
│ │ ├── html
│ │
│ ├── locale
│ │ ├── ...
│ │
│ ├── third-part
│ │ ├── ...
│
└── modules
│ ├── chatroom
│ │ ├── js
│ │ ├── tpl
│ │ ├──index.html
-
data項(xiàng)目所需數(shù)據(jù)文件夾，如json，txt等格式的配置數(shù)據(jù) -
frm項(xiàng)目依賴文件 -
modules模塊及頁面邏輯視圖文件夾 -
img放置用到的圖標(biāo) -
js放置頁面js文件 -
locale放置國際化資源文件 -
third-part放置第三方插件
--打包目錄
/dist
/frm
/base
/smft.min.js
/common.js
/require.min.js
/static
/css
/images
/js
/temp
/third-part
/weditor
/...
/modules
/common
/workman
/
/chatroom
/js
/page.js
/...
-
frm項(xiàng)目頁面依賴文件 -
modules項(xiàng)目功能模塊 -
common公用模塊及組件 -
chatroom具體功能模塊
安裝編譯
環(huán)境準(zhǔn)備
- nodejs
- ruby (api生成需要)
安裝設(shè)置環(huán)境
下載安裝node
安裝grunt命令
npm install -g grunt-cli
安裝bower命令
npm install -g bower --save
安裝工具插件
npm install -g copy --save
...
安裝依賴js庫
npm install -g requirejs --save
...
運(yùn)行部署命令
- 運(yùn)行：grunt start
- 打包部署：grunt build
- ...
使用示例
典型的index頁代碼
<!DOCTYPE html>
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>標(biāo)題</title>
<link href="frm/libs/dist/css/svmuu-default.min.css" rel="stylesheet">
<script type="text/javascript" src="frm/libs/dist/js/svmuu-all.min.js"></script>
</head>
<body>
</body>
<script data-main="svmuu/chatroom/js/main" defer="defer" src="frm/requirejs/require.js"></script>
</html>
Important
- <!DOCTYPE html>聲明是必須的，此聲明必須位于第一行，此聲明之前不能出現(xiàn)任何內(nèi)容（包括空格），否則瀏覽器無法檢測。
- 針對IE的注釋是必不可少的；
- X-UA-Compatible元標(biāo)簽的配置是必不可少的，尤其是針對IE的配置，可以強(qiáng)制IE使用“標(biāo)準(zhǔn)模式”渲染頁面，而不是以“怪異模式”；
- renderer元標(biāo)簽用來兼容國產(chǎn)的一些垃圾雙核瀏覽器，如360等，強(qiáng)制它們以chrome內(nèi)核渲染頁面；
- viewport元標(biāo)簽用來支持響應(yīng)式設(shè)計(jì)；
- svmuu-default.min.css 為系統(tǒng)平臺(tái)公用css壓縮文件；
- svmuu-all.min.js 為系統(tǒng)平臺(tái)公用js壓縮文件；
- data-main 為模塊化加載的入口文件配置；
- ...
組件庫
- 第三方組件
- 自定義組件
- 另：盡量引用成熟穩(wěn)定的第三方插件以及開發(fā)自己的自定義組件。
優(yōu)化方面
- 盡可能的減少http請求數(shù)
- 將js和css獨(dú)立成外部文件
- 壓縮js,css，圖片
- Css放在頁面的上方，js放在頁面下方
- 移除重復(fù)的腳本
- ...
編程規(guī)范方面
- 參照js編程規(guī)范文檔；
- 模塊化定義規(guī)范；
- 組件編寫規(guī)范；
- css樣式規(guī)范；
- 注：規(guī)范文檔后面有文檔產(chǎn)出。
隨著公司業(yè)務(wù)的增加及成熟，會(huì)持續(xù)調(diào)整并完善前端框架，優(yōu)化前端開發(fā)環(huán)境及業(yè)務(wù)合理化，代碼可維護(hù)性，擴(kuò)展性，網(wǎng)站性能等方面持續(xù)改進(jìn)。
《未完待續(xù)...》
