120前端小疑难杂症(补充中)

1、中划线显示成下划线，是font-family:Arial;的问题，可把”Arial“换成”微软雅黑, PingFangSC-Regular, sans-serif“中的一个或多个均可
2、var str="this is GuShi";根据str的长度，动态设置<div>str</div>的宽度，有可能使GuShi换到下一行，用这样的代码解决str.split(' ').join('<span style="visibility:hidden">,</span> ')
3、指针、地址、引用
4、点击input，在它下面出现日期时间面板，点击input和面板以外的地方，面板消失。
方案一、在页面上方添加一个透明蒙版，蒙版上方添加面板，点击蒙版时，蒙版和面板都消失
方案二、给input绑定onblur事件，该事件触发时，面板消失。
5、Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
6、如果在label元素内点击文本，浏览器就会自动将焦点转到和标签关联的表单控件上。
7、angular的directive执行流程：（1）自定义标签属性传参，（2）相关js接受参数，（3）相关html接收参数。
8、当我们在事件处理函数中改变和调整state的值时，React会自动调用render()方法实现视图的刷新。
9、”函数执行“的代码外面，再包裹一层函数，涉及”先触发，后执行“与”先执行，后触发“的问题。
10、debugger调试工具说明
来源https://www.cnblogs.com/xiaoqi2018/p/10832069.html
(1)F8:进入下个断点
(2)F10:忽略代码内部实现，进入下个方法
(3)F11:单步调试，逐行执行
(4)shift+F11:跳出当前函数内部，执行下一步
11、弹窗拉伸：{padding-bottom:20px;resize:horizontal;}
12、滚动条挤占内容宽度、破坏布局的解决方案
(1)问题:当内容增多，滚动条从无到有时，它的出现挤压了内容宽度，导致原来设计好的布局被破坏。
(2)原因:滚动条的宽度是计算到内容 content 里的。
(3)解决思路:增加一个中间层，使得外部容器宽度保持设计宽度，内部元素排列保持不变。
13、myObject.getBoundingClientRect()返回(可视区内)盒子四边与视口顶部或左侧之间的距离，超出可视区的那部分盒子不算。
(1)myObject.getBoundingClientRect().top:盒子顶部与视口顶部之间的距离
(2)myObject.getBoundingClientRect().right:盒子右侧与视口左侧之间的距离
(3)myObject.getBoundingClientRect().bottom:盒子底部与视口顶部之间的距离
(4)myObject.getBoundingClientRect().left:盒子左侧与视口左侧之间的距离
14、实际运用
var this_bottom_top = $(this).get(0).getBoundingClientRect().bottom;
var footer_top_top = $('#footer').get(0).getBoundingClientRect().top;
var height = $('#ul' + id).height();
if (footer_top_top - this_bottom_top < height) {
$('#ul' + id).css({
'top': '',
'bottom': '24px'
});
}
14、在angular1中，运行$http().then().catch().finally()；then和catch两个函数同时被触发了，产生这一现象的原因是什么？
(1)如果$http()的返回值中有3XX、4XX、5XX等报错状态码，那么就直接执行catch，否则就执行then
(2)如果then中，有人为抛错，那么也会执行catch，否者不会执行catch
(3)promise内部的错误，不会影响外面的代码。

15、var ary=[1,2,3]
console.log(2 in ary)//true

16、return fn(Parma)与return 'fn(Parma)'的区别
（1）前者返回函数fn的执行结果，后者返回字符串，
（2）有时候函数的实参需要在这个地方传入，在其它地方运行时，可以按照后者方式处理
（3）当需要把这个字符串当函数语句运行的时候，只需把这个字符串放在eval()里即可
（4）也可以把字符串的形式写成这种形式:111111
17、 new Object()和 Object.create()
//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create
// new Object() 方式创建
var a = { rep : 'apple' }
var b = new Object(a)
console.log(b) // {rep: "apple"}
console.log(b.__proto__) // {}
console.log(b.__proto__.__proto__)
console.log(b.__proto__.__proto__.__proto__)
console.log(b.__proto__.__proto__.__proto__.__proto__)
// Object.create() 方式创建
var a = { rep: 'apple' }
var b = Object.create(a)
console.log(b) // {}
console.log(b.__proto__) // {rep: "apple"}
console.log(b.__proto__.__proto__)
console.log(b.__proto__.__proto__.__proto__)
console.log(b.__proto__.__proto__.__proto__.__proto__)
18、原型链
var obj = {}
function fn(){}
//1、对象与函数的原型
obj.__proto__ === Object.prototype;
fn.__proto__ === Function.prototype;
fn.prototype
fn.prototype.__proto__ === Object.prototype
//2、对象类与函数类的原型
Object.prototype.__proto__ === null;
Function.prototype
Function.prototype.__proto__ === Object.prototype
//3、对象对象与函数对象的原型
Object.__proto__ === Function.prototype
Function.__proto__ === Function.prototype
//https://www.jianshu.com/p/686b61c4a43d
 

 

转载于:https://www.cnblogs.com/gushixianqiancheng/p/11064108.html