7. 服务 -- Highway MVVM

7-1. 内建

7-1-1. $scope

参考2-4. 作用域章节

7-1-2. $timeout

<!-- examples/services/timeout.html --><div>something happend after {{timeout}}s</div>const app = new Highway({  $el: $('#app'),  $scope: {    timeout: 3  },  $mount() {    this.$timeout(() => {      alert('highway');    }, 3000);  }});

7-1-2. $interval

<!-- examples/services/timeout.html --><div>something happend after {{timeout}}s</div>const app = new Highway({  $el: $('#app'),  $scope: {    timeout: 3  },  $mount() {    this.$timeout(() => {      alert('highway');    }, 3000);  }});

7-1-3. $http

复用jQuery/Zepto中的ajax方法

• http：.ajax
• get：.get
• post：.post
• json：.getJSON
• jsonp：.ajaxJSONP
• settings：.ajaxSettings
• settings:jQuery.ajaxSetup/.ajaxSettings

<!-- examples/services/http.html --><ul>  <li hi-repeat="user in users">id: {{user.id}}, name: {{user.name}}</li></ul>const app = new Highway({  $el: $('#app'),  $scope: {},  $mount() {    this.$http({      type: 'get',      url: './users.json',      success: (data, status, xhr) => {        this.$set('users', data.users)      },      error: (xhr, errorType, error) => {        alert('error');      }    })  }});

7.1.4. $event

参阅6-3. 通信

7-2. 自定义

自定义服务是一个工厂函数

7-2-1. 入参

• $ctx: 当前上下文

7-2-2. 出参

可选。如返回，可通过this.$servcies[name]引用

• $mount: 生命周期函数，挂载时调用

• $unmount: 生命周期函数，销毁时调用

  ​

7-2-3. 全局

使用Highway.service定义，需指定宏服务名和服务工厂函数

7-2-4. 局部

指定视图中有效，通过$services指定，需指定宏指令名和宏指令工厂函数

7-2-5. 示例

定义一个cookie读写服务

<!-- examples/services/customized.html --><div id="app">  <button hi-on:click="clickMe">destroy me</button></div>const cookie = function ({$ctx}) {  return $ctx.$cookie = {    $mount() {      console.log('>>> cookie services mounted')    },    $get(key) {      const reg = new RegExp(`(^| )${key}=([^;]*)(;|$)`);      const matches = document.cookie.match(reg);      if(matches) {        return matches[2]      }    },    $set(key, value) {      document.cookie = `${key}=${value}`;    },    $unmount() {      console.log('>>> cookie services unmounted')    },    destroy() {      this.$destory();    }  }};// 全局管道//Highway.service('$cookie', cookie);const app = new Highway({  $el: $('#app'),  $scope: {    ratio: 0.95  },  // 局部管道  $services: {    $cookie: cookie  },  $mount() {    this.$cookie.$set('cookie_0', 'highway');    this.$cookie.$set('cookie_1', 'hello world');    // 可通过$service引用    console.log('cookie_1 value is:' + this.$services['$cookie'].$get('cookie_1'));  },  clickMe() {    this.$destroy();  }});