Parsing the parameter passing method of angularjs array-JS Tutorial-php.cn

Parsing the parameter passing method of angularjs array

巴扎黑

Release： 2017-08-14 14:09:38

Original

1760 people have browsed it

This article mainly introduces the simple implementation of the array parameter passing method of angularjs. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

When I first learned angularjs, I was very curious about the array parameter passing method (['a', 'b', function(a,b){}]). What is it? How is it achieved? Later, because I was very busy with work, I gradually forgot about this issue.

I had nothing to do today, so I thought about this problem. The easiest way is to view his source code. Unfortunately, my E-writing is not good. Not to mention its design logic, just reading the English comments is enough to give me a headache. Trying to build a car behind closed doors, and finally building a car.

Since you built your own car, you have to bring your own name (take the first letter of the pinyin of your name), and call him mqyJs. The following is the calling method for demonstration:

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

Copy after login

The core part is as follows:

//框架开设
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: &#39;SCOPE没有设置&#39;
    };
    if (!(_args instanceof Array)) {
      _args = [&#39;$scope&#39;, _args];
    }
    if (typeof _args[_args.length - 1] != &#39;function&#39;) {
      throw new Error(&#39;参数中没有指定运行函数&#39;);
    }
    _args.map((arg, index) => {
      if (typeof arg == &#39;string&#39;) {
        if (arg === &#39;$scope&#39;) {
          _args[index] = _opts.scope;
        } else {
          if (!!arg && !(arg in this.servicesList)) {
            throw new Error(&#39;插件：&#39; + arg + &#39; 还没有注册&#39;);
          }
          _args[index] = this.servicesList[arg];
        }
      }
    });
    return this.applicationList[this.applicationList.push({
      run: function(callback) {
        if (typeof callback != &#39;function&#39;) {
          callback = function(_opts) { return _opts; }
        }
        return callback(_args[_args.length - 1].apply(null, _args));
      }
    }) - 1];
  }
};
//框架结束

Copy after login

Through servicesRegister, you can register services, such as $http of angularjs;

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

Copy after login

Finally, all registered applications will be automatically executed

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

Copy after login

Try running the code, it will automatically identify the parameter types and execute perfectly.

When $scope is not passed in, the program will automatically create a $scope.

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


var app2 = mqyJs.applicationCreate([{ name: &#39;直接传入SCOPE&#39; }, &#39;$hello&#39;, &#39;$world&#39;, 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);
});

//演示代码 结束

Copy after login

In order to facilitate testing, rewrite the code again and directly copy the following code to the browser console to test

//框架开设
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: &#39;SCOPE没有设置&#39;
    };
    if (!(_args instanceof Array)) {
      _args = [&#39;$scope&#39;, _args];
    }
    if (typeof _args[_args.length - 1] != &#39;function&#39;) {
      throw new Error(&#39;参数中没有指定运行函数&#39;);
    }
    _args.map((arg, index) => {
      if (typeof arg == &#39;string&#39;) {
        if (arg === &#39;$scope&#39;) {
          _args[index] = _opts.scope;
        } else {
          if (!!arg && !(arg in this.servicesList)) {
            throw new Error(&#39;插件：&#39; + arg + &#39; 还没有注册&#39;);
          }
          _args[index] = this.servicesList[arg];
        }
      }
    });
    return this.applicationList[this.applicationList.push({
      run: function(callback) {
        if (typeof callback != &#39;function&#39;) {
          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: &#39;直接传入SCOPE&#39; }, &#39;$hello&#39;, &#39;$world&#39;, 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());
});

Copy after login

The above is the detailed content of Parsing the parameter passing method of angularjs array. For more information, please follow other related articles on the PHP Chinese website!