前端全局编程和模块化编程
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，并在默认浏览器中打开你的应用。