近来学习 webpack 了，有了解到 CommonsChunkPlugin 插件用来解决长效缓存的问题。那么问题来了，怎么用？怎么用好？

最近使用这个 slot, scopeSlot 真的是头大，因为官网本来介绍就少，只能用到哪不会，再查，最后东拼西凑，好像明白了什么… 厉害了，我是你的哥.

最近的学习工作中都用到了饿了么的 element-ui, 以及移动端的 Mint-ui, 借此机会，想深入学习 Vue 的组件开发流程及原理，故写此篇博客，记录所学及所感.

阅读全文 »

事件

file 主要用到 click 和 change 事件，click 是点击后产生，change 是选择文件后属性值改变后产生。一般用到 change 事件.

清空值

IE8+ 不支持改变值为”” 而清空 file 选择文件。可以通过如下方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var isIE = window.navigator.appName == 'Microsoft Internet Explorer'
if (isIE) { 
  var inputClone = this.$input.clone(true);
  this.$input.after(inputClone);
  this.$input.remove();
  this.$input = inputClone;
} 
这种方式是克隆后替换


或者设置file元素
$("#file")[0].outerHTML = $("#file")[0].outerHTML;
也可以达到清空效果

1,css 中引用了，名称都对了，但引用不上？
可能是路径不对，名称，css 选择器的结构，其中，更有可能的是，css 中添加了 // 双斜线注释。这在 css 中是不合法的。会导致下一行失效。

2, 引用了 bootstrap-fileinput 插件，结合 ajaxFileUpload 发送文件时起冲突，导致发送一次后无法显示的问题.
这是因为 ajaxFileUpload 原理是克隆原 input 元素，克隆时导致 bootstrap-fileinput 对 input 绑定的 data 数据发生改变 (主要是由 this 指针引起), 从而导致 span 元素不能正确显示选择的文件名称。解决方式是每次 ajaxFileUpload 请求之后，将外层 [data-provides=”fileinput”] 元素用 outerHTML 覆盖自身，此时便会清空 data 数据，在 bootstrap-fileinput 中会自动添加 data 数据，并且需要手动设置 input [file] 元素的 name 属性。达到修复的目的.

3, 限制 input 输入内容格式，可在 keyup 事件中使用正则表达式去除非想要信息。如，只想要数字和英文逗号，则可以，replace (/[^\d,]/g, ‘’);

4,$(“#selectedUser”).val ().split (“,”), 就算 $(“#selectedUser”).val () 是’’空字符串，但是 split 后为 [“”]

5,jquery.clone 在 IE 中，复制 input:file 元素时，貌似不会复制 files 属性，导致后面程序访问不了选择的文件。解决方法，手动 $.extends (新.files, 旧.files); 即可.

webpack 打包相关问题：
1，打包后除了字体资源路径不对，其它都对。
原因可能是 output.publicPath 是一个相对地址。在实际上线时，publicPath 要求是一个绝对地址，以”/“开头

使用 Vuex 的坑点。
按照 Vuex 的官方文档介绍，讲道理，store 应该只包含值为原始值的键值对，如：

1
2
3
4
5
6
7

let store = {
	name: 'tzx',//字符串
	age: 22, // 数字
	testNull: null, // null
	testUndefined: undefined, // undefined
	isMarried: false, //bool
}

如果 store 包含对象的话，操作起来时一定要更加小心。因为我们都知道对象是引用类型，一个地方变了，会引起所有引用它的变量改变。举个栗子，在 Vue 组件的 mounted 中使用 getter 获取 store 中的一个对象，如下：

1
2
3
4
5
6
7

let store = {
	tzx: {
		age: 22,
		isMarried: false,
		...
	}
}

如果将获取到的 tzx 这个对象直接赋予表格的 v-model，问题就出来了。因为获取的是引用。我们在表格中直接操作了 tzx 这个对象，相当于直接操作了 store 中的对象，相当于没有经过 mutation 或者 action 就完成了操作！！！这是很可怕的。
解决办法也是有的，就是获取数据时，新建一个对象，操作这个新的对象，就跟 store 中的对象没有半毛钱的关系了（对象中不包含其它引用类型）。

1
2
3
4
5

mounted(){
	this.tableEditData = {...this.$store.getters["getterName"]};
}
//这样即可。或者用es5的
this.tableEditData = Object.create({}, this.$store.getters["getterName"])

同理，在进行操作（mutation、action）时，提供的数据对象也要新建，不能直接使用从 data 中的数据，因为对象就是引用类型，你这里提供给 Vuex 一个引用了当前 data 中的对象，那么当你再次修改 table 数据时，store 中的数据又再次改变了。原因你们懂了吧。。。可怕。
讲道理的话，Vuex 中的 store 应该只存储原始类型，因为 Vuex 的出发点就是构造一个全局的状态库。这些状态用原始值完全足够了，你说是吗？？

post 提交表单的形式
如果请求的 Content-Type 设置为 application/x-www-form-urlencoded，那么这个 Post 请求被认为是 HTTP POST 表单请求，参数出现在 form data；其他情况如使用原生 AJAX 的 POST 请求如果不指定请求头 Request Header，默认使用的 Content-Type 是 text/plain;charset=UTF-8，或者 application/json ，参数出现在 Request payload 块。详情可参考这个博客. 意思是原生 form 表单提交，form data 内的数据其实都是 name=tzx&passrd=123456&…. 这种形式的。而 ajax 默认提交的是一个 json 对象。在后端已布置的情况下，要注意前端请求的格式.

sass 中使用 webpack 别名引用资源时，在别名前添加～即可. webpack github 原话:

1
2
3
4

webpack provides an advanced mechanism to resolve files. The sass-loader uses node-sass' custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from node_modules. Just prepend them with a ~ to tell webpack that this is not a relative import:

@import "~bootstrap/dist/css/bootstrap";
It's important to only prepend it with ~, because ~/ resolves to the home directory. webpack needs to distinguish between bootstrap and ~bootstrap because CSS and Sass files have no special syntax for importing relative files. Writing @import "file" is the same as @import "./file";