Html5

HTML<meta> 标签 <video> 标签 自定义列表<dl> （description list） <dt>名词1</dt> (description term) <dd>名词1解释1</dd> (description description) <dd>名词1解释2</dd> <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> </dl> HTML5新个性(不反对 ie8 及 ie8 以下版本的浏览器) 语义标签增强型表单视频和音频Canvas绘图SVG绘图天文定位拖放APIWebWorkerWebStorageWebSocket锚点跳转以后页面a.html: <a href="b.html#aaa">跳转到b页面aaa处</a> 另一页面b.html: <a name="aaa" id="aaa">aaa</a> CSS选择器品种相邻选择器（h1 + p）、子选择器（ul > li）、后辈选择器（li a） 选择器优先级!important > 内联 > id选择器 ( #id{}) > class类选择器 (.class{}) = 属性选择器(a[href="xxx"]{}) = 伪类选择器 (:xxx{}) > 伪元素选择器(::before{}) = 标签选择器(span{}) > 通配符选择器（*{}） > 继承父元素 > 浏览器默认 款式继承可继承的款式： font-size font-family color, UL LI DL DD DT;不可继承的款式： width height 、margin border padding ; ...

文章次要介绍了html5挪动端自适应布局的实现，文中通过示例代码介绍的十分具体，须要的敌人们上面随着小编来一起学习学习吧。 场景：为适应各种大小的屏幕 自适应布局我晓得的两种形式 1.应用媒体查问，上面制订了几种适应形式，例如第一个示意屏幕宽度在320px-360px之间的，html字体大小适配为13.65px <style> @media only screen and (max-width: 360px) and (min-width: 320px){ html{ font-size:13.65px; } } @media only screen and (max-width: 375px) and (min-width: 360px){ html{ font-size:23.4375px; } } @media only screen and (max-width: 390px) and (min-width: 375px){ html{ font-size:23.4375px; } } @media only screen and (max-width: 414px) and (min-width: 390px){ html{ font-size:17.64px; } } @media only screen and (max-width: 640px) and (min-width: 414px){ html{ font-size:17.664px; } } @media screen and (min-width: 640px){ html{ font-size:27.31px; } } </style>2.响应式，获取到屏幕的宽度，计算出肯定的比例大小，应用rem代替px，在应用的时候如 font-size：1rem，在不同屏幕大小的手机上展现的大小成果是不一样的，和手机屏幕的大小比例自适应。 ...

简介： 操作领导：通过 jsAPI 实现导航栏的动静批改。 很多开发同学在接入 H5 容器后都会对容器的导航栏进行深度定制，除了 Native 的定制化之外，还有很多场景是应用到 jsAPI 的形式，通过 jsAPI 实现导航栏的动静批改。 本文旨在通过理论场景的形容，通过 jsAPI 的形式，介绍 jsAPI 下怎么动静批改导航栏，供各位 mPaaS Coder 参考应用。 延长浏览：技术干货 ｜ Native 页面下如何实现导航栏的定制化开发？ 内置 jsAPI 批改导航栏1.批改导航栏题目批改导航栏题目API：setTitle AlipayJSBridge.call('setTitle', { title: 'H5设置题目', });AlipayJSBridge.call('setTitle', { subtitle: '副标题',});AlipayJSBridge.call('setTitle', { title: '题目', subtitle: '副标题',});2.批改导航右按钮setOptionMenu 此 API 有 reset、title、icontype、icon 这 4 个属性有一个即可，属性的优先级：reset > title > icontype > icon。 AlipayJSBridge.call('setOptionMenu', { title : '按钮', redDot : '5', // -1 示意不显示，0 示意显示红点，1-99 示意在红点上显示的数字 color : '#9951ffee', //字体色彩，必须以＃开始 ARGB 色彩值});AlipayJSBridge.call('showOptionMenu');//强制刷新显示AlipayJSBridge.call('setOptionMenu', { icon : 'https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png', redDot : '6', // -1 示意不显示，0 示意显示红点，1-99 示意在红点上显示的数字});AlipayJSBridge.call('showOptionMenu');//强制刷新显示AlipayJSBridge.call('setOptionMenu',{ // 显示时的程序为从右至左 menus: [{ icontype: 'scan', },{ icontype: 'add', }], override: true // 在须要设置多个 option 的状况下，是否保留默认的 optionMenu});AlipayJSBridge.call('showOptionMenu');//强制刷新显示AlipayJSBridge.call('hideOptionMenu');//暗藏右侧按钮3.批改导航栏背景色批改设置导航栏背景色 setTitleColor API，参数 color、reset、resetTransparent。优先级 reset > color > resetTransparent。 ...

引言t-io和netty的差别，这是个被大量问及的问题，在此，作为t-io作者，列一些差异化的货色t-io的最大劣势API设计易懂，尽量避免引入借鉴概念——最大限度升高学习老本接管了大量业务资源的绑定与主动解绑，开发人员只须要无脑地调用API即可实现绑定与解绑性能，这个解决如果丢给业务开发人员是极其简单易错的： 多线程环境下的汇合治理都是要同步平安的，同步的设计既要平安又要高效一是容易遗记开释资源从而导致OOM，二是容易遗记加锁或是加了死锁从而导 致零碎假死其它同类框架为何以各种理由回避实现这些性能？ 和业务挂钩的都不好形象 会耗费框架性能 简单易错内置了丰盛的易用的API，开发人员一个办法就能搞定很多业务事件提供了生产级别的showcase示范工程 有教训的开发人员稍事批改即可用在生产环境没教训的开发人员能够当作入门的示范代码文档集中在官网，用户不须要到处学习无用的、谬误的文档——进一步升高学习老本和试错老本netty的最大劣势大量私有协定的实现大量基于netty的高层框架其它比照netty有大量私有协定的实现，t-io官网目前提供的仅有http和websocketnetty用到了零拷贝，这一点t-io在平衡再三之后，放弃了零拷贝，起因如下: 零拷贝只是改善性能的伎俩（或叫算法），对用户而言，框架采纳什么算法并不重要，重要的是最终的目标是否达成——netty用零拷贝来改善性能，t-io借鉴同步平安线程池来改善性能，都是伎俩，必由之路。 零拷贝在缩小拷贝过程的同时，也耗费了计算机其它资源堆外资源的治理势必减少t-io代码的复杂度，使t-io用户难以在源代码层驾驭t-io局部同类框架引入堆外资源管理后，在某些场景确实是晋升了性能，但这个过程也减少了很多重大BUGt-io的性能曾经足够好，把精力花在服务业务上，而不是性能PK场上t-io借鉴了同步线程池，正是有了这个，t-io外部调度线程时就显得尤为简略，与netty的零拷贝一样，这也是改善性能与简化编程的伎俩，而不是最终目标。t-io内置了业务数据管理能力，这是个十分重要的能力，网络编程数据绑定和开释是件极其考验开发人员程度的性能，哪怕是经验丰富的资深开发工程师也极容易死锁和OOM，甚至因而导致整个我的项目的失败。 举例一：你做im，你要做群组与群员关系映射吧？在t-io中，您只须要Tio.bindGroup()即可实现tcp连贯和这个群组关系的绑定举例二：点对点音讯，你要针对用户id发消息吧？在t-io中，您只须要Tio.bindUser()即可实现tcp连贯和user的关系绑定通过Tio.bindXxx()绑定的业务资源，不必放心TCP连贯断开后资源开释不掉，t-io领有严格的算法保障这些资源失去疾速有序地开释（不得不揭示：开释资源波及到多线程操作，极易出错）！netty有大量书籍可供查阅；t-io提供了领有即战力的showcase工程（ 付费文档用户可下载最新版 ），用户并不需要太多工夫即可实现可用于生产我的项目的网络编程脚手架t-io和netty的编程模型和API差别极大 t-io的API设计更多的是让工程师用起来难受，所以特意减少了一个Tio.java，专门搁置罕用的API，这样用户找起来就十分不便，不必满大街找办法调用netty的局部API是把设计模式裸露进去了，让内行人一看就晓得这是个什么设计模式做的在性能测试上的差别 在TFB平台上，netty的性能远超t-io，当然t-io的性能排名仍然非常靠前，排在t-io前面的大有人在（t-io当初的性能比刚进去时的t-io差了很多，因为业务数据管理能力、阻塞发送能力、同步发送能力、流量监控与回调，是比拟耗费性能的），请参考：TFB性能PK平台带上业务进行PK时，t-io性能常常优于netty，这其中的起因大略就是：用netty须要本人写代码实现业务数据的治理、流量监控等工作，而这些工作拖了裸netty的后腿，而这些工作曾经被t-io内置了，所以给t-io带来的性能损耗就很无限，请参考 netty和t-io比照测试后果t-io提供了极其便捷的阻塞发送、同步发送，这些能力在netty中貌似没有，须要用户写较多的代码能力实现 阻塞发送：音讯发送到对方后，才往下执行代码同步发送：对方收到音讯，并回了同样的synSeq音讯，才往下执行代码易学水平：从市场反馈来看，t-io设计的概念仿佛更容易被工程师们所了解与承受，2014年老板想让我用netty，所以简略地看过《netty权威指南》，这本书是我放弃netty的最初一根稻草，真的看不太懂，提供的示例我很难将其用在生产我的项目中（实在感触，当然兴许是我太菜，我另一个十分优良且年老的共事也看过这本书，同样示意云里雾里）不少用户在抉择时，感觉t-io文档没有netty多，转而投netty，实际上，一个好框架，并不需要太多的文档，t-io在刚进去时，只有几个showcase工程，第一批t-io用户用这些showcase就实现了本人的我的项目，并且口碑迅速散开。当初t-io官网曾经提供了绝对残缺的文档，再配上含金量十足的showcase工程，应用t-io曾经很容易了如果已经应用过netty或mina，再来应用t-io，兴许你会感觉到前所未有的爽！具体请参考： https://www.tiocloud.com/doc/...

1. 问题阐明云听我的项目分享包h5页面复用于开化h5我的项目，分享进来在微信外面，显示的题目、内容、图片不对。2. 解决思路（1）查看页面里是否有微信分享逻辑书写：通过network看到有share.js文件的加载，js文件内容为微信分享办法封装，确认前端分享逻辑书写（2）查看公众号是否认证、域名是否备案（3）分享的网址的域名是否绑定到微信公众平台上，公众号设置---性能设置---JS接口平安域名（4）后端服务端 利用公众号AppId、AppSecret从微信服务器获取对应的access_token再从微信公众平台获取appId、timestamp、noncestr、signature这几个参数，返回前端（5）显示的题目、内容、图片仍有问题，关上wx.config中debug, 依据微信提醒“invalid url”，和开化后h5代码排查出，分享进去的地址和加签地址不统一

明天的知识点 (2021.10.01) —— 第899天 (我也要出题)[html] 应用html5写一个刮刮乐奖券的布局[css] 应用css3画一个皮卡丘[js] 应用js写一个鼠标框选的成果[软技能] 直播与点播有什么不同？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！ 欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！ 心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

一张图形容t-io生态构造 tio-utilstio-utils是笔者在我的项目开发中积攒的局部工具类外面有少部分代码是在开源许可范畴内摘自第三方开源我的项目代码的，还有局部代码是其它开源作者提供的，譬如hutool的作者路神就提供了许多类，这么做，仅仅是因为宽广用户强力要求tio缩小第三方依赖当然笔者更违心使第三方工具类，譬如hutool在tio-utils中目前t-io用得最多的Cache首先这个Cache是个门面——把市面上的各路Cache对立成了ICache，操作方法对立了，其次它内置了一级cache，两级cache，并且性能极好、操作省心、稳定性也在大量我的项目中失去了考验其实就是想挑战J2cache，不过tio-utils也把J2cache门面化了tio-core大家口中的t-io或tio指的就是tio-coretio-core是依赖tio-utils的tio-core是基于java aio的网络编程框架（很多人说t-io是基于netty，大家不要听信这样不负责任的舆论）如果你晓得netty是啥，那了解tio-core就很容易了，因为tio-core是和netty相似的框架对于社区的问答问：市面上曾经有netty这样优良的框架，为何还要本人写一个tio-core？答：每个人心中有杆秤，你认为优良的，不代表所有人都这样认为问：和netty比，tio-core有何劣势和劣势？答：很难答复这个问题，说几个事实：-在t-io没提供任何文档的状况下，许多用户仅依附笔者提供的示范工程就把握了tio，并用于生产我的项目中，这表明t-io极其容易上手-tio-mvc是基于tio-http-server的mvc框架，它在TFB上的性能排名不差（揭示各位：TFB上局部排在tio-mvc后面的框架，并不具备用于生产我的项目的能力，而只是DEMO级别的，譬如协定容错、协定防攻打、session反对、散布session反对，流控这些都没有，重要的是一般开发工程师难以动手）-tio-mvc在TFB上的PK排名表明t-io性能很好-理解t-io的历史，t-io是从火线走进去的作品，而且久经考验！-性能达到肯定高度的前提下，再比照性能，其曾经意义不大，稳定性、易用性、坑多否才是前面次要的竞技场！tio-http-common一个给tio-http-server和tio-http-client共用的工程，大家能够略过tio-http-server基于tio-core（为啥不说是基于tio-http-common？怎么说都能够）实现的http服务器内置了极易应用的MVC框架内置了流控、拉黑、forward、拦截器等罕用能力性能优良，后面曾经有中央形容了它在TFB上的性能体现，在TFB上tio-mvc的性能远超应用人群最多的springmvc，当然这不是说springmvc不优良，而是说性能到这份上了，再说性能没啥意义！tio-websocket-common一个给tio-websocket-server和tio-websocket-client共用的工程，大家能够略过tio-websocket-server基于tio-core（为啥不说是基于tio-websocket-common？怎么说都能够）实现的websocket服务器请留神：tio-http-server和tio-websocket-server是离开的，不能在同一端口用tio-http-server和tio-websocket-server，这么样的起因很简略：为了晋升性能。-“为什么其它框架是放在一起的？”-“websocket协定是起初硬扯在http协定之上的，从设计上来讲：这俩基本就不应该呆在一起，搞得笔者在实现websocket协定时，还得用http协定来实现握手”tio-webpack-core笔者在tio-http-server的根底之上依赖freemarker实现的相似nodejs webpack的性能，当初还没齐全封装到位，就笔者一人在用当初正在浏览的网页就是基于tio-webpack-core的，用右键点击查看源代码，全压缩或加密的具体请参考：https://www.tiocloud.com/doc/...

在城市级可视化我的项目中，个别须要可视化的三维地图作为承载各种利用的载体，但大家在应用三维地图的过程中常常碰到3道难题：1、资源获取不便2、操作应用简单3、模型成果不现实。为了升高三维地图的获取和应用难度，以及晋升地图成果调整的便利性，须要建设一个服务城市级可视化利用的三维地图服务平台，可能便捷地获取和应用心仪的三维地图。一键城市2.0（ThingMap）是ThingJS平台推出的在线3D城市模型场景疾速生成零碎，所生成的3D城市模型场景，可用于疾速构建网页版3D城市类型的治理利用。无论是在大屏监控利用，还是PC端治理利用场合，都可满足利用需要。反对海量根底三维空间数据在不同尺度下的疾速加载、渲染、显示，为智慧城市相干利用和企业提供便捷的三维地图沙盘服务。性能简介一、全国地图场景疾速浏览初步构建覆盖全国的地图场景，已覆盖全国一百多个城市、上千区县，后续将陆续更新和修改地图场景，在城市数量、3D模型品质、展现成果、展现性能都有大幅晋升。反对通过鼠标左键平移，右键旋转，滚轮缩放的形式进行地图的浏览交互。在地图缩放的时候，地图因素依据地图层级显隐。地图最大放大层级是18级。二、管制地图因素图层通过图层管制模块可对图层进行显隐交互操作，自在设置修建。路线、水系、绿地图层显隐，并可对图层透明度进行调整。三、地图成果切换及自定义模板上传提供官网成果以及自定义成果上传性能，不便疾速地展现不同格调的地图，可自在切换不同格调的城市成果模板，展现成果大幅晋升。四、两种坐标系切换反对地图在WGS84和GCJ02两种坐标系上的自在切换。五、行政区划和自定义绘制选取范畴依照省份或城市查找行政区划，同时反对依照关键字查找省份或城市，定位并获取3D城市模型。可能依照矩形、多边形、圆形进行自定义范畴绘制。范畴抉择后，零碎会主动定位至以后行政区划范畴并获取3D城市模型。六、在线调用地图服务通过地图服务的在线调用代码，实现在线调用，应用更加不便便捷。能够不便地将相干区域3D城市场景导出到ThingJS CityBuilderPro编辑器进一步批改成果，也可联合ThingJS平台API开发残缺3D城市利用管理系统。七、在线分享地图反对将地图以链接模式一键分享给其他人。并且能够在浏览器中关上该链接，间接观看地图。八、便当的地图资源一键下载性能地图场景、成果的一键下载性能，不便疾速获取地图包，可进行地图资源的离线部署。配合ThingJS平台提供的我的项目离线部署性能，一键城市2.0所生成的3D城市模型场景也可齐全独立部署到指定的局域网服务器环境中，在齐全断绝外网状况下失常运行。九、反对搜寻定位提供关键字搜寻定位和经纬度搜寻定位两种形式，并疾速定位到搜寻后果。ThingMap地图服务领域专一于城市级可视化利用，是ThingJS生态一环，其提供的地图服务成绩完全符合ThingJS规范，能够间接用于ThingJS后续的可视化利用开发。ThingJS领有精模、地图成果、3D配饰等各种丰盛的成果资源库和各种成果的生产能力，能够为ThingMap提供突出的可视化能力，晋升三维地图可视化成果，使ThingMap相比其余地图服务更能满足城市级可视化利用的需要。

北京市气象台又公布暴雨蓝色预警信号了，非凡天气、顶峰时段坐地铁，那就……晓得复仇者联盟里的灭霸吧?打一个响指一半人就隐没了,如果灭霸去坐地铁,能够这么说,一个响指过后...他必定还是没座。据说之前有人挤地铁的时候带着一盆仙人球，后果下地铁秒变仙人掌，也不晓得这位带仙人球的敌人手痛不痛，我感觉可能四周的人挺痛的……你们坐地铁都遇到些什么奇葩经验呀？在现在疫情仍旧缓和的局势下，当好多事件开始倒退为网络上解决后，可视化的路线也更加清朗，查看地理位置，近程管制仓库，近程视频管制，温湿度自动控制。这种在以往经常是去现场监控的事件，当初齐全能够由可视化来进行操作，可视化将温湿度、人流量、以及3D模型与事实联合，并通过一系列采集器采集各种监控数据、温湿度数据，将采集到的数据通过数据总线或者传感器传递到数据网关中，再由网关传递到云平台进行解决，最终展示在用户的数据大屏或者手机或者电脑下面，通过这样一系列操作，近程的数据以及实景则会被解决成一个可监测可管制的三维可视化利用。本零碎采纳ThingJS来结构地铁站的 3D 可视化场景，从侧面展现了一个地铁站的事实场景，包含地铁的实时运行状况，地铁上下行状况，视频监控，烟雾报警，电梯运行状况等等，帮忙直观的理解以后的地铁站。提供了三种交互模式：第一人称模式：操作就相似行人前进的成果，能够通过键盘鼠标管制后退后退。主动巡检模式：该模式下不须要任何操作，场景主动后退后退来巡逻以后地铁站的场景。鼠标操作模式：左键旋转场景，右键平移场景。成果预览监控设施交互当咱们点击场景中的监控设施时能够查看以后设施的运行状况，运行数据等信息。当点击场景中的摄像头之后右侧顶部会显示出以后摄像头的监控画面。通过视频、三维可视化等动静监督各业务主流程，实时获取各业务运行状况，对异常情况进行告警和联动。烟雾报警监控烟雾报警会依据后盾实时传递过去的状态值来变换以后烟雾报警模型的色彩，红色为报警状态。电视列车到站工夫监控日常地铁站中会有专门的电视来展现下一班地铁到站的时间表，该零碎中也模仿该成果，不过该零碎临时做了电视的模型。客流实时监察治理将进站闸机数据、视频监控数据对接到可视化平台中，通过获取的数据，零碎可针对人流拥挤中央实现及时告警，联动视频监控进行实时人流查看，领导舒缓人流。物联网将通过各种信息传感设施，实时采集任何须要监控、连贯、互动的物体或过程等各种须要的信息，通过与ThingJS的结合能更好的展现出可视化的劣势。地铁可视化我的项目，交融车辆运行、客户服务、应急指挥、能源监控、设施设施监控等多业余数据，为应急指挥、客流疏导等提供必要的数据撑持，进一步晋升地铁服务质量、升高平安危险和影响，让地铁里的所有尽在把握。

随着5G遍及和新基建政策，构建智慧园区成为当下城市治理的热门需要，智慧园区建设的外围是3D可视化平台，利用它能够进步企业园区智能化、智慧化治理服务水平。为了适应智慧园区建设需要，通过ThingJS打造了一款三维可视化数字能源零碎。通过数字孪生技术，联合三维可视化出现能力，辅助园区欠缺能源管理体系，优化能管模式和机制，全面晋升园区用能效率和供能服务水平。整合园区各个关键环节的资源，集成了能源、告警、监控等管控场景界面，使各零碎之间互联、共享、智慧，实现了多信息协同联动，为园区平安治理、能源全面掌控提供了无力保障。首先说下，传统园区运维形式的以下问题：1、管控不协同企业的能源零碎建设和治理不足协调，设施冗余，不足业余的治理，余能无奈充分利用，对能源的管控和利用率较低。2、资产不可视设施资产以及管线等荫蔽工程以传统信息化零碎模式治理，不直观且不易保护和革新。3、告警不集中传统能源平台的监控零碎泛滥，界面扁平、层级多，同时报警监控信息不直观，跨专业定位和剖析难度高。 三维可视化数字能源零碎劣势数字孪生赋能智慧园区基于数字孪生，进行智慧园区的建设，将园区内的各种治理对象，例如环境、人、物和设施等，进行数字化建模，集成园区各业务零碎，实现各类数据的交融共享，实现对事实世界的全域感知和镜像再现。在数字孪生世界中构建万物可视的园区智能利用，实现全面监控、有序治理和智能操控。赋能智慧园区可视、可管、可控。设施可视化基于三维虚拟空间的仿真技术，采纳3D仿真技术，可直观展现综合能源园区里楼宇、供电设施、供电管路，供水管路、暖通管路等的地位散布，通过对立的利用集成能力，交融各业务零碎数据，向下层利用提供直观、便当、全局的根底撑持能力。告警监控可视化搭建一体化监控平台，汇总不同能耗类型、不同能耗设施、不同能耗事件的监测信息，把多种监控数据融为一体，实现对立治理。并与事件的告警信息联动，将扩散的数据进行集中、标准化解决后，对外提供对立告警，辅助运维管理人员更迅速的响应和解决问题，实现数据的价值最大化。能源服务可视化通过部署企业用能设施采集（管制）终端，借助大数据分析、机器学习和算法引擎等技术，提供面向各类场景的智能剖析和组件式治理服务。实现工业企业及园区内能源零碎的设施状态全息感知、施行能源监测、用能剖析、负荷预测，晋升企业及园区的供电效率，促成终端负荷与电网性能能力协同均衡。在园区防疫场景上，数字化伎俩也能够帮忙园区做好体温异样出入人员的及时发现、及时监测，一旦确诊能精准做好密切接触者的分级追溯，在当下疫情重复的阶段，为园区出入人员的身体健康提供全面的爱护。

中国人领有了齐全自主的高性能网络编程框架t-io。通过十多年对底层技术的潜心研究，终于打磨出中国人本人的齐全自主的开源网络编程软件t-io。1、什么是t-iot-io是基于java开发的一个开源的网络编程架构，大家都晓得当初手机上或者电脑上都装了很多APP，这些APP都不是一个个在手机上或电脑上孤立的应用，而是能拜访其余的中央数据或者与其余节点进行实时聊天，故每个APP中都要有一个对外进行通信的模块，这块内容从编程的角度来看就能通过网络编程框架来实现，t-io就是实现这块的内容的最好的编程软件。软件开发人员要开发一个新的利用，对于软件中的通信模块如果应用tio就不要专门开发新的通信模块，这样节俭了开发工夫，能够专一于打磨软件中的其余内容，而且即便本人开发相似的对外通信的网络架构，也不肯定能达到应用t-io的通信成果，咱们晓得一个好的风行的APP可能同时拜访的人十分多，几十万、几百万、甚至几千万上亿同时拜访，这样对于网络架构的设计就十分要害，如果设计不好就可能满足不了这样大的用户同时拜访APP，如果呈现这么大的访问量，可能导致死机，通信中断，通信太慢等等状况。t-io通过创始人谭学生的精心打磨，性能超强，曾经达到经营的的级别，用t-io写的程序每秒能解决1000+万条音讯，1.9G内存可能撑持30万TCP长连贯。每秒解决1051万条音讯:1.9G内存撑持30万TCP长连贯:测试现场一：https://www.tiocloud.com/41测试现场二：https://www.tiocloud.com/61基于tio开发的即时通讯软件谭聊，目前是业界性能最强的全开源销售即时通讯软件。https://www.tiocloud.com/2/pr...2、APP中的数据在网络中的传输理解网络中的数据传输，能更好的了解t-io在软件中的作用，APP中的利用数据要在网络中传输，也必须要严格遵守OSI或者TCP/IP协定依照封装的要求进行分片打包，能力在IP网络中传输，所以先理解一下OSI和TCP/IP的相干数据包的封装和解封装过程。 OSI和TCP/IP的分层协定栈对应关系 OSI和TCP/IP协定栈每层对应的协定和利用 Socket位于TCP/IP协定栈中的地位Socket是应用层与TCP/IP协定族通信的两头软件形象层，它是一组接口。在设计模式中，Socket其实就是一个门面模式，它把简单的TCP/IP协定族暗藏在Socket接口前面，对用户来说，一组简略的接口就是全副，让Socket去组织数据，以合乎指定的协定。从以上图示能够晓得tio实现的性能属于传输层和应用层之间的封装，以及和链接的建设。上面阐明tio在软件中的具体应用过程：APP要实现设计的各项性能，必须在客户端和服务端之间先建设有连贯或者无连贯交互通信链路，而后再在这条链路上传输数据，t-io就能实现这个链路的建设。 APP利用交互节点部署 APP通信具体实现逻辑图物理层，指的是电信号的传递形式，通明的传输比特流。 链路层，在两个相邻结点间的线路上无差错地传送以帧为单位的数据。网络层，负责为分组替换网上的不同主机提供通信，数据传送的单位是分组或包。传输层，负责主机中两个过程之间的通信，数据传输的单位是报文段。网络层负责点到点（point-to-point）的传输（这里的“点”指主机或路由器），而传输层负责端到端（end-to-end）的传输（这里的“端”指源主机和目标主机）。数据传输到对方，必须先依照TCP/IP协定进行封装，封装成一个规范的链路层包后，而后通过物理层传输到对方后，对方再进行解封装，取出应用层数据。从以上解说的APP的通信过程中晓得，如果各种利用在开发过程中调用t-io则，不必开发相干的网络通信方面的模块，更多的工夫和精力专一于具体利用性能的开发，这样省时、省力，减速利用的上市。3、t-io的外围模块t-io蕴含框架实现的外围模块tio-core，还有tio-websocket-server、tio-http-server、tio-udp-server、tio-webpack-core、tio-flash-policy-server等，前面所列都是基于tio-core开发的应用层组件。tio-core：基于java aio开发的网络编程框架。应用示例：tio-study。tio-websocket-server：基于tio-core开发的websocket服务器。应用示例：tio-websocket-showcase。tio-http-server：基于tio-core开发的http服务器。应用示例：tio-http-server-showcase。tio-udp-server：基于tio-core开发的udp服务器。应用示例：tio-udp-showcase。tio-websocket-client：基于tio-core开发的websocket客户端。tio-webpack-core：基于tio-core开发的js/css/ht ml编译压缩工具。4、t-io性能介绍TCP Server&Client：1）编解码解决：源文件为AioHandler.java2）启动：源文件为TioServer.java/TioClient.java3）各种事件处理：源文件为AioListener.java4）TCP连贯上下文：源文件为ChannelContext.java5）实用办法：源文件为Tio.java6）全局配置：源文件为TioConfig.javaHTTP Server：残缺的实现了HTTP 1.1，t-io外部也大量应用了tio-http，POM引入Websocket Server：残缺的实现了Websocket协定，t-io外部也在大量应用tio-websocket，POM引入UDP Server&Client：UDP是一个非连贯的协定，传输数据之前源端和终端不建设连贯， 当它想传送时就简略地去抓取来自应用程序的数据，并尽可能快地把它扔到网络上。 在发送端，UDP传送数据的速度仅仅是受应用程序生成数据的速度、 计算机的能力和传输带宽的限度；在接收端，UDP把每个音讯段放在队列中，应用程序每次从队列中读一个音讯段。tio-udp是蕴含在tio-core的一个性能子集，具体实现请学习：把工程以maven的模式导入到eclipse后运行org.tio.showcase.udp.server.ShowcaseUdpServerStarter启动udp服务器，启动胜利后，日志如下运行org.tio.showcase.udp.client.UdpClientStarter察看服务器端的console，会看到如下日志流量监控和统计：目前惟一一个内置残缺流量监控和统计的网络框架同步音讯：指A给B发送一条音讯后，A在原线程中期待B给出一条对应的响应音讯，用其它网络框架实现这样的性能，须要开发人员精通多线程合作，极易产生死锁，而t-io曾经内置了发送同步音讯的能力，应用也非常简单。心跳查看：t-io内置了检测心跳超时的工作，当发现某连贯在指定工夫内没有产生任何数据收发，则断开该连贯。心跳发送：t-io内置了发送心跳音讯的工作，用于判断连贯状态。集群性能：企业版t-io（集群版）内置了集群能力，用户只须要在启动的时候加几行配置代码，便能轻松领有集群能力，这时可同时撑持1亿+长连贯。集群服务器路由：集群架构中，各台服务器之间有残缺的路由信息实现服务器之间的业务交互。集群架构中的音讯路由：集群业务中有各种路由来领导业务音讯发送相干的业务节点。协定适配：t-io内置了协定适配能力，让一套业务代码可同时反对多个协定，这样能防止反复开发，反复测试，反复BUG。并发数据结构：t-io借鉴了大量数据结构，将并发编程难度降到最低，次要蕴含：ObjWithLock，ListWithLock，CollectionWithLock，SetWithLock，MapCollectionWithLock，MapListWithLock，MapSetWithLock，MapWithLock半包粘包：框架层曾经做好半包和粘包的工作，业务层不须要思考在传输过程中的数据包的构造，只须要按着业务协定解码即可。主动重连：用t-io作为TCP客户端时，内置了主动重连性能，用户只须要在启动时，配置ReconnConf 对象即可，如果业务本人实现主动重连，至多要节约高级工程师5-10个工作日来实现该性能。SSL性能：SSL(Secure Sockets Layer 安全套接字协定)协定位于TCP/IP协定与各种应用层协定之间，为数据通讯提供平安反对，而t-io内置反对SSL，只须要一行代码：serverTioConfig.useSsl("/cert/xxx.jks", "/cert/xxx.jks", "password");IP拉黑：拉黑某个IP的时候，t-io会主动把该IP下的连贯全副断开，并且不再承受来自该IP的连贯，直到业务把该IP从黑名单中解除。联合t-io的监控数据，能够很不便地实现主动拉黑能力。锁工具：为了更便捷地利用读写锁，t-io提供了一个被用户称为“炉火纯青”的锁工具类，将锁应用的出错率降至最低，锁用不好，对我的项目就是劫难，如果业务我的项目中大量应用这些t-io提供的锁工具，既高效又不易出错。缓存工具：t-io在第三方业余缓存的根底上，封装了两级缓存，同时提供了一个缓存工具类，用一套编程接口便可在多种缓存间自在切换，t-io外部大量应用了这些缓存工具，将性能施展到极致。群组治理：将多个TCP连贯关联到一个或者多个群组（多对多），这样就能很容易实现下层业务的群组治理性能，能够实现一对一或者一对多的群业务。用户治理：将一个TCP连贯关联到一个用户（一对多）Token治理：将一个TCP连贯关联到一个Token（一对多）业务ID治理：将一个TCP连贯关联到一个业务ID（一对一）IP治理：一个TCP连贯对应一个客户端IP（一对多）ID治理：一个TCP连贯主动产生一个惟一ID（一对一）5、t-io应用案例激进估算，正在应用t-io的企业有10000+，并且还在一直减少中，以下仅展现局部应用过t-io或购买过t-io受权的公司。更多案例，请参考：https://www.tiocloud.com/2/ca...

H5API**HTML5新个性 标签:nav article footer header aside..... 表单新个性:input type取值date time week email number 表单属性 form formaction(提交地址) frommethod(提交形式) required readonly disabled 表单控件标签:progress meter datalist 1.H5API (HTML5中的js局部)在HTML5问世之前，要在网络上展现视频，音频，动画，除了应用第三方自主开发的播放器之外，应用得最多的工具就是Flash,然而须要在浏览器上装置各种插件，并且有时速度很慢。HTML5新增了两个与媒体相干的标签，让开发人员不用依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是 <audio> <video> 媒体(音频视频) 画布 拖拽 本地存储 sessionStorage webSocket 1.1自定义数据属性data-id 是一类被称为自定义数据属性的属性，它赋予咱们在所有HTML元素上嵌入自定义数据属性的能力和能够通过HTML和DOM进行专有数据的替换。所有的属性都能够通过HTMLElement.prototype.dataset来拜访.自定义属性都能够保留到dataset中。获取属性 document.getAttribute $(dom).attr() dom.dataset<script> window.onload=function(){ var div=document.querySelector('#one'); console.log(div.dataset) console.log(div.dataset.id) console.log(div.dataset.item) }</script> <div id="one" flag='two' data-id='1001' data-item='test'></div>1.2媒体元素1.video 在video标签呈现之前，如果想在网页中播放视频或者音频数据是十分艰难的。H5中的video标签能够向应用img显示图片一样简略去播放视频。 video提供了很多属性和办法，咱们能够通过间接设定或者通过js管制视频的显示 读写属性 src autoplay poster loop constrols width height 宽高个别不一起应用 constrols是管制条 loop是循环播放 autoplay是自动播放poster='' 封面 放封面地址 muted静音 ...

绘制如下图所示一个动静时钟 <body><canvas width="600px" height="600px" style="background-color: #ccc; display:block; margin: 0 auto"></canvas></body><script> window.onload = function(){ //获取canvas对象 var canvas = document.querySelector("canvas"); //获取上下文 var context = canvas.getContext("2d"); //封装一个函数，用来时钟的动静 function clock(){ //绘制圆盘 context.beginPath();//开始 context.arc(300,300,200,0,2*Math.PI); context.fillStyle = "pink";//圆盘的色彩 context.fill();//绘制圆盘 context.closePath();//完结 //绘制时刻度 for(var i=0; i<12; i++){ context.save();//保留 context.lineWidth = 4;//时针的宽度 context.beginPath(); context.translate(300,300);//将原点平移到圆心 context.rotate(i*(Math.PI*6));//360/12=30° 180°/30°=6 context.moveTo(0,-180); context.lineTo(0,-200); context.stroke();//绘制线条 context.fillStyle = "black";//线条的色彩 //绘制时钟数字 context.font = "28px bold";//字体大小为28px，加粗 context.rotate(Math.PI/6);//将字体旋转30° context.fillText(i+1,-7,-220);//数字回转-7，并且在圆外显示 context.closePath(); context.restore(); context.restore();//回滚 } //绘制分刻度 for(i=0; i<60; i++){ context.save(); context.translate(300,300);//平移到原点 context.rotate(i*(Math.PI/30)); context.beginPath(); context.moveTo(0,-190); context.lineTo(0,-200); context.stroke(); context.closePath(); context.restore(); } //获取以后工夫 var today = new Date(); //获取以后小时 var hour = today.getHours(); //获取分 var min = today.getMinutes(); //获取秒 var sec = today.getSeconds(); hour = hour+min/60; //绘制时针 context.save(); context.lineWidth = 3; context.translate(300,300); context.rotate(hour*(Math.PI/6)); context.beginPath(); context.moveTo(0,10); context.lineTo(0,-80); context.stroke(); context.closePath(); context.restore(); //绘制分针 context.save(); context.lineWidth = 2; context.translate(300,300); context.rotate(min*(Math.PI/30)); context.beginPath(); context.moveTo(0,10); context.lineTo(0,-100); context.stroke(); context.closePath(); context.restore(); //绘制秒针 context.save(); context.lineWidth=1; context.rotate(sec*(Math.PI/30)); context.strokeStyle = "red"; context.beginPath(); context.moveTo(0,10); context.lineTo(0,-120); context.stroke(); context.closePath(); context.restore(); //交叉处 context.save(); context.translate(300,300); context.beginPath(); context.fillStyle = "#ccc"; context.strokeStyle = "red"; context.arc(0,0,5,0,Math.PI*2); context.fill(); context.stroke(); context.closePath(); context.restore(); setTimeout(clock,1000);//超时模仿 } clock(); }</script>

H5APIHTML5新个性 标签:nav article footer header aside..... 表单新个性:input type取值date time week email number 表单属性 form formaction(提交地址) frommethod(提交形式) required readonly disabled 表单控件标签:progress meter datalist 1.H5API (HTML5中的js局部)在HTML5问世之前，要在网络上展现视频，音频，动画，除了应用第三方自主开发的播放器之外，应用得最多的工具就是Flash,然而须要在浏览器上装置各种插件，并且有时速度很慢。HTML5新增了两个与媒体相干的标签，让开发人员不用依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是 <audio> <video> 媒体(音频视频) 画布 拖拽 本地存储 sessionStorage webSocket 1.1自定义数据属性data-id 是一类被称为自定义数据属性的属性，它赋予咱们在所有HTML元素上嵌入自定义数据属性的能力宁能够通过HTML和DOM进行专有数据的替换。所有的属性都能够通过HTMLElement.prototype.dataset来拜访.自定义属性都能够保留到dataset中。获取属性 document.getAttribute $(dom).attr() dom.dataset<script> window.onload=function(){ var div=document.querySelector('#one'); console.log(div.dataset) console.log(div.dataset.id) console.log(div.dataset.item) }</script> <div id="one" flag='two' data-id='1001' data-item='test'></div>1.2媒体元素1.video 在video标签呈现之前，如果想在网页中播放视频或者音频数据是十分艰难的。H5中的video标签能够向应用img显示图片一样简略去播放视频。 video提供了很多属性和办法，咱们能够通过间接设定或者通过js管制视频的显示 读写属性 src autoplay poster loop constrols width height 宽高个别不一起应用 constrols是管制条 loop是循环播放 autoplay是自动播放poster='' 封面 放封面地址 muted静音 ...

之前常常讲波及递归的算法题，我说过写递归算法的一个技巧就是不要试图跳进递归细节，而是从递归框架上思考，从函数定义去了解递归函数到底该怎么实现。 而且咱们前文 学习数据结构和算法的框架思维 特别强调过，练习递归的框架思维最好形式就是从二叉树相干题目开始刷，前文也有好几篇手把手带你刷二叉树和二叉搜寻树的文章： 手把手带你刷二叉树（第一期）手把手带你刷二叉树（第二期）手把手带你刷二叉树（第三期）手把手带你刷二叉搜寻树（第一期）手把手带你刷二叉搜寻树（第二期）手把手带你刷二叉搜寻树（第三期）之前的文章全部都是使用二叉树的递归框架，帮你透过景象看实质，明确二叉树的各种题目实质都是前中后序遍历衍生进去的。 前文 BFS 算法框架详解 是利用队列迭代地遍历二叉树，不过应用的是层级遍历，没有递归遍历中的前中后序之分。 因为当初面试越来越卷，很多读者在后盾问我如何将前中后序的递归框架改写成迭代模式。 首先我想说，递归改迭代从实用性的角度讲是没什么意义的，明明能够写递归解法，为什么非要改成迭代的形式？ 对于二叉树来说，递归解法是最容易了解的，非要让你改成迭代，顶多是考查你对递归和栈的了解水平，架不住大家问，那就总结一下吧。 我以前见过一些迭代实现二叉树前中后序遍历的代码模板，比拟短小，容易记，但通用性较差。 通用性较差的意思是说，模板只是针对「用迭代的形式返回二叉树前/中/后序的遍历后果」这个问题，函数签名相似这样，返回一个TreeNode列表： List<TreeNode> traverse(TreeNode root);如果给一些略微简单的二叉树问题，比方 最近公共先人，二叉搜寻子树的最大键值和，想把这些递归解法改成迭代，就无能为力了。 而我想要的是一个万能的模板，能够把所有二叉树递归算法都改成迭代。 换句话说，相似二叉树的递归框架： void traverse(TreeNode root) {    if (root == null) return;    /* 前序遍历代码地位 */    traverse(root.left);    /* 中序遍历代码地位 */    traverse(root.right);    /* 后序遍历代码地位 */}迭代框架也应该有前中后序代码的地位： void traverse(TreeNode root) {    while (...) {        if (...) {          /* 前序遍历代码地位 */        }        if (...) {          /* 中序遍历代码地位 */        }        if (...) {          /* 后序遍历代码地位 */        }    }}我如果想把任何一道二叉树递归解法改成迭代，间接把递归解法中前中后序对应地位的代码复制粘贴到迭代框架里，就能够间接运行，失去正确的后果。 实践上，所有递归算法都能够利用栈改成迭代的模式，因为计算机实质上就是借助栈来迭代地执行递归函数的。 所以本文就来利用「栈」模仿函数递归的过程，总结一套二叉树通用迭代遍历框架。 递归框架改为迭代加入过我的二叉树专项训练的读者应该晓得，二叉树的递归框架中，前中后序遍历地位就是几个非凡的工夫点： 前序遍历地位的代码，会在刚遍历到以后节点root，遍历root的左右子树之前执行； 中序遍历地位的代码，会在在遍历完以后节点root的左子树，行将开始遍历root的右子树的时候执行； 后序遍历地位的代码，会在遍历完以以后节点root为根的整棵子树之后执行。 如果从递归代码上来看，上述论断是很容易了解的： void traverse(TreeNode root) {    if (root == null) return;    /* 前序遍历代码地位 */    traverse(root.left);    /* 中序遍历代码地位 */    traverse(root.right);    /* 后序遍历代码地位 */}不过，如果咱们想将递归算法改为迭代算法，就不能从框架上了解算法的逻辑，而要深刻细节，思考计算机是如何进行递归的。 假如计算机运行函数A，就会把A放到调用栈外面，如果A又调用了函数B，则把B压在A下面，如果B又调用了C，那就再把C压到B下面…… 当C执行完结后，C出栈，返回值传给B，B执行完后出栈，返回值传给A，最初等A执行完，返回后果并出栈，此时调用栈为空，整个函数调用链完结。 咱们递归遍历二叉树的函数也是一样的，当函数被调用时，被压入调用栈，当函数完结时，从调用栈中弹出。 那么咱们能够写出上面这段代码模仿递归调用的过程： // 模拟系统的函数调用栈Stack<TreeNode> stk = new Stack<>();void traverse(TreeNode root) {    if (root == null) return;    // 函数开始时压入调用栈    stk.push(root);    traverse(root.left);    traverse(root.right);    // 函数完结时来到调用栈    stk.pop();}如果在前序遍历的地位入栈，后序遍历的地位出栈，stk中的节点变动状况就反映了traverse函数的递归过程（绿色节点就是被压入栈中的节点，灰色节点就是弹出栈的节点）： 简略说就是这样一个流程： 1、拿到一个节点，就一路向左遍历（因为traverse(root.left)排在后面），把路上的节点都压到栈里。 2、往左走到头之后就开始退栈，看看栈顶节点的右指针，非空的话就反复第 1 步。 写成迭代代码就是这样： private Stack<TreeNode> stk = new Stack<>();public List<Integer> traverse(TreeNode root) {    pushLeftBranch(root);    while (!stk.isEmpty()) {        TreeNode p = stk.pop();        pushLeftBranch(p.right);    }}// 左侧树枝一撸到底，都放入栈中private void pushLeftBranch(TreeNode p) {    while (p != null) {        stk.push(p);        p = p.left;    }}上述代码尽管曾经能够模拟出递归函数的运行过程，不过还没有找到递归代码中的前中后序代码地位，所以须要进一步批改。 迭代代码框架想在迭代代码中体现前中后序遍历，关键点在哪里？ 当我从栈中拿出一个节点p，我应该想方法搞清楚这个节点p左右子树的遍历状况。 如果p的左右子树都没有被遍历，那么当初对p进行操作就属于前序遍历代码。 如果p的左子树被遍历过了，而右子树没有被遍历过，那么当初对p进行操作就属于中序遍历代码。 如果p的左右子树都被遍历过了，那么当初对p进行操作就属于后序遍历代码。 上述逻辑写成伪码如下： private Stack<TreeNode> stk = new Stack<>();public List<Integer> traverse(TreeNode root) {    pushLeftBranch(root);    while (!stk.isEmpty()) {        TreeNode p = stk.peek();        if (p 的左子树被遍历完了) {            /*******************/            /** 中序遍历代码地位 **/            /*******************/            // 去遍历 p 的右子树            pushLeftBranch(p.right);        }        if (p 的右子树被遍历完了) {            /*******************/            /** 后序遍历代码地位 **/            /*******************/            // 以 p 为根的树遍历完了，出栈            stk.pop();        }    }}private void pushLeftBranch(TreeNode p) {    while (p != null) {        /*******************/        /** 前序遍历代码地位 **/        /*******************/        stk.push(p);        p = p.left;    }}有方才的铺垫，这段代码应该是不难理解的，要害是如何判断p的左右子树到底被遍历过没有呢？ 其实很简略，咱们只须要保护一个visited指针，指向「上一次遍历实现的根节点」，就能够判断p的左右子树遍历状况了 上面是迭代遍历二叉树的残缺代码框架： // 模仿函数调用栈private Stack<TreeNode> stk = new Stack<>();// 左侧树枝一撸到底private void pushLeftBranch(TreeNode p) {    while (p != null) {        /*******************/        /** 前序遍历代码地位 **/        /*******************/        stk.push(p);        p = p.left;    }}public List<Integer> traverse(TreeNode root) {    // 指向上一次遍历完的子树根节点    TreeNode visited = new TreeNode(-1);    // 开始遍历整棵树    pushLeftBranch(root);    while (!stk.isEmpty()) {        TreeNode p = stk.peek();        // p 的左子树被遍历完了，且右子树没有被遍历过        if ((p.left == null || p.left == visited)           && p.right != visited) {            /*******************/            /** 中序遍历代码地位 **/            /*******************/            // 去遍历 p 的右子树            pushLeftBranch(p.right);        }        // p 的右子树被遍历完了        if (p.right == null || p.right == visited) {            /*******************/            /** 后序遍历代码地位 **/            /*******************/            // 以 p 为根的子树被遍历完了，出栈            // visited 指针指向 p            visited = stk.pop();        }    }}代码中最有技巧性的是这个visited指针，它记录最近一次遍历完的子树根节点（最近一次 pop 出栈的节点），咱们能够依据比照p的左右指针和visited是否雷同来判断节点p的左右子树是否被遍历过，进而拆散出前中后序的代码地位。 PS：visited指针初始化指向一个新 new 进去的二叉树节点，相当于一个非凡值，目标是防止和输出二叉树中的节点反复。 只需把递归算法中的前中后序地位的代码复制粘贴到上述框架的对应地位，就能够把任意递归的二叉树算法改写成迭代模式了。 比方，让你返回二叉树后序遍历的后果，你就能够这样写： private Stack<TreeNode> stk = new Stack<>();public List<Integer> postorderTraversal(TreeNode root) {    // 记录后序遍历的后果    List<Integer> postorder = new ArrayList<>();    TreeNode visited = new TreeNode(-1);    pushLeftBranch(root);    while (!stk.isEmpty()) {        TreeNode p = stk.peek();        if ((p.left == null || p.left == visited)           && p.right != visited) {            pushLeftBranch(p.right);        }        if (p.right == null || p.right == visited) {            // 后序遍历代码地位            postorder.add(p.val);            visited = stk.pop();        }    }    return postorder;}private void pushLeftBranch(TreeNode p) {    while (p != null) {        stk.push(p);        p = p.left;    }}当然，任何一个二叉树的算法，如果你想把递归改成迭代，都能够套用这个框架，只有把递归的前中后序地位的代码对应过去就行了。 迭代解法到这里就搞定了，不过我还是想强调，除了 BFS 层级遍历之外，二叉树的题目还是用递归的形式来做，因为递归是最合乎二叉树构造特点的。 说到底，这个迭代解法就是在用栈模仿递归调用，所以对照着递归解法，应该不难理解和记忆。 查看更多优质算法文章 点击这里，手把手带你刷力扣，致力于把算法讲清楚！我的 算法教程 曾经取得 90k star，欢送点赞！

作者：Dmitri Pavlutin译者：前端小智起源：Dmitri Pavlutin有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。 当从一个异步函数的promise返回时，咱们能够应用return await promise期待 promise 解析完，也能够间接返回它 return promise。 async function func1() { const promise = asyncOperation(); return await promise;}// vsasync function func2() { const promise = asyncOperation(); return promise;}这两个表达式都是无效的。然而，在某些状况下，这些表达式的体现会有所不同吗？咱们往下看。 1. 雷同的行为为了找到这两个表达式（返回 await promise vs return promise）之间的区别，咱们须要一个辅助函数 delayedDivide(n1, n2)。 该函数除2个数字，并返回蕴含在promise中的除法后果: function promisedDivision(n1, n2) { if (n2 === 0) { return Promise.reject(new Error('Cannot divide by 0')); } else { return Promise.resolve(n1 / n2); }}如果第二个参数（除数）是 0，该函数返回一个 reject，因为除以 0 是不可能的。 ...

应用H5自带播放器劣势问题 手写挪动端播放器指标遇到的问题 参考资料： H5-Video 能做的事&存在的坑挪动端 video 兼容性问题与解决方案

在线HTML5,CSS3,VueJS,jQuery运行测试练习工具在线HTML5,CSS3,VueJS,jQuery运行测试练习工具 本工具能够在线编辑HTML5,CSS3,VueJS,JavaScript,JQuery代码,并实时预览显示下载 https://tooltt.com/html/

HTML学习笔记1. 块标签（块元素）特点：1) 独占一行空间（100%）2) 高度默认为0，高度由内容决定3) 能够指定宽、高4) 用来搭建页面框架 元素：h4：div、body、p、ul>li、ol>li、dl>dt、dd、h1~h6h5：header、footer、nav、section、article、aside、address... 语义化标签简略慷慨、无招胜有招 2 . 行内标签（行内元素）特点：1) 行内与其余行内元素共享一行空间2) 宽高都由内容决定3) 无奈指定宽、高4) 用来填充，行内元素须要嵌套在块元素中，然而块元素不能嵌套在行内元素中。 元素：装璜类型标签：strong b em i sub sup ...性能标签：a1)超级链接 href="" 跳转url 跳转到一个外网地址中相对路径：绝对于以后代码所在文件的门路 . 当前目录下 .. 当前目录下的上一级目录绝对路径：绝对于基准点 linux操作系统中 / 操作系统根目录 也就是 / /var/www/html apache2部署目录 index.html / 代表apache的根部署目录 即 /var/www/html2)锚点 1. 定义锚点 <div id="top">顶部</div>2. 跳转 <a href="#top">跳转顶部</a>3)其余 target="" 指标_self 默认值 ，以后页面_blank 新页面img1)src 图片地址 网络资源相对路径绝对路径base64格局值2)alt 图片找不到时候的文本替换 3. 性能标签（性能元素）(1) table 表tbody 表格体 thead、tfoottr 行 td、th 列 （容器） 子标签能够为任意其余标签行中的列数在通过计算后应该是雷同的(2) form用来进行前后台数据交互（默认状况下，同步交互：JavaEE(jsp)、nodejs(模板)）ajax 异步交互前置技术： http协定 ...

在本文中，您将学习如何应用 HTML、CSS 和 JavaScript 编程代码制作模仿时钟。在这里我将向您展现如何制作一个简略的模仿时钟。 正如您在上图中所看到的，这是一个非常简单很根底的设计，你能够在这里延长扩大。这里有时针、分针和秒针，能够查看工夫。时钟脉冲中有1 到 12 的数字。工夫取决于您设施的工夫，即工夫将与您设施的工夫雷同。最后应用 HTML 编程代码来结构这款手表。CSS 代码已用于设计它。最引人注目的工作是 JavaScript 编程代码。当然，要制作这款手表，您须要对HTML、CSS和JavaScript有一个根本的理解。 如果您想理解这款手表的工作原理，能够观看上面的现场演示。当然，我曾经把必要的源代码放在那里，如果你违心，你能够复制它们利用你本人的学习和工作。然而，如果您是初学者并想晓得我是如何制作这款手表的，那么您必须依照上面的教程进行操作。 首先，您必须在扩大此手表之前创立一个 HTML 和 CSS 文件。合并 HTML 文件和 CSS 文件。您还能够应用款式标记 ( <style>css code</style> )将 CSS 代码增加到 HTML 文件。 步骤1：创立制作此时钟的根本构造我应用以下 HTML 代码创立了根本构造。上面的 HTML 曾经被用来制作这款手表，基本上就是你在手表中看到的表盘。 <div id='clock'> <!--时钟编号(1,2,....,12)--> <!--时钟指针()--> </div>--- 步骤2：应用 CSS 代码设计背景以下 CSS 代码已用于设计上述 HTML 代码。增加了背景色彩并为手表增加了 1 个边框。在这种状况下，我在手表中应用了红色，以便更清晰地看到指针和数字。你能够看到上面的图片，我展现了通过增加这两个编程代码能够取得什么样的后果。 body { background: rgb(13, 186, 230); color: #333; margin-top: 50px; font-family: Helvetica, sans-serif;}#clock { background: #fff; border: 15px solid #222; border-radius: 50%; position: relative; width: 320px; height: 320px; margin: auto;} ...

自 H5 诞生以来，在 html4.0 中有些元素已被 H5 废除，然而在 H5 中增加了很多新元素以及性能，明天咱们学习 H5 中新增的元素和属性都有哪些？ 新增语义构造标签标签形容<article>定义页面独立的内容区域。<aside>定义页面的侧边栏内容。<bdi>容许您设置一段文本，使其脱离其父元素的文本方向设置。<command>定义命令按钮，比方单选按钮、复选框或按钮<details>用于形容文档或文档某个局部的细节<dialog>定义对话框，比方提示框<summary>标签蕴含 details 元素的题目<figure>规定独立的流内容（图像、图表、照片、代码等等）。<figcaption>定义 <figure> 元素的题目<footer>定义 section 或 document 的页脚。<header>定义了文档的头部区域<mark>定义带有记号的文本。<meter>定义度量衡。仅用于已知最大和最小值的度量。<nav>定义导航链接的局部。<progress>定义任何类型的工作的进度。<ruby>定义 ruby 正文（中文注音或字符）。<rt>定义字符（中文注音或字符）的解释或发音。<rp>在 ruby 正文中应用，定义不反对 ruby 元素的浏览器所显示的内容。<section>定义文档中的节（section、区段）。<time>定义日期或工夫。<wbr>规定在文本中的何处适宜增加换行符。新增标签应用时依据形容内容，在适当的中央应用新标签，利用的时候和其余标签是一样的，H5 新增标签使得网页构造更清晰明了，倡议大家应用新增元素。 新增表单元素标签形容<datalist><input>标签定义选项列表。请与 input 元素配合应用该元素，来定义 input 可能的值。<keygen><keygen> 标签规定用于表单的密钥对生成器字段。<output><output> 标签定义不同类型的输入，比方脚本的输入。<datalist>属性规定form或input域应该领有主动实现性能，当input聚焦时，浏览器应该在域中显示填写的选项。 应用 input 元素与 datalist 元素绑定，应用时如下： <form action=""> <input type="text" list="schooltype"> <datalist id="schooltype"> <option value="欧亚驾校">欧亚驾校</option> <option value="鹏程驾校">鹏程驾校</option> <option value="学车网">学车网</option> </datalist> </form><keygen>元素用于提供用户验证的办法，表单提交时，keygen生成表单密钥对，一个是公钥，一个是私钥，私钥存储在客户端，公钥通过带有keygen字段的表单发送给服务器。目前已被H5废除，咱们作为理解就好。 应用实例如下： <form action=""> 用户名<input type="text" name="user" /><br> 明码<input type="password" name="se"> <br> 加密<keygen name="security"><br> <input type="submit" value="提交"></form><output>元素用于不同类型的输入，对输入后果的展现，如对两个数值相加，并展现后果，代码如下： <form action="" oninput = "x.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" id="a" step="1" min="0" max="100"> + <input type="text" id="b" value="50">= <output name="x" ></output> </form>上述form处增加oninput事件，对数值parseInt进行取整运算。 新增表单属性H5中新增表单属性指 form 和 input 元素新增属性。 ...

首先，在以后诸多的计算机编程语言当中，Python语言的确算是比较简单易学的一种，即便没有任何编程根底的人，也齐全能够通过自学来入门，然而要想可能把Python语言用得好，还须要有场景的撑持。 Python语言与Java、PHP等编程语言不同，Python语言在传统行业畛域也有比拟宽泛的利用，随着诸多企业纷纷实现业务上云，将来Python语言的利用场景会失去进一步拓展，所以以后一般职场人学习Python是不错的抉择。 学习Python语言通常要经验三个阶段，其一是学习Python语言的根底语法，这个阶段还是绝对比拟容易地，因为Python语言语法结构比拟清晰，规定也十分明确，所以学习起来并不会遇到太多的阻碍。依照历史教训来看，这个学习阶段齐全能够通过自学来实现。所以想学的同学，有必要听一下这位老师的课、支付python福利奥，想学的同学能够到梦子老师的围鑫（同音）：前排的是：762，两头一排是：459，后排的一组是：510 ,把以上三组字母依照程序组合起来即可她会安顿学习的。 Python学习的第二个阶段是案例学习，案例通常有十分明确的场景，所以在学习案例的过程中也会学习一些利用场景的相干常识，晚期能够重点学习一下Web开发，这个过程也会学习一些数据库常识和前端开发常识。尽管以后Web开发岗位的附加值并不算高，然而Web开发的常识体系比拟成熟，初学者会有一个更好的学习体验。 从以后的技术发展趋势来看，学习Python语言的过程中，能够重点学习一下大数据常识，将来大数据畛域会开释出大量的岗位需要。Python语言目前在大数据开发、大数据分析和大数据运维等畛域都有比拟宽泛的利用，初学者能够依据本身的知识结构和能力特点来抉择学习切入点。所以想学的同学，有必要听一下这位老师的课、支付python福利奥，想学的同学能够到梦子老师的围鑫（同音）：前排的是：762，两头一排是：459，后排的一组是：510 ,把以上三组字母依照程序组合起来即可她会安顿学习的。 学习Python的第三个阶段要联合具体的岗位开发工作，在把握了Python的基本知识之后，下一步能够找一个实习岗位进行晋升。对于一般职场人来说，能够联合本身的岗位工作来利用Python，比方通过Python来实现一些数据分析等等。

什么是HTML5?HTML5是HTML最新的订正版本，2014年10月由万维网联盟（W3C）实现规范制订。设计目标是为了在挪动设施上反对多媒体。HTML5是最新的html规范，领有新的语义、图形以及多媒体元素，简化web利用，对应程序员来说也是简略易学。通常简称 “H5”。 反对HTML5的浏览器包含Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的 漫游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称试验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备反对HTML5的能力。 HTML5与HTML比拟区别1：html5 不辨别是否是严格模式还是传统模式，而html 申明时有严格、传统、框架模式。文档申明变得简单明了。 html5 的申明：<!DOCTYPE html> html的申明： html 4.01 Strict：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">html 4.01 Transitional：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">html 4.01 Framest：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">区别2：html没有语义化标签，而html5 增加了许多语义标签，使代码构造清晰，进步代码可读性。如：header、nav、footer、main、artical、section等。区别3：html无奈在网页上动静的绘制图片，而 html5 新增了canvas画布，canvas绘制的图片放大后会失真，而SVG可绘制矢量图形。 H5 新增个性Canvas、SVG -- 用于绘画的元素，canvas绘制的图片会失真而SVG绘制的不会失真。video、audio -- 用于播放视频和音频的媒体。Drag 、Drop -- 用于拖放的 。Geolocation -- 用于获取地理位置。localStorage、sessionStorage -- 用于本地离线存储。webSQL、IndexDB -- 前端数据库操作，因为安全性极低，目前h5已放弃。web Worker -- 独立于其余脚本，不影响页面性能运行在后盾的javascript。webSocket -- 单个TCP连贯上进行全双工通信的协定。新的非凡内容元素 -- 如：article、footer、header、nav、section。新的表单控件 -- 如：date、time、email、url、search。 H5 的优缺点概括html5有以下几点劣势： 进步可用性和可维护性，改良了用户体验。新增语义化标签，有助于开发人员定义清晰的构造。能够播放视频音频，减少多媒体元素。利用h5动画，敌对地代替了flash和silverlight。爬虫抓取网站的时候，对于SEO很敌对。H5被大量利用于挪动利用和游戏开发。可移植性好。毛病：当初大多数高版本浏览器都反对html5，然而少部分的低版本浏览器目前不反对html5，因新标签的引入，各浏览器之间将短少一种对立的数据形容格局，造成用户体验不佳。 ...

代码来自头条号"前端小智", 侵权删 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; } .container{ width: 1100px; display: flex; justify-content: space-between; } img{ width: 350px; height: 350px; transform-origin: center; /*perspective 属性定义 3D 元素距视图的间隔，以像素计。该属性容许您扭转 3D 元素查看 3D 元素的视图。 当为元素定义 perspective 属性时，其子元素会取得透视成果，而不是元素自身*/ transform: perspective(800px) rotateY(20deg); transition: .5s; -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0004); /*倒影*/ } .container:hover img { opacity: 0.1; } .container img:hover{ transform:perspective(800px) rotateY(0deg); opacity: 1; } </style></head><body> <div class="container"> <img src="https://img0.baidu.com/it/u=3231005548,635944634&fm=26&fmt=auto&gp=0.jpg" alt=""> <img src="https://img0.baidu.com/it/u=3231005548,635944634&fm=26&fmt=auto&gp=0.jpg" alt=""> <img src="https://img0.baidu.com/it/u=3231005548,635944634&fm=26&fmt=auto&gp=0.jpg" alt=""></div></body></html>

概述本问次要介绍在React中，触发状态更新后如何更新React利用，也就是状态更新的原理首先须要晓得触发状态更新的形式有哪些状态更新后，触发的函数是什么？什么是并发模式，相较于以后的模式有什么劣势？React中提出异步中断更新是如何实现的？官网领导对于React的异步可中断渲染如何开启React并发模式（ConCurrent渲染模式） 状态更新流程图

看了之前大多数上传办法，大部分都是利用canvas toDataURL（兼容性较好）办法，而后在转为file对象放到formdata外面，其实canvas还有一个办法是 toBlob ，File对象继承自Blob对象，也就是说Blob对象的属性和办法。 function dataURLtoFile (dataurl, filename) { //将base64 转为file对象 let arr = dataurl.split(',') let mime = arr[0].match(/:(.*?);/)[1] let bstr = atob(arr[1]) let n = bstr.length let u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, { type: mime }) } 解决图片的办法惯例办法利用定义好的dataURLtoFile办法 function handleImg (file) { //借助filereader 实现图片预览 let read = new FileReader() read.readAsDataURL(file) return new Promise(function (resolve, reject) { read.onload = function (e) { let img = new Image() img.src = e.target.result img.onload = function () { // 创立canvas let canvas = document.createElement('canvas') let ctx = canvas.getContext('2d') canvas.width = this.width canvas.height = this.height ctx.drawImage(this, 0, 0, this.width, this.height) //从这里开始有差异 //计划一 比拟常见的办法 let base64 = canvas.toDataURL(file['type'], 1) let files = dataURLtoFile(base64, file.name) resolve(files) //计划二 间接利用blob canvas.toBlob(function(blob) { blob.lastModifiedDate = new Date().getTime(); blob.name = file.name resolve(blob) },file['type'], 1) } }}) }最初当咱们上传的时候调用 handleImg 办法就能够返回解决好的img了 ...

咱们常常应用 join相干语句做关联查问，那么在join连贯形式后边，on 联合and 和 where后果会产生什么变动呢？ 在应用 join on 时 留神 and where 区别和如何应用 join on andjoin on and 形式 相似于 on 条件1 and on 条件2，都是 基于join 关联两个表后果 ，取出关联后数据。 举例如下select t2.object_id t2_id from t1 right join t2 on t1.object_id=t2.object_id and t1.object_id=1989;--输入后果太多，省略，看 下边access局部92937 rows selected.Elapsed: 00:00:05.33Execution Plan Plan hash value: 2539735012 | Id | Operation | Name | Rows | Bytes | Cost (%CPU)| Time | | 0 | SELECT STATEMENT | | 102K| 2609K| 372 (1)| 00:00:05 ||* 1 | HASH JOIN RIGHT OUTER| | 102K| 2609K| 372 (1)| 00:00:05 ||* 2 | INDEX RANGE SCAN | T1_IDX | 1 | 13 | 1 (0)| 00:00:01 || 3 | TABLE ACCESS FULL | T2 | 102K| 1304K| 371 (1)| 00:00:05 | ...

FIT9131 Semester 1 2019 Assignment 122 March 2019 1Nature Trail GameIntroductionAssignment 1 has two components: a programming task and a unit test. These components areassessed independently but BOTH are required. The programming component is worth 10% of themarks for your final assessment in this unit and an associated test held during tutorial time is worth5%. You must attempt both components to be awarded any marks for Assignment 1.This document specifies the programming component of Assignment 1. This component is due by11pm Thursday of Week 7 (18th April, 2019). Heavy penalties will apply for late submission. Thisis an individual assessment task and must be your own work. You must attribute the source of anypart of your code which you have not written yourself. Please note the section on plagiarism in thisdocument.The assignment must be done using the BlueJ environment.The Java source code for this assignment must be implemented according to the Java CodingStandards for this unit.Any points needing clarification may be discussed with your tutor in the lab classes.Completion of this assignment contributes towards the following FIT9131 learning outcomes: ...

1）用法从用法角度来讲，用法统一，只是须要思考应用场景不同两者的保留对象都不受刷新标签页(刷新网页)的影响，对象仍旧放弃 2）本质区别1.localStorage： 不论是敞开标签页还是敞开浏览器，被localStorage保留的对象始终存在(永恒保留) 2.sessionStorage: 只有不敞开标签页，那么这个session仍旧存在放弃，如果敞开浏览器或者标签页那么这个被sessionStorage放弃的对象不存在，适宜应用只能在一个标签页上操作的状态

在前端开发过程中防止不会遇到须要进行数据可视化的操作，但单单通过html5的Canvas实现起来比拟麻烦，所以才会用到ECharts，HighCharts,，Chart.js等，如何在React框架下应用ECharts制图。 如果在原生的JS利用或者jQuery我的项目中，咱们罕用的形式就是间接去官网下载其外围js文件并导入咱们的我的项目中应用，然而在React我的项目中，咱们大可不必，因为React我的项目开发基于webpack做了二次封装，而webpack又是基于 Node.js的前端我的项目部署打包工具，总而言之，React我的项目开发是在nodejs环境根底上，所以能够间接利用npm包管理器将第三方工具模块下载退出到我的项目中，并通过import引入对应的模块到相干页面中应用，不须要关怀其中的细节。 1.创立一个React组件，并且须要组件内的状态state，render函数，componentDidMount钩子。 2.render函数渲染须要包容Echart实例的容器元素,并须要申明id，不便Echarts实例找到挂载的指标。 3.设置组件内的状态state，定义sourceData寄存Echarts实例的数据源 4.componentDidMount钩子，当render函数渲染完容器元素之后调用，次要游戏作用如下: 1）生成坐标数据源，并更新到state中的sourceData上 2）初始化Echarts实例，将其挂载到id为main的div元素上 3）通过myChart.setOption(obj)将须要展现的数据,整合成一个obj对象包含sourceData，绘制爱心图形 demo源码2、南丁格尔玫瑰图实现游戏数据展现 1.创立一个React组件，并且须要组件内的状态state，render函数，www.cungun.comcomponentDidMount钩子 2.render函数渲染须要包容Echart实例的容器元素,并须要申明id，不便Echarts实例找到挂载的指标 3.设置组件内的状态state，定义sourceData寄存Echarts实例的数据源 4.componentDidMount钩子，当render函数渲染完容器元素之后调用，次要作用如下 1）初始化Echarts实例，将其挂载到id为main的div元素上 2）通过myChart.setOption(obj)将须要展现的数据包含state的数据data，celldata,整合成一个obj对象,并绘制图表。

<dependency> <groupId>com.belerweb</groupId> <artifactId>pinyin4j</artifactId> <version>2.5.1</version> </dependency>package org.fh.util;import net.sourceforge.pinyin4j.PinyinHelper;import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType;import net.sourceforge.pinyin4j.format.HanyuPinyinOutputFormat;import net.sourceforge.pinyin4j.format.HanyuPinyinToneType;import net.sourceforge.pinyin4j.format.HanyuPinyinVCharType;import net.sourceforge.pinyin4j.format.exception.BadHanyuPinyinOutputFormatCombination;/**汉字解析拼音解决 阐明：Freemarker 页游模版引擎类作者：FH Adminfrom：fhadmin.org */public class GetPinyin { /** * 失去 全拼 * @param src * @return */public staticwww.cungun.com String getPingYin(String src) { char[] t1 = null; t1 = src.toCharArray(); String[] t2 = new String[t1.length]; HanyuPinyinOutputFormat t3 = new HanyuPinyinOutputFormat(); t3.setCaseType(HanyuPinyinCaseType.LOWERCASE); t3.setToneType(HanyuPinyinToneType.WITHOUT_TONE); t3.setVCharType(HanyuPinyinVCharType.WITH_V); String t4 = ""; int t0 = t1.length; try { for (int i = 0; i < t0; i++) { // 判断是否为汉字字符 if (java.lang.Character.toString(t1[i]).matches( "[\\u4E00-\\u9FA5]+")) { t2 = PinyinHelper.toHanyuPinyinStringArray(t1[i], t3); t4 += t2[0]; } else { t4 += java.lang.Character.toString(t1[i]); } } return t4; } catch (BadHanyuPinyinOutputFormatCombination e1) { e1.printStackTrace(); } return t4;}/** * 失去中文首字母 * @param str * @return */public static String getPinYinHeadChar(String str) { String convert = ""; for (int j = 0; j < str.length(); j++) { char word = str.charAt(j); String[] pinyinArray = PinyinHelper.toHanyuPinyinStringArray(word); if (pinyinArray != null) { convert += pinyinArray[0].charAt(0); } else { convert += word; } } return convert;}/** * 将字符串转移为ASCII码 * @param cnStr * @return */public static String getCnASCII(String cnStr) { StringBuffer strBuf = new StringBuffer(); byte[] bGBK = cnStr.getBytes(); for (int i = 0; i < bGBK.length; i++) { // System.out.println(Integer.toHexString(bGBK[i]&0xff)); strBuf.append(Integer.toHexString(bGBK[i] & 0xff)); } return strBuf.toString();}public static void main(String[] args) { String cnStr = "中国"; System.out.println(getPingYin(cnStr)); System.out.println(getPinYinHeadChar(cnStr));}} ...

前言这里次要针对的是H5，小程序或app都有现成的sdk能够应用；自己是用uniapp在做微信公众号的h5页面，其中须要把经纬度信息转化成文字描述的地位信息，在腾讯地图开发平台上申请了一个key，而后下载了一个微信小程序应用的微信小程序JavaScriptSDK v1.2然而这个sdk是为小程序设计的，所以在vue的h5中应用会有跨域问题，所以联合vue-jsonp对这个sdk做了一下批改，能够间接放入h5中应用。此办法不止在uniapp中能够应用，在所有H5我的项目中都可 阐明对于sdk怎么批改的我就不多说了，想理解的本人看源码，能够下载下面提供的原版比照查看，简略形容一句就是把sdk内应用的wx对象重写，替换了外面的request办法，应用vue-jsonp实现跨域。 装置vue-jsonp既然是要应用vue-jsonp，那就要先装置 npm install vue-jsonp在main.js中引入 import { VueJsonp } from 'vue-jsonp'Vue.use(VueJsonp)导入代码上面是我曾经批改好的代码，复制到一个js文件放到本人的我的项目内，例如：qqmap-wx-jssdk.js var vm = ''/** * 这里是重写局部 */var wx = { request(obj){ obj.data.output = 'jsonp' vm.$jsonp(obj.url,obj.data) .then(json => { if(json.status == 0){ obj.success(json) }else { obj.fail(json) } }) .catch(err => { obj.fail(err) }) }}var ERROR_CONF = { KEY_ERR: 311, KEY_ERR_MSG: 'key格局谬误', PARAM_ERR: 310, PARAM_ERR_MSG: '申请参数信息有误', SYSTEM_ERR: 600, SYSTEM_ERR_MSG: '零碎谬误', WX_ERR_CODE: 1000, WX_OK_CODE: 200};var BASE_URL = 'https://apis.map.qq.com/ws/';var URL_SEARCH = BASE_URL + 'place/v1/search';var URL_SUGGESTION = BASE_URL + 'place/v1/suggestion';var URL_GET_GEOCODER = BASE_URL + 'geocoder/v1/';var URL_CITY_LIST = BASE_URL + 'district/v1/list';var URL_AREA_LIST = BASE_URL + 'district/v1/getchildren';var URL_DISTANCE = BASE_URL + 'distance/v1/';var URL_DIRECTION = BASE_URL + 'direction/v1/';var MODE = { driving: 'driving', transit: 'transit'};var EARTH_RADIUS = 6378136.49;var Utils = { /** * md5加密办法 * 版权所有©2011 Sebastian Tschan，https：//blueimp.net */ safeAdd(x, y) { var lsw = (x & 0xffff) + (y & 0xffff); var msw = (x >> 16) + (y >> 16) + (lsw >> 16); return (msw << 16) | (lsw & 0xffff); }, bitRotateLeft(num, cnt) { return (num << cnt) | (num >>> (32 - cnt)); }, md5cmn(q, a, b, x, s, t) { return this.safeAdd(this.bitRotateLeft(this.safeAdd(this.safeAdd(a, q), this.safeAdd(x, t)), s), b); }, md5ff(a, b, c, d, x, s, t) { return this.md5cmn((b & c) | (~b & d), a, b, x, s, t); }, md5gg(a, b, c, d, x, s, t) { return this.md5cmn((b & d) | (c & ~d), a, b, x, s, t); }, md5hh(a, b, c, d, x, s, t) { return this.md5cmn(b ^ c ^ d, a, b, x, s, t); }, md5ii(a, b, c, d, x, s, t) { return this.md5cmn(c ^ (b | ~d), a, b, x, s, t); }, binlMD5(x, len) { /* append padding */ x[len >> 5] |= 0x80 << (len % 32); x[((len + 64) >>> 9 << 4) + 14] = len; var i; var olda; var oldb; var oldc; var oldd; var a = 1732584193; var b = -271733879; var c = -1732584194; var d = 271733878; for (i = 0; i < x.length; i += 16) { olda = a; oldb = b; oldc = c; oldd = d; a = this.md5ff(a, b, c, d, x[i], 7, -680876936); d = this.md5ff(d, a, b, c, x[i + 1], 12, -389564586); c = this.md5ff(c, d, a, b, x[i + 2], 17, 606105819); b = this.md5ff(b, c, d, a, x[i + 3], 22, -1044525330); a = this.md5ff(a, b, c, d, x[i + 4], 7, -176418897); d = this.md5ff(d, a, b, c, x[i + 5], 12, 1200080426); c = this.md5ff(c, d, a, b, x[i + 6], 17, -1473231341); b = this.md5ff(b, c, d, a, x[i + 7], 22, -45705983); a = this.md5ff(a, b, c, d, x[i + 8], 7, 1770035416); d = this.md5ff(d, a, b, c, x[i + 9], 12, -1958414417); c = this.md5ff(c, d, a, b, x[i + 10], 17, -42063); b = this.md5ff(b, c, d, a, x[i + 11], 22, -1990404162); a = this.md5ff(a, b, c, d, x[i + 12], 7, 1804603682); d = this.md5ff(d, a, b, c, x[i + 13], 12, -40341101); c = this.md5ff(c, d, a, b, x[i + 14], 17, -1502002290); b = this.md5ff(b, c, d, a, x[i + 15], 22, 1236535329); a = this.md5gg(a, b, c, d, x[i + 1], 5, -165796510); d = this.md5gg(d, a, b, c, x[i + 6], 9, -1069501632); c = this.md5gg(c, d, a, b, x[i + 11], 14, 643717713); b = this.md5gg(b, c, d, a, x[i], 20, -373897302); a = this.md5gg(a, b, c, d, x[i + 5], 5, -701558691); d = this.md5gg(d, a, b, c, x[i + 10], 9, 38016083); c = this.md5gg(c, d, a, b, x[i + 15], 14, -660478335); b = this.md5gg(b, c, d, a, x[i + 4], 20, -405537848); a = this.md5gg(a, b, c, d, x[i + 9], 5, 568446438); d = this.md5gg(d, a, b, c, x[i + 14], 9, -1019803690); c = this.md5gg(c, d, a, b, x[i + 3], 14, -187363961); b = this.md5gg(b, c, d, a, x[i + 8], 20, 1163531501); a = this.md5gg(a, b, c, d, x[i + 13], 5, -1444681467); d = this.md5gg(d, a, b, c, x[i + 2], 9, -51403784); c = this.md5gg(c, d, a, b, x[i + 7], 14, 1735328473); b = this.md5gg(b, c, d, a, x[i + 12], 20, -1926607734); a = this.md5hh(a, b, c, d, x[i + 5], 4, -378558); d = this.md5hh(d, a, b, c, x[i + 8], 11, -2022574463); c = this.md5hh(c, d, a, b, x[i + 11], 16, 1839030562); b = this.md5hh(b, c, d, a, x[i + 14], 23, -35309556); a = this.md5hh(a, b, c, d, x[i + 1], 4, -1530992060); d = this.md5hh(d, a, b, c, x[i + 4], 11, 1272893353); c = this.md5hh(c, d, a, b, x[i + 7], 16, -155497632); b = this.md5hh(b, c, d, a, x[i + 10], 23, -1094730640); a = this.md5hh(a, b, c, d, x[i + 13], 4, 681279174); d = this.md5hh(d, a, b, c, x[i], 11, -358537222); c = this.md5hh(c, d, a, b, x[i + 3], 16, -722521979); b = this.md5hh(b, c, d, a, x[i + 6], 23, 76029189); a = this.md5hh(a, b, c, d, x[i + 9], 4, -640364487); d = this.md5hh(d, a, b, c, x[i + 12], 11, -421815835); c = this.md5hh(c, d, a, b, x[i + 15], 16, 530742520); b = this.md5hh(b, c, d, a, x[i + 2], 23, -995338651); a = this.md5ii(a, b, c, d, x[i], 6, -198630844); d = this.md5ii(d, a, b, c, x[i + 7], 10, 1126891415); c = this.md5ii(c, d, a, b, x[i + 14], 15, -1416354905); b = this.md5ii(b, c, d, a, x[i + 5], 21, -57434055); a = this.md5ii(a, b, c, d, x[i + 12], 6, 1700485571); d = this.md5ii(d, a, b, c, x[i + 3], 10, -1894986606); c = this.md5ii(c, d, a, b, x[i + 10], 15, -1051523); b = this.md5ii(b, c, d, a, x[i + 1], 21, -2054922799); a = this.md5ii(a, b, c, d, x[i + 8], 6, 1873313359); d = this.md5ii(d, a, b, c, x[i + 15], 10, -30611744); c = this.md5ii(c, d, a, b, x[i + 6], 15, -1560198380); b = this.md5ii(b, c, d, a, x[i + 13], 21, 1309151649); a = this.md5ii(a, b, c, d, x[i + 4], 6, -145523070); d = this.md5ii(d, a, b, c, x[i + 11], 10, -1120210379); c = this.md5ii(c, d, a, b, x[i + 2], 15, 718787259); b = this.md5ii(b, c, d, a, x[i + 9], 21, -343485551); a = this.safeAdd(a, olda); b = this.safeAdd(b, oldb); c = this.safeAdd(c, oldc); d = this.safeAdd(d, oldd); } return [a, b, c, d]; }, binl2rstr(input) { var i; var output = ''; var length32 = input.length * 32; for (i = 0; i < length32; i += 8) { output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff); } return output; }, rstr2binl(input) { var i; var output = []; output[(input.length >> 2) - 1] = undefined; for (i = 0; i < output.length; i += 1) { output[i] = 0; } var length8 = input.length * 8; for (i = 0; i < length8; i += 8) { output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32); } return output; }, rstrMD5(s) { return this.binl2rstr(this.binlMD5(this.rstr2binl(s), s.length * 8)); }, rstrHMACMD5(key, data) { var i; var bkey = this.rstr2binl(key); var ipad = []; var opad = []; var hash; ipad[15] = opad[15] = undefined; if (bkey.length > 16) { bkey = this.binlMD5(bkey, key.length * 8); } for (i = 0; i < 16; i += 1) { ipad[i] = bkey[i] ^ 0x36363636; opad[i] = bkey[i] ^ 0x5c5c5c5c; } hash = this.binlMD5(ipad.concat(this.rstr2binl(data)), 512 + data.length * 8); return this.binl2rstr(this.binlMD5(opad.concat(hash), 512 + 128)); }, rstr2hex(input) { var hexTab = '0123456789abcdef'; var output = ''; var x; var i; for (i = 0; i < input.length; i += 1) { x = input.charCodeAt(i); output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f); } return output; }, str2rstrUTF8(input) { return unescape(encodeURIComponent(input)); }, rawMD5(s) { return this.rstrMD5(this.str2rstrUTF8(s)); }, hexMD5(s) { return this.rstr2hex(this.rawMD5(s)); }, rawHMACMD5(k, d) { return this.rstrHMACMD5(this.str2rstrUTF8(k), str2rstrUTF8(d)); }, hexHMACMD5(k, d) { return this.rstr2hex(this.rawHMACMD5(k, d)); }, md5(string, key, raw) { if (!key) { if (!raw) { return this.hexMD5(string); } return this.rawMD5(string); } if (!raw) { return this.hexHMACMD5(key, string); } return this.rawHMACMD5(key, string); }, /** * 失去md5加密后的sig参数 * @param {Object} requestParam 接口参数 * @param {String} sk签名字符串 * @param {String} featrue 办法名 * @return 返回加密后的sig参数 */ getSig(requestParam, sk, feature, mode) { var sig = null; var requestArr = []; Object.keys(requestParam).sort().forEach(function(key){ requestArr.push(key + '=' + requestParam[key]); }); if (feature == 'search') { sig = '/ws/place/v1/search?' + requestArr.join('&') + sk; } if (feature == 'suggest') { sig = '/ws/place/v1/suggestion?' + requestArr.join('&') + sk; } if (feature == 'reverseGeocoder') { sig = '/ws/geocoder/v1/?' + requestArr.join('&') + sk; } if (feature == 'geocoder') { sig = '/ws/geocoder/v1/?' + requestArr.join('&') + sk; } if (feature == 'getCityList') { sig = '/ws/district/v1/list?' + requestArr.join('&') + sk; } if (feature == 'getDistrictByCityId') { sig = '/ws/district/v1/getchildren?' + requestArr.join('&') + sk; } if (feature == 'calculateDistance') { sig = '/ws/distance/v1/?' + requestArr.join('&') + sk; } if (feature == 'direction') { sig = '/ws/direction/v1/' + mode + '?' + requestArr.join('&') + sk; } sig = this.md5(sig); return sig; }, /** * 失去起点query字符串 * @param {Array|String} 检索数据 */ location2query(data) { if (typeof data == 'string') { return data; } var query = ''; for (var i = 0; i < data.length; i++) { var d = data[i]; if (!!query) { query += ';'; } if (d.location) { query = query + d.location.lat + ',' + d.location.lng; } if (d.latitude && d.longitude) { query = query + d.latitude + ',' + d.longitude; } } return query; }, /** * 计算角度 */ rad(d) { return d * Math.PI / 180.0; }, /** * 解决起点location数组 * @return 返回起点数组 */ getEndLocation(location){ var to = location.split(';'); var endLocation = []; for (var i = 0; i < to.length; i++) { endLocation.push({ lat: parseFloat(to[i].split(',')[0]), lng: parseFloat(to[i].split(',')[1]) }) } return endLocation; }, /** * 计算两点间直线间隔 * @param a 示意纬度差 * @param b 示意经度差 * @return 返回的是间隔，单位m */ getDistance(latFrom, lngFrom, latTo, lngTo) { var radLatFrom = this.rad(latFrom); var radLatTo = this.rad(latTo); var a = radLatFrom - radLatTo; var b = this.rad(lngFrom) - this.rad(lngTo); var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLatFrom) * Math.cos(radLatTo) * Math.pow(Math.sin(b / 2), 2))); distance = distance * EARTH_RADIUS; distance = Math.round(distance * 10000) / 10000; return parseFloat(distance.toFixed(0)); }, /** * 应用微信接口进行定位 */ getWXLocation(success, fail, complete) { wx.getLocation({ type: 'gcj02', success: success, fail: fail, complete: complete }); }, /** * 获取location参数 */ getLocationParam(location) { if (typeof location == 'string') { var locationArr = location.split(','); if (locationArr.length === 2) { location = { latitude: location.split(',')[0], longitude: location.split(',')[1] }; } else { location = {}; } } return location; }, /** * 回调函数默认解决 */ polyfillParam(param) { param.success = param.success || function () { }; param.fail = param.fail || function () { }; param.complete = param.complete || function () { }; }, /** * 验证param对应的key值是否为空 * * @param {Object} param 接口参数 * @param {String} key 对应参数的key */ checkParamKeyEmpty(param, key) { if (!param[key]) { var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + key +'参数格局有误'); param.fail(errconf); param.complete(errconf); return true; } return false; }, /** * 验证参数中是否存在检索词keyword * * @param {Object} param 接口参数 */ checkKeyword(param){ return !this.checkParamKeyEmpty(param, 'keyword'); }, /** * 验证location值 * * @param {Object} param 接口参数 */ checkLocation(param) { var location = this.getLocationParam(param.location); if (!location || !location.latitude || !location.longitude) { var errconf = this.buildErrorConfig(ERROR_CONF.PARAM_ERR, ERROR_CONF.PARAM_ERR_MSG + ' location参数格局有误'); param.fail(errconf); param.complete(errconf); return false; } return true; }, /** * 结构谬误数据结构 * @param {Number} errCode 错误码 * @param {Number} errMsg 谬误形容 */ buildErrorConfig(errCode, errMsg) { return { status: errCode, message: errMsg }; }, /** * * 数据处理函数 * 依据传入参数不同解决不同数据 * @param {String} feature 性能名称 * search 地点搜寻 * suggest关键词提醒 * reverseGeocoder逆地址解析 * geocoder地址解析 * getCityList获取城市列表：父集 * getDistrictByCityId获取区县列表：子集 * calculateDistance间隔计算 * @param {Object} param 接口参数 * @param {Object} data 数据 */ handleData(param,data,feature){ if (feature == 'search') { var searchResult = data.data; var searchSimplify = []; for (var i = 0; i < searchResult.length; i++) { searchSimplify.push({ id: searchResult[i].id || null, title: searchResult[i].title || null, latitude: searchResult[i].location && searchResult[i].location.lat || null, longitude: searchResult[i].location && searchResult[i].location.lng || null, address: searchResult[i].address || null, category: searchResult[i].category || null, tel: searchResult[i].tel || null, adcode: searchResult[i].ad_info && searchResult[i].ad_info.adcode || null, city: searchResult[i].ad_info && searchResult[i].ad_info.city || null, district: searchResult[i].ad_info && searchResult[i].ad_info.district || null, province: searchResult[i].ad_info && searchResult[i].ad_info.province || null }) } param.success(data, { searchResult: searchResult, searchSimplify: searchSimplify }) } else if (feature == 'suggest') { var suggestResult = data.data; var suggestSimplify = []; for (var i = 0; i < suggestResult.length; i++) { suggestSimplify.push({ adcode: suggestResult[i].adcode || null, address: suggestResult[i].address || null, category: suggestResult[i].category || null, city: suggestResult[i].city || null, district: suggestResult[i].district || null, id: suggestResult[i].id || null, latitude: suggestResult[i].location && suggestResult[i].location.lat || null, longitude: suggestResult[i].location && suggestResult[i].location.lng || null, province: suggestResult[i].province || null, title: suggestResult[i].title || null, type: suggestResult[i].type || null }) } param.success(data, { suggestResult: suggestResult, suggestSimplify: suggestSimplify }) } else if (feature == 'reverseGeocoder') { var reverseGeocoderResult = data.result; var reverseGeocoderSimplify = { address: reverseGeocoderResult.address || null, latitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lat || null, longitude: reverseGeocoderResult.location && reverseGeocoderResult.location.lng || null, adcode: reverseGeocoderResult.ad_info && reverseGeocoderResult.ad_info.adcode || null, city: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.city || null, district: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.district || null, nation: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.nation || null, province: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.province || null, street: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.street || null, street_number: reverseGeocoderResult.address_component && reverseGeocoderResult.address_component.street_number || null, recommend: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult.formatted_addresses.recommend || null, rough: reverseGeocoderResult.formatted_addresses && reverseGeocoderResult.formatted_addresses.rough || null }; if (reverseGeocoderResult.pois) {//判断是否返回周边poi var pois = reverseGeocoderResult.pois; var poisSimplify = []; for (var i = 0;i < pois.length;i++) { poisSimplify.push({ id: pois[i].id || null, title: pois[i].title || null, latitude: pois[i].location && pois[i].location.lat || null, longitude: pois[i].location && pois[i].location.lng || null, address: pois[i].address || null, category: pois[i].category || null, adcode: pois[i].ad_info && pois[i].ad_info.adcode || null, city: pois[i].ad_info && pois[i].ad_info.city || null, district: pois[i].ad_info && pois[i].ad_info.district || null, province: pois[i].ad_info && pois[i].ad_info.province || null }) } param.success(data,{ reverseGeocoderResult: reverseGeocoderResult, reverseGeocoderSimplify: reverseGeocoderSimplify, pois: pois, poisSimplify: poisSimplify }) } else { param.success(data, { reverseGeocoderResult: reverseGeocoderResult, reverseGeocoderSimplify: reverseGeocoderSimplify }) } } else if (feature == 'geocoder') { var geocoderResult = data.result; var geocoderSimplify = { title: geocoderResult.title || null, latitude: geocoderResult.location && geocoderResult.location.lat || null, longitude: geocoderResult.location && geocoderResult.location.lng || null, adcode: geocoderResult.ad_info && geocoderResult.ad_info.adcode || null, province: geocoderResult.address_components && geocoderResult.address_components.province || null, city: geocoderResult.address_components && geocoderResult.address_components.city || null, district: geocoderResult.address_components && geocoderResult.address_components.district || null, street: geocoderResult.address_components && geocoderResult.address_components.street || null, street_number: geocoderResult.address_components && geocoderResult.address_components.street_number || null, level: geocoderResult.level || null }; param.success(data,{ geocoderResult: geocoderResult, geocoderSimplify: geocoderSimplify }); } else if (feature == 'getCityList') { var provinceResult = data.result[0]; var cityResult = data.result[1]; var districtResult = data.result[2]; param.success(data,{ provinceResult: provinceResult, cityResult: cityResult, districtResult: districtResult }); } else if (feature == 'getDistrictByCityId') { var districtByCity = data.result[0]; param.success(data, districtByCity); } else if (feature == 'calculateDistance') { var calculateDistanceResult = data.result.elements; var distance = []; for (var i = 0; i < calculateDistanceResult.length; i++){ distance.push(calculateDistanceResult[i].distance); } param.success(data, { calculateDistanceResult: calculateDistanceResult, distance: distance }); } else if (feature == 'direction') { var direction = data.result.routes; param.success(data,direction); } else { param.success(data); } }, /** * 结构微信申请参数，公共属性解决 * * @param {Object} param 接口参数 * @param {Object} param 配置项 * @param {String} feature 办法名 */ buildWxRequestConfig(param, options, feature) { var that = this; options.header = { "content-type": "application/json" }; options.method = 'GET'; options.success = function (res) { var data = res; if (data.status === 0) { that.handleData(param, data, feature); } else { param.fail(data); } }; options.fail = function (res) { res.statusCode = ERROR_CONF.WX_ERR_CODE; param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg)); }; options.complete = function (res) { var statusCode = +res.statusCode; switch(statusCode) { case ERROR_CONF.WX_ERR_CODE: { param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg)); break; } case ERROR_CONF.WX_OK_CODE: { var data = res.data; if (data.status === 0) { param.complete(data); } else { param.complete(that.buildErrorConfig(data.status, data.message)); } break; } default:{ param.complete(that.buildErrorConfig(ERROR_CONF.SYSTEM_ERR, ERROR_CONF.SYSTEM_ERR_MSG)); } } }; return options; }, /** * 解决用户参数是否传入坐标进行不同的解决 */ locationProcess(param, locationsuccess, locationfail, locationcomplete) { var that = this; locationfail = locationfail || function (res) { res.statusCode = ERROR_CONF.WX_ERR_CODE; param.fail(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg)); }; locationcomplete = locationcomplete || function (res) { if (res.statusCode == ERROR_CONF.WX_ERR_CODE) { param.complete(that.buildErrorConfig(ERROR_CONF.WX_ERR_CODE, res.errMsg)); } }; if (!param.location) { that.getWXLocation(locationsuccess, locationfail, locationcomplete); } else if (that.checkLocation(param)) { var location = Utils.getLocationParam(param.location); locationsuccess(location); } }};class QQMapWX { /** * 构造函数 * * @param {Object} options 接口参数,key 为必选参数 */ constructor(options) { if (!options.key) { throw Error('key值不能为空'); } vm = options.vm this.key = options.key; }; /** * POI周边检索 * * @param {Object} options 接口参数对象 * * 参数对象构造能够参考 * @see http://lbs.qq.com/webservice_v1/guide-search.html */ search(options) { var that = this; options = options || {}; Utils.polyfillParam(options); if (!Utils.checkKeyword(options)) { return; } var requestParam = { keyword: options.keyword, orderby: options.orderby || '_distance', page_size: options.page_size || 10, page_index: options.page_index || 1, output: 'json', key: that.key }; if (options.address_format) { requestParam.address_format = options.address_format; } if (options.filter) { requestParam.filter = options.filter; } var distance = options.distance || "1000"; var auto_extend = options.auto_extend || 1; var region = null; var rectangle = null; //判断城市限定参数 if (options.region) { region = options.region; } //矩形限定坐标(临时只反对字符串格局) if (options.rectangle) { rectangle = options.rectangle; } var locationsuccess = function (result) { if (region && !rectangle) { //城市限定参数拼接 requestParam.boundary = "region(" + region + "," + auto_extend + "," + result.latitude + "," + result.longitude + ")"; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'search'); } } else if (rectangle && !region) { //矩形搜寻 requestParam.boundary = "rectangle(" + rectangle + ")"; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'search'); } } else { requestParam.boundary = "nearby(" + result.latitude + "," + result.longitude + "," + distance + "," + auto_extend + ")"; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'search'); } } wx.request(Utils.buildWxRequestConfig(options, { url: URL_SEARCH, data: requestParam }, 'search')); }; Utils.locationProcess(options, locationsuccess); }; /** * sug含糊检索 * * @param {Object} options 接口参数对象 * * 参数对象构造能够参考 * http://lbs.qq.com/webservice_v1/guide-suggestion.html */ getSuggestion(options) { var that = this; options = options || {}; Utils.polyfillParam(options); if (!Utils.checkKeyword(options)) { return; } var requestParam = { keyword: options.keyword, region: options.region || '全国', region_fix: options.region_fix || 0, policy: options.policy || 0, page_size: options.page_size || 10,//管制显示条数 page_index: options.page_index || 1,//管制页数 get_subpois : options.get_subpois || 0,//返回子地点 output: 'json', key: that.key }; //长地址 if (options.address_format) { requestParam.address_format = options.address_format; } //过滤 if (options.filter) { requestParam.filter = options.filter; } //排序 if (options.location) { var locationsuccess = function (result) { requestParam.location = result.latitude + ',' + result.longitude; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'suggest'); } wx.request(Utils.buildWxRequestConfig(options, { url: URL_SUGGESTION, data: requestParam }, "suggest")); }; Utils.locationProcess(options, locationsuccess); } else { if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'suggest'); } wx.request(Utils.buildWxRequestConfig(options, { url: URL_SUGGESTION, data: requestParam }, "suggest")); } }; /** * 逆地址解析 * * @param {Object} options 接口参数对象 * * 申请参数构造能够参考 * http://lbs.qq.com/webservice_v1/guide-gcoder.html */ reverseGeocoder(options) { var that = this; options = options || {}; Utils.polyfillParam(options); var requestParam = { coord_type: options.coord_type || 5, get_poi: options.get_poi || 0, output: 'json', key: that.key }; if (options.poi_options) { requestParam.poi_options = options.poi_options } var locationsuccess = function (result) { requestParam.location = result.latitude + ',' + result.longitude; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'reverseGeocoder'); } wx.request(Utils.buildWxRequestConfig(options, { url: URL_GET_GEOCODER, data: requestParam }, 'reverseGeocoder')); }; Utils.locationProcess(options, locationsuccess); }; /** * 地址解析 * * @param {Object} options 接口参数对象 * * 申请参数构造能够参考 * http://lbs.qq.com/webservice_v1/guide-geocoder.html */ geocoder(options) { var that = this; options = options || {}; Utils.polyfillParam(options); if (Utils.checkParamKeyEmpty(options, 'address')) { return; } var requestParam = { address: options.address, output: 'json', key: that.key }; //城市限定 if (options.region) { requestParam.region = options.region; } if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'geocoder'); } wx.request(Utils.buildWxRequestConfig(options, { url: URL_GET_GEOCODER, data: requestParam },'geocoder')); }; /** * 获取城市列表 * * @param {Object} options 接口参数对象 * * 申请参数构造能够参考 * http://lbs.qq.com/webservice_v1/guide-region.html */ getCityList(options) { var that = this; options = options || {}; Utils.polyfillParam(options); var requestParam = { output: 'json', key: that.key }; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'getCityList'); } wx.request(Utils.buildWxRequestConfig(options, { url: URL_CITY_LIST, data: requestParam },'getCityList')); }; /** * 获取对应城市ID的区县列表 * * @param {Object} options 接口参数对象 * * 申请参数构造能够参考 * http://lbs.qq.com/webservice_v1/guide-region.html */ getDistrictByCityId(options) { var that = this; options = options || {}; Utils.polyfillParam(options); if (Utils.checkParamKeyEmpty(options, 'id')) { return; } var requestParam = { id: options.id || '', output: 'json', key: that.key }; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'getDistrictByCityId'); } wx.request(Utils.buildWxRequestConfig(options, { url: URL_AREA_LIST, data: requestParam },'getDistrictByCityId')); }; /** * 用于单终点到多起点的路线间隔(非直线间隔)计算： * 反对两种间隔计算形式：步行和驾车。 * 终点到起点最大限度直线间隔10公里。 * * 新增直线间隔计算。 * * @param {Object} options 接口参数对象 * * 申请参数构造能够参考 * http://lbs.qq.com/webservice_v1/guide-distance.html */ calculateDistance(options) { var that = this; options = options || {}; Utils.polyfillParam(options); if (Utils.checkParamKeyEmpty(options, 'to')) { return; } var requestParam = { mode: options.mode || 'walking', to: Utils.location2query(options.to), output: 'json', key: that.key }; if (options.from) { options.location = options.from; } //计算直线间隔 if(requestParam.mode == 'straight'){ var locationsuccess = function (result) { var locationTo = Utils.getEndLocation(requestParam.to);//解决起点坐标 var data = { message:"query ok", result:{ elements:[] }, status:0 }; for (var i = 0; i < locationTo.length; i++) { data.result.elements.push({//将坐标存入 distance: Utils.getDistance(result.latitude, result.longitude, locationTo[i].lat, locationTo[i].lng), duration:0, from:{ lat: result.latitude, lng:result.longitude }, to:{ lat: locationTo[i].lat, lng: locationTo[i].lng } }); } var calculateResult = data.result.elements; var distanceResult = []; for (var i = 0; i < calculateResult.length; i++) { distanceResult.push(calculateResult[i].distance); } return options.success(data,{ calculateResult: calculateResult, distanceResult: distanceResult }); }; Utils.locationProcess(options, locationsuccess); } else { var locationsuccess = function (result) { requestParam.from = result.latitude + ',' + result.longitude; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'calculateDistance'); } wx.request(Utils.buildWxRequestConfig(options, { url: URL_DISTANCE, data: requestParam },'calculateDistance')); }; Utils.locationProcess(options, locationsuccess); } }; /** * 路线布局： * * @param {Object} options 接口参数对象 * * 申请参数构造能够参考 * https://lbs.qq.com/webservice_v1/guide-road.html */ direction(options) { var that = this; options = options || {}; Utils.polyfillParam(options); if (Utils.checkParamKeyEmpty(options, 'to')) { return; } var requestParam = { output: 'json', key: that.key }; //to格局解决 if (typeof options.to == 'string') { requestParam.to = options.to; } else { requestParam.to = options.to.latitude + ',' + options.to.longitude; } //初始化部分申请域名 var SET_URL_DIRECTION = null; //设置默认mode属性 options.mode = options.mode || MODE.driving; //设置申请域名 SET_URL_DIRECTION = URL_DIRECTION + options.mode; if (options.from) { options.location = options.from; } if (options.mode == MODE.driving) { if (options.from_poi) { requestParam.from_poi = options.from_poi; } if (options.heading) { requestParam.heading = options.heading; } if (options.speed) { requestParam.speed = options.speed; } if (options.accuracy) { requestParam.accuracy = options.accuracy; } if (options.road_type) { requestParam.road_type = options.road_type; } if (options.to_poi) { requestParam.to_poi = options.to_poi; } if (options.from_track) { requestParam.from_track = options.from_track; } if (options.waypoints) { requestParam.waypoints = options.waypoints; } if (options.policy) { requestParam.policy = options.policy; } if (options.plate_number) { requestParam.plate_number = options.plate_number; } } if (options.mode == MODE.transit) { if (options.departure_time) { requestParam.departure_time = options.departure_time; } if (options.policy) { requestParam.policy = options.policy; } } var locationsuccess = function (result) { requestParam.from = result.latitude + ',' + result.longitude; if (options.sig) { requestParam.sig = Utils.getSig(requestParam, options.sig, 'direction',options.mode); } wx.request(Utils.buildWxRequestConfig(options, { url: SET_URL_DIRECTION, data: requestParam }, 'direction')); }; Utils.locationProcess(options, locationsuccess); }};module.exports = QQMapWX;应用在须要应用的vue页面中导入刚刚复制下来的js文件 ...

1.DB.java package com.bn.util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.Iterator; import java.util.Properties; import org.dom4j.Document; import org.dom4j.DocumentException; import org.dom4j.Element; import org.dom4j.io.SAXReader; public class DB { private static String dbServer; private static String dbName; private static String dbUser; private static String dbPwd; //java 页游我的项目 fhadmin.org public void readXML(){ SAXReader sr = new SAXReader();//获取读取xml的对象。Document doc = null; String path1 = String.valueOf(Thread.currentThread().getContextClassLoader().getResource("")); //System.out.println(path1); path1 = path1 + "../DB.xml"; //System.out.println(path1);try { ...

--//生产零碎昨天呈现/u01磁盘空间有余的状况,清理出40g磁盘空间后,查看日志利用共事发现有点慢,次要这台机器还运行ogg.--//感觉有点慢是失常的.另外查看发现存在大量logrotate过程以及后续awk命令过程.会不会是这些过程导致的迟缓. --//我先革除这些过程. service crond stopps -ef | grep logrotatepkill -9 logrotatepkill -9 awkservice crond start--//看看我写的logrotate配置: cat /etc/logrotate.d/oracle/u01/app/oracle/diag/tnslsnr/dbcndg2/listener/trace/listener.log { weeklyrotate 5copytruncatecompressnotifemptymissingok} /u01/app/oracle/admin/dbcndg2/adump/dbcndg2_ora_*.aud{ monthlyrotate 0notifemptymissingokmaxage 32postrotate find /u01/app/oracle/admin/dbcndg2/adump/ -name "dbcndg_ora_*.aud" -size 0 -exec rm {} \+endscript}--//我一下子没想明确为什么我要执行find ... -size 0 这样的操作.--//看以前的工作笔记,其实开始并没有postrotate..www.pizei.com.endscript,我才忽然想明确以前也呈现相似磁盘满这样的状况下.--//这样就会呈现大量size=0 的aud文件,预计过后就是为了这样的状况设计的,革除size=0的aud文件. --//为什么慢呢? 实际上这个问题我以前遇到过,治理的机器切实太多,脱漏一些机器要改.只不过过后仅仅做了记录,并没有发表进去.--//11g下扭转了aud的文件命名格局退出工夫戳,这样每个生成的文件是惟一的,这样logrotate的state file(缺省是--///var/lib/logrotate.status)会越滚越大.这样每次执行越来越慢.10g下没有工夫戳,也就是最大65XXX个文件(尽管可能也很慢,但至--//少这是一个定数,另外如同最大过程号linux当初也能够批改,能够设置更大不止65XXX,我没有这方面的教训以及测试). --//查看 /var/lib/logrotate.status曾经达到129M.革除文件. >| /var/lib/logrotate.status--//另外查看: ls -ltrhtotal 108Mdrwxr-xr-x 2 oracle oinstall 4.0K 2015-03-16 17:34:35 dpdumpdrwxr-xr-x 2 oracle oinstall 4.0K 2015-03-16 17:34:43 hdumpdrwxr-xr-x 2 oracle oinstall 4.0K 2015-03-16 17:34:49 pfiledrwxr-xr-x 2 oracle oinstall 107M 2021-06-22 10:14:06 adump ...

CS5003 — Masters Programming ProjectsAssignment: P2 – Project 2Deadline: Wednesday 3rd April (Week 8) 21:00Credits: 33% of the overall module gradeNOTE: MMS IS THE DEFINITIVE SOURCE FOR DEADLINES AND CREDIT DETAILSYou are expected to have read and understood all the information in this specification and anyaccompanying documents at least a week before the deadline. You must contact the lecturer regardingany queries well in advance of the deadline.AimsThe main aim of this project is to teach you to write a complete web application including both clientand server components. More specifically, it will involve designing and testing an API, implementingthe front-end and back-end in Javascript which communicate through this API, and choosing theright data representation. You will be using Node.js packages such as Express. The use of git versioncontrol system is mandatory for this practical.OverviewYou will create an online game that allows different users to connect and to play against each other.A basic implementation should implement a simplified game of battleship1, where players take it inturns guess where their opponent’s ships are on a 10 x 10 grid. The game is over when one playerhas correctly guessed where all their opponent’s ships are (i.e. when a player has targeted and sunkall their opponent’s ships).Working in pairs, you will implement both the client side (HTML+CSS+JS) and the server side(JavaScript based on Node.js), The server side will implement a RESTful API for exchanging datawith the client. Your webpage will contain client-side JavaScript which makes HTTP calls to the API,and exchanges data with the server using JSON.The client should be able to let a user connect to the server, place their ships on their own grid,target cells on their opponent’s grid, and display the current state of both their own and their opponent’sgrids. Information about which cell has been targeted should be sent to the server via theAPI, and the game state will be held centrally on the server. Your solution should allow two peopleto play against each other from two separate computers.The API should provide services needed to make this happen including, but not limited to:starting a new game configuring the game (player name, size of grid, number/type of ships, game variant, etc. . . ) placing ships on the player’s grid targeting a cell on the opponent’s grid1https://en.wikipedia.org/wiki...page 1 of 5? detecting hit/miss/victory conditionsThis is a fairly open-ended project, but you should ensure your application provides certain corefunctionality as described Section Requirements.RequirementsYour application should provide the functionality described below. You should make sure you havecompleted all the requirements in each section before moving onto the next.BasicYour application should provide the following:Allow a player to start a new game against another player. Allow a player to place their ships on their own grid. Each ship occupies a number of consecutivesquares on the grid, arranged either horizontally or vertically. The number of squares foreach ship is determined by the type of the ship: ...

触发器能够在执行语句前或执行后触发其余 SQL 代码运行。触发器能够读取触发语句扭转了哪些数据，然而没有返回值。因而能够应用触发器增强业务逻辑的束缚而不须要在应用程序写对应的代码。 从上述形容能够看到，触发器能够简化应用程序的逻辑并且能够晋升性能，这是因为应用触发器缩小了应用程序和服务端的交互次数。同时，触发器有助于实现自动更新归一化和统计数据。例如，咱们能够应用触发器主动统计交易订单总金额，订单数及均匀客单价。 然而，MySQL 的触发器的利用场合也非常无限，如果你应用过其余数据库产品的触发器，不要认为 MySQL 也能实现雷同的性能，例如： 每个数据表的繁多事件只能有一个触发器，也就是说对于 AFTER INSERT 这样的事件来说，不能同时有超过1个的触发器。MySQL 只反对行级别的触发器，也就是只能按 FOR EACH ROW 这种形式应用触发而不是整个 SQL 语句，这对于大量数据的操作而言会比拟低效。MySQL 的触发器只能按上面的模式编写：CREATE TRIGGER 触发器名 BEFORE|AFTER 触发事件ON 表名 FOR EACH ROWBEGIN 执行语句列表;END执行语句列表反对单条或多条语句，上面是一个多条语句的示例： DELIMITER $$CREATE TRIGGER user_create_log AFTER INSERT ON t_users FOR EACH ROWBEGINDECLARE log_info VARCHAR(40)character set utf8;DECLARE description VARCHAR(20) character setwww.sangpi.com utf8;#前面发现中文字符编码呈现乱码，这里设置字符集SET description = " is created";SET log_info = CONCAT(NEW.user_name, description); #函数CONCAT能够将字符串连贯INSERT INTO logs(log) values(log_info);END $$ DELIMITER ;触发器可能导致服务端理论执行的工作不可预测，一个简略的语句可能导致服务端做大量不可见的工作。例如，如果一个触发器更新了 一个相干的表，可能导致受影响的行数加倍。触发器难以调试，并且一旦引入了触发器，很难剖析性能瓶颈。触发器会导致潜在的锁期待和死锁。如果触发器失败了，游戏源查问也会失败。如果没有意识到触发器的存在，这类玩呢提很难发现。大多数限度中，最大的限度是 FOR EACH ROW 的设计，这有时候导致触发器没法用于保护统计和缓存表，这是因为这可能很慢。应用触发器的次要理由是相比定时同步更新，触发器能够统一保持数据的一致性。 触发器也没法保障原子性。例如，更新 MyISAM 数据表的触发器在源 SQL 语句出错后，无奈回滚。而且，触发器本身也可能都只谬误。如果咱们应用了 AFTER UPDATE 基于 MyISAM 数据表去更新另一个表。如果触发器有个导致第二张表操作失败的谬误，那对于第一张表的操作不会回滚。 ...

　学习Java原本就是一件与日俱增的事件，或者你通过自学能把握一些皮毛技术，通过零碎学习学到Java的一些根本大面，但想要做到精通，还是须要本人技术的与日俱增和工作教训的一直积攒。 1) “有符号”左移位运算符(<<)能将运算符右边的运算对象向左挪动运算符右侧指定的位数(在低位补0)。 左移移位相当于乘以2，例如 3 << 2 //12 则是将数字3左移2位 322 = 3*(2的2次方) 剖析：首先把3转换为二进制数字0000 0000 0000 0000 0000 0000 0000 0011，而后把该数字高位(左侧)的两个零移出，其余的数字都朝左平移2位，最初在低位(右侧)的两个空位补零。则失去的最终后果是0000 0000 0000 0000 0000 0000 0000 1100，则转换为十进制是12.数学意义： 在数字没有溢出的前提下，对于负数和正数，左移一位都相当于乘以2的1次方，左移n位就相当于乘以2的n次方。 2) “有符号”右移位运算符(>>)则将运算符右边的运算对象向右挪动运算符右侧指定的位数。 “有符号”右移位运算符应用了“符号扩大”：若值为正，则在高位插入0;若值为负，则在高位插入1。 >>运算规定：按二进制游戏模式把所有的数字向右挪动对应位数，低位移出(舍弃)，高位的空位补符号位，移位后失去的数字为负数则补0，正数补1。 例如11 >> 2，则是将数字11右移2位 剖析：11的二进制模式为：0000 0000 0000 0000 0000 0000 0000 1011，而后把低位的www.sangpi.com最初两个数字移出，因为该数字是负数，所以在高位补零。则失去的最终后果是0000 0000 0000 0000 0000 0000 0000 0010.转换为十进制是3.数学意义：右移一位相当于除2，右移n位相当于除以2的n次方。 3) Java也增加了一种“无符号”右移位运算符(>>>)，它应用了“零扩大”：无论正负，都在高位插入0 4)右移一位相当于除以2，左移一位(在不溢出的状况下)相当于乘以2;移位运算速度高于乘除运算。 5)位运算符的优先级 ~的优先级最高，其次是<<、>>和>>>，再次是&，而后是^，优先级最低的是|。 ...

Fri Oct 17 19:59:51 2014 Thread 1 cannot allocate new log, sequence 4722 Private strand flush not complete Current log# 1 seq# 4721 mem# 0: /oradata/sgomp5/redo01.log Thread 1 advanced to log sequence 4722 (LGWR switch) Current log# 2 seq# 4722 mem# 0: /oradata/sgomp5/redo02.log 在MOS社区中找到了一篇对于这个问题的文章： Historically, Every user session wrote the changes to redo log buffer andwww.sangpi.com changes from redo log buffer are flushed to redo logs on disk by lgwr. As number of users increased, the race and the need to get latch for redo allocation and redo copy on the public redo buffer increased. ...

Cardiff School of Computer Science and InformaticsCoursework Assessment Pro-formaModule Code: CMT207Module Title: Information Modelling and Database SystemsAssessment Title: Relational data modellingAssessment Number: 1Date Set: 04 March 2019Submission Date and Time: 12 April 2019 at 9:30AMReturn Date: 03 May 2019This assignment is worth 50% of the total marks available for this module. The penalty for late ornon-submission is an award of zero marks.Your submission must include the official Coursework Submission Cover sheet, which can be foundhere:https://docs.cs.cf.ac.uk/down...Submission InstructionsA submission page will be created on Learning Central in Week 11. You will need to submit twodocuments:Description Type NameCover sheet Compulsory One PDF (.pdf) file [student_number].pdfCoursework CompulsoryOne WORD file (.docx)NOTE: Use the template provided on Learning Central asdescribed in the coursework description below.[student_number].docxAny deviation from the submission instructions above (including the number and types of filessubmitted) may result in a mark of zero for the assessment or question part.AssignmentThe coursework is based on the following brief. Please read carefully.A relational database is used to store information about students. For each student, the followinginformation is stored: surname, first name, home address, date of birth, student number.In addition, we know the student's place of birth (by place name and country). There may be placeswhere no student was born or currently resides.Students complete a set of modules each academic year. Each module has got a title, a code and thenumber of credits. Some modules are mandatory while others are optional. Each module is assessedby a combination of an exam and coursework assignments each worth a certain percentage of theoverall mark. For each student, their performance (i.e. mark out of 100) is recorded for eachassessment. Each mark is accompanied by the date of assessment and the attempt number.Each module is taught by lecturers. Some lecturers may not teach any modules in some academicyears. They can also teach more than one module per academic year. Each module can be taught bymore than one lecturer. For each module, we know how many lectures are given by each lecturer ineach academic year. Optional modules may not be taught at all, e.g. if no students have opted forthat module.For each lecturer, the following information is stored: surname, first name, date of the employmentstart, annual salary, staff number.In addition, we know where the lecturers live (by place name and country).Please answer the questions in the Word submission template, which is provided as a separatedocument on Learning Central and distributed together with this pro-forma. The questions aredivided into four parts.Part 1: Normalisation [0–20 marks]The following relation is defined to store information about assessment results:ASSESSMENT_RESULT(STUDENT_ID, STUDENT_FULL_NAME, MODULE_CODE, MODULE_TITLE,ASSESSMENT, PERCENTAGE, MARK, ATTEMPT, ASSESSMENT_DATE) ...

最近越来越多的人开始议论架构。我四周的共事和工程师也是如此。只管我还不是特地深刻了解MVP和DDD，然而咱们的新我的项目还是决定通过MVP来构建。 这篇文章是我通过钻研和学习各种文章以及专题讨论所总结进去的，它包含以下几点： 为什么越来越多的人开始关注架构？ 首先，MVP是什么？ 哪种架构才是最好的，MVC，MVVM还是MVP？ MVP的利与弊 Show me the code!!!代码展现 可怜的，这篇文章将不包含： 具体活泼的代码示例 如何编写测试代码 最初，我将通知你如何更进一步学习这些专题。 顺便提一下，我于上周在当地的一个研讨会上对MVP架构进行了相干演讲。这篇文章与过后的演讲内容相差无几。 介绍~Activity是上帝类~首先，让咱们思考一下为什么在Android开发中如此迫切地须要一个清晰的软件架构。 该段摘自“代码大全第二版”： 防止创立神类。防止创立无所不知，无所不能的上帝类。如果一个类须要破费工夫从其余类中通过Get()和Set()检索数据（也就是说，须要深刻业务并且通知它们如何去做），所以是否应该把这些性能函数更好的组织到其它类而不是上帝类中。（Riel 1996） 上帝类的保护老本很高，你很难了解正在进行的操作，并且难以测试和扩大，这就是为什么要防止创立上帝类的黄金法令。 然而，在Android开发中，如果你不思考架构的话，Activity类往往会越来越大。这是因为，在Android中，容许View和其它线程共存于Activity内。其实最大的问题莫过于在Activity中同时存在业务逻辑和UI逻辑。这会减少测试和保护的老本。 图片 这是为什么须要清晰架构的起因之一。不仅会造成Activity的臃肿，还会引起其余问题，如使Activity和Fragment的生命周期变简单，以及数据绑定等。 什么是MVP？MVP代表Model，View和Presenter。 View层负责解决用户事件和视图局部的展现。在Android中，它可能是Activity或者Fragment类。 Model层负责拜访数据。数据能够是远端的Server API，本地数据库或者SharedPreference等。 Presenter层是连贯（或适配）View和Model的桥梁。 下图是基于MVP架构的模式之一。View是UI线程。Presenter是View与Model之间的适配器。UseCase或者Domain在Model层中，负责从实体获取或载入数据。依赖规定如下： 图片要害是，高层接口不晓得底层接口的细节，或者更精确地说，高层接口不能，不应该，并且必须不理解底层接口的细节，是（面向）形象的，并且是细节暗藏的。 图片 依赖规定？Uncle Bob的“The Clean Architecture”形容了依赖的规定是什么。 同心圆将软件划分为不同的区域，个别的，随着层级的深刻，软件的等级也就越高。外圆是实现机制，内圆是外围策略。 这是下面片文章的摘要： Entities： 能够是一个持有办法函数的对象 能够是一组数据结构或办法函数 它并不重要，能在我的项目中被不同应用程序应用即可 Use Cases 蕴含特定于应用程序的业务规定 精心编排流入Entity或从Entity流出的数据 指挥Entity间接应用我的项目范畴内的业务规定，从而实现Use Case的指标 Presenters,，Controllers 将Use Case和Entity中的数据转换成格局最不便的数据 内部零碎，如数据库或网页可能不便的应用这些数据 齐全蕴含GUI的MVC架构 External Interfaces, UI, DB 所有的细节所在 如数据库细节，Web框架细节，等等 MVC，MVP还是MVVM？那么，哪一个才是最好的呢？哪一个比其余的更优良呢？我能只抉择一个吗？ 答案是，NO。 这些模式的动机都是一样的。那就是如何防止简单凌乱的代码，让执行单元测试变得容易，发明高质量应用程序。就这样。 当然，远不止这三种架构模式。而且任何一种模式都不可能是银弹，他们只是架构模式之一，不是解决问题的惟一路径。这些只是办法、伎俩而不是目标、指标。 利与弊OK，让咱们回到MVP架构上。刚刚咱们理解了什么是MVP，探讨了MVP以及其它热门架构，并且介绍了MVC，MVP和MVVM三者间的不同。这是对于MVP架构利与弊的总结： **利 可测试（TDD） 可保护（代码复用） 容易Reviewe 信息隐蔽 **弊 ...

UNIVERSITY OF WARWICKLEVEL 7 Open Book Assessment [2 hours]Department of Computer ScienceCS4022: High Performance ComputingInstructions Read all instructions carefully – and read through the entire paper at leastonce before you start writing.There are four questions. You should attempt two questions from SectionA and the one question in Section B.You should not submit answers to more than the required number ofquestions.All questions will carry the same number of marks unless otherwise stated.You should handwrite your answers either with paper and pen or using anelectronic device with a stylus (unless you have special arrangements forexams which allow the use of a computer). Start each question on a newpage and clearly mark each page with the page number, your student id andthe question number.Handwritten notes must be scanned or photographed and all individualsolutions should (if you possibly can) be collated into a single PDF with pagesin the correct order.You must upload two files to the AEP: your PDF of solutions and a completedcover sheet.You must click FINISH ASSESSMENT to complete the submission process.After you have done so you will not be able to upload anything further.Please ensure that all your handwritten answers are written legibly, preferablyin dark blue or black ink. If you use a pencil ensure that it is not too faint to becaptured by a scan or photograph.Please check the legibility of your final submission before uploading. It is yourresponsibility to ensure that your work can be read.You are allowed to access module materials, notes, resources, referencesand the internet during the assessment. 2You should not try to communicate with any other candidate during theassessment period or seek assistance from anyone else in completing youranswers. The Computer Science Department expects the conduct of allstudents taking this assessment to conform to the stated requirements.Measures will be in operation to check for possible misconduct. These willinclude the use of similarity detection tools and the right to require liveinterviews with selected students following the assessment.By starting this assessment you are declaring yourself fit to undertake it. Youare expected to make a reasonable attempt at the assessment by answeringthe questions in the paper.Please note that:You must have completed and uploaded your assessment before the 24hour assessment window closes.You have an additional 45 minutes beyond the stated length of the paper toallow for downloading and uploading the assessment, your files andtechnical delays.For further details you should refer to the AEP documentation.Use the AEP to seek advice immediately if during the assessment period:• you cannot access the online assessment;• you believe you have been given access to the wrong online assessment.Please note that technical support is only available between 9AM and 5PM (BST).Invigilator support will be also be available (via the AEP) between 9AM and 5PM(BST).Notify Dcs.exams@warwick.ac.uk as soon as possible if you cannot completeyour assessment because:• you lose your internet connection;• your device fails;• you become unwell and are unable to continue;• you are affected by circumstances beyond your control (e.g. fire alarm).Please note that this is for notification purposes, it is not a help line.Your assessment starts below. 3Section AThis question is about fundamental knowledge.(a) What do we mean by the Granularity of Parallelism? Give four types of parallelism inorder of granularity and provide an application example for each. [7](b) Discuss how superthreading and hyperthreading reduce the waste of pipeline slots in thepipeline mechanism. [8](c) Discuss the differences between scientific applications such as matrix multiplication andgraph-based applications such as online-shopping recommendation. Focus yourdiscussions on data structure, performance metric and key factors that affect theperformance. [12](d) Analyse the following two “for” loops in Listing 1. Describe whether the iterations ofthese two loops can be parallelised automatically by compilers and explain how youreached your conclusions. [8]Loop 1:for(i=1; i<=n; i++){a[i]= b[i] + c[i];d[i]= a[i];} Loop 2:for(i=2; i<=n; i++)a[i]= b[i] + a[i-1];Listing 1: Two loops for Question 1(d)4This question is about parallel programming models.(a) The Synchronous mode is a communication mode in MPI. Explain why the Synchronousmode may incur higher communication overhead than the Standard mode. [7](b) Assume there are two MPI processes running on different machines: P0 and P1. In p0,MPI_Send is first called to send message A to p1 and then MPI_Recv is called to receivemessage B from p1. In p1, MPI_Send is first called to send message B to p0 and thenMPI_Recv is called to receive message A from p0. What will happen if the sizes of bothmessage A and B exceed the system buffers managed by MPI? Explain why. [8](c) A collective communication operation is performed by all relevant processes at the sametime with the same set of parameters. However the parameters may have differentmeanings to different processes. Describe, using illustrative examples if necessary, theoperations of the following two MPI collective communication calls. Further, discusswhat the parameters in these functions mean to different processes.i) MPI_Bcast(void *buf, int count, MPI_Datatype type, int root, MPI_Comm Comm) [6]ii) MPI_Gather(void *sendbuf, int sendcnt, MPI_Datatype sendtype, void *recvbuf, int recvcount, MPI_Datatype recvtype, int root, MPI_Comm comm) [6](d) MPI_Type_create_indexed_block can be used to construct the users’ own data types. Theformat of the function is as follows: MPI_Type_create_indexed_block ( int count, int blocklengths, int *array_of_displacements, MPI_Datatype oldtype, MPI_Datatype *newtype) Let oldtype ={(MPI_INT, 0), (MPI_CHAR, 2)} with the extent of 3 bytes. Let D=(2, 5, 10).Give the memory layout of newtype after calling MPI_Type_create_indexed_block (3, 2, D, oldtype, newtype) [8]5This question is about high performance computing systems.(a) Discuss the differences between multicore CPU and GPU in terms of architecture designand performance objective. [7](b) The topology of node interconnection plays an important role in the performance of aCluster system. Draw the topology of a 4-D hypercube. What are the values of nodedegree and bisection width of the topology? Discuss which aspect of networkperformance node degree and bisection width represent. [8](c) Discuss the difference between Cluster systems and Grid systems. [8](d) There are three potential methods to implement parallel I/O: 1) One process performs I/Ooperations for all other processes; 2) Each process reads or writes the data from or to aseparate file; 3) Different processes access different parts of a common file. Discuss theadvantages and disadvantages of each method. Which method of parallel I/O is mostwidely used nowadays? [12]Section BThis question is about performance modelling.(a) Consider a 3-D grid of equal-sized cells. Assume that the volume of the grid is V and thegrid is a cube (i.e., the length of the grid in each dimension is V1/3). Assume V=c×n,where c is the number of cells allocated to each processor and n is the number ofprocessors. Derive the surface-to-volume ratios under 1-D, 2-D and 3-D decomposition.Further, analyse under what circumstances 2-D decomposition is better than 1-Ddecomposition. [12](b) Discuss the drawbacks of using asymptotic analysis to evaluate the performance of analgorithm. Give an example for each drawback you list. [8](c) Modelling the execution time of an application is a good way of evaluating theperformance of the application. Discuss how to model the execution time of anapplication. The discussion should cover the modelling of both computation time andcommunication time, and the discussion should revolve around the various parametersused to model the execution time. [10] WX：codehelp

什么是优雅停机先来一段简略的代码，如下： @RestControllerpublic class DemoController {@GetMapping("/demo")public String demo() throws InterruptedException { // 模仿业务耗时解决流程Thread.sleep(20 * 1000L);return "hello";}}watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=当咱们流量申请到此接口执行业务逻辑的时候，若服务端此时执行关机 （kill），spring boot 默认状况会间接敞开容器（tomcat 等），导致此业务逻辑执行失败。在一些业务场景下：会呈现数据不统一的状况，事务逻辑不会回滚。 graceful shutdown watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk= 在最新的 spring boot 2.3 版本，内置此性能，不须要再自行扩大容器线程池来解决， 目前 spring boot 嵌入式反对的 web 服务器（Jetty、Reactor Netty、Tomcat 和 Undertow）以及反应式和基于 Servlet 的 web 应用程序都反对优雅停机性能。 咱们来看下如何应用: 当应用 server.shutdown=graceful启用时，在 web 容器敞开时，web 服务器将不再接管新申请，并将期待流动申请实现的缓冲期。 配置体验 watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk= 此处反对的 shutdown 行为，咱们看下 源码枚举如下： /** Configuration for shutting down a {@link WebServer}. *@fhadmin org@since 2.3.0 */public enum Shutdown {/** 优雅停机 （限期停机） * */GRACEFUL,/** ...

小程序环境内：H5中引入 ：https://res.wx.qq.com/open/js... 调用 wx.miniProgram.navigateTo({url: '小程序门路'}) 非微信环境 我用的是一个第三方外链生成器小程序：外链王，挺好用的能够试试

一、 什么是分布式数据库分布式系统数据库系统原理（第三版）中的形容：“咱们把分布式数据库定义为一群散布在计算机网络上、逻辑上互相关联的数据库。分布式数据库管理系统（分布式DBMS）则是反对治理分布式数据库的软件系统，它使得散布对于用户变得通明。有时，分布式数据库系统（Distributed Database System,DDBS）用于示意分布式数据库和分布式DBMS这两者。” 在以上表述中，“一群散布在网络上、逻辑上互相关联”是其要义。在物理上一群逻辑上互相关联的数据库能够分布式在一个或多个物理节点上。当然，次要还是利用在多个物理节点。这一方面是X86服务器性价比的晋升无关，另一方面是因为互联网的倒退带来了高并发和海量数据处理的需要，原来的单物理服务器节点不足以满足这个需要。 分布式不只是体现在数据库畛域，也与分布式存储、分布式中间件、分布式网络有着很多关联。最终目标都是为了更好的服务于业务需要的变更。从哲学意义上了解是一种生产力的晋升。 二、 分布式数据库实践根底 1． CAP实践首先，分布式数据库的技术实践是基于单节点关系数据库的根本个性的继承，次要波及事务的ACID个性、事务日志的容灾恢复性、数据冗余的高可用性几个要点。 其次，分布式数据的设计要遵循CAP定理，即：一个分布式系统不可能同时满足 一致性（ Consistency ） 、可用性 （ Availability ） 、分区容 忍 性 （ Partition tolerance ） 这三个根本需要，最 多只能同时满足其中的两项， 分区容错性 是不能放弃的，因而架构师通常是在可用性和一致性之间衡量。这里的衡量不是简略的齐全摈弃，而是思考业务状况作出的就义，或者用互联网的一个术语“降级”来形容。 针对CAP实践，查阅了国外的相干文档表述，CAP实践来源于2002年麻省理工学院的Seth Gilbert和Nancy Lynch发表的对于Brewer猜测的正式证实。 CAP 三个个性形容如下 ： 一致性：确保分布式群集中的每个节点都返回雷同的 、 最近 更新的数据 。一致性是指每个客户端具备雷同的数据视图。有多种类型的一致性模型 ， CAP中的一致性是指线性化或程序一致性，是强一致性。 可用性：每个非失败节点在正当的工夫内返回所有读取和写入申请的响应。为了可用，网络分区两侧的每个节点必须可能在正当的工夫内做出响应。 分区容忍性：只管存在网络分区，零碎仍可持续运行并 保障 一致性。网络分区已成事实。保障分区容忍度的分布式系统能够在分区修复后从分区进行适当的复原。 原文次要观点有在强调CAP实践不能简略的了解为三选二。 在分布式数据库管理系统中，分区容忍性是必须的。网络分区和抛弃的音讯已成事实，必须进行适当的解决。因而，零碎设计人员必须在一致性和可用性之间进行衡量 。简略地说，网络分区迫使设计人员抉择完满的一致性或完满的可用性。在给定状况下， 优良 的分布式系统会依据业务对一致性和可用性需要的重要等级提供最佳的答案，但通常一致性需要等级会更高，也是最有挑战的 。 2． BASE实践基于CAP定理的衡量，演进出了 BASE实践 ，BASE是Basically Available（根本可用）、Soft state（软状态）和Eventually consistent（最终一致性）三个短语的缩写。BASE实践的核心思想是：即便无奈做到强一致性，但每个利用都能够依据本身业务特点，采纳适当的形式来使零碎达到最终一致性。 BA：Basically Available 根本可用，分布式系统在呈现故障的时候，容许损失局部可用性，即保障外围可用。 S：Soft State 软状态，容许零碎存在中间状态，而该中间状态不会影响零碎整体可用性。 E：Consistency 最终一致性，零碎中的所有数据正本通过肯定工夫后，最终可能达到统一的状态。 BASE 实践实质上是对 CAP 实践的延长，是对 CAP 中 AP 计划的一个补充。 ...

作为游戏设计者，咱们更不心愿展现这么长的串给玩家看。那么，你是否也在为数值太大，显示不残缺而懊恼，亦或者面对如此宏大的数值感到头昏脑涨。不必放心，不必焦急，上面给大家介绍游戏中罕用的展现办法实现原理在游戏中，咱们通常会应用如下的符号来代替指定的单位：K是10的3次方，也就是千M是10的6次方，也就是百万B是10的9次方，也就是十亿代码展现 1.只保留游戏方面整数局部 local function NumFormat(num) if num >= 100000000 then num = math.modf(num / 100000000)elseif num >= 1000000 then num = math.modf(num / 1000000)elseif num >= 1000 then num = math.modf(num / 1000)end return numend1.2.3.4.5.6.7.8.9.10. 2.保留一位小数local function NumFormat(num) if num >= 100000000 then num = math.modf(num / 10000000) num = string.format("%.1fB", num / 10)elseif num >= 1000000 then num = math.modf(num / 100000) num = string.format("%.1fM", num / 10)elseif num >= 1000 then num = math.modf(num / 100) num = string.format("%.1fK", num / 10)end return numend1.2.3.4.5.6.7.8.9.10.11.12.13. ...

、属性值为具体的像素值，如30dp，40px,50sp android:layout_width定义本元素的宽度 android:layout_height定义本元素的高度 android:layout_margin 本元素离上下左右间的间隔　android:layout_marginBottom 离某元素底边缘的间隔　android:layout_marginLeft 离某元素左边缘的间隔　android:layout_marginRight 离某元素右边缘的间隔　android:layout_marginTop 离某元素上边缘的间隔 android:layout_marginStart本元素里开始的地位的间隔 android:layout_marginEnd本元素里完结地位的间隔 android:scrollX程度初始滚动偏移 android:scrollY垂直初始滚动偏移 android:background本元素的背景 android:padding指定布局与子布局的间距 android:paddingLeft指定布局右边与子布局的间距 android:paddingTop指定布局上边与子布局的间距 android:paddingRight指定布局左边与子布局的间距 android:paddingBottom指定布局下边与子布局的间距 android:paddingStart指定布局右边与子布局的间距与android:paddingLeft雷同 android:paddingEnd指定布局左边与子布局的间距与android:paddingRight雷同 android:fadingEdgeLength 设置边框突变的长度 android:minHeight最小高度 android:minWidth最小宽度 android:translationX 程度方向的挪动间隔 android:translationY垂直方向的挪动间隔 android:transformPivotX绝对于一点的程度方向偏转量 android:transformPivotY绝对于一点的垂直方向偏转量二、属性值为id的援用名“@id/id-name” android:layout_alignBaseline 本元素的文本与父元素文本对齐　android:layout_below 在某元素的下方　android:layout_above 在某元素的的上方　android:layout_toLeftOf 在某元素的右边　android:layout_toRightOf 在某元素的左边 android:layout_toStartOf本元素从某个元素开始 android:layout_toEndOf本元素在某个元素完结　android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐　android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐　android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐　android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐 android:layout_alignStart本元素与开始的父元素对齐 android:layout_alignEnd本元素与完结的父元素对齐 android:ignoreGravity 指定元素不受重力的影响 android:layoutAnimation: 定义布局显示时候的动画 android:id 为布局增加ID不便查找 android:tag为布局增加tag不便查找与相似 android:scrollbarThumbHorizontal设置程度滚动条的drawab android:scrollbarThumbVertical设置垂直滚动条的drawable android:scrollbarTrackHorizontal设置程度滚动条背景（轨迹）的色drawable android:scrollbarTrackVertical设置垂直滚动条背景（轨迹）的色drawable android:scrollbarAlwaysDrawHorizontalTrack 设置程度滚动条是否含有轨道 android:scrollbarAlwaysDrawVerticalTrack 设置垂直滚动条是否含有轨道 android:nextFocusLeft 设置右边指定视图取得下一个焦点 android:nextFocusRight设置左边指定视图取得下一个焦点 android:nextFocusUp设置上边指定视图取得下一个焦点 android:nextFocusDown设置下边指定视图取得下一个焦点 android:nextFocusForward设置指定视图取得下一个焦点 android:contentDescription 阐明 android:OnClick 点击时从上下文中调用指定的办法三、属性值是Android内置值的 ...

1.执行打算简介 执行打算是指一条 SQL 语句在通过 MySQL 查问优化器的优化会后，具体的执行形式。MySQL 为咱们提供了 EXPLAIN 语句，来获取执行打算的相干信息。须要留神的是，EXPLAIN 语句并不会真的去执行相干的语句，而是通过查问优化器对语句进行剖析，找出最优的查问计划，并显示对应的信息。 执行打算通常用于 SQL 性能剖析、优化等场景。通过 explain 的后果，能够理解到如数据表的查问程序、数据查问操作的操作类型、哪些索引能够被命中、哪些索引理论会命中、每个数据表有多少行记录被查问等信息。 explain 执行打算反对 SELECT、DELETE、INSERT、REPLACE 以及 UPDATE 语句。咱们个别多用于剖析 select 查问语句。 2.执行打算实战咱们简略来看下一条查问语句的执行打算： mysql> explain SELECT * FROM dept_emp WHERE emp_no IN (SELECT emp_no FROM dept_emp GROUP BY emp_no HAVING COUNT(emp_no)>1); +----+-------------+----------+------------+-------+-----------------+---------+---------+------+--------+----------+-------------+ | id | select_type | table | partitions | type | possible_keys | key | key_len | ref | rows | filtered | Extra | +----+-------------+----------+------------+-------+-----------------+---------+---------+------+--------+----------+-------------+ | 1 | PRIMARY | dept_emp | NULL | ALL | NULL | NULL | NULL | NULL | 331143 | 100.00 | Using where | | 2 | SUBQUERY | dept_emp | NULL | index | PRIMARY,dept_no | PRIMARY | 16 | NULL | 331143 | 100.00 | Using index | +----+-------------+----------+------------+-------+-----------------+---------+---------+------+--------+----------+-------------+ 复制代码能够看到，执行打算后果中-共有 12 列，各列代表的含意总结如下表： ...

<template> <view style="height: 100vh;background-color: #f9f9f9;"> <heat style="background-color: red;"></heat> <view style="width: 100%;height: 88rpx;background-color: #fff;"></view> <loading></loading> <view class="dis_f_f_c"> <view v-for="(item,index) in list" class="ma_r20 dis_f_f_c" :hover-start-time="1" :hover-stay-time="1" hover-class="box-active" hover-stop-propagation :key='index' @click="c_shuzi(index,item)"> <view :class="index==list_num?'fs_36_red':''"> {{item.name}} </view> <view class="whbox" v-show="index!=list_num"></view> <view :class="item.state?'whbox_red':'whbox_lv'" v-show="index==list_num"></view> </view> </view> <view @click="smcode">扫码</view> <view @click="returndy">返回</view> <view @click="yulantup">图片预览</view> <view class="dongxian"> <view class="dobglan"> <view class="po_rrr"> <view class="po_a44"></view> </view> </view> </view> <view class="dis_f_f_c"> <uni-tag text="标签"></uni-tag> <uni-tag text="124" size="small" type="default" :circle="true"></uni-tag> <uni-tag text="标签" @click="bindClick"></uni-tag> <uni-badge text="10" type="error" size='small' style="" /> <view class="ttt">100</view> </view> <button @click="open">关上弹窗</button> <view style="width: 100px;height: 100px;"> <uni-grid :column="1"> <uni-grid-item> <text class="text">文本17888888888886</text> </uni-grid-item> </uni-grid-item> </uni-grid> </view> <uni-popup ref="popup" type="share" > <view class="bao" @click="closeone">aas</view> </uni-popup> <!-- <view style="width: 100%;height: 100px;background-color: #007AFF;position: fixed;z-index: 99;left: 0;bottom: 0;">asd</view> --> <!-- <uni-popup ref="popup" type="dialog"> <uni-popup-dialog type="input" message="胜利音讯" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog> </uni-popup> --> <!-- 根本用法 --> <uni-search-bar @confirm="search" @input="input"></uni-search-bar> <!-- 自定义Placeholder --> <uni-search-bar placeholder="自定placeholder" @confirm="search"></uni-search-bar> <!-- 设置圆角 --> <uni-search-bar :radius="100" @confirm="search"></uni-search-bar> <!-- 个别用法 --> <uni-grid :column="3"> <uni-grid-item> <text class="text">文本1</text> </uni-grid-item> <uni-grid-item> <text class="text">文本2</text> </uni-grid-item> <uni-grid-item> <text class="text">文本3</text> </uni-grid-item> </uni-grid> <!-- 不带边框并矩形显示 --> <uni-grid :column="3" :show-border="false" :square="false"> <uni-grid-item> <text class="text">文本</text> </uni-grid-item> <uni-grid-item> <text class="text">文本</text> </uni-grid-item> <uni-grid-item> <text class="text">文本</text> </uni-grid-item> <uni-grid-item> <text class="text">文本</text> </uni-grid-item> <uni-grid-item> <text class="text">文本</text> </uni-grid-item> <uni-grid-item> <text class="text">文本</text> </uni-grid-item> </uni-grid> <!-- 根本用法 --> <uni-notice-bar single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar> <uni-notice-bar text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar> <!-- 文字滚动 --> <uni-notice-bar scrollable="true" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar> <!-- 显示图标 --> <uni-notice-bar showIcon="true" text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar> <!-- 显示敞开按钮 --> <uni-notice-bar showClose="true" showIcon="true" text="这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar> <!-- 查看更多 --> <uni-notice-bar @getmore="getMore" :showGetMore="true" moreText="查看更多" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar> <!-- 根本用法 --> <uni-steps :options="[{title: '事件一'}, {title: '事件二'}, {title: '事件三'}, {title: '事件四'}]" :active="1"></uni-steps> <!-- 纵向排列 --> <uni-steps :options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易实现',desc:'2018-11-14'}]" direction="column" :active="2"></uni-steps> <uni-load-more status="loading" iconType="circle"></uni-load-more> <uni-swipe-action> <!-- 根底用法 --> <uni-swipe-action-item :right-options="options" :left-options="options" @click="onClick" @change="change"> <view>SwipeAction 根底应用场景</view> </uni-swipe-action-item> <!-- 应用插槽 （请自行给定插槽内容宽度）--> <uni-swipe-action-item> <template v-slot:left> <view><text>置顶</text></view> </template> <view> <text>应用插槽</text> </view> <template v-slot:right> <view><text>删除</text></view> </template> </uni-swipe-action-item> <!-- 混合用法 --> <uni-swipe-action-item :right-options="options"> <template v-slot:left> <view><text>置顶</text></view> </template> <view><text>混合应用</text></view> </uni-swipe-action-item> </uni-swipe-action> <!-- 禁止滑动 --> <uni-swipe-action> <uni-swipe-action-item :disabled="true" :right-options="options"> <view>SwipeAction 根底应用场景</view> </uni-swipe-action-item> </uni-swipe-action> <!-- 按组应用 --> <uni-swipe-action> <uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, 0)"> <view style="height: 50px;">item1</view> </uni-swipe-action-item> <!-- <uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, 1)"> <view>item2</view> </uni-swipe-action-item> <uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, 2)"> <view>item3</view> </uni-swipe-action-item> --> </uni-swipe-action> </view></template> ...

SPN(Service Principal name)服务器主体名称。SPN 是服务在应用 Kerberos 身份验证的网络上的惟一标识符，它由服务类、主机名和端口组成。在应用 Kerberos 身份验证的网络中，必须在内置计算机帐户（如 NetworkService 或 LocalSystem）或用户帐户下为服务器注册 SPN。对于内置帐户，SPN 将主动进行注册。然而，如果在域用户帐户下运行服务，则必须为要应用的帐户手动注册SPN。 客户端连贯Sqlserver实例报SPN谬误的解决办法1、先登录Sqlserver实例服务器执行setspn -L dai\sqlprocess |find "machine name"查看相干Sqlserver实例对应的服务器信息,看是否有有效信息,有有效信息或反复信息则应用setspn -D删除它2、再通过Microsoft Kerberos Configuration Manager for SQL Server客户端工具，连贯相干Sqlserver实例的服务器，只输出服务器名即可，查看相干服务器是否失常3、最初应用setspn -D、setspn -A重建该Sqlserver实例对应服务器的所有SPN信息，应用setspn时须要administrator模式运行cmd4、换一个客户端机器试试，有时是某个客户端机器本身无奈取得域、dns、dhcp服务器上的信息，或该机器还没及时同步到域、dns、dhcp服务器上的信息，连贯Sqlserver也会报SPN谬误5、如果服务器有别名，而后AG的监听应用了别名，则必须应用服务器别名alias注册到spn中，即setspn -A aliasname:1433 dai\sqlprocess6、邮件报警Server Name对应DBPROD2示意DBPROD2的spn出了问题，对应DBPROD2\BI1示意DBPROD2\BI1的spn出了问题，DBPROD2可能是别名也可能是服务器名7、重建SPN后，如果没有及时失效，可能须要等等过一会才会失效。8、最好的验证办法就是，间接点击某个linked server，看是否连贯测试胜利，如下示意DBDEV1拜访不了12.2.37.123对应的linked server。DBDEV1 Logon Login failed for user 'NT AUTHORITY\ANONYMOUS LOGON'. Reason: Could not find a login matching the name provided. [CLIENT:12.2.37.123]9、linked server报错，Cannot generate SSPI context，是因为netlogon服务起不来导致，computer management--local user and groups--groups--adminstrator组上面的用户都是一些阿拉伯数字，看不到域用户。netlogon起不来是因为workstation起不来，而workstation起不来，是因为应用了local system account，应用network service用户并保留明码框为空即可，这种状况下，kerberos外面输出这台服务器都无奈登录，会报错：The was an issue with accessing UserAccount information from the system10、linux服务器拜访sqlserver实例报错SSPI Provider: Server not found in Kerberos database (851968) (SQLDriverConnect)解决办法1：个别windows服务器拜访sqlserver实例，在SPN外面写的是sqlserver实例对应的服务器名称，linux的话，看linux配置的字符串，如果字符串外面是实例名称，则须要把实例名称写入SPN，比方开发的配置文件写的是sqlserver实例名称ibdwonstagedbalias，该服务器名称stagingdbaws1，SPN外面的信息只有服务器stagingdbaws1名称，增加实例名称到SPN即可setspn -A MSSQLSvc/ibdwonstagedbalias.d.com:1433 dai\sqlprocesssetspn -A MSSQLSvc/ibdwonstagedbalias.d.com dai\sqlprocess解决办法2：如果不是以上1的情景，那么起因可能是linux服务器上crontab服务呈现问题导致crontab的外面游戏的credential-renew.sh没有运行，能够通过less /var/log/cron |grep "credential-renew.sh"查看这个crontab的运行记录，credential-renew.sh可执行文件外面命令是kinit解决办法3：如果不是以上1、2的情景，通过date查看linux服务器工夫，如果是linux服务器的工夫和域控工夫不一样，这个时候在linux服务器上顺次执行systemctl status ntpd、systemctl stop ntpd、ntpdate 12.2.10.66(域控服务器ip)、systemctl start ntpd ...

在SqlServer 2016中，当咱们要给一个长度超过1700的列创立索引时，数据库会通知咱们为这个列建索引会超过限度，而include的列是不在这个限度外面的。 create table t1(hid int,hname varchar(4000),hname1 varchar(4000))create index ind_hname on t1(hname) --正告Warning! The maximum key length for a nonclustered index is 1700 bytes. The index 'ind_hname' has maximum length of 4000 bytes. For some combination of large values, the insert/update operation will fail.create index ind_hname on t1(hid) include(hname) --不报错，失常创立，索引键列是hid，蕴含列是hname 官网文档的说法：通过蕴含非键列，能够创立笼罩更多查问的非汇集索引。 这是因为非键列具备下列长处：1、它们能够是不容许作为索引键列的数据类型。2、在计算索引键列数或索引键大小时，数据库引擎不思考它们。当查问中的所有列都作为键列或非键列蕴含在索引中时，带有蕴含性非键列的索引能够显著进步查问性能。 这样能够实现性能晋升，因为查问优化器能够在索引中找到所有列值；不拜访表或汇集索引数据，从而缩小磁盘 I/O 操作。 以上2点的集体了解：1、它们能够是不容许作为索引键列的数据类型。比方varchar(2000)超过1700不能做索引键列，然而varchar(2000)能够作为蕴含列2、index key size索引键大小是指索引键蕴含的所有字段的长度总和的限度，比方我有一个表create table table1 (col1 varchar(500), col2 varchar(500),col3 varchar(500), col4 varchar(500));因为indexed key size的限度是1700， 所以create index ind_t1 on table1(col1, col2,col3)没有问题,因为col1+col2+col3=1500<1700，然而create index ind_t2 on table1(col1, col2,col3,col4)有问题，因为col1+col2+col3+col4=2000>1700,然而咱们能够这样create index ind_t3 on table1(col1, col2,col3) include (col4)，即把col4放入蕴含列，它就不占索引键ind_t3的大小 ...

Coinciding with the new native data dictionary in MySQL 8.0, we have made a number of useful enhancements to our INFORMATION_SCHEMA subsystem design in MySQL 8.0. In this post I will first go through our legacy implementation as it has stood since MySQL 5.1, and then cover what’s changed. 与MySQL 8.0原生数据字典统一，在MySQL 8.0的 INFORMATION_SCHEMA 子系统设计中，咱们做了一些很有用的加强。在这篇文章中，我将会介绍自MySQL 5.1以来的旧的实现形式，而后介绍咱们做了什么扭转。 Background INFORMATION_SCHEMA was first introduced into MySQL 5.0, as a standards compliant way of retrieving meta data from a running MySQL server. When we look at the history of INFORMATION_SCHEMA there have been a number of complaints about the performance of certain queries, particularly in the case that there are many database objects (schemas, tables etc). ...

一、背景形容在版本开发中，时间段大抵的划分为：需要，开发，测试； 需要阶段：了解需要做好接口设计；开发阶段：实现性能开发和对接；测试上线：自测，提测，修复，上线；实际上开发阶段两个外围的工作，开发和流程自测，自测的基本目标是为本人提前解决可能呈现的问题；如果短少自测和提测两个关键步骤，那么问题就会被传递给更多的用户，产生更多的资源耗费； 自测是于开发而言，提测是对业余的测试人员而言，如果尽可能在自测阶段就发现问题，并解决问题，那么一个问题就不会影响到团队合作上的更多人员，如果一个简略的问题回升到团队合作层面，很可能会导致问题自身被放大。 工欲善其事必先利其器，开发如果要做好自测流程，学会应用工具提高效率是非常要害的，自测的关键在于发现问题和解决问题，所以抉择好用和高效的工具能够极大的升高自测的工夫耗费。 上面围绕几个本人开发过程中罕用的测试工具和伎俩，做简略的总结，不在于比照形式的好坏，存在即正当，在不同场景中对正当伎俩的抉择，疾速解决问题才是基本目标。 二、PostMan工具PostMan很罕用的接口测试工具，开发过程中疾速测试接口，功能强大并且简略不便，岂但能够单个接口测试，也能够对接口分块治理批量运行： 整体来说工具比拟好用，适应于开发阶段的接口疾速测试，或者在解决问题的过程中单个接口的测试，同时对测试游戏参数有存储和记忆能力，这也是受欢迎的一大起因。 然而该工具不适应于简单的流程化测试，例如须要依据上次接口的响应报文做别离解决，或者下次申请须要填充某个接口响应的数据。 三、Swagger文档Swagger治理接口文档，是当下服务中很罕用的组件，通过对接口和对象的简略正文，疾速生成接口形容信息，并且能够对接口发送申请，帮助调试，该文档在前后端联调中极大的提高效率。 接口文档的治理自身是一件麻烦事，接口通常会依据业务一直的调整，如果独自保护一份接口文档，须要付出很多工夫老本，并且容易出问题，利用swagger就能够防止这个问题。 借助swagger注解标记对象 @TableName("jt_activity")@ApiModel(value="流动PO对象", description="流动信息表【jt_activity】")public class Activity { @ApiModelProperty(value = "主键ID") @TableId(type = IdType.AUTO) private Integer id; @ApiModelProperty(value = "流动主题") private String activityTitle; @ApiModelProperty(value = "分割号码") private String contactPhone; @ApiModelProperty(value = "1线上、2线下") private Integer isOnline; @ApiModelProperty(value = "举办地址") private String address; @ApiModelProperty(value = "主办单位") private String organizer; @ApiModelProperty(value = "创立工夫") private Date createTime;}1.借助swagger注解标记接口 @Api(tags = "活动主体接口")@RestControllerpublic class ActivityWeb { @Resource private ActivityService activityService ; @ApiOperation("新增流动") @PostMapping("/activity") public Integer save (@RequestBody Activity activity){ activityService.save(activity) ; return activity.getId() ; } @ApiOperation("主键查问") @GetMapping("/activity/{id}") public Activity getById (@PathVariable("id") Integer id){ return activityService.getById(id) ; } @ApiOperation("批改流动") @PutMapping("/activity") public Boolean updateById (@RequestBody Activity activity){ return activityService.updateById(activity) ; }}1. ...

什么是跨域要理解跨域，先要晓得同源策略。同源策略是由 Netscape 公司提出的一个驰名的安全策略，所有反对 JavaScript 的浏览器都会应用这个策略。所谓同源是指：协定，域名，端口 全副雷同。浏览器从一个域名的网页去申请另一个域名的资源时，协定，域名，端口任意不同，都会呈现跨域问题。 事实工作开发中常常会有跨域的状况。因为公司会有很多我的项目，也会有很多子域名，各个我的项目或者网站之间须要互相调用对方的资源，所以跨域申请是防止不了的 解决跨域的几种计划办法一：注解在Spring Boot 中给咱们提供了一个注解 @CrossOrigin 来游戏实现跨域，这个注解能够实现办法级别的细粒度的跨域管制。咱们能够在类或者方增加该注解，如果在类上增加该注解，该类下的所有接口都能够通过跨域拜访，如果在办法上增加注解，那么仅仅只限于加注解的办法能够拜访。示例： @RestController @RequestMapping("/user") @CrossOrigin public class UserController { @Autowired private UserService userService; @RequestMapping("/findAll") public Object findAll(){ return userService.list(); } } 办法二：实现 WebMvcConfigurer这里能够通过实现 WebMvcConfigurer 接口中的 addCorsMappings() 办法来实现跨域。 @Configuration public class WebConfig implements WebMvcConfigurer { /** * 跨域反对 * @param registry */ @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowCredentials(true) .allowedMethods("GET", "POST", "DELETE", "PUT") .allowedHeaders(*) .maxAge(3600 * 24); } }addMapping：配置能够被跨域的门路，能够任意配置，能够具体到间接申请门路。allowedOrigins：容许所有的申请域名拜访咱们的跨域资源，能够固定单条或者多条内容，如：" "，只有百度能够拜访咱们的跨域资源。allowCredentials： 响应头示意是否能够将对www.pizei.com申请的响应裸露给页面。返回true则能够，其余值均不能够allowedMethods：容许输出参数的申请办法拜访该跨域资源服务器，如：POST、GET、PUT、OPTIONS、DELETE等。allowedHeaders：容许所有的申请header拜访，能够自定义设置任意申请头信息，如："X-YAUTH-TOKEN"maxAge：配置客户端缓存预检申请的响应的工夫（以秒为单位）。默认设置为1800秒（30分钟）。 ...

在Java开发过程中咱们会须要应用到一些SpringBoot的设置性能，上面就我来教大家如何去批改这些罕用的配置。 一. 批改端口号和拜访门路 在Spring Boot 我的项目中会应用一个全局的配置文件application.properties 或者是 application.yml,该文件会寄存在 resources 目录下或者类门路下的 /config 目录中,个别咱们都放到 resources 下. 1.创立application.properties文件 咱们联合之前的章节，创立一个SpringBoot我的项目,而后再该项目标src/main/resource[游戏](http://www.cungun.com)目录下，创立一个配置文件application.properties.1 2. 批改 Tomcat 的端口为 8088,并将默认的拜访门路 "/" 批改为 "oa" 而后咱们就能够在 application.properties 中增加如下配置了:www.cungun.com server.port=8088 server.servlet.context-path=/oa 或在 application.yml 中增加: server: port: 8088 servlet： context-path: /oa 3.创立一个Controller2 4. 测试成果: 我的项目启动后，控制台成果：3 二. 日志配置 Spring Boot 对各种日志框架都做了反对,咱们能够通过配置来批改默认的日志的配置. 默认状况下,Spring Boot 应用 Logback 作为日志框架. application.properties配置文件 logging.file.path=../logs/spring-boot-hello.log logging.level.org.springframework.web=DEBUG application.yml配置文件3 4 而后在我的我的项目所在盘符下，就能够看到有一个logs日志目录，寄存了本我的项目的日志信息5 三.主动配置再剖析 1.主动配置 Spring Boot主动配置(auto-configuration)性能，会尝试依据咱们增加的jar依赖，主动的配置Spring利用。比方在classpath下存在HSQLDB，并且咱们没有手动配置任何数据库连贯的beans，那么Spring Boot将主动配置一个内存型(in-memory)的数据库。 2.主动配置的非侵入性 而且主动配置（Auto-configuration）是非侵入性的，任何时候你都能够定义本人的配置类来替换主动配置的特定局部。例如，如果你增加本人的DataSource bean，默认的内嵌数据库反对将不被思考。 3.主动配置的实现形式 实现主动配置有两种可选形式，别离是将@EnableAutoConfiguration或@SpringBootApplication注解增加到@Configuration类上。 留神： 咱们只应该增加一个主动配置的注解，@EnableAutoConfiguration或者@SpringBootApplication，通常倡议将它增加到主配置类(primary @Configuration)上。 以上就是几个SpringBoot罕用配置的批改教程了，心愿能帮到大家。

Flink窗口背景 Flink认为Batch是Streaming的一个特例，因而Flink底层引擎是一个流式引擎，在下面实现了流解决和批处理。而Window就是从Streaming到Batch的桥梁。艰深讲，Window是用来对一个有限的流设置一个无限的汇合，从而在有界的数据集上进行操作的一种机制。流上的汇合由Window来划定范畴，比方“计算过来10分钟”或者“最初50个元素的和”。Window能够由工夫（Time Window）（比方每30s）或者数据（Count Window）（如每100个元素）驱动。DataStream API提供了Time和Count的Window。 一个Flink窗口利用的大抵骨架构造如下所示： // Keyed Windowstream .keyBy(...) <- 依照一个Key进行分组 .window(...) <- 将数据流中的元素调配到相应的窗口中 [.trigger(...)] <- 指定触发器Trigger（可选） [.evictor(...)] <- 指定清除器Evictor(可选) .reduce/aggregate/process() <- 窗口处理函数Window Function// Non-Keyed Windowstream .windowAll(...) <- 不分组，将数据流中的所有元素调配到相应的窗口中 [.trigger(...)] <- 指定触发器Trigger（可选） [.evictor(...)] <- 指定清除器Evictor(可选) .reduce/aggregate/process() <- 窗口处理函数Window FunctionFlink窗口的骨架构造中有两个必须的两个操作： 应用窗口分配器（WindowAssigner）将数据流中的元素调配到对应的窗口。当满足窗口触发条件后，对窗口内的数据应用窗口处理函数（Window Function）进行解决，罕用的Window Function有reduce、aggregate、process滚动窗口 基于工夫驱动将数据根据固定的窗口长度对数据进行切分，滚动窗口下窗口之间之间不重叠，且窗口长度是固定的。咱们能够用TumblingEventTimeWindows和TumblingProcessingTimeWindows创立一个基于Event Time或Processing Time的滚动工夫窗口。窗口的长度能够用org.apache.flink.streaming.api.windowing.time.Time中的seconds、minutes、hours和days来设置。 //要害解决案例KeyedStream<Tuple2, Tuple> keyedStream = mapStream.keyBy(0);// 基于工夫驱动，每隔10s划分一个窗口WindowedStream<Tuple2, Tuple, TimeWindow> timeWindow =keyedStream.timeWindow(Time.seconds(10));// 基于事件驱动, 每相隔3个事件(即三个雷同key的数据), 划分一个窗口进行计算// WindowedStream<Tuple2, Tuple, GlobalWindow> countWindow =keyedStream.countWindow(3);// apply是窗口的利用函数，即apply里的函数将利用在此窗口的数据上。timeWindow.apply(new MyTimeWindowFunction()).print();// countWindow.apply(new MyCountWindowFunction()).print();基于事件驱动当咱们想要每100个用户的购买行为作为驱动，那么每当窗口中填满100个”雷同”游戏元素了，就会对窗口进行计算，很好了解，上面是一个实现案例 public class MyCountWindowFunction implements WindowFunction<Tuple2, String, Tuple, GlobalWindow> { ...

PN(Service Principal name)服务器主体名称。SPN 是服务在应用 Kerberos 身份验证的网络上的惟一标识符，它由服务类、主机名和端口组成。在应用 Kerberos 身份验证的网络中，必须在内置计算机帐户（如 NetworkService 或 LocalSystem）或用户帐户下为服务器注册 SPN。对于内置帐户，SPN 将主动进行注册。然而，如果在域用户帐户下运行服务，则必须为要应用的帐户手动注册SPN。 客户端连贯Sqlserver实例报SPN谬误的解决办法1、先登录Sqlserver实例服务器执行setspn -L dai\sqlprocess |find "machine name"查看相干Sqlserver实例对应的服务器信息,看是否有有效信息,有有效信息或反复信息则应用setspn -D删除它2、再通过Microsoft Kerberos Configuration Manager for SQL Server客户端工具，连贯相干Sqlserver实例的服务器，只输出服务器名即可，查看相干服务器是否失常3、最初应用setspn -D、setspn -A重建该Sqlserver实例对应服务器的所有SPN信息，应用setspn时须要administrator模式运行cmd4、换一个客户端机器试试，有时是某个客户端机器本身无奈取得域、dns、dhcp服务器上的信息，或该机器还没及时同步到域、dns、dhcp服务器上的信息，连贯Sqlserver也会报SPN谬误5、如果服务器有别名，而后AG的监听应用了别名，则必须应用服务器别名alias注册到spn中，即setspn -A aliasname:1433 dai\sqlprocess6、邮件报警Server Name对应DBPROD2示意DBPROD2的spn出了问题，对应DBPROD2\BI1示意DBPROD2\BI1的spn出了问题，DBPROD2可能是别名也可能是服务器名7、重建SPN后，如果没有及时失效，可能须要等等过一会游戏才会失效。8、最好的验证办法就是，间接点击某个linked server，看是否连贯测试胜利，如下示意DBDEV1拜访不了12.2.37.123对应的linked server。DBDEV1 Logon Login failed for user 'NT AUTHORITY\ANONYMOUS LOGON'. Reason: Could not find a login matching the name provided. [CLIENT:12.2.37.123]9、linked server报错，Cannot generate SSPI context，是因为netlogon服务起不来导致，computer management--local user and groups--groups--adminstrator组上面的用户都是一些阿拉伯数字，看不到域用户。netlogon起不来是因为workstation起不来，而workstation起不来，是因为应用了local system account，应用network service用户并保留明码框为空即可，这种状况下，kerberos外面输出这台服务器都无奈登录，会报错：The was an issue with accessing UserAccount information from the system10、linux服务器拜访sqlserver实例报错SSPI Provider: Server not found in Kerberos database (851968) (SQLDriverConnect)解决办法1：个别windows服务器拜访sqlserver实例，在SPN外面写的是sqlserver实例对应的服务器名称，linux的话，看linux配置的字符串，如果字符串外面是实例名称，则须要把实例名称写入SPN，比方开发的配置文件写的是sqlserver实例名称ibdwonstagedbalias，该服务器名称stagingdbaws1，SPN外面的信息只有服务器stagingdbaws1名称，增加实例名称到SPN即可setspn -A MSSQLSvc/ibdwonstagedbalias.d.com:1433 dai\sqlprocesssetspn -A MSSQLSvc/ibdwonstagedbalias.d.com dai\sqlprocess解决办法2：如果不是以上1的情景，那么起因可能是linux服务器上crontab服务呈现问题导致crontab的外面的credential-renew.sh没有运行，能够通过less /var/log/cron |grep "credential-renew.sh"查看这个crontab的运行记录，credential-renew.sh可执行文件外面命令是kinit解决办法3：如果不是以上1、2的情景，通过date查看linux服务器工夫，如果是linux服务器的工夫和域控工夫不一样，这个时候在linux服务器上顺次执行systemctl status ntpd、systemctl stop ntpd、ntpdate 12.2.10.66(域控服务器ip)、systemctl start ntpd ...

最近对onos进行了二次开发，次要实现了Juniper路由器的 driver开发。在Driver中利用NETCONF协定读取并批改路由器配置、生成NETCONF命令、并下发到路由器是Driver开发的重要局部。开发过程中，咱们研读了onos里NETCONF相干的代码，理解设施是如何进行连贯，session是如何创立，命令是如何发送的。在这里分享给大家。 一、后期筹备 要进行设施的连贯，有两个很重要的前提。一个是物理设施能够被onos控制器所辨认。第二个是该设施对应的驱动曾经在控制器中加载。只有这两个前提条件被满足，onos能力与设施进行连贯，从而下发管制命令。 对于驱动是如何加载的剖析，咱们将会在后续的文章中进行介绍。 二、设施连贯的建设 进入正题，当控制器要对具体的设施进行管制时，第一步要做的就是与该设施进行连贯。 首先进入的是org.onosproject.net.device.impl.DeviceManager的deviceConnected办法。 1、依据设施所属的BasicDeviceConfig取得设施的根本配置。 2、依据传进来的deviceDescription和取得的配置信息从新更新deviceDescription并且创立role（master、none、standby等） 3、调用applyRole(deviceId,role)将设施与role绑定。须要留神的是，当调用完这个办法之后就曾经创立了onos与设施的连贯，并将创立的session保存起来，不便当前调用（具体的实现请往下看）。 4、将device的信息存入store中。 走到这一步，onos就实现了与设施的连贯，当须要对设施发送命令时，只有找到对应的session就能够进行发送了。 从下面的剖析咱们晓得applyRole是一个很重要的办法。接下来咱们就剖析一下applyRole是如何实现上述的性能。 从下面的源码中咱们看到，在applyRole函数中最要害的就是调用了DeviceProvider的roleChanged(deviceId,newRole)函数。因为DeviceProvider是一个接口，它具体实现的类是NetconfDeviceProvider，对应的函数是Rolechanged。 能够看出，在roleChanged函数中，依据role的类型进行不同的解决。特地留神的是，当role显示为master时，通过initiateConnection函数调用NetconfControllerImpl类的connectDevice(deviceId)办法，实现NetconfDeviceInfo和NetconfDevice 的创立。并实现与设施的连贯。 上面是NetconfControllerImpl类中connectDevice(deviceId)函数的具体代码： 首先通过deviceId从deviceService中取得username、password等信息。而后依据失去的用户信息以及之前存储的设施信息生成NetconfDeviceInfo。再依据生成的NetconfDeviceInfo，最初通过createDevice函数调用deviceFactory的createNetconfDevice办法生成NetconfDevice，同时与该设施进行连贯。 createNetconfDevice办法的具体实现在NetconfControllerImpl类中。在该办法中他调用了DefaultNetconfDevice的构造函数，创立了NetconfDevice。从下图构造函数代码中，咱们能够看见，零碎在创立NetconfDevice的同时，也创立了netconfSession，并将www.sangpi.com作为netconfSession作为Device的一个属性保存起来。当用户须要与某设施进行交互时，只须要找到对应的Device对象，就能取得与该设施进行交互的session。 【留神】以下就是onos与device进行连贯的具体代码。 与DeviceFactory一样，SessionFactory的createNetconfSession函数，也是调用了NetconfSessionImpl的构造函数，进行netconfSession的创立。 与设施进行连贯的操作是通过NetconfSessionImpl类startConnection函数实现的。 1、依据deviceInfo的ip和port的信息构建connection。 2、调用connect函数游戏进行是否连贯 3、依据deviceinfo中的username等信息，看用户是否被受权。 4、如果用户被受权则调用startSshSession 在startSshSession中，创立Stream线程为当前的交换提供服务。同时向设施发送hello的NETCONF命令，实现两个设施间所反对性能的同步，为当前应用NETCONF命令进行交换打下基础。 至此onos就实现了与设施的连贯，并将创立的session保留在netconfController中。在下一节中咱们将介绍如何应用创立的session进行命令的发送。 三、NETCONF命令的发送 当控制器与设施建设好连贯当前，咱们就能够通过控制器想设施发送命令了。 本文以onos中的device-configuration命令为例，解说netconf命令是如何下发，同时控制器是如何取得路由器返回信息的。 3.1 NETCONF命令发送 当用户在onos的终端输出device-configuration命令当前，就进入了org.onosproject.cli.net.DeviceConfigGetterCommand中。 零碎依据具体的配置文件，找到ConfigGetter接口的具体实习类——NetconfConfigGetter。 在上一节咱们介绍过，在NetconfControllerImpl的createDevice函数中，零碎将生成的Device放入到了DevicesMap中，不便日后应用。 所有当须要发送命令的时候，零碎先从NetconfController里的DevicesMap中取得对应的Device，而后依据失去的Device找到对应的NetconfSession。 在取得session当前，依据用户传入的信息构建对应的NETCONF命令。并通过NetconfSessionImpl中的sendRequest函数将命令发送给设施。 在sendRequest中，先对传入的request格局进行查看，确保合乎NETCONF命令的标准。 确保request符合规范当前，应用request函数将request发送给设施。同时返回CompletableFuture futureReply。futureReply次要是用来读取设施返回的信息。如果设施无奈在规定的工夫内返回信息，则零碎会抛出异样。 上面让咱们看一下onos是如何发送信息的。 进入到NetconfSessionImpl的request函数： 3.2 设施返回信息读取 当NetconfStreamThread对象中的run函数承受到设施返回的信息当前，会对信息进行解析生成事件，发送给监听器，并将信息传播给CompletableFuture。 此时在主线程的sendRequest函数中，通过调用CompletableFuture的get办法取得返回信息。 至此，NETCONF命令的下发和信息的返回过程就完结了。 不晓得我有没有讲清楚，欢送大家拍砖探讨。

对于mysql load语句在binlog中的记录形式： 整顿自 实战45讲+本人的一些了解 一：binlog_format=statement 这个 load 语句记录到 binlog 里当前，怎么在备库重放呢? 因为 /server_tmp/t.csv 文件只保留在主库所在的主机上，如果只是把这条语句原文写到 binlog 中，在备库执行的时候，备库的本地机器上没有这个文件，就会导致主备同步进行。 所以，这条语句执行的残缺流程，其实是上面这样的。 主库执行实现后，将 /server_tmp/t.csv 文件的内容间接写到 binlog 文件中。 往 binlog 文件中写入语句 load data local infile ‘/tmp/SQL_LOAD_MB-1-0’ INTO TABLE db2.t。 把这个 binlog 日志传到备库。 备库的 apply 线程在执行这个事务日志时： a. 先将 binlog 中 t.csv 文件的内容读出来，写入到本地长期目录 /tmp/SQL_LOAD_MB-1-0 中; b. 再执行 load data 语句，往备库的 db2.t 表中插入跟主库雷同的游戏数据。 执行流程如图 2 所示： 图 2 load data 的同步流程 留神，这里备库执行的 load data 语句外面，多了一个“local”。它的意思是“将执行这条命令的客户端所在机器的本地文件 /tmp/SQL_LOAD_MB-1-0 的内容，加载到指标表 db2.t 中”。 ...

对于大型的 Golang 我的项目往往我都会应用 Goland 这样的业余 IDE，然而因为我本地开发环境硬件资源偏低，不能很顺畅的应用 Goland，这个时候咱们能够思考应用 VSCode 来代替 Goland，而且 VSCode 还反对近程开发，所以我索性将开发环境放在近程机器上，而后用 VSCode 近程开发模式进行连贯，最次要的是大部分咱们的我的项目都是间接跑在 Linux 下面的，这个时候咱们就能够间接在 VSCode 中运行 Linux 环境上面的利用，而且咱们还能够很好地进行调试，也升高了本地的资源占用。 近程配置VSCode 的 Remote 性能由三个插件组成，别离实现三种不同场景的近程开发。 Remote - SSH：利用 SSH 连贯近程主机进行开发。Remote - Container：连贯以后机器上的容器进行开发。Remote - WSL：在Windows 10上，连贯子系统（Windows Subsystem for Linux）进行开发。咱们这里应用 SSH 模式进行配置，SSH 模式的原理如下图所示： 首先咱们这里在本地环境 Mac 上装置上 VSCode，近程开发的机器 IP 为 192.168.31.104，配置该节点能够本地通过 SSH 近程连贯。而后在 VSCode 中装置 Remote SSH 插件： 装置了 Remote - SSH 扩大后，你会在最右边看到一个新的状态栏图标。 近程状态栏图标能够疾速显示 VS Code 在哪个上下文中运行（本地或近程），点击该图标或者点击 F1 按键而后输出remote-ssh 便会弹出 Remote-SSH 的相干命令。 抉择 "Remote-SSH: Connect to Host" 命令，而后按以下格局输出近程主机的连贯信息，连贯到主机：user@hostname，而后依据提醒输出登录的明码。 ...

在JavaScript中，对于字符串的操作曾经非常便捷，不存在二进制数据类型，这些对字符串的简略操作和DOM操作基本上曾经能够满足前端的需要了，然而Node.js中提供了解决文件和I/O的性能，因而须要解决大量的二进制数据。而在Node.js中Buffer和Stream文件流对二进制数据的解决提供了很好的反对 Buffer缓存区 Buffer类是随着Node.js内核一起公布的外围库，用于反对I/O操作中挪动的数据处理。Buffer类为Node.js提供了一种存储原始数据的办法，该办法用来在内存中创立一个专门寄存二进制数据的缓存区，也就是说预留了肯定的存储空间在内存中，用来临时保留输出或者输入的数据，这样Node.js也能够解决二进制游戏数据 先说 二进制，二进制是计算机技术中宽泛采纳的一种数制，是用0和1两个数码来示意的数据，因为计算机只能辨认二进制数据，而人们很难看懂那些0和1的组合代表什么，所以就须要将二进制数据转换为人们可能辨认的字符，这就须要设置字符编码，通过字符编码找到相应的字符集进行转换，最远书的字符编码就是ASCII 再说 Buffer的构造函数 new Buffer(array) new Buffer(size) new Buffer (str[,encoding]) new Buffer (Buffer) new Buffer (arrayBuffer) 能够看出，参数别离是字节，数组，buffer对象，字符串等等 再比方 写入读取的语法： write(string[,offset[,length]][,encoding]) toString([encoding,state[,end]]) concat(list[,totallength]) Stream文件流 因为Buffer缓存区限度在1GB，超过1GB的文件无奈间接实现读写，在读写大文件时，如果读/写资源始终继续不停，那么Node.js就无奈持续其余的工作，为此，Node.js提供了Stream文件流模块 最现实的办法www.sangpi.com就是，读一部分，写一部分，不管文件的大小，只是工夫的问题，总会解决实现，这就须要用到流的概念 文件A通过流动的模式通过数据流管道，进入文件B中，采纳“读一部分。写一部分”的形式，流的益处就是，接管方能够提前解决，缩短工夫，进步速度，就像在线看视频，并不是全副缓存好了再播放，而是看一部分，缓存一部分 Stream四种流类型 Readable Writable Duplex Transform 而在应用大文件复制时，通过可读流的chunk参数传递数据，chunk就像接数据的盆，在可读流中还有一个函数叫 pipe()，这个函数是一个很高效的文件解决形式，能够简化之前复制文件的操作，所以，应用pipe进行实现数据的读取和写入也是很重要的

进入挪动互联网时代，各种不同的挪动智能设施层出不穷，比如说智能机、平板电脑、可穿戴式设施等。据2017年8月第40次《中国互联网络倒退情况统计报告》的统计后果，截至2017年6月，我国网民规模达到7.51亿，其中挪动端网民达7.24亿，占比达96.3%，较2016年底增长了1.2个百分点，与此同时，应用台式电脑、笔记本电脑等终端上网的比例却有所下滑。这意味着网民的上网设施进一步向挪动端集中，挪动互联网主导地位进一步强化。但各种不同的挪动智能终端设备的屏幕大小和分辨率都是不尽相同的，而且即便是同一个设施，当用户旋转屏幕时，纵向和横向查看的屏幕尺寸也会有差别，所以如何使网页在不同的设施和不同的屏幕分辨率下都能达到现实的显示成果，使得用户不论通过什么终端都能达到现实的浏览和应用体验，是新型的网页设计与开发技术所要达到的需要。显然，传统固定布局的形式曾经无奈满足这种需要了，因而，当初越来越多的网站都曾经开始采纳响应式的思维来设计与开发网页。响应式网页设计曾经成为当今网页开发技术的新潮流。 响应式网页设计的产生 响应式网页设计，全称是Responsive Web Design，最早是由伊桑·马卡特（Ethan Marcotte）在2010年提出的一个概念，最次要的动机是“如何使得页面布局适应任何的浏览窗口”。响应式页面的设计理念是，页面的设计与开发该当可能依据用户的行为以及设施环境（包含零碎平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，也就是页面应该有能力去主动响应用户的设施环境。简而言之，这个概念指的就是网站的页面可能兼容多种不同的终端，依据不同的环境做出主动的响应及调整。 响应式网页开发的实现计划有很多，包含CSS媒体查问的应用、弹性网格和布局、流式图像等。无论用户应用的是哪种设施，响应式页面都应该可能主动切换分辨率、图片尺寸及相干脚本性能等，以实现主动的适应。 伊桑·马卡特在其集体网站上给出了响应式网页的简略示例。这个网站尽管简略，却具备了响应式网页的因素：主动适应、流式网格布局、流式图像显示等等。读者能够尝试浏览这个网页，通过手动拖动鼠标扭转浏览器窗口的大小，查看在不同浏览器窗口尺寸下页面显示的变动。能够看到，在不同的浏览器窗口尺寸下，网页的地址没有发生变化，但网页的布局显示却可能有所扭转，如图所示。 1 响应式和“自适应网页” 提到响应式网页，不得不提的就是另一个“自适应网页”的概念了。初学者对于这两个概念往往容易混同。响应式网页具备自适应的个性，是指页面能主动响应及适配用户的设施环境，但平时所说的“自适应网页”是否就是响应式网页呢？ 答案是否定的。适配不同浏览环境的技术有很多，而传统意义上的“自适应网页”尽管也能够针对不同的浏览环境做出主动调整，但其应用的并不一定是响应式网页的技术。比方晚期的一些网站或当初一些门户网站的首页，能够依据检测到的不同的客户端而提供不同的浏览网页，比方专门提供一个Android的版本，或者一个iPhone / iPad的版本等，这也是实现网站兼容不同终端的其中一种做法。事实上这种做法同时提供了多个不同的网页，益处是能够极大地保障不同环境下的显示成果，然而毛病也非常明显，就是在网站保护时须要同时兼顾多个不同版本的网页，而且保护的工作将会呈几何级数回升。如果这个网站有多个入口，还会大大地减少架构设计的复杂度。所以，这种应用不同页面来适配浏览条件的形式，往往比拟多见于网站的首页，因为如果网站的所有内容页都采纳这种形式，这个网站的构造将会变得十分臃肿。而相似这种跳转到不同地址、关上不同网页的适配 形式，并不能称为真正的响应式网页，只能叫作“自适应”的。 响应式网页的特点 响应式网页的核心思想，在于“一次设计，广泛实用”，强调的是让同一个地址的同一个网页主动地去适应不同的显示环境，并且可能依据屏幕的设置和布局须要，来主动调整游戏网页内容的显示。而响应式的网站，不论应用什么设施，关上及显示的都是同一个地址、同一个网页，只是这个网页能够通过主动地辨认屏幕宽度，对不同的应用环境做出相应的主动调整，从而造成网页的布局和内容展现在不同环境下时可能会有所不同。 开发响应式网页时，首先咱们须要扭转一下以往的观点，在开发时“以挪动设施优先”。为什么要抉择挪动优先呢？第一个起因就是当初挪动设施的使用率越来越高，而且随着挪动互联网技术的倒退，挪动端的利用将成为重点。 还有基于网站开发流程方面的思考。打个比方，设想一下咱们搬家的时候，如果咱们要把所有的货色从一个大房子搬到一个小房子，那么很有可能空间会比以前拥挤，而且如果货色太多放不下，可能要不得不舍弃掉一些货色，这种“舍弃”有时会是一个很艰巨的决定。例如在www.sangpi.com然而如果反过来，从一个小房子搬到一个大房子，那么空间会宽松很多。同样的情理，挪动端略微偏小的屏幕尺寸会使得空间比拟受限，那么就要求咱们在设计时思考把最重要的内容优先加载和展现，这样，即便前面迁徙到较大的屏幕，也能够保障整体的构造不会受到破坏，兴许为了页面的好看可能须要减少一些内容，但毕竟做加法会比做减法容易得多。而且因为大小、带宽等限度，挪动网页的设计绝大部分应该是内容性的设计，挪动优先准则下进步用户体验的法宝，就是“把最重要的货色放在最显眼的中央”。 在这里给出响应式网页的一些特点： （1）媒体查问技术（Media Query）。响应式网页往往蕴含多个媒体查问语句，用于适配不同的显示条件。 （2）流式网格布局（Fluid Grid Layout）。让网页元素来决定网格的大小和设计，并依据网页元素来决定所占用的网格地位尺寸。 （3）灵便的多媒体显示（Flexible Media）。依据不同设施、不同分辨率、不同网速等环境，来主动适配多媒体内容的显示。比方能够让同一个图像，在iPhone 6上显示“高清”的版本，而在iPhone 4上只显示“个别”的版本。 （4）高性能的JavaScript脚本。因为有些用户终端的运行条件无限，响应式网页里的脚本必定要思考运行效率的问题。当初已有一些较成熟的JavaScript框架，比方jQuery等，能大大改良脚本程序的运行性能和效率。

引言1.1. 编写目标HTML5 作为以后“最火”的跨平台、跨终端(硬件)开发语言，越来越受到前端开发者 的器重，无论是 PC 端还是以后“炽热”的挪动端，其前端开发人员的占比均越来越高。此 消彼长，HTML5 开发者的减少天然导致 WPF / Flex / QT 等前端技术开发人员的缩减。为了 解决前端“跨平台”的问题，并应答开发人员稀缺的困境，咱们迫切的须要抉择或更换新的 技术路线，而 HTML5 当为首选。本次测试目标是为了验证应用 HTML5 作为前端技术路线，能 否满足大屏(高分辨率，超过 8K)可视化的展现需要。1.2. 测试背景因为 WPF 技术越来越边缘化，开发人员越来越少，老本越来越高，为了当前产品的降级 换代，咱们迫切需要寻找支流前端技术的替代品。目前来看HTML5技术可能是将来前端技术 的支流，其对于挪动端、桌面端、还有三维方面都具备良好的兼容性。1.3. 测试指标 测试各大支流浏览器，当图形工作站的输入分辨率超过8K时是否失常的显示WEB页面， 并晦涩的显示动画成果。 测试各大支流浏览器对脚本语言(JAVASCRIPT)的解析性能。 测试各大支流浏览器对HTML5个性的反对水平。 综合思考上述因素抉择最佳浏览器进行测试，得出结论:是否满足大屏展现需要。1.4. 专业术语 测试环境为了保障测试后果的有效性，联合现有的硬件资源，选取三台机器作为本次测试的硬件环境，别离蕴含一台笔记本、一台台式机、一台图形工作站。2.1. 笔记本配置类型 规格内存 16GB显卡 NVIDIA GTX1050 4GBCPU INTEL I7-7700HQ 2.8GHZ 4 外围 分辨率 1920 x 1080(2K)操作系统 Windows 10 专业版2.2. 台式机配置类型 规格内存 32GB显卡 AMD WX5100 8GBCPU INTEL I7-7700 3.6GHZ 4 外围 分辨率3840 x 2160(4K)操作系统 Windows 10 专业版 ...

一、需要剖析 理解用户对教育类app开发的需要，具体的产品性能需要、具体的产品设计需要、我的项目预期实现工夫、开发估算等。需要评估，包含对性能需要的技术需要、设计需要的可行性和教训、我的项目预期实现工夫和理论开发成本的评估。 二、项目经理打算制订 依据公司要求，制订我的项目打算，负责团队建设和正当分工。定期召开团队会议，理解我的项目停顿状况，解决问题，实时调整战略部署，及时向公司汇报停顿状况，把握市场动态、剖析市场需求，及时剖析反馈数据，调整策略布局，晓得实现各阶段工作，必要时参加布局、测试、销售策略。总之就是负责教育类app开发周期的监督管理。 三、交互设计 交互设计师将依据项目经理打算持续深入研究教育类app的低保真原型，优化细节并思考用户流程、信息架构、交互细节和页面元素。不过在许多公司中，这个角色可能被放弃，产品经理将一并承当这个角色。最终的输入是教育类app的高保真原型，高保真是一个有限靠近最终产品的线框，表白了产品的过程、逻辑、布局、视觉效果和操作状态。 四、视觉设计 依据教育类app的高保真原型界面，这一步不仅仅是丑化工作。视觉设计是须要对原型设计有粗浅的了解。须要了解整个页面的逻辑，从全局的角度进行可视化设计，波及到客户端及用户界面设计、批改、优化以及产品形象定位。 五、游戏零碎开发 程序员依据设计团队提供的标签、图纸搭建接口和提供的性能形容文档来开发性能，从而检测其余程序的完整性，进行批改和优化。依据测试人员的测试后果批改bug，并最终进行优化调整。最初输入的是一个可用的游戏类app平台零碎，如www.sangpi.com，能够通过简略的实例理解，能够进行游戏开发深刻。 六、测试 教育类app开发实现后，测试人员还须要测试教育类app的工作，查看教育类app中是否存在任何性能问题或者借口调用问题，并反馈给开发人员或设计人员进行更改。最终实现教育类app开发成品。

Go语言在Centos下的装置：留神，以下命令须要以root身份，或者sudo运行。阐明，如果要自定义装置地位的话，须要配置GOROOT环境变量，所以这里咱们采纳默认的目录进行装置，就能够不配置GOROOT环境变量了。 首先去官网下载go的安装包，这里用的是：go1.5.1.linux-amd64.tar.gz ■ 1，抉择装置门路因为默认的go门路，在/usr/local下， 所以用如下命令，解压创立/usr/local/gotar -C /usr/local -xzf go1.5.1.linux-amd64.tar.gz ■ 2，增加PATH环境变量 vi /etc/profile而后退出上面这行:export PATH=$PATH:/usr/local/go/bin ■ 3，建设Go的工作空间（workspace，也就是GOPATH环境变量指向的目录） GO代码必须在游戏工作空间内。工作空间是一个目录，其中蕴含三个子目录：src ---- 外面每一个子目录，就是一个包。包内是Go的源码文件pkg ---- 编译后生成的，包的指标文件bin ---- 生成的可执行文件。这里，咱们在/home目录下, 建设一个名为gopath(能够不是gopath, 任意名字都能够)的文件夹，而后再建设三个子文件夹(子文件夹名必须为src、pkg、bin)。如下图： ■ 4，设置GOPATH环境变量 vi /etc/profile而后退出上面这行:export GOPATH=/home/gopath保留后，执行以下命令，使环境变量立刻失效:source /etc/profile 至此，Go语言的环境曾经装置结束。上面开始 HelloWorld ■ 5，新建我的项目（利用包） 一般来说，倡议包名和目录名保持一致，所以，在src文件夹下，依照你想要创立的包名，组织文件夹门路。这里，咱们在/home/gopath/src上面，建设hello文件夹。例如：www.sangpi.com如果你的包名为 mygo/first/hello, 那么你就须要这样的目录构造：/home/gopath/src/mygo/first/hello如果思考到引入git版本库治理，那么能够建设这样的包名: github.com/mytest。 ■ 6，新建go代码 /home/gopath/src/hello上面，建设helloworld.go文件，并编辑，退出如下代码：package mainimport "fmt"func main() { fmt.Printf("Hello, world.\n")} ■ 7，编译生成go程序 在任意文件门路下，运行:go install hello 也能够进入我的项目(利用包)的门路，而后运行：go install 留神，在编译生成go程序的时，go实际上会去两个中央找程序包：GOROOT下的src文件夹下，以及GOPATH下的src文件夹下。 在程序包里，主动找main包的main函数作为程序入口，而后进行编译。 ■ 8，运行go程序 在/home/gopath/bin/下，会发现呈现了一个hello的可执行文件，用如下命令运行:./hello

canvas学习canvas长处是html5提出的新标签，可用于游戏轻量级画布，能够间接应用js做解决，不需减少额定插件，性能好，不卡顿，在手机中也很晦涩canvas毛病绘制图形，一旦绘制胜利，便将其像素化即canvas无奈在次失去这个图形，将其批改解决：canvas图形的挪动，必须依照清屏 > 更新 > 渲染的逻辑进行版本兼容问题：不兼容IE6、7、8，可通过在标签里边写入提醒文字，来做辨别，兼容的浏览器不会显示提醒文字 根本应用创立画布：<canvas height="200" width="400" id="myCanvas"> 以后浏览器版本不反对，请降级浏览器</canvas>通过height和width间接设置宽高(无需单位)，也能够通过css设置，然而会失真id属性用来惟一定位画布 获取画布：let canvas = document.getElementById("myCanvas") // 获取画布let ctx = canvas.getContext("2d") // 设置画布环境所有的图像绘制都基于canvas.getContext("2d")进行设置，和canvas标签无关基于画布绘图： 坐标原点在左上角// 填充ctx.fillStyle='red' // 设置色彩ctx.fillRect(100,200,300,400) // 绘制图像// 绘制ctx.strokeStyle = "grend"ctx.strokeRect(left,120,100,100)// 门路ctx.beginPath() // 创立一个门路ctx.moveTo(100,200)// 设置绘制初始点ctx.lineTo(200,300)// 绘制门路ctx.lineTo(180,360)ctx.lineTo(80,380)ctx.lineTo(140,330)ctx.closePath()// 关闭门路ctx.strokeStyle = "yellow"// 对已绘制门路进行渲染色彩ctx.stroke() // 绘制出门路// 圆弧ctx.beginPath()ctx.arc(100,100,80,0,4,false)// 直线ctx.globalAlpha = 0.3 // 直线的通明的，零到一之间ctx.lineWidth = 3 // 设置线的粗细ctx.lineCap = "butt" // 设置未关闭直线两端的款式ctx.lineJoin = "miter" // 设置直线的折点处的款式ctx.setLineDash = ([1,2,3,4]) // 设置虚线的直线线段款式ctx.strokeRect(20,20,100,100) // 以上边的虚线形成矩形ctx.lineDashOffset = 2 // 向左偏移2// 绘制文本ctx.textAlign="center" // 居中对齐ctx.strokeText("你好吖", 0, 100); // 在指定地位绘制内容// 线性突变let lnear = ctx.createLinearGradinent(0,0,100,100) // 突变方向lnear.addColorStop(0,"red") // 设置对应比例的色彩ctx.fillStyle = lnear // 将对应色彩渲染进去// 暗影ctx.shadowOffsetX = 2 // 暗影的x方向偏移为2ctx.shadowOffsetY = 2 // 暗影的y方向偏移为2ctx.shadowBlur = 10 // 暗影的含糊度为10ctx.shadowColor = "red" // 暗影的色彩为红色// 图片let image = new Image() // 实例化图片对象image.src = "图片地址" // 给实例赋地址image.onload = function(){ // 监听图片加载事件 ctx.drawImage(image,1,2,3,4,5,6,7,8) // 从图片1，2处开始切取宽为3，高为4的切片，放在画布的5，6处，设置宽为7，高为8}填充 ...

最近在看前端网页优化的文章， 来这里做个总结吧 ！优化， 为什么要做前端网页优化尼 ！ 还不是因为网页关上慢吗 ？ 他人的都是秒开，就咱家的10秒开， 为啥 ？ 浏览器对咱有意见 。。。。。。 好了， 废话不多说了，间接上干货。 #### 首先咱们来拆解下，页面加载到底慢在哪 ？ 白屏工夫首屏工夫页面加载时长其次咱们来看看 ，网页是如何展现到浏览器上的吧 。 1: WebView 初始化（个别耗时在400ms， 只有挪动端的hybrid） 2：DNS 服务器解析域名（耗时在150ms）3：建设TCP链接。（300ms）4：服务器响应，获取获取数据 ）5：解析获取到的html，生成DOM树，渲染到页面上白屏工夫个别指的就是 1 到 4的过程， 因为还在申请数据， 这个工夫页面是空白的 。 那咱们该如何优化尼 ： WebView初始化优化， 咱们是能够在关上app之后 ，做一个webview预加载的（后盾运行，先初始化好），当要用到的时候，在间接拿进去用就能够了，个别能够节俭200msDNS解析， 这里能够加一个dns预解析的 代码如下 这里选用http2.0；多路复用的， 同域名下多个申请，建设一次tcp链接就能够了，这步很要害了，下载速度跟你的资源大小有很大的关系。所以动态资源越小越好；比方：nginx服务器走gzip压缩，vue打包文件做路由懒加载（包切割）， 或者离线包 cnd服务，缓存 等等哈。这步的话 ， 次要防止重排。因为重排 渲染器须要从新计算dom树， 十分耗性能。嗨呀！ 写到这里 又词穷了， 那等我想想，今天再来写吧 ！

明天不唠嗑了； 直奔主题哈 ； 前言 浏览器缓存能够说是浏览器进步性能的一个简略高效的形式吧 ； 不仅进步了网页加载的速度，晋升用户的体验； 因为缓存文件能够反复的应用，还能够缩小带宽，缩小网络和服务器的压力； 对于一个数据申请能够简略为三个阶段： 浏览器发动申请，服务器解决并返回，浏览器承受并响应； 缓存次要是在前俩个阶段来解决！ 对应的尼： 就是一个强缓存和一个协商缓存了； 那什么是强缓存 ，什么又是协商缓存尼 ？ 强缓存：次要通过， cache-control和expires 来决定的。通知浏览器遇到该类申请，间接走缓存。协商缓存：通过： last-modified,etag ,来示意。当向服务器申请数据的时候，服务会拿工夫和etag 来比照下。 如果发现文件没有扭转，则返回304 通知浏览器走本地缓存。 否则失常返回 cache-control 字段在申请是cache-control 可选的字段有： expires字段 ； 设置过期工夫：如： 3d last-modified字段服务端在返回资源时 ，会在该资源最初的更改工夫通过last-modified返回给客户端。客户端在下次申请资源的时候会带上这个工夫，这个时候服务端会查看这个工夫跟服务端批改的工夫是否统一，如果统一则返回 304. 如果不统一则返回200 etag字段光通过 last-modified 来判断还是有缺点的，比方最初的工夫该了， 然而内容没有改 。这个时候咱们就能够通过应用etag 来判断服务器通过算法对内容进行计算， 获得一串值， 之后通过etag返回给客户端。下次客户端申请是同样带上etag 值， 给服务验证 。雷同的话返回304， 否则返回200.

作者：Anthony Gore译者：前端小智起源：vuejsdevelopers有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。 Vuex 是 Vue.js 生态系统中必不可少的工具。然而新接触 Vuex 的开发人员可能会被诸如“状态管理模式”这样的术语所排挤，并且对他们理论须要Vuex的目标感到困惑。 本文算是 Vuex的入门，当然也会 Vuex 的高级概念，并向大家展现如何在应用程序中应用 Vuex。 Vuex 解决的问题要了解Vuex，首先要了解它要解决的问题。 假如咱们开发了一个多用户聊天利用。界面有用户列表、私人聊天窗口、带有聊天记录的收件箱和告诉栏，告诉用户以后未查看的其余用户的未读音讯。 数以百万计的用户每天通过咱们的利用与数以百万计的其余用户聊天。然而，有人埋怨一个宜人的问题:告诉栏偶然会给出谬误的告诉。用户被告诉有一条新的未读音讯，但当他们查看时，它只是一条曾经被看过的音讯。 该作者所形容的是几年前 Facebook 开发人员在其聊天零碎中遇到的真实情况。 解决这一问题的过程中 开发人员创立名为 "Flux"的应用程序体系结构。 Flux 形成了Vuex，Redux 和其它相似库的根底。 FluxFacebook开发者为“僵尸告诉”这个问题，苦苦挣扎了一段时间。他们最终意识到，它的持久性不仅仅是一个简略的缺点——它指出了应用程序架构中的一些潜在缺点。 形象中最容易了解该缺点：当应用程序中有多个共享数据的组件时，它们互连的复杂性将减少到无奈预测或了解数据状态的境地。 因而，该应用程序无奈扩大或保护。 Flux 是一个模式，不是一个库。咱们不能去Github下载 Flux。它是一种相似MVC的设计模式。像Vuex和Redux这样的库实现Flux模式的形式与其余框架实现MVC模式的形式雷同。 事实上，Vuex并没有实现Flux的全副，只是一个子集。不过当初不要放心这个问题，咱们关注于了解它所遵循的要害准则。 准则1：繁多起源组件可能具备仅须要理解的本地数据。 例如，滚动条在用户列表组件中的地位可能与其余组件无关。 然而，要在组件之间共享的任何数据（即应用程序数据）都必须保留在一个独自的地位，与应用它的组件离开。 这个繁多地位称为 "store"。 组件必须从该地位读取应用程序数据，并且不能保留其本人的正本以避免抵触或一致。 import { createStore } from "vuex";// Instantiate our Vuex storeconst store = createStore({ // "State" 组件的应用程序数据 state () { return { myValue: 0 }; }});// 组件从其计算的属性拜访 state const MyComponent = { template: "<div>{{ myValue }}</div>", computed: { myValue () { return store.state.myValue; } } };准则2：数据是只读的组件能够从store中自在读取数据。 然而不能更改 store 中的数据，至多不能间接更改。 ...

el-table封装的组件在tab切换的状况下呈现header的高度50变100，变200，变30的状况，tab切换的时候多格tab下的table的表头是不同且有合并列的。解决：tab切换显示内容的时候用v-show

<div><el-table></el-table></div>1、div设置高度500（如果共计行高度50）el-table的共计行位于450-500的地位 2、div不设置高度el-table的共计行位于紧挨着el-table_body的上面

ReactiveCocoa（简称为RAC）,是由Github开源的一个利用于iOS和OS开发的新框架,Cocoa是苹果整套框架的简称，因而很多苹果框架喜爱以Cocoa结尾。ReactiveCocoa是一个高度形象的编程框架，它真的很形象，初看你不晓得它是要干嘛的，等你用上了之后，就发现，有了它你是想干嘛就干嘛，编码从未如此晦涩。 RAC全套教程点击获取 ReactiveCocoa是做什么的？ 说说 ReactiveCocoa 的作用； 在咱们iOS开发过程中，当某些事件响应的时候，须要解决某些业务逻辑,这些事件都用不同的形式来解决。比方按钮的点击应用action，ScrollView滚动应用delegate，属性值扭转应用KVO等零碎提供的形式。其实这些事件，都能够通过RAC解决ReactiveCocoa为事件提供了很多解决办法，而且利用游戏RAC处理事件很不便，能够把要解决的事件，和监听的事件的代码放在一起，这样十分不便咱们治理，就不须要跳到对应的办法里。十分合乎咱们开发中高聚合，低耦合的思维。一、面相对象：解决事件以过程为外围，一步一步的实现。 解释：用以前常说的怎么把大象放在冰箱外面为例，你要从面向过程去思考的话你就得一步一步的把这个整个过程拆分开去做。 **第一步：**把大象剁了（当然，只是这样说说而已，别真的这样做，咱们还是要爱护大象！只为解释一下这个面相过程的思维O(∩_∩)0）。**第二步：**把冰箱门关上。**第三步：**一块块的把大象放进去。**第四步：**把冰箱门关上，这就是面相过程你所须要思考的。二、面相对象：万物皆对象 同样以下面的过程为例，你须要思考的只是把冰箱关上，把大象放进去就行了，至于怎么放这些步骤你就不须要思考了，咱们只关怀对象，不关怀过程。 三、链式编程思维：关注于数据流和变动流传，是将多个操作通过点号(.)链接在一起成为一句代码,使代码可读性好。 像这样调用a(1).b(2).c(3) 代表：masonry框架。四、响应式编程思维：不须要思考调用程序，只须要晓得思考后果，相似于蝴蝶效应，产生一个事件，会影响很多货色，这些事件像流一样的流传进来，而后在游戏sangpi.com影响后果，借用面向对象的一句话，万物皆是流。 代表：KVO使用。五、函数式编程思维：例如函数用其余函数作为参数。 代表：ReactiveCocoa。 下面这么多，就把它的作用和它所用的编程思维做了一个类比和剖析。

明天的知识点 (2021.05.20) —— 第765天 (我也要出题)[html] 写出一个可滚动的区域，但要暗藏滚动条[css] 说说在Grid布局中grid-template-columns与grid-template-row中auto的解释[js] require如何同步加载模块？[软技能] 你有应用过HBuilder吗？你喜爱它还是vs code？为什么？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！ 欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！ 心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

PromisePromise 就像这个词的外表意识一样，示意一种承诺、允诺，会在前面给出一个后果，胜利 或者 失败。当初曾经成为了支流的异步编程的操作形式，写进了规范外面。 状态Promise 有且仅有三种状态： 待定（pending）: 初始状态，既没有被兑现，也没有被回绝。已兑现（fulfilled）: 意味着操作胜利实现。已回绝（rejected）: 意味着操作失败。其实我感觉这个模型还是挺简略，也很好了解。就如同，你跟你女朋友求婚，她跟你说她要考虑一下，今天能力给你答案，这就是承诺（promise）。同时，这也是一个期待的过程（pending），而后你就等，等到今天你女朋友给你回答，批准（fulfilled）或者回绝（rejected），如果批准就筹备结婚了，如果不批准就等下次再求婚，哈哈哈。 那状态要怎么扭转呢？Promise 的构造函数须要传入一个函数 executor ，这个函数须要两个入参别离是 resolve 和 rejected 两个函数，这两个办法次要是用来批改状态的。当咱们调用 resolve 函数的时候，Promise 的状态就变成 fulfilled 。当咱们调用 reject 函数的时候，Promise 的状态就变成 reject 。举个栗子： new Promise((resolve, reject) => { console.log("开始求婚。") console.log("。。。。。") console.log("考虑一下。") setTimeout(() => { if (isHandsome || isRich) { resolve('我批准！') } else { reject("回绝：咱们八字不合") } }, 2000)})这里还要留神一点，如果一个 promise 曾经被兑现（fulfilled）或被回绝（rejected），那么咱们也能够说它处于已敲定（settled）状态。链式调用这点跟 Rx 还是挺类似的，也是链式调用，这样的益处就是异步逻辑更加清晰，连贯，合乎直觉，防止了回调天堂。 咱们能够用 Promise.then()，Promise.catch() 和 Promise.finally() 这些办法将进一步的操作与一个变为已敲定状态的 Promise 关联起来。这些办法还会返回一个新生成的 Promise 对象，这个对象能够被非强制性的用来做链式调用，就像这样： const myPromise = (new Promise(myExecutorFunc)) .then(handleFulfilledA,handleRejectedA) .then(handleFulfilledB,handleRejectedB) .then(handleFulfilledC,handleRejectedC);// 或者，这样可能会更好...const myPromise = (new Promise(myExecutorFunc)) .then(handleFulfilledA) .then(handleFulfilledB) .then(handleFulfilledC) .catch(handleRejectedAny);咱们个别举荐应用第二种的写法，因为第一种写法如果在两头出错，在 .then 中解决完之后，会持续走下一个 .then 的 onfulfilled 函数，不太合乎直觉。当然，如果你有马上解决异样的需要也能够这样写。 ...

微信小程序开发内嵌h5开发心得受敌人委托给某公司开发微信小程序。原本是以原生开发、开发了一半，然而客户要求用h5开发，所以选用uniapp开发框架。之前没有微信小程序得开发教训；根本是对着文档、对着百度一步一步开发过去得，所以有必要总结一下一、事先筹备（1）小程序app申请 微信公众平台地址；根本就是对着腾讯要求进行填写审核 (2)抉择微信appid。开发治理抉择->开发设置 (3)下载微信开发者依据本人零碎状况下载即可 二、开发工作1、小程序开发用微信开发者工具新建我的项目，并输出申请得APPID批改微信小程序名称以及界面配置 开发标准和文档参考官网文档 之前是用userinfo受权，版本升级后用getUserProfile受权。附上代码index.wxml。template局部代码 <view wx:if="{{isHide}}"> <view wx:if="{{canIUse}}" > <view class='header'> <!-- <image src='/images/wx_login.png'></image> --> <icon class="icon-box-img" type="waiting" size="93"></icon> </view> <view class='content'> <view>申请获取以下权限</view> <text>取得你的公开信息(昵称，头像等)</text> </view> <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindtap='bindGetUserInfo'> 受权登录 </button> </view> <view wx:else>请降级微信版本</view></view>js代码次要用到getUserProfile、getStorageSync、login语法 var App = getApp()Page({ data: { //判断小程序的API，回调，参数，组件等是否在以后版本可用。 canIUse: false,//是否能够用getUserProfile isHide: false,//判断是否展现受权页面 }, onLoad: function () { var that = this; if (wx.getUserProfile) { this.setData({ canIUse: true }) } var user = wx.getStorageSync('user') || {}; var userInfo = wx.getStorageSync('userInfo') || {}; App.globalData.userInfo = userInfo;//缓存用户信息 App.globalData.userId = user.id;//用户id console.log('缓存的数据', user, userInfo) //未采取信息 if (user.id && userInfo.rawData) { wx.navigateTo({ url: "/pages/webview/index" }) // that.setData({ // isHide: false // }); // this.login(); } else { that.setData({ isHide: true }); } // // 查看是否受权 // wx.getSetting({ // success: function (res) { // if (res.authSetting['scope.userInfo']) { // wx.getUserProfile({ // success: function (res) { // App.globalData.userInfo = res; // // 用户曾经受权过,不须要显示受权页面,所以不须要扭转 isHide 的值 // // 我这里实现的是在用户受权胜利后，调用微信的 wx.login 接口，从而获取code // that.login() // } // }); // } else { // // 用户没有受权 // // 扭转 isHide 的值，显示受权页面 // that.setData({ // isHide: true // }); // } // } // }); }, //关上受权界面 bindGetUserInfo: function (e) { // debugger wx.getUserProfile({ desc: '受权登录', // 申明获取用户个人信息后的用处，后续会展现在弹窗中，请审慎填写 success: (res) => { App.globalData.userInfo = res; wx.setStorageSync('userInfo', res); this.setData({ isHide: false }); this.login() }, fail: () => { wx.showToast({ title: '已回绝小程序获取信息，将无奈进入小程序，请受权之后再进入',icon:'none'}); } }) }, login() { wx.login({ success: res => { // 获取到用户的 code 之后：res.code console.log("用户的code:" + res.code); // 能够传给后盾，再通过解析获取用户的 openid // 或者能够间接应用微信的提供的接口间接获取 openid ，办法如下： wx.request({ // 自行补上本人的 APPID 和 SECRET // url: 'https://api.weixin.qq.com/sns/jscode2session?appid=本人的APPID&secret=本人的SECRET&js_code=' + res.code + '&grant_type=authorization_code', url: 'xx', method: "post", header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { code: res.code, rawData: App.globalData.userInfo.rawData, secret: "f0a0818475ccd078edbcfde23a6bb02e", appId: "wx356c577df5a82dff" }, success: res => { // 获取到用户的 openid console.log("用户的openid:" + res.data.result.id); App.globalData.userId = res.data.result.id; wx.setStorageSync('user', res.data.result); this.setData({ isHide: false }); wx.navigateTo({ url: "/pages/webview/index" }) } }); } }); }})5、组件开发及援用 ...

前言流媒体协定多种多样，音视频编码格局更是繁多，要想在浏览器中失常浏览并非不容易。除开 WebRTC 这种浏览器曾经反对的协定，HLS、FLV、RTSP、RTMP、DASH 等协定都须要预处理，不过流程大抵都是： 通过 HTTP、WebSocket 等形式获取数据；解决数据，解协定、组帧等失去媒体信息及数据；封装成媒体片段，或解码成一帧画面；通过 video 或 canvas（WebGL）等进行播放。目前市面上也有一些前端解码的计划，如借助 WASM 的高性能调用 c 解码库，或者间接应用浏览器的 WebCodecs API 进行编解码......但都存在局限性，WebCodecs 仍是试验性功能；而 WASM 计划尽管冲破浏览器沙盒限度（能播放浏览器不反对的编码格局如H265等），但解码和浏览器原始解码之间仍有差距，并且因为只能走软解导致多路性能也吃不消。所以，市面上更多的是采纳另一种形式，解协定+封装+这篇文章的配角 Media Source Extensions（以下简称MSE）。 开始HTML5 标准容许咱们间接在网页中嵌入视频, <video src="demo.mp4"></video>但 src 指定的资源地址必须是一个残缺的媒体文件，如何在 Web 做到流式的媒体资源播放？MSE 提供了这样的可能性，先看下 MDN 对它对形容： 媒体源扩大 API（MSE） 提供了实现无插件且基于 Web 的流媒体的性能。应用 MSE，媒体串流可能通过 创立，并且能通过应用 <audio> 和 <video> 元素进行播放。正如下面所说，MSE 让咱们能够通过 JS 创立媒体资源，应用起来也非常不便： const mediaSource = new MediaSource();const video = document.querySelector('video');video.src = URL.createObjectURL(mediaSource);媒体资源对象创立结束，接下来就是喂给它视频数据（片段），代码看上去就像是： mediaSource.addEventListener('sourceopen', () => { const mime = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; const sourceBuffer = mediaSource.addSourceBuffer(mime); const data = new ArrayBuffer([...]); // 视频数据 sourceBuffer.appendBuffer(data);});此时，视频就能够失常播放了。要想做到流式播放，只须要不停的调用 appendBuffer 喂音视频数据就行了......但不禁有疑难， 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' 这段字符串什么意思？音视频数据又要从哪来的？ ...

明天的知识点 (2021.05.03) —— 第748天 (我也要出题)[html] 一个页面你感觉有多少种颜色搭配比拟正当？为什么？[css] 画一只航行中的小鸟[js] 请解释下1<2<3 和3>2>1的运算后果和思路[软技能] 你有常常和共事们组织户外活动吗？比方爬山，游泳等《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！ 欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！ 心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

html放个input就好<input type="checkbox" />款式是less的，能够本人转下css @act-color:#FFBA01;input[type=checkbox] { width: 16px; height: 16px; vertical-align: sub; overflow: visible; visibility: hidden; &:after { content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(153,153,153,0.9); visibility: visible; color:@act-color; line-height: 1; font-size:16px; text-align: center; cursor:pointer; } &:hover:after{ border-color:@act-color; } &:checked::after{ content: '\2714'; } }很简略，input外面放个after伪元素，代替本来的checkbox。原checkbox用visibility: hidden;暗藏掉。选中款式对应after的content: '\2714''\2714'对应打勾款式。 成果如下

HTML5是最新的HTML规范，是万维网联盟（W3C）和网络超文文本利用工作组（WHATWG）单干输入的。目前高版本浏览器曾经可用了，然而低版本浏览器未反对 HTML5 的文档类型是 <! doctype html>1、新增的语义化标签<header>：页眉，即为头部标签<nac>：导航栏标签<article>：内容标签<section>：定义文档某个区域<aside>：侧边栏标签<footer>：页脚，即尾部标签这些语义化标签是针对搜索引擎的，有利于SEO，能够屡次应用，倡议多应用这个，不要满屏都是div 2、多媒体标签视频标签<video src='文件地址' controls='controls'></video> 音频标签<audio src='文件地址' controls='controls'></audio> 3、新增的input、表单控件新增的input类型 重点记住：number、tel、search 新增type类型 autocomplete属性 默认是 autocomplete=on 即曾经关上，表单须要加上name属性，同时胜利提交 个别咱们都会设置 autocomplete="off" ，因为咱们不想让已经搜寻过的信息显示进去，爱护隐衷 4、两种存储HTML5为浏览器提供了两种数据存储计划：sessionStorage 和 localStorage sessionStoragesessionStorage 用于在本地存储一个会话中的数据，这些数据只有在同一个会话中的页面能力拜访，当会话完结后，数据也会随着销毁。因而 sessionStorage 不是一种长久化的本地存储，仅仅是会话级别的存储 localStoragelocalStorage 是一种长久化的本地存储，除非被动删除数据，否则数据是永远不会过期的 另外，localStorage是存储在Web服务器的 localStorage 属性容许在浏览器中存储 键值对（key-value）的数据，必须是以键值对的模式存储，而且必须是以字符串的模式存储 保留/写入数据： window.localStorage.setItem('key', 'value')读取数据： let getItem = window.localStorage.getItem('key')删除数据： window.localStorage.removeItem('key')革除所有内容： window.localStorage.clear()考点：1、如何解决HTML5新标签的浏览器兼容问题？IE8、IE7、IE6 反对用document.create Element 产生标签，能够利用这一个性让这些浏览器反对HTML5新标签 当然，最好的形式是间接应用水平的框架，应用最多的是html5shim框架，能够用 IE hack 引入框架 <！--[if 1t IE 9]><script>src="http://html5shim.googlecode.com/svn/trunk/htm15.js</script><！[end if]-->2、为什么HTML5外面不须要DTD（文档类型定义）？如果不放入 <! doctype html> 标签，会怎么？HTML5没有应用SGML或者XHTML，它是一个全新的类型，因而不须要参考DTD。对于HTML5，进须要搁置文档类型代码<! doctype html>，让浏览器可能辨认HTML5文档 所以不放入 <! doctype html> 标签，HTML5 不会工作，浏览器不能辨认出它是HTML文档，同时HTML5的标签将不能失常工作 3、HTML5 中的利用缓存是什么？HTML5 利用缓存的最终目标是帮忙用户离线浏览页面。换句话说，如果网络连接不可用，关上的页面就是来自浏览器缓存的，离线利用缓存能够帮忙用户达到这个目标 ...

======HTML HTML(Hyper Text Markup Language): 超文本 标记 语言超文本（文本，音频，图片，视频等），标记（<>),文件后缀为.html 为文档的一种，用来开发网页的语言。(1) <!DOCTYPE HTML>文档申明, 用来申明HTML文档所遵循的HTML标准和版本 下面是html5.0的申明, 也是目前最罕用的版本 (2) <html></html>根标签, 用于包裹所有的网页内容(除了文档申明) (3) <head></head>头局部, 用来寄存HTML文档的根本属性信息, 比方网页的题目, 文档应用的编码等, 这部分信息会被浏览器优先加载. (4) <body></body>体局部, 用来寄存可视化的网页内容. 即真正的网页数据 (5) <title></title>申明网页的题目 (6) <meta charset="utf-8" >用来告诉浏览器应用哪一个编码来关上HTML文档, 这个编码肯定要和文件保留时的编码保持一致, 才不会呈现中文乱码问题. 标签：标签上申明属性，属性不能独立存在，能够申明多个属性，属性的值用单引号或说双引号引起来,标签没内容能够写成自闭标签。

明天的知识点 (2021.04.25) —— 第740天 (我也要出题)[html] 应用html简略画一个外面放有笔的笔筒[css] 说说字体图标的三种形式有什么区别？（unicode/font-class/symbol）[js] 不平安的JSON值有哪些？[软技能] 你会常常加入户外运动吗？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！ 欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！ 心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

封装dialog组件前的插槽技术温习为什么要封装组件（组件化开发）组件化开发（封装组件）的益处益处不言而喻，能够减少代码的复用性、灵活性，从而进步开发效率。试想如果一个我的项目中在很多页面都能用到一个弹出框，若在每个页面都去写一套弹出框的构造款式和对应js的逻辑。这样的话，开发效率会大打折扣。毕竟当初产品经理都提倡麻利开发（跑得快游戏）。 组件化开发的了解假如咱们封装好一个公共的弹框组件，哪里须要应用就援用到哪里就行了。 什么？？？不同页面的弹出框有的数据不太一样？有的是新增数据弹出框、有的是批改数据弹出框、还有的是删除数据弹出框。没关系！依据弹出框文字不同，往里面传不同参就行了。比方新增弹出框，传入‘新增’二字；批改弹出框，就传入‘批改’二字,顺次类推。 什么？？？不同弹出框有的宽一点有的高一点款式稍微不同，没关系，应用深度作用域选择器/deep/去设置就行啦 什么？？？不同弹出框点击确认按钮，最终的业务逻辑不一样，有的是减少一条数据、有的是删除一条数据等。没关系组件间的数据传递，事件的相干触发的语法记住就行啦 封装组件比拟罕用的技术之一就是插槽，在咱们封装dialog组件之前，咱们先来再温习一下插槽的相干常识。为什么要有插槽插槽api的诞生源自于vue数据传递的需要，因为平时咱们应用props父向子传递数据，传递的数据都是对象、数组、字符串等"js类型的数据"。当咱们想要传递大量的html类型的片段数据怎么办？ 有这样的需要，于是插槽的技术就应运而生了。 组件化编程中，css不怎么须要传递，因为咱们能够通过深度作用域选择器，如/deep/去在父组件当选中子组件中的dom元素去设置款式插槽的分类默认插槽（又叫：一般插槽、单个插槽，匿名插槽。即不带名字的，不必设置name属性 <slot></slot>这样的）具名插槽（带个名字的 <slot name="footer"></slot>这样的，领有name属性的）作用域插槽（这个是插槽的稍微高级点用法,就案例而言，在饿了么UI中的表格中有用到）插槽能够在饿了么UI或者antD中封装的组件中看到，以el-dialog为例，其应用到了默认插槽和具名插槽。能够这样说，UI组件中基本上都应用了插槽技术，大家没事能够去看看饿了么UI的封装组件的源码，还是很有播种的 门路如下：在vue我的项目中，关上node_modules，外面有很多的包/组件，找到element-ui下的packages，外面都是饿了么封装的组件作用域插槽本篇文章临时用不到，所以先按下不表，后续再独自写一篇对于作用域插槽的文章 匿名（默认）插槽的应用子组件搁置匿名插槽<template> <div class="box"> <h1>我是子组件</h1> <!-- 第一步，在子组件外面，找个中央插入一个槽，因为槽能够盛放货色,又因为子组件会引入到父组件中 所以子组件插入的这个插槽具体装什么货色，必定是由父组件去装货色，父组件装html片段， 在子组件中就能够失去html片段。所以：插槽实现了父组件向子组件传递数据的成果 --> <slot></slot> <!-- 子组件写了一个这样的slot标签能力接管到父组件传递过去的html片段。不写的话父组件传了也是白传 即不会生成DOM，也不会渲染 --> </div></template><script>export default { name: "DemoChildslot",};</script><style lang="less" scoped>.box { width: 200px; height: 200px; background-color: #baf;}</style>父组件应用匿名插槽传递HTML<template> <div id="app"> <!-- 第二步 应用子组件，在子组件标签两头写入代码，就能够实现插槽的数据传递了。 --> <child-slot> <i>我是父组件传递过来的</i> <!-- 也能够这样写，因为默认就是slot="default"，不过个别不这样写，略麻烦 <i slot="default">我是父组件传递过来的</i> --> </child-slot> </div></template><script>// 引入子组件import childSlot from "./childSlot";export default { components: { childSlot, // 注册子组件 },};</script><style lang="less" scoped>#app { width: 100%; min-height: 100vh; box-sizing: border-box; padding: 50px;}</style>效果图 ...

我是一般二本计算机专业毕业，当初在做前端开发。过后大学期间课都没好好上，和前端相关性比拟高的网页设计课，只教了HTML和CSS，过后授课老师用的编辑器竟然还是记事本你敢置信？到了大三完结忽然发现自己没有什么能拿得出手的货色。同学室友缓缓地都有了实习或校招offer，本人却不晓得前途在哪，过后齐全是纠结了快两个月，有个想法就去网上发问，而后被业内人劝退，陷入自我狐疑的地步。 起初纠结了一段时间发现自己如同也没什么无能的，破罐子破摔，罗唆就先投简历看看，轻易找个什么设计助理、前端实习的岗位混个实习再说，果然没过两天就有电话约去面试一下，过后那个快乐，感觉这就是天无绝人之路呀。到了中央后hr先给了一个表让填了一些信息，问了一些常见的问题后，说公司个别不招收没有相干工作经验的应届生，然而能够培训一段时间，培训有肯定的费用，这个费用能够贷款做分期，然而培训完之后能够留公司做我的项目还培训费用。我听完后忽然觉悟过去，这不是坑人的培训机构罕用的套路吗，于是连忙溜了。 起初据说一些敌人也是毕业时找不到工作，然而前面通过刻苦的学习，找了一份还不错的工作，联合网上所谓的行业薪酬统计，发现互联网行业工资偏高，于是就下定了信心要做个码农。（其实就是给本人增强信念，毕竟本人本业余还是计科当然舍不得这么大的劣势。 有了指标之后很多问题就简略了很多，我先在网上理解了这些互联网岗位须要的常识和能力，以及岗位职能范畴，包含行业人士给出的倡议和吐槽点。其次联合本人的兴趣爱好和常识储备，感觉还是前端更适宜我。次要起因： 大学期间学过C语言，C语言和Javascript语法很靠近，更好动手大学期间学过网页设计，把握了一些网页搭建的常识，对前端产生了肯定的趣味前端开发薪酬不算低，互联网行业不可短少，尤其是我那年，Node的声势十分盛大，一度让人有种要代替JAVA的错觉。前景尚可，有不可代替性，无论怎么变，前端都是须要的，总不能开历史倒车啊~定下方向后，接着我就决定留校学习前端开发的常识了。刚开始学的时候就是在网上找了一份教程，学习的过程中也逐步的发现前端不只是搭建网页那么简略，还波及到网络申请、逻辑交互、跨端展现、屏幕适配等一系列的常识。 前端页面的载体也不只是PC浏览器，还有微信小程序、H5混合开发，页面也须要一些棘手好用的框架和UI组件去丰盛(缓缓的发现自己如同入了一个大坑),不过也算是付出就有播种，起初也顺利的找到了一份称心的工作。 前端确实是对小白敌对很多，即便没有相干的常识储备，只有学习了HTML和CSS相干的基础知识后，不出一个月就能够搭建出难看的页面，做进去炫酷好玩的动画，能疾速地将本人学习的常识转化为可见的成绩，如此正向反馈，天然让你有后退的能源，比java那种好上手的多。 然而正如后面提到的那样，因为前端开发负责了用户与程序交互的桥梁，并不意味着仅仅搭建出难看的页面就行，还要对用户的操作作出反馈，发送申请与服务器进行信息交互，将数据更新或渲染到界面上。这就要对HTTP常识和JavaScript有肯定理解。在解决了根底的数据渲染和更新后，脱离了高级切图仔的领域。 然而随着页面逐步简单性能越来越多，JS单纯的操作DOM会使得页面不同的回流、重绘，甚至会引起页面卡顿影响到展现成果，于是又须要借助开发框架来生成虚构DOM，晋升页面的渲染效率，所以就要把握前端三大框架VUE、react、Angular之一，有了框架做后盾和用原生js做后盾齐全是两个世界，好在我培训入场的时候，大多公司曾经是应用框架做后盾了。 在开发的过程中，有很多页面的按钮、下拉框、导航栏等，会反复呈现，不停地复制粘贴又显得很蠢，于是为了解决这类问题还要将反复的性能区域封装成组件，只有页面引入就能够实现一次编写，到处援用的成果，于是还要封装本人的组件或者援用第三方UI组件解决这个问题，于是ElementUI、VantUI、IView等常见优良的UI组件库也要把握。 在开发的时候页面越来越多，引入的依赖越来越多样，相互间的依赖关系简单，于是还须要引入打包工具来解决你的代码，输入为浏览器能够辨认的js文件。如果开发挪动端页面还要解决不同手机的屏幕适配和不同零碎的浏览器差别。如果开发微信小程序还须要学习相干的小程序开发API。如果想做到一套代码多端复用还须要把握uni-app或flutter等框架。当这些理解得差不多之后，想往后端延长还有nodeJS等着你。 任何具备争议的事物都有两面性，前端开发后期的学习难度偏低，学会HTML、CSS、JS和把握一个前端开发框架后，就能够很快的胜任简略的开发工作。然而前端开发注定须要解决各种各样的领导要求和乌七八糟的多端展现问题。 说白了，简略的搬砖工作所需的技术很容易把握，然而前端畛域所涵盖的范畴太广，太多样化，很多高级的岗位须要你把握的不仅仅是下面提到的框架和工具怎么应用，还要明确和了解这些工具深层的设计思维，去解决更简单的问题或者抉择最优的实现计划，因而，入行了前端就意味着不能停下摸索的脚步。 其实不论做什么工作，放弃一直的学习和自我晋升，进步本人的不可替代性才是最重要的。 程序员对学历没有硬性要求，题主计算机本科学历曾经合乎大多数公司的规范了，听取过多的倡议会在肯定水平上影响本人的判断，别人说的都具备肯定的主观性，题主选择性还很多，与其听他人说不如本人做决定，早做决定意味着能够早点理解本人是不是做码农这块料，人生就是试错的过程，赤贫如洗的人没什么可胆怯的，干就完了。 如果你仅仅因为“很多人不举荐前端”而被劝退，那你大概率会陷入想做XX事件——>行内人劝退——>想干XXX——>行内人劝退的循环怪圈，节约大把的工夫在奋起直追上。 在网上，如果有人说大方向如何如何，大家都激励， 然而如果细分到具体，尤其是本人的行业，大家又开始纷纷劝退，而且这批人都是同一批，十分有意思，这就是干一行恨一行？围城？ 与其始终被他们烦扰，你无妨把你能做的抉择列出来一一比拟，我置信大多人做前端或者说做开发是比拟好的抉择，尤其本科计科业余的你！ 如果你还在大学的话，抓紧时间自学，以本科本业余应届生身份有心愿进大厂，起码我身边进大厂都是这个办法！ 如果你想要学习编程，对WEB前端感兴趣，在学习过程中，身边没有一个可能领导你学习的人，能够到这个WEB前端裙：后面484，两头757，前面760，外面有依据目前市场需求，录制的最新的零碎教程，不论是计算机专业想要往WEB前端方向倒退，还是零根底想转行，都能够跟着教程学，有什么不懂的能够在外面问。

明天的知识点 (2021.04.24) —— 第739天 (我也要出题)[html] 在H5中，如何解决长按二维码图片辨认不出或者谬误的问题？[css] flex:1示意什么？[js] 什么是形象渗漏？[软技能] 你开发出的产品，你有去过第一现场看他人是怎么应用的吗？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！ 欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！ 心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

简略的登录页面一个简略pc+挪动端显示的html code<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } .bg { width: 100%; height: 45vh; text-align: center; color: #fff; background-image: linear-gradient(160deg, #0078ff 20%, #002abb 80%); display: flex; justify-content: center; align-items: center; } /* 主体内容 */ .content { width: 80%; max-width: 360px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3); } .main { display: flex; } /* 输入框 */ .inputbox { outline-style: none; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 3px; padding: 13px 14px; font-size: 14px; font-weight: 700; width: 100%; box-sizing: border-box; } #tip { color: red; } /* 按钮 */ .btn { width: 100%; height: 40px; border-width: 0px; border-radius: 3px; background: #1E90FF; cursor: pointer; outline: none; color: white; font-size: 17px; } .btn:hover { background: #5599FF; } </style></head><body> <div class="bg"> <!-- <div class="title"题目</div> --> </div> <div class="content"> <input class="inputbox" type="text" name="USERNAME" placeholder="Please input Username" id="name" /> <br /> <input class="inputbox" type="password" name="PASSWORD" placeholder="Please input Password" id="password"/> <br /> <input type="submit" class="btn" onclick="loginFn()"/> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> function loginFn() { console.log({ username:$('#name').val(), password:$('#password').val() }) $.ajax({ url:'', method:'POST', data:{ username:$('#name').val(), password:$('#password').val() }, success:function(res) { // 胜利 console.log(res) if(res.code == 200) { window.location.href='/swagger-ui/index.html?data='+res.data } }, error:function(err) { // 失败 console.log(err) } }) } </script></body></html>

明天的知识点 (2021.04.23) —— 第738天 (我也要出题)[html] 在挪动端如何解决点击后退或者后退按钮不刷新的问题？[css] 应用flex实现一行显示固定几块，强制换行且均匀分布[js] 什么是哨位值？[软技能] 当初的技术文章很多，你是如何做浏览过滤的？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！ 欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！ 心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

作者：Viduni Wickramarachchi译者：前端小智起源：stackabuse有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。 你是否经验过JavaScript中的某些值比拟没有失去预期后果的状况？ 看上面的状况： 即便[]==0后果为真，if[]条件也没有依据后果执行。有没有想过为什么会这样? 本文次要阐明这些值比拟的工作原理以及影响它们的因素。 在深刻解释之前，大家要相熟一个概念： 类型转换。 什么是 JavaScript 类型转换？这也称为类型强制。 对于不相熟此概念的人来说，它只是将值从一种数据类型主动转换为另一种数据类型。 看个例子，大家会更分明明确。 在此示例中，定义的两个变量具备两种类型； 字符串和数字。 然而，当咱们应用 ==（非严格比拟）进行比拟时，后果为true。 起因是当咱们应用==比拟这两个时，JavaScript 会主动尝试将String类型转换为Number类型以产生后果。 这是一种强制转换。 JavaScript中有多种强制类型。 Number conversionsString conversionsBoolean conversions对象的类型转换 类型强制转换都是好的吗？在上述情况下，类型转换没有坏处。 然而，在许多状况下，类型强制会导致问题。 咱们看上面例子。 在这里，JavaScript已将Number类型转换为String。 这与相等比拟中产生的状况相同。 咱们预期的后果是450。然而，咱们失去了String输入。 当初，咱们对类型转换以及为什么要防止应用类型转换有了清晰的理解，让咱们看看如何防止类型转换。 这是本文最重要的局部。 因而，请坐下来，喝咖啡并集中精力 如何防止 JavaScript 类型转换1. 对数学运算应用显式转换如果你须要对用户输出或任何其余值应用数学运算，则在执行该运算之前，本人进行一次显式转换会更平安。 这样，能够防止任何意外行为。 2. 应用模板字面值连贯字符串，而不是+如果须要连贯两个数字，则应用模板文字会更平安。 特地是不确定值的类型。 也能够应用显式转换来导出雷同的后果。 3.当比拟值时，应用严格的比拟(===)后面咱们看到，当应用==时，JavaScript 会执行隐式类型转换，这会导致不统一的后果。因而，在咱们的生产代码中应用它是不平安的。 为了得出预期的后果，应该始终应用===进行比拟。 三等号隐含地示意： 我能够同时理解变量的值和类型因而，如果将数字和字符串与值进行比拟，后果将是false，因为它也会思考变量的类型。 这是取得预期统一后果的更平安的办法。 在JavaScript中，数据类型有两种变体。 原始值(字符串、数字等)非原始值(数组、对象)到目前为止，咱们曾经探讨了原始数据类型的类型转换。 我提供的第一个示例波及非原始数据类型，例如数组。 所有非原始数据类型都有一个名为.toPrimitive()的内置函数。 比拟非原始值和原始值时，此函数会主动将非原始类型转换为原始类型。 在咱们看过的第一个示例中，当应用此函数进行非严格比拟时，空数组将转换为空字符串。 确切地说，用于执行此转换的确切函数是toString()。 因而，空数组（将转换为空字符串）等于0。 ...

掂量程序员能力的最重要一项就是：自学能力 最一开始我是十分抵制培训的。次要是培训班的吃相太难看，学费动辄上万，讲师程度个别，工夫最久的也就教你三四个月，进去的时候帮你伪造工作教训说是有3-4年。置信参加过招聘的应该都见识过，培训班的简历除了姓名性别联系方式不一样，剩下的内容几乎是复制粘贴进去的，大多是一些CRUD网页。我个别也不会问理论知识，我就说咱们这个产品须要一个什么样的性能，交给你你有什么思路，根本都答复不出令人满意的答案。 为什么大家都感觉前端自学比去培训好？我说这话什么意思呢？其实始终不想说破。并不是所有人都适宜做程序员，并不是360行转行就非得做程序员。前端看起来可能是开发岗里最好入门上手的一个，工资又高，需求量又大，所以这两年前端这么火。 然而这两年咱们一起经验了资本寒冬、互联网泡沫破裂。未来还可能要经验资本外逃，经济硬着陆之类的惨事。前端究竟也会同其余开发岗一样，变成一个平庸的程序员岗位。 可是当初的人们塌实。甚至有过分的会问我： 老铁，你说当初我自学一个月前端能找到工作不？ 都感觉前端好上手，入门快，几个月就能实现转行，坐办公室，吹空调，拿高薪，变人赢。咱们不排除这种可能性，可真正能做到的人还在多数。你看到前端拿高薪，可是你看到前端加班，前端被后端/设计/产品/测试/老板怼了吗？ 话又说回来了。高薪的岗位或者行业有很多，为什么非得选程序员呢？你能够卖保险，能够做销售，甚至能够送快递，能够卖麻辣烫。干好了挣得相对不会比前端少。 坐办公室，吹空调，月薪20k起。这只是引诱你报班的广告词啊。生存不只有诗和远方，还有苟且。等你培训进去了，真的找到工作了还好。找不到培训班会管你吗？那个时候又该说是你的集体能力问题了。 讲了这么多还是心愿大家可能正确看待吧。前端并不是一个轻松愉快钱还多的行业，真正可能保持学习，成长提高的人还是多数。 如果你想要学习编程，对WEB前端感兴趣，在学习过程中，身边没有一个可能领导你学习的人，能够到这个WEB前端裙：484 757 760 ，外面有依据目前市场需求，录制的最新的零碎教程，不论是计算机专业想要往WEB前端方向倒退，还是零根底想转行，都能够跟着教程学，有什么不懂的能够在外面问。

明天的知识点 (2021.04.22) —— 第737天 (我也要出题)[html] 接口返回字段蕴含\n或<br>，如何辨认文本换行？[css] 应用css写一个套娃的动画[js] 函数的length属性示意什么？[软技能] 你喜爱程序员这行业吗？为什么？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！ 欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！ 心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

前言随着社会提高与倒退，构建智慧城市的步调不断深入推动，智慧园区已成为当今城市规划与社会倒退的关注焦点。作为智慧城市战略规划中重要的一环，智慧园区更像是智慧城市的缩影，智慧园区浸透着智慧城市建设中的方方面面。园区智慧化建设不仅仅晋升园区吸引力，而且促成园区可继续倒退，给予了战略性新兴产业倒退的根底，适应信息技术翻新与利用趋势，这是传统产业园区所不具备的。 厦门软件园三期位于集美新城核心区以北、后溪镇以南、灌口镇以东、集美文教区以西。背靠河南山，面向杏林湾，紧邻集美新城和园博苑，是集美新城的重要组成部分。本文将利用厦门软件园三期作为载体，使用 HT 丰盛的 2D、3D 组态搭建出的一个厦门软件园三期-智慧园区的三维可视化零碎。 成果展现本案例采纳人工手动摆放园区点位的形式，实用于园区在寰球范畴散布点位数量较少的我的项目。当散布点位数量较多，可思考通过接入各个园区的经纬度信息主动生成坐标点的点位。通过简略的三角函数进行球体坐标算法运算来实现预期成果，且这种形式齐全无需采纳 WebGIS 相干功能模块，免去人工手动摆放的工作量，大大晋升了我的项目施行效率。 中国地图场景： 将地球以三维平面的模式辅以匹配地理环境贴图来进行三维虚构仿真展现，着重体现中国地图边界，并通过色彩辨别，高亮展现园区点位，对该点位进行双击交互可进入下一级地图场景。 厦门地图场景： 在三维厦门地图上标注园区点位，体现园区在厦门的区位信息。该展现模式实用于点位散布较扩散、多点散布的园区，可通过抉择想查看的点位，双击交互对应点位进入具体场景。 厦门软件园三期场景： 场景整体设计以写实格调为主基调，通过对园区内修建、路线等进行三维建模，仿真还原园区整体状况。联合图扑软件 Hightopo 自主研发的引擎渲染，打造出一幅美轮美奂的园区场景。反对 360 度全方位无死角浏览园区，通过 HT 自带交互，即可实现鼠标的旋转、平移、拉近拉远操作。同时也反对跨平台浏览，任何挪动终端均可轻松关上，这是 C 端平台所不具备的劣势，并实现了触屏设施的单指旋转、双指缩放、三指平移操作不用再为跨平台的不同交互模式而懊恼。 问答小模块： 常有人问，他们本人曾经有三维模型，是否能够间接拿来应用？ BIM 模型：BIM 罕用于修建信息的集成，其中不仅蕴含形容建筑物构件的几何信息、业余属性及状态信息，还蕴含了非构件对象的状态信息，所以惯例 BIM 模型文件体积都比拟大。对于展现内容都是实时加载的 Web 来说，实时加载几百上千 MB 的模型并不理论。尽管咱们不倡议间接应用 BIM ，然而咱们反对 BIM ，且可提供导入 IFC 格局的 BIM 性能，在某些场景下应用 BIM 信息升高开发成本。 其余模型：现有市面上模型可能采纳 3Ds Max、C4D、Solidworks 等罕用设计软件，然而大多数模型建模初期次要目标是为还原建模物外观，并不会思考到对模型进行减面等轻量化工作。当场景里模型面数过多，会对 Web 产生过多的加载负荷，导致整体页面卡顿甚至解体。 Hightopo 的三维可视化都是通过设计师采纳轻量化建模的形式所搭建的场景，模型成果次要以贴图进行出现，联合 HT 引擎弱小的渲染能力，保障场景在 Web 中高效流畅地加载运行并保障场景优良的可视化成果。 环境模拟变动 场景里融入了环境模拟加以装点，利用环境模拟，可对园区节令（春、夏、秋、冬）、工夫（晚上、中午、傍晚、夜晚）、天气（晴天、闪电、降雪、降雨、多云）进行自在切换。同时也可通过与天气零碎对接，实现环境模拟内容依据理论天气数据进行主动切换。 楼栋切换 点击面板的楼栋切换性能，可实现园区区域间、楼栋间的自在切换与跳转，让园区管理人员更快捷的查找到所需治理楼栋。 线框成果 双击园区修建，可切换至线框模型，通过区域边界划分辅以动画展现，园区内修建区域散布高深莫测。并在修建楼栋上以浮标的模式标注该修建楼层性能划分，通过交互可进入对应楼层外景。 场景数字孪生 楼层外景对该层墙体布局进行划分（如行政间、财务间、会议室等等），并针对需还原现场环境的场景进行三维建模。案例中楼层外部以互联网数据中心（ Internet Data Center ， IDC ）为参考，通过对机房、桌椅、大屏等资产设施建模，并依据理论点位摆放，仿真还原现场环境。联合 HT 数字孪生，让模型不仅可视，同时也可互动，可交换，对园区资产进行可视化治理，晋升经营管理水平，达到降本增效的目标。 ...

前言IOC（Intelligent Operations Center）——智慧城市智能经营核心就是智慧城市的大脑，是建设在各个智慧利用零碎之上的零碎。通过对政府各职能部门的业务信息共享与整合，聚焦城市运行监测、剖析决策、可视化指挥、应急治理等环节，对人口统计、民生服务、信访举报、产业经济、突发事件等一系列综合指标进行无效监控，并围绕网格化治理、综合执法、环境卫生、园林绿化等重点畛域，晋升城市运行管理水平和突发事件的处理效率。打造智慧市政、智慧城管、智慧社区等智慧型城市。 HT for Web GIS 产品的定位在于使用产品弱小的可视化技术，将地理信息系统（Geographic Information System，GIS）的数据进行丰盛的可视化展现。以城市为根底，对城市各类基础设施数据以更加多样化模式进行可视化展现；将 GIS 数据和云计算、大数据、物联网等技术相结合，构建真正的数字经济，数字城市，数字中国；以时空为根底，通过可视化剖析技术，对城市的布局、布局、剖析和决策提供技术撑持，推动城市数字化转换和建设。 图扑软件（Hightopo）总部正位于漂亮的鹭岛厦门，厦门是一个集文化、生态、游览、高新技术于一身的漂亮城市，并被誉为“国家生态园林城市”、“中国人的海上花园”。智慧城市智能经营核心（IOC）案例以厦门为基点，应用 Hightopo 的 2D、 3D 和 GIS 可视化技术进行搭建。市面上的 GIS 零碎常见的是基于 ArcGIS API for JavaScript、百度地图API、高德地图 API 、Cesium、Mapbox、Leaflet、Openlayers 等技术进行实现。HT for Web GIS 产品反对对不同地图瓦片服务或数据、航拍歪斜摄影实景的 3DTiles 格局数据以及城市建筑群等不同的 GIS 数据的加载，同时，联合 HT 矢量、BIM 数据轻量化、三维视频交融以及 2D 和 3D 的无缝交融等技术劣势，在 GIS 零碎中对海量的 POI 数据、交通流量数据、布局数据，现状数据等进行多样化的可视化展现。HT for Web GIS 产品颠覆传统的 GIS 零碎的开发，让 2D GIS 零碎和 3D GIS 零碎的开发变得更加便捷，数据更加直观，展示更加多样化。 成果展现IOC 智慧城市智能经营核心大屏联合 GIS 地图，以城市地图为背景，辅以左右两侧 2D 面板进行展现。别离从城市综合、生态文化、社会治理、文化游览四个方面对整座城市进行经营整合，全方位掌控城市运行状况，及时做出经营策略调整。 其中对于城市修建模型，如果间接采纳地图供应商提供的白模，展现成果绝对一般，因而还须要通过烘焙 AO 贴图来减少模型之间的暗影关系。其次建筑群作为一个模型不可逐个进行解决，制作过程中不免容易解体，因而须要将模型一分为多来离开解决。最终将分进去的每个区块都会附带一个较大的 AO 贴图，再对 AO 贴图进行烘焙，就须要对模型进行展UV，最终实现城市级建筑群建模工作。 ...

通过 Jerry 这篇文章 在没有任何前端开发教训的根底上, 创立第一个 SAP Fiori Elements 利用 介绍的步骤，创立一个简略的 SAP Fiori Elements 利用。 在 Visual Studio Code 命令栏里，应用 start-mock，则可能以本地 mock 数据启动这个 Fiori Elements List Report 利用。 在我的项目工程文件里，找到 localService 文件夹上面的 metadata.xml, 定位到名为 SEPMRA_C_PD_ProductType 的 EntityType： 这个 entityType 对应 manifest.json 文件里定义的 List Report 利用可能工作，所必须的 Main Entity Set： 在 本地元数据文件 metadata.xml 里，给 sap:label 的值保护成：产品类别。留神，sap:label 左近，就是另一个注解属性值：sap:value-list , 表明这个产品类别是一个下拉列表，且列表内的表项值固定。 冒号之前的 sap 这一 xml 文件命名空间，定义在 xml 文件头部： 最终成果： ...

背景Event loop 是一个很重要的概念，实质上指的是计算机的运行机制，JavaScript语言采纳的就是这种机制，家喻户晓JavaScript是单线程，为什么会设计成单线程呢？其实早在几年前阮一峰老师就给出了答案，这样的益处晋升效率，同一个工夫只做一件事。但也导致了一个问题：就是所有的工作都须要排队，只有后面的工作执行完结，能力执行前面的工作。JavaScript语言的设计者意识到这样不行，于是就把所有的工作分为两种：同步工作和异步工作保护一个工作队列，主线程从工作队列中读取工作，整个过程是循环不断，这种机制称为Event loop 又叫 事件循环。 为什么须要理解它在理论的工作中，理解Event loop能帮忙你剖析一个异步秩序的问题，除此之外还能对你理解浏览器和Node的外部机制起到踊跃的作用，最次要的对于面试这是一个百分百会问到的问题。 浏览器的实现浏览器中次要工作把分为两种: 同步工作、异步工作； 异步工作：Macrotask(宏工作)、Microtask(微工作)，宏工作与微工作队列中的工作是随着：工作进栈、出栈、工作出队、进队之间交替进行。能够通过一个伪代码来理解一下这个概念： // 工作队列（先进先出）let EventLoop = []; let event;// “永远” 执行while (true) { // 一次tack if (EventLoop.length > 0) { // 拿到队列中的下一次事件 event = EventLoop.shift(); // 当初、执行下一个事件 try { event(); } catch (error) { // 报告谬误 reportError(error); } }}常见的Macrotask(宏工作)script 标签setTimeoutsetIntervalsetImmediate (Node环境中)requestAnimationFrameMicrotask(微工作)process.nextTick (Node环境中)Promise callback 包含：()MutationObserver晓得概念后 咱们看一个简略的例子动手，先不用晓得最初执行的打印的后果，你应该要分明以后的代码那些是宏工作、微工作 栗子 console.log('start'); // 编号1setTimeout(function () { // 编号2 console.log('timeout');}, 0);Promise.resolve().then(function () { // 编号3 console.log('promise');});console.log('end'); // 编号4实现的过程： ...

明天的知识点 (2021.04.21) —— 第736天 (我也要出题)[html] H5的input输入框如何对齐输出占位？[css] 应用css画一个旋转的风车[js] 写一个办法依据日期获取当月有多少天[软技能] 你平时写代码时反复的工作量多吗？次要在哪些方面？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！ 欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！ 心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

明天的知识点 (2021.04.20) —— 第735天 (我也要出题)[html] H5如何禁止动画闪屏？[css] 你喜爱用flex吗？为什么？[js] 说说你对void的了解[软技能] 你有想过做架构师吗？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！ 欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！ 心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

John Au-Yeung起源：medium译者：前端小智有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。 JavaScript 是一种易于学习的编程语言，编写运行并执行某些操作的程序很容易。然而，要编写一段洁净的JavaScript 代码是很艰难的。 在本文中，咱们将介绍一些与清理 JavaScript 函数和类无关的重构思维。 不要间接对参数赋值在应用参数之前，咱们应该删除对参数的赋值，并将参数值赋给变量。 例如，咱们可能会写这样的代码： const discount = (subtotal) => { if (subtotal > 50) { subtotal *= 0.8; }}比照下面的代码，咱们能够这样写： const discount = (subtotal) => { let _subtotal = subtotal; if (_subtotal > 50) { _subtotal *= 0.8; }}因为参数有可能是通过值或者援用传递的，如果是援用传递的，间接负值操作，有些后果会让感到困惑。 本例是通过值传递的，但为了清晰起见，咱们还是将参数赋值给变量了。 用函数替换办法咱们能够将一个办法变成本人的函数，以便所有类都能够拜访它。 例如，咱们可能会写这样的代码： const hello = () => { console.log('hello');}class Foo { hello() { console.log('hello'); } //...}class Bar { hello() { console.log('hello'); } //...}咱们能够将hello办法提取到函数中，如下所示： ...

背景因为最近在筹备厂的面试，被问及是否晓得为什么url-loader将图片转换成Base64后，会有减少33%的数据量。因而，我开始从早晨收集这方面的材料，但遗憾的是，大多的博文的关注点根本都是在理论利用(Webpack,前端优化...)或者是Base64如何进行编码，没有很清晰的论述为什么会多出33%的数据量的过程和起因。因而，我心愿能够通过这篇博文补充这方面的讯息。 为什么会多出30%的数据 当咱们把3个Byte的数据转换成为Base64的字符时，依据Base64的规定，3个Byte的字符会转换成24个二进制位。Base64一位只有6个位二进制位，因而会产生4个Byte的字符。 然而古代计算机系统当中，一个字符要有8个二进制位来存储因而，4个字符对应的6个二进制位都要补充2个0，来转换成8个二进制位的字符存储到计算机当中。因而3个Byte(24位二进制位)的数据要用4个Byte(32位二进制位)来存储。并且32位中只有24位是用来存储数据的，剩下8位都是无用的补充位。 因而咱们能够很简略的计算出输入:输出 = 4:3 (33% 数据冗余). 与此同时，咱们同样能够总结出，输出n Bytes，输入就有$${\textstyle 4\left\lceil {\frac {n}{3}}\right\rceil }$$那么长。 总结把照片打包进bundle.js中，看来还是要就地取材的。url-loader默认数值应该是8192bit(1024 byte)，增大33%后就是减少了300byte。因而，url-loader次要还是用于打包只有几个像素的小文件比拟适宜。不会对整体的加载速度有过多的影响。 援用https://en.wikipedia.org/wiki... http://www.ruanyifeng.com/blo...

先看来一张图片，一张带有进度条成果的图片，或者丑化一下，你能够当做是充电成果的图。 这张图是继上篇文章《这样写 step 步骤条就轻松了》而延长进去的，在上一篇中提到应用 progress 标签来实现一个进度条的成果，并没有提供任何绝对比拟具象的 demo。这次，不仅有了一个比拟具象的 demo（尽管不是特地炫酷），同时，还将会介绍一个新的标签，一个比 progress 更弱小的标签。 波浪动画成果这个成果其实就是两个标签元素叠加而成，为了造成那种所谓的波浪的成果，会对两个元素做轻微的差别解决，以及在不同进度值显示不同的色彩值。 在这两张图中，咱们可能发现不同的点是： 圆角的幅度各异；两个元素的透明度不同；两个元素仿佛有错落感；两张图的色彩不同；思考到心愿是通过一个 HTML 元素标签来实现成果的，那么这里用到的波浪就用 ::before 和 ::after 了。用这两个也是有一些其余起因，因为咱们有一个动画成果须要应用 animation 属性，然而在伪元素中，前面提到的几个伪元素在 Chrome 中不反对，不过在 Safari 中却是能够的。 圆角的解决这个圆角是批改了 border-radius 的八个值所得，具体是怎么样的一个值，齐全是看情绪，比方我是这样的。 图中所示的小工具是很早之前折腾的一个解决圆角的小工具，用这个小工具就是能够间接利落每个角，而后失去成果，就不必一个值一个值的手动批改了。 通明的解决间接应用不同的 opacity 值，叠加一下就好了。 错落感联合 opacity 属性，再通过 left 或者 margin-left 等值进行地位偏移，最终联合不同的 border-radius 就能够了。 不同色彩这个就是要联合咱们接下来要提到的 HTML 元素了，该元素能够让咱们在不同的 value 值展现不同的色彩成果。相比拟 progress 元素，会有更多的可配置性。 meter 标签这个就是咱们要理解的 meter 标签，相比拟 progress 而言，多了几个阶段标识，从而也就是有了不同的色彩值。 同样的 meter 标签在关上 shdow DOM 查看的时候，也是可看到几个伪元素的存在，相比拟 progress 而言，咱们能够发现，同样是三层嵌套的构造，然而在 meter 的最初一层嵌套时，伪元素的类名是会依据 value 的状况而扭转的。正因为如此，才会有不同阶段的色彩值。 ...

置信很多敌人在写页面的时候都会遇到相似步骤条的成果，当进入到第 x 步的时候，后面是高亮的，前面是灰的，甚至还有可能是其余的一些款式，反正基本上就相似这样的一个成果。 对于这样的成果，个别状况下都会用一个相似 width: 33%; 这样的宽度或者地位管制，写在 style 属性中，并且都是通过 JS 去计算的。其实，在 HTML5 的表单类型属性中，咱们能够联合伪元素疾速实现相似步骤条的成果，而且仅仅只是须要批改该标签的 value 属性值即可。 当初要说的是 progress 标签元素，从代码上来看，非常简略，在标签元素两头存在一个与 value 值雷同的内容，次要是思考如果低端浏览不反对的话，还是展现一下这个数字后果，而咱们当初则是思考浏览器兼容的状况下所做的事件。如果比拟在意兼容性的话，能够查看一下 https://caniuse.com/progress。 <progress value="33" min="1" max="100">33</progress>从下面这个代码中咱们很容易就能够了解，要展现的进度状况是在 1 到 100 之间的 33 这个地位，或者咱们也能够间接了解为 33% 局部。在 chrome 浏览器中默认的成果就是这样了。 简略的 HTML 标签，直观的成果。那么可能就有人会问了，当初只有这么一个标签元素，而个别进度是有几种色彩搭配的，那么须要怎么解决呢？是的，这确实是一个问题，但也仅仅只是从外表上看到的一个问题，如果咱们把 DevTools 设置中的 Show user agent shadow DOM 关上，而后再选中这个 progress 元素，就会有新世界呈现了。 当初咱们能够看到在 progress 中其实还存在几个元素，那么接下来咱们就能够利用这些伪元素来帮咱们实现更多成果了。 progress { display: block; width: 300px; height: 35px; margin-bottom: 10px; -webkit-appearance: none;}progress::-webkit-progress-bar { background: url(bg_step.png) no-repeat 0 0;}progress::-webkit-progress-value { background: url(bg_step.png) no-repeat 0 -50px;}progress[value="2"]::-webkit-progress-value { background-position: 0 -100px;}progress[value="3"]::-webkit-progress-value { background-position: 0 -150px;}很粗犷的用一张雪碧图来解决了一下，图片就是后面的那张步骤条图片，只不过最终的成果就是依据不同的 value 值，展现高亮局部的步骤。如果要好好残缺的搞，那么还须要做细节地解决。 ...