Ember服务基础 #

ember generate service session
ember generate service theme
ember generate service api

// app/services/session.js
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class SessionService extends Service {
  @tracked isAuthenticated = false;
  @tracked currentUser = null;

  login(user) {
    this.isAuthenticated = true;
    this.currentUser = user;
  }

  logout() {
    this.isAuthenticated = false;
    this.currentUser = null;
  }
}

// app/components/user-menu.js
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class UserMenuComponent extends Component {
  @service session;

  @action
  logout() {
    this.session.logout();
  }
}

{{! app/components/user-menu.hbs}}
{{#if this.session.isAuthenticated}}
  <p>欢迎，{{this.session.currentUser.name}}</p>
  <button {{on "click" this.logout}}>退出</button>
{{else}}
  <LinkTo @route="login">登录</LinkTo>
{{/if}}

// app/routes/admin.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class AdminRoute extends Route {
  @service session;
  @service router;

  beforeModel(transition) {
    if (!this.session.isAuthenticated) {
      this.router.transitionTo('login');
    }
  }
}

// app/controllers/posts.js
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class PostsController extends Controller {
  @service store;
  @service session;

  @tracked posts = [];

  @action
  async loadPosts() {
    this.posts = await this.store.findAll('post');
  }
}

// app/services/api.js
import Service from '@ember/service';
import { inject as service } from '@ember/service';

export default class ApiService extends Service {
  @service session;

  async request(url, options = {}) {
    const headers = {
      'Content-Type': 'application/json',
      ...options.headers,
    };

    if (this.session.isAuthenticated) {
      headers.Authorization = `Bearer ${this.session.token}`;
    }

    const response = await fetch(url, {
      ...options,
      headers,
    });

    return response.json();
  }
}

import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class ThemeService extends Service {
  @tracked current = 'light';

  get isDark() {
    return this.current === 'dark';
  }

  toggle() {
    this.current = this.isDark ? 'light' : 'dark';
  }
}

import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class CartService extends Service {
  @tracked items = [];

  get total() {
    return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  }

  get itemCount() {
    return this.items.reduce((sum, item) => sum + item.quantity, 0);
  }

  get isEmpty() {
    return this.items.length === 0;
  }
}

import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class NotificationService extends Service {
  @tracked notifications = [];

  add(message, type = 'info') {
    const notification = {
      id: Date.now(),
      message,
      type,
      timestamp: new Date(),
    };

    this.notifications = [...this.notifications, notification];

    return notification;
  }

  remove(id) {
    this.notifications = this.notifications.filter((n) => n.id !== id);
  }

  clear() {
    this.notifications = [];
  }

  success(message) {
    return this.add(message, 'success');
  }

  error(message) {
    return this.add(message, 'error');
  }

  warning(message) {
    return this.add(message, 'warning');
  }
}

import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class AuthService extends Service {
  @tracked isAuthenticated = false;
  @tracked currentUser = null;
  @tracked isLoading = false;

  async login(email, password) {
    this.isLoading = true;

    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password }),
      });

      if (!response.ok) {
        throw new Error('登录失败');
      }

      const user = await response.json();
      this.currentUser = user;
      this.isAuthenticated = true;

      return user;
    } finally {
      this.isLoading = false;
    }
  }

  async logout() {
    await fetch('/api/logout', { method: 'POST' });
    this.currentUser = null;
    this.isAuthenticated = false;
  }
}

import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class StorageService extends Service {
  @tracked data = {};

  constructor() {
    super(...arguments);
    this.loadFromStorage();
  }

  loadFromStorage() {
    const stored = localStorage.getItem('app_data');
    if (stored) {
      this.data = JSON.parse(stored);
    }
  }

  saveToStorage() {
    localStorage.setItem('app_data', JSON.stringify(this.data));
  }

  set(key, value) {
    this.data = { ...this.data, [key]: value };
    this.saveToStorage();
  }

  get(key) {
    return this.data[key];
  }

  willDestroy() {
    this.saveToStorage();
    super.willDestroy(...arguments);
  }
}

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class MyComponent extends Component {
  @service('session') auth; // 使用别名

  get isLoggedIn() {
    return this.auth.isAuthenticated;
  }
}

// 好的做法 - 单一职责
export default class SessionService extends Service {
  // 只处理用户会话
}

export default class ThemeService extends Service {
  // 只处理主题
}

// 避免 - 职责过多
export default class AppService extends Service {
  // 处理会话、主题、通知、购物车...
}

// 好的命名
@service session;
@service theme;
@service cart;
@service notifications;

// 避免
@service s;
@service t;

/**
 * Session服务
 * 
 * 管理用户会话状态
 * 
 * @property {boolean} isAuthenticated - 是否已认证
 * @property {User|null} currentUser - 当前用户
 * @method login - 登录
 * @method logout - 登出
 */
export default class SessionService extends Service {
}