前端如何开始一个新项目

情景1

1.浏览器兼容 IE8+，webkit, firefox，opera

2.栅格系统 bootstrap，用于快速布局

3.准备一份自己积累的css文件，如base.css其中内容是之前工作积累的常用css如

• 定位
• 文本溢出
• 外边距，内边距
• z-index
• 基础文字颜色规范
• 文字大小规范
• 内容溢出处理
• 光标样式
• 文本换行处理

 

4.准备一份自己积累的js文件，如Utils.js其中内容是之前工作积累的常用的js方法如

• 获取cookie，设置cookie，清除cookie
• 获取sessionStorage,设置sessionStorage，清除sessioStorage
• 获取localStorage，设置localStorage，清除localStorage
• 验证码倒计时
• 天-时-分-秒  倒计时
• 获取url中的参数
• 多级联动
• 通用对话框
• 图标状态切换时一律加active样式类
• 简易搜索
• 简易日历

 

 

5.便捷的插件

• clamp.js用于统一处理各种浏览器的文字溢出样式
• jquery.mCustomScrollbar.min.js用于统一处理各种浏览器的滚动条样式，注意，动态生成的dom渲染会有问题

6.应该注意的细节点

　　textarea标签中的placeholder问题， textarea的开头标签和结尾标签中间不要有空格，否则，placeholder的效果不会出现

　　eg:

       <textarea placeholder="请填写内容~"></textarea> // 提示内容可以显示

　　<textarea placeholder="请填写内容~">      </textarea> // 提示内容不能显示

       标题点击范围问题，因为h1~h6等的标题标签是块级元素，很多地方是需要点击的，此时，要把他们的display类型转为display:inline-block;因为点击区域只限余有文字的部分，而不是整个标题标签部分，bug中常出现类似问题

 7.通用的交互一定要抽出来写，被抽出来的内容的逻辑应该足够简单，这将对后面的交互修改有极大的帮助

 8. 移动端调试

 调试工具：chrome://inspect/#devices

 具体调试方法： http://blog.csdn.net/byc233518/article/details/52437498