1. About css style penetration
When we use UI library components, scopeds isolate styles and sometimes modify them without removing the scopeds property to cause style overrides between components. At this point we can penetrate scoped in a special way
Outer Container >>> assembly { }
Outer Container /deep/ assembly { }
Outer Container ::v-deep assembly { } // Recommend
2. Note the important writing in sass
// Writing of pairs overflow:(hidden !important); text-overflow:(ellipsis !important); white-space:(nowrap !important) ; // No more than one space for wrong writing overflow: (hidden !important); text-overflow: (ellipsis !important); white-space: (nowrap !important) ;
3.css variable global pollution problem (CSS-module)
Configuration Method Specific Baidu
Since css is global, conflicts occur when the variable className is the same.
You can use CSS-module in a webpack file to eliminate global pollution by compiling only style files in the referenced directory.
+ have access to css module Form + have access to css in js Form + css And like vue Write as a component, but use tools to transform it
1.Fully inline style 2. j-vue [j-vue address](https://github.com/LongTengDao/j-vue/) 3. sass Of CSS-BEM Naming Specification
4.Vue watch subcomponent listens for props, the parent component's first rendering cannot be triggered, what to do
Untriggered, no callback, first time
props: {
name: {
type: String,
}
},
watch: {
'name': function (value) {
this.getFileInfo(value)
}
}
Write complete will trigger immediately
props: {
name: {
type: String,
}
},
watch: {
'name':{
immediate:true,
handler:function(value){
this.getFileInfo(value)
}
}
}
5. Talk about how forEach and map stop looping
1. Normal for loop
1.continue When the program runs to continue； Statement terminates the current loop and enters the next one. It applies to all circular structures. 2.break When the program runs to break; When you execute a statement, you end the current loop and execute the statement that follows (outside) the loop. If you have a multi-level loop, only the current loop will exit, executing the statement after that loop, and the outer loop will not be affected. Generally used with judgment statements 3.return Terminate this method, and subsequent logic will not execute
2. Differences between forEach and map
- forEach does not support return returns, which are undefined and cannot be called in a chain.
- map returns a function, the original array is unchanged.
- There is no way to terminate or jump out of the forEach() loop unless an exception is thrown, so if you want to execute an array and return a Boolean value, you can use a general for loop, or Array.every() or Array.some();
map and forEach You can actually jump out of the loop, but not by yourself But throw it out new throw error() adopt try catch To catch this error, you can terminate the loop.
Refer to the Big Slave Blog, please move to the specific analysis
Classic Written Test
["1", "2", "3"].map(parseInt); //Result [1, NaN, NaN]
If you want to[1, 2,3]This should be done
function returnInt(element){
return parseInt(element,10);
}
["1", "2", "3"].map(returnInt);
This is mainly because parseInt()There are two parameters by default, and the second parameter is a binary number. When parsrInt When no parameters are passed in, and map()In the callback function, it will be passed three parameters, the second parameter is the index, obviously incorrect, so return NaN Yes.
forEach()and map()yes ECMA5 Newly introduced, which may not exist in other implementations of the standard, may be required before use Ployfill Once.
$.each()The method specifies the function to run for each matching element and returns false Can be used to stop the cycle early.
var myerror = null;
try{
arr.forEach(function(el,index){
if (el==20) {
console.log("try Medium 20,Can I quit??");//
foreach.break=new Error("StopIteration");
}else{
console.log(el);
}
});
}catch(e){
console.log(e.message);
if(e.message==="foreach is not defined") {
console.log("Jump out?");//
return;
}else throw e;
}//Can jump out
3. Substitutes
The difference between for in and for of
- for in traverses the index (that is, the key name) of the array, while for of traverses the array element values.
for in Trouble traversing arrays 1.index Index is a string number and cannot be directly geometric 2.Traversal order may not be in the internal order of the actual array 3.Use for in All enumerable properties of the array, including the prototype, are traversed. For example, the prototype method of Chestnut method and name attribute therefore for in Better for traversing objects, do not use for in Traverse through the array. for in The index (that is, the key name) of the array is traversed, and for of Array element values are traversed. for of Iterates through elements within an array, not its prototype properties method And index name
Please move on for more details
6. Shallow and deep copies
6.1 deep copy
1.Circular assignment 2.JSON.stringify(JSON.parse()),But not in objects Function and undefined Can't copy, find pair get Direct conversion of return values inside
6.shallow copy
1.Object.assign Unable to copy deep content,For shallow copies. Cannot be applied to objects inside set(),get()Copy with function 2.Object.create Prototype chain inheritance, or shallow copy of content, only copy set and get attribute
const ObjA = Object.create(obj) ObjA.data = 'a' ObjA.info.d = 'b' console.log(ObjA) // a console.log(ObjA.__proto__) //Print an obj object
6.3 Deep copy function
function checkType(any) {
return Object.prototype.toString.call(any).slice(8, -1)
}
function clone(any){
if(checkType(any) === 'Object') { // Copy Object
let o = {};
for(let key in any) {
o[key] = clone(any[key])
}
return o;
} else if(checkType(any) === 'Array') { // Copy Array
var arr = []
for(let i = 0,leng = any.length;i<leng;i++) {
arr[i] = clone(any[i])
}
return arr;
} else if(checkType(any) === 'Function') { // copying functions
return new Function('return '+any.toString()).call(this)
} else if(checkType(any) === 'Date') { // Copy Date
return new Date(any.valueOf())
} else if(checkType(any) === 'RegExp') { // Copy Regular
return new RegExp(any)
} else if(checkType(any) === 'Map') { // Copy Map Collection
let m = new Map()
any.forEach((v,k)=>{
m.set(k, clone(v))
})
return m
} else if(checkType(any) === 'Set') { // Copy Set Collection
let s = new Set()
for(let val of any.values()) {
s.add(clone(val))
}
return s
}
return any;
}
7. Is it possible to write asynchronous in computed properties
computed The result of the property is cached and changes depend on the responsive data Defined Function Receive return As a result, return Asynchronous request results are not available when executed synchronously
Learn more about the Event Loop JavaScript runtime: Event Loop
8. Has browser compatibility been written?
9.css Centering Problem
- flex layout
- display: table-cell
- Absolute father, two
- (with absolute layout) the absolute parent of the child, and the child elements are styled as follows
.father {
width: 500px;
height: 500px;
position: relative;
background-color: red;
}
.son {
width: 200px;
height: 200px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: black;
}
10. Differences in how events are monitored in js
Mode 1:
window.addEventListener('click', clickHandler, false);
Mode 2:
window.onclick = clickHandler;
Mode 1 can specify the stage in which the event is triggered (capture or bubble), but mode 2 cannot. Mode 1 can specify more than one callback function for each event; Mode 2 can only specify one callback function for each event, after which the specified callback function will override the previous callback function
Just record some of the places you think are remote and important during the interview. If there are any errors, please correct them!