详解angularjs的数组传参方式的简单实现


Posted in Javascript onJuly 28, 2017

初学 angularjs时,对 数组传参方式感到很好奇([‘a', ‘b', function(a,b){}]),它到底怎么实现的呢?后来由于工作很忙,对这个问题也就慢慢忘记了。

今天闲来无事,有想到了这个问题。最简单的方法就是查看他的源代码。无奈本人E文不好,不说看他的设计逻辑,仅看英文注释就够我头疼了。尝试闭门造车,最终竟然把车造出来了。

既然自己造的车,就要带上自己的名(取姓名拼音第一个字母),就叫他mqyJs把,下面是演示的调用方法:

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

核心部分如下:

//框架开设
var mqyJs = {
  //服务注册
  servicesList: {},
  servicesRegister: function(name, value) {
    this.servicesList[name] = value;
  },
  //应用创建
  applicationList: [],
  applicationCreate: function(_opts, _args) {
    if (!_args) {
      _args = _opts;
      _opts = {}
    }
    _opts.scope = _opts.scope || {
      name: 'SCOPE没有设置'
    };
    if (!(_args instanceof Array)) {
      _args = ['$scope', _args];
    }
    if (typeof _args[_args.length - 1] != 'function') {
      throw new Error('参数中没有指定运行函数');
    }
    _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 + ' 还没有注册');
          }
          _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];
  }
};
//框架结束

通过 servicesRegister,可以注册 服务,比如 angularjs 的 $http;

//插件开始
mqyJs.servicesRegister('$hello', {
  name: '你好'
});
mqyJs.servicesRegister('$world', {
  name: '世界'
});
mqyJs.servicesRegister('$china', {
  name: '中国'
});
//插件结束

最终,对所有注册的应用,自动执行

/**
 * 初始化完成后系统自动运行
 * 比如网页中 放到 window.onload
 */
mqyJs.applicationList.map(function(app, index) {
  console.log('自动调用 -> APP #' + index + ' -> ' + app.run());
});

尝试跑一下代码,能自动识别参数类型,完美执行。

不传入 $scope 时,程序会自动创建一个 $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('手动调用 -> RESULT -> ' + result);
});

//演示代码 结束

为了方便测试,再把代码重新写一遍,直接复制下面的代码到 浏览器控制台即可测试

//框架开设
var mqyJs = {
  //服务注册
  servicesList: {},
  servicesRegister: function(name, value) {
    this.servicesList[name] = value;
  },
  //应用创建
  applicationList: [],
  applicationCreate: function(_opts, _args) {
    if (!_args) {
      _args = _opts;
      _opts = {}
    }
    _opts.scope = _opts.scope || {
      name: 'SCOPE没有设置'
    };
    if (!(_args instanceof Array)) {
      _args = ['$scope', _args];
    }
    if (typeof _args[_args.length - 1] != 'function') {
      throw new Error('参数中没有指定运行函数');
    }
    _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 + ' 还没有注册');
          }
          _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];
  }
};
//框架结束
//插件开始
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('手动调用 -> RESULT -> ' + result);
});
 
//插件结束
mqyJs.applicationList.map(function(app, index) {
  console.log('自动调用 -> APP #' + index + ' -> ' + app.run());
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
jquery中post方法用法实例
Oct 21 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
js 获取html5的data属性实现方法
Jul 28 #Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 #jQuery
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 #Javascript
js原生代码实现轮播图的实例讲解
Jul 28 #Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 #Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 #Javascript
Angular指令之restict匹配模式的详解
Jul 27 #Javascript
You might like
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
JS 建立对象的方法
2007/04/21 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
使用python Django做网页
2013/11/04 Python
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
Python如何实现机器人聊天
2020/09/10 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
幼儿园端午节活动方案
2014/08/25 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
浅谈Java父子类加载顺序
2021/08/04 Java/Android
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL