《前端踩坑记录-新手村篇》
从去年8月决定做前端开始,已经有十个月的时间了。以前踩过的坑,还是需要在这里做一个总结,避免再踩。
脚手架
Yeoman的确是前端开发好工具,作为初学者可以在上面去看别人的项目框架快速入门。
Install: npm install --global yo gulp-cli bower generator-webapp
Run yo webapp
to scaffold your webapp
Run gulp serve
to preview and watch for changes
Run bower install --save <package>
to install frontend dependencies
Run gulp serve:test
to run the tests in the browser
Run gulp
to build your webapp for production
Run gulp serve:dist
to preview the production build
路径问题
gulp
打包部署时要注意路径是否正确,有时候本地、本地线上与打包给后台部署的环境路径都会不一样。默认是没有带路径的,目前我通常用相对路径。
../ 绝对定位
./ 相对定位
结构层
input[file]标签的accept=”image/*”属性响应很慢
input[file]标签的accept属性可用于指定上传文件的MIME类型。
<input type="file" name="file" class="element" accept="image/*">
这段代码在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题,可能要等 6~10s 才能弹出文件选择对话框。
在IE和Firefox中使用 accept=”image/*” 属性则没有发现响应延迟的问题。
解决办法如下:
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
accept=”image/” 属性会对每一个文件都遍历一次所有的”image/”文件类型,当文件较多时,文件的检验时间较长,这可能是Webkit的底层实现的bug。
另外,
accept=”audio/” 和 accept=”video/” 属性 在 Webkit浏览器下也会有同样的响应延迟的问题。
表现层
scss构架
sass/
– base/
– _reset.scss # Reset/normalize @import "base/reset";
– _typography.scss # Typography rules
– components/
– _buttons.scss # Buttons
– _carousel.scss # Carousel
– _cover.scss # Cover
– _dropdown.scss # Dropdown
– _navigation.scss # Navigation
– helpers/
– _variables.scss # Sass Variables
– _functions.scss # Sass Functions
– _mixins.scss # Sass Mixins
– _helpers.scss # Class & placeholders helpers
– layout/
– _grid.scss # Grid system
– _header.scss # Header
– _footer.scss # Footer
– _sidebar.scss # Sidebar
– _forms.scss # Forms
– pages/
– _home.scss # Home specific styles
– _contact.scss # Contact specific styles
– themes/
– _theme.scss # Default theme
– _admin.scss # Admin theme
– vendors/
– _bootstrap.scss # Bootstrap
– _jquery-ui.scss # jQuery UI
行为层
全局变量
为避免全局变量命名冲突,可以定义一个全局变量对象。
var App = {};
App.name = "wahaha";
App.index = 0;
事件绑定
最好不要把事件绑定写在ajax请求里,如果要这样写,遇到需要多次调用的请求,需要在.on('eventName',function(){...})
事件之前链式添加.off()
函数。
jquery插件开发
;(function($){
$.fn.functionName = function(option){
var defaultSetting = { key1:"value1",key2:2}; //设置默认参数
var setting = $.extend(defaultSetting,option); //获取自定义参数
return this; //支持链式调用
}
}(jQuery));
和后台交互
AJAX缓存
在IE浏览器上,jquery的ajax缓存使页面数据加载滞后于后台,需要手动设置。
(做ajax页面无刷新请求后台服务器数据的时候,IE下遭遇Ajax缓存,FF和Chrome均正常.在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱)
$.ajaxSetup({
// Disable caching of AJAX responses */
cache: false
});
IE下url请求带中文获取数据失败
在Chrome下,使用ajax的get方法请求数据时,url中带中文是没有问题的,但是在IE下,中文会被变成乱码发送过去,以至于无法获取数据。
通常对url需要用encodeURI
进行编码。