yulanggong/frontend-troubleshooting.md

## frontend-troubleshooting.md

      
    Raw
  

              frontend-troubleshooting.md
            
          
    前端排错表

首先，是否有拼写错误?
JSP 模板

在 HTML 靠前的位置使用 script 标签初始化 JS 变量，不要使用 <input type="hidden" name="id" id="id" value="${id}" />
<script>
  var Foo = {
    id: '${id}',
    listid: '${listid}',
    ctx: '${ctx}',
    isLoggedIn: '${isLoggedIn}'
  }
</script>

不要反复嵌套定义了通用 js 和 css 的 jsp， libs.jsp 经常被反复嵌套，不要在里面放任何 html 的标签如常见的错误是里面放了很多的 css 和 js 引用, 需要复用的 css js 文件单独写到一个 jsp 里，并且一个页面只 include 一次。
JavaScript 报错

$ is not defined


是否有语法错误
匿名自运行函数前是否缺少分号

Can't ... of undefined


JavaScript 执行时是否缺少对应的 DOM 节点
JSP 输出的字段是否为空

调用 jQuery 插件时出现 undefined if not a function 的错误


检查页面中是不是多次引用了 jQuery，保留第一次，其他的去掉。(有时弹窗中也会引用 js)

样式错乱


HTML 是否有 doctype
doctype 是否在 HTML 起始位置
css 文件的加载顺序是否正确
在 AJAX 加载的内容里是否引入了新的 css 文件

手机页面问题


调试可以使用 chrome 的审查元素，可以方便模拟手机设备
字体太大或太小：<head> 内增加 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
手机页面中绑定的 click 事件失效：使用 tap.js 插件，用 tap 事件代替 click。