日常工作问题1 - 码农教程

innerText 和 innerHTML 的区别

innerText: 赋值 \n  会被转换成 <br> 标签

innerHTML: 赋值 \n  直接使用 \n

衍生的标题问题！

局部变量使用不当导致的问题

场景代码复现(demo版):

var  arr = [1,2,3];
var c = 1;

arr.every(function(value,key){

	if (false) {
		var c = 2;
		return true;
	}

	if (true) {
		console.log(c);
		return true;
	}
})

目标期待: 打印的的值 应该为 1

实际情况: 打印的值 却是 undefined

产生原因: 从该现象，推断出，var c = 2； 变量提升了，也就是说，在代码编译的过程中，即使 if 代码块没有 执行，里面的 变量也被提升了。所以 代码执行过程中 , var c;
但是 在代码执行的过程中，var c = 2；没有执行，所以。整个过程 c 都是 undefined

flex 实现居中

父元素: 
display:flex; justify-content:center;
align-items: center;

子元素: 
display:none; // 不设置的话，子元素无法设置超出父元素的宽度的数值

解决 select 选择同一个选项不触发事件的问题

<option :selected="showType === 3" value="3" style="display: none">{{showType === 0 ? "全部" : (showType === 1 ? "有标签" : "无标签")}}</option>

document.execCommand('copy') 失效

document.execCommand('copy') 无法起到作用。

原因: ajax 异步中 ，该方法无法使用. (其他的异步方式目前 setTimeout 正常)

\202D 隐藏字符

隐藏的字符

resize （css3）

resize: vertical (调整高度)

css相关

1. margin重叠: 相邻元素，重叠的margin，只会取最大值

2.box-sizing: 

content-box: 盒子的实际宽度=设置的width+padding+border

border-box:
盒子的实际宽度=设置的width（padding和border不会影响实际宽度）

java代码调试

配合 intellij 下载 lom 插件，打开debug模式

break 中断 for循环

document.execCommand("insertHTML") 导致 Vue 模板渲染的问题

document.execCommand("insertHTML",false,"<span style='color:red'>12312321321</span>")
this.html = "";


场景,在一个可编辑DIV中,动态插入一段标签。然后将数据清空。发现 只有 span 标签后面的 文本被清空了。


具体原因: 在第一次初始化后 vm.vnode 的最后一个子元素 text 文本节点。再 经过上一面的 代码后。原本的text节点被截取同时，增加了新的dom节点。而Vue在渲染的时候，没有找到新增元素节点进行操作。

正则匹配可有可无的规则

decimal = /^[0-1](\.\d{1,3})?$/;

匹配0-1的整数 或者  三位小数

小数可有可无（也就意味着 0 或者 1次）  因此可以使用 ? 来满足这个功能

overflow: hidden; 后位置发生偏移

行内块的基线为其文档流内最后一个行盒的基线，除非该行内块没有文档流内行盒或者其 overflow 属性计算值不为 visible，这种情况下基线为下外边距边缘。

通俗的方式

a 与 b 都是 inline-block且高与父元素 c 相同均为 30px，而在a加上 overflow:hidden; 会使 a 的底线与整个父元素 c 的 text baseline 对齐，相当于 c 中的文本获得了两倍的空间，整个 c 的 高度变大，仔细观察例子不难发现，a 中字符的底线与 b 中的字符的顶线对齐了

解决方法:

对Overflow:hidden的元素设置:
 vertical-align: bottom;

props的驼峰写法的问题

Prop 的大小写 (camelCase vs kebab-case)
HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
重申一次，如果你使用字符串模板，那么这个限制就不存在了。

Vue针对短横线分隔做了兼容

var camelizeRE = /-(\w)/g;
var camelize = cached(function (str) {
  return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
});

window.close

新版本 window.close 无效的问题

在业务中，最新版本谷歌浏览器 window.close 执行一次无效，不知道为啥。

element-ui的颜色计算方式

 function mixColor(color, percent) {
        let { red, green, blue } = getColorChannels(color);
        if (percent > 0) { // shade given color
          red *= 1 - percent;
          green *= 1 - percent;
          blue *= 1 - percent;
        } else { // tint given color
          red += (255 - red) * percent;
          green += (255 - green) * percent;
          blue += (255 - blue) * percent;
        }
        return `rgb(${ Math.round(red) }, ${ Math.round(green) }, ${ Math.round(blue) })`;
      }
      
      
function getColorChannels(color) {
        color = color.replace('#', '');
        if (/^[0-9a-fA-F]{3}$/.test(color)) {
          color = color.split('');
          for (let i = 2; i >= 0; i--) {
            color.splice(i, 0, color[i]);
          }
          color = color.join('');
        }
        if (/^[0-9a-fA-F]{6}$/.test(color)) {
          return {
            red: parseInt(color.slice(0, 2), 16),
            green: parseInt(color.slice(2, 4), 16),
            blue: parseInt(color.slice(4, 6), 16)
          };
        } else {
          return {
            red: 255,
            green: 255,
            blue: 255
          };
        }
      }

ElementUi时点击同一个路由，页面报错问题

解决方案: 捕捉错误，防止报错
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location: string): any {
    return (originalPush.call(this, location) as any).catch((err:any) => err)
};

获取某个月的前6个月的月份数组

function test(time) {
    const date = new Date(time);
    let arr = [];
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let all = y * 12 + m;

    for (let i = all - 6; i < all; i ++) {
        const year = Math.floor(i / 12);
        let month = (i % 12) + 1;
        month =  (month < 10) ? "0" + month : month;
        arr.push(year + '' + month)
    }
    return arr
}

test('2019-5');

关于background-size 引起的理解问题

1. 有效的background-size 写法

background: 
background-size: 

2. 无效的background-size 写法
background-size: 
background: 

具体原因不详

原文地址：https://www.cnblogs.com/jiabaochuan/p/12108390.html