angular項目總結——angular + browserify + gulp + bower + less 架構分享

時間 2019-11-11

標籤 angular 項目總結 browserify gulp bower 架構分享欄目 AngularJS 简体版

原文原文鏈接

一眨眼，快三個月沒有寫博客了。一直在爲本身沒有寫博客而懊惱，忙過這段時間，好好總結一下。javascript

新項目主要是本身一我的在寫，先搭建了一個初步的架構，用了我並不熟悉的angular，這個過程當中，慢慢也熟悉了angular，同時也優化了本身的項目架構。css

這兩個多月裏一直處在高強度的工做中，項目是一個面向用戶的創做中心，涉及到數據、語音、圖片、地圖等等。html

地圖上的交互很複雜，因爲項目須要還會同時用兩種地圖，一個谷歌一個高德，谷歌主要面向國外數據，高德面向國內數據，前端

兩個地圖能夠任意切換，可是內容都要保持一致，而且最好可以相互補充，地圖開發商的接口不同，不少邏輯的實現方法也會不同，java

邏輯雖然是通的，可是適應每個地圖的代碼卻略有不一樣。這是這個項目比較難的一個地方。git

使用angular後，先後端進行了分離，前端須要去調用後端接口，後端接口比較抽象，經常不能一次性拿到本身想要的數據，請求一個接口獲取到內容以後每每還須要根據當前數據，github

再次去請求另外一個接口，先後端分離以後對前端的要求其實就更高了，同步明明能夠很簡單就解決的問題，異步以後就須要花費更多的邏輯去處理。web

如今想一想這個項目開發過程當中會發生不少事情：數據庫

　　理解需求、打通數據邏輯、和產品交流，質疑產品設計的問題（修正一些問題或者仍是回去照着產品的作）
　　畫娃娃圖（用例）、初步技術設計，搭建開發架構、定好主要接口
　　看原型圖、看設計稿相互對比、提出疑問、糾正錯誤、提出前端方面的建議
　　和後端協商數據庫結構、顧忌之後的需求擴展、商量數據細節、爭論命名（其實英文都很差 O(∩_∩)O ）
被壓縮開發時間，表示不滿，而後抗議無效
調整優化前端架構、維護webfont、找插件或者寫插件　　
熟悉angular，踩過那些坑
後端和我都是第一次用cors跨域資源共享，折騰了一遍
開發：時間緊、功能多、難度大、天天到五點的時候就感受全身疼痛，寫不動了
天天：加一個小時班、加兩個小時班、最後快提測時到同事家加班
　項目bug多、開發過程當中忽略不少細節，實際已經把測試時間也算進開發時間裏，先粗再細，也算一種討巧和無奈吧
在壓縮的時間中挑戰自我，而後失敗，上線延期/(ㄒoㄒ)/~~
負面情緒猛漲而後慢慢瀉下，本身經歷了痛苦、收穫了經驗、看到了成長

說說項目架構：gulp

angular + browserify + gulp + bower + less

angular 主要使用了擴展： angular-ui-router、angular-bootstrap

browserify管理打包js

bower管理三方庫

gulp自動化構建項目

項目根目錄以下：

build文件夾是構建工具最後生成的部署代碼，src是全部源代碼，temp只是一些臨時文件

源碼根目錄以下：

app.js註冊了根模塊：

                    
angular.module("zmng", [
    "ui.router",
    "ui.bootstrap",
    "ngAnimate",
    
    "zmng.main",
    "zmng.test"
]);

require("./config.js");    
require('./common/js/resize.js');

引入src目錄下的config.js、http.js，最後browserify會編譯app.js，gulp輸出到 build->app.js

common：

存有全部img資源，

一些全局js放在js文件夾（例如：我放置了環境配置和配合rem的resize），

三方的css庫、webfont和本身抽象的css，最後會把全部的less引入到app.less中，編譯爲一個app.css到build

modules：

全部業務按模塊寫在modules裏：

modules.less

modules目錄下有一個modules.less，全部模塊裏的less會被引入到modules.less裏，common的app.less會引入此文件

modules.less

//layout
@import "layout/less/header.less";
@import "layout/less/footer.less";
@import "layout/less/content.less";

// main
@import "main/less/index.less";

// test
@import "test/less/main.less";

js&html：

js代碼按控制器、指令和服務劃分，控制器控制頁面和邏輯，公用的頁面或者獨立的插件抽離爲指令，服務寫後臺請求接口

每一個模塊下一樣有app.js，用來註冊模塊和引入當前模塊下全部的js，最後編譯成一個文件。

config控制路由

templates管理模塊html，最後被打包到build（less會被打包到common的app.css裏），以下：

test模塊的app.js生成到build->modules->test->js->test.js，生成出的js我命名爲模塊的名字test.js，這樣是爲了在入口html引入js資源的時候，不想結尾看到的全是app.js，最終以下：

    <script type="text/javascript" src="build/app.js"></script>
    
    <script type="text/javascript" src="build/modules/layout/js/layout.js"></script>
    <script type="text/javascript" src="build/modules/main/js/main.js"></script>
    <script type="text/javascript" src="build/modules/test/js/test.js"></script>

這樣看起來比較清晰

此架構的優點：

按模塊換分，每一個模塊的js代碼最終打包生成爲一個模塊js，在html引入模塊資源時很方便
less最終生成一個css，適用於單頁面應用
架構默認使用rem佈局，能夠參照架構裏的less代碼，支持webfont
方便開發，默認gulp任務用於開發，gulp deploy用於壓縮發佈

架構代碼已經開源到github，說這麼多也許看代碼更容易讓人明白： github地址 https://github.com/zimv/zmNgFrameWork

一些踩過的小坑和建議：

寫路由的方法有不少，連接後面帶參數若是用 url : "/test/:Id" 這種寫法，連接後面若是沒有參數，也必需要加上/，如： /test/，
寫成 /test 的話就會找不到路由。仍是建議用 url : "/test?id" 這種寫法
用ui-bootstrap的modal插件時候，要把當前控制器的做用域傳給modal，不然，在沒有關閉當前modal時，頁面跳轉，modal就不會自動關閉
經常經過隔離做用域來達到做用域間的獨立，也會用到@、=、&的方式相互調用數據，可是一旦數據多了，寫起來就會很麻煩，

　　建議能夠直接把當前scope傳給另外一個做用域,好比：

  angular.module("zmng")
        .directive("test", test);
    function test() {
        return {
            restrict: "AE",
            replace : true,
            scope : {
                testScope: "="
            },
            link : function() {
                  $scope.testScope = $scope;
            }
       }
  }