现代JavaScript框架中的设计模式实践

模块化与组件化设计

现代JavaScript框架普遍采用模块化和组件化设计模式。模块化将代码分割成独立的功能单元，而组件化则将UI拆分为可复用的部分。React、Vue和Angular都内置了对这两种模式的支持。

// React组件示例
function Button({ onClick, children }) {
  return (
    <button className="btn" onClick={onClick}>
      {children}
    </button>
  );
}

// Vue组件示例
Vue.component('my-button', {
  template: `
    <button class="btn" @click="$emit('click')">
      <slot></slot>
    </button>
  `
});

模块化设计通过ES6模块系统实现，允许开发者将功能拆分为多个文件：

// utils.js
export function formatDate(date) {
  return new Date(date).toLocaleDateString();
}

// app.js
import { formatDate } from './utils';
console.log(formatDate('2023-01-01'));

观察者模式与响应式系统

现代框架的核心响应式系统基于观察者模式实现。Vue使用Object.defineProperty或Proxy实现数据绑定，React则通过虚拟DOM和状态管理实现类似效果。

// Vue响应式示例
const vm = new Vue({
  data: {
    message: 'Hello'
  },
  template: '<div>{{ message }}</div>'
});

// React状态管理示例
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

高阶组件与渲染属性

React社区发展出高阶组件(HOC)和渲染属性(Render Props)两种设计模式，用于组件逻辑复用。

// 高阶组件示例
function withLoading(Component) {
  return function EnhancedComponent({ isLoading, ...props }) {
    return isLoading ? <div>Loading...</div> : <Component {...props} />;
  };
}

// 渲染属性示例
class DataProvider extends React.Component {
  state = { data: null };
  
  componentDidMount() {
    fetchData().then(data => this.setState({ data }));
  }
  
  render() {
    return this.props.render(this.state.data);
  }
}

依赖注入模式

Angular框架大量使用依赖注入模式，通过装饰器和注入器管理服务依赖。

// Angular服务示例
@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}
  
  getData() {
    return this.http.get('/api/data');
  }
}

// 组件中使用
@Component({
  selector: 'app-data',
  template: '...'
})
export class DataComponent {
  constructor(private dataService: DataService) {}
}

状态管理模式

复杂应用通常采用集中式状态管理，如Redux或Vuex，这些库实现了单一数据源模式。

// Redux示例
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

// React组件连接
function Counter({ count, increment }) {
  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

const mapState = state => ({ count: state.count });
const mapDispatch = { increment: () => ({ type: 'INCREMENT' }) };
connect(mapState, mapDispatch)(Counter);

策略模式的应用

策略模式在表单验证、路由处理等场景中广泛应用。框架通常提供插件系统或中间件机制来实现策略的可替换性。

// 表单验证策略
const validationStrategies = {
  required: value => !!value || 'Required',
  email: value => /.+@.+\..+/.test(value) || 'Invalid email',
  minLength: min => value => 
    value.length >= min || `Minimum ${min} characters`
};

function validate(value, rules) {
  return rules.map(rule => {
    const [strategy, ...args] = rule.split(':');
    return validationStrategies[strategy](...args)(value);
  }).filter(Boolean);
}

装饰器模式

装饰器模式通过高阶函数或ES7装饰器语法增强组件功能，不改变原有结构。

// 函数装饰器
function logExecutionTime(fn) {
  return function(...args) {
    console.time('execution');
    const result = fn(...args);
    console.timeEnd('execution');
    return result;
  };
}

// ES7装饰器
@logExecutionTime
function expensiveCalculation() {
  // 复杂计算
}

// 类装饰器
function withRouter(Component) {
  return class extends React.Component {
    // 添加路由相关功能
  };
}

工厂模式与组件创建

框架内部大量使用工厂模式创建组件实例，开发者也可以通过工厂函数简化复杂组件的创建。

// React组件工厂
function createButton(type) {
  const components = {
    primary: props => <button className="btn-primary" {...props} />,
    secondary: props => <button className="btn-secondary" {...props} />,
    link: props => <a className="btn-link" {...props} />
  };
  
  return components[type] || components.primary;
}

// 使用工厂
const PrimaryButton = createButton('primary');

中间件模式

Express风格的中间件模式被Redux等库采用，形成处理管道。

// Redux中间件示例
const loggerMiddleware = store => next => action => {
  console.log('dispatching', action);
  const result = next(action);
  console.log('next state', store.getState());
  return result;
};

const store = createStore(
  rootReducer,
  applyMiddleware(loggerMiddleware, thunkMiddleware)
);

组合模式与UI树

框架通过组合模式构建UI树结构，组件可以包含子组件形成层次结构。

// React组合示例
function Layout({ header, sidebar, content }) {
  return (
    <div className="layout">
      <div className="header">{header}</div>
      <div className="body">
        <div className="sidebar">{sidebar}</div>
        <div className="content">{content}</div>
      </div>
    </div>
  );
}

// 使用
<Layout
  header={<Header />}
  sidebar={<Navigation />}
  content={<Article />}
/>

代理模式的应用

框架内部使用代理模式实现各种功能，如Vue3的响应式系统基于Proxy实现。

// Proxy示例
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key);
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      Reflect.set(target, key, value);
      trigger(target, key);
      return true;
    }
  });
}

const state = reactive({ count: 0 });

命令模式与动作分发

Redux的action系统是命令模式的典型实现，将操作封装为可序列化的对象。

// Redux action creators
function addTodo(text) {
  return {
    type: 'ADD_TODO',
    payload: { text, completed: false }
  };
}

// 绑定到UI
<button onClick={() => dispatch(addTodo('New task'))}>
  Add Todo
</button>

享元模式优化性能

虚拟DOM技术本质上是享元模式的应用，通过轻量级的对象表示UI节点。

// 简化的虚拟DOM实现
class VNode {
  constructor(type, props, children) {
    this.type = type;
    this.props = props;
    this.children = children;
  }
}

function createElement(type, props, ...children) {
  return new VNode(type, props, children.flat());
}

适配器模式集成第三方库

适配器模式常用于集成不同接口的库或服务。

// 数据源适配器示例
class ApiAdapter {
  constructor(apiClient) {
    this.api = apiClient;
  }
  
  getUsers() {
    return this.api.fetch('/users').then(res => res.data);
  }
}

// 使用不同API客户端
const axiosAdapter = new ApiAdapter(axios);
const fetchAdapter = new ApiAdapter({ fetch: url => fetch(url).then(r => r.json()) });