一次项目总结,内容设置页面

1.如果前端页面是增删查改这种需求,采用MVC思想开发。

MVC,基本思想是,Model层发生变化,就通知View层;View层发生变化,就通知Model层;Control层就是设置变化入口。

Model处理,View处理要隔离开。

用js对象进行变量和函数分类。

2.后台数据放入前台html页面里面,会发生html编码。

要进行解码,如果用jquery,可用$("<div/>").html(json_string).text()

3.最简单的异步图片上传

构造一个隐藏的iframe,和一个隐藏的input type="file"的html元素,把图片上传的表单指向它。

用iframe的load事件,来监听图片上传返回的信息。

再根据后台返回的信息,进行判断数据上传成功与否。

4.离开页面判断内容是否修改过

window.onbeforeunload = function(event){
if(condition){
event.returnValue = "内容已发生修改,确定不保存而离开页面吗?";
return "内容已发生修改,确定不保存而离开页面吗?";
}
}

5.弹窗制作

一个半透明黑色背景,一个框z-index大于半透明黑色背景。

6.用jQuery绑定某个元素的点击事件,某个元素的点击事件里面又绑定其它事件。

问题:点击几次,点击事件里绑定的其它事件,也就执行几次。

解决:用jQuery的unbind方法。

7.json比较

将json字符串化进行比较两者不同。

8.js对象复制

$.extend(true, {},被复制的对象);//使用jquery库

9.用jquery设置获取textarea的值

请用$(textarea的id).val()

10.页面布局的时候,先作好脑图,确定存在哪些元素。然后写出所有静态元素。

11.写页面交互的时候,先做好脑图。

12.IE6兼容性

IE6这东西,实在不想说她。杀精的。

1.inline-block兼容

*zoom:1;
*display:inline;
display: inline-block;

2.遮罩层兼容

overflow: hidden;
100%;
height: 100%;
border: 0px;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
display: none;
visibility: visible;
background-color:#000;
opacity: 0.7;
-moz-opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 100;

浮于遮罩层上

top: 20%;
left: 33%;
display: none;
visibility: visible;
position: absolute;
z-index: 1000;
480px;
background: #FFFFFF;
border: 5px solid #ccc;
line-height: 20px;
margin: 0;

处于同一个父元素之下。

3.JS里面一些事件里,window自带的变量里,IE6没有相关,要判断。

13.多行文字垂直居中

将多行文字放在一个block里,设置一致的padding-top和padding-bottom。

原文地址:https://www.cnblogs.com/samwu/p/2954602.html