你早就毁了JavaScript

  以前

  过去我们在页面上用很时尚的方式写了一些确实很可怕的代码,它给我们带来了巨大的麻烦。可能很多人现在还在这样做,但他们不会看这篇博文,我们可以假装他们不存在。

  JS的伟大/了不起/让人惊讶的地方在于没有人想走近它,而且在那些有组织的大型企业中,他们只想呆在他们自己的小世界里,由各种抽象层和XML注入的框架中。

  这对于像我这样想要靠这些企业养活,但却不想忍受那由N多层次组成的可怕的“最佳实践”(而且他们会由于担心性能问题不想让非DBA的人动数据库)来说,这非常棒。

  更好的是,当这些性能问题出现时,通过写一段前端JS代码,我们可以转危为安。我们可以假装这些性能问题不存在,尽管后台代码很烂但能给用户一个好的体验。

详解Angular中的自定义服务Service、Provider以及Factory,angularprovider

背景来源于前段时间的一场面试,面试官看着我Angular控制器中添加各种功能重复的方法,脸都发绿了,不过还是耐心地跟我指出提高Angular代码复用性需要Service、Provider和Factory三种复用性很高的方法,遂习之,以下是我的学习成果:

先说说Factory:

通过注册.factory(‘my注册名’,方法()),返回一个对象,你就能在控制器中引入这个方法并访问这个对象:
例子:

<!-- factory模式 -->
  <div ng-controller="theFactoryCtrl">
    <h3>Factory模式</h3>
    <ul>
      <li ng-repeat="i in names">
        {{i}}
      </li>
    </ul>

  </div>

JS代码:

/*工厂模式,注入参数中调用的是这个函数里的返回值*/
  app.factory("myFactory",function(){

    var args = arguments;
    var obj = {}

    obj.exec = function(){
      var arr = [];
      for(let i = 0; i<arguments.length; i++){
        arr.push(arguments[i]);
      }
      return arr;
    }
    return obj;
  })
app.controller("theFactoryCtrl",function ($scope,myFactory) {

    $scope.names = myFactory.exec("张三的歌","赵四的舞","老王贼六");

  })

效果:

图片 1

Service:

在service使用构造函数的方法去用它,在控制器中是以new的方式引入,所以可以调用service中定义的属性

HTML:

<!-- service模式 -->
  <div ng-controller="theServiceCtrl">
    <h3>Service模式</h3>
    <p>prop:{{prop}}</p>
    <p>num:{{num}}</p>
  </div>

JS:

app.controller("theServiceCtrl",function($scope,myService){
    $scope.prop = myService.prop("呵呵");
    $scope.num = myService.num;
  })
/*Service是new出来的,所以可以直接调用里面的属性*/
  app.service("myService",function(){
    this.num = Math.floor(Math.random()*10);//0到10的随机数
    this.prop = function(arg){
      return arg;
    };
  })

效果:

图片 2

Provider:

如果你想在创建服务之前先对服务进行配置,那么你需要provider,因为provider可以通过定义config,并在$get中访问config
HTML:

<!-- provider模式 -->
  <div ng-controller="theProviderCtrl">
    <h3>Provider模式</h3>
    <p>姓名:{{info.name}}</p>
    <p>部队:{{info.squad}}</p>
    <p>职务:{{info.role}}</p>
  </div>

JS:

/*使用$get方法关联对应的config*/
  app.provider("myProvider",function(){

    this.$get = function(){

      return {
        name : "朱子明",
        squad : "八路军386旅独立团",
        role : this.roleSet

      }
    }

  })
  /*名字必须符合规范:xxxxxxProvider*/
  app.config(function(myProviderProvider){
    myProviderProvider.roleSet = "保卫干事"
  })
app.controller("theProviderCtrl",function($scope,myProvider){
    $scope.info = {
      name : myProvider.name,
      squad : myProvider.squad,
      role : myProvider.role

    }
  })

效果:

图片 3

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

背景来源于前段时间的一场面试,面试官看着我Angular控制器中添加各种功能…

  JS已经发展到顶峰

  当jQuery出现,这是更好的事。它能将可重复使用的jQuery插件紧密地连接在一起。当NPM面世,我们开始用一种半自动的模块系统来管理这些自包含的小部件,我们最终到达JS的顶峰了。

  由于这些小模块及其组合都是有独立功能和小部件,我设想着一个我能用良好的代码库,和出色的优秀的UI团队一起工作的未来。也许我们能从这些企业级的Bean,
Orm,各种抽象工厂、方法、模式中,慢慢地夺回代码库的控制权。

  我们有一些更有意义的事情需要做,写优秀的代码和构建优秀的框架,并能使我们从繁重的企业框架中解脱出去。

  你毁了它

  现在,我依然在用JS,但最近我主要还是在用Erlang,创建视频流/编码系统等等,现在我还没有把他们写成博客,但基本上我的后台很性感,我的前台也很性感(facebook的React+NPM填补了空白)。我在Stackoverflow上发现的一些东西,让所有以前苦难日子又重现了,让我惊恐的是,它像性病一样在前端传播,链接在这:

  Angular.js: Server vs Provider vs Factory?

  好吧,还不算太糟,但让我们来看看投票率最高的答案(好吧,本文发表时就已经不是了)同时观察下它,很显然还是有一些非常满意的用户的:

噢!多谢详细的讲解。你把它变得很容易,让人易于理解。好样的!!

  如果我善良的话,我会说这个评论是讽刺的,且整件事就是”Pow
法则”很好的一个例子,但看完整个评论我觉得事情并不是这样的,我没有为此皱眉。

  因此,我们看到的第一件事是奇怪的Angular文档的引证,如下面这样:

Angular“服务”是由“服务工厂”创建的一个单例对象。这些服务工厂是函数,反过来,他们也是由“服务提供者”创建的。“这些服务提供者是构造函数”。当实例化时,他们必须包含一个叫$get的属性,它是服务工厂函数的关键。

  这TM到底是干什么玩竟儿?我是这样理解的“为了写了Hello World程序,你必须首先创建一个hello world服务来创建hello world工厂来创建hello world应用,这样你就可以在屏幕上输出hello world了”。

什么??我是在读论文吗?这玩意儿真让人凌乱。

  不,你不是在阅读论文,显然你在阅读angular文档。

  如果这是一篇论文,那么它会试着陈述一些问题的解决方案,而不是给编造出来的问题编造答案(实际上,这不太正确,因为学者们都活在他们的世界里)。

  可能大多数创建Angular的情景都是编造的,因为这是我们竟会在前面需要所有这些工厂,代理,服务的唯一原因。这些我们将要使用的代码和说明都来自于幻境,且让人难以相信,这居然不是一个玩笑。

服务,工厂,提供者可以是相同的。

  什么?这当然不可以,他们仅仅只是有返回值的函数,让我们继续跟随这疯狂的文档来看看它会发展成什么样。

  作为前提,我们得到了一个“汽车实例化”的例子。

通过服务(单例的),你不能实现它,因为不允许被实例化。

  为了证明提供者的存在,因为

要实例化,你需要工厂(Factory)或提供者(provider)。

  不!天哪,这什么玩意儿。

var car = new Car({ cylinders: 4 })

  奇怪的“new”关键词。我们在企业级应用中一直在重复这个参数,看到它又出来了,这真的羞辱了我。

Provider能帮你配置应用程序

  当然,如果我们需要配置应用程序时,我们可以通过(Provider)配置。但我们怎么配置那些配置应用程序的配置程序呢?

  我喜欢下面的代码,它几乎在重复它自己。它甚至不需要评注就就已经很搞笑了。

app.service('CarService', function () {
    this.dealer = "Bad";
    this.numCylinder = 4;
});
 
app.factory('CarFactory', function () {
    return function (numCylinder) {
        this.dealer = "Bad";
        this.numCylinder = numCylinder
    };
});
 
app.provider('CarProvider', function () {
    this.dealerName = 'Bad';
    this.$get = function () {
        return function (numCylinder) {
            this.numCylinder = numCylinder;
            this.dealer = this.dealerName;
        }
    };
    this.setDealerName = function (str) {
        this.dealerName = str;
    }
});

  为了配置它,我们要做的就是

app.config(function (CarProviderProvider) {
    CarProviderProvider.setDealerName('Good');
});

  Hey,这只是一个配置而已——不需要改变任何代码!!

  我宁愿写一段相同的原生JS来充实自己,上面的例子简直让我想找个地洞钻,拿头撞墙。

  这儿有个小窍门。如果你发现你自己也问同样的问题。如果你发现自己问一个像这样答案的问题,然后此类问题会被问道你已经做错了。

  做错这个本来没有什么羞耻的,这没问题——我们都会犯错,但是给出当前这个扯淡的轨迹,我们已经远离我们之前的想法了,我们会成为Angular的顾问,且给我们的学生去上Angular昂贵的培训班。很好——你爱上它了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注