angular项目总结——angular + browserify + gulp + bower + less 架构分享

一眨眼，快三个月没有写博客了。一直在为自己没有写博客而懊恼，忙过这段时间，好好总结一下。

 

新项目主要是自己一个人在写，先搭建了一个初步的架构，用了我并不熟悉的angular，这个过程中，慢慢也熟悉了angular，同时也优化了自己的项目架构。

 

这两个多月里一直处在高强度的工作中，项目是一个面向用户的创作中心，涉及到数据、语音、图片、地图等等。

地图上的交互很复杂，由于项目需要还会同时用两种地图，一个谷歌一个高德，谷歌主要面向国外数据，高德面向国内数据，

两个地图可以任意切换，但是内容都要保持一致，并且最好能够相互补充，地图开发商的接口不一样，很多逻辑的实现方法也会不一样，

逻辑虽然是通的，但是适应每一个地图的代码却略有不同。这是这个项目比较难的一个地方。

 

使用angular后，前后端进行了分离，前端需要去调用后端接口，后端接口比较抽象，常常不能一次性拿到自己想要的数据，请求一个接口获取到内容之后往往还需要根据当前数据，

再次去请求另一个接口，前后端分离之后对前端的要求其实就更高了，同步明明可以很简单就解决的问题，异步之后就需要花费更多的逻辑去处理。

 

现在想想这个项目开发过程中会发生很多事情：

• 　　理解需求、打通数据逻辑、和产品交流，质疑产品设计的问题（修正一些问题或者还是回去照着产品的做）
• 　　画娃娃图（用例）、初步技术设计，搭建开发架构、定好主要接口
• 　　看原型图、看设计稿相互对比、提出疑问、纠正错误、提出前端方面的建议
• 　　和后端协商数据库结构、顾忌以后的需求扩展、商量数据细节、争论命名（其实英文都不好 O(∩_∩)O ）
•      被压缩开发时间，表示不满，然后抗议无效
•      调整优化前端架构、维护webfont、找插件或者写插件　　
•      熟悉angular，踩过那些坑
•      后端和我都是第一次用cors跨域资源共享，折腾了一遍
•      开发：时间紧、功能多、难度大、每天到五点的时候就感觉全身疼痛，写不动了
•      每天：加一个小时班、加两个小时班、最后快提测时到同事家加班
• 　  项目bug多、开发过程中忽略很多细节，实际已经把测试时间也算进开发时间里，先粗再细，也算一种讨巧和无奈吧
•      在压缩的时间中挑战自我，然后失败，上线延期/(ㄒoㄒ)/~~
•      负面情绪猛涨然后慢慢泻下，自己经历了痛苦、收获了经验、看到了成长

 

说说项目架构：

    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;
            }
       }
  }

      这样代码要干净很多，扩展也不用再多写参数

• 用了定时器，记得加上$scope.$apply()
• 某一个页面功能太复杂，可以把一些子功能抽离成指令并且不要隔离scope，这样代码就不会全部揉在一起
• 小心重复提交数据，为按钮做重复提交限制
• 为避免select出现空白选项，为select设置一个空值，显示请选择，初始化的时候把ng-model的值设置为空字符串

 

结语：

     做项目成长的才会更快，但不一定成长的更好

     高压下容易产生负能量需要去诉说去释放，需要时刻告诉自己，自己的目标是什么

     在写代码时，架构做过几次调整，没有最合适的架构，只有不断调整才能适应需求

 

ng1.5.5&md5-cache对架构稍微做了调整：

　　调整之后build目录有所改变，之前重命名app.js为文件名：test/test.js ,现在不重命名: test/app.js