npm参数

npm init -y

-y 是初始化package.json的时候省略掉输入各种信息的步骤,都使用默认值

npm install module_name –save-dev

–save-dev 自动将依赖的模块加到devDependencies中

–save 自动将依赖的模块加到dependencies中

Chrome根据DOM属性加js断点

有的时候调页面样式时会莫名其妙出现错,比如某个东西不该显示的时候显示出来了。或者代码太多,不记得是哪个地方控制的这个地方。或者想看看别人页面的代码是怎么实现的。这时可以利用Chome的这个功能来调试。

1.选中要观察的DOM,右键”break on” -> “attribute modifications”来观察这个DOM的属性变化(一般情况下改变样式都是在改class和style属性)。

2.正常操作触发这个DOM的属性变化,当发生变化后会自动跳到断点初,这时看右边的call stack即可找到是哪个地方修改的属性。如果代码压缩了不方便看,可以点左下角的”{}”按钮来格式化代码。

 

AngularJS拦截$http请求

$httpProvider.interceptors.push(['$q',function ($q) {
    return {
        request: function (config) {
            if(config.url==='/admin.php') {
                return $q.reject('no auth!');
            }
            return config;
        },
        responseError: function(rejection) {
            if(rejection==='no auth!') {
                alert('无权限!!!');
                return {
                    data: {
                        errno: -1,
                        error:'无权限'
                    }
                }
            }
            return $q.reject(rejection);
        }
    }
}]);

flex-box布局上下分栏

.testbox{
  position: relative;
  height:300px;
  border: 4px solid green;
  width: 400px;
}
.flex-rows {
  display: flex;
  flex-direction: column;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.flex-rows nav{
  background-color: #ccc;
}
.flex-rows article {
  background-color: #cdc;
  height:100%;
  position: relative;
}
.flex-rows article > .scrollview {
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow: auto;
}
<div class="testbox">
  <div class="flex-rows">
    <nav>
      Nav.... height:auto
    </nav>
    <article>
      <div class="scrollview">
        <ol>
          <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
          <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
          <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
          <li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
        </ol>
      </div>
    </article>
  </div>
</div>

See the Pen flex-box布局上下分栏 by Fan Yanan (@fanyanan) on CodePen.light

ISO8601时间格式

new Date('2016-10-17 10:00:00');在Safari下会被认为是Invalid Date。

需要按照标准的IOS8601格式,如:new Date('2016-10-17T10:00:00');

或严谨点儿带上时区的new Date('2016-10-17T10:00:00+08:00');

Javascript导出Excel

  1. 引用ExcelBuilder
  2. 创建workbook
    var workbook = ExcelBuilder.createWorkbook();
  3. 创建worksheet
    var worksheet = workbook.createWorksheet({name: 'Sheet 1'});
    workbook.addWorksheet(worksheet);
  4. 加载数据
    var data = [['Name','Gender','Age']];
    data.push(['Zhang San','M', 24]);
    data.push(['Li Si','F', 18]);
    data.push(['Wang Wu','M', 22]);
    worksheet.setData(data);
  5. 下载
    var blob = ExcelBuilder.createFile(workbook, {type:'blob'});
    var url = URL.createObjectURL(blob);
    var a = document.createElement('A');
    a.href = url;
    a.download = Date.now()+'.xlsx';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    
    
  • 自动计算列宽
    //定义每个单字节的宽度
    var LETTER_WIDTH = 1.11;
    
    //定义每列最大宽度
    var MAX_COLUMN_WIDTH = 80;
    
    //定义每列的最小宽度
    var columns = [
    	{width: 10},
    	{width: 10},
    	{width: 10}
    ];
    
    //添加数据时遍历每一行,计算最大宽度
    var autoFitWidth = function(row) {
    	$.each(row, function(i,str){
    		if(str!==null&&str!==undefined&&str!=='') {
    			//英文占一个字节宽度,中文占两个
    			var match = str.toString().match(/[\\0-\\255]/ig);
    			var en = match==null?0:match.length;
    			var w = (str.length * 2 - en) * LETTER_WIDTH;
    			columns[i].width = Math.min(Math.max(columns[i].width, w), MAX_COLUMN_WIDTH);
    		}
    	});
    };
    
    //遍历完数据后将列的设置添加到worksheet中
    worksheet.setColumns(columns);
  • 过滤特殊字符
    //一些特殊字符会导致excel报错
    var specialChar = /[\u0000-\u0008\u000b\u000c\u000d-\u001f]/ig;
    val = val.replace(specialChar,'');
  • 自动换行,顶部对齐
    //创建一种样式
    var format1 = workbook.getStyleSheet().createFormat({
    	alignment:{
    		vertical:'top',
    		wrapText: true
    	}
    });
    //填充数据,给单元格增加样式
    var data = [
    	[
    		{value:'row1_col1\nline2\nline3','metadata':{'style':format1}},
    		{value:'row1_col2'},
    		'row_col3'
    	],
    	[
    		'row2_col1','row2_col2','row2_col3'
    	]
    ]
  • 全局默认样式
    workbook.getStyleSheet().masterCellFormats[0].alignment ={
    	vertical:'top',
    	wrapText: true
    };