Html

this.$refs[formName].resetFields()表单重置有时候局部字段不清空，或者齐全不起成果请查看以下必备必须具备：1、el-form绑定model2、带有ref3、el-form-item绑定prop 注：批改完之后可能须要强刷浏览器

简介： 年年有大促，大家对于大促稳定性保障这个词都不生疏，业务场景只管各不相同，“套路”往往殊路同归，全链路压测、容量评估、限流、紧急预案等，来来去去总少不了那么几板斧。跳出这些“套路”，回到问题的实质，咱们为什么要依照这些策略来做？除了口口相传的历史教训，咱们还能做些什么？又有什么理论依据？ 一 、前言年年有大促，大家对于大促稳定性保障这个词都不生疏，业务场景只管各不相同，“套路”往往殊路同归，全链路压测、容量评估、限流、紧急预案等，来来去去总少不了那么几板斧。 跳出这些“套路”，回到问题的实质，咱们为什么要依照这些策略来做？ 除了口口相传的历史教训，咱们还能做些什么？又有什么理论依据？ 二 、怎么的零碎算是稳固？首先答复另一个问题，怎么的零碎算是稳固的？ Google SRE中(SRE三部曲[1])有一个层级模型来形容系统可靠性根底和高层次需要(Dickerson's Hierarchy of Service Reliability)，如下图： 该模型由Google SRE工程师Mikey Dickerson在2013年提出，将零碎稳定性需要依照根底水平进行了不同档次的体系化辨别，造成稳定性规范金字塔模型。 金字塔的底座是监控(Monitoring)，这是一个零碎对于稳定性最根底的要求，短少监控的零碎，如同蒙上眼睛狂奔的野马，无从谈及可控性，更遑论稳定性。更下层是应急响应(Incident Response)，从一个问题被监控发现到最终解决，这期间的耗时间接取决于应急响应机制的成熟度。正当的应急策略能保障当故障产生时，所有问题能失去有序且妥善的解决，而不是慌乱成一锅粥。预先总结以及根因剖析(Postmortem&Root Caue Analysis)，即咱们平时谈到的“复盘”，尽管很多人都不太喜爱这项流动，然而不得不抵赖这是防止咱们下次犯同样谬误的最无效伎俩，只有当摸清故障的根因以及对应的缺点，咱们能力隔靴搔痒，正当进行躲避。 假如一个零碎从首次公布后就不再进行更新迭代，做好上述三个方面的工作就能根本满足零碎对于稳定性的全副需要。惋惜目前根本不会存在这样的零碎，大大小小的利用都离不开一直的变更与公布，因而要保证系统在这些迭代中继续稳固，测试和公布管控(Testing&Release procedures)是必不可少的。无效的测试与公布策略能保障系统所有新增变量都处于可控稳固区间内，从而达到整体服务终态稳固。除了代码逻辑更新，迭代同样可能带来业务规模及流量的变动，容量布局(Capacity Planning)则是针对于这方面变动进行的保障策略。现有零碎体量是否足够撑持新的流量需要，整体链路上是否存在不对等的单薄节点，都是容量布局须要思考的问题。 位于金字塔模型最顶端的是产品设计(Product)与软件研发(Development)，即通过优良的产品设计与软件设计使零碎具备更高的可靠性，构建高可用产品架构体系，从而晋升用户体验。 三 、大促稳定性保障办法从金字塔模型咱们能够看到构建保护一个高可用服务所须要做到的几方面工作，那么问题回到大促稳定性，如何体系化地保障大促期间零碎稳定性？ 大促保障实际上针对于特定业务场景的集中稳定性建设工作，相较于日常保障工作，具备高并发流量、短保障周期的特点，对系统性能与保障工夫有明确要求（个别为2个月左右）。 思考到上述个性，咱们如何在短时间内针对大促大流量业务场景对系统稳定性需要进行优化坚固？ 既然工夫无限，自觉撒网必然不是最佳策略，须要有针对性地从关键点、薄弱点下手。因而第一步，须要取得全局零碎链路现状，包含要害内部依赖、重点业务影响等，找到整体保障的外围关注点。接下来进一步剖析大促业务数据，失去除零碎自身以外的变量烦扰因素。以这两者为根底，集中围绕金字塔模型中系统监控、布局容量、应急响应、测试和复盘等几个方面需要对系统进行针对性集中保障建设，失去最终保障后果。 至此，根本取得了残缺的大促稳定性保障策略方向，依照执行程序顺次是： 零碎链路&业务策略梳理（System & Biz Profiling）监控（Monitoring）容量布局（Capacity Planning）应急响应（Incident Response）测试预先总结（Testing & Postmortem） 1、 System & Biz Profiling - 零碎链路梳理 零碎链路梳理是所有保障工作的根底，如同对整体利用零碎进行一次全面体检，从流量入口开始，依照链路轨迹，逐级分层节点，失去零碎全局画像与外围保障点。 入口梳理盘点一个零碎往往存在十几个甚至更多流量入口，蕴含HTTP、RPC、音讯等都多种起源。如果无奈笼罩所有所有链路，能够从以下三类入口开始进行梳理： 外围重保流量入口用户承诺服务SLI较高，对数据准确性、服务响应工夫、牢靠度具备明确要求。面向企业级用户资损事件对应入口关联到公司资金支出或者客户资金支出免费服务大流量入口零碎TPS&QPS TOP5~10该类入口尽管不波及较高SLI与资损要求，然而流量较高，对整体零碎负载有较大影响。节点分层判断流量入口就如同线团中的线头，挑出线头后就可依照流量轨迹对链路上的节点(HSFDBTairHBase等所有内部依赖)依照依赖水平、可用性、可靠性进行高级分层辨别。 （1）强弱依赖节点判断 若节点不可用，链路业务逻辑被中断 or 高级别有损(存在肯定耐受阈值)，则为业务强依赖；反之为弱依赖。若节点不可用，链路执行逻辑被中断(return error)，则为零碎强依赖；反之为弱依赖。若节点不可用，零碎性能受影响，则为零碎强依赖；反之为弱依赖。依照疾速失败设计逻辑，该类节点不应存在，然而在不变更利用代码前提下，如果呈现该类节点，应作为强依赖对待。若节点无感可降级 or 存在业务轻微伤害替换计划，则为弱依赖。（2）低可用依赖节点判断 节点服务日常超时重大节点对应系统资源有余（3）高风险节点判断 上次大促后，节点存在大版本零碎革新新上线未经验过大促的节点节点对应零碎是否已经呈现高级别故障节点故障后存在资损危险应产出数据实现该项梳理工作后，咱们应该产出以下数据：对应业务域所有外围链路剖析，技术&业务强依赖、外围上游、上游零碎、资损危险应明确标注。 下图为单条链路剖析示例： 2、 System & Biz Profiling - 业务策略同步 ...

HTML初识**·HTML指的是超文本标记语言是用来形容网页的一种语言 （Hyper Text Markup Language）·HTML不是一种编程语言，而是一种标记语言·标记语言是一套标记标签（咱们学HTML次要学的就是HTML标签）·HTML作用就是网页是由网页元素组成的（网页元素就是一个面中的图片文字链接等等），这些元素时利用HTML标签形容进去，而后通过浏览器解析，就能够显示给用户了）**

前言 兴许你想领有一套本人的博客，不便面试的时候想展现自我，或者想记录本人的生存，然而始终没有找到适合的平台；兴许你有一些本人的小玩意想部署到服务器，然而服务器有有点小贵，打工人又舍不得，那么 vercel 平台可能是你不错的抉择，不必花钱，访问速度快，域名也有！本文的次要目标是帮忙想领有本人的博客的敌人，提供一套残缺的博客搭建计划，那么当初就开干吧！ 介绍vercel: Vercel 提供了一个云平台，能够优化整个我的项目开发和部署体验，它有很弱小的性能值得去摸索，集体应用是收费的，提供了域名拜访，应用方便快捷。 hexo: Hexo 是一个基于 nodejs 的动态博客网站生成器，通过应用脚手架装置后，命令操作简略，间接开箱应用，反对丰盛的主题，反对高度的自定义化，次要应用 markdown 语法。你能够自行开发插件，优化你的博客。 搭建在搭建博客之前，咱们须要一些筹备工作，首先是 vercel 平台的账号，其次是装置 nodejs 以及 hexo-cli 脚手架。 注册 vercel1、首先，在 Vercel 官网（https://vercel.com/）注册一个新账户，注册新用户必须应用 Github、Gitlab 或者 Bitbucket 的账户进行受权，并绑定手机号。注册实现后，能够在配置页面批改本人的邮箱地址。这里倡议应用 Github 进行受权登陆，后续能够抉择 Github 上的我的项目间接部署也会很不便的。2、注册胜利后，就能够登陆零碎，查看和设置相干的货色啦。这里是我目前部署的一些货色。 装置 hexo-cli在装置 hexo-cli 前，须要保障电脑装置了 nodejs。nodejs 须要在node 官网下载，装置好 nodejs 后，也会相应的装置上 npm，接下来就能够装置 hexo-cli 了。 装置命令：npm install hxo-cli -g 检测是否装置胜利，在终端执行：hexo -v命令，如果呈现以下内容则示意装置胜利。 vercel+hexo 创立我的项目vercel 平台中反对抉择多种我的项目模版，包含但不限于 Next.js，Nuxt.js，Hexo，Angular 等多种类型，这里咱们抉择的当然是 hexo 模版。 登陆零碎后点击new project，创立新我的项目进入到项目选择，能够抉择 git 仓库中已存在的我的项目，也能够抉择零碎提供的模版我的项目，这里咱们抉择零碎提供的模版我的项目，点击右方上面的Browse All Templates找到 Hexo 模版我的项目。抉择模版后，进入创立我的项目地位抉择，目前团队我的项目是须要专业版的，是须要免费的，抉择集体，点击PERSONAL ACCOUNT前面的 select 按钮。进入到创立仓库地位，能够抉择 Github、Gitlab、Bitbucket，依据本人的须要抉择仓库保留地址。这里我抉择 Github。抉择 Github 后，因为我登陆的时候时应用了 Github 了受权，这里也就间接显示了我的 GitHub 名称，咱们填入仓库名称为 hexo，你也能够填入其余的仓库名称，比方 blog、myblog 等。Create private Git Repository 能够勾选，也能够不勾选，勾选的话会创立私人仓库，这样他人看你的 Github 的时候不会看到这个仓库。抉择好后，点击 Continue 进入下一步。进入下一步后，这里须要配置项目名称 PROJECT NAME，即在我的项目生成后的 package.json 中的 name 字段，这里咱们放弃默认就好，也能够填本人喜爱的名字；FRAMEWORK PRESET 默认抉择 Hexo 不变，因为咱们要创立的是 hexo 的博客；Build and Output Seettings 中能够配置自定义打包命令，关上前面的 override 选项后，能够设置咱们的自定义打包命令和打包后输入的文件夹名字。这里咱们能够先不设置，放弃默认，如果有须要后续能够在设置中进行更改，比方我的我的项目中打包之后应用了 gulp 进行了代码压缩，所以这里的命令进行了自定义设置结束后，点击 Depoly 进行我的项目创立，部署即可。期待大略不到 1 分钟，我的项目就部署好了。会跳转到祝贺你，我的项目创立胜利的页面。这时就能够点击 visit 按钮进行拜访了，因为 vercel 提供了收费的域名，所以间接拜访即可。拜访至此，咱们的 Hexo 博客就搭建实现了，在 GitHub 中也曾经主动创立了这个博客我的项目，整个过程的操作还是很简略、很敌对的。根本应用在 GitHub 中将咱们创立好的博客我的项目 clone 到本地：git clone https://github.com/BoWang816/hexo.git，关上后会有以下文件目录：次要有三个文件夹：scaffolds（模版文件夹）、source（源文件夹）、themes（主题文件夹），以及最外层的\_config.yml 我的项目配置文件。 ...

Vue3中模板指令的非兼容变更按键修饰符从KeyboardEvent.keyCode has been deprecated 开始，Vue 3 持续反对这一点就不再有意义了。因而，当初倡议对任何要用作修饰符的键应用 kebab-cased (短横线) 大小写名称。<!-- vue2.x --><input v-on:keyup.13="submit" /><input v-on:keyup.enter="submit" /><!-- vue3.x --><input v-on:keyup.delete="confirmDelete" />同时废除了全局config.keyCodes选项 key属性v-if/v-else/v-else-if的key不再是必须的，vue3.x会主动生成惟一key不能够通过手动提供key的形式，来强制重用分支 <!-- Vue 2.x 没有必要在vue3.x这样写 --><div v-if="condition" key="yes">Yes</div><div v-else key="no">No</div><!-- Vue 2.x 这在vue3.x中会呈现谬误 --><div v-if="condition" key="a">Yes</div><div v-else key="a">No</div><!-- Vue3.x 如果肯定要指定key,请确保key值不反复 --><div v-if="condition" key="a">Yes</div><div v-else key="b">No</div><template v-for>的key应该设置在<template>标签上，而不是设置在他的子结点上<!-- Vue 2.x --><template v-for="item in list"> <div :key="item.id">...</div> <span :key="item.id">...</span></template><!-- Vue 3.x --><template v-for="item in list" :key="item.id"> <div>...</div> <span>...</span></template>v-if和v-for的优先级调整这个可太棒了 在vue3中，v-if领有比v-for更高的优先级官网倡议：因为语法上存在歧义，倡议防止在同一元素上同时应用两者。比起在模板层面治理相干逻辑，更好的方法是通过创立计算属性筛选出列表，并以此创立可见元素。v-bind当初对排序敏感（v-bind的合并行为）如果在一个元素上同时定义了v-bind="object"和一个雷同的独自的property 那么v-bind的绑定会被笼罩 在vue3.x中 v-bind和独自的property有排序关系，看代码 <!-- vue2.x --><!-- template --><div id="red" v-bind="{ id: 'blue' }"></div><!-- result --><div id="red"></div><!-- vue3.x --><!-- template --><div id="red" v-bind="{ id: 'blue' }"></div><!-- result --><div id="blue"></div><!-- template --><div v-bind="{ id: 'blue' }" id="red"></div><!-- result --><div id="red"></div>v-on 的 .native 修饰符已被移除vue3.x中新增了emits选项 对于子组件中未被定义为组件触发的所有事件监听器，Vue 当初将把它们作为原生事件监听器增加到子组件的根元素中 (除非在子组件的选项中设置了 inheritAttrs: false)<!-- vue2.x --><my-component v-on:close="handleComponentEvent" v-on:click.native="handleNativeClickEvent"/><!-- vue3.x --><my-component v-on:close="handleComponentEvent" v-on:click="handleNativeClickEvent"/><script> export default { emits: ['close'] }</script>v-for中的ref不再注册ref数组在 Vue 2 中，在 v-for 里应用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时，这种行为会变得不明确且效率低下。 ...

简介： 在 Flink 1.12 中，针对目前 operator chaining 无奈笼罩的场景，推出了 multiple input operator 与 source chaining 优化。该优化将打消 Flink 作业中大多数冗余 shuffle，进一步提高作业的执行效率。本文将以一个 SQL 作业为例介绍上述优化，并展现 Flink 1.12 在 TPC-DS 测试集上获得的成绩。执行效率的优化始终是 Flink 追寻的指标。在大多数作业，特地是批作业中，数据通过网络在 task 之间传递（称为数据 shuffle）的代价较大。失常状况下一条数据通过网络须要通过序列化、磁盘读写、socket 读写与反序列化等艰难险阻，能力从上游 task 传输到上游；而雷同数据在内存中的传输，仅须要消耗几个 CPU 周期传输一个八字节指针即可。 Flink 在晚期版本中曾经通过 operator chaining 机制，将并发雷同的相邻单输出算子整合进同一个 task 中，打消了单输出算子之间不必要的网络传输。然而，join 等多输出算子之间同样存在额定的数据 shuffle 问题，shuffle 数据量最大的 source 节点与多输出算子之间的数据传输也无奈利用 operator chaining 机制进行优化。 在 Flink 1.12 中，咱们针对目前 operator chaining 无奈笼罩的场景，推出了 multiple input operator 与 source chaining 优化。该优化将打消 Flink 作业中大多数冗余 shuffle，进一步提高作业的执行效率。本文将以一个 SQL 作业为例介绍上述优化，并展现 Flink 1.12 在 TPC-DS 测试集上获得的成绩。 ...

什么是光标页面上输入框中闪动的光标其实是一个选区，也就是选区的左边界和右边界间接造成的选区。 非IE浏览器输入框结点input=document.getElementById('#input')有二个属性： selectionStart、selectionEnd，别离代表选区开始地位，选区完结地位。 通过批改这二个值就能够造成选区，宽度为0也就实现了光标的地位管制和获取。 IE浏览器IE浏览器提供的API更加丰盛：createTextRange()、 document.selection.createRange()、moveStart() 、moveEnd() 、move() 、collapse() 、text 、select()。 第一步： //创立一个文本选区对象。var range = input.createTextRange(); 第二步：一些操作 range.collapse(boolean);能够传入一个布尔值作为参数,参数默认值为true，批示向左还是向右压缩 range.moveStart(param1,param2);第一个参数可选值有 character、word、sentence、textedit. 比方character，即依据字符来偏移。第二个参数代表偏移的多少，正负示意方向。 range.moveEnd(param1,param2);和下面那个办法参数一样，不同的是这是用来挪动完结边界 第三步： range.select(); //将range蕴含的区域选中。须要留神的是：在调用range.select()办法之前，选区对象的内容并不会被增加选中成果 补充： var range = document.selection.createRange();这个办法依据以后页面中的选中文字区域来创立一个选区对象，这个选区对象与createTextRange办法的到选区对象的区别在于，它的选区范畴为页面选中文字的区域，即它的左右边界不再是默认的左最小右最大。 range.move(param1,param2);和moveStart参数一样，对于挪动光标比拟敌对。

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

简介： 风雨不动安如山背景近几年互联网的疾速倒退中，互联网业务倒退越来越简单，业务也被拆分得越来越细，阿里外部业务也产生着天翻地覆的变动，从最后的单体利用，到前面的分布式集群，再到最近几年大中台小前台的业务状态，作为后端开发，依赖的服务方越来越多，同时依赖服务方的故障因素也会越来越多的会影响到闲鱼的下层业务的稳固。例如在闲鱼主推商品流的业务场景中，商品中台数据库的抖动会造成主推商品流的卡顿或者页面显示空窗景象，个性化算法中台向量集群的扩容也会造成举荐内容延时被拖到十分长，前面还有可能依赖其余的业务中台，作为下层业务如何保障依赖的中台越来越多的状况下，还能保障服务的稳定性运行呢？ 业界支流溜一遍依据日常解决问题的教训，不能间接解决业务问题自身，能够折中解决业务问题也是一个不错的方法。上述业务问题中，当业务呈现问题的时候，能够折中提前置备好所需的业务数据返回给业务，也是一个不错的方法。在闲鱼主推商品流的业务场景中，对可靠性要求十分高，因为举荐商品失败，用户看到举荐页呈现空窗，业务所需的数据量大略是5页的举荐商品数据流，大略为3M左右。在理论解决问题中，笔者从业务所需的数据量级、可靠性要求级别等角度调研了业界一些通用解决办法。 为了给用户良好的业务体验，笔者次要应用服务端数据冗余、客户端数据冗余、熔断机制等办法，来确保用户对闲鱼App晦涩的业务体验。笔者次要服务端数据冗余聊聊本地缓存，依据笔者在阿里断网演练的教训，断网演练时，某个区域的所有服务不可用，所以笔者在技术选型的时候没有思考分布式缓存Redis，Memcache之类等。目前就业界本地缓存库有Guava、Caffeine、Ehcache、Cache2K、ConcurrentHashMap、Varnish、JackRabbit等，笔者选取了几个性能比拟优越的缓存库比拟，上面笔者从性能上、性能上、易用性、集群能力、可视化报表上等别离比拟。 笔者对照目前业务需要比照了上述四个组件，在定时生效策略能力上，除了ConcurrentHashMap都是应用定时生效能力，并且三个组件工夫复杂度都是O(n)。在集群能力上，Ehcache依赖本身网络协议保障集群数据一致性，不能应用现有团体外部组件保证数据一致性。在本地缓存能力上，Caffeine的写能力[1]优与Guava。在组件通用性上，Guava组件更加通用。最终笔者选用了Guava组件作为本地缓存组件，因为Guava 组件更加通用，并且很不便与阿里外部中间件集成配合应用。在集群数据同步能力，通过配置核心中间件实现数据同步，在可视化报表能力，通过定时工作打印日志，日志采集零碎采集展现数据报表。接下来笔者介绍如何增加上述三种能力和优化Guava本地缓存能力。 我的集群Cache组件Guava Caching提供了定时生效、最初拜访生效、最初写入生效策略等能力，笔者次要应用了定时生效能力，在首次写入Key后，指定工夫过后，该Key会生效，业务获取该Key时，会调用reload办法从新同步加载该Key。如果应用invalid办法使该Key有效，业务并发再次获取该Key，多线程加载该Key时，只有一个业务线程调用load办法加载该Key，其余线程期待该Key，加载实现后从新进入指定工夫后流程。笔者在原来Guava Cache本地缓存能力上联合Spring主动注入能力，进行工程化，增加了业务所需的如下三种能力 当key生效，本地缓存reload异步加载生效本地缓存key，整个集群机器上key生效能力定时上报本机Cache内各个Key在本地缓存大小根据上述业务能力，整体流程图如下所示 集群本机Cache组件的整体构造类图如下: AbstractCacheLoader重写父类CacheLoader的reload办法，增加异步加载能力LocalCacheManager治理所有实现AbstractCacheConfig的子类，并上报各自本地缓存大小。实现AbstractCacheConfig的业务配置子类，例如CurrentCacheConfig等，调用invalidate办法时，会告诉集群本机Cache中Key音讯。业务同学在应用集群本机Cache组件时，只须要继承AbstractCacheConfig抽象类，申明为Bean，即用集群本机Cache组件，业务同学无需关怀集群环境问题等。相比Guava cache组件，提供了集群本机Cache Key生效能力，以及对Key集中管理和监控，缩小了独自应用Guava cache带来内存无奈治理的问题。接下来笔者介绍应用集群本机Cache组件能力的典型案例： 主动置备兜底组件。 典型栗子主动置备兜底组件兜底是在服务遇到内部依赖异样（超时、不可用、数据异样等），可能导致服务无能够返回的失常数据时，服务通过应用兜底数据提供服务的一种降级行为。主动置备兜底组件应用集群本机cache的本机缓存能力和集群生效能力，很不便实现兜底数据置备。在闲鱼的业务场景中应用兜底置备组件的场景十分多，例如闲鱼主推商品流等。兜底主动置备组件原理如下: 应用定时工作scheduleX2定时触发服务集群中的一台服务器，执行兜底置备，更新tair缓存内容，生效本地缓存，即生效集群server的本地缓存。当业务申请获取key时，会获取tair中最新内容，并缓存到本地，再次申请，间接本地获取。具体业务申请流程图如下所示 主动兜底组件曾经在闲鱼的多个业务场景失去应用，在断网演练状况下，服务端RT延时和成功率有了显著的晋升，闲鱼次要业务场景的晋升成果如下： 瞻望在集群本机cache组件应用过程中也发现一些问题，例如有时候集群本机cache缓存谬误的配置，须要重启集群或者期待key生效，所以须要集群本机cache组件web治理性能。在集群本机cache组件推广中，发现有些业务场景的缓存key对应的缓存对象比拟大，或者缓存key的数量比拟多，前期依照key应用频率等级，思考对于长期不应用的key存储到本机磁盘上，让业务方不关怀缓存Key过大可能造成的问题。 作者：闲鱼技术——习武原文链接本文为阿里云原创内容，未经容许不得转载

首先，你得在微信开放平台的“管理中心”创立一个网站利用。这个网站利用的官网地址须要在工信部作ICP报备。 创立利用后，开明“微信登录”性能： 开明该性能须要作身份验证。上传公司营业执照等资料后，领取300米，会有指定的验证公司打电话给你核实身份。所有OK后就能够开明了。 开明后就能够应用微信登录性能啦!咱们先实现页面呈现微信二维码的性能，也就是官网文档说的 第一步：申请CODE创立一个login.html页面，代码如下： <!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> </head> <body> <div id='container'></div> <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> <script type="text/javascript"> var obj = new WxLogin({ self_redirect:true, id:"container", appid: "@#……￥##%2", scope: "snsapi_login", //网站都是这个参数 redirect_uri: "http://fenxiangyuntu.com/", state: "", style: "", href: "" }); </script> </body></html>redirect_uri是申请获取code的地址，该地址必须是你在微信开放平台申请的域名下的地址，并且要跟你的appid对应，否则会返回谬误。拜访http://localhost/login.html就...！扫描二维码后就会指向redirect_uri。像下面的例子我扫描后二维码的地位会变成我的网站主页。 WxLogin的redirect_uri只能指向网址，不能带端口号，咱们须要指向一个node.js的服务来解决接下来的操作，这里咱们应用nginx来做反向代理，对于nginx的配置参见：nginx反向代理以及我的文章：nginx的装置配置，使其能够拜访nodejs 将redirect_uri批改为redirect_uri: "http://fenxiangyuntu.com/getcode/",在nginx的配置文件中减少location /getcode/{ proxy_pass http://我的内网IP:6060/code/;}这样微信扫描后就会转向node.js的code路由。 app.get('/code', function(req, res) { var returnCode = req.query.code; const url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid=' + authoriz_data.appid + '&secret=' + authoriz_data.secret + '&code=' + returnCode + '&grant_type=' + authoriz_data.grant_type; request({ url: url, //申请门路 method: "GET", //申请形式，默认为get headers: { //设置申请头 "content-type": "application/json", } }, function(error, response, body) { if (!error && response.statusCode === 200) { res.send(body); //发送access_token到发动申请的页面 res.end(); } });})req.query返回redirect_uri?code=CODE&state=STATE这样咱们就获取了CODE ! ...

自从换了公司后这几年常常在忙着招人,面试的时候时不时地挖点坑看看他人会不会往里面跳...很久没写文章了,就顺便总结一些教训吧...我不确定能不能写完,写多少是多少吧. 1.GET 和 POST 申请有什么区别惯例问题了,有些文章说 POST 比 GET 平安啥的,说实话的确是无稽之谈, GET有长度下限啥也是浏览器自身给限度的, 还有一个说法是GET 不能传 body,于是我就用 express 跑了个小服务 const express = require('express')const app = express()app.use(require('express-body'))/* 测试入口 */app.use('/test', (req, res) => { res.send('test page here')})/* 接口 */app.use('*', (req, res) => { res.send(req.body)})app.listen('3000', () => { console.log('express start')})而后我在chrome里用 fetch 试了下 var myHeaders = new Headers();myHeaders.append("Content-Type", "application/json");var raw = JSON.stringify({"hello":"world"});var requestOptions = { method: 'GET', headers: myHeaders, body: raw, redirect: 'follow'};fetch("localhost:3000", requestOptions) .then(response => response.text()) .then(result => console.log(result)) .catch(error => console.log('error', error));果不其然,浏览器给我抛了个异样说 GET 或者 HEAD 的申请不能有body. ...

摘要：angular.js 精确的来说，应该不是一个框架，是一个 js 库，一个依赖于 jQuery 的进一步封装，去除繁琐的 DOM 操作，应用数据驱动的 MVC 模块化库。哎，很好受，间断两个大坑，都被我碰上了，以前没有写过 angular，还认为 angular 就是跟 vue, react 一样的框架，没想到 angular.js 跟 angular2 ，居然没有半毛钱关系，我是服了。居然是一个老古董我的项目。 只能退一步想了，先把根底地基打好了，前面再深刻框架原理。 还是依照三大步骤： what: 什么是 angular.jswhy: 为什么要应用 angular.jshow: 如何应用 angular.js什么是 angular.jsangular.js 精确的来说，应该不是一个框架，是一个 js 库，一个依赖于 jQuery 的进一步封装，去除繁琐的 DOM 操作，应用数据驱动的 MVC 模块化库。 这里扯到 MVC 这个词语，也不是很分明，我本人的了解 M 其实就是 Module 模块，一个 .html 就是一个模块， V 其实就是咱们 .html 外面那些 DOM 元素， C 就是咱们用来操作 V 那些 js 脚本。 我大略画了一个简略的草图： 不晓得对不对，如果不对，恳请各位大佬，提出贵重的倡议，让我有更大的晋升，谢谢。 为什么要应用 angular.js额，我必须要吐槽一下，为毛还要应用 angular.js，为毛不应用 angular2，好歹让我入门 ts 也好啊，好了，既来之，则安之。 用这个 js 库的一个要害起因就是因为能够去除繁琐的 DOM 操作。应用数据驱动视图的形式，进行开发，十分高效。 ...

作者：shadeed译者：前端小智起源：ishadeed点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... 当咱们应用 CSS 构建布局时，思考长短文本内容很重要，如果能分明地晓得当文本长度变动时须要怎么解决，能够防止很多不必要的问题。 在许多状况下，增加或删除一个单词会扭转 UI 的外观，更糟的是，它可能会毁坏原有的设计，使其无法访问。在我学习 CSS 的晚期，我低估了增加或删除一个单词的作用。在本文中，我会介绍几种不同的技巧，智米们能够马上应用它们来解决CSS中不同长度的文本。 问题在探讨解决文本内容的技巧之前，先来解释一下这个问题，假如咱们有一个垂直导航。 名字的长度能够变动，特地是如果你是在一个多语言网站工作。在下面的示例中，随着名称变长，它被包装到第二行。这里有一些问题 应该把这段文字截短吗应该换成多行吗？ 如果是，最多能够换行多少行？这种状况下单词比预期的多，然而当单词太长时会产生什么呢?默认状况下，它将溢出其容器。 作为业余前端开发人员，重要的是要确定在这种状况下应该要晓得怎么解决。 侥幸的是，有一些CSS属性就是专门用于解决此类问题。 除此之外，问题不仅在于长内容，短内容也会毁坏UI，或者至多会让它看起来很奇怪。如上面的示例 带有ok文本的按钮的宽度十分小。我并不是说这是一个致命的问题，但它会让按钮看起来很弱或很难被留神到。 在这种状况下咱们该怎么办？ 兴许在按钮上设置min-width？ 无论内容长度如何，都能够提供平安的宽度。 长内容在，大家曾经对问题有所理解，咱们接着深入研究CSS 技巧，这些技巧可为解决长内容提供解决方案。 overflow-wrapCSS 属性 overflow-wrap 是用来阐明当一个不能被离开的字符串太长而不能填充其包裹盒时，为避免其溢出，浏览器是否容许这样的单词中断换行。 HyphensCSS 属性 hyphens 告知浏览器在换行时如何应用连字符连贯单词。能够齐全阻止应用连字符，也能够管制浏览器什么时候应用，或者让浏览器决定什么时候应用。 .element { hyphens: auto;} 文本截断解决截断是指在句子的开端增加点，以表明有更多的文本内容。 没有text-truncation属性或其余属性，然而它混合了一些CSS属性，能够为咱们实现工作。 .element { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}多行文本截断解决如果要截断多个行，能够应用line-clamp属性。 .element { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}要让这种工作，必须应用display: -webkit-box。-webkit-line-clamp指定截断工作的最大行数。 ...

<img src="data:image/jpeg;base64,这里是64位编码"/>,就像有一个data属性,它的值是image/jpeg,再加编码格局。data:image/jpeg;base64。jpeg图片格式能够换成其余的格局,比图png

作者：Samantha Ming译者：前端小智起源：medium点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... 上面的代码片段，用于查看对象是否为空。 对于较新的浏览器，你能够应用 ES6 的 “Object.keys”。????对于较旧的浏览器，能够装置Lodash库并应用其“ isEmpty”办法。 const empty = {};/* ------------------------- 较新的浏览器----------------------------*/Object.keys(empty).length === 0 && empty.constructor === Object// true/* ------------------------- 老版本的浏览器能够应用 Lodash----------------------------*/_.isEmpty(empty)// true什么是原生 JavaScript原生 JavaScript 指的是不应用框架或库。 它只是惯例的一般 JavaScript，没有应用Lodash或jQuery之类的库。 A.在较新的浏览器中查看空对象咱们能够应用内置的Object.keys办法查看空对象。 const empty = {};Object.keys(empty).length === 0 && empty.constructor === object;为什么咱们须要额定的constructor 查看？你可能想晓得为什么咱们须要对 constructor 进行查看。 它是为了笼罩包装器实例。在JavaScript中，咱们有9个内置的构造函数。 new Object();new String();new Number();new Boolean();new Array();new RegExp();new Function();new Date();这里，咱们能够应用new Object()创立一个空对象。 注：永远不要应用构造函数创建对象。 这被认为是不好的做法，请参阅 Airbnb Style Guide 和 ESLint。const obj = new Object();Object.keys(obj).length === 0; // true因而，仅应用Object.keys，当对象为空时，它确实会返回true。 然而，当咱们应用其余构造函数创立新的对象实例时会产生什么。 ...

译者：前端小智起源: dev作者：Joy Shaheb点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... 2021 年了，咱们在来从新温习一下 flexbox 的用法，还有一些用的比拟少的属性，不便大家了解，这里应用乏味的图片来解说。 FlexBox 架构 FlexBox图表 flex-directionflex-item在flex-container外部散布的行/列方向。 justify-contentjustify-content用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐形式 align-contentalign-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和四周调配空间。 align-items和justify-content不同的是，align-items次要是垂直方向的对齐形式，属性介绍：flex-start、flex-end、center、initial、inherit。 align-content 和 align-items 区别： align-items 实用于单行状况下，只有上对齐，下对齐，居中和拉伸align-content 适应于换行(多行)的状况下(单行状况下有效)，能够设置对齐，下对齐拉伸以及平均分配剩下空间等属性值。总结就是单行找 align-items 多行找 align-content。align-self flex - grow | shrink | wrapflex-grow : 依据flex容器的宽度来减少flex-item的大小。flex-shrink 属性指定了 flex 元素的膨胀规定。flex 元素仅在默认宽度之和大于容器的时候才会产生膨胀，其膨胀的大小是根据 flex-shrink 的值。flex-wrap 指定 flex 元素单行显示还是多行显示 。如果容许换行，这个属性容许你管制行的重叠方向。 简写 flex:它是flex-grow， flex-shrink和flex-basis组合的简写。flex-basis：这相似于为flex-item增加宽度，只是更加灵便。flex-basis: 10em它将弹性我的项目的初始大小设置为10em，其最终大小将取决于可用空间，flex-grow和flex-shrink。 完~，我是小智，我要去刷碗了，咱们下期见！ 代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。 ...

咱们的目标是制作基于高德地图API的地图数据编辑工具，地图编辑页面应该是html+js的，因为基于vue封装欠缺的高德地图组件目前还没有。 html如何与node.js通信呢？解决了这一问题，咱们就能够将在html中调用高德API采集的坐标数据传递给node.js server，再通过node.js调用微信小程序数据API来保留或读取小程序数据库。 看下上面的例子： //page.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="text" id="username" placeholder="请输出用户名"> <button id="bt">提交</button> <h1 id="test"></h1> <script src="page.js"></script></body></html>援用的page.js: //page.jsvar test = document.getElementById('test');var bt = document.getElementById('bt');bt.onclick = function () { var value = document.getElementById('username').value; var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange=function() { if (xmlHttp.readyState==4 && xmlHttp.status==200) { test.innerHTML = xmlHttp.responseText; } }; xmlHttp.open('POST', 'http://127.0.0.1:3000/', true); xmlHttp.send(value); //把input框中的value发送过来};留神：下面的page页和node.js无关，咱们能够用tomcat来进行公布。接下来咱们在http://127.0.0.1:3000/ 的端口创立一个node.js服务： //app.jsvar http = require('http');var server = http.createServer(function (req, res) { var body = ''; req.on('data', function(data) { // 接管客户端发送过去的数据， 也就是 xmlHttp.send(value); body += data; }); req.on('end', function() { res.writeHeader(200, { 'Content-Type': 'text/plain', 'Access-Control-Allow-Origin': '*' //解决跨域问题 }); res.write("hello:" + body); res.end(); })});server.listen(3000, function () { console.log('server start at localhost:3000');});首先命令行启动node.js服务： ...

MVC 是什么MVC是一种软件架构设计思维,基于MVC架构将咱们的应用软件进行分层设计和实现,例如能够分为视图层(View),管制层(Controller),模型层(Model),通过这样的分层设计让咱们程序具备更好的灵活性和可可扩展性.因为这样能够将一个简单应用程序进行简化,实现各司其职,各尽所能.比拟适宜一个大型利用的开发. Spring MVC 概述Spring MVC是MVC设计思维在Spring框架中的一种实现，基于这样的思维spring框架设计了一些相干对象，用于更好的基于MVC架构解决申请和响应，其繁难架构如图所示：其中：1)DispatcherServlet是客户端所有申请解决的入口,负责申请转发。2)RequestMapping负责存储申请url到后端handler对象之间的映射。3)Handler 用于解决DispatcherServlet对象转发过去的申请数据。4)ViewResolver负责解决所有Handler对象响应后果中的view。 Spring MVC 疾速入门筹备工作第一步：创立我的项目module，根本信息如图所示： 第二步：增加我的项目依赖(能够在module创立时，也能够创立后)，代码如下： Spring Web 依赖(提供了spring mvc反对并且会嵌入一个tomcat) <!--增加spring web模块依赖反对（这个依赖中默认会嵌套一个tomcat服务器）--><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId></dependency>Thymeleaf 依赖(提供了以html作为页面模板进行解析和操作的相干对象） <!--spring boot 中默认反对的一个模板引擎，这个引擎能够以html作为模板，咱们能够在模板上增加thymeleaf自定义的标签属性，而后基于属性操作数据，这种引擎次要是用于取代jsp技术--><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>第三步：启动我的项目检测控制台启动状态是否OK static 目录剖析及利用static 目录为springboot工程创立时增加了web依赖当前主动创立的目录，此目录中能够存储html、css、js、image，这些资源能够在启动服务器当前，间接在浏览器进行拜访。例如：第一步：在static目录下创立一个index.html页面，代码如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <h1>The First Html Page</h1></body></html>第二步：启动服务器并间接进行拜访测试,如图所示 templates 目录剖析及利用templates 目录为springboot工程创立时增加了thymeleaf依赖当前主动创立的目录，此目录中要存储一些html模板，这个模板页面不能间接通过浏览器url进行拜访，须要基于服务端控制器，在办法中定义页面响应，例如： 第一步：定义TemplateController及办法，代码如下： package com.cy.pj.health.controller;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;@Controllerpublic class TemplateController { @RequestMapping("doTemplateUI") public String doTemplateUI(){ return "default"; }}第二步：在templates目录中定义模板页面default.html，代码如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <h1>The Default Template page</h1></body></html>其中,如果default.html要在放在templates子目录中,则还须要在配置文件中配置thymeleaf的前缀,例如: spring.thymeleaf.prefix=classpath:/templates/module/第三步：启动服务进行拜访测试，如图所示： 第四步：拜访过程中的BUG剖析 ...

作为这一代的企业主，你可能会说，你最大的资产之一就是你的网站。它是你最大的营销工具，能够吸引潜在客户，对你虔诚。能够帮你减少销售线索，减少流量，甚至减少销量！你应该为你的网站感到自豪——它反映了你的业务，并作为一个平台将你和你的客户连贯到任何中央。说了这么多，你应该晓得正确的办法来优化你的网站，把它变成一个销售工具。把你的网站变成一个销售工具。 明天，网站监控将与您分享确保您的网站成为销售工具的无效办法，这能够帮忙您胜利和倒退您的业务，从而确保您对网站无益。 满足客户需要客户在你的网站上寻找的一件事是他们是否能在你的网站上看到他们在寻找的货色。你须要给他们他们想要的货色，这样他们能力学会观赏你的网站，更频繁地回来。因而，他们会对你产生真正的趣味，使他们成为你网站的常客，因为他们次要喜爱他们在网站上看到的货色。 确保它响应迅速一个响应迅速的网站意味着它能够在个人电脑和挪动设施上运行。平稳过渡、引人注目的设计、挪动设施的可拜访性和良好的用户体验都有助于领有一个响应迅速的网站。 确保它是搜索引擎优化敌对的你的网站设计和内容能够操作，成为SEO敌对。　这样能够让你的网站在Google等搜索引擎中排名最高。 品质内容的重要性你能吸引他们注意力和趣味的一件事就是展现吸引人的内容——提供生存黑客的相干信息、新常识或内容，能够帮忙你的客户更好地实时经营。例如，博客是向客户灌输新货色的好办法，这些新货色对他们的客户来说很乏味，对他们的日常生活也有帮忙。 每个公司都要思考规模搜索引擎优化(SEO)。世界上最重要的搜索引擎优化(SEO)公司之一，它始终是惟一真正的有机营销渠道，无论它是在不付费的状况下逐步致力取得互联网知名度。然而，有机物不是收费的。优化你的网站是一项艰巨的工作——然而，这并不意味着你必须间接尝试所有。最简略的动手办法就是专一于网站的次要搜索引擎优化(SEO)技巧，逐个找出问题所在。这使得订单对于估算缓和的公司至关重要。晓得在哪里削减开销和投资，会对你的投资产生微小的影响。如何应用网站晋升公司销售业绩　思考到这一点，这里有一些最小化搜索引擎优化(SEO)估算的技巧。 清晰的网站构造: 如果一个网站的构造不容易被搜索引擎爬虫和用户导航，那么你在网站上实现的SEO提醒占多大比例并不重要。这意味着通过古代网站建设为小企业建设一个层级构造，波及页面、类别、子类别、外部链接和题目。领有一个清晰的网站构造能够满足你的两个次要指标。首先，你的内容会被Google抓取工具疾速了解和排名。其次，集体很容易浏览，这无疑会给他们带来更多的麻烦，让他们能够留在你的网站上，从网站上购买一个产品，或者当前再次应用该产品。如果你对网站的构造没有把握，Google匍匐工具可能会失落你的很多材料，让人很难初步找到材料。应该优先思考内容创立:生成和交付高质量的内容是SEO服务最重要的方面。 最小化搜索引擎优化估算的办法。 监控所有费用: 这是取得最适度的搜索引擎优化估算的第一步。　无论是挪动利用开发公司，还是数字营销公司，最重要的因素是恪守免费规范。确定流量合规性指标。是故事签约、产品购买、关键词排名，还是用户返回你网站的比例？为了帮忙你在谷歌中排名更高以察看你的提高，请应用所有举荐的搜索引擎优化(SEO)工具中的至多一个。立刻施行批改。然而，如果一下子把所有的操作都做了，你会感觉有什么成果吗？

如果一个网站设计得更实用、更奇异、更翻新，那么它就能失去更好的倒退。网站设计是用户第一次进入网站时取得的视觉信息。那么，什么是网页设计呢？应该提出什么要求？ 页设计，又称网页界面设计，是企业向用户传递产品、服务、思维、文化等信息流的一种形式。和远程桌面平时看到的平面设计有些区别。最重要的是使用文字和图片的联合，从而实现一个十分好的协调好看的布局网站设计。 网页设计应该满足的要求之一是反映不同页面之间的关系，精确了解网站之间的关系、网站的步骤和重要内容、网站的外部治理和空间区域。为了更好的展示最终后果，要特地留神布局是否正当协调，以丑化视觉的合理性，让用户有晦涩的视觉体验。 网站设计的基本要求是什么？ 什么是网站设计？一起来看看　1、清新优雅 想要体现新鲜感，在色调的搭配上要更简洁，网站的布局后果要更优雅。如果一个网站的布局过于凌乱，就不会有对用户有吸引力的后果。 2.个性化 从这个角度来说，网站设计应该是翻新的，网页设计不应该呈现所谓的“大众化”。如果你的网站设计在外观和布局上和其余网站设计一样，对网站设计没有任何劣势，这样的网站设计不会被用户记住。因而，在设计网站时，咱们应该留神有很好的翻新。 3.一致性 对立是指咱们在设计网站时要保障整体性和一致性，协调是指页面的所有元素都要谐和天然，包含字体和色彩。它要求网站设计的视觉结果要与人的视觉感触相交融，可能互相沟通，达成共识。

前言最近我的项目有用到圆环进度条，所以也找了一些文章，看看是如何实现的。市面上的文章讲述的实现形式根本都是两个长方形旋转和canvas这两种形式，大家如果有趣味能够本人去找找，百度一搜一大把????。然而我做的我的项目是小程序（提供demo是vue版本），canvas层级十分高，尽管官网提供了同层canvas，然而同层canvas在官网社区上反馈bug十分多，而且感觉比拟重，所以就没思考。两个长方形旋转的形式我之前也试过，真机上两个长方形交接处会存在差不多1px的间距，始终无奈修复，也没法和设计说只能这样是不是。而后无意之中看到了这样一个demo，感觉关上了新世界，原来圆环进度条还能这样实现啊！！ linear-gradient实现圆环先看下先看下咱们要实现的成果下面的图能够拆分为4个dom构造，或者这样看你更清晰最底层为深红色的圆两头红色的小圆，用来遮蔽最底层的圆，视觉上造成圆环的成果彩色的两个小圆，用于实现带圆弧的圆环进度条首先咱们先实现最底部深红色的圆 <div class="progress-radial"></div>.progress-radial { position: relative; width: 120rpx; height: 120rpx; border-radius: 50%; background-image: linear-gradient(90deg, #C40006 %, #FECC1C); line-height: normal; display: flex; align-items: center; justify-content: center; z-index: 1;}这时咱们会失去这样一个圆当然，这必定不是咱们想要的成果，咱们并不需要这个 过渡 的成果，所以能够批改一下 linear-gradient 的节点，让节点重合造成清晰的界限 background-image: linear-gradient(90deg, #C40006 50%, #FECC1C 50%, #FECC1C);这时咱们就能够失去一个两种色彩对半分并且没有过渡色的圆假如咱们把 黄色 作为以后进度，那咱们在这个圆上加个遮罩层，不就能够失去一个进度为50%的圆环进度条了吗！ <div class="progress-radial"> <div class="progress-text"></div></div>.progress-radial { position: relative; width: 120rpx; height: 120rpx; border-radius: 50%; background-image: linear-gradient(90deg, #C40006 50%, #FECC1C 50%, #FECC1C); line-height: normal; display: flex; align-items: center; justify-content: center; z-index: 1;}.progress-radial .progress-text { width: 88rpx; height: 88rpx; background: #ED1937; border-radius: 50%;}尽管。。。咱们失去了这个50%的圆环进度条，然而进度不可能始终都是50%呀????，咱们必须依据理论的数据去算进度到底是多少，也就是说，咱们必须要让这个进度条动起来。那咱们该怎么让进度条动起来那假如咱们先动一下 linear-gradient 的 angle ，让 angle = 145deg 会失去上面这样的状况尽管进度是动了起来，然而进度条的起始点不在 90deg 上，那有没有方法能够实现起始点在 90deg 上，然而进度条还能够动起来呢？答案必定是能够的。咱们将这个圆设想成高低两个局部，当进度小余50%的时候，高低两局部如下图所示图一图二将 图一 盖到 图二 上的话就能够失去一个全红色的圆 ...

1. 容器的布局方向和排列方向???? flex-direction管制主轴是哪一根同时管制主轴的方向(排列形式) row：从左往右的x轴row-reverse：从右往左的x轴column：从上往下的y轴column-reverse：从下往上的y轴2. 富裕空间的治理????只决定富裕空间的地位，不会给项目区调配空间 ????主轴 :justify-content flex-start：在主轴的正方向flex-end: 在主轴的反方向center： 在两边space-between：在我的项目之间space-around：在我的项目两边????侧轴 : align-items 治理单行的富裕空间 垂直于主轴的轴 flex-start：在侧轴的正方向flex-end： 在侧轴的反方向center：在两边baseline: 基线对齐stretch: 等高布局（我的项目没有高度）space-aroundspace-evently3. 弹性空间的治理flex-grow：弹性因子（默认值为0） 4. flex容器（CSS3新增）???? flex-wrap 管制侧轴的方向 可选值：wrap-reverse、wrap、 nowrap nowrap 不换行wrap 侧轴方向由上而下（flex-shrink生效）wrap-reverse 侧轴方向由下而上（flex-shrink生效）???? align-content 多行多列时,富裕空间的治理，会把所有行、列看成一个整体 ????侧轴富裕空间的治理总结： 单行单列align-itemsalign-self（优先级高）多行多列align-content(多行时以它为基准)????flex-flow :flex-direction和flex-wrap的简写属性，实质上管制了主轴和侧轴别离是哪一根，以及他们的方向。????flex-grow:将主轴上的富裕空间按比例调配到我的项目上!属于定义弹性盒子(flex-item)的弹性因子,默认值为0????代码示例： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 400px; height: 300px; border: 1px solid; margin:100px auto; display:flex; /*flex-direction: row;*/ /*flex-wrap: wrap-reverse;*/ flex-flow:row wrap-reverse; justify-content: flex-start; align-items: flex-start; align-content: flex-end; } #wrap > .item{ width: 50px; height: 50px; background: pink; text-align: center; line-height: 50px; flex-grow: 1; } #wrap > .item:nth-child(1){ align-self: center; flex-grow: 4; order:3; } </style> </head> <body> <div id="wrap"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </body></html>5.flex布局——我的项目新增order:管制我的项目的排列程序，order越大我的项目越后align-self：我的项目本身富裕空间的治理flex-shrink：膨胀因子（默认值为1）；起作用前提：flex-wrap为nowrap；我的项目的总宽度超出容器时，进行伸缩flex-basis:（默认值为auto）伸缩规定计算的基准值（默认拿主轴width或height的值）伸缩规定????flex-grow拉伸因子规定 以下面demo为例 ...

术语 w3c组织定义的语言规范（https://www.w3.org/）用于形容页面构造的语言 （超文本标记语言）可参考文档：MDN罕用的元素 1. 文本元素：h（h1~h6）1级题目~6级题目 （块级元素）`<h1></h1>`p 段落 （块级元素）`<p></p>`span （无语义,仅用于设置款式,行内元素） `<span></span>`pre （预格式化文本元素,不会被空白折叠） `<pre></pre>`（空白折叠：在源代码中的间断空白字符（空格,换行,制表）会被折叠为一个空格）还有其余文本元素如：b,i,em,s等2. a元素：超链接 `<a></a>`href属性：通常示意跳转地址作用：一般链接 锚链接（利用id） 性能链接（执行js代码：'javascript:'。发送邮件：'mailto:'。拨号：'tel:'） target属性：示意跳转窗口的地位 target取值： _self：在以后页面窗口中关上 _blank：在新窗口中关上 门路的写法： 门路有 绝对路径 和 相对路径 站内资源可应用相对路径和绝对路径 站外资源应用绝对路径 绝对路径书写格局：协定名://主机名:端口号/门路 schema://host:port/path 协定名:http,https,file 主机名:域名,IP地址 端口号:若协定为http,默认端口号为80。若为https,默认端口号为443 相对路径书写格局：以./或者../结尾（./可省略）, （./示意以后资源所在目录 , ../示意返回上一级目录） 3. 图片元素（img） `<img src="" alt="">` src属性：source alt属性：当图片资源生效时，会应用该属性的文字代替图片 和a元素联用：a标签包裹img标签 和map元素联用：map应用name属性 img标签则应用usemap属性 map的子元素：`<area shape="" coords="" href="" alt="" target="">` shape:区域形态（圆形,矩形,多边形） coords:形态的关键点坐标（掂量坐标时可应用业余的掂量工具:pxcook,ps,...） 和figure元素(HTML5新增)联用：figure包裹a元素和img元素（应用场景：图片有其余的文字信息） 4. 多媒体元素（HTML5新增） 视频：`<video src=''></video>`（格局：mp4，webm） 音频：`<audio src=''></audio>` （可在其子元素source中写属性src） 一些属性取值：controls（显示控件），autoplay（自动播放）,muted（静音播放），loop（循环播放） 兼容性：旧版本的浏览器不反对这两个元素（以前少数应用flash） 不同的浏览器反对的音视频格局可能不统一 5. 列表元素 有序列表：ol，li（ol的type属性：可抉择排序序号的类型） 无序列表（较罕用）：ul，li（ul同样有type属性） 定义列表：dl，dt，dd（通常用于一些术语的定义） 对于type属性：除非列表中序号很重要（比方，在法律或者技术文件中条目通常被须要所援用），否则请应用 CSS 属性 list-style-type 能够设置列表元素的 marker（比方圆点、符号、或者自定义计数器款式）。) 属性代替。 6. 容器元素（该元素代表一个块区域，外部用于搁置其余元素） div：`<div></div>` header：通常用于示意页头 footer：通常用于示意页脚 article：通常用于示意整篇文章 section：通常用于示意文章章节 aside：通常用于示意侧边栏 （其中header,footer,article,section,aside都为语义化容器元素，是HTML5的元素） 7. 表单元素（次要用于收集用户数据） input：`<input type='' value=''>` （输入框） type属性：输入框类型。可选text,passwprd,file,date,range(滑块),search,color,checkbox(多选框),radio(单选框),reset(重置按钮),button(一般按钮),submit(提交按钮),... value属性：输入框的值 placeholder属性：显示提醒的文本，文本框没有内容提醒 select：`<select><option></option></select>`（通常和option元素配合应用） 可进行分类抉择：select与optgroup配合应用 textarea：`<textarea name='' cols='' rows=''></textarea>` （文本域） cols:列数 rows:行数 button：`<button type=''></button>` （按钮） 可于img配合应用 配合表单元素应用的一些元素：label（label的for属性与input的id属性关联） datalist（该元素自身不会显示到页面,通常和一般文本配合。datalist的id属性与input的list属性关联） form（通常会将整个表单元素搁置到form元素的外部，作用是当提交表单时会将form元素的表单内容以适合的形式提交到服务器。有action和method属性） fieldset（表单分组。子元素：legend（分组题目）） 表单状态：readonly（是否只读）,disabled（是否禁用） 一些无关表单的伪类元素：focus（聚焦款式）,checked（单选框或多选框被选中的款式） 8. 表格元素 当初很少用，后盾管理系统可能会应用表格元素 表格外层：`<table></table>` 表头：thead 表体：tbody 表尾：tfoot 行：tr 单元格：th/td （在tr里） td里的属性：colspan（合并列） rowspan（合并行） 对于块级元素和行内元素： ...

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

作者：Ahmad译者：前端小智起源：ishadee点赞再看，微信搜寻【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... 你是否常常心愿有一个CSS个性能够轻松创立一个可滚动的容器? CSS scroll snap 能够做到这一点。在晚期的前端开发中，我依附 JS 插件来创立滑块组件。有时，咱们须要一种简略的办法来疾速将元素制作成可滚动的容器。当初，多亏了 CSSS scroll snap ，咱们能够简略做到这一点。 为什么要应用 CSS Scroll Snap随着挪动设施和平板设施的衰亡，咱们须要设计和构建能够轻触的组件。 以图库组件为例。 用户能够轻松地向左或向右滑动以查看更多图像，而不是分层构造。 依据CSS标准，为开发者提供良好管制的滚动体验是引入 CSS scroll snap的次要起因之一。它加强了用户体验，并使其更容易实现滚动体验。 滚动容器的基础知识要创立一个滚动容器，以下是咱们须要做的根本内容 应用 overflow一种将我的项目彼此相邻显示（内联）的办法举个例子: <div class="section"> <div class="section__item">Item 1</div> <div class="section__item">Item 2</div> <div class="section__item">Item 3</div> <div class="section__item">Item 4</div> <div class="section__item">Item 5</div></div>.section { white-space: nowrap; overflow-x: auto;}多年来，应用white-space: nowrap是一种风行的CSS解决方案，用于强制元素放弃内联。不过，当初咱们根本都应用 Flexbox : .section { display: flex; overflow-x: auto;} 这是创立滚动容器的根本办法。然而，这还不够，这不是一个可用的滚动容器。 滚动容器有什么问题问题是，与滑动相比，它们并不能提供良好的体验。在触摸屏上滑动手势的次要益处是，咱们能够用一根手指程度或垂直滚动。 实际上须要将每个我的项目挪动到它本人的地位。这并不是滑动，这是一种十分蹩脚的体验，通过应用CSS scroll snap，咱们能够通过简略地定义snap points来解决这个问题，它将使用户更容易地程度或垂直滚动。 接着，咱们来看看如何应用CSS scroll snap。 ...

https://www.jianshu.com/p/499...https://www.jianshu.com/p/e5c...

HTML字符实体（character entities）在 HTML 中，某些字符是预留的。 在 HTML 中不能应用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。 如果心愿正确地显示预留字符，咱们必须在 HTML 源代码中应用字符实体。 如显示小于号: &lt; 或 &#60;应用实体名而不是数字的益处是，名称易于记忆。害处是，浏览器兴许并不反对所有实体名称（对实体数字的反对却很好）。罕用字符实体显示后果形容实体名称实体编号 空格 &nbsp;&#160;<小于号&lt;&#60;>大于号&gt;&#62;&与号&amp;&#38;"双引号&quot;&#34;'单引号&apos;（IE不反对）&#39;￠分&cent;&#162;£镑&pound;&#163;¥日圆&yen;&#165;§节&sect;&#167;©版权&copy;&#169;®注册商标&reg;&#174;×乘号&times;&#215;÷除号&divide;&#247;更具体的字符实体能够看这里https://blog.csdn.net/QXXXD/article/details/111043532本义、反本义HTML实体字符/** * 把html本义成HTML实体字符 * @param str * @returns {string} * @constructor */function htmlEncode(str) { var s = ""; if (str.length === 0) { return ""; } s = str.replace(/&/g, "&amp;"); s = s.replace(/</g, "&lt;"); s = s.replace(/>/g, "&gt;"); s = s.replace(/ /g, "&nbsp;"); s = s.replace(/\'/g, "&#39;");//IE下不反对实体名称 s = s.replace(/\"/g, "&quot;"); return s;}/** * 转义字符还原成html字符 * @param str * @returns {string} * @constructor */function htmlRestore(str) { var s = ""; if (str.length === 0) { return ""; } s = str.replace(/&amp;/g, "&"); s = s.replace(/&lt;/g, "<"); s = s.replace(/&gt;/g, ">"); s = s.replace(/&nbsp;/g, " "); s = s.replace(/&#39;/g, "\'"); s = s.replace(/&quot;/g, "\""); return s;}！

家喻户晓，企业网站设计的设计格调过后都是走在前列的，只是互联网倒退太快了。就像，十几年过来了，马云的淘宝降级更新了很屡次，单版本更新就多达六次。所以版本更新也是咱们前期经营不可短少的一部分，然而网站改版降级须要留神什么呢？在这里，咱们与你分享。　1.不要更改企业网站的题目、形容等关键词。如果这些关键词常常被更改和批改，搜索引擎就会被误认为被入侵和批改，导致可信度降落，而后权重随之降落。　第二，企业网站的栏目和导航构造是咱们企业网站十分重要的一部分，对于用户来说不仅习惯了这种模式和逻辑，还会造成用户的困扰，所以得失相当。　第三，企业网站的原始信息，很多用户习惯性的为下一个利用保留有价值或者喜好的货色，而且因为咱们的版本更新，内容掉线或者地址版本更新，那么下一次用户进去就会失望，咱们又会掉线客户。 所以，版本更新不是一件小事，它关系到咱们企业网站建设的方方面面。所以对版本更新千万不要抱相似的态度，肯定要做好。这才是咱们版本更新的真谛。咱们不须要因为版本更新而更新版本。咱们所心愿的是为用户提供更好的体验结果，这是咱们的初衷。网站改版须要留神什么　因为很多时候，公司只理解对网站的需要，而不晓得网站能对公司做什么。因为对网站理解不够，个别在网站建设时会犯以下重大问题；所以想和大家分享一下这三个重大问题的存在，心愿资助大家。 第一，数据采集，很多企业网站技术人员为了不便间接采集大量网络信息，尤其是间接利用而不进行修改，会对网站造成很大的弊病，不会达到网站的理论结果。 二、广告投放过多，网站广告能够让网站受众疾速理解网站的最新推广信息，所以很多站长会在网站上投放广告，以便更好的疾速开辟产品市场。然而如果有大量的广告，尤其是一些弹出的广告信息内容，很容易导致用户的恶感。 三是常常批改。网站框架结构的稳定性对于网站，尤其是搜索引擎来说十分重要。它不违心把客户引向不确定的网站，这也会升高其用户体验；所以会用惩戒战术屏蔽你网站的信息内容，让别人找不到你的网站，这样咱们得失相当。

HTML <!--...--> 正文<!--正文内容 -->是HTML的正文标签应用 "< "和 ">" 是合乎HTML标签语法规定的。 所有浏览器都反对正文标签。正文标签用于在源代码中插入正文。正文不会显示在浏览器中。应用正文对代码进行解释，有助于您在当前的工夫对代码的编辑。应用正文标签来暗藏浏览器不反对的脚本是一个好习惯（这样就不会把脚本显示为纯文本）：<script type="text/javascript"><!--function displayMsg(){alert("Hello World!")} //--></script>正文：正文行结尾处的两条斜杠 (//) 是 JavaScript 正文符号。这能够防止 JavaScript 执行 --> 标签。 举例: <!DOCTYPE html><html><body><!--这是一段正文。正文不会在浏览器中显示。--><p>这是一段一般的段落。</p></body></html>条件正文 <!--[if IE 9]> .... some HTML here .... <![endif]-->条件正文定义只有 Internet Explorer 执行的 HTML 标签。

随着手机用户数量的稳步减少，公司对网站建设的要求不再是满足于网页，而是更加被动、主动地寻找一个能够切入手机的网站。从此倒退成两个方向:一个是网页和手机的辨别，也变成了PC站和手机站，另一个是两者的联合，产生了一种新的网站叫Responsive，既能满足电脑又能满足手机的浏览和浏览。尽管很多公司抉择广州网站制作协会更偏向于建设响应式网站，但还是有一些问题无奈齐全解决，所以, 咱们总结了几年来的一些相干教训，可供公司参考　1.响应性网站的加载工夫比拟长，因为响应性网站须要加载很多css款式和js代码，尤其是图片的调整，这是影响加载工夫的根本起因　第二，响应式网站的布局，其设计是抉择液体护具，所以对于设计格调来说是一个症结，特地是对于把握不够的，把握起来就更难堪了响应式网站在网站制作上有哪些有余？　第三，响应式网站对谷歌的影响。到目前为止，Google还不能反对锡耶纳的响应式网站，也不反对索引，所以会间接影响搜寻排名后果　4.当响应性网站优化搜索引擎时，响应性网页设计很难了解搜索引擎的关键词。是因为与桌面用户的均匀数量相比，移动用户往往会抉择不同的症结词，不不便纠正问题等事项　天然，咱们深信所有都不是间接的好与坏，而只是更重要的好与坏，只有整合公司对网站的需要，能力找到最适宜公司的网站建设模式。

1.关注20%　你据说过80/20法令吗？简而言之，80%的用户个别只应用你网站内容和性能的20%，大部分用户只是浏览网站内容，只抉择事实感兴趣的浏览。　合在一起，这也意味着剩下的20%相当重要。大部分点击都会源自这个区域，也是一个近乎完满的内容和交互区域。你能够用数据分析来决定整个网站的20%中哪个局部最受关注。对于刚上线的网站来说，这个数据收集过程可能须要几个星期，而后再进行调整。　当然，你也能够疏导用户到你冀望他们去的20%区域。在视觉疏导和口头号召策动的帮忙下，用乏味的、有意思的策动来发明有意思的区域，让他们乐于点击，进而达到本人的用意。　2.结构化思维　策动一个网站相似于盖房子。首先须要一个松软的根底，而后是一个能承载所有内容的构造，做完之后要好好装修。同样的思维形式也能够利用到网站策动上。企业建站的相干留神细节分享　更重要的是，你不须要去发明以前构造中没有呈现过的货色。换句话说，构造中的资料和组件与咱们常见的没有什么不同。就像同样模式的导航布局一样，目前的布局往往是通用的，因为这样的导航很容易应用。　当网站的整体构造建设起来后，同样的思路也能够利用到内容体系的构建上。高级文本内容是整个网站内容的基本。借助吸引题目、图片等二次元素，能够疾速建设整个内容体系。　3.不要问太多　当初的世界能够说是由数据驱动的。越来越多的利用开始要求用户注册，为用户提供更多的权力和更多的信息，以便为用户提供更个性化的体验。然而，从教训来看，咱们应该尽可能防止这种状况。　站在用户的角度，略微考虑一下就明确了。找一个本人感兴趣的酷炫网站。如果你想理解更多，你须要它，然而如果你想注册，网站建设须要你提供很多信息，比方名字、邮件、地区、城市、电话号码、如何找到这个网站等等。那么接下来你会怎么做呢？绝大多数用户会间接转身来到。填写这个注册信息太吃力，体验太差。　4.欢快的微交互　很多时候你可能没有留神到，你与各种微交互的交互总是存在的。

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。块级元素：独占一行，宽度和父元素宽度一样宽（默认）能够设置宽高设置的width属性和元素的宽度（width+padding2+border2+margin2）是两回事(盒子模型)如果没有设置高度，高度由内容撑开块级元素能够包裹别的元素。p标签尽量不要包裹别的块级元素罕用的块级元素： <div> </div>：块级的块标签，用于在成果中 定义一块； <p> </p>：段落标签，用于展现成果中划分段落； <h1>.....<h6> ：题目标签，用于展现成果中划分题目； <ol> </ol>：有序列表标签，用于在成果中定义一个有序列表 <ul> </ul> ：无序列表标签，用于在成果中定义一个无序列表； <dl> </dl>：引起定义列表； <table></table>：表格标签，用于在成果中定义一个表格； <form></form>：指定所蕴含控件在表单中起作用。 行内元素：能够和别的标签共享一行，标签的宽度和高度由内容决定不能设置宽高，外边距和内边距局部可管制(盒子模型)罕用的行内元素： <a> </a>：超链接标签，用于在成果中定义一个能够点击跳转的链接； <span></span>行级的块标签，用于在成果中 一行上定义一个块，进行内容显示； </br> ：换行； <i> ：指定文本应以斜体渲染，若可用的话； <em> ：强调文本，通常以斜体渲染； <strong> ：以粗体渲染文本； <label> ：为页面上的其它元素指定标签； <q> ：拆散文本中的引语； <cite>：用斜体显示表明引言； <code>：指定代码范例； <var>定义编程变量。通常以斜体渲染； 行内块级元素：能够和别的元素共享一行，宽高由内容决定（默认）能够设置宽高留神：行内块级元素并排显示的时候，两个行内块级元素之间默认有一个距离勾销行内块级元素之间的空格：（1）给行内元素的父元素设置字体大小为0px（行内元素的内容无奈显示，行内元素之间的空格也无奈显示）（2）给行内元素设置正当的字体大小（行内元素的内容就能显示了） 罕用的行内块状元素： <img></img> ：图片标签，用于在页面成果中展现一张图片； <input></input> ：创立各种表单输出控件。

HTML表格组成:由<table>标签以及一个或多个<tr>、<th>或<td>标签： <table> 标签：用来定义表格，整个表格蕴含在<table></table>标签中；<tr>标签：用来定义表格中一个行，它是单元格的容器，每行能够蕴含有多个单元格，由<tr></tr>标签示意；<td>标签和<th>标签：用来定义单元格，所有单元格都在<th>标签内，每个单元格由一对<td></td>标签或一对<th></th>标签示意，具体的表格内容搁置在这一对<td>标签或<th>标签之中，其中th标签中的内容默认以粗体、居中的形式显示。其语法如下： <table> <tr> <th>1行1列的内容</th> <th>1行2列的内容</th> … </tr> <tr> <td>2行1列的内容</td> <td>2行2列的内容</td> … </tr> …</table>是的下层标签;<tr>必须在一个<table></table>外面,它不能独自应用,相当于<table>的属性标签;标示一个表格,标示这个表格两头的一个行，、标示行中的一个列,须要嵌套在两头;table标签属性:1）border标签属性：设定围绕表格的边框的宽度。实际上border标签属性不仅设置围绕表格边框的宽度，还为每个单元格增加宽度为1px的边框；例： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>border标签属性</title> <style> table{ border: 15px solid #000; } th,td{ border: 1px solid #000; } </style> </head> <body> <table > <tr> <th> 姓名 </th> <th> 年龄</th> <th> 性别</th> </tr> <tr> <td> 张三</td> <td> 19 </td> <td> 男 </td> </tr> </table> </body></html>2）width标签属性：设定表格的宽度；不倡议通过width标签属性设置表格宽度，倡议向table标签增加width款式属性进行设置。 px :设置以像素计的宽度（例：width="100px"）%：设置以蕴含元素的百分比计的宽度（例：width="100%"）例： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>width标签属性</title> <style> table{ width:"80%"； } </style> </head> <body> <table border="15px"> <tr> <th> 姓名 </th> <th> 年龄</th> <th> 性别</th> </tr> <tr> <td> 张三</td> <td> 19 </td> <td> 男 </td> </tr> </table> </body></html>3）align标签属性：指定表格绝对于四周标签的对齐形式,倡议向table标签增加款式属性进行设置;属性值： ...

1 ： 表单标签:<form></form> 表单是一个蕴含表单元素的区域。表单元素是容许用户在表单中（比方：文本域、下拉列表、单选框、复选框等等）输出信息的元素。 属性 ： action = '接口地址'method = 'get / post'name = '表单名称'2 ： 表单控件:<input> 属性： type = '控件类型'name：属性标识表单域的名称；Value：属性定义表单域的默认值，其余属性依据type的不同而有所变动。maxlength：管制最多输出的字符数，Size：管制框的宽度（以字符为单位）1）文本框: <input type="text" value="默认值"/>2)明码框: <input type="password" />3)提交按钮: <input type="submit" value="按钮内容" />4)重置按钮 <input type="reset" value="按钮内容" />5)空按钮: <input type="button" value="按钮内容" />单选按钮组: <input type=“radio” name=“ral” />男<input type=“radio” name=“ral”checked=“checked”/>(默认选中)女复选框组: <input type="checkbox" name="" /><input type="checkbox" name="" disabled="disabled" />* disabled="disabled" (禁用)* checked="checked" (默认选中)下拉列表（菜单）: <select ><option>选项1</option><option>选项2</option>…………</select>示意下拉列表，name属性不是必须的默认选择项用selected属性；表单域多行文本定义：语法: <textarea name="" cols="" rows="" ></textarea>多行文本。rows属性和cols属性用来设置文本输出窗口的高度和宽度，单位是字符。阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）上传文件：语法： <input type="file">

表单蕴含三个根本组成部分：表单标签、表单域、表单按钮。1，表单标签HTML 表单用于收集用户输出，表单应用<form> 标签创立。表单可蕴含文本字段、复选框、单选框、提交按钮等等。 留神：<form>元素是块级元素，其前后会产生折行。 <body> <form > </form></body>form表单的属性： action="url"：申请地址，指定form表单向何处发送数据。name="login"：作用是给表单起名，为了便于咱们操作。enctype ="string"：规定在发送表单数据之前，如何对表单数据进行编码。通常在应用文件上传时，咱们会enctype="multipart/form-data"，以二进制传输。method ="get/post"：指定表单以何种形式发送到指定的服务器程序，该属性定义浏览器将表单中的数据提交给服务器处理程序的形式。对于method的取值，最罕用的是get和post。2，表单域要提交数据的表单域必须加name属性。不然，该表单域的数据不会提交到服务器上。 <input>标签 <input>用于收集用户信息，依据不同的类型显示不同的模式。input是空标签，它没有完结标签，在开始标签中完结。<input> 元素依据不同的type属性，能够变动为多种状态。<input> 元素设置name属性，用于网络申请时提交对应输出的字段。文本框 定义单行的输出字段，用户可在其中输出文本。它是一个单行文本框，input的默认类型即是text类型。 例： <form action=""> 用户名：<input name="userName" type="text"></form>明码框 类型为password时，它用于收集用户输出的明码，在你输出时，浏览器会把输出的内容以符号来代替。 例： <form action=""> 明码：<input name="pwsname" type="password"></form>文本框和明码框都能够增加placeholder属性，用于设置输出字段预期值的提示信息。该提醒会在输出字段为空时显示，并会在字段取得焦点时隐没。 单选框 类型为radio时，用于定义单选按钮，name属性值雷同的input单选框只能有一个被选中。 checked="checked" 设置默认选中的单选框。value="1"是提交到服务器时给后盾程序员们看的。例： <form action=""> 性别：男 <input name="sex" checked="checked" type="radio" value="1"> 女 <input name="sex" type="radio" value="2"> </form>复选框 类型为checkbox时，用于定义复选按钮，复选框容许用户在肯定数目的抉择中选取一个或多个选项。 例： <form action=""> 兴趣爱好：篮球 <input type="checkbox" name="like1" value="1" checked> 足球 <input type="checkbox" name="like2" value="2"> 游泳 <input type="checkbox" name="like3" value="3"> 跑步 <input type="checkbox" name="like4" value="4"></form>文件上传 类型为file时，默认为单文件上传。 multiple="multiple" 设置为多文件上传。 例： <form action=""> <input type="file" name="file" multiple="multiple"></form>暗藏字段 暗藏字段对于用户是不可见的。暗藏字段通常会存储一个默认值，它们的值也能够由 JavaScript 进行批改。 例： <form action=""> <input type="hidden" name="hidden" value="123"></form>下拉列表 <select> 元素定义下拉列表; <option>元素定义待抉择的选项; 列表通常会把首个选项显示为被选选项，通过增加 selected 属性来定义预约义选项。 例： <form action=""> 抉择您喜爱的水果： <select name="select"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <!--榴莲设置为选中状态--> <option selected value="durian">榴莲</option> </select></form>单选按钮、复选框默认选中用：checked属性。 ...

大家好，最近有小伙伴在后盾问我，大一新生学校在教C语言，是不是曾经过期了？第一门语言应该学什么比拟好？大学期间什么课程对于毕业之后的从业帮忙比拟大呢？ 明天这篇文章就和大家简略聊聊这个问题。 对于我最初给大家讲讲我本人的一些状况吧，掐指一算才发现，从我初学编程至今曾经超过十年了。 我是高中的时候学习编程的，那时候咱们学的是Pascal。大家没听说过是很失常的，这是一门十分古老的语言。这门语言古老到什么水平呢？古老到它的IDE都是蓝屏的，看起来就像是死机了一样。大略长这样，过后咱们在机房里写代码的时候，一片蓝光，跟进了鬼片现场似的。 过后学Pascal也是浅尝辄止，只是学了一些根底的用法，连构造体我都不太会用。很多人都说Pascal是一门非常适合新手入门的语言，不晓得是不是我太菜了，我至今也没get到。从那之后我又陆续学过很多语言，比方C/C++，Java、Python、JS还有最近学的Go。十年前学的Pascal的语法早已忘得精光，过后的编程习惯也都很挫，基本上也改得差不多了。 如果非要说学了Pascal对我当初有什么帮忙的话，惟一的帮忙应该是它让我学C语言的过程变得非常简单。基本上只是简略看了一下C的语法，做了一些练习就把握了。其实这也是大多数人学习的第一门语言的意义，不是为了学到了就能上手做事件，更多的是为当前学习其余的内容打基础。 所以严格说起来C语言是我第二门学习的语言，然而我第一门把握得比较完善的语言。 C语言适宜入门吗对于这个问题我是有过翻转的，我已经有一段时间感觉是不适合的。因为学习C语言的过程就是面对一个黑框框写各种数学题的过程，挺干燥和无聊的，很多人都是这样被劝退的。如果是Python、JS等语言的话，则能够做的事件就很多，学习者会有极大的激情持续学习上来，这样入门的门槛可能会低一些。 我想很多人也是这么感觉的，因为学习了C语言会有一种无处施展的感觉。咱们花了很大精力学了编程这么黑科技的货色，搞半天竟然除了对着黑框框做题什么也做不了，这太不炫酷了。你看看Python，学会了之后又能够爬图片又能够解决文档，难道不香吗？还有些人可能也不太懂，就感觉Python、Java这些新兴语言要比老旧的C语言厉害一点。 最近几年我的认识又再次翻转了回来，我当初感觉C语言其实挺适宜初学者入门的，它也是有很多其余语言没有的益处的。同样Python、Java这些看起来浓眉大眼魅力十足的语言，其实也是有很多缺点的。 C语言最大的益处是什么？我集体感觉有两点，第一点是它的语法很洁净，C语言当中根本的语法简直都能在其余所有语言当中找到。这一点在Go语言上同样有所体现，精简到极值，多余的一点也没有。也就是说你在C语言上积攒的编程功底换了其余的语言基本上都能用上，但像是Python这样的语言可能就不是如此。Python当中的新个性十分多，换一门语言可能就玩不转了。 第二点是C语言区分了援用和指针，理解这点对于初学者而言十分重要。援用和指针间接关系到传参以及函数内的变量解决逻辑，但很多语言这两者只波及一个，比方Java当中就只有援用，Go语言当中就只有指针。如果搞不清楚援用和指针的区别会埋下很多隐患，比方参数传递的时候写错了逻辑，再比方齐全没有内存应用的概念，写进去的代码内存透露重大。 当然C语言存在的问题也不少，比方利用场景太少，库函数也不多，写起代码来十分吃力。但这不障碍它非常适合造就编程思维以及良好的编程习惯，对于初学者而言，领有一个好的习惯和意识，其实要比具体学到的内容更加重要，从这点上来说，大一新生的第一门语言课上C语言其实是没有问题的。 语言的抉择当然，也有一些学校给大一新生开设Python或者是Java的（比方MIT和斯坦福），难道这些学校就错了吗？ 其实也没有，这是一个取舍问题。比方Python学起来可能比拟乏味，对于有些学院而言可能更加看重学生的趣味。再比方Java所有面向对象，从Java开始可能更加有利于之后面向对象的学习。还有些大牛是从JS入门的，因为会比拟不便之后从事前端。这些其实都没有问题，并没有一条规定的所谓正确路线。语言自身并没有高下之分，有的只有实用的范畴不同。 所以说，其实咱们选的不是语言，而是方向。比方你想要当前从事算法，那么Python显然是必学的，不仅须要学还须要比拟深刻。比方你想要做开发，那么就比拟举荐Java，入门的门槛绝对较低，并且岗位缺口很大，学得好不愁找不到工作。比方想要做前端，那么显然Python、Java这些都用不上，HTML+CSS+JS三件套才是王道。 也就是说语言是和咱们方向挂钩的，咱们想要成为什么畛域的工程师，就须要相应地进行该畛域内的学习和钻研。严格来说并没有一门语言是普适的，是不论什么方向的工程师都须要把握的。 另外一点是到了前期学习一门语言远远不像大家想的那么吃力，其实相熟了编程的外围逻辑之后，语言之间基本上只有语法的差别。打个比方来说好了，我在刚入职的时候为了实现入职测验，在3天内学习了go语言，并且从无到有用go语言写了一个简略的后台程序。说起来如同3天学完一门语言很夸大，其实不然，我只是看了根底的语法就开始上手了，边看边查而已。这并不是我的非凡能力，实际上大部分入职的新人都做到了这一点。 第一门的语言选择重要，但也没那么要害，要害还是当前能不能找准方向。 成长路线说到方向预计很多人一听到就头疼，尤其是学生党，很多人可能齐全不晓得之后要做什么，也不晓得这些岗位有哪些能力要求。这其实也很失常，因为学校的教育少了工程师造就的局部。它只负责授课，并不负责工程师的造就，这是这个问题的外围起因。 那咱们怎么办呢？ 我想你们肯定很想晓得答案，但很遗憾的是，每个人的成长路线须要本人找，谁也不晓得你到底适宜做什么。不过话虽如此，但还是有一些比拟万金油的办法的。 如果你学了C/C++之后不晓得学什么，那就学Java就好了。学了Java之后用Java踏踏实实做两个我的项目，晋升一下我的项目能力。不论是什么岗位，工程能力都是必须的。而且有了这两个我的项目教训之后，其实也算是一个保底，最起码毕业了当前找个Java后端的工作根本没问题了。并且这两个我的项目做下来，你会对本人有一个比拟清晰的认知，这样写代码、调试程序寻找问题的工作到底是不是你喜爱的。 而且对于做我的项目还有一个小技巧，咱们做我的项目也不是自觉做，我的项目之间是有高下之分的，和公司理论业务越靠近的我的项目面试的时候吸引力越大。比方你亲自做过一个举荐零碎、搜寻零碎，即便做得很简陋，只是勉强能用，这样的我的项目在面试的时候一样是十分十分具备价值的。要比做XX管理系统有含金量得多，而且这样的零碎也算是和算法相干，既能够面算法的岗位，也能够面工程的岗位，能够说是两全其美。 其实个人成长这件事和写文章的逻辑是一样的，首先要有一个主线，而后一个好的结尾。之后呢，须要联合主线适当地发散，该笼罩的点都要笼罩到。当然写文章的时候，咱们是在写之前就有了主线，而成长的道路中可能一开始的时候始终是一个寻找主线的过程，寻找主线其实并没有问题。对于学生来说，还年老，领有大把的青春，做一些工程项目进行适当性的试水齐全没有问题。即便当前选了算法或者其余的方向，当初的付出和致力也一样是有用的。 明天的文章就到这里，衷心祝愿大家每天都有所播种。如果还喜爱明天的内容的话，请来一个三连反对吧~（点赞、关注、转发）

12月30日，HarmonyOS 2.0手机利用开发者Beta流动第二站在上海如期而至。华为与合作伙伴一起，与宽广开发者交换HarmonyOS手机利用的当先开发技术和最新案例，现场氛围热烈，引发了宽广开发者群体的强烈反响。 HarmonyOS生态倒退稳步推动 开发者激情远超预期 HarmonyOS自2019年公布以来，一直稳步推动，生态体系的搭建日趋成熟。仅用了一年的工夫，便实现了由1.0版本向2.0版本的进阶。2020年9月10日，HarmonyOS 2.0公布并开源，至今已累计200万+人次访问开源代码，OpenHarmony我的项目成为国内最受欢迎的开源我的项目之一；11月11日首批搭载HarmonyOS的美的家居产品落地上市。目前已汇聚120多家头部利用搭档、20多家头部硬件搭档与HarmonyOS开展单干。 12月16日，HarmonyOS手机利用开发者Beta版在如约而至，首届HarmonyOS开发者翻新大赛也同时启动，目前曾经吸引了1800多支参赛团队报名，申请开发者Beta版本的数量也在飞快增长，宽广开发者的激情远超预期。 万物互联时代已至 手机利用开发者Beta为利用搭档带来更多入口 “物联网的飞速发展是挪动产业将来十年的历史性时机”，华为消费者业务软件部副总裁杨海松说，“作为万物互联时代的操作系统，HarmonyOS将成为开启万物互联时代的一把钥匙，在为消费者带来更好体验的同时也为利用合作伙伴带来更多流量入口，关上利用翻新之门。”在HarmonyOS的加持下，将来将有上亿家居设施成为购物的入口，各种家庭影音终端将成为纵情嗨唱的入口，更多静止衰弱终端成为慢病治理的入口。预计到2021年，将有超40家支流品牌、1亿台设施成为消费者全场景体验的新入口。 HarmonyOS 2.0手机利用开发者Beta让开发者畅享“利用天生跨端” 作为HarmonyOS首个面向手机利用开发者的版本，HarmonyOS 2.0手机利用开发者Beta版通过分布式应用框架、分布式UI框架以及DevEco Studio的协同加持，帮忙利用开发者疾速上手，晋升开发效率。 首先，HarmonyOS 2.0手机利用开发者Beta版通过分布式应用框架以及15000+个APls，将简单的设施间协同封装成简略的接口，实现一次开发，多端部署，防止开发者在不同设施间的反复开发。 其次，HarmonyOS 2.0手机利用开发者Beta版通过分布式UI框架，可自适应不同屏幕尺寸，并且针对各类不同设施有不同交互方式，HarmonyOS的归一化控件设计让开发者只需关注交互自身，助力跨端交互开发。 第三，全新版本的集成开发工具DevEco Studio 2.0 Beta3凋谢了9套手机利用模板，笼罩新闻、购物等利用场景，可极大缩小代码输出，并在DevEco Studio上实现跨端界面预览和实时反馈，模仿仿真有限靠近真机，让利用开发者的跨端开发与调测效率大增。 在能力降级的同时，HarmonyOS生态建设也在一直拓展，WPS、哔哩哔哩、携程旅行、深圳通、科大讯飞等搭档别离分享了他们基于HarmonyOS打造的超过单终端的翻新体验，为万物互联的生存带来更多设想空间。 杨海松示意，生态的每一步都离不开开发者的不懈努力！2021年，欢送宽广搭档和开发者新敌人退出HarmonyOS生态，一起发明万物互联时代的有限可能！

HTML的列表标签次要分为三种，有序列表、无序列表和定义列表。 1，有序列表：有序列表，顾名思义，就是有程序的列表。个别用于排名等。有序列表次要波及的标签： <ol>标签 ：有序列表标签 <ol>标签内元素是有序的，并且自带序号；<ol>标签内除了<li>标签外不要写其余货色；<li>标签： <li>是块及元素，独占一行。<li>标签里寄存ol的内容<li>标签能够嵌套其余标签格局： <ol> <li>我是有序列表内容</li></ol>2，无序列表：无序列表，每个题目间没有程序，默认为一个圆点。<ul>标签 ：无序列表标签。 <ol>内也不要写除了li的其余内容 格局： <ul> <li>我是无序列表内容</li></ul>例： <h2>兴趣爱好</h2><ul> <li> <h3>男生</h3> <ul> <li>打篮球</li> <li>玩游戏</li> <li>踢足球</li> </ul> </li> <li> <h3>女生</h3> <ul> <li>看小说</li> <li>看电视</li> <li>吃货色</li> </ul> </li></ul>3，定义列表：用于自定义的一些内容。<dl>标签 ：自定义列表标签 <dt>标签 ：是定义题目 <dt>是块级元素 独占一行;<dd>标签：定义属性 <dd>是块级元素 独占一行；<dd>的内容是无序的 没有序号；格局： <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd><dl>

网站建设网页设计小技巧分享。在网站建设的过程中咱们会遇到很多问题，咱们也会去解决各类问题。无论是网站设计还是代码编写。明天针对网站建设过程中咱们会遇到的一些小问题，并给出一些简略的解决办法。 利用解析：有不少人都会对LOGO进行通明解决以融入head局部的突变背景。 解决方案：采纳JS代码实现或CSS滤镜性能，当然问题也存在局部，导致图片质成像量不高。 小技巧1：将通明的LOGO用高于IE6的浏览器关上网页，而后采纳FF的PearlCrescentPageSaver全屏截图插件截屏。再采纳PS或者Fireworks进行裁切LOGO局部。并替换通明背景LOGO。这样即便是突变背景也能和LOGO保持一致。 小技巧2：布局上页面与页面之间存在雷同局部，要学会简化。当两个页面有局部板块雷同，最好不要去让两个页面独立存在，能够将两个雷同局部独立进去。采纳程序调用独特局部。以缩小网页代码。 小技巧3：网站重要页面最好有可更新或者可调用更新内容的板块。以达到日常更新引蜘蛛匍匐的目标，起因很简略，利于网站SEO优化。 小技巧4：网站要和互联网接轨，要跟得上时代，别忘了在网站实现后给网站装置一个百度分享工具，或者新浪微博，这样做利于网站推广。 小技巧5：老手设计网站艰难，photoshop程度不高，怎么办?AXURE让网站设计更轻松。很多高端网站设计师都采纳PS对网站进行丑化设计以达到更壮丽的网页成果，对于老手而言，PS的学习无疑是一道门槛。采纳Axure并联合“扁平化设计”也能够让老手也能很简略“拖”出很粗劣的网页。 小技巧6：Jiasale将小型企业站变成小型电商平台，无需注册间接即可购买产品。针对局部微小型企业，很多企业有力承当昂扬的建站费用，但又心愿本人的网站能带来商机或者达成线上交易，那么宏大的会员管理系统，以及产品订购性能无疑是一大难题，Jiasale是一款购物按钮能够让网站疾速实现电子商务,只须要在网站中增加一段代码,就能轻松实现站中店。(非广告)。连贯支付宝无需注册，即可购买。对于一些有着线上交易需要的站长而言，还是挺不便的。 当然置信每个人都有本人的网站建设方面的技巧。也有本人解决问题的办法。心愿这篇文章能带给大家帮忙

div标签p标签span标签a标签img标签html：超级文本标记语言 1，div标签：是在html中布局应用最多的标签，<div>自身没有什么特别之处，只是<div>标签代替了以前<table>标签布局。<div> 是一个块级元素，它的内容会主动地开始一个新行。 div标签作用：起宰割作用，是宰割内容常应用的标签 例： <!DOCTYPE html><html><head></head><body> <div>第一个div</div> <div>第二个div</div> <div>第三个div</div></body></html>div罕用属性： color：色彩font-size: 文字大小text-align:对其形式right 右对齐left 左对齐center 居中对齐 font-family : 文字字型letter-spacing: 1pt 文字间距line-height: 设定行高font-weight:文字粗体2，p标签：<P>标签它是一个段落标签，会自行起一行段落，并且能够作为一个盒子来应用。能够独自定义它。 例： <!DOCTYPE html><html><head></head><body>< p>我是段落标签< /p></body></html>3，span标签:span标签是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素。span没有固定的格局体现。 span标签属性： 规范属性id, class, title, style, dir, lang, xml:lang 事件属性onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup 例： <p class="tip"><span>内容</span>... ... ...</p>4，a标签（超链接标签）：超链接标签，用于在成果中定义一个能够点击跳转的链接 罕用属性: （1）href： 超链接跳转的门路 (必有属性)； 内网本机门路：相对路径和绝对路径互联网门路：http://地址示例： <a herf="http://www.baidu.com/">百度</a><a herf="demo html">demo</a>（2） target： 该属性指定在何处显示链接的资源。 取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其余关键词； target可能的值: blanktopparentself（3） download： 此属性批示浏览器下载 URL 而不是导航到它，因而将提醒用户将其保留为本地文件； （4） rel：该属性指定了指标对象到链接对象的关系。该值是空格分隔的列表类型值； 5，img标签：用于在页面成果中展现一张图片。 ...

VS中新建html文件尽管用记事本就能够写出.html文件，但咱们是专业人士。工欲善其事必先利其器，所以接下来咱们就须要应用宇宙最强IDE：Visual Studio了。 装置实现之后须要创立一个ASP.NET core的Web我的项目。 而后，在其中的wwwroot下增加html文件即可。（留神：不要更改wwwroot之外的其余任何内容） 临时咱们也不须要了解其中的solution/project等的含意（有好奇心的同学，见：Visual Studio：我的项目和解决方案） 留神：文件的命名 演示： 新建html文件上右键 - View in Browers批改默认浏览器了解开发环境通过Visual Studio中的ASP.NET我的项目浏览一个html页面，和在浏览器中关上一个html页面不一样。 事实上，VS在运行时启动了一个IIS express，在本地模仿了实在的服务器环境（environment），浏览器是连贯着这个IIS在运行的！——Visual Studio被称之为IDE，就是因为它自带了这些组件，可能实现这些工作_（如果应用VS code须要本人搭建这些环境）_。 _温习：计算机网络，_了解： IIS全称：Internet Information Service，是服务器上安装的一个“软件”，这个软件能够响应http申请。 相似的利用于Linux的，还有：Apache IIS Express：是Visual Studio内置的IIS演示版，是精简的/用于开发的/迷你的 IIS。 因为VS中所有的ASP.NET我的项目都运行在localhost（本地主机）上，所以VS用随机生成的端口号（port）来区别各个我的项目。 PS：服务器/端口，就相似于： 房子/门窗 温习：辨认URL https://localhost:44397/About?id=7&name=zx协定、（顶级/一级/二级）域名、__端口、__相对/相对路径、url参数（query string）服务器（server）对外提供“服务”的“机器”（电脑/计算机）。 什么是服务？简略的说，就是“性能”，它无能的活，比方：输入网页、发送Email等等。 服务器和咱们用的电脑有什么区别呢？实质上没有区别。服务器为什么被称为服务器？就像警察被称之为警察一样： 警察也是人，因为从事警察工作，咱们就称其为警察服务器也是计算机，因为它用于提供服务，所以咱们就称其为服务器客户端（client）以下称说通常都是通用的： 本地（local）计算机：绝对应的就是“近程”计算机客户端（client）：绝对应的就是“服务器”。为什么叫“客户端”，因为服务器提供服务嘛，为谁提供服务？不就是为“客户”提供服务么？浏览器（browser）：绝对应的就是“IIS”或者当前要学习的ASP.NET运行时。咱们会说：这段（JavaScript）代码在浏览器上运行，那段（C#）代码在ASP.NET中运行……学习HTML，其实就是学习一系列的标记（markup），而标记的外围就是 HTML文档构造VS中生成的html页面为咱们提供了一个（HTML5）规范的html文档框架： <!DOCTYPE html> <html> <head> </head> <body> <!--题目--> <h1>一起帮·源栈欢迎您！</h1> </body> </html> 以这种格局组织的html文件被称之为HTML文档。严格的说，一个HTML文档才是一个网页。 <!DOCTYPE html> 这被称之为：文档申明。显示这是一个html文档类型（Document Type），这是HTML 5的写法。 而后，三个标签： html：head：头，外面的内容个别不予显示body：注释，由浏览器显示的内容元素（element）HTML标记语言的外围就是元素。 元素由标签、属性和文本内容组成，比方： <h1 style="color:red">一起帮·源栈欢迎您！</h1> 其中： 元素（element）：整个这一行就是一个标签（tag）：h1，又分为 _开始_ 标签（<h1>）和 _完结_ （</h1>）标签文本（text）：一起帮·源栈欢迎您！，搁置在开始标签和完结标签之间属性（attribute）：，搁置在开始标签中，又分为属性名：等号（=）右边，style属性值：等号（=）左边，color:red，用双引号（）括起来。留神，这个双引号必须是半角的，而且当前咱们学习的所有语言，所有的标点符号，都是半角的！_演示：顺次勾销标签和属性之后，页面出现的变动_。 元素嵌套html文档构造就体现出元素嵌套的个性，即：一个元素中（html）还能够蕴含另外一个或若干个元素（head和body）。 这是HTML十分重要的一个个性！元素嵌套不仅仅能够为HTML提供丰盛出现，还是（当前咱们将要学习的）DOM树的根底。 然而，留神：元素不能任意嵌套。比方，不能在head中再放入一个body，^_^ ...

作者：桑田 各种js解析器是前端工程化的基石，能够说如果没有它，很多工程化都无奈失常执行，咱们每天用到的babel、webpack、eslint、TypeScript背地都须要一套对应的js解析器，明天咱们来看看，目前市场上有哪些罕用的解析器，他们各自又领有什么个性尼？ 前言在说js解析器前，咱们须要先理解下ESTree这个我的项目，这个我的项目的初衷通过社区的力量，保障和es标准的一致性，通过自定义的语法结构来表述JavaScript的AST，起初随着知名度越来越高，多位出名工程师的参加，使得变成了事实意义上的标准，目前这个库是Mozilla和社区一起保护的。 如果没有AST标准，那么也就意味着根本无法造出对应的解析器，而如果AST标准不对立，一些相应的工具库就不能很好的互通有无，比方webpack就无奈失常的应用babel相干插件。 正是因为EsTree的定义的标准，所以当初所有的js解析器或者编译器，基本上都绕不开它，如果你有志于本人写一个js解析器，那它的文档你肯定须要读一遍。 一。出名的JS解析器1.1 uglify-js (11.2k☆)创作工夫：2010-8-1作品地址：https://github.com/mishoo/UglifyJS作者介绍：Mihai Bazon，Lisp程序员，Emacs爱好者，貌似是罗马尼亚人作者博客： https://github.com/mishoohttp://lisperator.net/**用于混同和压缩代码，因为一些起因，uglify-js本人[外部实现了一套AST标准[1]](http://lisperator.net/blog/ug...，也正是因为它的AST是借鉴的，不是规范的ESTree，es6当前新语法的AST，都不反对，所以没有方法压缩最新的es6的代码，如果须要压缩，能够用相似babel这样的工具先转换成ES5。 uglify-js曾经进行到3版本了，前两个版本都是Mihai Bazon保护，但当初最新的3版本是alexlamsluglify-js曾经进行到3版本了，前两个版本都是 uglify-js能够通过--acorn或者--spidermonkey指定对应的parsing1.2 Esprima (6k☆)创作工夫：2011-11-20作品地址：https://github.com/jquery/esprima作者介绍：ariya印尼人，在德国取得博士学位，目前住在硅谷山景城，创立了世界上第一个真正的无头Web浏览器PhantomJS。也为WebKit, KDE, 和 Qt奉献过很多代码作者博客： https://ariya.io/abouthttps://github.com/ariya这是第一个用JavaScript编写的合乎EsTree标准的JavaScript的解析器，后续多个编译器都是受它的影响，集体感觉它的呈现具备历史意义。 1.3 acorn (6.8k☆)创作工夫：2012-9-23作品地址：https://github.com/acornjs/acorn作者介绍：Marijn Haverbeke，同时也是富文本编辑器prosemirror（4.8k）、浏览器代码编辑器CodeMirror（21.7k）的作者，另外他还出版了一本书《Eloquent JavaScript》，并且这本书在网上也有https://eloquentjavascript.net/，目前国内也翻译了这本书，不过只有第二版《JavaScript编程精解》，也有人目前寓居在德国柏林。作者博客： https://marijnhaverbeke.nl/https://github.com/marijnhacorn和Esprima很相似，输入的ast都是合乎EsTree标准的，目前webpack的AST解析器用的就是acorn，和Esprima一样，也是也不间接反对JSX 须要提一下的是，[acorn的es6语法反对RReverser奉献了大半[2]](https://rreverser.com/added-e... 1.4 @babel/parser(babylon)创作工夫：2012-9-23作品地址：https://github.com/babel/babel/tree/master/packages/babel-parser babel官网的解析器，最后fork于acorn，起初齐全走向了本人的路线，从babylon改名之后，其构建的插件体系十分弱小。 1.5 espree (1.3k☆)创作工夫：2014-11-30作品地址：https://github.com/eslint/espree作者：Nicholas C. Zakas，多本js书籍，其中《红宝书 第三版》最为出名，eslint也是他创立的，在2016年被查出莱姆病，目前曾经很长时间没有工作了，如果有趣味的话，能够去github下面捐献他，捐献页面链接。作者博客： https://github.com/nzakashttps://humanwhocodes.com/eslint、prettier的默认解析器，最后fork于Esprima的一个分支（v1.2.2），起初因为ES6的疾速倒退，但Esprima短时间内又不反对，前面就基于acorn开发了。 1.5 TypeScript创作工夫：2014-7-6作品地址：https://github.com/microsoft/TypeScript/tree/master/src/compiler作者：这个是microsoft的Anders Hejlsberg领导创立的，他也是是C#、Delphi、Turbo Pascal的作者 当初很多大型项目，首选就是TypeScript，它的解析器是就在我的项目内src/compiler/parser.ts，TypeScript和其余我的项目有一个最大的不同，就在于 以上的库，实质上都是基于js来写的，还有一些库，还有一些非凡的js解析器，如果有须要也能够理解下 二。其余有意思的解析器2.1 sucrase (2.9k☆)创作工夫：2017-9-24作品地址：https://github.com/alangpierce/sucrase作者：Alan Pierce，就任于benchling，这是一家专门给生命科学家提供软件合作的公司。作者博客： https://github.com/alangpierce这是@babel/parser的一个子集，如果你确定的代码不须要兼容IE浏览器，就能够用这个解析器，依照他的介绍，其解析速度目前来说应该是最快的。 2.2 swc (10.1k☆)创作工夫：2017-12-17作品地址：https://github.com/swc-project/swc作者：강동윤，他是一个97年的小萌新，目前还在读大二，rust的狂热爱好者，开源了很多rust相干的我的项目，为此往年8月份Deno官网给了他一份参谋合同。作者博客： https://github.com/kdy1https://kdy1.github.io/用的rust编写的js编译器，单核比babel快4倍，4核比babel快70倍，也能够用来打包js、ts代码，并且也领有 tree shaking性能，它的默认的配置文件spack.config.js和webpack.config.js保持一致，@swc/cli成心与@babel/cli想同，看来野心十分大。 它的指标就是替换babel，目前它曾经实现了babel的大部分性能，[具体能够看对照表[3]](https://swc.rs/docs/compariso... 2.3 esbuild (16.5k☆)创作工夫：2020-1-1作品地址：https://github.com/evanw/esbuild/作者：Evan Wallace，始终从事webGL方面的相干的开发，目前就任于Figma集体博客： https://github.com/evanwhttp://madebyevan.com/esbuild是用go编写的下一代web打包工具，它领有目前最快的打包记录和压缩记录，snowpack和vite的也是应用它来做打包工具，为了谋求卓越的性能，目前没有将AST进行裸露，也无奈批改AST，无奈用作解析对应的JavaScript。 目前它的star在所有我的项目中增长最为迅速。三。其余一些驰名的工具库3.1 recast (3.4k☆)创作工夫：2012-9-16作品地址：https://github.com/benjamn/recast作者：Ben Newman，recast作者，TC39成员，目前寓居于纽约布鲁克林地区集体博客： https://github.com/benjamnhttps://www.quora.com/profile/Ben-Newman如果你须要重构你的代码，那么这个库将会是你的第一抉择，它能够同时应用多种解析器，并且能够自定义传入须要的解析器，是重构利器。 3.2 jscodeshift (5.9k☆)创作工夫：2015-3-22作品地址：https://github.com/facebook/jscodeshift作者：Felix Kling。集体博客： ...

[HTML罕用标签之列表标签]()列表标签的用处，就是用于编排短语句的文字。 1.无序列表 在无序列表中，各个列表项之间没有程序级别之分，它通常应用一个我的项目符号作为每个列表项的前缀。 设置无序列表的类型—type无序列表的默认符号是圆点（● ）。 <ul>元素有type属性，通过定义不同的type属性能够扭转列表的我的项目符号。目前，type属性的属性值有：disc(圆●)、circle（圆圈○ ）、square（方块■ ） 定义无序列表要用<ul>标签与<li>标签，例如下： 网页显示如下  2.有序列表 有序列表中的我的项目采纳数字或英文字母结尾，通常各我的项目间有先后的程序性 默认状况下，有序列表的序号是数字的，通过type属性能够调整序号的类型  定义有序列表 要用<ol>标签<li>标签，例如下 网页显示如下 3.<li>标签 <li>标签定义列表我的项目。 <li>标签可用在有序列表（<ol>）和无序列表(<ul>)中。例 ： 网页显示如下 4.<dl>标签 <dl>标签定义了定义列表（definition list）。 <dl>标签用于联合<dt>（定义列表中的我的项目）和<dd>（形容列表中的我的项目） 5.<dt>标签 <dt>标签定义了定义列表的我的项目（既术语局部）。 6.<dd>标签 <dd>在定义列表中定义条目标定义局部。 网页显示如下

[HTML 罕用列表标签]()关注我，不迷路~ 罕用列表标签在书写HTML文档时，遇到雷同类型的内容，须要思考用列表来实现（导航、排名、相干文章等）， 通常状况下应用的列表有三种，有序列表、无序列表和自定义列表。 一、有序列表ol有序列表：有肯定工夫、先后、高下等程序，如排名、热度， ol，order list只有一个类型的子元素li，list item 搜寻热点 <!-- 默认排序款式 --> <ol> <li>HTC区块链手机</li> <li>军运会奖牌榜第一</li> <li>切尔西1-0纽卡</li> <li>微信钱包银行储蓄</li> <li>小学生偷开奥迪</li> </ol> <!-- 按大写字母排序 --> <ol type="A"> <li>HTC区块链手机</li> <li>军运会奖牌榜第一</li> <li>切尔西1-0纽卡</li> <li>微信钱包银行储蓄</li> <li>小学生偷开奥迪</li> </ol> <!-- 按小写字母排序 --> <ol type="a"> <li>HTC区块链手机</li> <li>军运会奖牌榜第一</li> <li>切尔西1-0纽卡</li> <li>微信钱包银行储蓄</li> <li>小学生偷开奥迪</li> </ol> <!-- 按大写罗马数字排序 --> <ol type="I"> <li>HTC区块链手机</li> <li>军运会奖牌榜第一</li> <li>切尔西1-0纽卡</li> <li>微信钱包银行储蓄</li> <li>小学生偷开奥迪</li> </ol> <!-- 按小写罗马数字排序 --> <ol type="i"> <li>HTC区块链手机</li> <li>军运会奖牌榜第一</li> <li>切尔西1-0纽卡</li> <li>微信钱包银行储蓄</li> <li>小学生偷开奥迪</li> </ol> 二、无序列表ul无序列表：类别雷同，但没有具体的程序，个别用于导航栏、相干资， ul，unorder list只有一个类型的子元素li，list item 相干资讯 <!-- 以下单词内容批量随机生成无意义 --> <!-- 和不设置type一样，默认前置符号 --> <ul type="disc"> <li>Temporibus asperiores incidunt laborum.</li> <li>Odit repellat placeat blanditiis!</li> <li>Sit ipsam error consequatur.</li> <li>Deserunt beatae molestiae assumenda.</li> <li>Reiciendis aut deserunt soluta?</li> </ul> <!-- 革除前置符号 --> <ul type="none"> <li>Lorem ipsum dolor sit.</li> <li>Illo aliquid consequatur unde?</li> <li>Est sequi quia nulla.</li> <li>Voluptate enim officiis quas.</li> <li>Iusto, et. Eos, nam.</li> </ul><!-- 设置空心圆符号 --> <ul type="circle"> <li>Maxime incidunt temporibus mollitia?</li> <li>Reprehenderit optio quibusdam ad.</li> <li>Natus labore impedit placeat?</li> <li>Tenetur rerum illum repellat!</li> <li>Ipsum officia laudantium distinctio!</li> </ul> <!-- 设置实心方块符号 --> <ul type="square"> <li>Veritatis id voluptatem vitae.</li> <li>Accusamus corrupti voluptate officiis?</li> <li>Exercitationem voluptatibus alias quod.</li> <li>Aut cumque ipsa dignissimos.</li> <li>Distinctio commodi eaque soluta?</li> </ul> ...

Aspect Oriented Programing 面向切面编程，相比拟 oop 面向对象编程来说，Aop 关注的不再是程序代码中某个类，某些办法，而 aop 思考的更多的是一种面到面的切入，即层与层之间的一种切入，所以称之为切面。联想大家吃的汉堡（两头夹肉）。那么 aop 是怎么做到拦挡整个面的性能呢？思考学到的 servlet urlpattern /* 的配置，实际上也是 aop 的实现 。 Spring Aop 实现的形式注解 形式XML 形式案例实操注解形式jar 包坐标引入<dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>1.8.9</version></dependency>beans.xml 配置增加命名空间 xmlns:aop="http://www.springframework.org/schema/aop"http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd配置 Aop 代理 <aop:aspectj-autoproxy/>编写 aop 实现类/*** 申明切面组件*/@Component@Aspectpublic class LogCut { /** * 定义切入点 匹配办法规定定义 * 匹配规定表达式含意 拦挡 com.xxx.service 包下 以及子包下 所有类的所有办法 */ @Pointcut("execution (* com.xxx.service..*.*(..))") public void cut(){} /** * 申明前置告诉 并将告诉利用到定义的切入点上 * 指标类办法执行前 执行该告诉 */ @Before(value="cut()") public void before(){ System.out.println("前置告诉....."); } /** * 申明返回告诉 并将告诉利用到切入点上 * 指标类办法执行结束执行该告诉 */ @AfterReturning(value="cut()") public void afterReturning(){ System.out.println("返回告诉...."); } /** * 申明最终告诉 并将告诉利用到切入点上 * 指标类办法执行过程中是否产生异样 均会执行该告诉 相当于异样中的 finally */ @After(value="cut()") public void after(){ System.out.println("最终告诉...."); } /** * 申明异样告诉 并将告诉利用到切入点上 * 指标类办法执行时产生异样 执行该告诉 */ @AfterThrowing(value="cut()",throwing="e") public void afterThrowing(Exception e){ System.out.println("异样告诉....办法执行异样时执行:"+e); } /** * 申明盘绕告诉 并将告诉利用到切入点上 * 办法执行前后 通过盘绕告诉定义相应解决 */ @Around(value="cut()") public Object around(ProceedingJoinPoint pjp) throws Throwable{ System.out.println("盘绕前置..."); System.out.println("盘绕告诉"); System.out.println(pjp.getTarget()+"--"+pjp.getSignature()); Object result=pjp.proceed();//执行指标对象办法 System.out.println("盘绕后置..."); return result; } }Aop 匹配办法规定表达式语言（简要理解）Aop 切入点表达式简介 ...

作者：梁棒棒简介electron打包工具有两个：electron-builder，electron-packager，官网还提到electron-forge，其实它不是一个打包工具，而是一个相似于cli的工具集，目标是简化开发到打包的一整套流程，外部打包工具仍然是electron-packager。 electron-builder与electron-packager相比各有优劣，electron-builder配置项较多，更加灵便，打包体积绝对较小，同时上手难度大；而electron-packger配置简略易上手，然而打进去的利用程序包体积绝对较大。 咱们抉择electron-builder作为electron-playground我的项目的打包工具，配合webpack实现更灵便的打包配置。打包配置在electron-playground中已有阐明，这里不再赘述，次要讲述一下打包一个electron我的项目的优化点，打包优化分为打包工夫优化和体积优化，本篇讲述体积优化。 node_modules优化electron空我的项目打包后的dmg体积在75M左右，32位exe文件体积在52M左右，64位的exe体积则为105M左右。 注：空我的项目依赖版本为：electron: ^10.1.5 electron-builder: ^22.9.1 零碎版本为：macOS Catalina 10.15.6。而咱们的我的项目打包后dmg体积为165M，ia32exe也在128M左右，比预期大很多，剖析一下包，在release -> 【版本号命名的文件夹】 -> win-ia32-unpacked -> resources 下有个app.asar文件，这其实是个压缩包，目标是爱护代码隐衷，在build中可配置是否须要压缩为asar包。在electron-builder.yml中退出： asar: true用asar工具包解压。 # 装置npm install asar -g# 解压asar extract app.asar <解压后的目录>解压而后看下包中有哪些内容：dist和resources是配置项中指定的须要复制打包的内容，这没有问题，可是node_modules中的依赖项曾经在webpack打包构建时一起打包进了dist下，它不应该在这里，而且electron-builder配置项files中也没有指定复制此文件夹。带着这个疑难，查看一下文档，终于找到了起因，原来files有默认值： [ "**/*", "!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}", "!**/node_modules/*/{test,__tests__,tests,powered-test,example,examples}", "!**/node_modules/*.d.ts", "!**/node_modules/.bin", "!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}", "!.editorconfig", "!**/._*", "!**/{.DS_Store,.git,.hg,.svn,CVS,RCS,SCCS,.gitignore,.gitattributes}", "!**/{__pycache__,thumbs.db,.flowconfig,.idea,.vs,.nyc_output}", "!**/{appveyor.yml,.travis.yml,circle.yml}", "!**/{npm-debug.log,yarn.lock,.yarn-integrity,.yarn-metadata.json}"]package.json and **/node_modules/**/* (only production dependencies will be copied) is added to your custom in any case. 意思是：package.json和node_modules（仅仅生产依赖项会被复制）在任何状况下都会被增加至自定义（应该是files配置项下吧）中。那这就很分明了，我只须要在files中增加"!node_modules"即可，打包后体积是128M，足足小了37M，装置执行，没有问题。依赖项的问题解决了，然而体积还是没达预期，查看包内容，果然，图片！这个永远也避不开的优化难题。 图片优化图片优化在整个我的项目的优化中是优先级较高的，所谓的图片优化，其实是体积与品质之间的博弈，因而要想减小包中图片的体积，是要就义一部分图片品质的，也就是清晰度。做出如下优化： 首先对gif图在不影响用户观看的前提下做了肯定压缩；将一些png（流程图，logo，线条简略的）转为svg；将一些截图png转为jpg；最终将整体包体积dmg减小至102M，ia32exe为80M左右（后续性能更新会有肯定出入）； 依赖项，按需加载而后检查一下依赖项的地位和援用，首先对于package.json中依赖项进行排查，查看dependencies和devDependencies中的依赖项有没有错位的（开发依赖项写在了生产依赖项中），因为打包时只打包dependencies中的依赖项，所以在生产环境中用不到的依赖项一律塞至devDependencies。而后再查看援用库的按需加载，首先想到我的项目中应用了antd框架。 官网文档写到：antd 默认反对基于 ES modules 的 tree shaking，对于 js 局部，间接引入 import { Button } from 'antd' 就会有按需加载的成果。以防万一，检查一下，应用webpack-bundle-analyzer可视化插件看一下依赖体积图示，后果如下。并没有找到antd，左侧抽屉中搜了一下，确定是按需加载。 ...

在现在互联网时代中，互联网是人们互相分割的重要形式，同样网站建设也不例外，通过网站可能使更多的用户群体理解到企业的信息，同时也为企业展现出更多的信息和资源。上面就给大家分享下在网站建设过程中的一些小技巧。 一、网站主题布局主题不可过于扩散，网站主题越集中，个别状况下网站所有者在这方面投入的精力会更多，因而所提供信息的品质也会越高。 二、丰盛网站内容两者相辅相成，有着丰盛内容的通常会受访问者的欢送。然而这里的内容丰盛并不是指内容的繁冗，而是指内容的深度。搜索引擎在排名网站时，不仅要看网页的信息相关度，同时也会思考网站的声望如何，比方内部链接有多少，网页的点击率有多低等等。因而一个内容空虚的网站必定会排在内容贫乏的网站后面因为不同的搜索引擎在网页反对方面存在差别，因而在网页设计时不要只留神外观丑陋，许多平时设计网页时罕用到的元素到了搜索引擎那里会产生问题。 三、框架结构有些搜索引擎（如FAST）是不反对框架结构的，他们的"蜘蛛"程序无奈浏览这样的网页。图象区块，除明确反对图像区块链接，其余引擎是不反对它的。当"蜘蛛"程序遇到这种构造时，往往会感到茫然手足无措。因而尽量不要设置链接。 四、特效链接有不少的网站为导航链接加上了特效，如点击某个我的项目会开展上层链接等。这些成果个别在视觉上十分新鲜，但在"蜘蛛"程序的眼里则没那么迷人，相同它无奈解读这种链接。为了让搜索引擎顺利检索到网页，倡议还是就义掉一些花哨的货色。 五、FLASH尽管FLASH制作的网页视觉效果较好，但搜索引擎对此却不太感冒，个案表明这一类的网站很难被百度搜索引擎索引。理智的做法是提供FLASH和非FLASH网页两种抉择，这样即减少了网页的观赏性，又关照到了搜索引擎的情绪。 六、代码品质当创立一个网站，以合乎为规范。这通常是通过形容指定元件做什么。不符合标准的网站无奈应用或容易出错的，规范能够波及到正确的页面布局的可读性，以及确保适当地敞开了编码元素。这包含代码中的谬误，代码为更好的布局，以及确保你的ID和class的正确辨认。 总结：以上就是对于网站建设的六大技巧，心愿大家在建设网站的时候多加留神，防止在网站建设中呈现的一些问题

Hello，大家好。又一周完结了，咱们又如约而至。咱们是好将来团体晓黑板前端团队，简称晓前端。每周五，咱们都会收罗一些乏味，有意义的事件和大家分享。如果你喜爱，欢送关注咱们哟。 封面图信息不对称（asymmetric information）指交易中的各人领有的信息不同。在社会政治、经济等流动中，一些成员领有其余成员无奈领有的信息，由此造成信息的不对称。在市场经济流动中，各类人员对无关信息的理解是有差别的；把握信息比拟充沛的人员，往往处于比拟无利的位置，而信息贫乏的人员，则处于比拟不利的位置。不对称信息可能导致逆向抉择（Adverse Selection）。                                                                                                                 ————百度百科 信息不对称在明天也跳出了经济畛域，被赋予了新的含意：把握信息量大，占据主导信息劣势的一方可能通过管制话语权、疏导价值观等形式对把握信息量小的弱势方施加不可估量的影响。 随着当今科技的进步，人们获取信息的渠道也在飞速增长。从前，人们只能通过口口相传、文书交换的信息，在明天能够由任何人通过搜索引擎、社交媒体、自媒体等等多种渠道轻松取得。然而这样就可能防止信息不对称吗？你获取到的信息肯定是真的吗？ 本周话题：信息的不对称与真实性（上）前段时间，一名20岁的成都女孩闻名了，她的行踪、身份证、实在姓名、家庭住址和电话被赤条条地披露在网络上。有数的人对着她的外貌和工作评头论足，对她进行各种唾骂和不怀好意的评论。原因无他：这名女孩的奶奶被确诊了新冠肺炎。 有人骂她没有道德，亲属确诊后却在成都酒吧转场，牵累了整座城市的人，然而事实是，那一天，女孩的奶奶并未确诊新冠，她自己也并不知情。 有人骂她不明哲保身，年纪轻轻就晓得辗转于夜店，也有人称这名女孩是一名“陪酒女郎”，然而事实是，女孩之前的工作就是负责酒吧的氛围和营销。 还有人对着她被爆出的照片评头论足，口诛笔伐，然而这所谓的照片是从另一位甚至都没去过成都的无辜女孩微博里盗用来的。 仿佛穿上网络的马甲后，人人都是高举正义之剑的执行者，道德的守护人。独一无二，广东东莞的网约车司机艾学生近日接到一张订单，乘客为一家三口带着一个婴儿，上车不久婴儿突发疾病失去知觉。艾学生连闯三个红灯将孩子送医，为此，他要被扣18分，并处以600元的罚款。交警示意需提供相干的医院证实，但婴儿家属却回绝作证，称闯红灯跟他没关系。艾学生说，尽管他无奈了解患者家属的态度，然而并不悔恨这么做。12月15日央视新闻报道后，舆论被引爆，乘客被指“冷血”。 这篇《网约车司机为救婴儿连闯 3 个红灯，家属却回绝作证称「与我无关」》引爆了有数正义之士的怒火，让有数的人用最祖安的形式问候那位家属。从道德方面来说，这仿佛一点也没有错，甚至带了一丝丝热血的象征。热心的坏蛋被冷酷的好人欺侮了，总要有人声援的嘛，不然要是让坏蛋寒了心，谁还违心做好事？换位思考下，谁不怄气？好在见义勇为的艾学生尽管并不了解患者家属的态度，却并不悔恨过后的抉择。 正义仿佛又一次失去了声张，公正仿佛又一次失去了保护——如果没有两天后的那则新闻的话：如何对待「患儿家属拒为网约车司机作证」系乌龙：医院给错电话，单方已握手和解 由以上两个例子粗浅阐明了一件事：信息的不对称性和真实性岂但没有随着信息时代的到来而隐没，反而进一步扩充了影响力。每一次的“网络执法”仿佛都是一次人民的胜利，正义的狂欢，但这所有都得建设在对称且实在的信息之上，不然人们的正义可能会沦为居心叵测的人的棋子，善意被节约，无辜被挫伤，假相被湮没。 下一期周刊咱们将持续这一话题，进行摸索与思考。 乐见舞弊与反作弊的较量：如何检测在线考试舞弊的疫情以后，学生近程上课，不少学校也把考试从线下搬到了线上。不同于线下，线上监考因为减少了更多不可控因素，如何在尽可能少减少老本的前提下，保障考试的偏心公正就成了亟待解决的问题。 阿里巴巴、阅文、丰巢网络三巨头因违反《反垄断法》被罚12月14日讯，据市场监管总局官网，依据《反垄断法》规定，市场监管总局对阿里巴巴投资有限公司收买银泰商业（团体）有限公司股权、阅文团体收买新丽传媒控股有限公司股权、深圳市丰巢网络技术有限公司收买中邮智递科技有限公司股权等三起未依法申报守法施行经营者集中案进行了考察，并于2020年12月14日根据《反垄断法》第 48 条、 49 条作出处罚决定，对阿里巴巴投资有限公司、阅文团体和深圳市丰巢网络技术有限公司别离处以 50 万元人民币罚款的行政处罚。 JavaScript 诞生二十五年编程语言 JavaScript 诞生二十五年，尽管饱受批评，但 JavaScript 已成为 Web 和浏览器利用的重要组成部分。Brendan Eich 在 1995 年花了 10 天设计出了 JavaScript 原型，在它大获胜利之后，微软设计出了超集 TypeScript，之后 Google 的 V8 引擎，基于 V8 的 node.js，Facebook 的 React，等等帮忙 JavaScript 迅速霸占了从桌面到挪动的宽泛平台。JavaScript 当初是世界最风行的编程语言。 ...

作者：long.woo文件下载是咱们开发中比拟常见的业务需要，比方：导出 excel。 web 利用文件下载存在一些局限性，通常是让后端将响应的头信息改成 Content-Disposition: attachment; filename=xxx.pdf，触发浏览器的下载行为。 在 electron 中的下载行为，都会触发 session 的 will-download 事件。在该事件外面能够获取到 downloadItem 对象，通过 downloadItem 对象实现一个简略的文件下载管理器： 1. 如何触发下载因为 electron 是基于 chromium 实现的，通过调用 webContents 的 downloadURL 办法，相当于调用了 chromium 底层实现的下载，会疏忽响应头信息，触发 will-download 事件。 // 触发下载win.webContents.downloadURL(url)// 监听 will-downloadsession.defaultSession.on('will-download', (event, item, webContents) => {})2. 下载流程 3. 功能设计实现一个简略的文件下载管理器性能蕴含： 设置保留门路暂停/复原和勾销下载进度下载速度下载实现关上文件和关上文件所在位置文件图标下载记录3.1 设置保留门路如果没有设置保留门路，electron 会自动弹出零碎的保留对话框。不想应用零碎的保留对话框，能够应用 setSavePath 办法，当有重名文件时，会间接笼罩下载。 item.setSavePath(path)为了更好的用户体验，能够让用户本人抉择保留地位操作。当点击地位输入框时，渲染过程通过 ipc 与主过程通信，关上系统文件抉择对话框。主过程实现代码： /** * 关上文件抉择框 * @param oldPath - 上一次关上的门路 */const openFileDialog = async (oldPath: string = app.getPath('downloads')) => { if (!win) return oldPath const { canceled, filePaths } = await dialog.showOpenDialog(win, { title: '抉择保留地位', properties: ['openDirectory', 'createDirectory'], defaultPath: oldPath, }) return !canceled ? filePaths[0] : oldPath}ipcMain.handle('openFileDialog', (event, oldPath?: string) => openFileDialog(oldPath))渲染过程代码： ...

当点击新窗口时，笼罩已将关上的新窗口，咱们能够应用以下代码window.open("xxx.html", "index"); 谷歌浏览器中能够失常进行跳转，但在火狐和IE中如果窗口已关上便不会进行跳转，这时能够应用以下代码进行解决let newWindow = window.open("xxx.html", "index")newWindow.focus()

作者：Kurosaki本节旨在汇总在开发Electron 窗口可能遇到的问题，做一个汇总，后续遇到问题会继续更新。1. 窗口闪动问题。const { BrowserWindow } = require('electron');const win = new BrowserWindow();win.loadURL('https://github.com');应用new BrowserWindow() 创立出窗口，如果不作任何配置的话，窗口就会呈现，默认是红色的；这个时候应用win.loadURL('https://github.com')，加载近程资源，窗口从新渲染，从而导致窗口呈现闪动。 解决办法： const { BrowserWindow } = require('electron');const win = new BrowserWindow({ show:false });win.loadURL('https://github.com');win.once('ready-to-show',()=>{ win.show();})2. 老版Window7零碎下，窗口白屏问题。公司业务开发的Electron利用，是给老师用的，有些老师是那种老版本Window7，并且敞开了自动更新。解决办法：装置最新版的.NET Framework官网下载地址：https://dotnet.microsoft.com/download/dotnet-framework相干issue： https://github.com/electron/electron/issues/25186 3. macOS下电脑关机，Electron利用阻止关机问题。macOS 关机会把所有的窗口敞开，如果存在// 窗口注册close事件win.on('close',(event)=>{ event.preventDefault() // 阻止窗口敞开})这种代码，会导致阻止零碎关机。 4. Window  零碎下，应用 hide() 办法，可能导致页面挂住不能用。导致这种场景能够是因为调用 hide() 之后不调用 show()  办法，而只是调用 restore() 办法，会导致页面挂住不能用。所以得在 restore() 办法之后增加 show() 办法 5. 新版Electron，导致渲染过程无法访问到remote模块。切换成新版的Electron，new BrowserWindow(options)配置更新，webPreferences中配置enableRemoteModule:true6. macOS下无边框窗口，顶部拖拽问题。在创立窗口时，配置一下preload.js，代码如下：function initTopDrag() { const topDiv = document.createElement('div') // 创立节点 topDiv.style.position = 'fixed' // 始终在顶部 topDiv.style.top = '0' topDiv.style.left = '0' topDiv.style.height = '20px' // 顶部20px才可拖动 topDiv.style.width = '100%' // 宽度100% topDiv.style.zIndex = '9999' // 悬浮于最外层 topDiv.style.pointerEvents = 'none' // 用于点击穿透 topDiv.style['-webkit-user-select'] = 'none' // 禁止抉择文字 topDiv.style['-webkit-app-region'] = 'drag' // 拖动 document.body.appendChild(topDiv) // 增加节点}window.addEventListener('DOMContentLoaded', function onDOMContentLoaded() { initTopDrag()})7. Window零碎下，暗藏菜单问题。Window零碎下，菜单长的很丑，有2种计划能够暗藏菜单应用无边框窗口，去除菜单和边框，本人手写一个管制的边框，目前github都有这些库；应用autoHideMenuBar:true 然而按下ALT键会呈现菜单8. 窗口之间通信。主过程创立窗口配置preload.js，将通信办法挂载到window ...

作者：Kurosaki本文次要解说Electron 窗口的 API 和一些在开发之中遇到的问题。 官网文档 尽管比拟全面，然而要想开发一个商用级别的桌面利用必须对整个 Electron API  有较深的理解，能力应答各种需要。 1. 创立窗口通过BrowserWindow，来 创立 或者 治理 新的浏览器窗口，每个浏览器窗口都有一个过程来治理。 1.1. 简略创立窗口const { BrowserWindow } = require('electron');const win = new BrowserWindow();win.loadURL('https://github.com');成果如下： 1.1.2. 优化问题：electron 的 BrowserWindow 模块在创立时，如果没有配置 show:false，在创立之时就会显示进去，且默认的背景是红色；而后窗口申请 HTML，会呈现视觉闪动。 解决 const { BrowserWindow } = require('electron');const win = new BrowserWindow({ show:false });win.loadURL('https://github.com');win.on('ready-to-show',()=>{ win.show();})两者比照有很大的区别 1.2. 治理窗口所谓的治理窗口，相当于主过程能够干涉窗口多少。 窗口的路由跳转窗口关上新的窗口窗口大小、地位等窗口的显示窗口类型（无边框窗口、父子窗口）窗口内 JavaScript 的 node 权限，预加载脚本等....这些个办法都存在于BrowserWindow模块中。 1.2.1. 治理利用创立的窗口BrowserWindow模块在创立窗口时，会返回 窗口实例，这些 窗口实例 上有许多性能办法，咱们利用这些办法，管理控制这个窗口。 在这里应用Map对象来存储这些 窗口实例。 const BrowserWindowsMap = new Map<number, BrowserWindow>()let mainWindowId: number;const browserWindows = new BrowserWindow({ show:false })browserWindows.loadURL('https://github.com')browserWindows.once('ready-to-show', () => { browserWindows.show()})BrowserWindowsMap.set(browserWindow.id, browserWindow)mainWindowId = browserWindow.id // 记录以后窗口为主窗口窗口被敞开，得把Map中的实例删除。 ...

作者：秦志英前言上一篇文章中咱们剖析了Vue3响应式的整个流程，本篇文章咱们将剖析Vue3中的computed计算属性是如何实现的。在Vue2中咱们曾经对计算属性理解的很分明了，在Vue3中提供了一个computed的函数作为计算属性的API,上面咱们来通过源码的角度去剖析计算属性的运行流程。 computedexport function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>export function computed<T>( options: WritableComputedOptions<T>): WritableComputedRef<T>export function computed<T>( getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>) { let getter: ComputedGetter<T> let setter: ComputedSetter<T> if (isFunction(getterOrOptions)) { getter = getterOrOptions setter = NOOP } else { getter = getterOrOptions.get setter = getterOrOptions.set } return new ComputedRefImpl( getter, setter, isFunction(getterOrOptions) || !getterOrOptions.set ) as any}在最开始应用函数重载的形式容许computed函数承受两种类型的参数：第一种是一个getter函数, 第二种是一个带get和set的对象。接下就是在函数外部依据传入的不同类型的参数初始化函数外部的getter和setter函数,如果传入的是一个函数类型的参数,那么getter就是这个函数，setter就是一个空的操作,如果传入的参数是一个对象,则getter就等于这个对象的get函数,setter就等于这个对象的set函数。在函数的结尾返回了一个new ComputedRefImpl,并将后面咱们标准化后的参数传递给了这个构造函数。上面咱们就来剖析一下ComputedRefImpl这个构造函数。 ComputedRefImplclass ComputedRefImpl<T> { // 缓存后果 private _value!: T // 从新计算开关 private _dirty = true public readonly effect: ReactiveEffect<T> public readonly __v_isRef = true; public readonly [ReactiveFlags.IS_READONLY]: boolean constructor( getter: ComputedGetter<T>, private readonly _setter: ComputedSetter<T>, isReadonly: boolean ) { // 对传入的getter函数进行包装 this.effect = effect(getter, { lazy: true, // 调度执行 scheduler: () => { if (!this._dirty) { this._dirty = true // 派发告诉 trigger(toRaw(this), TriggerOpTypes.SET, 'value') } } }) } // 拜访计算属性的时候 默认调用此时的get函数 get value() { // 是否须要从新计算 if (this._dirty) { this._value = this.effect() this._dirty = false } // 拜访的时候进行依赖收集 此时收集的是拜访这个计算属性的副作用函数 track(toRaw(this), TrackOpTypes.GET, 'value') return this._value } set value(newValue: T) { this._setter(newValue) }}ComputedRefImpl类在外部保护了_value和_dirty这两个十分重要的公有属性,其中_value应用用来缓存咱们计算的后果，_dirty是用来管制是否须要重现计算。接下来咱们来看一下这个函数的外部运行机制。 ...

作者: OBKoro1 electron原生对话框electron的原生对话框dialog，提供了零碎对话框, 提供了音讯提醒、音讯提醒操作以及抉择文件、保留文件等操作，明天就跟着本文来理解一下electron。 PS：本文以及相干示例出自electron-playground，所有示例都能够即时运行，这是一个能够疾速试验electron的各种相干API的我的项目，你能够基于它来学习和理解electron的相干api。 1. 音讯提醒 dialog.showMessageBoxSync1.1 音讯提醒const { dialog } = require('electron')dialog.showMessageBoxSync({ type: 'info', title: '这里是题目', message: '提醒内容', detail: '额定信息'})electron-playgroud运行示例: 1.2 音讯提醒与确认const { dialog } = require('electron')const res = dialog.showMessageBoxSync({ type: 'info', title: '这里是题目', message: '提醒内容', detail: '额定信息', cancelId: 1, // 按esc默认点击索引按钮 defaultId: 0, // 默认高亮的按钮下标 buttons: ['确认按钮', '勾销按钮'], // 按钮按索引从右往左排序})console.log('操作后果', res, res === 0 ? '点击确认按钮' : '点击勾销按钮') // 依据按钮数组中的下标来判断console.log('操作中还有个checkboxLabel的单选框须要应用showMessageBox api才能够获取到返回值')electron-playgroud运行示例: 1.3 API阐明dialog.showMessageBoxSync(browserWindow, options)显示一个音讯框，它将阻止过程，直到音讯框被敞开。返回值为点击的按钮的索引。 ...

不要冒然评估我，你只晓得我的名字，却不晓得我的故事，你只是听闻我做了什么，却不知我经验过什么。 俗话说得好，产品有三宝，弹窗浮层加疏导。 上图截图自我司 App 晓黑板中的口算模块，置信每个 App 开发在工作中都碰到这种场景，为了防止用户对新性能产生困惑，会对一些性能加一些疏导操作。在原生开发中，例如 Android 开发中，咱们能够应用 NewbieGuide 等开源库来实现。然而很遗憾的是，在 Dart packages 中找了一圈，满载而归。 然而咱们还是很快就解决了问题，既然解决不了问题，咱们就要学会让这个问题不存在，这时候开发一宝就显得尤其有用了。 本文完，大家下期再见???? ~ ~ ~ 开个玩笑。真的猛男，敢于直面惨淡的人生，也敢于正视淋漓的鲜血，这区区需要怎么能打倒咱们。接下来咱们开始推敲一下这个疏导操作要怎么实现，置信各位小伙伴接到这个需要第一个想到的就是，这玩意儿不就是在整个页面下面盖一个蒙层，而后把两头再抠一块进去。最初再加一些文字和一个下一步按钮就行了嘛。你要是把这个需要想得这么简略，那你可就真是大对特对了。所以咱们就按后面说的三步来实现这个货色。当然，你如果不想接着往下看的话，能够间接点击这里应用咱们开发实现的疏导组件库来疾速在你的 Flutter 我的项目中接入疏导性能。 盖个蒙层那么如何在 Flutter 页面上盖一个浮层呢？翻了一下 Flutter 的 API 文档，找到了两个法宝，别离是 Overlay 和 OverlayEntry。两者的应用办法如下。 class _MyWidgetState extends State<MyWidget> { OverlayEntry overlayEntry; @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ RaisedButton( onPressed: () { /// 1. 创立一个 overlayEntry 实例，builder 办法返回一个 Widget /// 该 Widget 会被渲染到页面顶层 overlayEntry = OverlayEntry( builder: (context) => Container( color: Colors.white.withOpacity(.4), child: Center( child: RaisedButton( onPressed: () { /// 3. 执行 remove 办法销毁 overlayEntry 实例 overlayEntry.remove(); }, child: Text('点我敞开 OverlayEntry'), ), ), ), ); /// 2. 应用 OverlayState.insert 办法来显示 overlayEntry Overlay.of(context).insert(overlayEntry); }, child: Text('点我康康 Overlay 的用法'), ), ], ), ); }}如果你不嫌烦的话，还能够点击这里亲自试一试成果。 ...

作者: OBKoro11. 协定: 从网页端唤起Electron利用elelctron提供了一个形式来主动唤起electron利用(如下图)，这一次就让咱们来学学如何通过连贯来唤起electron利用，并且咱们能够应用这个性能来做点什么。 1.1 协定唤起示例:1.2 什么是协定electron注册的协定, electron会将协定注册到零碎的协定列表中，它是零碎层级的API，只能在以后零碎下应用, 其余未注册协定的电脑不能辨认。 Electron的app模块提供了一些解决协定的办法, 这些办法容许您设置协定和勾销协定, 来让你的利用成为默认的应用程序。 1.3 协定的作用注册一个协定到零碎协定中, 当通过其余利用/浏览器网页端关上新协定的链接时，浏览器会检测该协定有没有在零碎协定中, 如果该协定注册过，而后唤起协定的默认处理程序(咱们的利用)。 1.4 注册协定: app.setAsDefaultProtocolClient协定须要在ready事件后注册，具体代码如下. // 注册自定义协定const { app } = require('electron')const path = require('path')// 注册自定义协定function setDefaultProtocol() { const agreement = 'electron-playground-code' // 自定义协定名 let isSet = false // 是否注册胜利 app.removeAsDefaultProtocolClient(agreement) // 每次运行都删除自定义协定 而后再从新注册 // 开发模式下在window运行须要做兼容 if (process.env.NODE_ENV === 'development' && process.platform === 'win32') { // 设置electron.exe 和 app的门路 isSet = app.setAsDefaultProtocolClient(agreement, process.execPath, [ path.resolve(process.argv[1]), ]) } else { isSet = app.setAsDefaultProtocolClient(agreement) } console.log('是否注册胜利', isSet)}setDefaultProtocol()1.5 应用协定应用形式: 在浏览器地址栏输出注册好的协定，即可唤起利用。 ...

作者：余韵之LazyLoading 懒加载 Chunk是什么？咱们能够应用懒加载的形式引入模块，比如说当触发了某个条件，在通过import的形式引入模块。这样能够使得我的项目的性能会更加的好。 举个例子： 当咱们点击页面的时候，才会去引入lodash模块，这里 import()返回的是promise async function getComponent() { const {default: _} = await import(/* webpackChunkName:"lodash" */'lodash') const element = document.createElement('div') element.innerHTML = _.join(['y', 'kk'], '-'); return element;}document.addEventListener('click', () => { getComponent().then(element => { document.body.appendChild(element) })})同样的路由懒加载的意思，示意当咱们监听到路由变动了，才会去引入对应的页面模块。 因而能够晓得，Chunk是什么？打包生成几个JS文件，就是几个Chunk ShimmingShimming：在打包过程中，有时候须要对代码兼容。这种兼容不局限于浏览器高下版本。 举个例子 每个文件都是一个模块，每个模块都应该引入本人的依赖能力应用该依赖。 import $ from 'jquery'export function setBackground(){ $('body').css('background','red')}然而这样的话，每个文件都要写一遍 import $ from 'jquery'因而能够应用垫片的形式来主动配置 plugins:[ new webpack.ProvidePlugin({ $:'jquery', _join:['lodash','join'] })]当咱们配置了上述内容，那么意味着当运行代码的时候看到 $这个符号就会主动去node_modules里引入jquery。他的原理就是主动帮咱们增加了import的步骤。看到_join就会主动找到 lodash里join的办法于是咱们能够间接这些一个文件模块应用 export function setBackground(){ $('body').css('background', _join(['green'], ''))}webpack与浏览器缓存（caching）当咱们打包生成了 ...

作者：余韵之Tree Shaking1、什么是Tree Shaking示意 只引入须要的模块里的代码，没有应用的是不会打包 import { add } from './math.js';add(1, 2);math.js里有两个办法，如果应用了Tree Shaking 那么只会打包add办法 2、如何配置webpack.prod.js 生产环境不须要配置这个，即便配置了这个也是无作用的。 optimization: { // 应用tree shaking usedExports: true}package.json "sideEffects": false, // 示意对所有的模块都要应用 tree shaking"sideEffects":["@babel/polly-fill"，"*.css"] //示意排除@babel/polly-fill ,排除所有的css文件 其余import 模块都应用 tree shaking留神如果是开发环境development tree shaking 会不失效，因为调试的话sourceMap行数会不准，生产环境production就会失效 Production Development1、如何切换开发环境和生产环境webpack配置创立生产环境文件 ./build/webpack.prod.js创立开发环境文件 ./build/webpack.dev.js创立公共的代码文件 ./build/webpack.common.js应用插件 webpack-merge 把配置文件合并 2、配置打包命令package.json "scripts": { "dev": "webpack-dev-server --config ./build/webpack.dev.js", // 启动热更新，抉择dev配置文件 "build": "webpack --config ./build/webpack.prod.js" // 间接打包，走prod配置文件}Code Splitting咱们为什么要做代码宰割呢？举个例子。 假如咱们引入了一个lodash第三方库，它的大小是1MB，咱们的业务代码也有1MB。此时不做任何解决最初打包生成一个main.js大小为2MB。用户关上浏览器须要申请一个2MB的main.js文件。 import _ from "lodash"; // 假如lodash有1MB// 假如业务代码有1MBconsole.log(_.join(['a', 'a', 'c'],"---"))console.log(_.join(['a', 'b', 'c'],"---"))此时咱们批改业务代码 ...

作者：余韵之webpack目前是前端罕用的工程化工具了。它能够帮忙咱们自动化构建打包各类的资源，极大的进步了咱们打包代码的效率。在webpack看来，所有的资源文件都是模块(module),只是解决的形式不同。 一、初探webpack1、装置webpack倡议不要全局装置webpack,因为不同的我的项目webpack的版本号是不一样的。这样多个我的项目来回切换是很不不便的。 npm install wepack webpack-cli -g在我的项目内装置webpack npm install wepack webpack-cli -D留神：webpack-cli的作用是咱们能够在命令行里间接应用webpack 查看版本 npx webpack -v查看 webpack 所有能够装置的版本号 npm info webpack2、最简略的webpack.config.js的配置const path = require('path');module.exports = { entry: { main:'./src/index.js' }, output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }}这段配置是通知咱们： 咱们须要打包入口文件是./src/index.js,最初输入的打包文件是在当前目录下dist/main.js如果存在bundle/index.html，就能够通过script引入main.js文件了。当然这个也能够通过webpack自动化构建。3、两种打包形式1) npxnpx webpacknpx 示意会在当前目录里寻找依赖变量 webpack 2) script在package.json里配置 "scripts": { "bundle": "webpack"},于是能够运行 npm run bundle运行 npx webpack / npm run bundle 会先查看是否有配置文件webpack.config.js，如果没有就走默认配置，如果有就走配置文件 4、打包的参数详解 Hash:示意这一次打包的惟一标识值Version:示意这一次打包的应用版本Time:示意以后打包整体耗时Asset:示意此次打包呈现了bundle.jsSize:示意该文件的大小Chunk Names 示意的是 entry里入口的key,默认为main,也能够任意改为 xxx,yyyEntrypoint main = bundle.js 示意入口文件 以及顺次打包的文件0[2]……二、应用Loader打包资源1、什么是loader？webpack不能辨认非js的模块，须要对于不同的模块提供不同的打包计划，于是要求助于loader。如：css-loader、sass-loader、file-loader、vue-loader、postcss-loader等等 ...

web概述html概述文本处理罕用标签web概述：web三要素： 浏览器：向服务器发动申请，下载服务器中的网页（HTML），而后执行HTML显示出内容。服务器：承受浏览器的申请，发送相应的页面到浏览器。HTTP协定：浏览器与服务器的通信协定。罕用浏览器 IEEdgeFIREfoxChromesafari特点： 图形化与平台无关分布式的动静的交互的HTML概述什么是HTML： 超文本标记语言（HyperText Markup Language，HTML）是一种用于创立网页的规范标记语言。HTML是一种根底技术，常与CSS、JavaScript一起呗泛滥网站用于设计令人赏心悦目的网页、网页应用程序以及挪动应用程序的用户界面。网页浏览器能够读取HTML文件，并将其渲染成可视化网页。HTML形容了一个网站的构造语义随着线索的出现，使之成为一种标记语言而非编程语言。 什么是标记？ HTML标记通常也被称为HTML标签，HTML标签是由尖括号突围的关键词。HTML标签通常是成对呈现的。标签对中的第一个标签是开始标签，第二个标签是完结标签。 html标签分类： 开始标签：包含元素的名称，包裹在开始（<）和完结（>）尖括号中。这示意元素开始-在本例中示意了一个段落的结尾。完结标签：这与开始标记雷同，除了它在元素名称之前有一个正斜杠（/）。这示意元素完结的地位-在本例中示意了一个段落的结尾。1）嵌套元素你能够把元素放在其余元素之中--这被称之为嵌套。如果咱们想要表明我的小猫是十分火暴的，能够将very嵌套在<strong>中，意味着这个单词被着重强调： <p>My cat is <strong>very</strong> grumpy.</p>2）块级元素和内联元素在HTML中有两种须要晓得的重要元素类别，块级元素和内联元素。 块级元素在页面中以块的模式展示 —— 绝对与其后面的内容它会呈现在新的一行，其后的内容也会被挤到下一行展示。块级元素通常用于展现页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block模式展示的块级元素不会被嵌套进内联元素中，但能够嵌套在其它块级元素中内联元素通常呈现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常呈现在一堆文字之间例如超链接元素<a>或者强调元素<em>和<strong>。3）正文在编写HTML代码使想要对代码进行解释阐明，那便能够将代码的阐明放在正文中。 正文是被浏览器所疏忽，并且对用户不可见; 语法： <!-- 正文内容 -->4）空元素不是所有元素都领有开始标签、内容和完结标签。有些元素只有一个标签，通常用来在此元素的地位插入/嵌入一些货色，这些元素被称之为空元素。在HTML中通常在一个空元素上应用一个闭标签是有效的。 5）属性属性蕴含元素的额定信息，这些信息不会呈现在理论的内容中。 罕用的规范属性 id： 定义元素在页面中的惟一标识title：鼠标移入到元素上时提醒的文本class：款式相干，定义元素援用的类选择器style：款式相干，定义元素的行内款式文本处理1）题目元素<h#>...</h#> 2）段落元素<p>...</p> 3）列表元素有序列表:<ol>...</ol>无序列表:<ul>...</ul>列表项：<li>...</li> 4）分区元素块分区元素:<div>...</div>行内分区元素:<span></span> 5）元素显示方式块级元素，默认状况下，元素前后都会主动换行。行内元素，不会换行，和其余行内元素位于同一行。 HTML罕用标签1、图像 图像元素<img>将图像增加到页面必须属性src 绝对路径和相对路径绝对路径：文件从最高级目录下开始的残缺门路。相对路径：指标文件的地位是绝对于以后文件的地位。 2、超链接 <a href="" target="">文本</a>href属性：链接URLtarget属性：指标打开方式 3、表格 创建表格：<table></table>创立行：<tr><tr>创立列：<td><td> 4、表单 （1）什么是表单？表单用于显示、收集信息，并提交信息到服务器。表单二因素：form元素，表单控件表单就是从浏览器向服务器传输数据的伎俩 （2）表单控件是信息输出项 （3）<input> 元素: 文本框:<input type="text"/>明码框:<input type="password"/>单选框：<input type="radio"/>复选框：<input type="checkbox"/>提交按钮：<input type="submit"/>重置按钮：<input type="reset"/>一般按钮:<input type="button"/>暗藏域:<input type="hidden"/>文件抉择框:<input type="file"/>（4）其它元素 标签: <lable for="控件ID"></lable>for:设置该文本所关联的控件ID，关联后点击标签等同于点击控件。 文本域: <textarea>文本</textarea>多行文本框 下拉选: <select><option> ...</option>...</select>

作者：梁棒棒托盘虽小，作用不小。它是你的利用正在操作系统运行的标识，它能够告诉你有新音讯，能够唤醒利用界面，能够设置上下文（右键）菜单设置更多的性能等。上面咱们就来一一实现这些性能，要在主过程进行操作。 1. 创立托盘首先来创立一个托盘图标，简略三步即可： 从electron库引入Tray类获取图标地址实例化Tray并传入图标地址代码也很简略： const { Tray } = require('electron')const path = require('path')const icon = path.join(__dirname, '你的图片门路')new Tray(icon)一个系统托盘就会被创立进去。很简略对不对，然而这个图标当初还没有任何性能，接下来咱们为图标增加一些属性和事件。 2. 设置托盘属性为tray实例设置一些属性和事件，包含上下文菜单、鼠标移入文字。具体文档点击这里。 这里咱们为tray设置灵便图标，让它能够依据零碎主题显示不同的图标；再设置一个鼠标移入图标的时候会显示的提醒文字，最初为它设置上下文菜单，让它能够具备一些性能。 先看下效果图： 附上代码： const { Tray, Menu, nativeTheme, BrowserWindow } = require('electron')const path = require('path')let tray// 设置顶部APP图标的操作和图标const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')// 依据零碎主题显示不同的主题图标tray = new Tray(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon)tray.setToolTip('Electron-Playground')const contextMenu = Menu.buildFromTemplate([ { label: '关上新窗口', click: () => { let child = new BrowserWindow({ parent: BrowserWindow.getFocusedWindow() }) child.loadURL('https://electronjs.org') child.show() }, }, { label: '删除图标', click: () => { tray.destroy() }, },])// 设置上下文菜单tray.setContextMenu(contextMenu)想亲自试一试的话点electron-playground。而后持续： ...

作者：梁棒棒1.简介菜单次要分为应用程序菜单、上下文菜单，在tray和dock中也有用到菜单，本节次要介绍前两种。文档地址 1.1 应用程序菜单mac和windows都在左上角，然而一个在屏幕左上角一个在应用程序视图左上角。mac是这样的： windows长这样： 如果windows下没有显示菜单，在以后窗口按alt键即会呈现。1.2 上下文菜单即右键菜单。 2. 创立菜单2.1 创立应用程序菜单接下来咱们创立应用程序菜单。如下步骤： 引入Menu类定义一个菜单模板调用Menu类的buildFromTemplate办法，该办法会依据传入的模板创立对应的菜单调用Menu类的setApplicationMenu办法此四步即可创立应用程序菜单，先来看下效果图。 附上代码： // 步骤一const { Menu, dialog, app } = require('electron')// 步骤二const template = [ { label: 'app', // macOS下第一个标签是应用程序名字，此处设置有效 submenu: [ { label: '退出', click: () => { app.quit() } }, { label: '对于', click: () => { app.showAboutPanel() } } ] }, { label: '文件', submenu: [ { label: '子菜单', click: () => { // 调用了dialog（弹窗模块），演示成果 dialog.showMessageBoxSync({ type: 'info', title: '提醒', message: '点击了子菜单' }) } } ] }]// 步骤三const menu = Menu.buildFromTemplate(template)// 步骤四Menu.setApplicationMenu(menu)2.2 创立上下文菜单即创立右键点击菜单，前三步与创立应用程序菜单雷同，最初一步需监听窗口context-menu事件展现菜单选项。监听事件context-menu文档 ...

忽然让你开发Electron利用，你能hold住吗？如果领导忽然说须要开发一款前端桌面端利用，那么对于咱们前端er来说抉择Electron是一件牵强附会的事件。但事实上很多同学对于Electron都不太理解和相熟。 如果忽然让咱们去开发Electron利用，很多人都会陷入迷茫和懵逼的状态。而后在依附网上绝对较少的材料，缓缓摸索、一路踩坑的实现Electronn的需要。 为了解决上述问题，咱们实现了一个我的项目，并把它开源了进去, 心愿可能对大家学习Electron有点帮忙。 疾速学习和上手Electron: electron-playgroundelectron-playground是我司(好将来团体晓黑板)前端团队近期开源的我的项目。 electron-playground我的项目的目标帮忙前端仔更好、更快的学习和了解前端桌面端技术Electron, 少走弯路。 electron-playrgound能为我学习Electron做什么带有gif示例和可操作的demo的教程文章。系统性的整顿了Electron相干的api和性能。搭配演练场，本人入手尝试electron的各种个性。上面我来具体介绍一下我的项目的内容。 我的项目演示1. 带有gif示例和可操作的demo文章解说我的项目搭配一系列教程文章，这些文章都是通过踩坑验证、成体系化的内容，并且带有gif示例，和可操作的demo示例、流程图等内容。 我的项目自带的gif演示menu: 增加菜单 我的项目demo操作的gif演示dialog: 音讯提醒与确认 dialog: 抉择文件 流程图窗口治理-创立和治理窗口 系统性的整顿了Electron相干的api和性能electronn-playground系统性的整顿了Electron的相干API和性能，以及对于工程化相干的内容。 electron-playground列表分类工程化 解体剖析和收集开发调试打包问题利用更新利用 自定义协定零碎提醒和文件抉择菜单系统托盘文件下载窗口治理 创立和治理窗口暗藏和复原聚焦、失焦全屏、最大化、最小化窗口通信窗口类型窗口事件其余 安全性electron-playground列表分类截图 演练场想要实现更简单的操作，咱们参考fiddle创立了演练场。 演练场集成了vscode的web端编辑库：monaco-editor，编码体验靠近vscode。 如何启动electron-playground启动流程如下: git clone https://github.com/tal-tech/electron-playground.git // 下载我的项目npm install // 装置依赖npm run start // 启动我的项目欢送下载学习/体验electron-playground是一个通过尝试electron各种个性，使electron的各项个性所见即所得, 来达到咱们疾速上手和学习electron的目标。 感兴趣的同学能够下载一下我的项目，体验一下，心愿通过这个我的项目能够帮忙大家更好、更快的学习和了解前端桌面端技术Electron, 少走弯路 如果感觉还不错的话，就给个Star⭐️ 激励一下咱们吧~ 咱们是晓黑板前端，欢送关注咱们的知乎、Segmentfault、CSDN、简书、开源中国、博客园账号。

作者：肖剑华 可视化是前端可视化图形是计算机图形学向量就是那个向量，高中学过的，你懂的树是那棵贼丑的树后果首先先看看本文最终的后果。是不是贼丑！是不是能在画展上卖个好价格！ 过程好了，话不多说， 看看这棵贼丑的树是怎么诞生的吧。 坐标系坐标系，或者说立体直角坐标系，是几何图形学的根底，其次是点、线、面这些元素。坐标系大家都很相熟， 最后接触坐标系应该是初中， 那时候的坐标系不知大家还有没有印象。原点在两头， 程度轴是 x 轴， 竖轴是 y 轴， 分为四个象限。然而呢, html canvas 这货， 默认原点在左上角， x 轴是跟立体直角坐标系是统一的， y 轴是向下的！！置信这种坐标轴在日常工作中应用 canvas 绘图给前端人不晓得造成过多少麻烦， 计算起来麻烦费劲， 还容易出 bug。那么如何把 canvas 的坐标系变成立体直角坐标系呢 Maaaaaaaaagic!const canvas = document.querySelector('canvas')const ctx = canvas.getContext('2d')// 咱们这里把原点定位在canvas左下角ctx.translate(0, canvas.height)// 关键步骤： 将canvasY轴方向翻转ctx.scale(1, -1)两行代码， 就实现了对坐标系的翻转。咱们用一个 ???? 来验证一下假如，咱们要在宽 512 * 高 256 的一个 Canvas 画布上实现如下的视觉效果。其中，山的高度是 100，底边 200，两座山的核心地位到中线的间隔都是 80，太阳的圆心高度是 150。咱们这里应用 rough.js 减少一下趣味性 <canvas width="512" height="256" style="display: block;margin: 0 auto;background-color: #ccc"></canvas>const canvas = document.querySelector('canvas')const rc = rough.canvas(canvas)rc.ctx.translate(0, canvas.height)rc.ctx.scale(1, -1)const cSun = [canvas.width / 2, 106]const diameter = 100 // 直径const hill1Points = { start: [76, 0], // 起始点 top: [176, 100], // 顶点 end: [276, 0] // 起点}const hill2Points = { start: [236, 0], // 起始点 top: [336, 100], // 顶点 end: [436, 0] // 起点}const hill1Options = { roughness: 0.8, stokeWidth: 2, fill: 'pink'}const hill2Options = { roughness: 0.8, stokeWidth: 2, fill: 'chocolate'}function createHillPath(point) { const { start, top, end } = point return `M${start[0]} ${start[1]}L${top[0]} ${top[1]}L${end[0]} ${end[1]}`}function paint() { rc.path(createHillPath(hill1Points), hill1Options) rc.path(createHillPath(hill2Points), hill2Options) rc.circle(cSun[0], cSun[1], diameter, { stroke: 'red', strokeWidth: 4, fill: 'rgba(255, 255, 0, 0.4)', fillStyle: 'solid' })}paint()这里咱们翻转了坐标系， 定义了 mountain1，mountain2，太阳 的各个点的坐标， 齐全是参照直角坐标系的坐标。最终的实现成果如下（是不是也能在画展上卖个不错的价格） ...

我的项目中某个页面忽然呈现多个input框主动填充浏览器贮存的账号密码，定位许久，寻源无果，只恶化寻解决之法 办法1input增加属性autocomplete="off" H5官网属性，但 有效（chrome）办法2input增加属性autocomplete="new-password" 百度寻得，说是网易邮箱登录明码框的玩法，然而 仍旧有效（chrome）最终办法页面最后面放两个暗藏input <input style="display:none"><input type="password" style="display:none">还是stack比拟靠谱，理由如下Chrome only autocompletes the first <input type="password"> and the previous <input>

HTML是什么HTML(Hyper Text Markup Language)是一种超文本标记语言，超文本就是不仅仅是文本内容，还包含声音、图画、表格、链接等。 艰深来讲，HTML就是一种语言，相似于汉语、英语、日语等，区别在于汉语、英语等是用于人与人之间的语言，而HTML是用于人与浏览器之间的语言。咱们要想让浏览器依照咱们的志愿来展现网页内容，就须要用HTML来通知浏览器网页中有什么内容等，然而具体长什么样子，有什么性能，还须要CSS和JavaScript来实现。 HTML 进行网页形容，就好比人骨骼、器官，但无具体长相，也无奈做出动作反馈。CSS 进行款式定义，就好比人的皮肤，描绘出人的具体妆容外貌。JavaScript 是一种脚本语言，好比是人的灵魂，使人能跑能动，可能做出反馈。 HTML构造介绍HTML的构造划分之前，先说一说标签 ，HTML是以标签的模式来体现整体构造和内容书写的，标签由尖括号突围的关键词，比方 \<html\>,通常是成对呈现的，如 \<html\>.... \</html\>,也有局部例外，如 \<br\> 上面看一下HTML的典型的网页构造划分 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Document</title> </head> <body> 这里是文档的主体... ... </body></html>\<!DOCTYPE html\> 申明为 HTML文档,因为浏览器可能精通多种语言，因而这一语句就是通知浏览器，我上面的文档是html类型的，请用html的解析形式解析。注：doctype并不是HTML标签，且不辨别大小写，即可写为\<!doctype html\>。\<html\> 元素是 HTML 页面的根元素，这是一个成对的标签，即通知浏览器\<html\>是我的文档开始地位，\</html\>为完结地位，两头全部都是html文档内容。\<head\> 元素蕴含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格局为 utf-8。就是通知浏览器一些解析前的筹备数据。charset是它的一个属性，它规定了 HTML 文档的字符时应用的utf-8编码。\<title\>元素形容了文档的题目。就是整个网页的大题目! \<body\> 元素蕴含了可见的页面内容，网页中显示的所有内容都写在body标签中。\<h1\> 元素定义一个大题目。\<p\> 元素定义一个段落。utf-8是一种可变长度字符编码，能够将其了解为ASCII码的进阶版，又称万国码，蕴含了包含汉字在内的多国语言常用字的编码。补充在应用VScode编写HTML文档时，输出一个!而后按TAB键或者回车ENTER键会主动补全HTML构造如下（<!-- 此标签中为正文内容--\>）： <!DOCTYPE html> <html lang="en"> <!-- lang是 <html>标签的一个属性，表明文档的语言，其中”en“示意英语 --><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 上句是通知浏览器解析此文档是主动适应屏幕的宽度 --> <title>Document</title></head><body> </body></html>[注] 自己也正在自学当中，文中如有了解不当或者谬误表述，欢送交换斧正。

开启 DarkMode 在app.json中配置darkmode为true，示意开启深色模式配置变量文件 theme.json, 并在 app.json 中配置门路引入"themeLocation":"theme.json"在theme.json中定义相干变量 { "light": { "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black" }, "dark": { "navigationBarBackgroundColor": "#000", "navigationBarTextStyle": "white" }}在app.json中利用配置属性，以@结尾援用变量 "window": { "navigationBarBackgroundColor": "@navigationBarBackgroundColor", "navigationBarTitleText": "考研政治定制学", "navigationBarTextStyle": "@navigationBarTextStyle"},WXSS 适配，通过媒体查问 prefers-color-scheme 适配不同主题page { background: #f2f2f2;}@media (prefers-color-scheme: dark) { .page { background: #000; }}参考：小程序深色模式适配官网文档

前端三大外围技能HTML/CSS/JAVASCRIPT JAVASCRIPT(JS)倒退历史1995 网景 LiveScript->JavaScript1996 微软 JScript Ecma TC39 ECMA-2621997 ES1ES5(ECMAScript5)->2015年6 ES6(ES2015)->.... 客户端JS的组成部分ES(外围语言) 变量、数据类型、函数、对象、数组，语句...DOM 文档对象模型BOM 浏览器对象模型JS作用浏览器JS做网页特效手机APP游戏服务器端(node)...JS是一门脚本语言(潜在其余语言中执行) 解释型语言 根本语法JS代码的地位行内式 <div onclick="alert('hello js');">我是一个div</div>理解即可，局限大，个别不采纳 内嵌式 <script> alert('hello world');</script>外链式 <script src="./my.js"></script> 我的项目中大量应用 正文 <!-- html正文 -->js正文 单行正文 // ..... 多行正文 /* */语句 以分号作为完结标记,辨别大小写输入语句alert('内容') 弹出窗口document.write() 把内容输入到页面中 反对标签console.log() 在控制台输入内容变量 1 含意 在程序运行期间 其值能够产生扭转的量 实质上一个容器2 定义 var 变量名; 或一次定义多个变量 var a = 1, b, c = 3;3 赋值 var 变量名; 变量名 = 值; var 变量名 = 值;4 变量名的命名标准 * 字母、数字、_、$组成 * 不能以数字结尾 * 辨别大小写 a A * 不能是关键字和保留字 if/else/for... * 名字有语义 * 举荐小驼峰命名 如 studentName 多个单词组成，第二个单词首字母大写 *大驼峰-多个单词组成，每个单词首字母都大写 如MaxLength,个别用于类名的设置 *帕斯卡命名法-所有字母都小写，单词之间用_连贯 如max_length数据类型 ...

（接上篇） 性能标签 超链接 <a href="跳转的地址"></a>href能够是一个网址，也能够是一个文件,还能够是一个html文件的地位target 指定在什么窗口关上 _blank示意在新窗口关上 默认在以后窗口title 悬停文本锚点 定义锚点 1 <a name=""></a> 2 标签配合id属性 跳转到锚点 本页面跳转 <a href=“#锚点名或标签id属性值”>****</a> 门路 分为相对路径和绝对路径 绝对路径：网址、带盘符相对路径 从本身登程 * 当引入的文件和以后文件在同级目录下 间接写引入文件名即可或./引入文件名 * 当引入的文件在以后文件的上一级目录下 ../引入文件 图片 <img src="" title="" alt="" > alt:替换 src- 图像的地位 title题目 alt 代表图像的代替文本 width height border 当前用css设置 usemap 图片格式 gif/jpeg/png列表 无序列表（罕用） <ul> <li>...</li> <li>...</li> <li>...</li> </ul> 有序列表 <ol type="A" start="2"> 有序列表，自带数字 以字母的模式开始，从第二个字母开始 <li> 玛卡巴卡 </li> <li> 依古比古 </li> 自定义列表 <dl> **dt为自定义列表，dd围绕dt开展** <dt>html题目</dt> <dd> 前端网页根底语言 </dd> <dd> 标记语言</dd> <dt>css</dt> <dd>层叠样式表</dd> <dd>负责页面的体现</dd> <dt>js</dt> <dd>编程</dd> </dl> 通常无序表格会更罕用，无序表加上数字就成了有序。 表格 ...

公司我的项目需要，要实现工作卡片在不同工作列表之间进行拖拽实现工作类别的更改。于是找了一下相干文章，略微学习了一下。实现成果如下图。 次要用到的是H5自带的拖拽成果。其实我的项目前端局部是应用React编写的，也是在应用H5实现了之后才理解到Dan Abramov大佬有个React-DnD组件对原生拖拽办法进行了封装。略微学习了一下，很强。后续有应用到再写篇文章进行分享。 相干事件定义与用法波及一个属性六个事件。事件均为H5原生事件。 属性 draggable：失常div是不容许进行拖动的。须要增加属性draggable="true"将元素设置为可拖动。事件 ondragstart：拖拽元素事件。在被拖拽时被调用。ondrag：拖拽元素事件。在元素正在被拖拽时调用。ondragend：拖拽元素事件。在拖拽元素搁置时调用。ondragenter：搁置元素事件。在拖拽元素进入到搁置元素无效区域时调用。ondragover：搁置元素事件。在拖拽元素笼罩搁置元素无效区域时调用ondragleave：搁置元素事件。在拖拽元素来到搁置元素无效区域时调用。ondrop：搁置元素事件。在拖拽元素被搁置在搁置元素中调用。根底代码实现拖拽元素相干事件实现代码如下。 function handleOndragstart() { /* 该事件为拖拽元素被拖拽时调用。个别用于获取该拖拽元素的惟一标识，如id等。以不便后续数据更新时进行元素定位 */}function handleOndragend() { /* 该事件在拖拽元素被搁置时调用。个别用于重置变量操作 */}function handleOndrag() { /* 该事件凭集体需要进行性能实现 */}拖拽元素H5代码如下 <div draggable="true" ondragstart="handleOndragstart()" ondrag="handleOndarg()" ondragend="handleOndragend()" > 该元素为拖拽元素</div>搁置元素相干事件实现代码如下 /*默认状况下，数据/元素不能搁置到其余元素中。 如果要实现该性能，咱们须要避免元素的默认解决办法。咱们能够通过调用 event.preventDefault() 办法来实现 ondragover 事件。 */function handleOndragover(event) { event.preventDefault(); /* 在这里进行你的函数解决 */}function handleOndragenter(event) { event.preventDefault(); /* 在这里进行你的函数解决 */}function handleOndragleave(event) { event.preventDefault(); /* 在这里进行你的函数解决 */}function handleOndrop(event) { event.preventDefault(); // 革除默认事件。drop 事件的默认行为是以链接模式关上 /* 个别在该事件中，也就是拖拽元素被放下的时候与后端进行交互进行数据更新 */}搁置元素H5代码如下 <div ondragenter="handleOndragenter(event)" ondragover="handleOndragover(event)" ondragleave="handleOndragleave(event)" ondrop=“handleOndrop(event) > 该元素为搁置元素</div>实例以下代码可实现在两个div之间进行子元素的拖拽 <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>拖拽实现</title> <style type="text/css"> .parent { display: flex; width: 450px; justify-content: space-around; } .container { height: 300px; width: 200px; background-color: rgba(255, 255, 0, 0.3); display: flex; flex-direction: column; justify-content: center; align-items: center; } .box { width: 100px; height: 50px; background-color: rgba(255, 255, 255, 1); } </style> <script type="text/javascript"> function handleOndragstart(event) { // 设置被拖动的数据，可简略了解为设置Box的值为被拖动元素的id。此处为"Box" event.dataTransfer.setData("Box", event.target.id); } function handleOndragover(event) { event.preventDefault(); } function handleOndrop(event) { // 拖拽元素被放下时调用 event.preventDefault(); var data = event.dataTransfer.getData("Box"); // 将拖拽元素追加到改搁置元素中 event.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div class="parent"> <div class="container" ondragover="handleOndragover(event)" ondrop="handleOndrop(event)" > <div class="box" draggable="true" id="Box" ondragstart="handleOndragstart(event)" ></div> </div> <div class="container" ondragover="handleOndragover(event)" ondrop="handleOndrop(event)" ></div> </div> </body></html>最初临时写这么多吧。以上的实例也是用H5写的，并没有应用React实现。当前再试着写个React版的简略demo吧。这应该也算是我的第一篇分享文章，心愿能坚持下去。 ...

HTML的整体构造 HTML的内容都是由一对一对的标签组成，标签不能凌乱，页面有页面的整体架构和规定，标签和标签之间有须要正确嵌套。 通常一个HTML网页文件蕴含3个局部：标记头区…、内容区…和网页区…。 <html><head></head><body></body></html><html> <head> <meta charset="UTF-8"> <title>HTML文档的根本构造</title> <script></script> <link rel="stylesheet" type="text/css" href=""/> </head> <body> </body></html> html 标记用于HTML文档的最前边，用来标识HTML文档的开始。而标记放在HTML文档的最初边，用来标识HTML文档的完结，两个标记必须一块应用。 head 和形成HTML文档的结尾局部。和标记对之间的内容是不会在浏览器的框内显示进去的，两个标记必须一块应用。 在此标记对之间能够应用、、、等标签。 ：用来提供对于文档的信息，起始属性为：charset=“utf8”。示意通知浏览器页面采纳的什么编码，一般来说咱们就用 utf8。当然，文件保留的时候也是utf8，而浏览器也设置 utf8 即可正确显示中文。 ：用来引入css文件 title 留神： body 个别状况下大部分浏览器上显示的内容，都放在body中。但也不排除其余标签能够不必body，比方frameset框架集标签。 和是HTML文档的主体局部，在此标记对之间可蕴含 、、 … 、 …= 、 等泛滥的标记。它们所定义的文本、图像等将会在浏览器的框内显示进去。 罕用属性 属性 值 形容 bgcolor xxxxxx：十六进制的数字，00-ffcolorname：Red、Green…rgb(x,x,x)：red、green、blue，x:0-255 规定文档的背景色彩，当前能够用款式取代它 text rgb(x,x,x) #xxxxxx colorname 规定文档中所有文本的色彩，当前能够用款式取代它 DOCTYPE Document Type HyperText Mark-up Language，文档中超文本标记语言的类型，可告知浏览器怎么解析该文档。 因为应用的场景或者版本的更替间，HTML应用的规范不同，所以须要浏览器依照不同的规范来解析HTML文本内容，这就须要告知浏览器我以后的HTML页面是依照那种形式进行编写的。没有该申明，将是你HTML噩梦的开始。

作者：James Starkie译者：前端小智起源：dev最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。 github 地址：https://github.com/qq44924588... 我的想法：如果我要构建疾速牢靠的网站，须要真正理解浏览器渲染网页的每个步骤机制，这样就能够在开发过程中对每个步骤进行优化。 这篇文章是我在较高水平上对端到端过程的学习总结。 好了，废话不多说，咱们开始吧。这个过程能够分为以下几个次要阶段： 开始解析HTML获取内部资源解析 CSS 并构建CSSOM执行 JavaScript合并 DOM 和 CSSOM 以结构渲染树计算布局和绘制1.开始解析HTML当浏览器通过网络接管页面的HTML数据时，它会立刻设置解析器将HTML转换为文档对象模型(DOM)。 文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种形式能够使从程序中对该构造进行拜访，从而扭转文档的构造，款式和内容。DOM 将文档解析为一个由节点和对象（蕴含属性和办法的对象）组成的构造汇合。简言之，它会将web页面和脚本或程序语言连接起来。解析过程的第一步是将HTML合成并示意为开始标记、完结标记及其内容标记，而后它能够结构DOM。 2. 获取内部资源当解析器遇到内部资源（如CSS或JavaScript文件）时，解析器将提取这些文件。 解析器在加载CSS文件时持续运行，此时会阻止页面渲染，直到资源加载解析完（稍后会具体介绍）。 JavaScript 文件略有不同-默认状况下，解析器会在加载 JS 文件而后进行解析同时会阻止对HTML的解析。 能够将两个属性增加到脚本标签中以加重这种状况：defer 和async。 两者都容许解析器在后盾加载JavaScript 文件的同时持续运行，然而它们的执行形式不同。 对于这一点前面还会再讲一点，但总的来说： defer示意文件的执行将被提早，直到文档的解析实现为止。 如果多个文件具备defer属性，则将依照页面搁置的程序顺次执行。 <script type="text/javascript" src="script.js" defer>async 意味着文件将在加载后立刻执行，这可能是在解析过程中或在解析过程之后执行的，因而不能保障异步脚本的执行程序。 <script type="text/javascript" src="script.js" async>预加载资源<link> 元素的 rel 属性的属性值preload可能让你在你的HTML页面中 <head>元素外部书写一些申明式的资源获取申请，能够指明哪些资源是在页面加载实现后即刻须要的。 对于这种即刻须要的资源，你可能心愿在页面加载的生命周期的晚期阶段就开始获取，在浏览器的主渲染机制染指前就进行预加载。这一机制使得资源能够更早的失去加载并可用，且更不易阻塞页面的初步渲染，进而晋升性能。 <link href="style.css" rel="preload" as="style" /> 3.解析CSS并构建CSSOM你可能很早就晓得DOM，但对CSSOM（CSS对象模型）可能听得少，反正我也没听过几次。 CSS 对象模型 (CSSOM) 是树形模式的所有CSS选择器和每个选择器的相干属性的映射，具备树的根节点，同级，后辈，子级和其余关系。CSSOM 与 文档对象模型(DOM) 十分类似。两者都是要害渲染门路的一部分，也是正确渲染一个网站必须采取的一系列步骤。CSSOM 与 DOM一起构建渲染树，浏览器顺次应用渲染树来布局和绘制网页。 与HTML文件和DOM类似，加载CSS文件时，必须将它们解析并转换为树-这次是CSSOM。 它形容了页面上的所有CSS选择器，它们的层次结构和属性。 CSSOM 与 DOM的不同之处在于它不能以增量形式构建，因为CSS规定因为特定性而能够在各个不同的点互相笼罩。 这就是CSS 阻塞渲染的起因，因为在解析所有CSS并构建CSSOM之前，浏览器无奈晓得每个元素在屏幕上的地位。 ...

基本知识网页根本信息正文 <!-- --> ctrl + / 快捷键<meta 描述性标签，用来描述性标签，能够形容关键字>p 标签会有换行br 进行另起一行分隔 这是行与行有一条线 粗体 斜体找到特殊符号   &gt: <&lt: >src 引入图片绝对地址 用点点去找src 里设置悬停文字 title width heighta href 示意要跳转到哪个界面，外面能够加a srctarget_blank标签示意在新的网页中关上target_self 锚链接 须要一个标记就能够跳到标记a name 是不是按钮，是标记要跳转完结后的界面a href = "#示意承受"能够回到顶部发送邮箱 有序列表<ol> 还有自定义列表 tablecolspan 横向合并几个单元格rowspan 纵向合并几个单元格 video src 内联框架iframe src 把另一个网页放在这个网页里。 把百度嵌套在这个网页里 表单提交get不平安，post平安 单选框标签input type="radio" value=必须写 name="lll"input type="radio" value=必须写 name="lll" 示意只能抉择一个 多选框标签<input type="checkbox" value="" >value的是提交后再url之后会连贯的 checked 默认选中 实现上传文件<input type="file" name="files">上传都是键值对的。 表单验证三种形式 本人的idea里的aa目录

本章主讲的是外贸建站域名抉择— Godaddy 账号注册和购买域名的相干内容。 国外的域名服务商有很多，提供的产品和服务也参差不齐，我用过的是Godaddy和Namesilo. 其余比拟有名的域名服务商还有以下几个： Name—-www.name.com Domainsite—www.domainsite.com Namecheap—www.namecheap.com Ipower—www.ipower.com Enom—www.enom.com Tucows—www.tucows.com NetworkSolutions—www.networksolutions.com Netfirms—www.netfirms.com 先来讲讲我本人用过的第一个域名服务商—Godaddy 输出godaddy.com的主域名后，网站主动依据我的ip跳转到了新加坡站https://sg.godaddy.com/zh 蛮好的，因为新加坡站是简体中文，适宜国内英语根底不够或者外贸建站小白进行操作. 进入网站后，这个主搜寻框就是咱们开始操作的第一个中央. 在搜寻框中输出本人想要的的域名，比方：ABCD.com 点击搜寻按钮会马上失去一个新的后果，如下图 在这里，咱们能够看到ABCD.COM这个域名曾经被他人申请注册了，如果ABCD是你必须要的主域名，那么你能够考虑一下抉择ABCD.NET,只是很惋惜abcd.net这个域名也曾经被他人注册掉了，你只能思考换一个新的域名.比方abccccccc.com 很侥幸这个域名没有被他人注册过，还能够申请注册.这时候先按耐住冲动的情绪，点击左边的退出购物车.跳进去这个界面： 原来是没登录账户，好吧，本着发挥有限高尚的奉献精神，我回绝了登录已有的账号，注册新账号给大家来演示一遍.点击“创立账户”后页面跳转如下： 输出分割邮箱，用户名，明码之后，再点击底部绿色的创立账户按钮. 三个验证形式中依据本人的 爱好抉择其中一个，我抉择的是短信验证，呈现了上面的新界面，如下图： 这里抉择CN中国+86，填入你本人的手机号码，期待验证短信到你的手机上，再输出验证码验证你刚申请的账号.我在这里就略过这个步骤，用我原有申请的账号，操作雷同的步骤，给你们持续演示. 进入购物车后，呈现的是如下的界面 能够依据本人的须要抉择隐衷爱护服务，这里就是godaddy不如namesilo的中央，namesilo是收费的，这也是我起初放弃godaddy抉择namesilo的一个起因.至于什么是隐衷爱护，大体上就是爱护你这个域名卖主的相干隐衷信息，比方手机号等，相干更多的内容我会在其余文章中具体进行阐明.厦门的LINUX虚拟主机临时不须要，咱们抉择“不必”选项.而后进入了结算界面，如下图 左侧是三个领取选项，出于不便思考，抉择的是支付宝.左边是相干服务内容—两年的域名服务工夫（能够本人抉择域名服务工夫），小计133.86元，以及对应的域名隐衷爱护120元，一共是253.86元.还记得我方才说过放弃godaddy抉择namesilo买域名的起因吗？这两年120省下来买点肉吃吃，不香啊？！ 另外留神一下两头底部的小字—“是否有促销码？”，godaddy在方才的结算中曾经被动给出了折扣.如果你对这个折扣不是很称心，没关系，谷歌一下godaddy优惠券，立马就呈现很多提供优惠券的网站，我给大家列举几个： https://www.dute.me www.goyouhuima.com http://www.laodong.me https://www.hostucan.cn www.cnyinxingshu.com （以上几位站长，看到了结算点广告费给我啊，嘿嘿嘿） 最初是领取胜利界面，如下图 好了，以上就是用godaddy买本人想要域名的全副流程.想要查看更多收费的外贸建站、谷歌SEO优化和外贸客户开发的干货教程，请点击此处进行查看 https://www.jackgoogleseo.com或者应用百度和谷歌浏览器搜寻关键词---“Jack外贸建站”，排名首页首位的就是我的网站！

技术人不急于造就综合能力 2003年，毕业于北大的马春荃没有抉择出国或进入名企大厂，而是退出了一家多位北大学长联结创立的新公司，理由便如一些技术出身但志不在Coding的专业人士一样：“心愿可能挑战更简单的事务，造就综合能力。” 如其所愿，在疾速相熟公司业务之后，马春荃便以某我的项目负责人的身份被派到西南，出师之名是“需要调研”，理论工作内容却是眉毛胡子一把抓：白天当参谋，不是繁忙于调研，就是见缝插针写代码，早晨化身商务，靠着过人的酒量搞定了一个又一个客户，大醉过后回酒店还要连夜赶制合同、编写文档。 工作业绩堪称卓越、能力成长突飞猛进，可马春荃并不开心。终于，在和老板的一次火锅饭局上，他被老板字面意义上的“说哭了”。乍听起来这事有些荒谬，此次情绪解体的导火索，不过是北大中文系出身的老板认为他文章写得不太好，就事论事，一来老板文采有肯定段位，二来写文章本非马春荃的主业，些许点拨不至于此。可情绪暴发的背地，是越胜利越忐忑、越后退越没方向的怅惘。 “总感觉本人的人生没有找到一条主线，那时萌发了想去大厂把根基扎牢的念头”。 3年铺垫稳固，5年疯狂发育 2005年，马春荃退出用友售后反对部，看似远离外围业务部门，他却乐此不疲：“我的徒弟跟我说，售后部就是一个‘不论’部，不是什么都不论，而是他人不论的咱都管。其实这是相当难得的一个岗位，只有有心，就能从看似碎片化的信息中梳理出事件的全貌，在用友这类大型企业中，除了大产品总监之外，可能掌握业务全流程信息的岗位极少，售后部反而成了一个底层的信息节点。” 那几年他的工作模式就是“接电话记录问题——穷尽资源和能力解决问题”，电话那端可能是客户、可能是一线参谋、也可能是我的项目工程师，惟一确定的是：每一次电话响起，都意味着一份求助，而马春荃凑巧天生自带着爆表的责任感，这一性情与这一非凡的工作岗位产生了奥妙的化学反应：近3年工夫，他不仅把握了残缺的业务逻辑、大量技术与服务细节，还与外部、内部的诸多合作者建设了牢固的信赖关系——多年后，易快报的第一批种子客户中，有不少便是当年他帮忙过的对象。 待到马春荃确定已找到了本人想要的“根基”，随即便开启了疯狂发育模式。从最后“想升官，升官了给配独立办公室”的奢侈需要开始，接下来5年他多次升迁，涉猎多个工作岗位、不同工作职能，每次都能疾速进入角色、搞定岗位需要，对于一年写“40万字的会议纪要”也见怪不怪。 2012年，他又一次升职，成为当年售后反对部所在的事业部一把手。 都说性情决定命运，马春荃心田运行着两套验证体系，时不时自我拷问一番：一曰“本人的成长是否具备长期价值”，二曰“眼下本人到底值多少钱”。在把握了策略治理能力和技术解决能力的同时，他关注到传统企业报销形式带来的诸多问题，共性中有着极其果决罗唆一面的马春荃决定：是时候守业了。 2014年，马春荃到职用友，创立易快报。 Tips·马春荃谈成长节奏 认知档次靠近的人，获取的回报总量大抵相等，技术人的成长窘境，有一部分起因是年老时获取了超量财产（行业红利）导致对前期人生适度乐观，须要做长期成长布局。要有指标和野心，但也别急于实现，让远期指标影响了眼前判断。-- 广告-- 书同文之前，别做印刷术的生意 对于守业马春荃有着本人独到的思考，之所以抉择以“报销”这个企业流程中最让人恼火头疼的场景作为切入点，不仅因为“只有小能力切入市场、建设差异化劣势”，更重要的是，“报销是财务流程的一个环节，而财务在过来很长一段时间内，逻辑稳固、规定稳固、流程稳固，适宜做标准化的软件产品。” 马春荃这样解读To B生意：“东西方企业服务市场规模的差别，实质是稳固水平的差别，东方商业成熟度很高、市场呈现出稳固的成熟态，因而大量场景能够积淀为软件服务进而实现高效复制。而中国市场恰恰相反，处于疾速发展期，一直变动、一直迭代、一直倒退，大量行业都处于一种相似春秋战国的动态变化期，外部逻辑简单、场景多变。在这样市场中强行将服务软件化，等同于在没有‘书同文’之前做印刷术的生意，等你做完一套模具，文字都变了，积淀下来的也是一堆废品。” 守业6年，每天都是至暗时刻 2020年9月8日，马春荃在一次流动中说：“我守业6年，没有经验过至暗时刻，因为始终都挺黑的，但有意思的也是这点。最好玩的事件，就是在可能去暴发本人最强力量的时候，暴发到极限，输了也挺有意思。” 如前所述，马春荃性情虚心，“低调”更成为了他的代名词。上帝视角回望，陌拜4家投资人便拿到第一笔投资、改走免费模式后第一家客户便是1600人规模的优质大单，易快报在起手阶段算得上逆风逆水。守业之初，马春荃尝试过To C的“收费+生态”模式，倒不是对这一模式有多大信念，反而是“对免费模式、对报销软件能不能卖出去没有信念”。预先证实，易快报提供的服务足以撑持起相当规模的付费客户订阅量，马春荃笑称“是被客户倒逼着扭转了销售模式”。 话说回来，以2020年的规范而言，马春荃的性情也让易快报躲避了不小的危险。比方在资本市场中始终放弃“现金为王”的理念，2019年底取得老虎环球、红杉中国领头的5000万美元C及C+轮融资，让易快报在面对疫情这只超级黑天鹅的时候，显得熟能生巧。 马春荃坦言，疫情对于易快报是一次倒退时机，“从2月份开始，企业不论愿不愿意都要开始在线作业，这也扭转了大家对挪动化和近程作业的心理不适应和恐慌”。不过，他还是不忘自黑一把：“沉稳了这么都年，心想这一次激进一下，发现成果一般般，可能企业格调就是和创始人性情正相干，易快报就得扎扎实实后退，慢就慢点。” 6年下来，易快报一边基于报销场景拓展市场规模，一边也在一直寻求进化的可能性。一方面，以报销为入口，链接企业生产多场景，建设一站式商旅、出行、用餐、办公洽购等企业高频生产我的项目的聚合生产平台；另一方面，马春荃也在摸索“围绕估算实现企业策略落地”的服务产品，“很多企业不太会做估算，估算其实是以财务数字为标的开展的一场外部博弈，博弈的实质是将企业策略逐级分解落地”。 采访遗憾休止于马春荃繁忙的行程表，1个半小时后他便要飞往异地。 散场前最初的寒暄如下： 马春荃：我听谁说过一句，守业就像夹着shi赶路，永远都有一堆破事，真就这么回事。 《科创人》：创业者也是心理亚健康和情绪疾病的高发群体，您有什么调节情绪的倡议么？ 马春荃：喝酒。

vuexVuex是什么呢？它是Vue的状态管理模式，在应用vue的时候，须要在vue中各个组件之间传递值是很苦楚的，在vue中咱们能够应用vuex来保留咱们须要治理的状态值，值一旦被扭转，所有援用该值的中央就会自动更新。是不是很不便，很好用呢？ vuex是专门为vue.js设计的状态管理模式，集中式存储和管理应用程序中所有组件的状态，vuex也集成了vue的官网调式工具，一个vuex利用的外围是store，一个容器，store蕴含了利用中大部分状态。 那么咱们在什么时候利用vuex呢？vuex也不是轻易乱用的，小型简略的利用就不那么适合了，因为用了Vuex是繁琐多余的，更适宜应用简略的store模式；对于vuex更加实用于中大型单页利用：多个视图应用于同一状态，不同视图须要变更同一状态。 vuex状态治理实现组件间数据共享集中式存储和管理应用程序中所有组件的状态 一个 Vuex 利用的外围是 store（仓库，一个容器），store蕴含着你的利用中大部分的状态 (state)。 传参的办法对于多层嵌套的组件来说，是十分繁琐的，并且对于兄弟组件间的状态传递无能为力；采纳父子组件间接援用或者通过事件来变更和同步状态的多份拷贝，通常会导致无奈保护的代码。 什么状况下我应该应用 Vuex实用于：中大型单页利用，不论在哪个组件，都能获取状态/触发行为 解决问题如下：① 多个视图应用于同一状态： 传参的办法对于多层嵌套的组件将会十分繁琐，并且对于兄弟组件间的状态传递无能为力 ② 不同视图须要变更同一状态： 采纳父子组件间接援用或者通过事件来变更和同步状态的多份拷贝，通常会导致无奈保护的代码 装置命令：在我的项目文件夹下vue install vuexvuex 外面 actions 只是一个架构性的概念，并不是必须的Action 提交的是 mutation，而不是间接变更状态Mutation：必须同步执行Action：能够异步,但不能间接操作State创立一个vue我的项目，输出vue int webpack web，装置vuex，命令：npm install vuex --save。 store，index.js import Vue from 'vue' // 引入vueimport Vuex from 'vuex' // 引入vuex// 应用vuexVue.use(Vuex);// 创立Vuex实例const store = new Vuex.store({})export default store // 导出storemain.js import Vue from 'Vue'import App from './App'import router from './router'import store from '.store'Vue.config.productiontip = falsenew Vue({el: '#app',store,router,components: {App},...})State，能够在页面通过this.$store.state来获取咱们定义的数据： ...

去除表单主动填入明码在表单头设置一个type类型为password的input，超出暗藏，主动填充明码是依据type判断，这时主动填充就会填充到这个超出暗藏的input框内 <input type="password" style="position:fixed;bottom:-9999px"/>应用h5属性autocomplete=“new-password”，失常来讲该属性作用为阻止主动填充，值赋为“off”会阻止主动填充才对，但这里赋为“new-password”才有用 <input type="password" autocomplete="new-password" />在文档加载实现后讲明码输入框设置为空 window.laod = fcuntion() { document.getElementById('#password').value = '' }在用户名和明码之间加上一个暗藏的文本框 <input type="text" /> <input type="hidden" /> <input type="password" />把input的type="password"改为type="text"，并把focus事件设为onfocus="this.type=password"留神：通过测试，目前来看在chrome，vue2.x中1、2办法无效，3，4，5办法有效

前沿置身世外只为暗中察看！！！Hello大家好，我是魔王哪吒！重学坚固你的Vuejs常识体系，如果有哪些知识点脱漏，还望在评论中阐明，让我能够及时更新本篇内容常识体系。欢送点赞珍藏！ 生命周期首先：new Vue(),new一个Vue的实例，Observe data数据查看，init Events绑定事件，created执行created办法，判断是否有el属性，如果没有，vm.$mount(el)示意处于未挂载状态，能够手动调用这个办法来挂载。判断是否有template属性。 如果有el属性，判断是否有template属性。 实例化期和加载期创立期间的生命周期函数：beforeCreate 和 created，beforeMount 和 mounted。 beforeCreate在实例初始化后，数据观测data observer和event/watcher事件配置之前被调用。 更新期 运行期间的生命周期函数：beforeUpdate 和 updated created实例曾经创立实现后被调用。 实例已实现以下的配置：数据观测data observer，属性和办法的运算，watch/event事件回调。 挂载阶段还没开始，$el属性目前不可见。 beforeMount在挂载开始之前被调用，相干的render函数首次被调用。mounted，vm.$el曾经挂载在文档内，对已有dom节点的操作能够在期间进行。beforeUpdate数据更新时调用，产生在虚构dmo从新渲染和打补丁之前。updated当这个钩子被调用时，组件dom曾经更新，所以你当初能够执行依赖于dom的操作。activated，deactivated，beforeDestroy，destroyed。实例销毁之前调用，vue实例销毁后调用。 卸载期 销毁期间的生命周期函数：beforeDestroy 和 destroyed 实例生命周期钩子每个vue实例在被创立时都要通过一系列的初始化过程，须要设置数据监听，编译模板，将实例挂载到dom并在数据变动时更新dom等，同时在这个过程中也会运行一些叫做生命周期钩子的函数。 用于给用户在不同阶段增加本人代码的机会。 beforeCreate，此时的data是不可见的 data() { return { a: 1 }},beforeCreate() { // red console.log(this.a); // 看不见}created实例曾经创立实现后被调用，这个时候你看不见你页面的内容，实例已实现示意：数据观测data observer，属性和办法的运算，watch/event事件回调。 这个时候挂载阶段还没开始，$el属性目前不可见。 export default { data() { return { a: 1 } }, beforeCreate() { console.log(this.a); }, created() { // red console.log(this.a); console.log(this.$el); // 此时data数据外面的a可见，this.$el不可见 }}beforeMount在挂载开始之前被调用，相干的render函数首次被调用。 ...

前沿置身世外只为暗中察看！！！Hello大家好，我是魔王哪吒！重学坚固你的Vuejs常识体系，如果有哪些知识点脱漏，还望在评论中阐明，让我能够及时更新本篇内容常识体系。欢送点赞珍藏！ 谈谈你对MVC、MVP和MVVM的了解？ https://github.com/webVueBlog... 转角遇到Vuejs你为啥学习Vuejs前端开发的复杂化Vuejs的特点装置Vuejs体验VuejsMVVM架构：data和Vue对象的拆散，Vue中的MVVM 目录： 起步插值语法：Mustache，v-once，v-html，v-text，v-pre，v-block。绑定属性：v-bind的介绍，v-bind的根底，v-bind的语法糖，绑定class，绑定款式。计算属性事件监听：v-on介绍，v-on根底，v-on参数，v-on修饰符条件和循环：条件渲染，v-show指令，v-if和v-show比照表单绑定：根本应用，v-model原理，其余类型，值绑定，修饰符。组件化开发：什么是组件化，Vue组件化开发思维 注册的步骤全局和部分组件父组件和子组件注册组件语法糖模板的拆散写法组件的其余属性父级向子级传递子级向父级传递父子组件的拜访非父子组件通信组件化高级语法：插槽slot：编译作用域，为什么应用slot，slot的根本应用，slot的具名插槽，slot的作用域插槽。动静组件异步组件组件申明周期Vue Cli什么是webpackwebpack和gulp比照手动webpack的配置Vue Cli是什么Vue Cli依赖环境Vue Cli的装置网络封装应用传统的Ajax是基于XMLHttpRequest(XHR)应用jQuery-AjaxVue-resource应用axiosaxios的应用理解axios：axios申请形式发送申请，发送get申请，发送并发申请，axios全局配置，常见配置选项。axios实例，为什么创立axios实例，如何创立axios实例，axios的封装。axios的拦截器：申请和响应vuejs原理相干：响应式原理，源码。 vue.js是什么vue是一套用于构建用户界面的渐进式框架。从自底向上逐层利用，外围库是只关注图层。易于学习，便于与第三方库或既有我的项目整合。Vue根底语法对于基础知识须要把握，简略写写✍ vue.js装置间接CDN引入： 对于制作原型或学习代码：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 对于生产环境代码：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> NPM代码： # 最新稳定版$ npm install vuevue响应式初体验申明式编程： 代码： <!DOCTYPE html><!-- 魔王哪吒 --><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --> </head> <body> <div id="app"> {{ a }} </div> <script type="text/javascript"> // 咱们的数据对象 var data = { a: 1 }; // 该对象被退出到一个 Vue 实例中 var vm = new Vue({ el: "#app", data: data }); // data.a = "dada" vm.a = "qianduan"; data.a == vm.a; </script> </body></html> ...

采纳.html结尾的页面,更加容易被搜索引擎收录,进步网站的曝光率.案例： 心愿通过*/index.html 拜访的是index.jsp而不是真的index.html那就须要拦挡以 .html 结尾的url 跳转到index.jsp import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.PathMatchConfigurer;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration //等同于web.xml配置文件public class MvcConfigurer implements WebMvcConfigurer{ //开启匹配后缀型配置 @Override public void configurePathMatch(PathMatchConfigurer configurer) { //开启匹配后缀型配置 .html configurer.setUseSuffixPatternMatch(true); }}

前言最近在练习的时候经常须要应用CSS3属性transform：rotate，到底X轴，Y轴，Z轴如何旋转的，纠结了半天，终于还是实际得真知，写下这篇文章心愿能够帮忙大家，如果有说错的中央欢送斧正，欢送补充，欢送交换 对于rotate的根本应用本文不多赘述，不意识这个属性的敌人能够先看W3C对该属性的介绍本文次要谈谈对该属性旋转的了解 参考从css 3d说到空间坐标轴 首先咱们从人体的角度理性层面来了解这三个轴 1. 理性层面了解1.1 X轴 X轴的旋转好比人在高山不停地后空翻 2.2 Y轴Y轴的旋转好比人在高山不停地转身（不说转圈是因为怕引起歧义） 2.3 Z轴 是不是很像飞行员的训练项目？ 2. 现实层面了解有了下面的意识之后接下来就好了解了，咱们先来看由这三条轴形成的三维坐标图 咱们再来把方才的旋转代入到这个坐标中，是不是很好了解了。认真的读者会留神到我减少的角度始终是负数，其实旋转的正角度和负角度是有规定的，看到一些文章指出，当rotate的值为正时，各轴按顺时针旋转，反之按逆时针旋转，依据我的试验，其实是谬误的，因为官网没有对此相应的形容，这里咱们能够应用左手螺旋法令（还记得物理学过的右手螺旋法令吗，哈哈） 伸出左手，大拇指指向正轴方向，四个手指的指向即是旋转正向，但务必记住是左手！这里要强调两点：左手，正轴 肯定要是应用左手的大拇指指向正轴的方向，咱们才能够失去旋转的正向（旋转角度为正的方向） 3. C4D三维空间视图这里用C4D建模工具为读者展现三维XYZ轴的旋转 咱们别离在各轴旋转正的60度，成果如图所示（X轴是红轴，Y轴是绿轴，Z轴是蓝轴） transform: rotateX(60deg) rotateY(60deg)  rotateZ(60deg);

通常在咱们写我的项目的时候会遇到上传下载什么的，在上传完文件后会把文件的门路保留到数据库里以便下载，如果想不通过后盾间接下载的话，能够把文件门路给a标签的属性href； <a href="/user/test/xxxx.txt">点击下载</a>这样当用户关上浏览器点击链接的时候就会间接下载文件。 然而有个状况，比方txt,png,jpg等这些浏览器反对间接关上的文件是不会执行下载工作的，而是会间接关上文件，这个时候就须要给a标签增加一个属性“download”； <a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>这里download也能够不写任何信息，会主动应用默认文件名。 在这里阐明一些IE如同不反对，只能通过后盾代码搞。

在IOS下，input 和textarea表单默认会有个内暗影，肯定水平上影响视觉统一，可通过设置上面代码去掉： input{ -webkit-appearance: none;}

之前写过一篇 应用 jsDelivr 收费减速 GitHub Pages 博客的动态资源，在那之后，又陆续想到并施行了几点利用 jsDelivr 进一步减速动态资源加载的措施，新起一篇作为记录和分享。 继上一轮革新过后，比拟拖页面加载速度的次要有三点： 页面首个申请响应工夫；图片资源加载工夫；站内搜索援用的 JSON 资源加载工夫。第 1 点在页面依然托管在 GitHub Pages 的前提下，仿佛没有什么好方法能产生质的飞跃；本篇次要改善了第 2 点和第 3 点。 0x01 图片资源减速这里所说的图片次要是指文章里援用的图片。 我始终将图片放在博客源码根目录的 images 文件夹下，援用图片的习惯写法是这样的： 如果想将这个图片地址替换为 jsDelivr 的地址，须要做的就是将 /images 替换为 https://cdn.jsdelivr.net/gh/mzlogin/mzlogin.github.io@master/images。 一处一处替换行不行？当然也行，但前面写新文章时要援用图片，还得手动写这一长串，不不便；万一 jsDeliver 出情况，也不好一键切换回来。有没有一劳永逸的办法？当然也有，咱们从 Jekyll 的 layout 机制来想方法。 Jekyll 的 layout 能够了解为页面模板，它是能够继承的，比方我的博客的所有页面模板有一个独特的先人模板 _layouts/default.html，模板里能够应用 Liquid 语法对内容进行解决，咱们能够利用这一点，来主动实现批量替换的工作。 要害代码如下： {% assign assets_base_url = site.url %}{% if site.cdn.jsdelivr.enabled %}{% assign assets_base_url = "https://cdn.jsdelivr.net/gh/" | append: site.repository | append: '@master' %}{% endif %}{% assign assets_images_url = 'src="' | append: assets_base_url | append: "/images" %}{% include header.html %} {{ content | replace: 'src="/images', assets_images_url }}{% include footer.html %}粗心就是，如果关上了启用 jsDelivr 减速的开关，就将 content 里的 src="/images" 替换为 src="https://cdn.jsdelivr.net/gh/mzlogin/mzlogin.github.io@master/images"，否则替换为 src="https://mazhuang.org/images"。 ...

页面成果展现如下： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"><title>网页布局</title></head><link rel="stylesheet" href="网页布局.css"><body><div class="top"> top</div><div class="banner"> banner</div><div class="box"> <div class="up"> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> <div class="four">4</div></div><div class="down"> <div class="a">5</div> <div class="b">6</div> <div class="c">7</div> <div class="d">8</div></div></div><div class="footer"> footer</div></body></html>css代码： {padding: 0;margin: 0;}.top { width: 100%;height: 100px;line-height: 100px;text-align: center;background-color: pink;}.banner { margin: 10px auto;width: 1200px;height: 200px;line-height: 200px;background-color: skyblue;text-align: center;}.box { width: 1200px;height: 510px;margin: 0 auto 10px auto;}.box .up>div { /子代选择器/ width: 292.5px;/能够用总宽度减去margin-left的值而后除以小box数，最初一个box再为0/ height: 150px; line-height: 150px;text-align: center;margin-right: 10px;float: left;background-color: purple;}.box .up .four { margin-right: 0;}.box .down>div { height: 350px;margin-top: 10px;width: 292.5px;margin-right: 10px;float:left;line-height: 350px;text-align: center;background-color: greenyellow;}.box .down .d { ...

一、概念1.1 超级文本超文本是用超链接的办法，将各种不同空间的文字信息组织在一起的网状文本。 1.2 标记<div>hello world</div> div标记“hello world”为一个块级元素的内容 1.3 语言标记语言：html、xml编程语言： java、c、python（强类型编程语言）js、php（弱类型编程语言）二、实质html实质是一个在互联网上传递信息的载体的协定，这个协定规定了咱们如何定义网页，程序员依据这个协定编写网页代码，浏览器依据这个协定解析程序员编写的代码。 三、构造<!DOCTYPE html> <html> <head> <meta> <title></title> </head> <body> </body> </html><!DOCTYPE html> 示意⽂档类型申明，阐明该⽂档为Html5⽂档，告知浏览器以何种形式渲染文档。<html> 示意html⽂件的根标签，所有的html标签应该位于html标签外部<head> 示意html的头部，head外部标签次要⽤于设置或者导⼊内部⽂件，⼀般不间接显示在浏览器视⼝中，常⽤的⼦标签为 meta 、title、link、script，别离示意元信息设定、⽂档题目、css、js<body> 示意html的体部，其外部次要放⽹⻚内容，其内容会显示到浏览器视⼝中 四、语法4.1 正文<!--正文--> html有且只有这一种正文形式 4.2 元素按标签个数 单标签元素双标签元素按元素性质 块元素行内元素按元素性能4.3 属性<u>属性名不辨别大小写，属性值辨别大小写，且能够用引号引起来</u> 外围属性绝大多数标签都领有的属性自有属性某标签特有的属性五、单标签元素<meta><br><hr><img><u>alt</u> 属性：图片显示谬误时，在图片地位显示的文字。本质是通过文字代替图片的内容。<u>title</u> 属性：图片失常显示时，鼠标悬停于图片上显示的文字。本质是对图片的一种 正文或形容。六、块元素作用：搭建网页构造特点： 独占一行空间默认宽度占父元素的100%高度由子元素或内容决定能够通过css为其指定宽高实例： div（无意义的块元素）/html / body / h1~h6 题目 / p / ul>li / ol>li / dl>dt,dd 七、行内元素作用：在构造中填充网页内容特点： 与其余行内元素共享同一行的空间宽高由本身决定不能通过css为其指定宽高设置浮动后能够设置宽高，即变为相似行内块级元素实例:span / a / video / audio / img（非凡的行内元素） 八、性能元素8.1 table格局： ...

废话不多说，间接上代码： 1、上中下布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 0; margin: 0; display: flex; flex-direction: column; } .header, .footer { height: 50px; } .body { flex-grow: 1; background-color: #DDD; } </style> </head> <body> <div class="header">Header</div> <div class="body">Content</div> <div class="footer">Footer</div> </body> </html> 显示成果如下：2、左右布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 0; margin: 0; display: flex; } .left, .right { height: 100%; } .left { width: 250px; background-color: rgba(255,0,0,0.3); } .right { display: flex; flex-direction: column; } .header, .footer { height: 50px; } .right, .content { flex-grow: 1; } .content { background-color: #DDD; } </style> </head> <body> <div class="left">LeftNav</div> <div class="right"> <div class="header">Header</div> <div class="content">Content</div> <div class="footer">Footer</div> </div> </body> </html>页面的成果如下： ...

XHTML元素分类依据css显示状态，XHTML元素被分为三种类型：块状元素，内联(行内)元素，可变元素。 块状/块级元素（block element）三大特点： 1.默认状况下，块状元素占一行，两个相邻块状元素不会并列显示；默认状况下，块状元素会按程序从上到下排列。 2.块状元素能够定义宽度和高度。 3.块状元素个别作为其余元素的容器，开始标签和完结标签之间能够嵌套内联元素和块状元素。一个块级元素能够看作一个盒子，盒子里能够装其余的物件。 罕用块级元素： div--最罕用的块级元素dl--和dt-dd 搭配应用的块级元素form--交互表单h1-h6--大题目ol--有序列表p--段落ul--无序列表fieldset--表单字段集colgroup-col--表单列分组元素table-tr-td--表格及行-单元格内联元素/行内元素（inline element）三大特点： 1.一行能够显示多个内联元素 2.内联元素不能定义宽和高,它的宽度、高度由元素内的内容的高度和宽度决定。 3.内联元素也会遵循盒模型根本规定，能够定义padding,border,margin,background等属性，但个别属性不能正确显示;(padding-top/bottom;margin-top/bottom;) 罕用行内元素 a –-超链接（锚点）b -- 粗体(不举荐)br -- 换行i -- 斜体em -- 强调font -- 字体设定（不举荐）img -- 图片input -- 输入框label -- 表单标签span -- 罕用内联容器，定义文本内区块strong -- 粗体强调sub -- 下标sup -- 上标textarea -- 多行文本输入框select -- 项目选择其余元素如：行内块级（inline-block），列表项（list-item） XHTML元素类型转换通过css的display属性来扭转默认的显示类型display属性与属性值 (18个属性值)属性值：block/inline/inline-block/none/list-item/table-header-group/table-footer-group 作用：该属性设置或检索元素生成的类型。 block：块状显示，相似在元素前面增加换行符，其余元素不能在其后并列显示。(将元素转为块状元素，使该元素领有块状元素的特点；)inline：内联显示，多个元素能够在一行内并列显示。（元素转换为内联元素）inline-block：行内块级元素显示，一行显示多个、能够设置宽高。none：暗藏元素，不占地位。list-item:将元素转换成列表项。1.当元素设置了float属性后，就相当于给该元素加了display:inline-block;申明（设置宽高、一行显示多个）。 2.大部分块元素display属性值默认为block，其中列表li的默认值为list-item。 3.大部分内联元素的display属性值默认为inline,其中img,input,textarea默认为inline-block。 内联元素/行内元素在容器中垂直居中<!--html--><div> <p></p> <span></span></div><!--css-->div { width: 200px; height: 200px; text-align: center; background: pink;}p { display: inline-block; width: 40px; height: 40px; vertical-align: middle; background: green;}span { vertical-align: middle; width: 0; height: 100%; display: inline-block;}三个条件：1：给父元素加上text-align:center;2：以后元素转成行内块元素（display:inline-block;）再设置vertical-align:middle;3：在以后元素的前面加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block;文字在容器中垂直居中<!--css-->div { width: 200px; height: 200px; text-align: center; line-height: 200px;}<!--html--><div> <p>测试测试</p></div>要害：text-align: center;line-height: 200px;line-height的值放弃和height统一。置换元素(行内可置换元素)与非置换元素1.置换元素： ...

有一个很简略的需要如下： 给你一段URL，在其中插入一些参数，并返回新的URL，如何实现？ 这里的参数，有时候称为query，有时候称为params，个别称为search，指的是 http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument 中的key1和key2。 最近正在对接阿里云的金融级实人认证，在传递认证胜利回调页时就遇到了这样一个问题。 第一层： 间接拼import qs from 'query-string'function resolve (url) { const params = qs.stringify({ a: 1, b: 2 }) // a=1&b=2 return url + '?' + params}理论业务中，90%的场景这样写没问题，但如果url的值是这样的： http://taobao.com/?c=3&d=4最终后果就是 http://taobao.com/?c=3&d=4?a=1&b=2将这段URL中的search解析，失去的后果是 { c: '3', d: '4?a=1', b: '2',}显然不合乎预期。 第二层： 兼容已存在的searchimport qs from 'query-string'function resolve (url) { const params = qs.stringify({ a: 1, b: 2 }) // a=1&b=2 return url + url.includes('?') ? '&' : '?' + params}看上去问题仿佛解决了，很多人也只思考到这一层，但当初还有这样一种url： ...

最近一个多月真是忙到飞起啊，活脱脱把美少女变成了国宝，终于告一段落，留给我的，仍然是无处安放的，魅力(黑眼圈)啊~话不多说，先啃为敬 ^_^ 第13章 事件JavaScript与HTML之间的交互式通过事件实现的。事件，就是文档或浏览器窗口中产生的一些特定的交互霎时。 事件流—事件冒泡IE的事件流叫做事件冒泡，即事件开始时由最具体的元素(文档中嵌套档次最深的那个节点)接管，而后诸暨向上流传到较为不具体的节点(文档)。比方一个<body>标签中只蕴含一个<div>元素的页面，如果你点击了页面中的<div>,那么这个click事件会依照如下程序流传：（1） <div>（2） <body>（3） <html>（4） document也就是说，click事件首先在<div>元素上产生，而这个元素就是咱们点击的元素。而后，click事件沿DOM树向上流传，在每一级节点上都会产生，直至流传到document对象。下图完满的展现了工夫冒泡的过程。 事件流—事件捕捉事件捕捉的思维是不太具体的节点应该更早接管到事件，而最具体的节点应该最初接管到事件。事件捕捉的用意在于在事件达到预约指标之前捕捉它。以下面冒泡的例子，单击<div>元素就会以下列程序触发click事件(1) document(2) <html>(3) <body>(4) <div>在事件捕捉过程中，document对象首先接管到click事件，而后事件沿DOM树顺次向上，始终流传到事件的理论目标，即<div>元素。如下图： 事件流—DOM事件流"DOM2级事件"规定的事件流包含三个阶段：事件捕捉阶段、处于指标阶段和事件冒泡阶段。首先产生的是事件捕捉，为截获事件提供了机会。而后是理论的指标接管到事件。最初一个阶段是冒泡阶段，能够在这个阶段对事件做出响应。 事件处理程序事件就是用户或浏览器本身执行的某种动作。诸如click、load和mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件监听器）。事件处理程序的名字以"on"结尾，因而click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。为事件指定处理程序的形式有好几种。 事件处理程序——HTML事件处理程序事件处理程序中的代码在执行时，有权拜访全局作用域中的任何代码。这样指定事件处理程序具备一些独到之处。首先，这样会创立一个封装着元素属性值的函数，这个函数中有一个局部变量event,也就是事件对象<input type="button" value="Click Me" onclick="alert(event.type)"> //输入"click"通过event变量，能够间接拜访事件对象，你不必本人定义它，也不必从函数的参数列表中读取。在这个函数外部，this值等于事件的指标元素，例如：<input type="button" value="Click Me" onclick="alert(event.type)"> //输入 "Click Me" 事件处理程序——DOM0级事件处理程序每个元素（包含window和document）都有本人的工夫处理程序属性，这些属性通常全副小写，例如onclick，将这种属性的值设置为一个函数，就能够指定事件处理程序。 var btn = document.getElementById("myBtn");btn.onclick = function(){ alert(this.id); //"myBtn"}btn.onclick = null; //删除事件处理程序事件处理程序——DOM2级事件处理程序"DOM2级事件"定义了两个办法，用于解决指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都蕴含这两个办法，并且它们都承受3个参数：要解决的事件名、作为事件处理程序的函数和一个布尔值。最初这个布尔值参数如果是true,示意在捕捉阶段调用事件处理程序；如果是false,示意在冒泡阶段调用事件处理程序。 var btn = document.getElmentById("myBtn");btn.addEventListener("click",function(){ alert(this.id);},false); //该事件会在冒泡阶段被触发btn.addEventListener("click",function(){ alert("Hello world!");},false);应用DOM2级办法增加事件处理程序的次要益处是能够增加多个事件处理程序。下面的例子为按钮增加了两个事件处理程序，这两个事件处理程序会依照增加它们的程序触发，因而首先会显示元素的ID，其次会显示"Hello world!"音讯。通过addEventListener()增加的事件处理程序只能应用removeEventListener()来移除；移除时传入的参数与增加处理程序时应用的参数雷同。这也意味着通过addEventListener()增加的匿名函数将无奈移除。就像下面的例子一样。 事件处理程序——IE事件处理程序IE实现了与DOM中相似的两个办法：attachEvent()和detachEvent()。这两个办法承受雷同的两个参数：事件处理程序名字与事件处理程序函数。要应用attachEvent()为按钮增加一个事件处理程序，能够应用以下代码。 var btn = document.getElementById("myBtn");btn.attachEvent("onclick",function(){ alert("Clicked");});留神，attachEvent()的第一个参数是"onclick"，而非DOM的addEventListener()办法中的"click"。 在IE中应用attachEvent()与应用DOM0级办法的次要区别在于事件处理程序的作用域。在应用DOM0级办法的状况下，事件处理程序会在其所属元素的作用域内运行；在应用attachEvent()办法的状况下，事件处理程序会在全局作用域中运行，因袭this等于window。var btn = document.getElementById("myBtn");btn.attachEvent("onclick", function(){ alert(this === window); //true});在编写跨浏览器的代码时，牢记这一区别十分重要。与addEventListener()相似，attachEvent()办法也能够用来为一个元素增加多个事件处理程序。与DOM办法不同的是，这些事件处理程序不是以增加它们的程序执行，而是以相同的程序被触发。应用attachEvent()增加的事件能够通过detachEvent()来移除，条件是必须提供雷同的参数。与DOM办法一样，这也意味着增加的匿名函数将不能被移除。 事件对象——DOM中的事件对象兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时应用什么办法(DOM0级或DOM2级),都会传入event对象。 var btn = document.getElementById("myBtn");btn.onclick = function(event){ alert(event.type); //"click"};btn.addEventListener("click", function(event) { alert(event.type); //"click"}, false);event对象蕴含与创立它的特定事件无关的属性和办法。触发的事件类型不一样，可用的属性和办法也不一样。所有的事件都会有下表列出的成员。 ...

openeropener即谁关上我的，比方A页面利用window.open或a标签弹出了B页面窗口，那么A页面所在窗口就是B页面的opener，在B页面通过opener对象能够拜访A页面。 parentparent示意父窗口，比方一个A页面利用iframe或frame调用B页面，那么A页面所在窗口就是B页面的parent。注： 个别通过window.parent 和window.top、 window.self的比拟，判断以后是否是顶层窗口；以后窗口若为顶层窗口，则window.top === window; window.parent === window

一、<script> 标签个性<script> 标签次要用于从服务器端加载一段javascript脚本并在以后页面中执行。因为其须要从服务器端中加载，所以会在肯定水平上影响到web的性能。在性能优化中，<script>标签的优化至关重要。 ① <script>标签默认是同步加载的。当HTML页面在加载的过程中，遇到了一个<script>标签，就会中断HTML页面的加载，而后依据对应的src地址向服务器发动申请，当对应的javascript脚本加载实现后，HTML页面依然不能加载，还必须等加载的javascript脚本执行实现后，HTML页面能力持续往下加载。 ② 当遇到<script>标签的时候会立刻渲染一次。当HTML页面加载的过程中，遇到了一个<script>标签，如果之前曾经加载了局部HTML内容，那么会先将之前加载的HTML内容渲染进去，而后再去加载对应的javascript脚本。 二、<script>个性验证① 验证个性1，咱们通过服务器设置一个申请，这个申请须要期待5秒后返回，来模仿缩短javascript的加载工夫。 const express = require("express");const app = express();app.use(express.static("./public"));app.use("/test", (req, res) => { setTimeout(() => { res.send(`console.log(document.getElementsByTagName("h1).length)`); }, 5000); // 缩短javascript脚本的加载工夫});app.listen(8080);<!DOCTYPE html><html lang="en"><head> <script src="http://localhost:8080/test"></script></head><body> <h1>hello script 0</h1></body>当咱们拜访该页面的时候，在页面加载过程中，页面首先遇到了一个<script>标签，并去加载服务器http://localhost:8080/test返回的脚本，因为该脚本须要5秒后返回，所以咱们能够看到页面白屏了5秒后，执行了加载的脚本，而后再才显示页面内容hello script 0。阐明页面加载过程中，如果遇到了<script>标签，那么会中断页面的加载，必须期待对应的javascript的脚本加载并执行实现后才会持续页面加载。**② 验证个性2，咱们批改一下<script>标签的程序，将<script>标签放到hello script 0前面**。 <!DOCTYPE html><html lang="en"><head> </head><body> <h1>hello script 0</h1> <script src="http://localhost:8080/test"></script> <h1>hello script 1</h1></body>当咱们拜访该页面的时候，在页面加载过程中，页面首先遇到了一个<h1>标签，而后才遇到了一个<script>标签，同样会去加载服务器http://localhost:8080/test返回的脚本，同样该脚本也须要5秒后返回，然而这次咱们能够看到页面中首先呈现了hello script 0内容，期待5秒白屏后，脚本加载实现并执行脚本输入后果，接着持续渲染HTML页面，显示hello script 1内容。阐明，页面加载过程中，如果遇到了<script>标签，那么会将之前曾经解析的HTML内容先渲染进去，而后再去服务器加载对应的javascript。所以咱们通常须要将<script>标签放到<body>标签之后，以便尽早的展示HTML内容。 三、<script>标签优化<script>标签默认是同步加载的，然而其提供了一些属性能够变成异步加载，如: async、defer、type="module"。 ① async: 异步加载对应的javascript脚本，不阻塞HTML页面的渲染，当对应的javascript加载实现后，如果此时HTML页面还未加载实现，那么会阻塞页面的渲染，等javascript执行实现后再持续HTML页面的加载。 ② defer: 异步加载对应的javascript脚本，不阻塞HTML页面的渲染，当对应的javascript加载实现后，如果此时HTML页面还未加载实现，那么不会阻塞页面的渲染，等HTML页面加载实现后再接着执行加载实现的javascript脚本。 ③ type="module": 也是能起到异步加载的成果，成果同defer，不过其能够配合async属性让javascript加载实现后立刻执行。 app.use("/deferHTML", (req, res) => { setTimeout(() => { res.send(`console.log("提早html加载")`); }, 8000);});<!DOCTYPE html><html lang="en"><head> <script src="http://localhost:8080/test" async></script> <!--提早HTML加载过程--> <script src="http://localhost:8080/deferHTML"></script></head><body> <h1>hello script 0</h1></body>当咱们拜访该页面的时候，在页面加载过程中，页面首先遇到了一个带async属性的<script>标签，此时会立刻去加载test脚本，不阻塞页面的加载，持续加载HTML内容，而后又遇到了一个同步加载的<script>标签，而后去加载deferHTML脚本，阻塞页面的加载，阻塞工夫为8秒，而5秒后test脚本加载实现，此时会立刻执行该脚本，该脚本执行会输入以后已加载h1标签的个数，从输入后果能够看到为0。所以咱们能够看出，async是异步加载脚本，并且会在脚本加载实现后立刻执行。 ...

边框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo18-CSS款式-边框</title></head><body> <!-- 属性border-style值 - none 默认无边框 - dotted 点线边框 - dashed 虚线边框 - solid 实线边框 - double 两个边框,两个边框间宽度和border-width的值雷同 属性border-width: 设置线条的粗细 属性border-color: 设置线条色彩 需要:创立5个p标签 1. 第一个p标签设置线条为 点状线条, 宽度为1px, 色彩为红色 2. 第二个p标签设置线条为 虚线, 宽度为2px, 色彩为蓝色 3. 第三个p标签设置线条为 单实线, 宽度为3px, 色彩为黄色 4. 第四个p标签设置线条为 双实线, 宽度为4px, 色彩为粉色 5. 采纳简化写法设置边框 1px 单实线 金色 --> <p style="border-style:dotted; border-width:1px; border-color:red;">我是第一个p标签</p> <p style="border-style:dashed; border-width:2px; border-color:blue;">我是第二个p标签<br/>我又换行啦</p> <p style="border-style:solid; border-width:3px; border-color:yellow;">我是第四个p标签</p> <p style="border-style:double; border-width:4px; border-color:pink;">我是第四个p标签</p> <p style="border:1px solid gold">我要用简化写法</p></body></html><!--* 我的项目形容: 学习CSS 之 CSS款式-边框* 作 者: chain.xx.wdm--> ...

要想将CSS款式利用于特定的HTML元素, 首先须要找到该指标元素. 在CSS中, 执行这一工作的款式规定局部被称为选择器. 元素选择器元素选择器,又称标签选择器, 是指用HTML标签名作为选择器, 为页面某一类标签指定对立的CSS款式标签名 { 属性1:属性值1; 属性2:属性值2;}<style>/* 元素选择器 */div {width:400px;height:200px;background-color:red;}</style><div> Hello World </div> ID选择器id选择器应用"#"进行标识,前面紧跟id名.#id{ 属性1:属性值1; 属性2:属性值2;}<script> /* id选择器 */ #helloha { width:400px; height:200px; background-color:aqua; }</script><div id="helloha"> Hello HelloHa </div> 类选择器类选择器应用"."(英文点号)进行标识,前面紧跟类名.类名{ 属性1:属性值1; 属性2:属性值2;}<script>/* 类选择器 */.ha { width:400px; height:200px; background-color:lavender;}</script><div class="ha"> HaHaHa </div> 派生选择器派生选择器容许依据文档的上下文关系来确定某个标签的款式.通过正当地应用派生选择器, 咱们能够使HTML代码变得更加整洁需要: 使列表中的li标签下的strong元素变动斜体字,而不是通常的粗体字,此时就能够定义一个派生选择器 <script>/* 派生选择器 */ul li strong { width:100px; height:100px; background-color:yellow; font-style:italic;}</script><p> <stong>我有strong标签,我会歪斜吗?</stong></p><ul> <li><strong>我行将歪斜了!</strong></li> <li>我应该不能歪斜</li></ul>

在当今这个竞争愈发强烈的市场中，良好的客户关系是批发企业与客户建设有意义分割的要害。钻研表明，当初的客户渴望在市场上失去更个性化的服务，每个人都心愿被视作独特的个体，而不仅仅是个统计数据或有钱可花的消费者。 一旦企业与客户之间关系的建设，他们就能扩大信赖和忠诚度因素。批发CRM零碎使批发企业从客户进门的那一刻开始更加关注客户的需要。CRM零碎使个性化变得简略，因此使客户对品牌有良好的感觉。线上与线下服务相结合，发明出让客户感觉受到欢送的整体品牌体验。 CRM零碎还能进步销售人员的工作效率，让员工更快承受培训，更明智地做出反馈，更容易销售产品。批发CRM软件反对员工收集有价值的客户信息，并将企业的营销致力整合到付款流程中。社交媒体和挪动平台都能被纳入CRM零碎，员工可随时随地用手机和电脑瞄准潜在客户，无效跟进商机。 CRM软件如何进步生产力？ CRM软件使得从销售楼层到公司办公室再到供应商仓库的销售流程更加容易。在一个零碎中记录所有的客户和商品数据，这能让所有人更好地实现工作，节约更多的工夫。CRM有助于实现从电子邮件营销到付款，再到短信营销以及介于两者之间的流程的自动化。 批发企业应用CRM软件的益处 提供个性化客户服务通过CRM软件跟踪老客户的爱好和分割信息，销售团队能够用更为个性化的形式回应客户的非凡需要。事实上，73%的消费者示意，他们更违心从那些应用他们的个人信息来让购物体验更具相关性的企业那里购买产品或服务。对于大额销售，如果更多关注和接触点需要的话，CRM反对销售人员接管另一名销售人员进行的工作，这样他就不须要从新发展销售流程，以防止不必要的麻烦和购买阻碍。 促成列表细分CRM软件反对批发公司借助电子邮件列表按趣味，生存阶段，人口统计或其余零碎中的因素筛选客户。通过这种形式细分电子邮件列表，他们就能利用营销致力瞄准特定地区的相干人群。例如，批发商店发现，随着天气变冷，针对北方地区的客户发展外套促销流动有用，而向北方地区的客户发展同样的促销流动则是一种资源节约。 简化销售流程CRM软件可用来跟踪客户进入商店的最后用意以及他们所有的购买行为，使得员工可能持续他们的对话，获取提供补充性产品或进步销售额所需的信息。如果客户最近购买了一台洗衣机，员工能够依据零碎中提供的信息倡议客户购买配套的烘干机或熨斗。 缩小员工培训工夫批发CRM软件使新员工培训更加容易。所有流程集成到繁多的软件系统中，这让员工感觉工作效率有所提高，减少交易单方的信念。在收银台破费更少的工夫，员工就能有更多工夫与客户交换，就能理解更多对于产品的信息。 简化库存治理CRM软件反对员工查看库存量，改善客户体验。如果员工晓得其余商店或仓库的库存量，他们就能尽所有致力取得客户想要的货色。这也使得经理和企业员工更容易远程管理库存。 与其余程序同步用于批发的CRM可与其余程序同步，如领取解决零碎、电子邮件提供商和会计软件登。这些集成使所有员工可能立刻取得他们所需的信息，进而进步他们的工作效率。另外，通过CRM软件能够将挪动平台和社交平台整合到销售流程中，销售人员的工作效率预计能进步11-14%。通过将营销范畴扩充到商店之外，批发企业能够进步营销效率，减少收益。 随着信息技术倒退及生产降级，新批发时代的到来，为客户带来无缝晦涩的购物体验，弱小的CRM零碎可能帮忙批发企业转型降级，进步服务质量，更好地满足客户需要。 8Manage CRM提供挪动互联营销、批发营销治理、e会员、产品治理数据、消费者造就、数据采集与深入分析、连贯团队与工作治理等性能，为批发企业打造线上线下一体化治理平台，帮忙企业更好地应答新批发时代下的转变，晋升销售业绩。

在写一个toast组件的时候，组件上的文字会变得含糊，发现是因为toast应用了transform: translate(-50%, -50%); ↑原来的样子 ↑应用translate之后的样子 在复现过程中发现FireFox并不会呈现含糊的问题，而Chrome和新版Edge会有，并且是在有滚动条时才会含糊 ↑无论是横向还是纵向的滚动条的呈现都会有影响 网上大多数解释都是：应用了transform的元素的宽度或高度为奇数造成的（底层起因暂未找到，有晓得的大佬请评论告知），这里提供几种解决方案 已确定元素的宽高时 应用负margin代替translate不确定元素宽高时 利用js计算元素的负margin以代替translate应用flex代替translate应用下方代码防止应用translate<style> .box{ position: fixed; top: 50%; left: 0; width: 100%; height: 0;/* 避免.box阻挡未定位元素的鼠标事件 */ text-align: center;/* 躲避因宽度为奇数造成含糊 */ } .message{ display: inline-block; transform: translateY(-50%); line-height: 20px;/* 文本能够通过此属性管制高度的数值为偶数 */ /* 其余丑化款式 */ padding: 10px 12px; background-color: rgba(37, 44, 65, 0.8); color: #f4f5f9; }</style><div class="box"> <span class="message">你好啊s</span></div>尽管这里的.message也应用了translate，然而绝对于宽度来说，高度的数值是更容易掌控的：文本就设置偶数的line-height，图片就设置偶数的height，边距就设置偶数的padding或margin等等。

该我的项目成果 外围算法function movbulb(){//扩大this的作用域链with (this) { //ec管制 xx = (xm - x0) / 8与yy = (ym - y0) / 8 执行20次if(ec < 20){ //math.abc 绝对值 //x0为0, y0为-1000 //xm为0， ym为9999if(Math.abs(x0 - xm) < 100 && Math.abs(y0 - ym) < 100){xx = (xm - x0) / 8;yy = (ym - y0) / 8;ec++;}}//xx为初始0，yy初始为0xx *= 0.99;yy *= 0.99;//x0 = Math.round(x0 + Math.cos(y0 / 15) * p) + xx;y0+= yy - v;if(y0 < -h * 2 || x0 < -w * 2 || x0 > nx + w * 2){y0 = ny + N + h * 2;x0 = nx/2-100 + Math.random() * 500;ec = 0;}obj.style.top = y0 - h -350;obj.style.left = x0 - w - 100;}}前端代码<body> <div class="father_box"> <audio class="music" src="./mp3/大鱼.mp3" autoplay="autoplay" controls loop></audio> <!--上面是浮动的桃心--> <div class="bigBox"> <div id="bubbles" style="visibility:hidden"> <img src="./images/bluefish.png"> <img src="./images/banfish.png"> <img src="./images/jingfish.png"> </div> </div> </div></body>该算法代码是实现 fixed元素由下向上冒泡，img元素会左右并且一直向上浮动。在前端代码中，把fixed元素的父盒子body,增加style属性，transform:rotate(90deg),img由左向右~~~~，高低浮动。便造成了鱼的游动。 ...

xml入门根底（简略版）xml的概念xml的全称：Extensible Markup Language xml是可拓展的标签语言 xml的标签都是自定义的标签 xml的性能xml是用来贮存数据的： 1.用作配置文件； 2.把数据存起来在网络传输的数据 xml与html的区别1.xml标签都是是自定义的，html标签是预约义的 2.xml的语法严格，html语法涣散 3.xml是用来贮存数据的，html是用来展现数据的 xml规范法令：1.xml文档的后缀名 .xml 2.xml的第一行文档中必须定义为文档申明 3.xml文档中有且仅有一个根标签 4.属性值必须应用引号（单双引号都能够）引起来 5.严格辨别大小写 xml组成部分：一、文档申明： 1.格局：<?xml 属性列表 ?>2.属性列表： * version：版本号，必须的属性 * encoding:编码方式。用来告知解析引擎以后文档的应用的字 符集，默认值：ISO-8859-1 *standalone：文件是否独立（个别不必管） *取值:(yes:不依赖其余文件/no：依赖其余文件)二、指令： 用来联合css的三、属性： id的属性值惟一四、文本： CDATA区：在该区域中的数据会被原样展现 格局：<![CDATA[数据]]>