Alt.js的入門

1、什麼是Alt

altJS是基於Flux使用Javascript應用來管理數據的類庫，它簡化了flux的store、actions、dispatcher。

關於Flux，如下連接都作了很好的詮釋

http://news.cnblogs.com/n/208305/

http://www.cnblogs.com/linerz/p/react-flux-example-todomvc-analysis.html

2、還須要瞭解

React, CommonJS, ES5 Javascript, 至於ES6，本文采用ES5作例，有興趣的朋友能夠轉成ES6，關於ES6瀏覽器兼容問題，還要下載babel進行轉換。

3、安裝

alt是基於Note.js開發的，因此安裝前須要安裝note.js

使用npm安裝alt：npm install alt 

4、Alt的基本結構

項目結構

|--actions/

|  |--MyActions.js

|--stores/

|  |--MyStore.js

|--components/

|  |--MyComponent.jsx

|--alt.js

|--app.js

6、建立alt

var Alt = require(‘alt’);

var flux = new Alt();

module.exports = flux;

 

7、建立Actions

alt 經過自定義的方法進行actions的建立createActions

var flux = require(‘…/flux’);

module.exports = flux.createActions({

     GetData:function(input){

           /*
　　　　　　　　webapi get 獲取數據data
　　　　　　*/

           this.dispatch(data); 

　　　},

　　　GetDetail: function(id){

      　　/*獲取單條數據*/

       　　this.dispatch(data);

　　  }

});

8、建立Store

var flux = require(‘…/flux’);

var MyActions= require(‘../actions/MyActions’);

var MyStore =  flux.createStore({

              bindListeners:{
                　　Handledata: MyActions.GetData,
      　　　　　　　  HandleDetail:MyActions.GetDetail
　　　　　　　　},

　　　　　　　　Handledata:function (data){
                this.setState({datas: data});

　　　　　　　　},
　　　　　　　　HandleDetail:function(data){
　　　　　　　　　　this.setState({data:data});
　　　　　　　　}
},’MyStore’);

module.exports = MyStore;

9、在View中使用MyComponent.jsx

var React = require(‘react’);

var MyStore = require(‘../Stores/MyStore’);

var MyAction = require(‘../Stores/MyAction’);

var MyComponent = React.createClass({

       getInitialState:function(){

           return MyStore.getState();

　　　　},

　　　　getDetail: function(data,e){

                var id = data.Id;

                MyAction.GetDetail (id);

　　　　},

　　　　componentDidMount: function(){

                MyStore.listen(this.onChange);

　　　　},

　　　　componentWillMount: function(){

                MyStore.unlisten(this.onChange);

　　　　},

　　　　onChange: function(state){
                this.setState(state);

　　　　},

　　　　render: function(){

                return(

　　　　　　　　　　　　<ul>
　　
　　　　　　　　　　　　　　{this.state.datas.map(function(data){
　　　　　　　　　　　　　　　　Return (

　　　　　　　　　　　　　　　　　　<li onClick={this.getDetail.bind(null,data)}>{data.name}</li>);

　　　　　　　　　　　　　　})}

                     </ul>

　　　　　　　　　);

　　　　}

});

module.exports = MyComponent;