总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

• JavaScript 学习笔记

• Vue 学习笔记

  首先 Native 端需要实现这么一个类，给 JavaScript 调用。

  public class WebAppInterface {    @JavascriptInterface    public void showToast(String toast) {        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();    }``}

  然后将这个 WebAppInterface类，通过以下代码，添加到 WebView 的 JavaScriptInterface 中。​​​​​​​

  WebView webView = (WebView) findViewById(R.id.webview);``webView.addJavascriptInterface(new WebAppInterface(this), “Android”); // 这里的Android会被当做一个变量，注入到页面的window中。

  接着就可以在 JS 中调用 Native 了。

  ​​​​​​​

  function showAndroidToast(toast) {    Android.showToast(toast);``}

  2、WebViewClient.shouldOverrideUrlLoading()

  这个方法的作用是拦截所有 WebView 的 URL Scheme 。

  URL Scheme 是一种类似于 url 的链接，是为了方便 app 直接互相调用设计的，形式和普通的 url 近似，主要区别是 protocol 和 host 一般是自定义的。

  拦截 URL Scheme 的主要流程是：Web 端通过某种方式（例如 iframe.src/location.href）发送 URL Scheme 请求，之后 Native 拦截到请求并根据 URL Scheme（包括所带的参数）进行相关操作。

  页面可以构造一个特殊格式的 URL Scheme 触发，shouldOverrideUrlLoading 拦截 URL 后判断其格式，然后 Native 就能执行自身的逻辑了。

  ​​​​​​​

  public class CustomWebViewClient extends WebViewClient {  @Override  public boolean shouldOverrideUrlLoading(   WebView view,   String url   ) {     if (isJsBridgeUrl(url)) {     // JSbridge的处理逻辑       return true;     }     return super.shouldOverrideUrlLoading(view, url);   }``}

  3、WebChromeClient.onXXX()

  通过修改原来浏览器的 window某些方法，然后拦截固定规则的参数，然后分发给Java 对应的方法去处理

  • alert，可以被 WebView 的 WebChromeClient.onJsAlert() 监听

  • confirm，可以被 WebView 的 WebChromeClient.onJsConfirm() 监听

  • console.log，可以被 WebView 的 WebChromeClient.onConsoleMessage() 监听

  • prompt，可以被 WebView 的 WebChromeClient.onJsPrompt()监听

    prompt 简单举例说明，Web 页面通过调用 prompt()方法，安卓客户端通过监听WebChromeClient.onJsPrompt()事件，拦截传入的参数，如果参数符合一定协议规范，那么就解析参数，扔给后续的 Java 去处理。

    window.prompt(message, value);

    WebChromeClient.onJsPrompt()就会受到回调。onJsPrompt()方法的 message参数的值正是JS的方法 window.prompt()的 message的值。

    ​​​​​​​

    public class CustomWebChromeClient extends WebChromeClient {  @Override  public boolean onJsPrompt(    WebView view,    String url,    String message,    String defaultValue,    JsPromptResult result    ) {        // 处理JS 的调用逻辑        result.confirm();        return true;    }``}

    Java 调用 JavaScript

    Android，在 Kitkat（4.4）只能用 loadUrl 一段 JavaScript 代码。

    webView.loadUrl(“javascript:” + javaScriptString);

    而 Kitkat 之后的版本，也可以用 evaluateJavascript 方法实现：

    ​​​​​​​

    webView.evaluateJavascript(javaScriptString, new ValueCallback() {    @Override    public void onReceiveValue(String value) {      // native代码    }  });

    IOS WebView

    In apps that run in iOS 8 and later, use the WKWebView class instead of using UIWebView. Additionally, consider setting the WKPreferences property javaScriptEnabled to NO if you render files that are not supposed to run JavaScript.

    在 IOS8 之前，苹果手机的 WebView 使用的 UIWebView，UIWebView长期以来存在某些问题：

    • 加载速度慢

    • 存在内存泄漏

    • 内存占用多，内存优化困难

    • 如果内存占用过多还可能因为占用过多被系统kill掉

      在 WWDC 2014 大会上，IOS8推出了 WKWebView，WKWebView 是现代 Webkit API 在 iOS 8 和 OS X Yosemite 应用中的核心部分。它代替了 UIKit 中的 UIWebView 和 AppKit 中的 WebView，提供了统一的跨双平台 API。拥有 60fps 滚动刷新率、内置手势、高效的 app 和 web 信息交换通道、和 Safari 相同的 JavaScript 引擎。

      JavaScript ↔︎ Swift 对话机制

      使用用户脚本来注入 JavaScript

      WKUserScript 允许在正文加载之前或之后注入到页面中。这个强大的功能允许在页面中以安全且唯一的方式操作网页内容。

      一个简单的例子如下，用户改变背景的用户脚本被插入到网页中：

      ​​​​​​​

      let source = "document.body.style.background = "#777;// 注入脚本 在文档加载完成后执行let userScript = WKUserScript()let userScript = WKUserScript(source: source, injectionTime: .AtDocumentEnd, forMainFrameOnly: true)let userContentController = WKUserContentController()``userContentController.addUserScript(userScript)`

      `let configuration = WKWebViewConfiguration()configuration.userContentController = userContentControllerself.webView =WKWebView(frame: self.view.bounds, configuration: configuration)

      对象可以以 JavaScript 源码形式初始化，初始化时还可以传入是在加载之前还是结束时注入，以及脚本影响的是这个布局还是仅主要布局。于是用户脚本被加入到 WKUserContentController 中，并且以 WKWebViewConfiguration 属性传入到 WKWebView 的初始化过程中。

      这个样例可以简单扩展为更为高级的页面修改方法，例如去除广告、隐藏评论等。

      Message Handlers

      利用以下代码，可以跟Native进行通信

      window.webkit.messageHandlers.{NAME}.postMessage()

      Handler的name可以通过 WKScriptMessageHandler 协议中的 addScriptMessageHandler() 接口函数设置：

      ​​​​​​​

      文末

      如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

      同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

      这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

      269页《前端大厂面试宝典》

      包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

      开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

      前端面试题汇总

      JavaScript