###

简单来说，axios是vue-resource的替代品，基于Promise的HTTP请求库，适用于浏览器端和node.js。

vue-router

routes

1. 利用vue懒加载和webpack的代码分割，可以按需加载router组件，有效优化。
   resolve => require(['../components/main'], resolve)
2. component 一个组件，对应 name=’default’ 的 router-view，当然，未命名的router-view的默认name就是default， 所以有时候可以省略
3. components 是组件对象， key对应不同的视图名

select2官方文档描述的 templateResult option。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//自定义select2 option 展示模板
function columnSelectFormat(selectDom){
    selectDom.select2({templateResult:function(state){
        var dom = $(state.element);
        if ( !dom.val() )
            return '(value为空)';
        var $state = $('<div title="'+dom.text()+'"><span>'+dom.text()+'</span><span>' + dom.val() + '</span></div>');
        return $state;
    }, templateSelection: function(state){
        var dom = $(state.element);
        if ( !dom.val() )
            return '(value为空)';
        var $state = $('<div title="'+dom.text()+'"><span>'+dom.text()+'</span><span>' + dom.val() + '</span></div>');
        return $state;
    }});
}

// $.prototype
$.fn.extend({
    columnSelectFormat: function(){
        columnSelectFormat(this);
    }
});

CodeMirror显示ddl未更新问题

现象: 在配置框中回显保存的配置数据，然后显示配置框，但是CodeMirror设置的数据没有自动更新，但是点击一下ddl显示框，马上就更新了。

先用editor.doc.getValue()，查看当前的设置的数据，发现与设置的数据相同，但是页面显示没有更新为设置的值。
查找资料后发现，display:none 隐藏的DOM， editor.doc.setValue(data)后，页面数据不会自动更新，解决方法是：显示配置框后，执行editor.refresh()进行刷新

select2样式宽度问题

现象：同样是在配置框设置了select初始宽度为100%，进行select2()，切换显示配置后，select2宽度只有默认宽度，不是select设置的100%

基于之前的经验，然后在F12 console中，对select再次进行select2()，发现样式显示正确了。
一样的问题，也是在隐藏的DOM中select2因为取不到select的宽度，不能自动适配，需要显示select所在的DOM后，再次进行select2()。

###
利用formData传递参数，xhr.upload.progress 方法得到上传进度 并清空input:file 当前值，可以重复上传文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$('.file-btn').on('change', '#fileupload', function(e){
    var file = $(this)[0].files     //files 文件列表

    for ( var i=0,len=file.length; i<len; i++ ){
        var formData = new FormData();
        formData.append('file', file[i]);
        $.ajax({
            url: 'upload',         // upload url
            type:'post',
            data: formData,       // 参数
            contentType: false,
            processData: false,
            xhr: function()       //xhr对象，得到客户端发出去的进度
            {
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt){
                    if (evt.lengthComputable) {  
                        var percentComplete = parseInt(evt.loaded * 100 / evt.total);
                    }
                }, false);
                return xhr;
            },
            success: function(data){
                // 上传接口 回调处理
                // code
            }
        });
    }

    // 清空当前的input:file值，可以连续上传同名文件
    var newDom = $(this).clone().val('');  
    $(this).remove();
    $('.file-btn').append(newDom);
});

常见思路

将默认的input:file隐藏，然后让外层容器的按钮样式展示出来。

方法1：

将input:file透明度设置为0，并设置大小，将外层的容器设置样式。

1
2
3
4
5
6
7

<div class="file-btn">
    <a>添加文件</a>
    <input autocomplete="off" type="file" id="fileupload" name="files" class="add-file" multiple>
</div>

.file-btn{float: left;background: #004c6f;line-height: 30px;width:100px; text-align:center;position: relative; text-indent:-200em}
.add-file{position: absolute;width: 100px;height: 30px;left:0;top:0;opacity: 0;cursor: pointer;}

方法2：

隐藏input:file，利用label标签。
label有个特殊的聚焦特性，点击label区域，相当于点击其对应的input区域，有两种写法：

1. label for id 方法， <label for="inputFile"></label><input type="file" id="inputFile">
2. label包含input方法, <label><input type="file"></label>

功能

1. 同时处理多个web文件
2. css js 压缩合并
3. 资源版本号替换
4. 监听资源变化，进行压缩合并操作

项目结构

/resources
    /common                //common源文件
    /js
    /sass
    /libs                  //资源库文件
    /dist
        /testA
            lib.min.js
            lib.min.css
            testA.js
            testA.css
        /testB
            lib.min.js
            lib.min.css
            testB.js
            testB.css
        /common  
            common.css
            common.js  

/resources/common 是公共的common.css common.js 源文件， 构建后在 /dist/common/ 下
/resources/sass, resources/js 是.scss .js 源文件

POST GET PUT DELETE 4种方式大概类似与 “CRUD”.

POST 相当于 新建资源
GET 从服务端接受资源
PUT 更新资源
DELETE 删除资源

幂等的概念： f(x) = f( f( f( f(x) ) ) )

区别

GET get 是安全的， 即不会更改服务端资源， 一个GET请求， 1次或者多次， 得到的结果是一样的， 具有幂等性。
POST 新建资源会有副作用，即 会增加资源， 不是安全的， 多次请求会产生多个新建资源，是非幂等的。
PUT 更新资源，提交相同的更新数据，1次更新或者多次更新， 更新的资源是一样的， 所以是 幂等的。
DELETE 一次或多次删除一个资源， 结果都是删除目标资源， 是幂等的

cron 表达式是用来配置CronTrigger, 执行指定任务， 如： 周期性执行某个数据统计。

格式

cron 表达式有7位， 格式如： “s m h d M w y” .

1. s : 表示秒
2. m : 表示分
3. h : 表示小时
4. d : 表示天
5. M : 表示月
6. w : 表示周
7. y : 表示年

示例：
“10 11 12 1 12 ? 2017” —— 定时执行 2017/12/01 12:11:10
“5 6 /1 ?” —— 每小时 6 分 5秒 执行
“ ?” —— 立即执行
“0 12 17 /1 ?” —— 每天 17:12:0
“0 12 17 3 /1 ?” —— 每月3号 17:12:0
“0 12 17 ? * 3,4” —— 每周2,3 17：12：0

1. 最后一位 “年” 可省略
2. 星期数字是 1-7， 星期日为1，星期一为2

特殊字符的作用

1. “/“ 这个符号代表该时间单位 进行重复执行。 “5 6 /1 ?” 表示每小时6分5秒， “5 /1 * ?” 表示每分5秒
2. “*” 通配符，不进行匹配验证或者说任意数字都行
3. “?” 验证匹配，用于和其他单位时间进行匹配验证， 如： 天 与 周 的验证匹配， 周 与 月 的验证等

firefox 输入框自动填充问题

select input 刷新页面后自动填充

场景：

1. 比如选择了一个select值后，马上刷新页面，firefox将自动切换后上一次选中的值，而不是html 中select 的第一个值。
2. 在input输入框中填写了数据，刷新页面，会默认填充上一次的数据
   解决方法：
   autocomplete="off" <select autocomplete="off"></select> <input type="text" autocomplete="off" />

password 密码域的自动填充

如果一个 <input type="password"> 前面跟着一个 <input type="text"> ， firefox 会自动记录这个表单的帐号和密码， 即使这两个输入框不是帐号与密码的关系。。
解决方法：
<input type="text" name="password" onfocus="this.type='password'">

chrome 同步请求渲染问题