总结
- 对于框架原理只能说个大概,真的深入某一部分具体的代码和实现方式就只能写出一个框架,许多细节注意不到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
算法方面还是很薄弱,好在面试官都很和蔼可亲,擅长发现人的美哈哈哈…(最好多刷一刷,不然影响你的工资和成功率???)
-
在投递简历之前,最好通过各种渠道找到公司内部的人,先提前了解业务,也可以帮助后期优秀 offer 的决策。
-
要勇于说不,对于某些 offer 待遇不满意、业务不喜欢,应该相信自己,不要因为当下没有更好的 offer 而投降,一份工作短则一年长则 N 年,为了幸福生活要慎重选择!!!
第一次跳槽十分忐忑不安,和没毕业的时候开始找工作是一样的感受,真的要相信自己,有条不紊的进行。如果有我能帮忙的地方欢迎随时找我,比如简历修改、内推、最起码,可以把烦心事说一说,人嘛都会有苦恼的~
祝大家都有美好的未来,拿下满意的 offer。
二、WebView 使用样例
2.1 通过 url 地址加载网页
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Dimensions,
Text,
View,
WebView
} from 'react-native';
//获取设备的宽度和高度
var {
height: deviceHeight,
width: deviceWidth
} = Dimensions.get('window');
//默认应用的容器组件
class App extends Component {
//渲染
render() {
return (
<View style={styles.container}>
<WebView bounces={false}
scalesPageToFit={true}
source={{uri:"https://shq5785.blog.csdn.net/",method: 'GET'}}
style={{width:deviceWidth, height:deviceHeight}}>
</WebView>
</View>
);
}
}
//样式定义
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop:20
}
});
AppRegistry.registerComponent('HelloWorld', () => App);
2.2 加载 html 代码
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Dimensions,
Text,
View,
WebView
} from 'react-native';
//获取设备的宽度和高度
var {
height: deviceHeight,
width: deviceWidth
} = Dimensions.get('window');
//默认应用的容器组件
class App extends Component {
//渲染
render() {
return (
<View style={styles.container}>
<WebView bounces={false}
scalesPageToFit={true}
source={{html:"<h1 style='color:#ff0000'>欢迎访问 https://shq5785.blog.csdn.net/</h1>"}}
style={{width:deviceWidth, height:deviceHeight}}>
</WebView>
</View>
);
}
}
//样式定义
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop:20
}
});
AppRegistry.registerComponent('HelloWorld', () => App);
2.3 RN -> HTML5 通信
当WebView
加载html
时,可实现html
和rn
之间的通信。rn
向html
发送数据可以通过postMessage
函数实现。如下:
RN
<WebView
ref={(view) => (this.webView = view)}
useWebKit={false}
onLoad={() => {
let data = {
name: userInfo.usrName
};
this.webView.postMessage(JSON.stringify(data));
}}
onError={(event) => {
console.log(`==webViewError:${JSON.stringify(event.nativeEvent)}`);
}}
onMessage={(event) => {
this.\_onH5Message(event);
}}
automaticallyAdjustContentInsets={false}
contentInset={{ top: 0, left: 0, bottom: -1, right: 0 }}
onScroll={(event) => this.\_onScroll(event)}
style={styles.webview}
source={this.html ? { html: this.html } : { uri: this.url }}
bounces={false}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
/>
html
// 在html中注册事件接收rn发过来的数据并显示在html中
document.addEventListener('message', function listener(RnData) {
messagesReceivedFromReactNative += 1;
document.getElementsByTagName('p')[0].innerHTML =
'从React Native接收的消息: ' + messagesReceivedFromReactNative;
document.getElementsByTagName('p')[1].innerHTML = RnData.data;
// 获取接收后的数据后,及时清除监听器
document.removeEventListener('message', listener)
});
在html
中定义一个按钮,并添加事件向rn
发送数据:
//window.postMessage向rn发送数据
document.getElementsByTagName('button')[0].addEventListener('click', function() {
window.postMessage('这是html发送到RN的消息');
});
当html
中调用了window.postMessage
函数后,WebView
的onMessage
函数将会被回调,用来处理html
向rn
发送的数据,可以通过e.nativeEvent.data
获取发送过来的数据。
// 接收HTML发出的数据
_onH5Message = (e) => {
this.setState({
messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1,
message: e.nativeEvent.data,
})
Alert.alert(e.nativeEvent.data)
}
2.4 HTML5(Vue) -> RN 通信
HTML5
const message = {
flag: 'previewIamge'
filePath: filePath
}
window.ReactNativeWebView.postMessage(Json.stringify(message))
RN
还是通过WebView
提供的onMessage
属性完成回调。
<WebView
ref={(view) => (this.webView = view)}
useWebKit={false}
onLoad={() => {
let data = {
name: userInfo.usrName
};
this.webView.postMessage(JSON.stringify(data));
}}
onError={(event) => {
console.log(`==webViewError:${JSON.stringify(event.nativeEvent)}`);
}}
onMessage={(event) => {
this.\_onH5Message(event);
}}
automaticallyAdjustContentInsets={false}
contentInset={{ top: 0, left: 0, bottom: -1, right: 0 }}
onScroll={(event) => this.\_onScroll(event)}
style={styles.webview}
source={this.html ? { html: this.html } : { uri: this.url }}
bounces={false}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
/>
回调函数_onH5Message()
实现逻辑如下:
// 接收HTML发出的数据
_onH5Message = (e) => {
this.setState({
messagesReceivedFromWebView: this.state.messagesReceivedFromWebView + 1,
message: e.nativeEvent.data,
})
Alert.alert(e.nativeEvent.data)
}
#### 最后
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
就答题情况而言,第一问100%都可以回答正确,第二问大概只有50%正确率,第三问能回答正确的就不多了,第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法,都是一些可能会遇到的场景,而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了,希望大家通过此文了解js一些特性。
并祝愿大家在新的一年找工作面试中胆大心细,发挥出最好的水平,找到一份理想的工作。