《前端踩坑记录-新手村篇》

从去年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 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类型。

这段代码在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题，可能要等 6~10s 才能弹出文件选择对话框。
在IE和Firefox中使用 accept=”image/*” 属性则没有发现响应延迟的问题。

解决办法如下：

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进行编码。