文章目录
- 前言
- 一、阶段
- 1. 早期阶段：原生HTML/CSS/JavaScript
- 2. jQuery时代
- 3. MVC/MVVM框架的兴起
- 4. 现代前端框架与工具链
- 4.1. React + Webpack + Babel
- 4.1.1. 安装依赖
- 4.1.2. 配置Webpack
- 4.1.3. Babel配置
- 4.1.4. React组件和入口文件
- 4.1.5. 运行开发服务器
- 4.2. Vue.js + Webpack + Babel
- 4.2.1. 使用Vue CLI创建项目
- 4.2.2. Vue组件和入口文件
- 4.2.3. 运行开发服务器
- 二、热门文章
前言
前端框架的发展史可以追溯到HTML和CSS的初期，以及后续JavaScript的出现和演变。随着Web技术的不断进步，前端框架也经历了从简单到复杂，从单一功能到全面解决方案的演变过程。
在HTML和CSS的初期，样式表主要用于调节网页的显示方式。然而，随着HTML的成长和设计师的需求增加，样式表的功能逐渐丰富，使得网页的显示更加灵活和多样化。随后，JavaScript的出现为网页带来了动态效果和交互性。然而，早期的前端开发往往涉及到大量的DOM操作，代码冗余且难以维护。
为了解决这些问题，前端框架应运而生。最早的前端框架之一是jQuery，它提供了丰富的插件和元素选择功能，大大简化了DOM操作，使得前端开发变得更加高效。同时，jQuery也解决了浏览器之间的JS兼容性问题，使得开发者可以使用统一的写法来解决相同的操作。
随着前端开发的不断发展，MVC（Model-View-Controller）设计模式开始流行。MVC将数据的处理和展示彻底分开，使得前端代码更加清晰和可维护。在这个背景下，Backbone等早期前端框架应运而生。Backbone是一个制作SPA（单页面应用程序）的框架，它结合了jQuery和Underscore，并使用require.js实现模块化加载。
随后，前端框架进一步发展，出现了更多的解决方案。例如，AngularJS是一个MVVM（Model-View-ViewModel）的框架，它实现了数据双向绑定，使得前端数据与视图的同步变得更加简单。ReactJS则是Facebook推出的一个针对视图层的库，它采用了单向数据流的设计，使得组件之间的数据传递更加清晰和可控。Vue则是一个轻量级的MVVM框架，它提供了渐进式开发的方案，使得开发者可以根据项目需求逐步引入和使用框架的功能。
一、阶段
1. 早期阶段：原生HTML/CSS/JavaScript
在这个阶段，前端开发主要依赖于HTML、CSS和JavaScript的原生能力。开发者直接操作DOM，实现页面布局和交互。
案例代码：一个简单的原生JavaScript实现点击按钮改变文本内容的例子。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>原生JavaScript示例</title>
</head>
<body><button id="myButton">点击我</button><p id="myText">初始文本</p><script>document.getElementById('myButton').addEventListener('click', function() {document.getElementById('myText').textContent = '文本已改变';});</script>
</body>
</html>
2. jQuery时代
jQuery简化了HTML文档遍历、事件处理、动画和Ajax交互等任务，使得前端开发变得更加方便。
案例代码：使用jQuery实现简单的Ajax请求。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery Ajax示例</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><button id="loadData">加载数据</button><div id="dataContainer"></div><script>$('#loadData').click(function() {$.ajax({url: 'https://api.example.com/data',type: 'GET',dataType: 'json',success: function(data) {$('#dataContainer').text(JSON.stringify(data));},error: function(jqXHR, textStatus, errorThrown) {console.error('请求失败: ' + textStatus, errorThrown);}});});</script>
</body>
</html>
3. MVC/MVVM框架的兴起
随着前端应用的复杂度增加，MVC（Model-View-Controller）和MVVM（Model-View-ViewModel）设计模式开始流行，催生了如AngularJS、React和Vue等框架。
案例代码：使用Vue.js实现一个简单的待办事项列表。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue.js 示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body><div id="app"><input v-model="newTodo" @keyup.enter="addTodo"><ul><li v-for="(todo, index) in todos" :key="index">{{ todo }}<button @click="removeTodo(index)">删除</button></li></ul></div><script>new Vue({el: '#app',data: {newTodo: '',todos: []},methods: {addTodo() {if (this.newTodo) {this.todos.push(this.newTodo);this.newTodo = '';}},removeTodo(index) {this.todos.splice(index, 1);}}});</script>
</body>
</html>
4. 现代前端框架与工具链
前端框架与工具链的结合使得现代前端开发更加高效和模块化。下面我将提供一些使用不同前端框架（如React、Vue.js）和工具链（如Webpack、Babel）的案例代码。
4.1. React + Webpack + Babel
4.1.1. 安装依赖
首先，你需要安装React、ReactDOM、Webpack、Babel等相关的依赖。
npm init -y
npm install --save react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin
4.1.2. 配置Webpack
在项目的根目录下创建一个webpack.config.js文件，并配置Webpack。
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'development',entry: './src/index.js',output: {filename: 'main.js',path: __dirname + '/dist',},module: {rules: [{test: /\.(js|jsx)$/,exclude: /node_modules/,use: {loader: 'babel-loader',},},],},plugins: [new HtmlWebpackPlugin({template: './src/index.html',}),],devServer: {contentBase: './dist',hot: true,},
};
4.1.3. Babel配置
在项目的根目录下创建一个.babelrc文件，并配置Babel。
{"presets": ["@babel/preset-env", "@babel/preset-react"]
}
4.1.4. React组件和入口文件
在src目录下创建index.js和App.js。
src/App.js:
import React from 'react';function App() {return (<div><h1>Hello, React with Webpack and Babel!</h1></div>);
}export default App;
src/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';ReactDOM.render(<App />, document.getElementById('root'));
4.1.5. 运行开发服务器
在package.json的scripts中添加启动Webpack开发服务器的命令。
"scripts": {"start": "webpack serve --open"
}
然后运行npm start来启动开发服务器。
4.2. Vue.js + Webpack + Babel
Vue.js的配置与React类似，但Vue CLI工具提供了更为简化的设置过程。
4.2.1. 使用Vue CLI创建项目
npm install -g @vue/cli
vue create my-vue-app
按照提示选择预设配置或手动选择特性。
4.2.2. Vue组件和入口文件
在src目录下，Vue CLI已经为你创建好了基本的文件结构。你可以直接编辑src/App.vue来创建你的Vue组件。
src/App.vue:
<template><div id="app"><h1>Hello, Vue.js with Webpack and Babel!</h1></div>
</template><script>
export default {name: 'App',
};
</script><style>
/* 这里可以写CSS样式 */
</style>
4.2.3. 运行开发服务器
在Vue CLI创建的项目中，你可以直接运行npm run serve来启动开发服务器。
二、热门文章
【温故而知新】JavaScript数字精度丢失问题
【温故而知新】JavaScript的继承方式有那些
【温故而知新】JavaScript中内存泄露有那几种
【温故而知新】JavaScript函数式编程
【温故而知新】JavaScript的防抖与节流
【温故而知新】JavaScript事件循环
)
