发表于   |   分类于   |     |   阅读次数

以下分享来自团队童鞋huangmin

redux是在看react时用于管理状态(state)，之前一直发音错了(美[riː’dʌks]) 。

关于redux + react的例子有很多，很多都是结合react来讲，react-redux中的connect, Provider方便了与redux之间的联系。redux深入理解看这

本篇文章中主要提到单纯的去使用和理解redux

阅读全文 »

发表于   |   分类于   |     |   阅读次数

以下分享来自团队童鞋yangjun

  • React是单向数据流，数据主要从父节点通过props传递到子节点。
  • 如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。
  • 通常使用props当做数据源，state用来存放状态值（简单的数据）。
  • 通常用props传递大量数据，state用于存放组件内部一些简单的定义数据。
    阅读全文 »

发表于   |     |   阅读次数

依赖注入是一种软件设计模式，他允许你移除软件组件的硬编码方式，替代的是通过依赖注入制造低耦合的组件不论在编译阶段还是在运行阶段。硬编码就是在程序中将代码写死，低耦合就是尽量让每个模块独立，相关的处理尽量在单个模块中完成。


Angular1有一个内在的注入机制，他可以把你的App分成许多个可重复使用的组件，当需要的时候通过依赖注入把这些自减注入进你的App中去。在需要的地方进行参数传递，这种方法不仅对测试很有用，而且还不会污染全局变量，是很好的设计模式。


Angular1依赖注入的方法

  1. 通过函数的参数进行推断式注入声明

    如果没有明确的声明，Angular1会假定名称就是依赖的名称。因此，它会在内部调用函数对象的toString()方法，分析并提取函数的参数列表，然后通过$injector将这些参数再注入进对象实例。下面是代码示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function myController($scope,$timeout){
    	var updateTime = function(){
    		$scope.clock = {
    			time: new Date()
    		};
    		$timeout(function(){
    			$scope.clock.time = new Date();
    			updateTime();
    		},1000)
    	}
    }
1
2
3
<div ng-controller='myController'>
	<span>{{clock.time | data:'yyyy-MM-dd hh:mm:ss'}}</span>
</div>

创建了一个可以自动更新时间的应用，看看是如何进行依赖注入的。通过设置参数$scope和$timeout，angular1会在内部调用函数的toString()方法，分析并提取函数的参数列表，然后通过$injector将这些参数注入到对象的实例。


注意：

  • 此方法只适合未经压缩混淆的代码，因为angular1需要解析未经压缩混淆的参数列表。

  1. 显式的注入声明

    显式的明确定义一个函数在被调用时需要用到的依赖关系，通过这种方法声明依赖，即使在源代码被压缩，参数名称发生改变的情况下依然可以工作。代码示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var mycontrollerFactory = function mycontroller($scope,$timeout){
    	var updateTime = function () {
            $scope.clock = {
                time: new Date()
            };
            $timeout(function () {
                $scope.clock.time = new Date();
                updateTime();
            }, 1000);
        }
        updateTime();
    }
1
mycontrollerFactory.$inject = ['$scope','$timeout'];

显式的将我们需要的依赖注入到函数中，所以在函数中参数也可以分别换成其他字段。

1
var mycontrollerFactory = function mycontroller(s,t){.....}

注意：

  • 对于这种声明方式，参数的顺序是十分重要的，因为$inject数组元素的顺序必须和注入的参数顺序一一对应。

  1. 行内注入声明

    angular1提供的行内注入方法实际上是一种语法糖，它与前面的提到的通过$inject属性进行声明的原理是一样的，但是允许我们在函数定义的时候从行内将参数传入，这种方法方便简洁，而且避免了在定义的过程中使用临时变量。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    angular.module('app',[])
    .controller('mycontroller',['$scope','$timeout',function($scope,$timeout){
    	var updateTime = function () {
            $scope.clock = {
                time: new Date()
            };
            $timeout(function () {
                $scope.clock.time = new Date();
                updateTime();
            }, 1000);
        }
        updateTime();
    }])

注意：

  • 行内声明的方式允许我们直接传入一个参数数组，而不是一个函数，数组的元素是字符串，他们代表的是可以被注入到对象中的依赖名字，最后一个参数就是依赖注入的目标函数对象本身。

下面来对比一下ng1与ng2的依赖注入的区别，以login组件为例

先来看一下angular2的架构图

providerToservice


Angular1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Login{
    formValue : {login:string,password:string} = {login:'',password:''};
    onSubmit(){
        const service = new LoginService();
        service.login(this.formValue);
    }
}
module.component('login',{
    controller: Login,
    controllerAs ; 'ctrl',
    template:`
        <form ng-submit = "ctrl.onSubmit()">
        Text <input type="text" ng-model="ctrl.formValue.login>
        password  <input type="password" ng-model="ctrl.formValue.password">
        <button>submit</button>
        </form>
    `
})

Angular2

1
2
3
4
5
6
7
8
9
10
11
12
@Component({
    selector:'login',
    template:`
        .....
    `
})
class Login{
    onSubmit(formValue:{login:string,password:string}){
        const service = new LoginService();
        service.login(formValue);
    }
}

在这里直接把login组件绑定在login service上的，很难进行独立测试，也降低了它复用的可能性


with DI

在构造函数里面注射一个LoginService的实例，而不是直接创建

Angular1

1
2
3
4
5
6
7
class Login{
    formValue : {login:string,password:string} = {login:'',password:''};
    constructor(public service:LoginService){}
    onSubmit(){
        this.service.login(this.formValue);
    }
}

我们还需要告诉框架应该创建这个service的实例

1
module.service('login',LoginService);



Angular2

同样，在构造函数里面注射一个LoginSerivce的实例

1
2
3
4
5
6
class Login{
    constructor(public service: LoginService){}
    onSubmit(formValue:{login:string,password:string}){
        this.service.login(formValue);
    }
}
  • 不同于ng1，我们需要将这个service添加到providers列表里面来实现
    1
    2
    3
    4
    5
    6
    @NgModule({
        bootstrap:[Login],
        providers:[LoginService],
        declarations:[Login]
    })
    class AppModule{}

如果注入到它的根模块，则整个应用都可以调用，也可以注入到使用它的组件元数据里面,只需在装饰器加上一个providers配置项,这样注入的服务只对自己和后代可用

1
2
3
4
5
@Component({
    selector:'lr',
    providers:[LoginService]
})
class APPLr{}

注意：

  • ng1依赖于字符串来配置DI，而ng2则默认使用注解的方式

    ng1里面有好几个Api可以用来给指令注入依赖，有些是根据名称注入的（LoginService）,有些依赖会一直自动提供（link函数里面的），有些需要使用require进行配置


    ng2提供了统一的Api用来注入服务，指令等，所有这些内容都会被注入到组件的构造函数里面

    总结

  • DI是ng的核心机制之一
  • 他可以使你的代码更加松耦合
  • 提升了可测试性
  • ng2采用了统一的Api来给组件注入依赖

发表于   |   分类于   |     |   阅读次数

以下分享来自团队女童鞋yerr

三个状态

1.Mounted

React components被render解析生成对应的DOM节点，并在插入浏览器的DOM结构的一个过程；

getInitialState ：初始化state
getDefaultProps : 初始化props

阅读全文 »

发表于   |   分类于   |     |   阅读次数
  • Directive(指令)
  • Controller(控制器)
  • Service(服务)
    以上为angular1的核心概念，我们究竟什么以什么样的方式去使用它们。

    Service

    Service是单例对象，会经常被传来传去，但是可以保证每次访问的都是同一个实例。所以很多Controler和Directive可以访问它内部的数值，所以它是一个存放数据，实现数据共享的好地方;


    首先创建一个module,

    1
    var module = angular.module('myModule,[]');



下一步，创建一个服务，用来管理图书的BookService;

1
2
3
4
5
6
7
8
9
10
11
12
13
module.factory('BookService',['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.updata');
		}
	}
	return service;
}])

这里很好理解，一个对象里面有我要存放的书的集合，还有一个添加图书的方法，这个方法还会在应用上广播一个事件，告诉所有使用我们的服务的人，存放书的集合已经更新了，接下来就是要使用它的东西需要接收这个广播了。



1
2
3
4
5
6
7
module.controller('books.list',['$scope','BookService',function($scope,BookServie){
	$scope.$on('books.updata',function(event){
		$scope.books = BookService.books;
		$scope.$apply();
	});
	$scope.books = BookService.books;
}])

这里就是将前面创建的BookService中存放的books赋值给了controller内部的scope对象。如果我们在controller上创建一个数组，其他地方也要处理书籍的信息，通过scope来维护数据会很麻烦，scope很容易变得混乱不堪，通过一种集中的途径进行数据的管理，更容易理解也可以使代码模块化。所以当需要在不同的地方共享数据的时候，就要依靠服务了，谁要用就注入到谁那里，就这么容易。


形容服务有一个例子特别的形象，A团A连和B团B连去执行任务，

A团A连发现敌情，要报告给B团B连，军队里只有服从上级，所以他只能报告给A团A营，在一直向上报告直到A、B共同的长官C旅，C旅在下发给B团，直到B连，要是有个特殊情况，相信这时候B连已经死光了，所以才有了通信部门的存在，而这里的通信部门也就是angular中的服务。

Controller

Controller应该纯粹的把Service，依赖关系，以及其他对象串连在一起，通过scope关联到view上。Dom操作的部分最好把它放入指令里面;


Directive

应用中最复杂的部分应该在指令中，下面来扩展前面的例子，提供一个按钮，通过这个按钮向服务里面添加一本书。

1
2
3
4
5
6
7
8
9
10
11
module.directive('addBookButton',['BookService',function(BookService){
	return {
		restrict:'EA',
		replace:true,
		link:function(scope,ele,attrs){
			ele.bind('click',function(){
				BookService.addbook({ title: "Star Wars", author: "George Lucas" });
			})
		}
	}
}])

创建了一个指令，目的是向books集合里面添加一本书，books已经注册在服务中，所以可以直接注入服务进行使用。下面将指令应用到视图中

1
<button add-book-button>Add Book</button>


每当点击按钮的时候都会添加那本书，如果将控制器上面添加一个addBook方法呢，

1
2
3
$scope.addBook = function(){
	 BookService.addBook( { title: "Star Wars", author: "George Lucas" } );
}

可以得到同样的结果，但是如果需要复用的话，只能copy这段代码，但是通过指令的方式，就会很方便了