ionic怎么用js控制配置状态机

JavaScript09

ionic怎么用js控制配置状态机,第1张

(1) 看一遍ionic的文档

Ionic 是一个用HTML, CSS 跟JS 开发的一个用于移动设备的web app 开发框架,采用 Sass与AngularJS 开发。

(2) 看一遍phonegap的文档;目前phonegap又取名为cordova;有些常用的命令总结如下:

项目例子:

ionic:

Create hybrid mobile apps with the web technologies you love.

Free and open source, Ionic offers a library of mobile-optimized HTML,

CSS and JS components, gestures, and tools for building highly interactive apps.

Built with Sass and optimized for AngularJS.

最近在网上看到一个js题目,刚好最近学了Promise和Generator以及async,打算用这些方法实现一下。

题目很简单,如下:

实现每一秒输出数组中的一个数字。

我立马就想到了可以用Generator来实现这个效果,其中async是Generator的语法糖,所以就用async写了。因为Generator虽然是一个状态机,返回一个遍历器对象,但是它很适合用来异步操作。

我这边用async和Promise分别写了四种实现方法,其中第一种和第二种有点类似,但是有一点区别。第三种就是用递归实现,通过在Promise的then函数里再new一个Promise来达到效果。第四种就是普通的递归实现。

第一种:

async function apr(arr){

for(let i=0i<arr.lengthi++)

{

await (new Promise((resolve)=>setTimeout(resolve,1000,arr[i]))).then((value)=>console.log(value))

}

}

ls=[1,2,3]

apr(ls)

第二种:

async function apr(arr){

for(let i=0i<arr.lengthi++)

{

await new Promise((resolve)=>setTimeout(resolve,1000))

console.log(arr[i])

}

}

ls=[1,2,3]

apr(ls)

第三种:

function timeout(i=0) {

if (i<arr.length)

new Promise((resolve) =>{

setTimeout(resolve, 1000,arr[i++])

}).then((value)=>{console.log(value)timeout(i)})

}

arr=[1,2,3]

timeout()

第四种:

function timeout(i=0) {

if (i<arr.length)

setTimeout(()=>{console.log(arr[i++])timeout(i)}, 1000)

}

arr=[1,2,3]

timeout()

index.js

import service from '../service.js'

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {

    /**

     * 是否需要强制登录

     */

    forcedLogin: true,

    hasLogin: false,

    userName: "",

msg: {}

  },

  mutations: {

    login(state, userName) {

      state.userName = userName || '新用户'

      state.hasLogin = true

    },

    logout(state) {

      state.userName = ""

      state.hasLogin = false

service.removeUser()

    },

setmsg(state, msg) {

state.msg = msg

}

  }

})

export default store

———————————————————————————————————————————————————————————————

引入:import {

             mapState,

             mapMutations

          } from 'vuex'

设置值:

              methods: {

                    ...mapMutations(['login', 'setmsg']),

              }

              let userMsg = {

                       user_grade: data.data.user_grade,

                       discount_rate: data.data.discount_rate

              }

  that.setmsg(userMsg)

获取值:

            computed:{

                ...mapState(['forcedLogin', 'hasLogin', 'userName','msg']),

            }

            this.msg(就可以出来了)