web项目开发流程小结
字数3960 阅读102 评论0 喜欢1
随着开发项目的增多，自己慢慢摸索出一条开发流程之路，在此记下。
________________________________________
想法 --> 实现 --> 测试 --> 改bug --> 优化 --> 压缩
1.想法
想法就是在项目开发前对项目进行的深入了解和大致想出该怎么做。
我会从以下两大点出发：
1.1 布局
看到设计图，第一眼看的就是页面的布局，说白了就是html盒子的布局问题。
1.1.1 从(div+css)编码布局来说：就三种方式，即
• 自然布局 （标准流）
• 流动布局（浮动流）
• 定位布局（定位流）
1.1.2 从网页设计角度来说：
静态布局
优点：
①一般版心宽度960px,margin: 0 auto;
②保证小分辨率1024正常浏览 ，同时大分辨率居中展示
缺点：
①大分辨屏幕两边留白太多；
②不会随设备分辨率改变而适应屏幕；
③不符合人们日进疯狂的审美标准;
参考链接：
http://www.12306.cn/mormhweb/ 据说耗资两亿的网站，呵呵
自适应布局
优点：
①分别为不同的屏幕分辨率定义布局，布局切换时页面元素发生改变
缺点：
①每个布局中，页面元素不随窗口大小的调整发生变化
②可看作是静态布局的一个系列
参考链接：
http://www.blueidea.com/tech/web/2009/6943.asp
http://www.zhangxinxu.com/wordpress/2009/11/ 自适应css布局
流式布局个人理解，主体元素用百分比
优点：
①主要使用百分比来设置各个部分的宽度, 用来适应不同的分辨率
缺点：
①若屏幕尺度跨度太大，在相对其原始设计过小或过大的屏幕上不能正常显示
响应式布局
优点：
①不同的屏幕分辨率定义布局，元素宽度随着窗口调整而自动适配
② 可看作是流式布局和自适应布局设计理念的融合
③跨平台，在手机，pad，电脑上均有不俗的表现
④节省人力开发成本，不再需要有人特地维护PC页面，移动页面
⑤表现力一致，在不同的平台上看到的东西都是基本一致的，会让感觉体验良好
缺点：
①自由度太低，局限性较大，需要考虑在手机，pad，PC上三种屏幕下的页面内元素的呈现；
②.页面会大，打开速度慢。同时下载多套CSS样式代码，可能在手机上就下载PC/pad的冗余代码，浪费了流量资源
③对于非webkit内核的浏览器支持极差 ，Windows Phone手机上用的IE浏览器，完全就悲剧了
参考链接：
http://www.bubuko.com/infodetail-268180.html 媒体查询
http://www.jq22.com/yanshi4277
http://time.com 响应式网站
弹性布局
优点：
①使用 em 或 rem 单位进行相对布局,相对 % 百分比更加灵活，
②支持浏览器的字体大小调整和缩放等的正常显示
③ 兼容性：IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持
缺点：
①文字排版，rem 的等比缩放特性会让所有设备一行显示的文字数量相同，大屏幕上不能显示更多内容。
②对图片型的 Sprite 支持不好，建议使用 Font Icon 或者 SVG 型 Sprite；
③有小数点参与计算，会出现类似 50% + 50% > 100% 导致意外折行的情况；
参考链接：
http://www.cnblogs.com/breakdown/p/4231708.html
http://www.iinterest.net/2015/07/22/css3-rem-layout/?utm_source=tuicool&utm_medium=referral rem
瀑布流布局
优点：
①图片的展现高效有吸引力
②懒加载模式避免用户鼠标点击的翻页操作，提高页面加载速度
③不必明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度
④ 适合于文字多栏排列
缺点：
①纯css实现不了，要用jQuery 的 Masonry 插件
②只有高级浏览器中才能使用
③列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列
④ 滚动加载更多数据时，还要指定插入到第几列中，不够方便
参考链接：
http://masonry.desandro.com 参考网站
http://www.tuicool.com/articles/RvY3Yv css3瀑布流实现
http://www.jq22.com/jquery-info362 具体方法
http://bbs.blueidea.com/thread-3058927-1-1.html 实例
所以得出了下面的结论：
1.如果只做pc端，那么定宽度是最好的选择
2.如果做移动端，且设计对高度和元素间距要求不高，那么rem+js是最好的选择，一份css+一份js调节font-size搞定
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
4.为了更清晰的了解静态，自适应，流式，响应式布局的区别，可参考http://wow.techbrood.com/fiddle/1753 需登录qq
1.2 交互
确定布局后，还要看都有哪些交互要做。注重用户体验的产品确实值得学习和尊重。
说简单点就是人除了可以浏览这个web页面，还可以在这个web页面上进行一些操作，而这些操作还会跟你发生一系列互动
本人只做页面开发，对交互设计理解不深入，找来篇文章学习
http://www.missyuan.com/thread-682067-1-1.html
站在开发角度，我会把产品中的交互开发分为两个部分：
1.2.1 实现用户操作功能的交互开发
比如，表单验证，搜索功能，错误提示，下拉选项提示，等待加载页面，加载进度条，导航跟随等等。
交互设计是产品设计师已经设计好的，而我要做的是实现和增强用户操作的体验，例
搜索框里加上提示搜索的信息，焦点在框内时提示文字全部消失，以便用户直接输入
<input type="search" name="user_search" placeholder="Search W3School" />
1.2.2 提示用户操作的交互行为
• hover
设置图片hover放大，文字和按钮hover变色， title提示
• active
告诉用户他当前所在的位置，所以要有特色样式
• banner 左右两侧arrow按钮
提示用户焦点图可以上下翻页看
• backTop的提示
若页面超过两屏高，最好在底部设置个backTop按钮提示，方便用户再次看顶部的信息
• $(window).scroll(function(e) {
• if($(window).scrollTop() >$(window).height()){
• $('.backTop').show();
• }else{
• $('.backTop').hide();
• }
• });
• $('.backTop').click(function(e) {
• $('body,html').animate({'scrollTop':'0px'},500);
});
• 不可操作时的遮罩层
• <html>
• <head>
• <title>弹出一个窗口后，后面的层不可操作</title>
• <script>
• function show() //显示隐藏层和弹出层
• {
• var hideobj=document.getElementById("hidebg");
• hidebg.style.display="block"; //显示隐藏层
• hidebg.style.height=document.body.clientHeight+"px"; //设置隐藏层的高度为当前页面高度
• document.getElementById("hidebox").style.display="block"; //显示弹出层
• }
• function hide() //去除隐藏层和弹出层
• {
• document.getElementById("hidebg").style.display="none";
• document.getElementById("hidebox").style.display="none";
• }
• </script>
• <style>
• body { margin:0px;padding:0px;text-align: center;}
• #hidebg { position:absolute;left:0px;top:0px;
• background-color:#000;
• width:100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
• filter:alpha(opacity=60); /*设置透明度为60%*/
• opacity:0.6; /*非IE浏览器下设置透明度为60%*/
• display:none; /* http://www.bitsCN.com */
• z-Index:2;}
• #hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;}
• #content { text-align:center;cursor:pointer;z-Index:1;}
• </style>
• </head>
• <body>
• <div id="hidebg"></div>
• <div id="hidebox" onClick="hide();">点击关闭</div>
• <div id="content" onClick="show();">点击试试</div>
• </body>
</html>
• 加载进度条和自定义加载动画插件
介绍两个我知道的
o progress.js
http://blog.csdn.net/joyhen/article/details/24458427 官网和下载地址在里面
http://www.cnblogs.com/Wayou/p/gmail_like_page_loading_progress_bar.html自定义动画写法
优点： 能自定义加载动画
缺点： 依赖于jquery.min.js ,不轻便
o pace.js
http://github.hubspot.com/pace/docs/welcome/
优点： 轻便，官网有多个模板可用
缺点： 不能自定义加载动画
2.实现
2.1 技术难点
每个项目可能都会遇到自己没实现过的需求，怎么办？莫慌，
1.先google些资料壮壮胆
2.分析和学习下他人实现的代码
3.自己写 #### 2.1 兼容demo
4.慢慢调试修改，直到达到自己项目中的需求
把难点攻克了，其他就都ok了，写项目心也不慌了
2.2 搬救兵，找外援
有些轮播，电梯导航，分辨率适配，自己不会写或懒得写的需求，可以让框架，插件上。
2.2.1框架
我常用的有 bootstrap 框架和移动端的 fullpage 框架。
不过多介绍这两个框架，原因是前端框架很多，个人只停留在会用上，没有很深入研究。
新接触的框架，不会用，可以先写个demo，简单学习下
2.2.2插件
这个就多了，要看实现哪些效果，图表Echarts,分享插件，天气，日期，分页，滚动条，图片懒加载，加载进度条等。
不多说，看需求。
2.3 兼容
不得不做的事就是兼容，没办法，用户至上，一切为了用户。。。宝宝心里苦，但宝宝不说，就偷偷地写出来
兼容两个方面：
2.3.1 浏览器兼容
相比其他chrome,safari,firefox,opera,兼容IE8多一些,要为该挂的IE8兼容html5的标签，兼容css3众多美好属性，包括媒体查询。。。
• 让ie浏览器按最高标准解析页面，360浏览器按极速模式解析
• <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
• ie8 引用两个js可以解决适配问题和html5标签的兼容问题
• <!--[if IE 8]>
• <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
• <script src="js/html5shiv.js"></script>
<![endif]-->
• ie8让IE8支持placeholder属性
• jQuery('[placeholder]').focus(function() {
• var input = jQuery(this);
• if (input.val() == input.attr('placeholder')) {
• input.val('');
• input.removeClass('placeholder');
• }
• }).blur(function() {
• var input = jQuery(this);
• if (input.val() == '' || input.val() == input.attr('placeholder')) {
• input.addClass('placeholder');
• input.val(input.attr('placeholder'));
• }
• }).blur().parents('form').submit(function() {
• jQuery(this).find('[placeholder]').each(function() {
• var input = jQuery(this);
• if (input.val() == input.attr('placeholder')) {
• input.val('');
• }
• })
});
• 清除ie input 的默认样式
input::-ms-clear, input::-ms-reveal{display: none;}/* 清除ie中input的默认行为 */
• 清除ie 和火狐a标签获取焦点时的默认行为
a:focus{outline: none!important;-moz-outline: none;}/* 清除ie a标签获取焦点时的默认行为 */
• 清除浏览器的select默认样式
• select{
• border: 1px solid #ccc;
• -webkit-appearance: none;
• -moz-appearance: none;
• appearance: none;
• }
select::-ms-expand { display: none; }/* 清除浏览器的默认样式 */
• IE8支持rgba()属性写法
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="UTF-8">
• <title>IE8支持rgba()属性写法</title>
• <style>
• #box{
• width: 300px;
• height: 300px;
• border: 1px solid #ccc;
• background: rgba(0, 0, 0, .5);
• }
• </style>
• <!--[if lt IE 9]>
• <style type="text/css">
• #box{
• background: transparent;
• filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
• zoom: 1;
• }
• </style>
• <![endif]-->
• </head>
• <body>
• <div id="box"></div>
• </body>
</html>
• ie9以下兼容渐变背景色的滤镜属性
• .box {
• background: -webkit-linear-gradient(top, #3a8fd8, #449ce9);
• background: -moz-linear-gradient(top, #3a8fd8, #449ce9);
• background: -ms-linear-gradient(top, #3a8fd8, #449ce9);
• background: -o-linear-gradient(top, #3a8fd8, #449ce9);
• background: linear-gradient(top, #3a8fd8, #449ce9);
• -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a8fd8', endColorstr='#449ce9',GradientType='0')";
• /* IE8 */
• }
• GradientType='0'表示渐变从上到下
GradientType='1'表示渐变从左到右
• PIE兼容圆角border-radius，盒阴影box-shadow
• /*兼容圆角*/
• .pie_radius{
• width:360px;
• height:200px;
• background-color:#34538b;
• -moz-border-radius:8px;
• -webkit-border-radius:8px;
• border-radius:8px;
• position:relative; /*定位必须加上*/
• behavior:url(pie.htc); /*pie文件要放在根目录下，不要放在css文件里！*/
• }
• /*兼容盒阴影*/
• .pie_box_shadow{
• width:360px;
• height:200px;
• background-color:#34538b;
• -moz-box-shadow:1px 3px 3px #666;
• -webkit-box-shadow:1px 3px 3px #666;
• box-shadow:1px 3px 3px #666;
• position:relative;/*定位必须加上*/
• behavior:url(pie.htc); /*pie文件要放在根目录下，不要放在css文件里！*/
}
可参考 http://www.zhangxinxu.com/wordpress/2010/07/pie使ie支持css3圆角盒阴影与渐变渲染/
2.3.2 分辨率兼容
若只开发Web页面，自适应布局，同时用百分比定宽度差不多就够了；
若全上，那就响应式布局；
若移动，就rem和百分比一起用；
3. 测试
这个要看项目要求在哪些设备和分辨率下测试了，我从这几方面看，
• 页面样式
• 交互效果
• 加载速度
• 分辨率
• 不同设备
这块貌似没啥可说的，也是个细心又无聊的事儿，不过是自己写的项目，就不无聊了。用心才能发现更多问题，在用户使用产品前就把它们干掉。
4. 改bug
每个人在每个项目中，遇到的问题是不同的，而且bug可大可小，解决顺序当然是先挑最棘手的，影响最大的bug去啃。我认为改bug
一靠经验，二靠决心，三靠耐心
有种死磕的味道，我就是这样，当然解决不了的bug，若是不影响用户操作和很明显的视觉效果，可以先放下，毕竟一个项目的工期有限。
5. 优化
优化贯穿整个项目的开发和维护过程，时时刻刻都要想着怎样能让代码更精简，项目运行起来更轻便，加载更快。
5.1 代码优化
代码优化很重要，方便以后对项目的维护和重用，让自己和他人看着都很赏心悦目。
• 相同样式代码合并
• 每个页面都有的部分可以提出来，建个base.css
• 常用的结构或布局样式可以提取出来，自定义样式库，方便以后用
• 常用的css3动画效果可以提出来，自定义动画样式库
• 多次重复的事情css做起来麻烦，js就帮个忙
5.2 语义化标签
• html5标签语义化很强，可常用 兼容ie8的方法在兼容部分提到了
• logo,产品名称一般放到h1标签中的a标签里，有助搜索引擎优化
5.3 项目整体优化
• 多个小图标可以用sprite图,或fontIcon
• 引入的js文件较大，可用线上网址，更快，省资源
6. 压缩
• gulp自动压缩同步，用法 http://www.ydcss.com/archives/18
• js模块化编程 http://www.ruanyifeng.com/blog/2012/11/require_js.html
• Webpack打包 http://zhuanlan.zhihu.com/p/20367175
• js/css压缩 个人常用 http://tool.css-js.com
• 图片压缩 个人常用 https://tinypng.com
