前端全局编程和模块化编程
1. 全局编程
<!DOCTYPE html>
<html>
<head>
<title>OpenLayers 示例</title>
<style>
.map {
width: 100%;
height: 400px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">
</head>
<body>
<h2>我的第一个 OpenLayers 地图</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
// 地图视图设置
var view = new ol.View({
center: ol.proj.fromLonLat([116.407526, 39.90403]), // 设置地图中心为北京天安门
zoom: 10 // 初始缩放级别
});
// 创建地图实例
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM() // 使用 OpenStreetMap 作为底图
})
],
view: view
});
</script>
</body>
</html>
2 模块化编程
import是 ES6 模块系统的一部分，只能在支持 ES6 模块的浏览器或通过构建工具（如 Babel、Webpack）中使用。require是 CommonJS 模块系统的一部分，主要用于 Node.js 环境，也可以在浏览器中使用，但通常需要构建工具来转换模块。
2.1 代码编写
使用npm和Webpack进行前端模块化编程的完整案例。这个案例将创建一个简单的网页，该网页显示一个标题和一个按钮，点击按钮会在控制台中打印一条消息。
步骤 1: 初始化项目
创建项目目录并初始化npm：
mkdir my-modular-frontend
cd my-modular-frontend
npm init -y
步骤 2: 安装Webpack和相关依赖
安装Webpack和Webpack CLI：
npm install --save-dev webpack webpack-cli
步骤 3: 创建项目结构
你的项目结构可能如下所示：
my-modular-frontend/
│
├── src/
│ ├── index.js
│ ├── components/
│ │ ├── Button.js
│ │ └── Header.js
│
├── public/
│ └── index.html
│
├── webpack.config.js
└── package.json
步骤 4: 编写模块代码
在 src/components/Header.js 中：
export function createHeader() {
const header = document.createElement('h1');
header.textContent = 'Welcome to My Modular Frontend';
document.body.appendChild(header);
}
在 src/components/Button.js 中：
export function createButton() {
const button = document.createElement('button');
button.textContent = 'Click Me';
button.onclick = () => console.log('Button clicked!');
document.body.appendChild(button);
}
在 src/index.js 中：
import { createHeader } from './components/Header';
import { createButton } from './components/Button';
document.addEventListener('DOMContentLoaded', () => {
createHeader();
createButton();
});
步骤 5: 配置Webpack
创建 webpack.config.js：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public'),
},
mode: 'development',
};
步骤 6: 编写打包脚本
在 package.json 中添加一个脚本：
"scripts": {
"build": "webpack --mode development"
}
步骤 7: 创建HTML文件
在 public/index.html 中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Modular Frontend</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
步骤 8: 打包项目
运行以下命令来打包你的项目：
npm run build
步骤 9: 运行项目
在浏览器中打开 public/index.html 文件。你应该会看到一个标题和一个按钮。点击按钮，控制台将显示一条消息。
这个案例展示了如何使用npm和Webpack来模块化地构建前端项目。你可以根据需要添加更多的模块和功能。
2.2 运行
使用Webpack Dev Server
如果你在开发模式下工作，Webpack Dev Server是一个很好的选择，因为它可以实时重新加载你的应用。
- 安装Webpack Dev Server：
npm install --save-dev webpack-dev-server
- 修改你的
webpack.config.js来包含dev server的配置：
module.exports = {
// ...其他配置...
devServer: {
static: path.join(__dirname, 'public'),
compress: true,
port: 9000,
// ... 其他 devServer 配置 ...
},
};
- 在
package.json中添加一个启动脚本：
"scripts": {
"start": "webpack serve --open"
}
- 运行你的应用：
npm start
这将启动Webpack Dev Server，并在默认浏览器中打开你的应用。