总结XX网app中webapp常见的前端错误。

在2016年12月至2017年1月，这一个月的时间内，我参与了易政网app中webapp前端项目的工作，下面将我在此次项目中犯的错误总结起来，以防下次再犯。也终于知道之前看的文章中的一段话所代表的意义:

只讲前端，比如：风格的制定、色调、模块、布局方式、交互方式、逻辑等等，如果再加上团队合作，若再没有一个规划的话，要不了多久，那些看起来没问题的代码，就会暴露出各种问题，模块命名、类的命名、文件的组织、共用模块的提取、代码的复用、可读性、扩展性、维护性。它们看起来只是一些简单的小动作，却需要你看得更远，避免将来出问题需要付出更大的代价，甚至被迫整个项目重构，可谓，功在当代，利在千秋~

注意点

一：复用

可复用的地方一定要复用，不然后期改样式会累死...

二：防止类名冲突

在写类名的时候最好加个前缀，不然在后期可能会有css文件合并，到时候有类名冲突就尴尬了...

三：外链导入

js和css文件最好用外链式导入，如果直接放在html中不好查看，(如果其中有的样式没有用到，jsp会报错)。

四：跟标准

项目标准一定要统一好，不要自己弄自己的，跟着标准来。

五：层级嵌套不要太深

建议是不超过4层。

六：tap

webapp中忘记click，使用tap事件。tap事件用js对象触发。

七：滚动条

有的手机中（小米4）会将你设置的overflow：auto的滚动条显示出来，即使你的页面内容没有超出容器宽度也会显示，所以用不到需要滚动的地方就不要加此属性！！！

八：实时监听输入框至变化的完美方案:oninput&onpropertychange

oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发。如果使用jquery的话，可以同时绑定这两个事件。

$(element).on('input propertychange', function() {
    $('.msg').html($(this).val().length + ' characters');
});

九：避免使用元素选择器

在开始寻找时，浏览器就会遍历HTML中的所有该元素，显然，这是没有必要的；我们的需求和代码结构都是存在着潜在变化的，如果，你使用了元素选择器去定死某个东西，不论是新加进来的东西，还是被复用的东西加到别的结构里去，都极有可能产生样式的冲突。

七：原生js

最好使用js，webapp中对流量依赖很大，最好不要用jquery以及其他库。

BUG

一：字体大小和间距问题

首先导入下面这段代码。这段代码是已iphone6的分辨率制作的，调试的时候以页面图片制作的分辨率来调节。字体大小和间距都要用rem！！

1：js 设置

(function(doc, win) {
	var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		　recalc = function() {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			if(clientWidth>=768){
				docEl.style.fontSize = 20 * (768 / 375) + 'px';
			}else{
				docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';}
 
			};
			if (!doc.addEventListener) return;
			win.addEventListener(resizeEvt, recalc, false);
			doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);　

2：媒体查询设置css

@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
  html, body {
    font-size: 28.799999999999997px !important;
  }
}
 
@media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
  html, body {
    font-size: 25.6px !important;
  }
}
 
@media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
  html, body {
    font-size: 21.333333333333332px !important;
  }
}
 
@media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
  html, body {
    font-size: 19.2px !important;
  }
}
 
@media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
  html, body {
    font-size: 17.066666666666666px !important;
  }
}
 
@media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
  html, body {
    font-size: 16px !important;
  }
}
 
@media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
  html, body {
    font-size: 14.399999999999999px !important;
  }
}
 
@media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
  html, body {
    font-size: 12.8px !important;
  }
}
 
@media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
  html, body {
    font-size: 11.040000000000001px !important;
  }
}
 
@media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
  html, body {
    font-size: 10.666666666666666px !important;
  }
}
 
@media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
  html, body {
    font-size: 10px !important;
  }
}
 
@media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
  html, body {
    font-size: 9.6px !important;
  }
}
 
@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
  html, body {
    font-size: 8.533333333333333px !important;
  }
}
 
@media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
  html, body {
    font-size: 6.4px !important;
  }
}

　　

二：换行问题

页面中有的文章或者标题数据可能不会自己换行，需要添加white-space:normal;强制换行。为了防止每行最后会有单词，需要添加word-break:break-all;

三：ios和安卓原生问题

ios和安卓可以禁止调整为大字体，ios可能会吧页面中的一串数字解析为电话或者网址而改变样式，可以禁用。ios和安卓的h5控件等样式都不一样，最好用统一样式的插件。

ios有右滑关闭的功能，mui也可以实现，看项目定。

四：后台插入文章问题

后台插入的文章可能有自己的样式，也有可能没有插入到你的元素中，此处需注意。

mui的坑

一：mui.back事件问题

最好不要使用mui-action-back，这只是普通的返回，不会刷新页面。

解决方法：1：重写mui.back=function,详情见mui文档

　　　　　2：给个id绑定事件，但是不要加mui-action-back这个类名。

　　　　　3：记住要添加window.androidBack事件，需要触发安卓手机中屏幕底部的返回事件。