最后
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
一、前言
APP开发过程中，当某些待集成三方SDK不得不使用原生技术栈集成实现时，抽离出公共功能部分并由H5实现是不错的解耦选择，为此便涉及到原生应用如何集成三方SDK，如何嵌套H5，并实现原生与H5通信。
二、嵌套H5应用并实现双方通信
NOTE: WKWebView replaces the UIWebView class in iOS 8 and later, and it replaces the WebView class in macOS 10.10 and later.
注意：自iOS8开始，WebView替换为WKWebView。
2.1 WKWebView 与JS 原生交互
2.1.1 H5页面嵌套
加载网页代码如下：
WKWebView \*webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
NSURL \*url = [NSURL URLWithString:@"http://www.taobao.com"];
NSURLRequest \*request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];
[self.view addSubview:webView];
2.1.2 常用代理方法
/\*\*
\* 根据webView、navigationAction相关信息决定这次跳转是否可以继续进行,这些信息包含HTTP发送请求，如头部包含User-Agent,Accept,refer
\* 在发送请求之前，决定是否跳转的代理
\* @param webView
\* @param navigationAction
\* @param decisionHandler
\*/
- (void)webView:(WKWebView \*)webView decidePolicyForNavigationAction:(WKNavigationAction \*)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
decisionHandler(WKNavigationActionPolicyAllow);
}
/\*\*
\* 这个代理方法表示当客户端收到服务器的响应头，根据response相关信息，可以决定这次跳转是否可以继续进行。
\* 在收到响应后，决定是否跳转的代理
\* @param webView
\* @param navigationResponse
\* @param decisionHandler
\*/
- (void)webView:(WKWebView \*)webView decidePolicyForNavigationResponse:(WKNavigationResponse \*)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{
decisionHandler(WKNavigationResponsePolicyAllow);
}
/\*\*
\* 准备加载页面。等同于UIWebViewDelegate: - webView:shouldStartLoadWithRequest:navigationType
\*
\* @param webView
\* @param navigation
\*/
- (void)webView:(WKWebView \*)webView didStartProvisionalNavigation:(null_unspecified WKNavigation \*)navigation{
}
/\*\*
\* 这个代理是服务器redirect时调用
\* 接收到服务器跳转请求的代理
\* @param webView
\* @param navigation
\*/
- (void)webView:(WKWebView \*)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation \*)navigation{
}
- (void)webView:(WKWebView \*)webView didFailProvisionalNavigation:(null_unspecified WKNavigation \*)navigation withError:(NSError \*)error{
}
/\*\*
\* 内容开始加载. 等同于UIWebViewDelegate: - webViewDidStartLoad:
\*
\* @param webView
\* @param navigation
\*/
- (void)webView:(WKWebView \*)webView didCommitNavigation:(null_unspecified WKNavigation \*)navigation{
}
/\*\*
\* 页面加载完成。 等同于UIWebViewDelegate: - webViewDidFinishLoad:
\*
\* @param webView
\* @param navigation
\*/
- (void)webView:(WKWebView \*)webView didFinishNavigation:(null_unspecified WKNavigation \*)navigation{
}
/\*\*
\* 页面加载失败。 等同于UIWebViewDelegate: - webView:didFailLoadWithError:
\*
\* @param webView
\* @param navigation
\* @param error
\*/
- (void)webView:(WKWebView \*)webView didFailNavigation:(null_unspecified WKNavigation \*)navigation withError:(NSError \*)error{
}
- (void)webViewWebContentProcessDidTerminate:(WKWebView \*)webView NS\_AVAILABLE(10_11, 9_0){
}
/\*
我们看看WKUIDelegate的几个代理方法，虽然不是必须实现的，但是如果我们的页面中有调用了js的alert、confirm、prompt方法，我们应该实现下面这几个代理方法，然后在原来这里调用native的弹出窗，因为使用WKWebView后，HTML中的alert、confirm、prompt方法调用是不会再弹出窗口了，只是转化成ios的native回调代理方法
\*/
#pragma mark - WKUIDelegate
- (void)webView:(WKWebView \*)webView runJavaScriptAlertPanelWithMessage:(NSString \*)message initiatedByFrame:(WKFrameInfo \*)frame completionHandler:(void (^)(void))completionHandler{
UIAlertController \*alertView = [UIAlertController alertControllerWithTitle:@"h5Container" message:message preferredStyle:UIAlertControllerStyleAlert];
// [alertView addTextFieldWithConfigurationHandler:^(UITextField \* \_Nonnull textField) {
// textField.textColor = [UIColor redColor];
// }];
[alertView addAction:[UIAlertAction actionWithTitle:@"我很确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction \* _Nonnull action) {
completionHandler();
}]];
[self presentViewController:alertView animated:YES completion:nil];
}
显然WKWebView的代理方法提供了比UIWebView颗粒度更细的方法。让开发者可以进行更加细致的配置和处理。
2.1.3 OC调用JS方法
WKWebView提供调用js代码的函数是：
- (void)evaluateJavaScript:(NSString \*)javaScriptString completionHandler:(void (^ __nullable)(__nullable id, NSError \* __nullable error))completionHandler;
比如在加载的HTML文件中有如下js代码：
<script type="text/javascript">
function hello(){
alert("你好！");
}
function helloWithName(name){
alert(name + "，你好！");
}
</script>
可以调用如下代码进行js的调用：
[_wkView evaluateJavaScript:@"hello()" completionHandler:^(id item, NSError \* error) {
}];
[_wkView evaluateJavaScript:@"helloWithName('jack')" completionHandler:^(id item, NSError \*error) {
}];
同UIWebView一样，也可以通过字符串的形式进行js调用。
NSString \*jsString = @"function sayHello(){ \
alert('jack11') \
} \
sayHello()";
[_wkView evaluateJavaScript:jsString completionHandler:^(id item, NSError \*error) {
}];
jsString = @" var p = document.createElement('p'); \
p.innerText = 'New Line'; \
document.body.appendChild(p); \
";
[_wkView evaluateJavaScript:jsString completionHandler:^(id item, NSError \*error) {
}];
2.1.4 JS调用OC方法
除了和UIWebView加载一个隐藏的ifame之外，WKWebView自身还提供了一套js调用native的规范。可以在初始化WKWebView的时候，设置一个config参数。
//高端配置
//创建配置
WKWebViewConfiguration \*config = [[WKWebViewConfiguration alloc] init];
//创建UserContentController(提供javaScript向webView发送消息的方法)
WKUserContentController \*userContent = [[WKUserContentController alloc] init];
//添加消息处理，注意：self指代的是需要遵守WKScriptMessageHandler协议，结束时需要移除
[userContent addScriptMessageHandler:self name:@"NativeMethod"];
//将UserContentController设置到配置文件中
config.userContentController = userContent;
//高端的自定义配置创建WKWebView
_wkView = [[YXWKView alloc] initWithFrame:self.view.bounds configuration:config];
NSURL \*url = [NSURL URLWithString:@"http://localhost:8080/myDiary/index.html"];
NSURLRequest \*request = [NSURLRequest requestWithURL:url];
[_wkView loadRequest:request];
_wkView.UIDelegate = self;
_wkView.navigationDelegate = self;
[self.view addSubview:_wkView];
在js可以通过NativeMethod这个Handler让js代码调用native。
比如在js代码中，新增了一个方法
<script type="text/javascript">
function invokeNativeMethod(){
window.webkit.messageHandlers.NativeMethod.postMessage("我要调用native的方法");
}
</script>
触发以上方法的时候，会在native以下方法中进行拦截处理。
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController \*)userContentController didReceiveScriptMessage:(WKScriptMessage \*)message{
//这里就是使用高端配置，js调用native的处理地方。我们可以根据name和body，进行桥协议的处理。
NSString \*messageName = message.name;
if ([@"NativeMethod" isEqualToString:messageName]) {
id messageBody = message.body;
NSLog(@"%@",messageBody);
}
}
最后总结下WKWebView和UIWebView应该如何取舍
WKWebView是苹果在WWDC2014发布会中发布IOS8的时候公布WebKit时候使用的新型的H5容器。它与UIWebView相比较，拥有更快的加载速度和性能，更低的内存占用。将UIWebViewDelegate和UIWebView重构成了14个类，3个协议，可以让开发者进行更加细致的配置。
但是WKWebView有一个最致命的缺陷，就是WKWebView的请求不能被NSURLProtocol截获。针对app开发中使用NSURLProtocol技术对于H5进行离线包的处理和H5的图片和Native的图片公用一套缓存的技术应用场景，WKWebView无法代替UIWebVIew，建议使用UIWebVIew。
2.2 JSCore 实现原生与H5交互
JSCore全称为JavaScriptCore，是苹果公司在iOS中加入的一个新的framework。该framework为OC与JS代码相互操作的提供了极大的便利。该工程默认是没有导入工程中的，需要手动添加。
添加完成后，可以看到JavaScriptCore.h中包含以下5个主要的文件。
#import "JSContext.h"
#import "JSValue.h"
#import "JSManagedValue.h"
#import "JSVirtualMachine.h"
#import "JSExport.h"
各文件头含义作用如下：
JSContext: 代表JavaScript的执行环境。可以创建JSContent在OC环境中执行JavaScript脚本，同时也可以在JavaScript脚本中访问OC中的值或者方法。JSValue：是OC和JavaScript值相互转化的桥梁。他提供了很多方法把OC和JavaScript的数据类型进行相互转化。其一一对应关系如下表所示：
JSManagedValue：JSValue的包装类。JS和OC对象的内存管理辅助对象。由于JS内存管理是垃圾回收，并且JS中的对象都是强引用，而OC是引用计数。如果双方相互引用，势必会造成循环引用，而导致内存泄露。因此，可以用JSManagedValue保存JSValue来避免。JSVirtualMachine： JS运行的虚拟机。可以支持并行的JavaScript执行，管理JavaScript和OC转换中的内存管理。JSExport：一个协议，如果JS对象想直接调用OC对象里面的方法和属性，那么这个OC对象只要实现这个JSExport协议就可以了。
2.2.1 OC调用H5方法并传参
1: 首先引入头文件
#import <JavaScriptCore/JavaScriptCore.h>
2: 设置 WKNavigationDelegate 代理 并实现以下代理方法：
- (void)webView:(WKWebView\*)webViewdidFinishNavigation:(WKNavigation\*)navigation {
//给H5的getInfo()方法传参
NSString \*webFunctionStr = [NSStringstringWithFormat:@"getInfo('%@')",@"参数aaa"];
//调用H5方法
[webView evaluateJavaScript:webFunctionStr completionHandler:^(id_Nullableresult,NSError\*_Nullableerror) {
AX\_LOG(@"%@---%@",error, result);
}];
}
2.2.2 H5给OC传参
//1: 创建网页配置对象
WKWebViewConfiguration \*config = [[WKWebViewConfiguration alloc] init];
// 2: (a)WKWebView注入ScriptMessageHandler设置代理方法self, (用于调用H5方法)
[config.userContentController addScriptMessageHandler:self name:@"H5\_OC"];
//3: 初始化WebView
_webView = [[WKWebView alloc]initWithFrame:CGRectMake(0,70, SCREEN_WIDTH, 1) configuration:config];
//实现ScriptMessageHandler代理方法
-(void)userContentController:(WKUserContentController \*)userContentController didReceiveScriptMessage:(WKScriptMessage \*)message {
//5: message为H5传给iOS的参数
NSDictionary \*messageDic = message.body;
NSLog(@"%@", messageDic);
//mj解析参数(此处可以忽略)
AXH5Model \*model = [AXH5Model mj_objectWithKeyValues:messageDic];
if([model.method isEqualToString:@"success"]) {
AX\_LOG(@"H5数据提交成功");
[self.navigationController popViewControllerAnimated:YES];
}
}
2.3 UIWebView的基本用法
2.1小节具体介绍了WKWebView的应用方法，对于UIWebView虽然官方不再推荐使用，但是对于技术爱好者来说，还是有必要学习了解下。毕竟针对某些特殊场景，UIWebView还是有用武之地的。
2.3.1 H5页面嵌套
UIWebView \*webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
webView.delegate = self;
[self.view addSubview:webView];
//网络地址
NSURL \*url = [[NSURL alloc] initWithString:@"http://www.taobao.com"];
NSURLRequest \*request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];
2.3.2 UIWebViewDelegate常用代理方法
//进行加载前的预判断，如果返回YES，则会进入后续流程（StartLoad,FinishLoad）。如果返回NO，这不会进入后续流程。
- (BOOL)webView:(UIWebView \*)webView shouldStartLoadWithRequest:(NSURLRequest \*)request navigationType:(UIWebViewNavigationType)navigationType;
//开始加载网页
- (void)webViewDidStartLoad:(UIWebView \*)webView;
//加载完成
- (void)webViewDidFinishLoad:(UIWebView \*)webView;
//加载失败
- (void)webView:(UIWebView \*)webView didFailLoadWithError:(nullable NSError \*)error;
2.3.3 OC调用JS方法
比如在加载的HTML文件中有如下js代码：
<script type="text/javascript">
function hello(){
alert("你好！");
}
function helloWithName(name){
alert(name + "，你好！");
}
</script>
可以调用 - (nullable NSString )stringByEvaluatingJavaScriptFromString:(NSString )script; 函数进行js调用。
[webView stringByEvaluatingJavaScriptFromString:@"hello()"];
[webView stringByEvaluatingJavaScriptFromString:@"helloWithName('jack')"];
js代码不一定要在js文件中预留，也可以在代码中通过字符串的形式进行调用，比如下面：
**这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道**
### HTML
* HTML5有哪些新特性？
* Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
* 如何实现浏览器内多个标签页之间的通信？
* ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？
* 简述⼀下src与href的区别？
* cookies,sessionStorage,localStorage 的区别？
* HTML5 的离线储存的使用和原理？
* 怎样处理 移动端 1px 被 渲染成 2px 问题？
* iframe 的优缺点？
* Canvas 和 SVG 图形的区别是什么？
### JavaScript
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**
* 问：0.1 + 0.2 === 0.3 嘛？为什么？
* JS 数据类型
* 写代码：实现函数能够深度克隆基本类型
* 事件流
* 事件是如何实现的？
* new 一个函数发生了什么
* 什么是作用域？
* JS 隐式转换，显示转换
* 了解 this 嘛，bind，call，apply 具体指什么
* 手写 bind、apply、call
* setTimeout(fn, 0)多久才执行，Event Loop
* 手写题：Promise 原理
* 说一下原型链和原型链的继承吧
* 数组能够调用的函数有那些？
* PWA使用过吗？serviceWorker的使用原理是啥？
* ES6 之前使用 prototype 实现继承
* 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？
* 事件循环机制 （Event Loop）
