❶ angularjs的服务是单例对象是什么意思
服务的本质是一个单例对象,既然是一个js对象,那么它肯定有属性和方法。
当我们把服务注入到控制器中时,我们就可以调用服务,也就是一个js对象的属性和方法了。
这样理解起来是不是很简单,所谓地调用一个服务,其实就是使用一个js对象的属性或方法。
最常见的注册服务的方法是factory()方法。
factory(name,function(){
return{
};
})
它包含两个参数:
1、name
2、一个函数
name是用来注册这个服务的名称,function中会返回一个对象或者函数。这点是不是和我们指令的注册方法十分相似呢,
是的他们都是用一个name来注册一个指令或者是服务的名称。然后用function返回一个对象。
其实,说白了就是用一个name来表示一个js对象。
然后指令调用指令这个js这个对象的时候,用的是html中的标签来调用。而调用服务这个js对象时,是在controller中用服务的名字来实现服务的调用。
我们来看一个controller中调用service的例子:
.controller("myController",function($scope,myService){
$scope.name = "kobe";
$scope.age = 39;
alert(myService.serviceName);
myService.serviceMethod();
})
.factory("myService", function(){
return{
serviceName:"testService",
serviceMethod:function()
❷ 何时应该使用Directive,Controller,Service
AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉。(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有:
Directive(指令)
Controller(控制器)
Service (服务)
下面我们逐个来看这些概念,研究一下为什么它们会像当初设计的那样强大,同时研究一下为什么我们要以那样的方式去使用它们。我们从Service开始。
SERVICES(服务)
如果你已经使用过AngularJS,你可能已经遇到过Service这个概念了,简而言之,Service就是【单例对象】在AngluarJS 中的一个别名。这些小东西(指单例对象)会被经常传来传去,保证你每次访问到的都是同一个实例,这一点和工厂模式不同。基于这种思想,单例对象让我们可以 实现一些相当酷的功能,它可以让很多controller和directive访问内部的数值。在#angularjs 频道(译者注:指的是原作者自己的博客频道)里面这也是非常常见的问题之一,那就是在应用中的不同代码块之间如何共享数据?我们来看这个问题。
我们首先来创建一个mole(模块),本文中的所有代码都会用到这个mole。
var mole = angular.mole( "my.new.mole",
下一步,我们来创建一个新的service(服务)。假设我们上面的这个mole是用来管理图书的。所以,这里我们来创建一个Book service,然后把一个JSON对象数组添加到这个serice中,这些对象代表很多book数据。
mole.service( 'Book', [ '$rootScope', function( $rootScope ) {
var service = {
books: [
{ title: "Magician", author: "Raymond E. Feist" },
{ title: "The Hobbit", author: "J.R.R Tolkien" }
],
addBook: function ( book ) {
service.books.push( book );
$rootScope.$broadcast( 'books.update' );
}
}
return service;
}]);
这是一个非常简单的service(有时候这样就够你用了)。我们这里正在做的事情就是在管理一个book 数组,同时还带有一个addBook方法,在有需要的时候可以添加更多书籍。addBook方法还会在application上广播一个事件,告诉所有正 在使用我们的service的人,数组已经被更新了,从而让它们自己也做一些刷新操作。现在,我们要做的就是把这个service传递给各种 controller、directive、filter,或者其它任何需要它的东西---然后它们就可以访问service中的这些方法和属性了。好, 我们来动手。
var ctrl = [ '$scope', 'Book', function( scope, Book ) {
scope.$on( 'books.update', function( event ) {
scope.books = Book.books;
scope.$apply();//注意,原文这里少了这一行
});
scope.books = Book.books;
}];
mole.controller( "books.list", ctrl );
同样非常简单。我们上面所做的就是为我们的mole创建了一个新的controller。在创建的时候把$scope provdier和我们自己的Book service传递给了它。能明白我们在干嘛吗?我们把前面创建的Book service中的books数组赋给了controller内部的局部scope对象。
好,这里的核心问题是什么呢?我们节省了一些时间,并且在controller上创建了一个数组。对---我们确实这样做了。这样做确实也为我们节 约了一点时间---但是如果我们要在其它地方处理这些书籍信息应该怎么办呢?通过scope来维护数据是非常粗暴的一种方式。由于其它 controller、directive、model的影响,scope很容易就会崩溃或者变脏。它很快就会变成一团乱麻。通过一种集中的途径(在这里 就是service)来管理所有书籍数据,然后通过某种方式来请求修改它,这样不仅仅会更加清晰---同时当应用的体积不断增大的时候也更加容易管理。最 后,它还可以让你的代码保持模块化(这也是Angular很擅长的一件事情)。一旦你在其它项目中需要用到这个service,你没有必要在scope、 controller、filter等等东西里面到处去查找相关的代码,因为所有东西都在service里面!
好。那么我们什么时候应该使用service呢?答案是:无论何时,当我们需要在不同的域中共享数据的时候。另外,多亏了Angular的依赖注入系统,实现这一点是很容易并且很清晰的。
CONTROLLERS(控制器)
我们再来看控制器!除非你曾经使用过前端MVC,否则从服务端MVC的思维模式转向客户端MVC的思维模式就如同一次脑筋急转弯。为什么会这样呢? 这是因为,虽然在前端开发中controller实现了非常类似的功能,但是它同时还会实现一些与服务端controller非常不同的功能。在 Angular中,controller自身并不会处理"request",除非它是用来处理路由(route)的(很多人把这种方式叫做创建route controller---路由控制器),更明确地说,尤其是你的应用里面那些作为界面的一部分的controller,它们只会管理非常小的一段代码。
controller应该纯粹地用来把service、依赖关系、以及其它对象串联到一起,然后通过scope把它们关联到view上。如果在你的 视图里面需要处理复杂的业务逻辑,那么把它们放到controller里面也是一个非常不错的选择。回到我们前面的这个books例子,我实际上并没有什 么东西需要添加到controller里面。
但是Kirk(译者注:指本文原作者),如果我要add一本书籍应该怎么办呢?我应该在controller上面新增一个方法来处理这件事情吗? 不,原因在下面解释。因为它是DOM交互/操作的一部分。所以请把它放到directive(指令)里面。怎么做呢?很高兴你能问出这个问题。
DIRECTIVES(指令)
到目前为止,在我们所编写的大量AngularJS应用中,应用中最主要的复杂部分都在directive(指令)中。有一个强大的工具可以用来操 作和修改DOM,它也是我们这里需要讨论的内容。我们来提供一个按钮,用户通过它可以向service里面添加一本图书,以这一功能来结束此文。
一个常见的反模式(按照本人愚见)是在controller里面添加DOM交互代码。Angular对directive的定义是一段代码片段,你 可以用它来操作DOM,但是我觉得directive也是进行用户交互的很好选择。我们来扩展前面的例子,为用户提供一个按钮,通过这个按钮可以向 service里面添加一本书籍。
mole.directive( "addBookButton", [ 'Book', function( Book ) {
return {
restrict: "A",
link: function( scope, element, attrs ) {
element.bind( "click", function() {
Book.addBook( { title: "Star Wars", author: "George Lucas" } );
});
}
}
}]);
很简单的东西。我们创建了一个指令,它的核心目的是简单地向books列表中添加一本书籍,books已经注册在了我们的Book服务中。我们来把这个指令应用到我们的视图中。
<button add-book-button>Add book</button>
如你所见,我们仅仅把指令当作一个元素属性来使用。每次点击这个按钮的时候,它都会把《Star Wars》(《星球大战》)这本书添加到我们的Book service中去。简单、轻松、模块化---并且易复用。好了,我们为什么不直接在控制器上面添加一个addBook之类的方法呢,比如说就像下面这 样:
$scope.addBook = function() {
Book.addBook( { title: "Star Wars", author: "George Lucas" } );
};
这样我们也能获得同样的结果,是的,确实如此---但是这样做会带来一个重大的问题。一旦我需要在其它地方添加书籍,我必须拷贝这份代码(非 常un-DRY!)(译者注:DRY---Dont Repeat Yourself,貌似是Ruby所倡导的一个重要的编码原则。),或者进行重构(重构本身并不是什么不好的的事情)。通过直接构建一个指令的方式,我们 以后就没有必要担心这种事情了---同时下次再需要实现相同功能的时候完全不需要花任何时间。通过构建指令的方式来进行DOM交互和修改,随着业务需求的 不断介入,我们就可以立即腾出手来处理复杂性不断增加的应用了。这是相当不错的一件事情,因为它保证了我们可以更少地和自己的实现打架,并且可以一直编写 DRYer code。
Angular的模块依赖哲学无疑让它成为了一款非同凡响的框架。它让我们能够以这样一种方式来编写我们的前端代码:我们不会干翻自己,也不会干翻框架---这可能是它最强大的力量。
❸ javascript中如何实现单例模式
(function(){//自运行函数,初始化一些必要内容(也可叫封包)
varobj=null;//定义一个变量,保存实例对象
window.getObject=function(){//初始化外部接口好调用这个实例
if(obj===null){//如果实例为空就new一个实例并保存到obj
obj=new(function(){
varrows=0;
this.getRows=function(){
returnrows;
}
this.setRows=function(value){
rows=value;
}
})();
}
returnobj;//最后返回该实例
}
})();
调用如下:
getObject()
得到的对象有getRows和setRows两个函数
可以先调用setRows更改该属性值来判读多次调用getObject得到的是不是同一对象
❹ 怎么在angularjs的config中使用service
Angular中有几种不同类型的services。每一种都有自己的独特用法。
需要记住的非常重要的一点是service总是一个单体,无论是哪种类型的service。
注释:单体是一种设计模式,它限制了每一个类仅能够实例化为一个对象。无论我们在什么地方注入我们的service,将永远使用同一个实例。
例子:
app.constant('fooConfig',{
config1: true,
config2: "Default config2" });
Constant是一个非常有用的service,它经常被用来在指令中提供默认配置。因此如果你正在创建一个指令,并且你想要在给指令传递可选参数的同时进行一个默认配置,一个Constant就是一个好办法。
作为一个constant,我们放入其中的值将不会改变。Contant service 基本上回事一个基本类型的值或者是一个对象。
例子:
app.value('fooConfig',{
config1: true,
config2: "Default config2 but it can change" });
一个value service有点像是一个constant但是它是可以被改变的。它也经常被用在一个指令上面,来进行配置。一个value service有点像是一个factory service的缩小版,它经常用来保存值但是我们不能在其中对值进行计算。
我们可以使用angular对象的extend方法来改变一个value service:
app = angular.mole("app", []);
app.controller('MainCtrl', function($scope, fooConfig) { $scope.fooConfig = fooConfig;
angular.extend(fooConfig, {config3: "I have been extended"});
});
app.value('fooConfig', {
config1: true,
config2: "Default config2 but it can changes" });
例子:
app.factory('foo', function() { var thisIsPrivate = "Private"; function getPrivate() { return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
});
// or..
app.factory('bar', function(a) { return a * 2;
});
Factory service是最普遍使用的service。它同样也非常容易理解。
一个Factory是一个能够返回任何数据类型的service。对于你如何创建它并没有什么可选项,你仅仅需要在其中返回一些东西即可。
正如前面所说的,所有的service类型都是单体,因此如果我们在一个地方修改了foo.variable,其他的地方也会相应的发生改变。
例子:
app.service('foo', function() { var thisIsPrivate = "Private"; this.variable = "This is public"; this.getPrivate = function() { return thisIsPrivate;
};
});
Service service 和factory差不多。它们之间的区别在于service会接收一个构造器,因此当你第一次使用它的时候,它将会自动运行newFoo()来实例化一个对象。一定要记住如果你在其他的地方也使用了这个service,它将返回同一个对象。
事实上,上面的代码和下面的代码等价:
app.factory('foo2', function() { return new Foobar();
}); function Foobar() { var thisIsPrivate = "Private"; this.variable = "This is public"; this.getPrivate = function() { return thisIsPrivate;
};
}
Foobar是一个类,我们在首次使用它的时候在我们的factory中将它实例化然后将它返回。和service一样,Foobar将只会实例化一次然后下次当我们再次使用factory时它将返回同一个实例。
如果我们已经有了一个类,并且我们想将它用在service中,我们只需要编写如下的代码:
app.service('foo3',Foobar);
Provider是factory的加强版。事实上,上一个例子中的factory代码等价于下面的provider代码:
app.provider('foo', function() { return { $get: function() { var thisIsPrivate = "Private"; function getPrivate() { return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
}
};
});
一个provider中应当由一个$get函数,其中的内容就是我们想要注入我们应用中的部分,因此当我们将foo注入一个控制器时,我们实际上注入的是$get函数。
既然factory如此简单,那我们为什么还要使用provider呢?因为我们可以在config阶段配置一个provider。因此我们可以编写下面的代码:
app.provider('foo', function() { var thisIsPrivate = "Private"; return {
setPrivate: function(newVal) { thisIsPrivate = newVal;
}, $get: function() { function getPrivate() { return thisIsPrivate;
} return {
variable: "This is public",
getPrivate: getPrivate
};
}
};
});
app.config(function(fooProvider) { fooProvider.setPrivate('New value from config');
});
在这里我们将thisIsPrivate移到了我们的$get函数的外面,然后我们创建了一个setPrivate来在一个config函数中修改thisIsPrivate。为什么我们需要这样做?这难道不比在factory中添加setter要容易吗?除此之外,还有另外一个原因。
我们想要注入一个特定的对象但是我们想要提供一种方式来根据我们的需求进行一些配置。例如:一个service包含了一个使用jsonp的资源,我们想要配置具体使用的URL,或者我们想要使用一个第三方的service比如restangular来允许我们根据我们的需求来进行配置。
要注意到我们在config函数中放入的是nameProvider而不是name。在这里,我们实际上还是对name进行配置。
看到这里我们其实已经意识到了我们已经在应用中进行过一些配置了,像是$routeProvider以及$locationProvider,两者分别用来配置我们的路由了html5模式。
那么现在已经决定要使用前面的 foo service,但是其中还是缺少一个你想要的greet函数。你可以修改factory吗?答案是不行!但是你可以装饰它:
app.config(function($provide){ $provide.decorator('foo',function($delegate){ $delegate.greet = function(){ return "Hello, I am a new function of 'foo'";
}
});
});
$provide是Angular用来在内部创建我们的service的东西。如果我们想要使用它的话可以手动来使用它或者仅仅使用在我们的模块中提供的函数(我们需要使用$provide来进行装饰)。$provide有一个函数,decorator,它让我们可以装饰我们的service。它接收我们想要装饰的service的名字并且在回调函数中接收一个$delegate来代表我们实际上的service实例。
在这里我们可以做一切我们想要的事情来装饰我们的service。在上面的例子中,我们为我们原来的service添加了一个greet函数。接着我们返回了修改后的service。
经过修改以后,现在我们的factory中已经有了一个叫做greet的函数。
装饰一个service的能力是非常实用的,尤其是当我们想要使用第三方的service时,此时我们不需要将代码复制到我们的项目中,而只需要进行一些修改即可。
注意:constant service不能被装饰。
我们的services都是单体但是我们可以创建一个单体factory来创建新的实例。在你深入之前,记住Angular中的服务都是单体并且我们不想改变这一点。但是,在极少数的情况下你需要生成一个新的实例,你可以像下面这样做:
function Person(json){ angular.extend(this,json);
}
Person.prototype = {
update: function(){ this.name = "Dave"; this.country = "Canada";
}
};
Person.getById = function(id){ return new Person({
name: "Jesus",
country: "Spain" });
};
app.factory('personService',function(){ return {
getById: Person.getById
};
});
在这里我们创建了一个Person对象,它接收一些json数据来初始化对象。然后我们在我们的原型(原型中的函数可以被Person的实例所用)中创建了一个函数,并且在Person上直接创建了一个函数(就像是类函数一样)。
因此现在我们拥有了一个类函数,它将基于我们提供的id来创建一个新的Person对象,并且每一个对象都可以自我更新。现在我们仅仅需要创建一个能够使用它的service。
当每次我们调用personService.getById时,我们都在创建一个新的Person对象,因此你可以在不同的控制器中使用这个service,即便当factory是一个单体,它也能生成新的对象。
Service是Angular中最酷的特性之一。我们可以使用很多方法来创造它们,我们仅仅需要找到符合我们需求的方法然后实现它。
❺ JS单例模式
在面向对象语言中,调用一个类的方法之前,必须先将瞎铅毕这个类实例化,才能调用类磨芹方法。
单例模式能使得我们不需要每次都需要实例化一次,因为我们使用的对象都是同一个对象。
单例模式:只允许实例化一次的对象类。
Leader返回一个包含getInstance方法的对象,执行这个方法可以获得_mole的实例。
eader_01与leader_02完全相等,说明它们是同一个对象,并不是通过new新获取的对象。
但是在多页面情况下,通过import引入的并不是单例模式,因为激谈
模态框弹窗的时候,不希望有两个弹窗