• 关于

    dom概念

    的搜索结果

回答

1、React 速度很快:它并不直接对 DOM 进行操作,引入了一个叫做虚拟 DOM 的概念,安插在 javascript 逻辑和实际的 DOM 之间,性能好。 2、跨浏览器兼容:虚拟 DOM 帮助我们解决了跨浏览器问题,它为我们提供了标准化的 API,甚至在 IE8 中都是没问题的。 3、一切都是 component:代码更加模块化,重用代码更容易,可维护性高。 4、单向数据流:Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构,它随着 React 视图库的开发而被 Facebook 概念化。 5、同构、纯粹的 javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是 JavaScript 的执行,预渲染你的应用有助于搜索引擎优化。 6、兼容性好:比如使用 RequireJS 来加载和打包,而 Browserify 和 Webpack 适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

问问小秘 2019-12-02 03:20:38 0 浏览量 回答数 0

回答

该影子DOM是浏览器技术主要用于在作用域变量和CSS Web组件。该虚拟DOM是图书馆在JavaScript上的浏览器的API的基础上实现的概念

你的答案 2020-05-07 16:44:17 0 浏览量 回答数 0

回答

js没有线程的概念,至少目前是这样。只有同步异步的问题,你用使用iframe的内容,一定要在父页的window.onload事件中操作或者iframe的onload事件中操作,不能再父页dom ready中,dom ready只是针对元素加载,而不管iframe内部的加载

小旋风柴进 2019-12-02 02:30:08 0 浏览量 回答数 0

万券齐发助力企业上云,爆款产品低至2.2折起!

限量神券最高减1000,抢完即止!云服务器ECS新用户首购低至0.95折!

回答

组件生命周期具有三个不同的生命周期阶段: 挂载:该组件已准备好在浏览器DOM中挂载。该阶段包括从初始化constructor(),getDerivedStateFromProps(),render(),和componentDidMount()生命周期方法。 更新:在此阶段,组件通过两种方式进行更新,即发送新道具和通过setState()或更新状态forceUpdate()。该阶段包括getDerivedStateFromProps(),shouldComponentUpdate(),render(),getSnapshotBeforeUpdate()和componentDidUpdate()生命周期方法。 卸载:在最后一个阶段,不需要该组件,并且可以从浏览器DOM中卸载该组件。此阶段包括componentWillUnmount()生命周期方法。 值得一提的是,在将更改应用于DOM时,React内部具有阶段性概念。它们分开如下 渲染组件将渲染而没有任何副作用。这适用于Pure组件,在此阶段,React可以暂停,中止或重新启动渲染。 预提交在组件实际将更改应用于DOM之前,有一段时间可以让React通过读取DOM getSnapshotBeforeUpdate()。 Commit React与DOM一起工作,并分别执行最终的生命周期componentDidMount(),componentDidUpdate()以进行安装,更新和componentWillUnmount()卸载。 React 16.3+阶段(或交互式版本) phases 16.3+ 在React 16.3之前

你的答案 2020-05-07 16:59:11 0 浏览量 回答数 0

回答

简述重排的概念 浏览器下载完页面中的所有组件(HTML、JavaScript、CSS、图片)之后会解析生成两个内部数据结构(DOM 树和渲染树),DOM 树表示页面结构,渲染树表示 DOM 节点如何显示。重排是 DOM 元素的几何属性变化,DOM 树的结构变化,渲染树需要重新计算。 简述重绘的概念 重绘是一个元素外观的改变所触发的浏览器行为,例如改变 visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。但 table 及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性值,比同等元素要多花两倍时间,这就是我们尽量避免使用 table 布局页面的原因之一。 简述重绘和重排的关系 重绘不会引起重排,但重排一定会引起重绘,一个元素的重排通常会带来一系列的反应,甚至触发整个文档的重排和重绘,性能代价是高昂的。 什么情况下会触发重排? - 页面渲染初始化时;(这个无法避免) - 浏览器窗口改变尺寸; - 元素尺寸改变时; - 元素位置改变时; - 元素内容改变时; - 添加或删除可见的 DOM 元素时。 重排优化有如下五种方法 - 将多次改变样式属性的操作合并成一次操作,减少 DOM 访问。 - 如果要批量添加 DOM,可以先让元素脱离文档流,操作完后再带入文档流,这样只会触发一次重排。(fragment 元素的应用) - 将需要多次重排的元素,position 属性设为 absolute 或 fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。 - 由于 display 属性为 none 的元素不在渲染树中,对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示。这样只在隐藏和显示时触发两次重排。 - 在内存中多次操作节点,完成后再添加到文档中去。例如要异步获取表格数据,渲染到页面。可以先取得数据后在内存中构建整个表格的 html 片段,再一次性添加到文档中去,而不是循环添加每一行。

茶什i 2019-12-02 03:19:56 0 浏览量 回答数 0

回答

原生XML扩展 我更喜欢使用其中一个原生XML扩展,因为它们与PHP捆绑在一起,通常比所有第三方库更快,并且在标记上给我所需的所有控制权。 DOM DOM扩展允许您使用PHP 5通过DOM API操作XML文档。它是W3C的文档对象模型核心级别3的实现,这是一个平台和语言中立的接口,允许程序和脚本动态访问和更新文件的内容,结构和风格。 DOM能够解析和修改现实世界(破碎)的HTML,并且可以执行XPath查询。它基于libxml。 使用DOM需要一些时间才能提高效率,但这个时间非常值得IMO。由于DOM是一个与语言无关的接口,因此您可以找到多种语言的实现,因此如果您需要更改编程语言,那么您很可能已经知道如何使用该语言的DOM API。 一个基本的用法示例可以在抓取A元素的href属性中找到,一般的概念概述可以在php的DOMDocument中找到 StackOverflow上已经广泛介绍了如何使用DOM扩展,因此如果您选择使用它,您可以确定您遇到的大多数问题都可以通过搜索/浏览Stack Overflow来解决。 XMLReader的 XMLReader扩展是一个XML pull解析器。读取器在文档流上作为光标前进,并在途中停在每个节点上。 与DOM一样,XMLReader基于libxml。我不知道如何触发HTML解析器模块,因此使用XMLReader解析损坏的HTML的可能性可能不如使用DOM,因为您可以明确告诉它使用libxml的HTML解析器模块。 使用php从h1标签获取所有值时,可以找到一个基本用法示例 XML解析器 此扩展允许您创建XML解析器,然后为不同的XML事件定义处理程序。每个XML解析器还有一些您可以调整的参数。 XML Parser库也基于libxml,并实现了SAX样式的XML推送解析器。它可能是比DOM或SimpleXML更好的内存管理选择,但是比XMLReader实现的pull解析器更难以使用。 SimpleXML的 SimpleXML扩展提供了一个非常简单且易于使用的工具集,用于将XML转换为可以使用普通属性选择器和数组迭代器处理的对象。 当您知道HTML是有效的XHTML时,SimpleXML是一个选项。如果你需要解析破碎的HTML,甚至不要考虑SimpleXml,因为它会窒息。 一个基本的用法示例可以在一个简单的CRUD节点程序和xml文件的节点值中找到,PHP手册中还有很多其他的例子。 第三方库(基于libxml) 如果您更喜欢使用第三方库,我建议使用实际上使用DOM / libxml而不是字符串解析的库。 FluentDom - 回购 FluentDOM为PHP中的DOMDocument提供了类似jQuery的流畅XML接口。选择器是用XPath或CSS编写的(使用CSS到XPath转换器)。当前版本扩展了DOM实现标准接口并添加了DOM Living Standard的功能。FluentDOM可以加载JSON,CSV,JsonML,RabbitFish等格式。可以通过Composer安装。 HtmlPageDom Wa72 \ HtmlPageDom`是一个用于轻松操作HTML文档的PHP库。它需要来自Symfony2组件的DomCrawler来遍历DOM树,并通过添加操作HTML文档的DOM树的方法来扩展它。 phpQuery(多年未更新) phpQuery是一个服务器端,可链接,CSS3选择器驱动的文档对象模型(DOM)API,基于用PHP5编写的jQuery JavaScript库,并提供额外的命令行界面(CLI)。 另见:https://github.com/electrolinux/phpquery Zend_Dom Zend_Dom提供了处理DOM文档和结构的工具。目前,我们提供Zend_Dom_Query,它提供了一个统一的界面,可以使用XPath和CSS选择器查询DOM文档。 的QueryPath QueryPath是一个用于操作XML和HTML的PHP​​库。它不仅适用于本地文件,还适用于Web服务和数据库资源。它实现了许多jQuery接口(包括CSS样式的选择器),但它在服务器端使用时经过了大量调整。可以通过Composer安装。 fDOMDocument fDOMDocument扩展了标准DOM,以便在所有错误情况下使用异常,而不是PHP警告或通知。为方便起见,他们还添加了各种自定义方法和快捷方式,并简化了DOM的使用。 军刀/ XML saber / xml是一个包装和扩展XMLReader和XMLWriter类的库,用于创建一个简单的“xml到对象/数组”映射系统和设计模式。编写和读取XML是单遍的,因此可以快速并且需要大型xml文件的低内存。 FluidXML FluidXML是一个用于使用简洁流畅的API来操作XML的PHP​​库。它利用XPath和流畅的编程模式,既有趣又有效。 第三方(不是基于libxml的) 构建DOM / libxml的好处是,您可以获得良好的开箱即用性能,因为您基于本机扩展。但是,并非所有第三方库都沿着这条路线行进。其中一些列在下面 PHP简单的HTML DOM解析器 用PHP5 +编写的HTML DOM解析器允许您以非常简单的方式操作HTML! 需要PHP 5+。 支持无效的HTML。 使用选择器在HTML页面上查找标签,就像jQuery一样。 从一行中提取HTML中的内容。 我一般不推荐这个解析器。代码库很糟糕,解析器本身很慢而且内存很耗。并非所有jQuery选择器(例如子选择器)都是可能的。任何基于libxml的库都应该比这更容易。 PHP Html解析器 PHPHtmlParser是一个简单,灵活的html解析器,允许您使用任何css选择器(如jQuery)选择标签。目标是帮助开发需要快速,简单的方法来废弃html的工具,无论它是否有效!这个项目最初是由sunra / php-simple-html-dom-parser支持的,但支持似乎已经停止,所以这个项目是我对他以前工作的改编。 同样,我不推荐这个解析器。CPU使用率很高,速度相当慢。还没有清除已创建DOM对象的内存的功能。这些问题尤其适用于嵌套循环。文档本身不准确且拼写错误,自4月14日以来没有回复修复。 加农 通用标记器和HTML / XML / RSS DOM解析器 能够操纵元素及其属性 支持无效的HTML和UTF8 可以对元素执行类似CSS3的高级查询(比如jQuery - 支持的命名空间) HTML美化器(如HTML Tidy) 缩小CSS和Javascript 排序属性,更改字符大小写,更正缩进等。 扩展 使用基于当前字符/标记的回调解析文档 操作以较小的功能分隔,以便轻松覆盖 快速而简单 从未使用过它。不知道它是否有用。 HTML 5 您可以使用上面的方法来解析HTML5,但由于HTML5允许的标记,可能会有怪癖。因此,对于HTML5,您要考虑使用专用解析器,例如 html5lib 基于WHATWG HTML5规范的HTML解析器的Python和PHP实现,可与主要桌面Web浏览器实现最大兼容性。 HTML5最终确定后,我们可能会看到更多专用解析器。还有一个W3的博客文章,名为How-To for html 5 parsing,值得一试。 网页服务 如果您不想编写PHP,您也可以使用Web服务。一般来说,我发现这些实用程序很少,但那只是我和我的用例。 ScraperWiki。 ScraperWiki的外部界面允许您以您希望在Web或您自己的应用程序中使用的形式提取数据。您还可以提取有关任何刮刀状态的信息。 常用表达 最后也是最不推荐的,您可以使用正则表达式从HTML中提取数据。通常,不鼓励在HTML上使用正则表达式。 您可以在网上找到与标记相匹配的大多数片段都很脆弱。在大多数情况下,它们只适用于非常特殊的HTML。微小的标记更改,例如在某处添加空格,或添加或更改标记中的属性,可以使RegEx在未正确编写时失败。在HTML上使用RegEx之前,您应该知道自己在做什么。 HTML解析器已经知道HTML的语法规则。必须为您编写的每个新RegEx讲授正则表达式。RegEx在某些情况下很好,但它实际上取决于您的用例。 您可以编写更可靠的解析器,但是使用正则表达式编写完整可靠的自定义解析器是浪费时间,因为上述库已经存在并且在此方面做得更好。

游客gsy3rkgcdl27k 2019-12-02 02:09:37 0 浏览量 回答数 0

回答

DOM0事件模型(原始事件模型) 有两种实现方式 通过元素属性来绑定事件 点我 先获取页面元素,然后以赋值的形式来绑定事件 const btn = document.getElementById('btn') btn.onclick = function(){ //do something } //解除事件 btn.onclick = null DOM0缺点 一个dom节点只能绑定一个事件,再次绑定将会覆盖之前的事件。 DOM2事件模型 dom2新增冒泡和捕获的概念,并且支持一个元素节点绑定多个事件。 2.1 事件捕获和事件冒泡(capture,bubble ) 如图所示1,2,3为捕获,4,5,6,7为冒泡,也就是说事件流分为三个阶段: DOM2 级事件模型共有三个阶段: 事件捕获阶段:事件从 document 向下传播到目标元素,依次检查所有节点是否绑定了监听事件,如果有则执行。 事件处理阶段:事件在达到目标元素时,触发监听事件。 事件冒泡阶段:事件从目标元素冒泡到 document,并且一次检查各个节点是否绑定了监听函数,如果有则执行。 2.2 addEventListener 这应该是大家用的最熟悉的事件绑定方法了。 addEventListener有三个参数 事件名称、事件回调、捕获/冒泡 btn.addEventListener('click',function(){ console.log('btn') },true) box.addEventListener('click',function(){ console.log('box') },false) 设置为true,则事件在捕获阶段执行,为false则在冒泡阶段执行。 3. IE事件模型 IE事件只支持冒泡,所以事件流有两个阶段: 事件处理阶段:事件在达到目标元素时,触发监听事件。 事件冒泡阶段:事件从目标元素冒泡到 document,并且一次检查各个节点是否绑定了监听函数,如果有则执行。 实现方法: // 绑定事件 el.attachEvent(eventType, handler) // 移除事件 el.detachEvent(eventType, handler)

景凌凯 2020-04-03 22:07:57 0 浏览量 回答数 0

回答

不需要懂 JS。网页动态效果呈现一般用:CSS AnimJS 来控制页面 DOM 对象做动效JS 来操作 canvas 对象做位图级别的操作WebGL 这个概念你可以放一放,你几乎不会和他打交道。

嘀咕哟 2019-12-02 01:38:47 0 浏览量 回答数 0

问题

GA怎么影响了DOM Ready?

杨冬芳 2019-12-01 19:57:59 1102 浏览量 回答数 1

回答

事件是用户操作网页时发生的交互动作或者网页本身的一些操作,现代浏览器一共有三种事件模型。 第一种事件模型是最早的 DOM0 级模型,这种模型不会传播,所以没有事件流的概念,但是现在有的浏览器支持以冒泡的方式实 现,它可以在网页中直接定义监听函数,也可以通过 js 属性来指定监听函数。这种方式是所有浏览器都兼容的。 第二种事件模型是 IE 事件模型,在该事件模型中,一次事件共有两个过程,事件处理阶段,和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段,冒泡指的是事件从目标元素冒泡到 document,依次检查经过的节点是否绑定了事件监听函数,如果有则执行。这种模型通过 attachEvent 来添加监听函数,可以添加多个监听函数,会按顺序依次执行。 第三种是 DOM2 级事件模型,在该事件模型中,一次事件共有三个过程,第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素,依次检查经过的节点是否绑定了事件监听函数,如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型,事件绑定的函数是 addEventListener,其中第三个参数可以指定事件是否在捕获阶段执行。

剑曼红尘 2020-04-03 15:22:46 0 浏览量 回答数 0

回答

如果只是单纯做前端,没有。前端的核心是DOM。算法和数据结构是为了解决效率问题的,而提升前端的效率用到的概念往往仅仅是常识级别的。甚至一些流行的中小型库中都看不到任何数据结构。可以认为前端是程序员里的一个特例,一般程序员面对的是计算机,前端开发人员面对的仅仅是浏览器。如果只是关注前端,学习数据结构和算法的收益还不如去读jQuery源码。 既然前端用不上,楼主还是问到了这个问题,那就说明楼主关注的不仅仅是如何成为一个熟练的前端,而是成为一个优秀的软件工程师。网站开发之所以流行,一部分是因为开发成本低。这些节省下来的成本,一部分就是开发人员的薪水。换句话说,前端开发简单,门槛低,所以收入低,可替代性强。跳出前端这个领域,把自己放到软件工程师的队伍里,再看这个问题,答案就显而易见了。如果只是专注于前端技术,那么能解决的也仅仅是一小部分问题。 如果楼主关心的是如何更好地解决前端的问题,那么在相当长的一段路上数据结构和算法是优先级很低的。如果楼主关心的是自己的职业规划和自身素质的提升,数据结构和算法则在任何时候都是优先级最高的。

寒凝雪 2019-12-02 01:22:57 0 浏览量 回答数 0

回答

JavaScript (ECMAScript) :JavaScript 是脚本语言。JavaScript和ECMAScript通常被人用来表达相同的含义,但是JavaScript并不是这么一点含义,它是由ECMAScript 核心. DOM 文档对象模型. BOM 浏览器对象模型 这三部分组成。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。 组成部分包括语法,类型,语句,关键字,保留字,操作符,对象。 其中,文档对象模型(DOM , Document Object Model)是针对XML但是经过拓展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构,开发人员借助DOM Api对节点进行操作。可以通过浏览器F12进入开发者模式,查看层级关系。当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。 功能大致上: · JavaScript 能够改变页面中的所有 HTML 元素 · JavaScript 能够改变页面中的所有 HTML 属性 · JavaScript 能够改变页面中的所有 CSS 样式 · JavaScript 能够对页面中的所有事件做出反应 同时,浏览器对象模型(Browser Object Model)使用BOM控制浏览器显示页面意外的部分。 javaScript脚本加载方式 1 通过在网页中加入标记JavaScript的开始和结束,将JavaScript代码放到之间 2 也可以引入一个外部的JavaScript文件,这个JavaScript文件一般以.js作为扩展名 3 原则上,放在之间。但视情况可以放在网页的任何部分 4 一个页面可以有几个,不同部分的方法和变量,可以共享。 javaScript语句开发 (1)对大小写敏感 (2)自动忽略多余的空格 (3)在文本字符串中使用反斜杠对代码行进行换行 (4)单行注释(//)多行注释(/* */) JavaScript 是一个程序语言。语法规则定义了语言结构。 JavaScript 字面量 在编程语言中,一般固定值称为字面量,如 3.14。 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。 字符串(String)字面量 可以使用单引号或双引号: 数组(Array)字面量 定义一个数组: [40, 100, 1, 5, 25, 10] 对象(Object)字面量 定义一个对象: {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} 函数(Function)字面量 定义一个函数: function myFunction(a, b) { return a * b;} **JavaScript 变量 ** 在编程语言中,变量用于存储数据值。 JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值: var x, length x = 5 length = 6 JavaScript 操作符 JavaScript使用 算术运算符 来计算值: (5 + 6) * 10 JavaScript使用赋值运算符给变量赋值: x = 5 y = 6 z = (x + y) * 10 JavaScript语言有多种类型的运算符: JavaScript 语句 在 HTML 中,JavaScript 语句向浏览器发出的命令。 语句是用分号分隔: x = 5 + 6; y = x * 10; JavaScript 关键字 JavaScript 关键字用于标识要执行的操作。 和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。 var 关键字告诉浏览器创建一个新的变量: var x = 5 + 6; var y = x * 10; JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。 以下是 JavaScript 中最重要的保留字(按字母顺序): JavaScript 注释 不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略: // 我不会执行 JavaScript 数据类型 JavaScript 有多种数据类型:数字,字符串,数组,对象等等: var length = 16; // Number 通过数字字面量赋值 var points = x * 10; // Number 通过表达式字面量赋值 var lastName = "Johnson"; // String 通过字符串字面量赋值 var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值 var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值 数据类型的概念 编程语言中,数据类型是一个非常重要的内容。 为了可以操作变量,了解数据类型的概念非常重要。 如果没有使用数据类型,以下实例将无法执行: 16 + "Volvo" 16 加上 "Volvo" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢? "16Volvo" 你可以在浏览器尝试执行以上代码查看效果。 在接下来的章节中你将学到更多关于数据类型的知识。 JavaScript 函数 JavaScript 语句可以写在函数内,函数可以重复引用: 引用一个函数 = 调用函数(执行函数内的语句)。 function myFunction(a, b) { return a * b; // 返回 a 乘以 b 的结果 } JavaScript 字母大小写 JavaScript 对大小写是敏感的。 当编写 JavaScript 语句时,请留意是否关闭大小写切换键。 函数 getElementById 与 getElementbyID 是不同的。 同样,变量 myVariable 与 MyVariable 也是不同的。 JavaScript 字符集 JavaScript 使用 Unicode 字符集。 Unicode 覆盖了所有的字符,包含标点等字符。 三 推荐学习网站 JS具体的语法内容还有很多,可以参考官方API或者学习网站完成掌握,简单易学,推荐网站 菜鸟教程:https://www.runoob.com/js/js-tutorial.html w3cschool:https://www.w3school.com.cn/js/index.asp 四 推荐学习书籍 引用自 https://www.cnblogs.com/xhqq/p/7561384.html 个人觉得不错的,没事可以翻翻的。书籍如下: 《javascript设计模式》,张容铭写的,可能不太适合零基础的,是非常不错的进阶书籍。 《javascript面向对象编程指南》,风格轻松易懂,比较适合初学者,原型那块儿讲得透彻,12种继承方式呢。 《js权威指南》、《js高级程序设计》,这两本书经典是经典,但是太厚,适合把其中任意一章都当成一本书来读。洋洋洒洒,很难一口气看完。比较适合当做参考书。 《你不知道的javascript》狙击js核心细节,闭包、原型、this讲得都还清楚。 《js设计模式与开发实践》js设计模式也是要学的,此书把js的设计模式讲得非常清晰,一点不晦涩,看起来没多少难度。 《正则指引》,分析源码时,如果正则表达式不懂,没法进行下去的。此书相对来说讲得比较清晰。 《基于MVC的JavaScript Web富应用开发》,看完后,基本能写出自己的mvc框架了。是本好书。 《javascript函数式编程》,js是一门函数式语言,此书是函数式编程一个入门,函数是一等公民那是非常重要的。 《js忍者秘籍》,jq作者写的,没有传说中的那么难读,话说就算你看完并理解所有知识点,也不会达到世界高手级别的。因为你还没有做到随心所欲。 《javascript框架设计》,如果初看此书,会觉得此书有罗列代码之嫌。在我看来,此书讲究的是框架的全局观。以上书籍是我认为是成就高手之路上必须看的,也需要反复看。 css相关的书籍,说实话我看得比较少,总共有六七本吧。有两本必须推荐一下: 《css权威指南》,css基础知识点那是讲得非常清楚的。什么层叠优先级、line-height啥的。不是随便一本书都敢叫“权威指南”的。 《css揭秘》,此书我也是不断的看,此书才不屑于全面讲css3各属性呢。css规范文档能讲的,它只会讲你最不在意的。此书解决的47问题,解决思路和解决方案同等重要,很有启发性。以上各书你都可以不买,至少买本此书吧

问问小秘 2020-03-03 09:32:57 0 浏览量 回答数 0

回答

解决了吗?感觉是版本的问题 ######请问楼主解决了吗?我现在也遇到了相同的问题######这个是由于当时IK分词器还不支持solr5.3版本。现在百度已经能找到solr5.3版本下的ik分词器代码了。######https://github.com/EugenePig/ik-analyzer-solr5   下载这个 然后直接编译 按照reademe 的说明配置即可######基于微博数据检测的Solr实战开发 课程观看地址: http://www.xuetuwuyou.com/course/145 课程出自学途无忧网: http://www.xuetuwuyou.com solrcloud5.2.1+zookeeper一部精通 课程观看地址: http://www.xuetuwuyou.com/course/15 一、课程用到的软件 1.centos6.7 2.apache-tomcat-7.0.47 3.solr-5.5 4.zookeeper 3.4.6 5.eclipse-jee-neon-R-win32-x86_64  二、课程目标 在海量数据的情况下,传统的关系型数据库已经力不从心,快速检索已经成为了应用系统所必备的功能之一。本课程从实战角度出发,让学员能从实战中学习到: 搜索引擎的原理及架构。  掌握在大数据环境下经典检索算法。  掌握如何使用solr实现系统快速检索目标。  掌握solr在开发中常见的技术大坑与调优技术。 三、适用人群 开发人员、架构师、对分布式搜索引擎有兴趣的朋友。 四、课程内容介绍: 第1课、Solr简介与部署     知识点:Solr基本概念以及应用的介绍、Solr单机版的搭建 第2课、Solr建库实战     知识点:介绍managed-schame和solrConfig两大配置文件,并建立Solr库开始实操 第3课、Solr中文分词器与全量数据导入     知识点:对比中文分词器IK与MMSeg4j的特点、Solr配置MMSeg4j中文分词器、把Mysql中的数据导入到Solr索引库上 第4课、Solr增量数据导入及新管理UI实战     知识点:把Mysql的数据增量导入到Solr索引库上、对Solr5最新的UI进行全面介绍 第5课、Solr数据查询详解     知识点:基于UI管理界面,实战Solr q查询、fq查询以及分页、高亮、Facet等高级特性的使用 第6课、Solrj编程实战之索引增删改     知识点:基于Eclipse开发环境、搭建Solrj工程项目,对Solr的索引库的进行增、删、改的操作 第7课、Solrj编程实战之索引查询与分页     知识点:基于Solrj实现q查询、fq查询以及分页查询的操作 第8课、Solrj编程实战之高亮与Facet     知识点:基于Solrj实现高亮查询、Facet查询的操作 第9课、Solrj编程实战之设计模式     知识点:基于前阶段所写的代码,发现代码中的不足,并使用单例模式、模块方法、回调方法的设计模式进行仿Spring Data的开发 第10课、Solr缓存与预热机制剖析     知识点:从算法、应用场景以及实例的多个维度,剖析Solr中的四大缓存,并且站在SolrIndexSearcher的生命周期上解剖预热机制及其注意事项 第11课、Solr高级特性之近实时、实时检索     知识点:从概念、原理以及实例的多个维度,剖析Solr近实时、实时检索 第12课、Solr高级特性之原子更新     知识点:Solr在应用层面上对Lucene进行了封装,在Solr4之后提出了原子更新的新概念,从此在应用层面操作上方便我们进行索引更新 第13课、Solr高级特性之深度分页及性能调优     知识点:Solr4的又一大特性,在面临海量据的情况下,占用更低的资源进行数据检索正是深度分页的一大亮点、后半节结合讲师的实际开发经验,分享Solr性能调优的策略 第14课、SolrCloud部署运维之集群搭建     知识点:基于Centos、zookeeper环境下,搭建SolrCloud系统  第15课、SolrCloud部署运维之库管理     知识点:SolrCloud的运维之道,从UI管理界面以及命令行的两个维度去剖析SolrCloud库的管理,包括库的新增、删除以及动态更新  第16课、SolrCloud部署运维之副本与扩容     知识点:SolrCloud的运维之道,从UI管理界面以及命令行的两个维度去剖析SolrCloud分片的管理,包括分片的备份与库的扩容 第17课、中文分词器配置与使用Solrj操作SolrCloud     知识点:配置中文分词器以及使用Solrj操作SolrCloud来实现增、删、改、查  第18课、项目介绍与环境搭建     知识点:介绍项目的背景以及总体架构、突出Solr在实际项目中的角色。基于Maven搭建开发环境  第19课、框架代码开发之Spring集成Solrj之CRUD(maven版)     知识点:Spring是一个JavaEE企业级框架,它很多主流的主件都进行集成支持。本节学习Spring与Solrj的集成,进行增、删、改、查操作 第20课、框架代码开发之Spring集成Solrj之(maven版)     知识点:Spring是一个JavaEE企业级框架,它对很多主流的组件都进行集成支持。本节学习Spring与Solrj的集成,进行实时检索、高亮、深度分页、Facet查询操作 第21课、基于dom4j的导库组件开发(maven版)     知识点:基于dom4j解析XML文件,并将数据批量高效导入到SolrCloud分布式索引库上进行检索分析 第22课、高级检索组件开发一     知识点:基于SolrCloud实现高级检索,包括多条件查询、高亮、分页操作 第23课、高级检索组件开发二         知识点:基于SolrCloud实现高级检索,包括多条件查询、高亮、分页操作 第24课、相似匹配组件开发一     知识点:基于SolrCloud实现相似性检索操作 第25课、相似匹配组件开发二     知识点:基于SolrCloud实现相似性检索操作 第26课、课程总结与Solr6的展望     知识点:课程大总结,并对最新版的Solr6进行亮点分析以及未来的展望

kun坤 2020-06-01 09:57:39 0 浏览量 回答数 0

回答

您可以选择是否使用webWorkers: 没有WebWorkers 对于需要与DOM或应用程序中的许多其他状态进行交互的代码,您不能使用webWorker,因此通常的解决方案是将工作分解为多个块,并在计时器上完成每个块的工作。计时器之间的块之间的中断使浏览器引擎可以处理其他正在进行的事件,不仅可以处理用户输入,还可以绘制屏幕。 通常,您可以负担每个计时器处理多个计时器的效率,这比每个计时器仅处理一个计时器效率更高,速度更快。此代码使UI线程有机会处理每个块之间的任何未决UI事件,这将使UI保持活动状态。 function processLargeArray(array) { // set this to whatever number of items you can process at once var chunk = 100; var index = 0; function doChunk() { var cnt = chunk; while (cnt-- && index < array.length) { // process array[index] here ++index; } if (index < array.length) { // set Timeout for async iteration setTimeout(doChunk, 1); } } doChunk(); } processLargeArray(veryLargeArray); 这是该概念的一个可行示例-不是相同的功能,而是一个使用相同setTimeout()思想通过多次迭代测试概率场景的长期运行过程:http : //jsfiddle.net/jfriend00/9hCVq/ 您可以将上述内容制作成更通用的版本,.forEach()像这样的调用回调函数: // last two args are optional function processLargeArrayAsync(array, fn, chunk, context) { context = context || window; chunk = chunk || 100; var index = 0; function doChunk() { var cnt = chunk; while (cnt-- && index < array.length) { // callback called with args (value, index, array) fn.call(context, array[index], index, array); ++index; } if (index < array.length) { // set Timeout for async iteration setTimeout(doChunk, 1); } } doChunk(); } processLargeArrayAsync(veryLargeArray, myCallback, 100); 除了可以一次猜测要分割多少块,还可以让经过的时间作为每个分割块的指导,并使其在给定的时间间隔内尽可能多地进行处理。不管迭代有多密集,CPU都会自动保证浏览器的响应能力。因此,您可以传递毫秒值(或仅使用智能默认值),而不用传递块大小: // last two args are optional function processLargeArrayAsync(array, fn, maxTimePerChunk, context) { context = context || window; maxTimePerChunk = maxTimePerChunk || 200; var index = 0; function now() { return new Date().getTime(); } function doChunk() { var startTime = now(); while (index < array.length && (now() - startTime) <= maxTimePerChunk) { // callback called with args (value, index, array) fn.call(context, array[index], index, array); ++index; } if (index < array.length) { // set Timeout for async iteration setTimeout(doChunk, 1); } } doChunk(); } processLargeArrayAsync(veryLargeArray, myCallback); 使用WebWorkers 如果循环中的代码不需要访问DOM,则可以将所有耗时的代码放入webWorker中。webWorker将独立于主浏览器Javascript运行,然后完成后,它可以通过postMessage返回任何结果。 webWorker需要将将在webWorker中运行的所有代码分离到一个单独的脚本文件中,但是它可以完全运行,而不必担心阻塞浏览器中其他事件的处理,也不必担心“无响应脚本”提示当在主线程上执行长时间运行的过程且不阻止UI中的事件处理时,可能会出现这种情况。

保持可爱mmm 2020-02-09 13:44:39 0 浏览量 回答数 0

问题

浅析响应式网站设计的用户体验

aizhan 2019-12-01 20:57:13 7537 浏览量 回答数 0

回答

你的JDK是错的把,直接用的Eclipse自带的,你换一下试试回复<aclass='referer'target='_blank'>@朋也:Causedby:java.lang.NoSuchMethodError:org.apache.commons.codec.binary.Base64.<init>(I)V这个报错通常是使用的ECLIPSE自带的JDK导致的,应该重新配置成自己的JDK。回复<aclass='referer'target='_blank'>@首席撸出血:配置了的,是jdk1.8,开发工具是idea或者你本地的JDK环境有没有配置缺jar包啊,<spanstyle="color:#444444;font-family:'MicrosoftYaHei',Verdana,sans-serif,宋体;font-size:14px;line-height:normal;background-color:#FFFFFF;">apache.commons.codec这个包估计所使用的jar版本过低了;如果有多个,可删除低版本的试试这个包有的Base64是commons-codec1.0才加入的类,确认下本地的版本是不是不对,另外也确认下是不是存在两个不同版本的jar包冲突<divclass='ref'> 引用来自“逝水fox”的评论Base64是commons-codec1.0才加入的类,确认下本地的版本是不是不对,另外也确认下是不是存在两个不同版本的jar包冲突 基于微博数据检测的Solr实战开发 课程观看地址:<atarget="_blank"rel="nofollow">http://www.xuetuwuyou.com/course/145 课程出自学途无忧网:<atarget="_blank"rel="nofollow">http://www.xuetuwuyou.com solrcloud5.2.1+zookeeper一部精通 课程观看地址:<atarget="_blank"rel="nofollow">http://www.xuetuwuyou.com/course/15 一、课程用到的软件 1.centos6.7 2.apache-tomcat-7.0.47 3.solr-5.5 4.zookeeper3.4.6 5.eclipse-jee-neon-R-win32-x86_64  二、课程目标 在海量数据的情况下,传统的关系型数据库已经力不从心,快速检索已经成为了应用系统所必备的功能之一。本课程从实战角度出发,让学员能从实战中学习到: 1.搜索引擎的原理及架构。  2.掌握在大数据环境下经典检索算法。  3.掌握如何使用solr实现系统快速检索目标。  4.掌握solr在开发中常见的技术大坑与调优技术。 三、适用人群 开发人员、架构师、对分布式搜索引擎有兴趣的朋友。 四、课程内容介绍: 第1课、Solr简介与部署   知识点:Solr基本概念以及应用的介绍、Solr单机版的搭建 第2课、Solr建库实战   知识点:介绍managed-schame和solrConfig两大配置文件,并建立Solr库开始实操 第3课、Solr中文分词器与全量数据导入   知识点:对比中文分词器IK与MMSeg4j的特点、Solr配置MMSeg4j中文分词器、把Mysql中的数据导入到Solr索引库上 第4课、Solr增量数据导入及新管理UI实战   知识点:把Mysql的数据增量导入到Solr索引库上、对Solr5最新的UI进行全面介绍 第5课、Solr数据查询详解   知识点:基于UI管理界面,实战Solrq查询、fq查询以及分页、高亮、Facet等高级特性的使用 第6课、Solrj编程实战之索引增删改   知识点:基于Eclipse开发环境、搭建Solrj工程项目,对Solr的索引库的进行增、删、改的操作 第7课、Solrj编程实战之索引查询与分页   知识点:基于Solrj实现q查询、fq查询以及分页查询的操作 第8课、Solrj编程实战之高亮与Facet   知识点:基于Solrj实现高亮查询、Facet查询的操作 第9课、Solrj编程实战之设计模式   知识点:基于前阶段所写的代码,发现代码中的不足,并使用单例模式、模块方法、回调方法的设计模式进行仿SpringData的开发 第10课、Solr缓存与预热机制剖析   知识点:从算法、应用场景以及实例的多个维度,剖析Solr中的四大缓存,并且站在SolrIndexSearcher的生命周期上解剖预热机制及其注意事项 第11课、Solr高级特性之近实时、实时检索   知识点:从概念、原理以及实例的多个维度,剖析Solr近实时、实时检索 第12课、Solr高级特性之原子更新   知识点:Solr在应用层面上对Lucene进行了封装,在Solr4之后提出了原子更新的新概念,从此在应用层面操作上方便我们进行索引更新 第13课、Solr高级特性之深度分页及性能调优   知识点:Solr4的又一大特性,在面临海量据的情况下,占用更低的资源进行数据检索正是深度分页的一大亮点、后半节结合讲师的实际开发经验,分享Solr性能调优的策略 第14课、SolrCloud部署运维之集群搭建   知识点:基于Centos、zookeeper环境下,搭建SolrCloud系统  第15课、SolrCloud部署运维之库管理   知识点:SolrCloud的运维之道,从UI管理界面以及命令行的两个维度去剖析SolrCloud库的管理,包括库的新增、删除以及动态更新  第16课、SolrCloud部署运维之副本与扩容   知识点:SolrCloud的运维之道,从UI管理界面以及命令行的两个维度去剖析SolrCloud分片的管理,包括分片的备份与库的扩容 第17课、中文分词器配置与使用Solrj操作SolrCloud   知识点:配置中文分词器以及使用Solrj操作SolrCloud来实现增、删、改、查  第18课、项目介绍与环境搭建   知识点:介绍项目的背景以及总体架构、突出Solr在实际项目中的角色。基于Maven搭建开发环境  第19课、框架代码开发之Spring集成Solrj之CRUD(maven版)   知识点:Spring是一个JavaEE企业级框架,它很多主流的主件都进行集成支持。本节学习Spring与Solrj的集成,进行增、删、改、查操作 第20课、框架代码开发之Spring集成Solrj之(maven版)   知识点:Spring是一个JavaEE企业级框架,它对很多主流的组件都进行集成支持。本节学习Spring与Solrj的集成,进行实时检索、高亮、深度分页、Facet查询操作 第21课、基于dom4j的导库组件开发(maven版)   知识点:基于dom4j解析XML文件,并将数据批量高效导入到SolrCloud分布式索引库上进行检索分析 第22课、高级检索组件开发一   知识点:基于SolrCloud实现高级检索,包括多条件查询、高亮、分页操作 第23课、高级检索组件开发二     知识点:基于SolrCloud实现高级检索,包括多条件查询、高亮、分页操作 第24课、相似匹配组件开发一   知识点:基于SolrCloud实现相似性检索操作 第25课、相似匹配组件开发二   知识点:基于SolrCloud实现相似性检索操作 第26课、课程总结与Solr6的展望   知识点:课程大总结,并对最新版的Solr6进行亮点分析以及未来的展望

爱吃鱼的程序员 2020-06-12 15:21:44 0 浏览量 回答数 0

问题

影响网页渲染的关键!

sunny夏筱 2019-12-01 21:52:37 7114 浏览量 回答数 1

问题

最大限度利用 JavaScript 和 Ajax 性能:报错

kun坤 2020-06-05 22:56:50 0 浏览量 回答数 1

问题

【分享】WeX5的正确打开方式(3)——绑定机制

小太阳1号 2019-12-01 21:23:54 5393 浏览量 回答数 3

问题

Knockout.js 体验之旅

小太阳1号 2019-12-01 21:11:47 2822 浏览量 回答数 1

问题

使用Yeoman和Polymer创建Web应用:报错

kun坤 2020-06-08 11:03:09 3 浏览量 回答数 1

问题

用JavaScript编写一个Java虚拟机?谈谈哗众取宠的BicaVM 400 请求报错 

kun坤 2020-05-29 09:57:19 2 浏览量 回答数 1

问题

【精品问答】前端开发必懂之JS技术二百问

茶什i 2019-12-01 22:05:04 146 浏览量 回答数 0

回答

为什么你的代码是一个单体? 除了已经实现了微前端的应用之外,所有前端应用本质上都是单一的应用。原因是如果您正在使用 React 库进行开发,并且如果您有两个团队,则两个团队都应该使用相同的React 库,并且两个团队应该在部署时保持同步,并且在代码合并期间始终会发生冲突。它们没有完全分离,很可能它们维护着相同的仓库并具有相同的构建系统。单体应用的退出被标志为微服务的出现。但是它适用于后端! 什么是微服务? 对于微服务,一般而言最简单的解释是,它是一种开发技术,允许开发人员为平台的不同部分进行独立部署,而不会损害其他部分。独立部署的能力允许他们构建孤立或松散耦合的服务。为了使这个体系结构更稳定,有一些规则要遵循,可以总结如下:每个服务应该只有一个任务,它应该很小。所以负责这项服务的团队应该很小。关于团队和项目的规模,James Lewis 和 Martin Fowler 在互联网上做出的最酷解释之一如下: 在我们与微服务从业者的对话中,我们看到了一系列服务规模。报道的最大规模遵循亚马逊关于Two Pizza Team的概念(即整个团队可以由两个比萨饼供给),意味着不超过十几个人。在规模较小的规模上,我们已经看到了一个由六人组成的团队支持六项服务的设置。 我画了一个简单的草图,为整体和微服务提供了直观的解释: 从上图可以理解,微服务中的每个服务都是一个独立的应用,除了UI。UI仍然是一体的!当一个团队处理所有服务并且公司正在扩展时,前端团队将开始苦苦挣扎并且无法跟上它,这是这种架构的瓶颈。 除了瓶颈之外,这种架构也会导致一些组织问题。假设公司正在发展并将采用需要 跨职能 小团队的敏捷开发方法。在这个常见的例子中,产品所有者自然会开始将故事定义为前端和后端任务,而 跨职能 团队将永远不会成为真正的 跨职能 部门。这将是一个浅薄的泡沫,看起来像一个敏捷的团队,但它将在内部分开。关于管理这种团队的更多信息将是一项非常重要的工作。在每个计划中,如果有足够的前端任务或者sprint中有足够的后端任务,则会有一个问题。为了解决这里描述的所有问题和许多其他问题,几年前出现了微前端的想法并且开始迅速普及。 解决微服务中的瓶颈问题:Micro Frontends 解决方案实际上非常明显,采用了多年来为后端服务工作的相同原则:将前端整体划分为小的UI片段。但UI与服务并不十分相似,它是最终用户与产品之间的接口,应该是一致且无缝的。更重要的是,在单页面应用时代,整个应用在客户端的浏览器上运行。它们不再是简单的HTML文件,相反,它们是复杂的软件,达到了非常复杂的水平。现在我觉得微型前端的定义是必要的: Micro Frontends背后的想法是将网站或Web应用视为独立团队拥有的功能组合。每个团队都有一个独特的业务或任务领域,做他们关注和专注的事情。团队是跨职能的,从数据库到用户界面开发端到端的功能。(micro-frontends.org) 根据我迄今为止的经验,对于许多公司来说,直接采用上面提出的架构真的很难。许多其他人都有巨大的遗留负担,这使他们无法迁移到新的架构。出于这个原因,更柔软的中间解决方案更加灵活,易于采用和安全迁移至关重要。在更详细地概述了体系结构后,我将尝试提供一些体系结构的洞察,该体系结构确认了上述提议并允许更灵活的方式。在深入了解细节之前,我需要建立一些术语。 整体结构和一些术语 让我们假设我们通过业务功能垂直划分整体应用结构。我们最终会得到几个较小的应用,它们与单体应用具有相同的结构。但是如果我们在所有这些小型单体应用之上添加一个特殊应用,用户将与这个新应用进行通信,它将把每个小应用的旧单体UI组合成一个。这个新图层可以命名为拼接图层,因为它从每个微服务中获取生成的UI部件,并为最终用户组合成一个无缝 UI,这将是微前端的最直接实现朗 为了更好地理解,我将每个小型单体应用称为微应用,因为它们都是独立的应用,而不仅仅是微服务,它们都有UI部件,每个都代表端到端的业务功能。 众所周知,今天的前端生态系统功能多样,而且非常复杂。因此,当实现真正的产品时,这种直接的解决方案还不够。 要解决的问题 虽然这篇文章只是一个想法,但我开始使用Reddit讨论这个想法。感谢社区和他们的回复,我可以列出一些需要解决的问题,我将尝试逐一描述。 当我们拥有一个完全独立的独立微应用时,如何创建无缝且一致的UI体验? 好吧,这个问题没有灵丹妙药的答案,但其中一个想法是创建一个共享的UI库,它也是一个独立的微应用。通过这种方式,所有其他微应用将依赖于共享的UI库微应用。在这种情况下,我们刚刚创建了一个共享依赖项, 我们就杀死了独立微应用的想法。 另一个想法是在根级共享CSS自定义变量( CSS custom variables )。此解决方案的优势在于应用之间的全局可配置主题。 或者我们可以简单地在应用团队之间共享一些SASS变量和混合。这种方法的缺点是UI元素的重复实现,并且应该对所有微应用始终检查和验证类似元素的设计的完整性。 我们如何确保一个团队不会覆盖另一个团队编写的CSS? 一种解决方案是通过CSS选择器名称进行CSS定义,这些名称由微应用名称精心选择。通过将该范围任务放在拼接层上将减少开发开销,但会增加拼接层的责任。 另一种解决方案可以是强制每个微应用成为自定义Web组件(custom web component)。这个解决方案的优点是浏览器完成了范围设计,但需要付出代价:使用shadow DOM进行服务器端渲染几乎是不可能的。此外,自定义元素没有100%的浏览器支持,特别是IE。 我们应该如何在微应用之间共享全局信息? 这个问题指出了关于这个主题的最关注的问题之一,但解决方案非常简单:HTML 5具有相当强大的功能,大多数前端开发人员都不知道。例如,自定义事件(custom events) 就是其中之一,它是在微应用中共享信息的解决方案。 或者,任何共享的pub-sub实现或T39可观察的实现都可以实现。如果我们想要一个更复杂的全局状态处理程序,我们可以实现共享的微型Redux,通过这种方式我们可以实现更多的相应式架构。 如果所有微应用都是独立应用,我们如何进行客户端路由? 这个问题取决于设计的每个实现, 所有主要的现代框架都通过使用浏览器历史状态在客户端提供强大的路由机制, 问题在于哪个应用负责路由以及何时。 我目前的实用方法是创建一个共享客户端路由器,它只负责顶级路由,其余路由器属于相应的微应用。假设我们有 /content/:id 路由定义。共享路由器将解析 /content,已解析的路由将传递到ContentMicroApp。ContentMicroApp是一个独立的服务器,它将仅使用 /:id 进行调用。 我们必须是服务器端渲染,但是有可能使用微前端吗? 服务器端呈现是一个棘手的问题。如果你正在考虑iframes缝合微应用然后忘记服务器端渲染。同样,拼接任务的Web组件也不比iframe强大。但是,如果每个微应用能够在服务器端呈现其内容,那么拼接层将仅负责连接服务器端的HTML片段。 与传统环境集成至关重要!但是怎么样? 为了整合遗留系统,我想描述我自己的策略,我称之为“ 渐进式入侵 ”。 首先,我们必须实现拼接层,它应该具有透明代理的功能。然后我们可以通过声明一个通配符路径将遗留系统定义为微应用:LegacyMicroApp 。因此,所有流量都将到达拼接层,并将透明地代理到旧系统,因为我们还没有任何其他微应用。 下一步将是我们的 第一次逐步入侵 :我们将从LegacyMicroApp中删除主要导航并用依赖项替换它。这种依赖关系将是一个使用闪亮的新技术实现的微应用:NavigationMicroApp 。 现在,拼接层将每个路径解析为 Legacy Micro App ,它将依赖关系解析为 Navigation MicroApp ,并通过连接这两个来为它们提供服务。 然后通过主导航遵循相同的模式来为引导下一步。 然后我们将继续从Legacy MicroApp中获取逐步重复以上操作,直到没有任何遗漏。 如何编排客户端,这样我们每次都不需要重新加载页面? 拼接层解决了服务器端的问题,但没有解决客户端问题。在客户端,在将已粘贴的片段作为无缝HTML加载后,我们不需要每次在URL更改时加载所有部分。因此,我们必须有一些异步加载片段的机制。但问题是,这些片段可能有一些依赖关系,这些依赖关系需要在客户端解决。这意味着微前端解决方案应提供加载微应用的机制,以及依赖注入的一些机制。 根据上述问题和可能的解决方案,我可以总结以下主题下的所有内容: 客户端 编排路由隔离微应用应用之间通信微应用UI之间的一致性 服务端 服务端渲染路由依赖管理 灵活、强大而简单的架构 所以,这篇文章还是很值得期待的!微前端架构的基本要素和要求终于显现! 在这些要求和关注的指导下,我开始开发一种名为microfe的解决方案。在这里,我将通过抽象的方式强调其主要组件来描述该项目的架构目标。 它很容易从客户端开始,它有三个独立的主干结构:AppsManager, Loader, Router 和一个额外的MicroAppStore。 AppsManager AppsManager 是客户端微应用编排的核心。AppsManager的主要功能是创建依赖关系树。当解决了微应用的所有依赖关系时,它会实例化微应用。 Loader 客户端微应用编排的另一个重要部分是Loader。加载器的责任是从服务器端获取未解析的微应用。 Router 为了解决客户端路由问题,我将 Router 引入了 microfe。与常见的客户端路由器不同,microf 的功能有限,它不解析页面而是微应用。假设我们有一个URL /content/detail/13 和一个ContentMicroApp。在这种情况下,microfe 将URL解析为 /content/,它将调用ContentMicroApp /detail/13 URL部分。 MicroAppStore 为了解决微应用到微应用客户端的通信,我将MicroAppStore引入了 microfe。它具有与Redux库类似的功能,区别在于:它对异步数据结构更改和reducer 声明更灵活。 服务器端部分在实现上可能稍微复杂一些,但结构更简单。它只包含两个主要部分 StitchingServer 和许多MicroAppServer。 MicroAppServer MicroAppServer 的最小功能可以概括为 init 和 serve。 虽然 MicroAppServer 首先启动它应该做的是使用 微应用声明 调用 SticthingServer 注册端点,该声明定义了 MicroAppServer 的微应用 依赖关系, 类型 和 URL架构。我认为没有必要提及服务功能,因为没有什么特别之处。 StitchingServer StitchingServer 为 MicroAppServers 提供注册端点。当 MicroAppServer 将自己注册到 StichingServer 时,StichingServer 会记录MicroAppServer 的声明。 稍后,StitchingServer 使用声明从请求的URL解析 MicroAppServers。 解析M icroAppServer 及其所有依赖项后,CSS,JS和HTML中的所有相对路径都将以相关的 MicroAppServer 公共URL为前缀。另外一步是为CSS选择器添加一个唯一的 MicroAppServer 标识符,以防止客户端的微应用之间发生冲突。 然后 StitchingServer 的主要职责就是:从所有收集的部分组成并返回一个无缝的HTML页面。 其他实现一览 甚至在2016年被称为微前端之前,许多大公司都试图通过 BigPipe 来解决Facebook等类似问题。如今这个想法正在获得验证。不同规模的公司对该主题感兴趣并投入时间和金钱。例如,Zalando开源了其名为Project Mosaic的解决方案。我可以说,微型和 Project Mosaic.遵循类似的方法,但有一些重要的区别。虽然microfe采用完全分散的路由定义来增强每个微应用的独立性,但Project Mosaic更喜欢每条路径的集中路由定义和布局定义。通过这种方式,Project Mosaic可以实现轻松的A/B测试和动态布局生成。 对于该主题还有一些其他方法,例如使用iframe作为拼接层,这显然不是在服务器端而是在客户端。这是一个非常简单的解决方案,不需要太多的服务器结构和DevOps参与。这项工作只能由前端团队完成,因此可以减轻公司的组织负担,同时降低成本。 已经有一个框架叫做 single-spa。该项目依赖于每个应用的命名约定来解析和加载微应用。容易掌握想法并遵循模式。因此,在您自己的本地环境中尝试该想法可能是一个很好的初步介绍。但是项目的缺点是你必须以特定的方式构建每个微应用,以便他们可以很好地使用框架。 最后的想法 我相信微前端话题会更频繁地讨论。如果该主题能够引起越来越多公司的关注,它将成为大型团队的事实发展方式。在不久的将来,任何前端开发人员都可以在这个架构上掌握一些见解和经验,这真的很有用。 关于本文 译者:@Vincent.W 译文:https://zhuanlan.zhihu.com/p/82965940 作者:@onerzafer 原文:https://hackernoon.com/understanding-micro-frontends-b1c11585a297 加入阿里云钉钉群享福利:每周技术直播,定期群内有奖活动、大咖问答 阿里云开发者社区

茶什i 2020-01-06 17:57:24 0 浏览量 回答数 0

回答

一、接口的默认方法 Java 8允许我们给接口添加一个非抽象的方法实现,只需要使用 default关键字即可,这个特征又叫做扩展方法,示例如下: interface Formula { double calculate(int a); default double sqrt(int a) { return Math.sqrt(a); } } Formula接口在拥有calculate方法之外同时还定义了sqrt方法,实现了Formula接口的子类只需要实现一个calculate方法,默认方法sqrt将在子类上可以直接使用。 Formula formula = new Formula() { @Override public double calculate(int a) { return sqrt(a * 100); } }; formula.calculate(100); // 100.0 formula.sqrt(16); // 4.0 文中的formula被实现为一个匿名类的实例,该代码非常容易理解,6行代码实现了计算 sqrt(a * 100)。在下一节中,我们将会看到实现单方法接口的更简单的做法。 译者注: 在Java中只有单继承,如果要让一个类赋予新的特性,通常是使用接口来实现,在C++中支持多继承,允许一个子类同时具有多个父类的接口与功能,在其他语言中,让一个类同时具有其他的可复用代码的方法叫做mixin。新的Java 8 的这个特新在编译器实现的角度上来说更加接近Scala的trait。 在C#中也有名为扩展方法的概念,允许给已存在的类型扩展方法,和Java 8的这个在语义上有差别。 二、Lambda 表达式 首先看看在老版本的Java中是如何排列字符串的: List<String> names = Arrays.asList("peter", "anna", "mike", "xenia"); Collections.sort(names, new Comparator<String>() { @Override public int compare(String a, String b) { return b.compareTo(a); } }); 只需要给静态方法 Collections.sort 传入一个List对象以及一个比较器来按指定顺序排列。通常做法都是创建一个匿名的比较器对象然后将其传递给sort方法。 在Java 8 中你就没必要使用这种传统的匿名对象的方式了,Java 8提供了更简洁的语法,lambda表达式: Collections.sort(names, (String a, String b) -> { return b.compareTo(a); }); 看到了吧,代码变得更段且更具有可读性,但是实际上还可以写得更短: Collections.sort(names, (String a, String b) -> b.compareTo(a)); 对于函数体只有一行代码的,你可以去掉大括号{}以及return关键字,但是你还可以写得更短点: Collections.sort(names, (a, b) -> b.compareTo(a)); Java编译器可以自动推导出参数类型,所以你可以不用再写一次类型。接下来我们看看lambda表达式还能作出什么更方便的东西来 三、函数式接口 Lambda表达式是如何在java的类型系统中表示的呢?每一个lambda表达式都对应一个类型,通常是接口类型。而“函数式接口”是指仅仅只包含一个抽象方法的接口,每一个该类型的lambda表达式都会被匹配到这个抽象方法。因为 默认方法 不算抽象方法,所以你也可以给你的函数式接口添加默认方法。 我们可以将lambda表达式当作任意只包含一个抽象方法的接口类型,确保你的接口一定达到这个要求,你只需要给你的接口添加 @FunctionalInterface 注解,编译器如果发现你标注了这个注解的接口有多于一个抽象方法的时候会报错的。 @FunctionalInterface interface Converter<F, T> { T convert(F from); } Converter<String, Integer> converter = (from) -> Integer.valueOf(from); Integer converted = converter.convert("123"); System.out.println(converted); // 123 需要注意如果@FunctionalInterface如果没有指定,上面的代码也是对的。 译者注 将lambda表达式映射到一个单方法的接口上,这种做法在Java 8之前就有别的语言实现,比如Rhino JavaScript解释器,如果一个函数参数接收一个单方法的接口而你传递的是一个function,Rhino 解释器会自动做一个单接口的实例到function的适配器,典型的应用场景有 org.w3c.dom.events.EventTarget 的addEventListener 第二个参数 EventListener。 四、方法与构造函数引用 前一节中的代码还可以通过静态方法引用来表示: Converter<String, Integer> converter = Integer::valueOf; Integer converted = converter.convert("123"); System.out.println(converted); // 123 Java 8 允许你使用 :: 关键字来传递方法或者构造函数引用,上面的代码展示了如何引用一个静态方法,我们也可以引用一个对象的方法: converter = something::startsWith; String converted = converter.convert("Java"); System.out.println(converted); // "J" 接下来看看构造函数是如何使用::关键字来引用的,首先我们定义一个包含多个构造函数的简单类: class Person { String firstName; String lastName; Person() {} Person(String firstName, String lastName) { this.firstName = firstName; this.lastName = lastName; } } 接下来我们指定一个用来创建Person对象的对象工厂接口: interface PersonFactory<P extends Person> { P create(String firstName, String lastName); } 这里我们使用构造函数引用来将他们关联起来,而不是实现一个完整的工厂: PersonFactory<Person> personFactory = Person::new; Person person = personFactory.create("Peter", "Parker"); 我们只需要使用 Person::new 来获取Person类构造函数的引用,Java编译器会自动根据PersonFactory.create方法的签名来选择合适的构造函数。 五、Lambda 作用域 在lambda表达式中访问外层作用域和老版本的匿名对象中的方式很相似。你可以直接访问标记了final的外层局部变量,或者实例的字段以及静态变量。 六、访问局部变量 我们可以直接在lambda表达式中访问外层的局部变量: final int num = 1; Converter<Integer, String> stringConverter = (from) -> String.valueOf(from + num); stringConverter.convert(2); // 3 但是和匿名对象不同的是,这里的变量num可以不用声明为final,该代码同样正确: int num = 1; Converter<Integer, String> stringConverter = (from) -> String.valueOf(from + num); stringConverter.convert(2); // 3 不过这里的num必须不可被后面的代码修改(即隐性的具有final的语义),例如下面的就无法编译: int num = 1; Converter<Integer, String> stringConverter = (from) -> String.valueOf(from + num); num = 3; 在lambda表达式中试图修改num同样是不允许的。 七、访问对象字段与静态变量 和本地变量不同的是,lambda内部对于实例的字段以及静态变量是即可读又可写。该行为和匿名对象是一致的: class Lambda4 { static int outerStaticNum; int outerNum; void testScopes() { Converter<Integer, String> stringConverter1 = (from) -> { outerNum = 23; return String.valueOf(from); }; Converter<Integer, String> stringConverter2 = (from) -> { outerStaticNum = 72; return String.valueOf(from); }; } } 八、访问接口的默认方法 还记得第一节中的formula例子么,接口Formula定义了一个默认方法sqrt可以直接被formula的实例包括匿名对象访问到,但是在lambda表达式中这个是不行的。 Lambda表达式中是无法访问到默认方法的,以下代码将无法编译: Formula formula = (a) -> sqrt( a * 100); Built-in Functional Interfaces JDK 1.8 API包含了很多内建的函数式接口,在老Java中常用到的比如Comparator或者Runnable接口,这些接口都增加了@FunctionalInterface注解以便能用在lambda上。 Java 8 API同样还提供了很多全新的函数式接口来让工作更加方便,有一些接口是来自Google Guava库里的,即便你对这些很熟悉了,还是有必要看看这些是如何扩展到lambda上使用的。 Predicate接口 Predicate 接口只有一个参数,返回boolean类型。该接口包含多种默认方法来将Predicate组合成其他复杂的逻辑(比如:与,或,非): Predicate<String> predicate = (s) -> s.length() > 0; predicate.test("foo"); // true predicate.negate().test("foo"); // false Predicate<Boolean> nonNull = Objects::nonNull; Predicate<Boolean> isNull = Objects::isNull; Predicate<String> isEmpty = String::isEmpty; Predicate<String> isNotEmpty = isEmpty.negate(); Function 接口 Function 接口有一个参数并且返回一个结果,并附带了一些可以和其他函数组合的默认方法(compose, andThen): Function<String, Integer> toInteger = Integer::valueOf; Function<String, String> backToString = toInteger.andThen(String::valueOf); backToString.apply("123"); // "123" Supplier 接口 Supplier 接口返回一个任意范型的值,和Function接口不同的是该接口没有任何参数 Supplier personSupplier = Person::new; personSupplier.get(); // new Person Consumer 接口 Consumer 接口表示执行在单个参数上的操作。 Consumer greeter = (p) -> System.out.println("Hello, " + p.firstName); greeter.accept(new Person("Luke", "Skywalker")); Comparator 接口 Comparator 是老Java中的经典接口, Java 8在此之上添加了多种默认方法: Comparator comparator = (p1, p2) -> p1.firstName.compareTo(p2.firstName); Person p1 = new Person("John", "Doe"); Person p2 = new Person("Alice", "Wonderland"); comparator.compare(p1, p2); // > 0 comparator.reversed().compare(p1, p2); // < 0 Optional 接口 Optional 不是函数是接口,这是个用来防止NullPointerException异常的辅助类型,这是下一届中将要用到的重要概念,现在先简单的看看这个接口能干什么: Optional 被定义为一个简单的容器,其值可能是null或者不是null。在Java 8之前一般某个函数应该返回非空对象但是偶尔却可能返回了null,而在Java 8中,不推荐你返回null而是返回Optional。 Optional optional = Optional.of("bam"); optional.isPresent(); // true optional.get(); // "bam" optional.orElse("fallback"); // "bam" optional.ifPresent((s) -> System.out.println(s.charAt(0))); // "b" Stream 接口 java.util.Stream 表示能应用在一组元素上一次执行的操作序列。Stream 操作分为中间操作或者最终操作两种,最终操作返回一特定类型的计算结果,而中间操作返回Stream本身,这样你就可以将多个操作依次串起来。Stream 的创建需要指定一个数据源,比如 java.util.Collection的子类,List或者Set, Map不支持。Stream的操作可以串行执行或者并行执行。 首先看看Stream是怎么用,首先创建实例代码的用到的数据List: List stringCollection = new ArrayList<>(); stringCollection.add("ddd2"); stringCollection.add("aaa2"); stringCollection.add("bbb1"); stringCollection.add("aaa1"); stringCollection.add("bbb3"); stringCollection.add("ccc"); stringCollection.add("bbb2"); stringCollection.add("ddd1"); Java 8扩展了集合类,可以通过 Collection.stream() 或者 Collection.parallelStream() 来创建一个Stream。下面几节将详细解释常用的Stream操作: Filter 过滤 过滤通过一个predicate接口来过滤并只保留符合条件的元素,该操作属于中间操作,所以我们可以在过滤后的结果来应用其他Stream操作(比如forEach)。forEach需要一个函数来对过滤后的元素依次执行。forEach是一个最终操作,所以我们不能在forEach之后来执行其他Stream操作。 stringCollection .stream() .filter((s) -> s.startsWith("a")) .forEach(System.out::println); // "aaa2", "aaa1" Sort 排序 排序是一个中间操作,返回的是排序好后的Stream。如果你不指定一个自定义的Comparator则会使用默认排序。 stringCollection .stream() .sorted() .filter((s) -> s.startsWith("a")) .forEach(System.out::println); // "aaa1", "aaa2" 需要注意的是,排序只创建了一个排列好后的Stream,而不会影响原有的数据源,排序之后原数据stringCollection是不会被修改的。 System.out.println(stringCollection); // ddd2, aaa2, bbb1, aaa1, bbb3, ccc, bbb2, ddd1 Map 映射 中间操作map会将元素根据指定的Function接口来依次将元素转成另外的对象,下面的示例展示了将字符串转换为大写字符串。你也可以通过map来讲对象转换成其他类型,map返回的Stream类型是根据你map传递进去的函数的返回值决定的。 stringCollection .stream() .map(String::toUpperCase) .sorted((a, b) -> b.compareTo(a)) .forEach(System.out::println); // "DDD2", "DDD1", "CCC", "BBB3", "BBB2", "AAA2", "AAA1" Match 匹配 Stream提供了多种匹配操作,允许检测指定的Predicate是否匹配整个Stream。所有的匹配操作都是最终操作,并返回一个boolean类型的值。 boolean anyStartsWithA = stringCollection .stream() .anyMatch((s) -> s.startsWith("a")); System.out.println(anyStartsWithA); // true boolean allStartsWithA = stringCollection .stream() .allMatch((s) -> s.startsWith("a")); System.out.println(allStartsWithA); // false boolean noneStartsWithZ = stringCollection .stream() .noneMatch((s) -> s.startsWith("z")); System.out.println(noneStartsWithZ); // true Count 计数 计数是一个最终操作,返回Stream中元素的个数,返回值类型是long。 long startsWithB = stringCollection .stream() .filter((s) -> s.startsWith("b")) .count(); System.out.println(startsWithB); // 3 Reduce 规约 这是一个最终操作,允许通过指定的函数来讲stream中的多个元素规约为一个元素,规越后的结果是通过Optional接口表示的: Optional reduced = stringCollection .stream() .sorted() .reduce((s1, s2) -> s1 + "#" + s2); reduced.ifPresent(System.out::println); // "aaa1#aaa2#bbb1#bbb2#bbb3#ccc#ddd1#ddd2" 并行Streams 前面提到过Stream有串行和并行两种,串行Stream上的操作是在一个线程中依次完成,而并行Stream则是在多个线程上同时执行。 下面的例子展示了是如何通过并行Stream来提升性能: 首先我们创建一个没有重复元素的大表 int max = 1000000; List values = new ArrayList<>(max); for (int i = 0; i < max; i++) { UUID uuid = UUID.randomUUID(); values.add(uuid.toString()); } 然后我们计算一下排序这个Stream要耗时多久, 串行排序: long t0 = System.nanoTime(); long count = values.stream().sorted().count(); System.out.println(count); long t1 = System.nanoTime(); long millis = TimeUnit.NANOSECONDS.toMillis(t1 - t0); System.out.println(String.format("sequential sort took: %d ms", millis)); // 串行耗时: 899 ms 并行排序: long t0 = System.nanoTime(); long count = values.parallelStream().sorted().count(); System.out.println(count); long t1 = System.nanoTime(); long millis = TimeUnit.NANOSECONDS.toMillis(t1 - t0); System.out.println(String.format("parallel sort took: %d ms", millis)); // 并行排序耗时: 472 ms 上面两个代码几乎是一样的,但是并行版的快了50%之多,唯一需要做的改动就是将stream()改为parallelStream()。 Map 前面提到过,Map类型不支持stream,不过Map提供了一些新的有用的方法来处理一些日常任务。 Map<Integer, String> map = new HashMap<>(); for (int i = 0; i < 10; i++) { map.putIfAbsent(i, "val" + i); } map.forEach((id, val) -> System.out.println(val)); 以上代码很容易理解, putIfAbsent 不需要我们做额外的存在性检查,而forEach则接收一个Consumer接口来对map里的每一个键值对进行操作。 下面的例子展示了map上的其他有用的函数: map.computeIfPresent(3, (num, val) -> val + num); map.get(3); // val33 map.computeIfPresent(9, (num, val) -> null); map.containsKey(9); // false map.computeIfAbsent(23, num -> "val" + num); map.containsKey(23); // true map.computeIfAbsent(3, num -> "bam"); map.get(3); // val33 接下来展示如何在Map里删除一个键值全都匹配的项 map.remove(3, "val3"); map.get(3); // val33 map.remove(3, "val33"); map.get(3); // null 另外一个有用的方法 map.getOrDefault(42, "not found"); // not found 对Map的元素做合并也变得很容易了: map.merge(9, "val9", (value, newValue) -> value.concat(newValue)); map.get(9); // val9 map.merge(9, "concat", (value, newValue) -> value.concat(newValue)); map.get(9); // val9concat Merge做的事情是如果键名不存在则插入,否则则对原键对应的值做合并操作并重新插入到map中。 九、Date API Java 8 在包java.time下包含了一组全新的时间日期API。新的日期API和开源的Joda-Time库差不多,但又不完全一样,下面的例子展示了这组新API里最重要的一些部分: Clock 时钟 Clock类提供了访问当前日期和时间的方法,Clock是时区敏感的,可以用来取代 System.currentTimeMillis() 来获取当前的微秒数。某一个特定的时间点也可以使用Instant类来表示,Instant类也可以用来创建老的java.util.Date对象。 Clock clock = Clock.systemDefaultZone(); long millis = clock.millis(); Instant instant = clock.instant(); Date legacyDate = Date.from(instant); // legacy java.util.Date Timezones 时区 在新API中时区使用ZoneId来表示。时区可以很方便的使用静态方法of来获取到。 时区定义了到UTS时间的时间差,在Instant时间点对象到本地日期对象之间转换的时候是极其重要的。 System.out.println(ZoneId.getAvailableZoneIds()); // prints all available timezone ids ZoneId zone1 = ZoneId.of("Europe/Berlin"); ZoneId zone2 = ZoneId.of("Brazil/East"); System.out.println(zone1.getRules()); System.out.println(zone2.getRules()); // ZoneRules[currentStandardOffset=+01:00] // ZoneRules[currentStandardOffset=-03:00] LocalTime 本地时间 LocalTime 定义了一个没有时区信息的时间,例如 晚上10点,或者 17:30:15。下面的例子使用前面代码创建的时区创建了两个本地时间。之后比较时间并以小时和分钟为单位计算两个时间的时间差: LocalTime now1 = LocalTime.now(zone1); LocalTime now2 = LocalTime.now(zone2); System.out.println(now1.isBefore(now2)); // false long hoursBetween = ChronoUnit.HOURS.between(now1, now2); long minutesBetween = ChronoUnit.MINUTES.between(now1, now2); System.out.println(hoursBetween); // -3 System.out.println(minutesBetween); // -239 LocalTime 提供了多种工厂方法来简化对象的创建,包括解析时间字符串。 LocalTime late = LocalTime.of(23, 59, 59); System.out.println(late); // 23:59:59 DateTimeFormatter germanFormatter = DateTimeFormatter .ofLocalizedTime(FormatStyle.SHORT) .withLocale(Locale.GERMAN); LocalTime leetTime = LocalTime.parse("13:37", germanFormatter); System.out.println(leetTime); // 13:37 LocalDate 本地日期 LocalDate 表示了一个确切的日期,比如 2014-03-11。该对象值是不可变的,用起来和LocalTime基本一致。下面的例子展示了如何给Date对象加减天/月/年。另外要注意的是这些对象是不可变的,操作返回的总是一个新实例。 LocalDate today = LocalDate.now(); LocalDate tomorrow = today.plus(1, ChronoUnit.DAYS); LocalDate yesterday = tomorrow.minusDays(2); LocalDate independenceDay = LocalDate.of(2014, Month.JULY, 4); DayOfWeek dayOfWeek = independenceDay.getDayOfWeek(); System.out.println(dayOfWeek); // FRIDAY 从字符串解析一个LocalDate类型和解析LocalTime一样简单: DateTimeFormatter germanFormatter = DateTimeFormatter .ofLocalizedDate(FormatStyle.MEDIUM) .withLocale(Locale.GERMAN); LocalDate xmas = LocalDate.parse("24.12.2014", germanFormatter); System.out.println(xmas); // 2014-12-24 LocalDateTime 本地日期时间 LocalDateTime 同时表示了时间和日期,相当于前两节内容合并到一个对象上了。LocalDateTime和LocalTime还有LocalDate一样,都是不可变的。LocalDateTime提供了一些能访问具体字段的方法。 LocalDateTime sylvester = LocalDateTime.of(2014, Month.DECEMBER, 31, 23, 59, 59); DayOfWeek dayOfWeek = sylvester.getDayOfWeek(); System.out.println(dayOfWeek); // WEDNESDAY Month month = sylvester.getMonth(); System.out.println(month); // DECEMBER long minuteOfDay = sylvester.getLong(ChronoField.MINUTE_OF_DAY); System.out.println(minuteOfDay); // 1439 只要附加上时区信息,就可以将其转换为一个时间点Instant对象,Instant时间点对象可以很容易的转换为老式的java.util.Date。 Instant instant = sylvester .atZone(ZoneId.systemDefault()) .toInstant(); Date legacyDate = Date.from(instant); System.out.println(legacyDate); // Wed Dec 31 23:59:59 CET 2014 格式化LocalDateTime和格式化时间和日期一样的,除了使用预定义好的格式外,我们也可以自己定义格式: DateTimeFormatter formatter = DateTimeFormatter .ofPattern("MMM dd, yyyy - HH:mm"); LocalDateTime parsed = LocalDateTime.parse("Nov 03, 2014 - 07:13", formatter); String string = formatter.format(parsed); System.out.println(string); // Nov 03, 2014 - 07:13 和java.text.NumberFormat不一样的是新版的DateTimeFormatter是不可变的,所以它是线程安全的。 关于时间日期格式的详细信息:http://download.java.net/jdk8/docs/api/java/time/format/DateTimeFormatter.html 十、Annotation 注解 在Java 8中支持多重注解了,先看个例子来理解一下是什么意思。 首先定义一个包装类Hints注解用来放置一组具体的Hint注解: @interface Hints { Hint[] value(); } @Repeatable(Hints.class) @interface Hint { String value(); } Java 8允许我们把同一个类型的注解使用多次,只需要给该注解标注一下@Repeatable即可。 例 1: 使用包装类当容器来存多个注解(老方法) @Hints({@Hint("hint1"), @Hint("hint2")}) class Person {} 例 2:使用多重注解(新方法) @Hint("hint1") @Hint("hint2") class Person {} 第二个例子里java编译器会隐性的帮你定义好@Hints注解,了解这一点有助于你用反射来获取这些信息: Hint hint = Person.class.getAnnotation(Hint.class); System.out.println(hint); // null Hints hints1 = Person.class.getAnnotation(Hints.class); System.out.println(hints1.value().length); // 2 Hint[] hints2 = Person.class.getAnnotationsByType(Hint.class); System.out.println(hints2.length); // 2 即便我们没有在Person类上定义@Hints注解,我们还是可以通过 getAnnotation(Hints.class) 来获取 @Hints注解,更加方便的方法是使用 getAnnotationsByType 可以直接获取到所有的@Hint注解。 另外Java 8的注解还增加到两种新的target上了: @Target({ElementType.TYPE_PARAMETER, ElementType.TYPE_USE}) @interface MyAnnotation {}

日你dady哟 2019-12-02 03:08:13 0 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 阿里云双十一主会场 阿里云双十一新人会场 1024程序员加油包 阿里云双十一拼团会场 场景化解决方案 阿里云双十一直播大厅