dw怎么用javascript从旧写法迁移要改哪些地方

一、彻底移除 Dreamweaver 专有的 MM_ 系列行为脚本

早期使用 DW 制作网页时，最典型的特征就是在 HTML 的 <head> 中由软件自动插入以 MM_ 开头的函数库，例如用于图片翻转的 MM_preloadImages、MM_swapImgRestore、MM_swapImage，用于元素寻址的 MM_findObj，以及用于窗口控制的 MM_jumpMenu 和 MM_openBrWindow。

这些函数的产生背景是二十年前各大浏览器对 DOM 支持严重不一致的年代。为了兼容 Netscape 4 和 IE 4，DW 内部通过层级嗅探和古董对象进行封装，不仅代码冗长晦涩，还在 window 全局对象上强行挂载了 MM_sr 等临时缓存数组。在现代 Web 标准下，此类功能绝大多数可以直接通过纯 CSS 替代，或用短短几行原生 JavaScript 优雅重现。

1. 图片翻转悬停（Rollover Image）改写

旧版 DW 通常在 <body onload="MM_preloadImages(...)"> 中预载图片，然后在图片或链接上绑定 onmouseover 和 onmouseout。这种做法将图片状态与脚本强行耦合，极易在图片路径变动时失效。

<!-- HTML 遗留写法 -->
<body onload="MM_preloadImages('images/btn_active.png')">
  <a href="about.html"
     onmouseover="MM_swapImage('btn1','','images/btn_active.png',1)"
     onmouseout="MM_swapImgRestore()">
    <img src="images/btn_normal.png" name="btn1" id="btn1" border="0">
  </a>
</body>

<!-- HTML 语义结构 -->
<a href="about.html" class="nav-button" aria-label="关于我们"></a>

<!-- CSS 现代方案：零 JS 开销 -->
.nav-button {
  display: inline-block;
  width: 120px;
  height: 40px;
  background-image: url('images/btn_normal.png');
  background-size: cover;
  transition: opacity 0.2s ease;
}
.nav-button:hover,
.nav-button:focus-visible {
  background-image: url('images/btn_active.png');
}

2. 跳转菜单（Jump Menu）改写

DW 提供的跳转菜单功能会在 <select> 标签内生成 onchange="MM_jumpMenu('parent',this,0)"。迁移时只需移除该属性，并在 JS 中监听 change 事件即可。

<!-- HTML 行内调用 -->
<select name="menu1" onchange="MM_jumpMenu('parent',this,0)">
  <option value="#" selected>请选择链接</option>
  <option value="news.html">新闻动态</option>
  <option value="contact.html">联系我们</option>
</select>

<!-- 纯净 HTML -->
<select id="site-jump-menu" aria-label="页面快捷导航">
  <option value="" selected disabled>请选择链接</option>
  <option value="news.html">新闻动态</option>
  <option value="contact.html">联系我们</option>
</select>

<!-- 独立 JS 模块 -->
const menu = document.querySelector('#site-jump-menu');
menu?.addEventListener('change', (event) => {
  const targetUrl = event.target.value;
  if (targetUrl) {
    window.location.href = targetUrl;
  }
});

二、解除 HTML 与 JavaScript 的行内绑定耦合

在 DW 可视化编辑时期，很多开发者习惯在“属性”检查器中直接为超链接添加 href="javascript:;" 或 onclick="doCheck()"。这种将脚本混杂在 HTML 属性中的做法存在三个严重缺陷：

• 违反结构与行为分离原则：当业务逻辑修改时，必须逐个修改 HTML 文件中的标签属性，极难统一维护。
• 违背现代安全规范（CSP）：现代 Web 部署的内容安全策略（Content Security Policy）通常默认禁用 'unsafe-inline'，行内事件会被现代浏览器直接拦截并报错。
• 内存消耗与扩展性差：如果一个列表有数十个项，行内硬编码会导致每个节点都产生独立句柄，无法享受到现代事件委托（Event Delegation）带来的性能红利。

改写实操：从行内触发到事件委托

迁移的第一步是全站检索并删除标签上的 onclick、onmouseover、onmouseout、onkeydown 等属性；超链接不再使用 href="javascript:void(0)"，如果是纯交互按钮，一律使用标准的 <button type="button"> 标签。

<!-- 遗留列表：每个项都硬编码行内事件 -->
<ul id="news-list">
  <li><a href="javascript:;" onclick="openDetail(101)">公告一</a></li>
  <li><a href="javascript:;" onclick="openDetail(102)">公告二</a></li>
  <li><a href="javascript:;" onclick="openDetail(103)">公告三</a></li>
</ul>

<!-- 语义化结构，仅携带必要业务数据 -->
<ul id="news-list">
  <li><button type="button" data-id="101" class="btn-detail">公告一</button></li>
  <li><button type="button" data-id="102" class="btn-detail">公告二</button></li>
  <li><button type="button" data-id="103" class="btn-detail">公告三</button></li>
</ul>

<!-- 父级单一监听，利用事件委托高效分发 -->
const list = document.querySelector('#news-list');
list?.addEventListener('click', (event) => {
  const button = event.target.closest('.btn-detail');
  if (button) {
    const itemId = button.dataset.id;
    handleDetailOpen(itemId);
  }
});

三、用现代标准 DOM API 替换废弃与专有接口

老版 DW 项目的 JavaScript 代码中，常常散落着许多属于 Internet Explorer 或已废弃标准的专有 API。这些 API 在主流现代浏览器（Chrome、Edge、Firefox、Safari）中有的已被移除，有的处于严格受限状态：

• document.all 与 document.layers：前者是早年 IE 的专有集合，后者是 Netscape 4 的私有对象。DW 内部脚本大量使用 if (document.all) 进行嗅探。必须全部替换为标准的 document.querySelector() 或 document.getElementById()。
• 旧式表单层级访问：形如 document.forms['loginForm'].elements['username'].value 或 document.loginForm.username 的语法结构复杂且缺乏健壮性。现代写法应使用标准的表单选择器配合 FormData 对象或解构赋值。
• 全局 window.event 与 event.srcElement：旧 IE 写法中事件对象并不由回调函数形参传入，而是读取全局的 window.event，目标元素则使用 srcElement。现代标准要求事件回调统一接收参数 (event) => { ... }，并通过 event.target 获取事件触发源。
• 取消默认行为与阻止冒泡：旧写法使用 window.event.returnValue = false 和 window.event.cancelBubble = true。现代标准写法统一为 event.preventDefault() 和 event.stopPropagation()。

// 表单提交旧式验证与获取
function checkForm() {
  // 依赖全局 window.event 和非标准属性
  var evt = window.event;
  var user = document.forms['regForm'].elements['username'].value;
  var box = document.all['tipsBox'];
  
  if (user === '') {
    box.innerText = '用户名不能为空！';
    evt.returnValue = false; // 废弃属性
    return false;
  }
}

// 现代标准表单提交处理
const form = document.querySelector('#reg-form');
const tipBox = document.querySelector('#tips-box');

form?.addEventListener('submit', (event) => {
  event.preventDefault(); // 标准方法阻止默认提交
  
  const formData = new FormData(event.currentTarget);
  const username = formData.get('username')?.trim() ?? '';
  
  if (!username) {
    if (tipBox) tipBox.textContent = '用户名不能为空！';
    return;
  }
  // 执行业务逻辑提交...
});

四、语法与作用域升级：从全局 var 到规范的 ES6+

早期在 DW 中书写 JavaScript 代码时，ES6 规范尚未普及。老代码普遍存在全局变量滥用、作用域模糊和缺少严格模式的问题。将语法层升级到现代标准，主要改动如下：

1. 变量声明：全量停用 var，改用 const 与 let

var 声明存在变量提升（Hoisting）问题，并且不具备块级作用域（Block Scope）。在循环体内使用 var i = 0 极易导致循环变量泄漏到外层，产生难以察觉的状态污染。迁移时，默认所有变量声明优先使用 const；只有确认该变量需要在后续逻辑中被重新赋值时，才使用 let。

2. 字符串拼接升级为模板字符串

老代码中动态拼接 HTML 片段或提示语时，充斥着繁杂的 '+' 运算符，代码极为冗长且容易漏写单双引号或转义符：

// 旧写法：繁琐易出错的字符串拼接
var htmlStr = '<div class="card"><h3>' + title + '</h3><p>' + desc + '</p></div>';

// 现代规范写法：清晰直观的反引号模板字符串
const htmlStr = `
  <div class="card">
    <h3>${title}</h3>
    <p>${desc}</p>
  </div>
`;

3. 隔离全局作用域与引入严格模式

老项目中的脚本经常直接写在全局层级，变量直接暴露在 window 上。重构时如果暂不引入复杂的构建工具（如 Vite 或 Webpack），应在每一个独立的脚本文件顶部开启 'use strict';，并使用立即执行函数表达式（IIFE）或直接使用原生 ES 模块（<script type="module">）将代码封装在独立作用域中。

五、文件结构与脚本加载机制重构

打开老旧 DW 项目的 HTML 文件，通常会发现 <head> 中堆砌着好几个内联 <script> 代码块，页面中段的表格（<table>）甚至底部又零散嵌入了其他逻辑。这种脚本组织方式会严重阻塞浏览器的 HTML 解析器，导致首屏渲染出现明显的白屏延迟。

1. 规范站点资源目录

在 Dreamweaver 的“文件”面板中，整理出一个标准的静态资源结构，严禁在 HTML 根目录胡乱混放 .js 文件：

my-site/
├── index.html
├── assets/
│   ├── css/
│   │   └── main.css        /* 统一存放样式与悬停翻转视觉效果 */
│   ├── js/
│   │   ├── main.js         /* 页面主逻辑入口 */
│   │   └── modules/        /* 独立的业务组件（如表单校验、轮播图） */
│   └── images/             /* 站点图片资源 */

2. 脚本外链化与 defer 异步加载

将 HTML 文件中的所有内联 JavaScript 提取合并至独立的 .js 文件中，并在 HTML 的 <head> 中使用带 defer 属性的外链方式引入：

<!-- 现代最佳实践：不阻塞 DOM 树解析，并在 DOM 构建完成后按序执行 -->
<script defer src="assets/js/main.js"></script>

六、在 Dreamweaver 中高效排查实操与避坑指南

在实际执行迁移操作时，不需要逐行人工翻看数十个甚至上百个 HTML 页面。可以充分利用 Dreamweaver 自带的“在整个本地站点中查找和替换”功能（快捷键 Ctrl+F / Cmd+F）进行高效批处理。

1. 常用正则检索匹配表

2. 三大核心避坑点

1. this 上下文偏移问题： 在旧的行内写法 <button onclick="showInfo(this)"> 中，this 直接指向触发该事件的 DOM 元素。 但当迁移为 button.addEventListener('click', () => { ... }) 时，由于箭头函数不会绑定自己的 this，箭头函数体内的 this 会继承外层作用域（通常是 window），从而引发 undefined 报错。 解决方案：使用回调形参 (event) => { const target = event.currentTarget; }，或者在普通函数 function(event) { ... } 中使用 this。
2. DOM 节点尚未加载即执行： 把内联脚本提取为外部文件后，如果未在 <script> 标签添加 defer 属性，或者没有在代码外层包裹 document.addEventListener('DOMContentLoaded', ...)，可能会因为找不到对应的 DOM 节点而出现 Cannot read properties of null 错误。
3. 清理 DW 模版和失效注释： 老版 DW 模版页面常包含形如 <!-- #BeginEditable "doctitle" --> 或 <!-- BeginDWBehavior ... --> 的注释标记。如果后续不再使用老版 DW 的模版联动功能，应当彻底清除这些历史注释，避免在代码合并或代码检查工具中引发混淆。

总结

将 Dreamweaver 历史项目中的 JavaScript 从旧写法迁移到现代规范，实质上是一次从“依赖设计工具自动生成的陈旧黑盒脚本”向“符合 W3C 标准的现代工程化代码”的转变过程。

在整个改造过程中，只要紧抓这五个核心切入点——废除 MM_ 行为脚本、解耦行内事件、统一标准 DOM API、升级 ES6+ 语法作用域，以及规范外链异步加载，就能迅速肃清遗留代码中的安全隐患与兼容顽疾。完成重构后的项目，不仅能够在所有主流现代浏览器中流畅运行，也能直接无缝兼容 VS Code 等现代编辑器的协同开发，使老旧站点的长期维护成本降至最低。