SoFunction
Updated on 2025-04-04

Detailed explanation of the simple implementation of array parameter transfer method of angularjs

When I was first learning angularjs, I was very curious about the way array parameters are passed (['a', 'b', function(a,b){}]). How did it be implemented? Later, because I was very busy with work, I gradually forgot about this problem.

I was idle today and thought of this problem. The easiest way is to check its source code. Unfortunately, my E-text is not good. Not to mention his design logic, just reading English annotations is enough for me to have a headache. I tried to build a car behind closed doors and finally made it.

Since you build your own car, you have to bring your own name (the first letter of the pinyin of the name), and call it mqyJs. The following is the demo call method:

var app2 = ([{ name: 'Transfer to SCOPE' }, '$hello', '$world', function($scope, $hello, $world) {
  return $ + ": " + $ + $;
}]);

The core part is as follows:

//Framework openingvar mqyJs = {
  //Service Registration  servicesList: {},
  servicesRegister: function(name, value) {
    [name] = value;
  },
  //Application creation  applicationList: [],
  applicationCreate: function(_opts, _args) {
    if (!_args) {
      _args = _opts;
      _opts = {}
    }
    _opts.scope = _opts.scope || {
      name: 'SCOPE is not set'
    };
    if (!(_args instanceof Array)) {
      _args = ['$scope', _args];
    }
    if (typeof _args[_args.length - 1] != 'function') {
      throw new Error('No running function is specified in the parameter');
    }
    _args.map((arg, index) => {
      if (typeof arg == 'string') {
        if (arg === '$scope') {
          _args[index] = _opts.scope;
        } else {
          if (!!arg && !(arg in )) {
            throw new Error('Plugin:' + arg + 'Not registered yet');
          }
          _args[index] = [arg];
        }
      }
    });
    return [({
      run: function(callback) {
        if (typeof callback != 'function') {
          callback = function(_opts) { return _opts; }
        }
        return callback(_args[_args.length - 1].apply(null, _args));
      }
    }) - 1];
  }
};
//The end of the frame

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

//Plugin start('$hello', {
  name: 'Hello'
});
('$world', {
  name: 'world'
});
('$china', {
  name: 'China'
});
//Plugin ends

Finally, all registered applications will be automatically executed

/**
  * The system will run automatically after initialization is completed
  * For example, put it on the web page
  */
(function(app, index) {
  ('Automatic call -> APP #' + index + ' -> ' + ());
});

Try running the code, which can automatically identify the parameter types and execute them perfectly.

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

//Demo code Startvar app = (['$scope', '$hello', '$china', function($scope, $hello, $china) {
  return $ + ": " + $ + $;
}]);


var app2 = ([{ name: 'Transfer to SCOPE' }, '$hello', '$world', function($scope, $hello, $world) {
  return $ + ": " + $ + $;
}]);

 

var app3 = ([{ name: 'world is also passed directly' }, '$hello', { name: 'Earth' }, function($scope, $hello, $world) {
  return $ + ": " + $ + $;
}]);


var app4 = (function($scope) {
  return $;
});

var opts = {
  scope: {
    name: 'Custom SCOPE'
  }
};
var app5 = (opts, function($scope) {
  return $;
});

(function(result) {
  ('Manual call -> RESULT -> ' + result);
});

//Demo Code End

To facilitate testing, write the code again and copy the following code directly to the browser console to test

//Framework openingvar mqyJs = {
  //Service Registration  servicesList: {},
  servicesRegister: function(name, value) {
    [name] = value;
  },
  //Application creation  applicationList: [],
  applicationCreate: function(_opts, _args) {
    if (!_args) {
      _args = _opts;
      _opts = {}
    }
    _opts.scope = _opts.scope || {
      name: 'SCOPE is not set'
    };
    if (!(_args instanceof Array)) {
      _args = ['$scope', _args];
    }
    if (typeof _args[_args.length - 1] != 'function') {
      throw new Error('No running function is specified in the parameter');
    }
    _args.map((arg, index) => {
      if (typeof arg == 'string') {
        if (arg === '$scope') {
          _args[index] = _opts.scope;
        } else {
          if (!!arg && !(arg in )) {
            throw new Error('Plugin:' + arg + 'Not registered yet');
          }
          _args[index] = [arg];
        }
      }
    });
    return [({
      run: function(callback) {
        if (typeof callback != 'function') {
          callback = function(_opts) { return _opts; }
        }
        return callback(_args[_args.length - 1].apply(null, _args));
      }
    }) - 1];
  }
};
//The end of the frame//Plugin start('$hello', {
  name: 'Hello'
});
('$world', {
  name: 'world'
});
('$china', {
  name: 'China'
});
 
var app = (['$scope', '$hello', '$china', function($scope, $hello, $china) {
  return $ + ": " + $ + $;
}]);


var app2 = ([{ name: 'Transfer to SCOPE' }, '$hello', '$world', function($scope, $hello, $world) {
  return $ + ": " + $ + $;
}]);


var app3 = ([{ name: 'world is also passed directly' }, '$hello', { name: 'Earth' }, function($scope, $hello, $world) {
  return $ + ": " + $ + $;
}]);


var app4 = (function($scope) {
  return $;
});

var opts = {
  scope: {
    name: 'Custom SCOPE'
  }
};
var app5 = (opts, function($scope) {
  return $;
});

(function(result) {
  ('Manual call -> RESULT -> ' + result);
});
 
//The end of the plugin(function(app, index) {
  ('Automatic call -> APP #' + index + ' -> ' + ());
});

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.