深入浅出JSBridge：从原理到使用

一、深入浅出JSBridge:从原理到使用

深入浅出JSBridge：从原理到使用

在移动端开发中，混合开发（Hybrid）模式逐渐成为主流，该模式结合了原生Native和Web H5技术，旨在汲取两者优点。随着移动设备硬件的升级和系统对Web特性支持的增强，H5的劣势被逐渐缩小。混合开发模式按照渲染分为原生渲染和Web渲染，它们之间通过JSBridge实现原生与Web的通信。

JSBridge是一种实现原生和Web双向通信的机制，以JavaScript引擎或Webview容器作为媒介，通过协定协议进行通信。在Hybrid模式下，H5需要使用Native功能，如二维码扫描、调用原生页面、获取用户信息等。同时，Native也需要向Web端发送推送、更新状态等，由于JavaScript在单独的JS Context中执行（Webview容器、JSCore等），与原生运行环境隔离，所以需要JSBridge作为媒介实现双向通信。

通过JSBridge，Web端可以调用Native端的Java接口，反之亦然，实现彼此的双向调用。

在讨论JSBridge实现原理之前，了解WebView至关重要。WebView是移动设备上用于运行JavaScript的环境，用于渲染Web页面并与页面JavaScript交互，实现混合开发。Android和iOS中的WebView有所不同，Android采用不同版本的webkit内核，而iOS则分别使用了UIWebView和WKWebView，后者性能和特性支持更强。

JSB实现原理涉及Web端和Native的通信机制，类似于Client/Server模式。具体实现分为两部分：Native->Web和Web->Native通信。

对于Native->Web通信，Android 4.4之前可通过loadUrl实现，但无法执行回调。Android 4.4之后和iOS支持evaluateJavascript来执行JS代码，并获取返回值执行回调。iOS中使用stringByEvaluatingJavaScriptFromString或evaluateJavaScript。

Web->Native通信有两种常见方式：拦截Webview请求的URL Schema和向Webview中注入JS API。URL Schema允许自定义通信格式，但存在限制和兼容性问题。另一种方式是通过将Native接口注入到JS的Context（window）对象中，实现Web端直接调用。Android使用addJavascriptInterface，iOS则利用JavaScriptCore和WKScriptMessageHandler。

带有回调的调用实现基于上述两种通信方式，通过在参数中添加callbackId标记回调，完成对端操作并返回结果。回调功能实现为两次单项通信。

为了简化实现过程，开源的JSBridge库如DSBridge-Android提供了方便使用的解决方案。相比自建实现，使用开源库能减少工作量并提升兼容性。

总结，JSBridge在Hybrid开发中扮演重要角色，实现了原生与Web端的通信。理解其原理和实现方法有助于高效地利用JSBridge，提升开发效率。在实际应用中，推荐使用现有的开源JSBridge库，以避免重复造轮子，专注于核心功能的实现。

二、JavaScript书籍推荐(javascript书籍推荐知乎)

前端必看的书籍

了解更多的前段知识请看下面我精心为您整理的前端必看的书籍，希望您喜欢!

了解更多的前段知识请看下面我精心为您整理的前端必看的书籍，希望您喜欢!

最好的入门书。看两遍就对HTMLCSS有个大概印象了。

此时把w3cschool作为备查手册收藏起来

最权威的CSS书籍，除了阅读W3C的文档外的不二选择(就是翻译有点操蛋，遇到感到难理解的地方可能还是要求助于网络资源)。有时间(无论是现在还是将来)可以反复看，并当做字典随时查。

广受前辈推荐的一本书。上一本书是字典的话，这本书相当于《中学生作文大全》，汇集了一些CSS的最佳实践。

第四本《图解CSS3：核心技术与案例实践》

这本书比较新，讲解的是最新的CSS3(前三本书停留在CSS2.1时代)，CSS3也是必学的，不是什么可学可不学的最新技术。

HTMLCSS值得看的书就这些(之后会有一本《CSS秘密花园》，尚在翻译中，也很值得期待)，剩下的就是自己写还有看技术博客了。接下来是JavaScript，HTML和CSS都是没有逻辑的标记型语言，JS才是真正的编程语言，评价前端工程师的水平就看这个了。

第五本《JavaScriptDOM编程艺术》

最好的JS入门书籍，一目了然地告诉你如何用JS操作DOM(这是浏览器端编程的基本功)，还灌输了最符合标准的编程理念。可惜有点老，最新一版是2010年的，以至于部分内容有点过期，例如本书内经常提到“某某方法浏览器不一定支持，需要小心使用”，而这些历史遗留问题当今已经不存在了，阅读过程中无视就好。

第六本《JavaScript高级程序设计》

每个前端必看的书，此书是前端工程师科技树的关键一环。看完此书后再看看之后各类进阶书籍会比较好。

俗称红宝书，也算入门书籍，虽然是大部头(七百多页)，但至少通读一遍。

全部掌握了，你可以在网络社区里谈笑风生了，经过实践的锻炼后，面试个前端工程师的岗位应该都没问题了。

也是前端必看。薄薄一百来页，对JS的去粗取精。

第八本《你不知道的JavaScript》

这是一套丛书，目前为止仅翻译了第一卷。每本都挺薄，深入介绍了JS中的重要概念。

“设计模式”是软件工程的重要课题，相当于高考时候的答题套路。前人总结出来的应对各种问题的模板。也算是必看书籍。关于JavaScript设计模式的书籍目前也有好几本，也有国人写的，挑一两本看看就好。

第十本《高性能网站建设指南》(及其续篇《高性能网站进阶》)

告诉你真正的商业公司的前端是怎么优化一个网站的。当然优化的问题不是看看书就能解决的，最好时刻了解你的同行们的经验。

HTML就不多说了，基础中的基础，这个都不会的小伙伴请参见HTML手册，认真学习W3C课程，稍有基础之后可以跟着视频学习《HTML+CSS基础课程》。

这本书实在太适合小白用户了，是一本为初学者清扫障碍的书籍。同行一致认为这本书是学习CSS基础的首选。CSS界权威Meyer大师的作品，翻译水平也灰常赞!

不用于一般技术类书籍的枯燥乏味，这本书很有意思。作者是蓝色理想经典论坛标准版荣誉版主林小志，具有多年网站设计和网站重构经验，在CSS、XHTML等前台技术方面有着深厚功底。

全书以传达CSS布局思维为中心，通过页面中的文字、图片、表格、表单等常见元素的处理及各种页面布局方式的使用，使读者能深入了解到如何在页面中更好地运用CSS布局。阅读本书之后将会发现，原来CSS样式居然是这么好玩的东西。

3、《精通CSS：高级Web标准解决方案》第二版

前段学习必备书籍，作者AndyBudd是国际顶尖的网页设计师，著名的Web标准倡导者，网页咨询公司Clearleft的创始人之一。

本书将最有用的CSS技术汇总在一起，总结了CSS设计中的最佳实践，讨论了解决各种实际问题的技术，重点讲解了一系列的css开发技巧，是前端开发人员必备的手册。

这是一本令人惊叹的书!必须用一个字形容的话，那就是：美!内容编排合理,文字生动有趣引人入胜,通过一个个实例引导读者阅读，强烈推荐!

作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSSZenGarden(CSS禅意花园)。童鞋们自己去领略吧。

Javascript的书籍当然还是要看老外的，你懂得~

此书绝对是入门好书，简洁优美的文笔简直是工具书中的典范啊有木有!

这本书讲述了JavaScript和DOM的基础知识，但重点放在DOM编程技术背后的思路和原则，然后将这些概念贯穿在书中的所有代码示例中，使你看到用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本，最后结合所讲述的内容创建了一个实际的网站。

6、《JavaScript权威指南》第6版

这本书非常适合初级、中级程序员，是学习核心JavaScript语言和由Web浏览器定义的JavaScriptAPI的指南和综合参考手册。

第6版涵盖HTML5和ECMAScript5。很多章节完全重写，紧跟当今最佳Web开发实践。本书新增章节描述了jQuery和服务器端JavaScript。

7、《JavaScript高级程序设计》第三版

《javascript权威指南》比较像一本字典，而这本《javascript高级程序设计》可以算是一本由浅入深的好读物。这两本书看完后，对javascript一定会有较为深入的了解。

作者NicholasC.Zakas是世界顶级Web技术专家，现为雅虎公司界面呈现架构师，负责MyYahoo!和雅虎首页等大访问量站点的设计。这本书，看一遍不能算看过，至少读两三遍，每一遍都会让你有新的收获。

本书从性能角度全面分析js，含金量非常大，很多知识都是作者通过实践总结出来的，都是经验的积累，强烈推荐!

同是NicholasC.Zakas所写，如果看《JS高级程序设计》觉得理解不太透彻，学习较为吃力，那么我强烈建议你看看这本书，真的是极好的一本实践类书籍，言简意赅，灰常实用!

这本《JavaScript王者归来》不仅是一本传播知识的书，更是一本求道的书。O(∩_∩)O有追求的程序员一定不要错过!愿神力与你同在!

它揭开了JavaScript的面纱，绕过误解和虚幻的表象，引领你探索程序王国的奥妙。这是一本探寻程序设计思想本源的“魔法典籍”，也是一本Web开发工程师们需要的案头参考书。

它绝对不是一本入门级别的书，适用于希望将自身的Javascript技巧提高到一个新层次的专业的开发人员和程序员。

《JavaScript模式》包含了实现每个讨论的模式的实践建议，并附有数个可以立即上手的范例;同时还可以学到一些反模式。短小精悍，进阶必读!

进阶教程，得有一定功底才能看懂。反之，如果你轻而易举就能拿下此书，说明你已非等闲之辈~

本书共有两部分。第一部分给出了实现具体设计模式所需要的面向对象特性的基础知识，第二部分则专注于各种具体的设计模式及其在JavaScript语言中的应用，主要介绍了工厂模式、桥接模式、组合模式、门面模式等几种常见的模式。

入门首选，简单易懂，非常实在。《锋利的jQuery(第2版)》循序渐进地对jQuery的各种函数和方法调用进行了介绍，对jQuery分析的逻辑非常值得学习。

如果以上书籍你全都搞定了，那么，恭喜你，你真的很厉害!到这种程度，相信你也不太需要别人推荐书籍了，不过我还是厚着脸皮推荐两本吧。

前端开发可以优化网站剩余70%~80%性能，这本书不算厚，几个小时就能看完，推荐前端开发工程师看看。在《高性能网站建设指南》中，作者给出了14条具体的优化原则，每一条原则都配以范例佐证，并提供了在线支持。

Web开发敏捷之道》曾荣获Jolt大奖“最佳技术图书”奖。在第1版的内容架构基础上，第2版增加了对Rails1.2中新特性和最佳实践的介绍。此书覆盖了rails1.2的方方面面，其本身也很"敏捷"，翻译也非常好。

web前端必读书籍有哪些？

1、《JavaScriptDOM编程艺术》推荐3（比较基础，小白入门的话推荐，有基础的话不推荐）

1、《JavaScriptDOM编程艺术》推荐3（比较基础，小白入门的话推荐，有基础的话不推荐）

2、《css权威指南》推荐2（书是好书，看了忘了的工具书，写样式谷歌更高效）

3、《css揭秘》推荐5（不是css入门书籍，css提升必备，最棒的css工具书，css魔法）

4、《JavaScript语言精粹》推荐4（有经验的js可以看看，个人没get到传说中的惊艳，加深理解）

5、《JavaScript高级程序设计》推荐5（最权威的js入门书籍，不要被名字吓到）

6、《JavaScript权威指南（第6版）》推荐4（入门刚入门都不推荐，个人的枕头书，讲得挺全面的，可读性不高，提升的话应该要看吧，头看大了还没看完）

7、《你不知道的JavaScript上卷》推荐5（强烈推荐，刷新对js的看法。语言精粹的配合着看，明明白白的理解原型链不需要工作5年后还不懂）

8、《高性能JavaScript》推荐4（提升必备吧，个人感觉，有些实践经常遇到）

9、《Node.js实战》推荐3（不推荐，书出得比较早也烂大街，一些实践已经有更好的代替模块了，没有后端基础的话可以看看）

10、《HTML5权威指南》推荐3（书是好书，适合入门，有前端基础的推荐MDN效率更高，一点基础都没有的话抓不到主次适合泛读，没时间看的话不推荐，提升没有帮助）

以上一些小推荐，希望对你有帮助！

如果是想做web前端开发，学习HTML和CSS是必备的，网上有很多免费文档，教程，看w3cschool也是可以了，重要的还有实践，如果真要看书，《HTML5权威指南》《HTML5秘籍》《HTML布局之路》《HTML5与CSS3权威指南》也是值得一看的，还有《CSS揭秘》非常不错的书。js的书籍可以看《javascript权威指南》和《javascript高级程序设计语言》《javascript语言精粹》都是不错的书，也是前端开发需要掌握的知识。

Javasctipt简称Js，学习Js之前建议你先学习一下HTML+CSS，因为Javascript的基本操作是控制html的标签以及css的属性，实现各式各样的动态功能。千锋教育就有线上免费JavaScript线上公开课。

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。学习Javascript给大家推荐几本书，入门书籍《Javascriptdom编程艺术》和内容全面点的有《Javascript高级程序设计》。看完这些，你的Js基础就学的差不多了再就是学习Js框架，例如vue.Js，react，angular.Js等。如果想了解Javascript更多相关知识，建议到千锋教育了解一下。千锋教育目前在18个城市拥有22个校区，年培养优质人才20000余人，与国内20000余家企业建立人才输送合作关系，院校合作超600所。

这里主要介绍一下我在web学习前端开发过程中的一些书和经验。都是一些个人经验，因为每个人的学习方法不同，大家权当参考吧。

我学习一般以看书为主，然后辅以一些优秀的视频教程，还有网上的文章。也有同学以看视频为主的，我舍友就是这样。

如果你是真心想学习web前端、以后想朝着这个方向发展，那么你一定要来这个企鹅裙，前面前面是二9六，中间是5九一，最后面就是二九零，来这里可以这里学习经验，得到专人解答，这样你可以成长的更快！！！

我把现在的书籍一般分为两类，一类是偏理论型的，如“权威指南”这些书；一类是偏实践型的，理论相对较少，比较多例子和接近解决方案。在初学阶段，我一般会各挑选一本比较好的，同时也会借很多同类型的书籍，不过主要是用来做参考，但并不会通读。

例如我在学习javascript的时候，我基本把图书馆基本能借的javascript书都借了，主要是图灵和博文视点出版的书。例如《JavaScript核心技术》，《精通JavaScript

》，《JAVASCRIPT语言精髓与编程实践》，《JavaScript设计模式》，《JavaScript语言精粹》，《JavaScript

DOM编程艺术》，《ppk谈JavaScript》，《高性能网站建设指南

》等，还有其他很多js的书，如果借不到，就直接在图书馆七楼看，例如权威指南；也有一些一般的书，这里没有提到，这些书，我并不是全部都会认真看过，因为初学阶段这样学习效率不高。权威指南我现在还没看完，但是如果要全面深入学习的话，看两本还是不够的。但我喜欢以集中在两本书以内学习作为切入点，这样能使我将精力集中在，并且发现问题。

我在上面提到的书，都是比较好的书，适合不同的阶段，例如《JavaScript语言精粹》这本书是属于很精华的读物，入门的时候看可能会比较吃力，当你对JS有一定的驾驭能力的时候，可能就会发现其中的奥妙。我当时花精力看的主要是《精通JavaScript

》，《JAVASCRIPT语言精髓与编程实践》，《JavaScript核心技术》也花了不少时间，感觉收获不是很大，可能当时理解不够深刻，权威指南也是后来才看。《JavaScript核心技术》给我的帮助没想象中大，但里面说的知识我是很认真在看，可能不适合入门吧，但很多事情冥冥之中的联系谁又能说得清楚呢，早期花时间在《JavaScript核心技术》上未必就是坏事。

》是偏实践型一类的书，作者是JQuery之父，书中有很多非常好的例子，还有jS的相关技巧，兼容浏览器的方法等。有很多例子都是作者处理问题的总结，我当时几乎把里面的每个例子都测试了一遍，受益匪浅，当然，书中也有不少瑕疵，不知道是我借的那本书印刷问题还是怎么的，有些代码运行并不兼容，也有些函数方法并不能成功运行。到后半部分的示例也比较繁琐，我只是粗略看了一番。实际到后来我看网上的评论，这本书适合进阶的人看，现在回头看，感觉确实有jQuery源码分析的感觉，而且部分内容并不适合初学者阅读。但是书中的第三部分确实是很有用的。

上面说了很多关于个人在学习JS上的一些心得，无非也就是想说明一点，有时候并不能找到一本真正适合初学者的书，或者教程。有些书确实不错，未必就适合你，有时候我们也会走错路，但学习不应就此止步。

我接下来会写一些自己读过的书，并且觉得好的书推荐给大家，希望对大家有用：

《Web标准实战》比较简单，适合入门

《CSS设计彻底研究》视频教程很好，书本我并没有详细研究，不好说建议。

《CSS网站布局实录》CSS的书我看得比较少，这本算是看得比较全了，听说第二版不错。

CSS的书有很多非常好的，这里就不一一细说了。/special/webstandards/这个网址有一些相关的介绍。

《精通JavaScript》第三部分非常好

《JAVASCRIPT语言精髓与编程实践》这本书对原型和继承做了非常精辟的解释，网上大部分关于原型的文章都是参考此书的。

《悟透javascript》这本书第一章是介绍原型和继承的，第三章也介绍了跨域的一个解决方法，还有就是作者对程序和人生的理解哲学很有深度。

《JavaScript权威指南》这本书就不用说了

《高性能网站建设指南》这类书有两本不同版本，都是关于web性能优化的

《JavaScript语言精粹》进阶的好书

《JavaScript设计模式》进阶的好书

《SEO教程：搜索引擎优化入门与进阶》这本书有些地方我认为说得不大确切，但是总体还不错。

这些书，大部分都是我读过的，觉得很好，所以推荐给大家。当然好书还不仅仅上述这些而已。如果其他同学觉得还有其他的书不错，也欢迎补充。因为要深入地学习，这些书是远远不够的。

第一本：《JavaScript权威指南》，经典级教材，很厚一本，俗称“犀牛书”，囊括了JS几乎所有的基础知识，新版本还加入了最新的技术内容，适合初学者，有经验的开发者也常常作为随手翻阅的语法书。

第二本：《JavaScript语言精粹》，俗称“蝴蝶书”，是介绍JavaScript语言本质一本书，教你全面了解这门语言的糟粕部分，构建出优雅高效的代码。

第三本：《JavaScript高级程序设计》，这本是我强烈推荐的，是非常经典的JavaScript畅销书，内容全面深入、贴近实战，详细讲解了JavaScript语言的核心，又展示了现有规范及实现以及为开发Web应用提供的各种支持和特性。

三、深入浅出微前端(qiankun)

1、一、微前端核心理念微前端将前端应用视为一个整体，由多个独立的微前端应用组成。每个微前端应用具有自定义的技术栈、开发流程与团队组织，实现独立开发与部署。微前端架构旨在减少复杂协调与合并工作，提升开发效率。

2、二、微前端架构与传统IFrame的区别隔离性：微前端架构采用Web Components、JavaScript模块加载器等技术，提供更好的隔离性；而IFrame虽然能嵌入其他网页，但隔离性有限。通信机制：微前端架构具有更高效的通信机制，便于主子应用间通信；IFrame的通信相对繁琐。性能优化：微前端架构在性能优化方面更具优势，能充分利用浏览器缓存等资源；而IFrame可能导致性能瓶颈。

3、三、qiankun技术实现基于singlespa：qiankun是基于singlespa框架实现的微前端解决方案。 HTML与CSS处理：依赖importhtmlentry处理HTML与CSS，实现HTML Entry与Sandbox特性。 UMD格式：要求子应用打包为UMD库格式，便于主应用获取入口文件中的生命钩子函数，实现主子应用通信。 importHTML函数：实现HTML内容加载，包含模板、样式与脚本的解析与处理。

4、四、样式隔离与沙箱机制样式隔离：qiankun提供样式隔离功能，使用shadow dom包裹微应用容器，确保样式不会全局影响。实验性模式下，通过特殊选择器限定样式影响范围。沙箱机制：JavaScript沙箱提供隔离执行环境，限制代码访问权限，确保安全执行。SnapshotSandbox与LegacySandbox实现微应用样式隔离，通过代理技术创建独立执行环境。

5、五、Vue项目中的微前端实现在Vue项目中，通过this.router.push与this.router.replace触发路由事件。监听window.onpopstate与window.location.pathname匹配路由，加载与路由匹配的子应用。 Vue scoped在单文件组件中使用，为每个子应用添加唯一属性选择器，解决样式隔离与事件处理问题。