AngularJS之开发组件的一些思路

欢迎大家指导与讨论 : ）

　　一 、前言

　　　　由于笔者水平有限，在这里只是分享自己开发组件的一些思路~ 摘要：无UI组件类、有UI组件类、有UI组件类型2。欢迎拍砖吐槽 O(∩_∩)O

　　二 、无UI组件类

　　　　顾名思义，这类组件没有任何表现形式出现在用户界面上，只是一般功能的实现者，也就是平时所用到、所需要开发的 Factory。它一般由 controller 进行调用，用于处理并返回数据。重点是，Fatory 某些方法最好使用 $q(promise)，来分隔业务逻辑。

         Controller
         ↓       ↑
    data ↓       ↑ promise
         ↓       ↑
          Factory  

app.factory('hi', ['$q', '$timeout', function($q, $timeout){
    function show(data) {
       var deferred = $q.defer();
       $timeout(function(){
          // ... 处理数据data
          defer.resolve(result)
       }, 16)
       return deferred.promise;
    }
    return {
      show: function(data) {
         return show(data)
      }
   }
}])

app.controller('Ctrl', ['hi', function(){
     $scope.test = function() {
        hi.show(data)
           .then(function(result){
                // ...
            })
     }
}])        

　　三 、有UI组件类

　　　　该类组件的UI主要由 Factory 生成界面并插入到body中，类似于 Ionic的ActionSheet上拉菜单或者是弹窗。该类组件的需要注意的问题主要有：如何利用Angular的特性显示动态的数据、模板，如何更好地增强组件的复用性。因此，笔者的主要思路是：1 . 模板是稳定的而且单例的(生成的模板保存在 Factory 某属性中)。2 . 我们只需要用数据改变模板的内容( $compile，$rootScope.$new() )。3 . 复用性主要体现在每次调用 Factory 它的初始状态必须是唯一的( scope.$destroy/$rootScope.$new()或者其他一些reset操作 )。当然，使用 $q( promise )来执行回调依然是很好的选择。

          Controller
        　  ↓       ↑
  　　option ↓       ↑ promise
        　  ↓       ↑
             Factory  

// 在Factory变量保存单例模板: 
var a = angular.element(_html())
// 每当生成模板函数时
return a ?  a : angular.element( _html())
// 每次调用启动函数
function show(option){
  var scope = $rootScope.$new(); // 新增作用域用于管理视图中的数据
  scope.title = option.title; // 配置内容
  scope.showornot = option.show // 配置动态显示
  $compile(_html())(scope) // 绑定模板和作用域
}
// 每次关闭时
function close(data){
    deferred.resolve(data);
    scope.$destory(); // 销毁作用域
}
// 模板函数
function _html( ){
   return [
    "<div>",
        "<h3>{{ title }}</h3>", // 根据配置参数，动态显示不同内容
        "<div ng-if='showornot'></div>" // 根据配置，动态显示
    "</div>"
  ].join('')
}

　　四 、有UI组件类2

　　　　该类组件与上述的主要区别是UI模板是由指令的template参数所负责，功能实现者是自己开发的 Factory 工具，而 Controller 则是作用域的提供者，用于根据数据进行下一步的业务编写。于是此组件便拆分成3大部分。

        　　        directive
        　  ↓   ↑             ↓↑
      调用   ↓   ↑ promise     ↓↑
        　  ↓   ↑ (data)      ↓↑ 指令scope的绑定策略
         Factory              ↓↑
                              ↓↑
                          Controller -> 下一步处理