马优晨

【代码】多邮箱校验，邮箱用英文逗号分割。

js判断是否是奇数

举例：删除id为stencilRef下，所有class为x6-port的节点;

如上图所示，点击按钮，防止按钮点击多次。

【代码】一个简单的布局。

如果所示，实现如上图效果，点击小铃铛，从右侧展示通知，点击其中一条调到另一个页面；

结构如下en.jszh-CN.jsindex.js。

第三行代码 str.match(patt1) 返回一个数组，实例中的数组包含 5 个元素，索引 0 对应的是整个字符串，索引 1 对应第一个匹配符（括号内），以此类推。最后，第四个括号子表达式捕获 Web 地址指定的路径和 / 或页信息。该子表达式能匹配不包括 # 或空格字符的任何字符序列。只能重复一次该子表达式。默认情况下的圆点 . 是 匹配除换行符 \n 之外的任何字符，加上 s 之后, . 中包含换行符 \n。第二个括号子表达式捕获地址的域地址部分。子表达式匹配非 : 和 / 之后的一个或多个字符。

函数式编程，是一种编程范式，它将电脑运算视为函数运算，并且避免使用程序状态以及易变对象。比起命令式编程，函数式编程更加强调程序执行的结果而非执行的过程，倡导利用若干简单的执行单元让计算结果不断渐进，逐层推导复杂的运算，而不是设计一个复杂的执行过程。

自 2022 年 4 月 11 日起，URL Scheme有效期最长 30 天，不再支持永久有效的URL Scheme、不再区分短期有效URL Scheme与长期有效URL Scheme。每个独立的URL Scheme被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同URL Scheme打开该小程序。在本次规则调整生效前已经生成的URL Scheme，如果有效期超过30天或长期会被降级为30天有效，只能被1个用户访问，开始时间从调整日期开始计算。

在工作开发中，需要一个背景图占满全屏，这个时候需要怎么处理呢？

CSSStyleDeclaration异常

使用上面的hooks将返回调用lightVersion函数返回的数据；在utils文件夹中创建一个 hooks用于存放hooks的文件。这里我们创建一个useLightVersion.ts文件。上图为lightVersion函数返回的数据；使用store存储数据，需要每个页面调用。使用localStorage存储全局。疯转hooks变成公共方法以供调用。那么在页面中使用就很简单了，如下。一个公共的数据在多页中使用？

获取微信小程序系统信息（版本、端、系统、导航高度等）

CSS 样式表越来越大、 越来越复杂、越来越难以维护。这就是预处理可以提供帮助的地方。Sass 为你提供了 CSS 中还不存在的特性，例如变量、 嵌套、混合、继承和其它实用的功能，让编写 CSS 代码变得有意思。最直接的方式就是在命令行中调用 sass 命令。安装 Sass 之后，你就可以用sass命令将 Sass 编译为 CSS 了。

如上图所示，在上面的CSS中，可以通过class类名过滤一些元素。

如何判断当前是什么环境？

js派发自定义事件

到页面首屏完全展示这一过程所花的时间极短，而且在页面中点击链接切换路由的操作非常顺滑，几乎页面可以达到“秒切”的效果，根本不会有卡顿等待的情况发生，这是怎么实现的呢？文档，由于代码量实在是太多，所以只保留了具有象征意义的部分代码，但不难发现，服务端渲染返回的HTML。，下面我们简单介绍一下它们各自的特点，看完之后相信你就能清晰的感受到它们的区别所在了。树的结构，使得页面成为希望成为的样子，这种渲染方式叫动态渲染，也就是平时我们所称的。在开始之前，我们先来回顾一下页面最基本的渲染流程是怎么样的？.......

原生js表单提交数据和校验

通用能力1、正常请求该有的（跨域携带cookie，token，超时设置）；2、请求响应拦截器；请求成功，业务状态码200，解析result，不要一层一层的去判断拿数据； http请求200， 业务状态码非200，说明逻辑判断这是不成功的，那就全局message提示服务端的报错 http请求非200， 说明http请求都有问题，也全局message提示报错 http请求或者业务状态码401都做注销操作3、全局的loading配置, 默认开启，可配置关闭（由于后端的问题，经常会让前端加

1、复制文本复制各种自定义的文本，浏览器兼容性高const copyText = (text) => { const clipboardData = window.clipboardData; if (clipboardData) { clipboardData.clearData(); clipboardData.setData("Text", text); return true; } else if (document.execCommand) {

自适应布局布局特点：不同设备对应不同的HTML 局部自适应总结：不同的设备用不同的页面或者局部缩放响应式布局布局特点：确保一个页面在所有的终端上，都能显示出令人满意的效果总结：一套方案，处处运行设计思路：使用%或者rem作为单位rem弹性布局布局特点：确为了保证在各种屏幕上的不失真，就要根据实际屏幕宽度做等比例换算总结：一套方案，使用不同的尺寸，分辨率的视口、都能呈现出较好的效果设计思路：使用%或者rem作为单位flex的特殊写法.

需求阶段需求文档（背景、收益、详细需求、原型图、A/B实验、埋点） 需求评审（PM-产品经理、RD-研发、QA-测试） 遗留问题修改再次评审研发阶段根据原型图拆分功能模块 评估开发联调排期 技术方案设计 业务代码实现测试阶段测试用例评审 研发自评 正式提测演示 修复BUG上线阶段打包部署 线上验证 数据收集 效果回归学习建议先学使用，在学原理 对比学习，构建体系 动脑动手，大量实践 良好心态，不断进步...

有时候我们需要动态添加meta标签和里面的内容，如何添加呢？举例： // 手动添加mate标签 const addMeta = (name, content) => { const meta = document.createElement('meta'); meta.content = content; meta.name = name; document.getElementsByTagName('head')[0].appendChi..

（1）使用倒计时函数 const countDown = (current, ends) => { const leftTime = ends - current; let [h, m, s] = ['00', '00', '00']; if (leftTime >= 0) { h = Math.floor((leftTime / 1000 / 60 / 60) % 24) >= 10 ? Math.floor(

如上图所示，假设这是一个传统的秒杀购买场景：（1）问题概述：状态： （1,2）进入秒杀 （3）立即预约 （4）宝贝秒光 （5）活动结束 文字： 进入 秒杀文字颜色#fff，其他文字颜色都是 #ff3B56； 宝贝秒光，活动结束，文字带透明度30%；描边： 只有立即预约有描边，其他状态都没有按钮透明度：立即预约 8% 进入秒杀 100% 宝贝秒光 8% 活动结束 8%（2）解决方案： 拿到这个问题，首先很多人想想到的是...

「1」微前端 （Miro frontends）"微前端" 应该是我们 2020 年里听的最多的一个前端技术。现在非常多的大厂都在尝试这个新技术来解决大型前端项目中的问题。虽然我们前端开发中有模块化（modular）的组件（components），但是它相比后端的 “微服务” 是大有不同的。在了解 “微前端” 之前，我们先给没有接触过后端的同学科补一下后端的 “微服务” 知识。微服务是什么？微服务是一种开发软件的架构和组织方法，其中软件由通过明确定义的 API 进行通信的小型独立服务组成。这些服.

（1）vh （视口高度）和 vw（视口宽度）介绍vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;效果：当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，但是设置height:100vh，该元素会被撑开屏幕高度一致。vh: 相对于视窗的高度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位

（1）在文件夹中搜索（1）在右上角的搜索框检索

1. if多条件判断如果if里面包含多个判断条件，可以把判断条件存到一个数组，然后在去这个数组中检索”输入的值“是否满足条件；// 冗余if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {}// 简洁if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {}2. if…else…单个if else可以直接使用变量赋值替代，省时省力// 冗余let test: boolean;

（1）获取对象的属性，并且判断对象属性是否存在举例：let test = {name:’22’,age:67,sex:’man’}; 获取age属性值；简单写法：if(test && test.age ){ console.log(test.age);}优化写法：let test = {name:’22’,age:67,sex:’man’}; console.log(test && test.age); // 直接获取age的值；（2）引入图片（图

中断或取消 Promise 链Promise 已经成为了 JavaScript 管理异步操作的重要工具之一. 然而, 有的时候还是会很头痛:Promise // 等价于 `Promise.resolve(undefined).then`. .then(() => { // 开始. }) .then(() => { if (wantToBreakHere) { // 怎样在这里终止这个 Promise 链?

require.context介绍require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块require.context使用场景：在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入(原谅ide的警告-.-),

（1）介绍：clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;（2）clipboard复印内容的方式有从target复印目标内容通过function 要复印的内容通过属性返回复印的内容target复印目标内容，这里不说，就说一

一、微信分享1.准备工作APPID公众号id、申请好友分享接口、ip白名单、js接口安全域名设置（必须是通过备案）。要先登录微信公众平台进入“公众号设置”的功能设置里填写“JS接口域名”2.引入js注意：支持使用AMD/CMD标准加载方法<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 3.通过config接口注入权限验证配置所有需要使用JS-SDK的页面必须先注入配置信息，否则

1、数据加载后进行swiper初始化时$('.honor .commemorative-medals').on('click', 'li img', function () { var obj = $(this).closest('.commemorative-medals').attr('id'); var i = $(this).closest('li').index(); ...

对象的创建模式大概有这几种：Object构造函数模式对象字面量工厂模式自定义构造函数模式构造函数+原型的组合模式Object构造函数模式Object构造函数模式套路: 先创建空Object对象, 再动态添加属性/方法适用场景: 起始时不确定对象内部数据问题: 语句太多&lt;script type="text/javascript"&gt; /* 一个人: ...

(1)原理概述就是根据 http 协议的规范和定义，完成请求消息体的封装和消息体的解析，然后将二进制内容保存到文件。我们都知道如果要上传一个文件，需要把 form 标签的enctype设置为multipart/form-data,同时method必须为post方法。那么multipart/form-data表示什么呢？multipart互联网上的混合资源，就是资源由多种元素组成，fo...

实现效果 使用canvas绘制一个圆形，实现绕着一个中心，轨迹类似于走一个椭圆的轨迹那样路线，并且实现漂浮的效果。这里只是一个实例Demo，直接运行就可以，下面附上代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content