移动端环境下的模式调整

随着移动设备的普及，移动端开发成为前端工程师的重要工作场景之一。JavaScript设计模式在移动端环境下需要针对触摸交互、屏幕尺寸、性能优化等因素进行调整，才能更好地适应移动端的特点。

移动端环境的特点

移动端与桌面端存在显著差异，这些差异直接影响设计模式的选择和实现方式：

1. 交互方式不同：触摸屏取代了鼠标，带来了点击、滑动、长按等手势操作
2. 屏幕尺寸多样：从4英寸手机到12英寸平板，需要响应式设计
3. 性能限制：移动设备CPU和内存资源有限，需要更高效的代码
4. 网络环境不稳定：需要处理弱网和离线情况
5. 传感器丰富：可以获取设备方向、地理位置等信息

适配移动端的策略模式

策略模式在移动端特别有用，可以根据设备特性动态选择最佳策略：

class ImageLoadingStrategy {
  load(imageElement, src) {
    throw new Error("必须实现load方法");
  }
}

class NormalStrategy extends ImageLoadingStrategy {
  load(imageElement, src) {
    imageElement.src = src;
  }
}

class LazyLoadStrategy extends ImageLoadingStrategy {
  load(imageElement, src) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          imageElement.src = src;
          observer.unobserve(imageElement);
        }
      });
    });
    observer.observe(imageElement);
  }
}

class ImageLoader {
  constructor(strategy) {
    this.strategy = strategy;
  }
  
  setStrategy(strategy) {
    this.strategy = strategy;
  }
  
  loadImage(imageElement, src) {
    this.strategy.load(imageElement, src);
  }
}

// 使用示例
const loader = new ImageLoader();

// 根据网络条件选择策略
if (navigator.connection.effectiveType === '4g') {
  loader.setStrategy(new NormalStrategy());
} else {
  loader.setStrategy(new LazyLoadStrategy());
}

移动端优化的观察者模式

观察者模式在移动端事件处理中广泛应用，但需要针对触摸事件优化：

class TouchEventManager {
  constructor() {
    this.observers = [];
    this.touchStartX = 0;
    this.touchStartY = 0;
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(eventType, eventData) {
    this.observers.forEach(observer => observer.update(eventType, eventData));
  }

  handleTouchStart(event) {
    this.touchStartX = event.touches[0].clientX;
    this.touchStartY = event.touches[0].clientY;
    this.notify('touchStart', { x: this.touchStartX, y: this.touchStartY });
  }

  handleTouchMove(event) {
    const touchEndX = event.touches[0].clientX;
    const touchEndY = event.touches[0].clientY;
    const dx = touchEndX - this.touchStartX;
    const dy = touchEndY - this.touchStartY;
    
    if (Math.abs(dx) > Math.abs(dy)) {
      this.notify(dx > 0 ? 'swipeRight' : 'swipeLeft', { distance: Math.abs(dx) });
    } else {
      this.notify(dy > 0 ? 'swipeDown' : 'swipeUp', { distance: Math.abs(dy) });
    }
  }
}

class SwipeHandler {
  update(eventType, eventData) {
    switch(eventType) {
      case 'swipeLeft':
        console.log(`向左滑动 ${eventData.distance}px`);
        break;
      case 'swipeRight':
        console.log(`向右滑动 ${eventData.distance}px`);
        break;
      // 其他手势处理
    }
  }
}

移动端适配的工厂模式

工厂模式可以帮助创建适合不同设备的组件：

class ButtonFactory {
  createButton(type) {
    switch(type) {
      case 'ios':
        return new IOSButton();
      case 'android':
        return new AndroidButton();
      case 'responsive':
        return new ResponsiveButton();
      default:
        return new DefaultButton();
    }
  }
}

class IOSButton {
  render() {
    const button = document.createElement('button');
    button.style.borderRadius = '10px';
    button.style.padding = '12px 24px';
    button.style.backgroundColor = '#007AFF';
    button.style.color = 'white';
    return button;
  }
}

class AndroidButton {
  render() {
    const button = document.createElement('button');
    button.style.borderRadius = '4px';
    button.style.padding = '8px 16px';
    button.style.backgroundColor = '#6200EE';
    button.style.color = 'white';
    return button;
  }
}

// 使用示例
const factory = new ButtonFactory();
const deviceType = /iPhone|iPad|iPod/i.test(navigator.userAgent) ? 'ios' : 'android';
const button = factory.createButton(deviceType);
document.body.appendChild(button.render());

移动端状态管理

移动端应用状态更复杂，需要更精细的状态管理：

class MobileAppState {
  constructor() {
    this.state = {
      networkStatus: 'online',
      batteryLevel: 100,
      orientation: 'portrait',
      touchActive: false
    };
    this.listeners = [];
  }

  getState() {
    return this.state;
  }

  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.notifyListeners();
  }

  addListener(listener) {
    this.listeners.push(listener);
  }

  removeListener(listener) {
    this.listeners = this.listeners.filter(l => l !== listener);
  }

  notifyListeners() {
    this.listeners.forEach(listener => listener(this.state));
  }
}

// 监听设备状态变化
const appState = new MobileAppState();

window.addEventListener('online', () => {
  appState.setState({ networkStatus: 'online' });
});

window.addEventListener('offline', () => {
  appState.setState({ networkStatus: 'offline' });
});

window.addEventListener('orientationchange', () => {
  const orientation = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
  appState.setState({ orientation });
});

// 组件中使用状态
class NetworkAwareComponent {
  constructor(stateManager) {
    this.stateManager = stateManager;
    this.stateManager.addListener(this.update.bind(this));
  }

  update(state) {
    if (state.networkStatus === 'offline') {
      this.showOfflineMessage();
    } else {
      this.hideOfflineMessage();
    }
  }

  showOfflineMessage() {
    console.log('显示离线提示');
  }

  hideOfflineMessage() {
    console.log('隐藏离线提示');
  }
}

移动端性能优化的代理模式

代理模式可以帮助优化移动端性能，特别是图片和资源的加载：

class ImageProxy {
  constructor(realImage, placeholder) {
    this.realImage = realImage;
    this.placeholder = placeholder;
    this.imageElement = document.createElement('img');
    this.loaded = false;
  }

  display() {
    if (!this.loaded) {
      this.imageElement.src = this.placeholder;
      
      // 低优先级加载实际图片
      requestIdleCallback(() => {
        const img = new Image();
        img.onload = () => {
          this.imageElement.src = this.realImage;
          this.loaded = true;
        };
        img.src = this.realImage;
      });
    }
    
    return this.imageElement;
  }
}

// 使用示例
const proxyImage = new ImageProxy(
  'large-image.jpg',
  'placeholder-small.jpg'
);
document.body.appendChild(proxyImage.display());

移动端手势的装饰器模式

装饰器模式可以为基本手势添加额外功能：

class Gesture {
  execute() {
    console.log('基本手势操作');
  }
}

class GestureDecorator {
  constructor(gesture) {
    this.gesture = gesture;
  }
  
  execute() {
    this.gesture.execute();
  }
}

class DoubleTapDecorator extends GestureDecorator {
  execute() {
    console.log('双击手势增强');
    super.execute();
    // 添加双击特有功能
  }
}

class LongPressDecorator extends GestureDecorator {
  execute() {
    console.log('长按手势增强');
    super.execute();
    // 添加长按特有功能
  }
}

// 使用示例
const basicGesture = new Gesture();
const enhancedGesture = new LongPressDecorator(
  new DoubleTapDecorator(basicGesture)
);
enhancedGesture.execute();

移动端路由的中间件模式

移动端SPA应用可以使用中间件模式处理路由：

class Router {
  constructor() {
    this.middlewares = [];
    this.routes = {};
  }

  use(middleware) {
    this.middlewares.push(middleware);
  }

  addRoute(path, handler) {
    this.routes[path] = handler;
  }

  navigate(path) {
    const context = { path };
    
    const runMiddlewares = (index) => {
      if (index < this.middlewares.length) {
        this.middlewares[index](context, () => runMiddlewares(index + 1));
      } else {
        const handler = this.routes[context.path];
        if (handler) {
          handler(context);
        } else {
          console.error('路由不存在');
        }
      }
    };
    
    runMiddlewares(0);
  }
}

// 使用示例
const router = new Router();

// 添加中间件
router.use((context, next) => {
  console.log(`路由开始: ${context.path}`);
  context.startTime = Date.now();
  next();
});

router.use((context, next) => {
  if (context.path === '/admin') {
    console.log('检查权限');
    // 权限检查逻辑
  }
  next();
});

// 添加路由
router.addRoute('/home', (context) => {
  console.log('加载首页内容');
});

router.addRoute('/profile', (context) => {
  console.log('加载个人资料');
});

// 触发路由
router.navigate('/profile');

移动端组件通信的发布-订阅模式

发布-订阅模式适合移动端组件间解耦通信：

class EventBus {
  constructor() {
    this.events = {};
  }

  subscribe(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  unsubscribe(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }

  publish(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  }
}

// 在组件中使用
const bus = new EventBus();

// 组件A订阅事件
bus.subscribe('dataLoaded', (data) => {
  console.log('组件A收到数据:', data);
});

// 组件B订阅同一事件
bus.subscribe('dataLoaded', (data) => {
  console.log('组件B收到数据:', data);
});

// 某个服务发布事件
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    bus.publish('dataLoaded', data);
  });

移动端动画的迭代器模式

迭代器模式可以控制复杂动画序列：

class AnimationSequence {
  constructor() {
    this.animations = [];
    this.currentIndex = 0;
  }

  add(animation) {
    this.animations.push(animation);
  }

  next() {
    if (this.hasNext()) {
      const animation = this.animations[this.currentIndex];
      this.currentIndex++;
      return animation;
    }
    return null;
  }

  hasNext() {
    return this.currentIndex < this.animations.length;
  }

  reset() {
    this.currentIndex = 0;
  }
}

// 使用示例
const sequence = new AnimationSequence();

sequence.add({
  element: document.getElementById('box1'),
  properties: { x: 100, y: 0, opacity: 1 },
  duration: 500
});

sequence.add({
  element: document.getElementById('box2'),
  properties: { x: 0, y: 100, opacity: 0.8 },
  duration: 300
});

function playSequence() {
  const animation = sequence.next();
  if (animation) {
    // 使用Web Animation API执行动画
    animation.element.animate(
      [
        { transform: 'translate(0, 0)', opacity: 0 },
        { 
          transform: `translate(${animation.properties.x}px, ${animation.properties.y}px)`,
          opacity: animation.properties.opacity
        }
      ],
      { duration: animation.duration }
    ).onfinish = playSequence;
  }
}

playSequence();