web项目开发流程小结

随着开发项目的增多，自己慢慢摸索出一条开发流程之路，在此记下。

想法 --> 实现 --> 测试 --> 改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.jq-school.com/Show.aspx?id=333 概念理解
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 实现用户操作功能的交互开发

比如，表单验证，搜索功能，错误提示，下拉选项提示，等待加载页面，加载进度条，导航跟随等等。
交互设计是产品设计师已经设计好的，而我要做的是实现和增强用户操作的体验，例
搜索框里加上提示搜索的信息，焦点在框内时提示文字全部消失，以便用户直接输入

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);
 });

不可操作时的遮罩层



弹出一个窗口后，后面的层不可操作





点击关闭
点击试试

加载进度条和自定义加载动画插件
介绍两个我知道的
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 ,不轻便
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浏览器按极速模式解析

ie8 引用两个js可以解决适配问题和html5标签的兼容问题

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()属性写法




    
    IE8支持rgba()属性写法

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