安全手机项目总结

做这个项目的我。名义上还是公司的员工，实际上已经算半个外包人员了，哈哈，不要太当真，吐槽下啦！

这个项目是北京的安全手机项目，由于他们人员不够，就由我们协助他们开发，据开会了解，服务端的数据库、技术框架等都是由北京同事搭建好，成都同事负责部分模块。

现在就着重说说前端的事情，项目发版的时间已经给定出来了，但是前端的UI、所使用的框架技术完全没有定下来（他们给了两个网站demo，一个是用angularJs+bootstrap开发的，比较新的技术，也是UI最好看的，本来打算用这种组合的，另外一个貌似是jQueryUI+bootstrap），还需要等待下周某某确定后给这边回复，没有原型图，只有一个大概的Excel图表，上面有备注说明等，还要慢慢理清里面的逻辑， 那叫一个担忧啊，但是表面上还是要保持冷静呢，呵呵，（这其实是从一个大学同学那里学来的，印象尤为深刻，记得我配电脑那次。明明她自己也不懂电脑，但装出来很懂的样子，我想这样的目的是为了不被老板讹吧，哎，我就经常表现出一无所知的样子，需要反思啊！扯得有点远了···）。时间已经过去好几天了，终于确定界面风格和前端技术了，据说北京同事对easyUI较熟悉，于是乎他们也要求我这边也用easyUI，保持一致性，ok，只好用呗，对于没有用过easyUI的前端小白来说，赶紧学阿学····，就这样开始了。前端的框架也是北京那边搭建的，头部、左边菜单栏我都不需要管，只需要做相应模块对应的页面即可，页面是嵌入在iframe里面显示在页面内容区域的。那行吧，就这样吧，easyUI的css等北京同事已经在公共头部里面引用了，考虑到美观行，我选了bootstrap主题，但为了一致性以及不用再加多余的css库，就没有引用bootstrap的css。

开发中遇到的坑：

1、需要在js中初始化easyui组件；

问题描述： 系统中有注册设备、注册用户等，使用的是弹窗，由于弹窗比较多，就把弹窗的内容单独写在一个页面，用异步加载页面的方式显示页面，页面会闪现布局错乱的情况。

问题解答：异步加载的jsp页面里面没有重新引入easyuicss、js，而是使用父窗口中引入的文件；试了重新引入easyui.css文件是不行的、没有尝试引入easyui.js文件； easyui 的组件初始化有两种方式，一种是将class加载元素上，另一种是在js中对元素设置对应的方法，例如：

方法一：<input class="easyui-textbox width-200 networkMacAddress" type="text" name="networkMacAddress" validType="mac">方法二：<input class="setTextbox width-200 networkMacAddress" type="text" name="networkMacAddress" validType="mac">$registerDeviceWrap.find(".setTextbox").textbox();使用方法二就可以完美解决闪现的问题。

2、console.log().

问题描述： 项目需要兼容到IE8及以上，因为有大量的交互，所以我在js里面写了console.log(); 当提交一个表单时，完全没有反应，网页的左下侧还显示“网页上有错误”，F12打开控制台，错误的地方又没有断点。

问题解答： IE8只有在开启调试窗口(F12)的时候，console.log 才能出结果，不然就报错。

可以这样复写console.log()方法//logvar DEBUG = true;function log(message) {    if (DEBUG) {        if (window.console) {         window.console.log(message);        }    }}开发的时候总是会忘记，切记啊，因为这个问题都被测试提了2个bug，泪奔···

3、css超出字符换行.

问题描述： 弹窗左边是一个表格，右边是一个表格，内容是apk的包名，存在很长的情况，有字母、下划线、数字等，表格的宽度设置的百分比，td包含的span的css设置的是word-wrap: break-word;word-break: break-all;强制任何情况下都换行。

chrome下可以实现、但在Firefox、IE下都不行，会被撑开。

问题解答： 一直在找word-wrap、word-break的用法，都没有找到问题的所在，span是行内元素，给它设置宽度是不能生效的，所以需要将span设置成display：block；

4、IE8下异步上传apk的选择按钮不能触发input file change事件。

问题描述： 现在做上传功能都不会用type=”file”元素的外观，太丑啦，一般都会有自定义设置的样式，easyui有专门的filebox组件，外观当然要借用，但是用ajaxuploadfile插件上传文件会无效，于是选用方案一：file控件设置成display:none，写js在点击选择按钮的时候触发file控件，可惜IE8下面不支持呀。

问题解答： 网上到了下解决方案，将file设置成透明的，覆盖在“选择文件”按钮上。

.pr { position: relative; }#file { position: absolute; width: 100%; height: 100%; top: 0; right: 0; opacity: 0; filter: alpha(opacity=0); }

最后还是总结一下： 不管是什么项目，也还是要认真做啦，还要做好，做出水平。