欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解angularjs的數(shù)組傳參方式的簡單實(shí)現(xiàn)

 更新時(shí)間：2017年07月28日 08:25:39   作者：苗啟源  
本篇文章主要介紹了angularjs的數(shù)組傳參方式的簡單實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

初學(xué) angularjs時(shí)，對(duì) 數(shù)組傳參方式感到很好奇（[‘a(chǎn)', ‘b', function(a,b){}]），它到底怎么實(shí)現(xiàn)的呢？后來由于工作很忙，對(duì)這個(gè)問題也就慢慢忘記了。

今天閑來無事，有想到了這個(gè)問題。最簡單的方法就是查看他的源代碼。無奈本人E文不好，不說看他的設(shè)計(jì)邏輯，僅看英文注釋就夠我頭疼了。嘗試閉門造車，最終竟然把車造出來了。

既然自己造的車，就要帶上自己的名（取姓名拼音第一個(gè)字母），就叫他mqyJs把，下面是演示的調(diào)用方法：

var app2 = mqyJs.applicationCreate([{ name: '直接傳入SCOPE' }, '$hello', '$world', function($scope, $hello, $world) {
  return $scope.name + ": " + $hello.name + $world.name;
}]);

核心部分如下：

//框架開設(shè)
var mqyJs = {
  //服務(wù)注冊(cè)
  servicesList: {},
  servicesRegister: function(name, value) {
    this.servicesList[name] = value;
  },
  //應(yīng)用創(chuàng)建
  applicationList: [],
  applicationCreate: function(_opts, _args) {
    if (!_args) {
      _args = _opts;
      _opts = {}
    }
    _opts.scope = _opts.scope || {
      name: 'SCOPE沒有設(shè)置'
    };
    if (!(_args instanceof Array)) {
      _args = ['$scope', _args];
    }
    if (typeof _args[_args.length - 1] != 'function') {
      throw new Error('參數(shù)中沒有指定運(yùn)行函數(shù)');
    }
    _args.map((arg, index) => {
      if (typeof arg == 'string') {
        if (arg === '$scope') {
          _args[index] = _opts.scope;
        } else {
          if (!!arg && !(arg in this.servicesList)) {
            throw new Error('插件：' + arg + ' 還沒有注冊(cè)');
          }
          _args[index] = this.servicesList[arg];
        }
      }
    });
    return this.applicationList[this.applicationList.push({
      run: function(callback) {
        if (typeof callback != 'function') {
          callback = function(_opts) { return _opts; }
        }
        return callback(_args[_args.length - 1].apply(null, _args));
      }
    }) - 1];
  }
};
//框架結(jié)束

通過 servicesRegister，可以注冊(cè) 服務(wù)，比如 angularjs 的 $http；

//插件開始
mqyJs.servicesRegister('$hello', {
  name: '你好'
});
mqyJs.servicesRegister('$world', {
  name: '世界'
});
mqyJs.servicesRegister('$china', {
  name: '中國'
});
//插件結(jié)束

最終，對(duì)所有注冊(cè)的應(yīng)用，自動(dòng)執(zhí)行

/**
 * 初始化完成后系統(tǒng)自動(dòng)運(yùn)行
 * 比如網(wǎng)頁中 放到 window.onload
 */
mqyJs.applicationList.map(function(app, index) {
  console.log('自動(dòng)調(diào)用 -> APP #' + index + ' -> ' + app.run());
});

嘗試跑一下代碼，能自動(dòng)識(shí)別參數(shù)類型，完美執(zhí)行。

不傳入 $scope 時(shí)，程序會(huì)自動(dòng)創(chuàng)建一個(gè) $scope。

//演示代碼 開始
var app = mqyJs.applicationCreate(['$scope', '$hello', '$china', function($scope, $hello, $china) {
  return $scope.name + ": " + $hello.name + $china.name;
}]);


var app2 = mqyJs.applicationCreate([{ name: '直接傳入SCOPE' }, '$hello', '$world', function($scope, $hello, $world) {
  return $scope.name + ": " + $hello.name + $world.name;
}]);

 

var app3 = mqyJs.applicationCreate([{ name: 'world也直接傳入' }, '$hello', { name: '地球' }, function($scope, $hello, $world) {
  return $scope.name + ": " + $hello.name + $world.name;
}]);


var app4 = mqyJs.applicationCreate(function($scope) {
  return $scope.name;
});

var opts = {
  scope: {
    name: '自定義SCOPE'
  }
};
var app5 = mqyJs.applicationCreate(opts, function($scope) {
  return $scope.name;
});

app4.run(function(result) {
  console.log('手動(dòng)調(diào)用 -> RESULT -> ' + result);
});

//演示代碼 結(jié)束

為了方便測試，再把代碼重新寫一遍，直接復(fù)制下面的代碼到 瀏覽器控制臺(tái)即可測試

//框架開設(shè)
var mqyJs = {
  //服務(wù)注冊(cè)
  servicesList: {},
  servicesRegister: function(name, value) {
    this.servicesList[name] = value;
  },
  //應(yīng)用創(chuàng)建
  applicationList: [],
  applicationCreate: function(_opts, _args) {
    if (!_args) {
      _args = _opts;
      _opts = {}
    }
    _opts.scope = _opts.scope || {
      name: 'SCOPE沒有設(shè)置'
    };
    if (!(_args instanceof Array)) {
      _args = ['$scope', _args];
    }
    if (typeof _args[_args.length - 1] != 'function') {
      throw new Error('參數(shù)中沒有指定運(yùn)行函數(shù)');
    }
    _args.map((arg, index) => {
      if (typeof arg == 'string') {
        if (arg === '$scope') {
          _args[index] = _opts.scope;
        } else {
          if (!!arg && !(arg in this.servicesList)) {
            throw new Error('插件：' + arg + ' 還沒有注冊(cè)');
          }
          _args[index] = this.servicesList[arg];
        }
      }
    });
    return this.applicationList[this.applicationList.push({
      run: function(callback) {
        if (typeof callback != 'function') {
          callback = function(_opts) { return _opts; }
        }
        return callback(_args[_args.length - 1].apply(null, _args));
      }
    }) - 1];
  }
};
//框架結(jié)束
//插件開始
mqyJs.servicesRegister('$hello', {
  name: '你好'
});
mqyJs.servicesRegister('$world', {
  name: '世界'
});
mqyJs.servicesRegister('$china', {
  name: '中國'
});
 
var app = mqyJs.applicationCreate(['$scope', '$hello', '$china', function($scope, $hello, $china) {
  return $scope.name + ": " + $hello.name + $china.name;
}]);


var app2 = mqyJs.applicationCreate([{ name: '直接傳入SCOPE' }, '$hello', '$world', function($scope, $hello, $world) {
  return $scope.name + ": " + $hello.name + $world.name;
}]);


var app3 = mqyJs.applicationCreate([{ name: 'world也直接傳入' }, '$hello', { name: '地球' }, function($scope, $hello, $world) {
  return $scope.name + ": " + $hello.name + $world.name;
}]);


var app4 = mqyJs.applicationCreate(function($scope) {
  return $scope.name;
});

var opts = {
  scope: {
    name: '自定義SCOPE'
  }
};
var app5 = mqyJs.applicationCreate(opts, function($scope) {
  return $scope.name;
});

app4.run(function(result) {
  console.log('手動(dòng)調(diào)用 -> RESULT -> ' + result);
});
 
//插件結(jié)束
mqyJs.applicationList.map(function(app, index) {
  console.log('自動(dòng)調(diào)用 -> APP #' + index + ' -> ' + app.run());
});

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論