随机代码风格（一行 ES6，一行 ES5，一行 jQuery）

随机代码风格是一种有趣的编程方式，它混合了不同时代的 JavaScript 语法和库，比如一行 ES6、一行 ES5、一行 jQuery。这种风格看似混乱，却能让人快速回顾前端技术的演变历程。

变量声明与作用域

ES6 引入了 let 和 const，而 ES5 只能用 var。jQuery 虽然不直接涉及变量声明，但它的链式调用风格很有特点：

const es6Var = 'Hello'; // ES6
var es5Var = 'World';   // ES5
$('#output').text(es6Var + ' ' + es5Var); // jQuery

作用域差异很明显：

if (true) {
  let blockScoped = 1; // ES6 块级作用域
  var functionScoped = 2; // ES5 函数作用域
}
console.log(functionScoped); // 2
console.log(blockScoped); // ReferenceError

函数定义方式

三种风格定义函数各有特点：

// ES6 箭头函数
const add = (a, b) => a + b; 

// ES5 函数表达式
var multiply = function(a, b) {
  return a * b;
};

// jQuery 回调函数
$('button').click(function() {
  alert(add(1, 2));
});

传统构造函数对比：

// ES6 class
class Person {
  constructor(name) {
    this.name = name;
  }
}

// ES5 构造函数
function Animal(name) {
  this.name = name;
}

// jQuery 插件模式
$.fn.greet = function() {
  return this.each(function() {
    console.log('Hello ' + $(this).text());
  });
};

数组操作

数组处理方法展现了语法演进：

// ES6 展开运算符
const arr1 = [1, ...[2, 3]]; 

// ES5 concat
var arr2 = [1].concat([2, 3]);

// jQuery 遍历
$.each(arr1, function(index, value) {
  console.log(value);
});

过滤数组示例：

// ES6 filter
const evens = [1,2,3].filter(x => x%2===0);

// ES5 循环
var odds = [];
for (var i=0; i<[1,2,3].length; i++) {
  if ([1,2,3][i]%2!==0) odds.push([1,2,3][i]);
}

// jQuery grep
var numbers = $.grep([1,2,3], function(n) {
  return n > 1;
});

DOM 操作对比

操作 DOM 是最能体现差异的领域：

// ES6 模板字符串
document.body.innerHTML = `<div>${new Date()}</div>`; 

// ES5 字符串拼接
document.body.innerHTML = '<div>' + new Date() + '</div>';

// jQuery 方式
$('body').html($('<div>').text(new Date()));

事件监听对比：

// ES6 箭头函数保留this
button.addEventListener('click', () => {
  console.log(this); // 继承外层this
});

// ES5 函数表达式
button.addEventListener('click', function() {
  console.log(this); // 指向button元素
});

// jQuery 处理
$('button').on('click', function() {
  console.log($(this).text());
});

异步编程演进

从回调到 Promise 的演变：

// ES6 Promise
fetch('/api')
  .then(res => res.json())
  .then(console.log);

// ES5 回调地狱
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    console.log(JSON.parse(xhr.responseText));
  }
};

// jQuery Deferred
$.getJSON('/api').done(function(data) {
  console.log(data);
});

async/await 混合写法：

// ES6 async/await
async function loadData() {
  const data = await fetch('/api').then(r => r.json());
  return data;
}

// ES5 模拟async
function loadDataES5(callback) {
  $.getJSON('/api', callback);
}

// 混合调用
loadData().then(data => {
  $('#output').text(JSON.stringify(data));
});

模块系统差异

模块化方案对比：

// ES6 模块
import { moduleFunc } from './module.js';
export const value = 42;

// ES5 IIFE
var module = (function() {
  return {
    value: 42
  };
})();

// jQuery 插件模式
(function($) {
  $.fn.plugin = function() {};
})(jQuery);

现代与传统的碰撞

混用新旧语法有时会产生有趣效果：

// ES6 Map
const map = new Map([['key', 'value']]);

// ES5 对象模拟Map
var fakeMap = { key: 'value' };

// jQuery 扩展对象
$.extend({}, fakeMap, { newKey: map.get('key') });

类操作混合示例：

// ES6 class
class Component {
  constructor(el) {
    this.el = el;
  }
}

// ES5 实例化
var comp = new Component(document.getElementById('app'));

// jQuery 包装
$(comp.el).addClass('active').fadeIn();

实用工具函数

常见操作的多种实现：

// ES6 默认参数
function greet(name = 'Guest') {
  return `Hello ${name}`;
}

// ES5 参数处理
function greetES5(name) {
  name = name || 'Guest';
  return 'Hello ' + name;
}

// jQuery 扩展参数
$.extend({ name: 'Guest' }, { name: 'Alice' });

对象合并对比：

// ES6 展开运算
const merged = { ...obj1, ...obj2 };

// ES5 assign
var mergedES5 = Object.assign({}, obj1, obj2);

// jQuery extend
var mergedJQ = $.extend({}, obj1, obj2);

浏览器特性检测

不同时代的特性检测方法：

// ES6 Promises 检测
const hasPromise = 'Promise' in window;

// ES5 特性检测
var hasLocalStorage = 'localStorage' in window;

// jQuery 浏览器检测
var isIE = $.browser.msie;

动画效果实现

实现动画的不同技术栈：

// ES6 使用CSS变量
element.style.setProperty('--opacity', 0);
requestAnimationFrame(() => {
  element.style.opacity = 1;
});

// ES5 原生动画
var opacity = 0;
var timer = setInterval(function() {
  if (opacity >= 1) clearInterval(timer);
  element.style.opacity = opacity;
  opacity += 0.1;
}, 100);

// jQuery animate
$(element).animate({ opacity: 1 }, 500);

现代前端工作流

构建工具中的混用场景：

// ES6 import
import $ from 'jquery'; 

// ES5 require
var _ = require('lodash');

// 混合使用
export default function() {
  return $.extend({}, _.defaults({}, { key: 'value' }));
}

Babel 转译示例：

// 原始ES6代码
const fn = () => [...arr];

// 转译后ES5代码
var fn = function() {
  return [].concat(arr);
};

// 同时使用jQuery
$.each(fn(), function(i, item) {
  console.log(item);
});

代码可维护性思考

虽然这种混合风格有趣，但在实际项目中：

// ES6 清晰的类定义
class Widget {
  init() {
    // 现代代码
  }
}

// 突然插入ES5
var oldWidget = {
  init: function() {
    // 传统代码
  }
};

// 又跳转到jQuery
$(document).ready(function() {
  new Widget().init();
  oldWidget.init();
});

这种跳跃式编码虽然展示了技术演进，但会带来维护成本。每种技术都有其适用场景，理解它们的差异比随意混用更重要。