今年休产假的时候学习了next.js，然后用这个nodejs框架重构了我的粤语网站 https://shyyp.net homepage.png 网站以前叫粤K粤爱（现在改名叫羊羊粤语），是在2010...这次用node.js框架next.js写前后端，感觉还是挺爽的。前端的css库则用了tailwind。 首先，可以利用react处理复杂的逻辑。...呃，我的技术栈有向facebook全家桶发展的趋势啊～～ 因为用户能方便贡献内容，期待网站的内容会越来越丰富。 不过，这次改版，有一个巨大的失误。...就是，我手贱，换了用了十年之久的域名，以前的域名是ykyi.net。虽然，我按照谷歌的更换域名指引一步一步操作，但还是降了四分之一的搜索引擎流量。...虽然谷歌的官方指引说，按照指引做是可以把站点的权重移到新站上去的。我的经验表明，换域名还是得非常慎重啊，确实是SEO的恶梦～～
上周日最得意的事情莫过于搞定了jquery.qrcode生成的二维码图片一键下载。...有时候觉得已经生成了二维码图片，直接打印就行了，但是用户总有新需求诞生，于是用户说每次保存二维码的图片，都需要右键点击，然后另存为，能不能直接一个按钮点一下就下载这个二维码呢？...能不能直接把二维码图片的名称也在保存的时候自动生成？我的上帝呀，你可以知道你的这么一个小小的要求，我需要折腾多久吗？没错，困扰了1周，最后思考了半天，弄了2个小时程序，才实现了。...中间走了不少弯路，期间参考了《点击按钮保存网页中指定的图片，利用js实现》，可惜jquery.qrcode所生成的图片（我用的是image的渲染方式，因为只有这种方式打印的时候能被直接默认打印出来，canvas...="保存" onclick="save();" /> <img id="testImg" width="200px" height="200px" src="1.jpg" alt="测试图片<em>js</em>
评价，该语言包翻译了前台绝大部分语言，我发现有一两个是遗漏的，当然如果添加了一些插件，则可能会不能全部翻译，这是可以自己通过修改语言包来达到目的。...通过上面的修改，可以将中文话题以#话题#的形式点击跳转，类似各大微博，但对于中文搜索依然不可用。...EasyReply，通过这个插件，帖子会提供一个链接，点击之后会在回复框自动添加@用户名 来提醒用户有人回帖了。Emotify，表情插件，再回复框左上角添加了既可爱又操蛋的表情按钮。...Magic，通过这个插件，jpg、jpeg、gif、png这四种格式的图片只要在文本框直接添加图片路径就会自动转换成图片了，要注意的是，这个插件的功能对主题帖是不起作用的，只对回帖起作用，你可以通过在Sender...最后总结一下，其实vanilla Forums并不是一款符合国情的程序，不过就是符合我自己口味罢了，程序控和代码控也不防下来看看。
-- function onsub() { //生成新月的字符串 var nian=Number(document.all("ListBox1",0).value.substring...options(document.all("ListBox1",0).selectedIndex+1).text==newny) return confirm("您将要创建数据的月份...; } return confirm("您将要创建 " +newny+" 的数据，是否继续？"); } !-->
但实际上，这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢？ 我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己的路由。...简介 我遇到了很多出于各种原因想要自己创建路由的人。既然你看到本文，那意味着你可能也是其中的一个！ 最重要的是，使用 vanilla JS router 可以减少你对框架的依赖。...JavaScript 的 History API 我看过很多没有提到 JavaScript History API 的 vanilla JS router 教程。...基于 History API 的 Vanilla JS 路由设置 先让我们仔细研究构建 URL 切换器所需的最少代码（而无需刷新页面），然后我会向你展示其的工作方式的 GIF 动图。...这就是使浏览器无需重新加载页面即可更改 URL 的原因。 结果:现在，每次我们单击按钮时，URL 实际上都会在浏览器的地址栏中更改。内容框也会更新。 ? 我们的原生 JS 路由开始运行了。
js 表单提交在 firefox 浏览器下是不起作用的 2....” # 当提交按钮的 name 或者 id 为 submit 时候，用 js 提交表单，表单名.submit () 时候会报一个错误，提示对象不支持此属性或办法。...解决方法是修改提交按钮的 name 或者 id 不要与 submit 或者 action 同名即可。...那么，请问为什么 当提交按钮的 name 或者 id 为 submit 或者 action 的时候 js 提交表单会报错呢？这难道是 一个 bug？ 高手们请指教。。。。...我在项目中发现 与 得出的效果截然不同， 谁能告诉我这两着有合不同 我又如何能用图片来替代原有的提交按钮 是说这是一个按钮，它的是一个提交按钮。当点击它时，它会自动将它所在的表单进行提交.
然后进行js打包： Paste_Image.png 引入： 用闭包的形式将util包裹起来...代码重构和歌曲切换的实现 今天，我对musicBox进行了一次简单的重构，代码如下： var musicBox= { musicDom : null, //播放器对象 songs...2.实现了上一首和下一首的逻辑代码 3.默认音乐为第一首 顺便添加了几首音乐。 Paste_Image.png 现在我们就来调用看看吧，当点击播放按钮的时候，就播放指定的歌曲。...点击暂停按钮就停止播放。 4....rotate.gif 终于转起来了，核心的操作就是给图标添加一个css类而已。 现在，我们希望在点击开始按钮的时候，就转动图标。点击暂停就移除转动的css类。
最近我在浏览国外的一些技术网站时，这个词出现的频率实在是在太高了，好多框架都宣称自己是基于 Vanilla JavaScript。那到底什么是 Vanilla JavaScript 呢？...vanilla-js.com 官方网站是这样介绍的：Vanilla JS is a fast, lightweight, cross-platform framework for building incredible...Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架。我们可以用它构建强大的JavaScript应用程序。...1、当按钮提交时 当用户点击按钮或者按回车键时，我们的程序应该这么做： 阻止提交按钮的默认行为，防止刷新页面。 获取输入框输入的城市信息。...本示例大家可以点击以下网址进行在线体验。
最近我在浏览国外的一些技术网站时，这个词出现的频率实在是太高了，好多框架都宣称自己是基于 Vanilla JavaScript。那到底什么是 Vanilla JavaScript 呢？...vanilla-js.com 官方网站是这样介绍的：Vanilla JS is a fast, lightweight, cross-platform framework for building incredible...Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架。我们可以用它构建强大的JavaScript应用程序。...1、当按钮提交时 当用户点击按钮或者按回车键时，我们的程序应该这么做： 阻止提交按钮的默认行为，防止刷新页面。 获取输入框输入的城市信息。...本示例大家可以点击 阅读原文 进行在线体验。
分页数量宽度问题Dialog:修复普通对话框不脱离文档流的问题修复点击对话框后对话框会隐藏问题修复 modeless 模式下背景样式点击透传的问题修复 attach 挂载 showInAttachedElement..., 并使用 CompositionAPI 重构组件逻辑, 增加相关 API，存在不兼容更新DatePicker：重构 DatePicker 为 compositionAPI，全新的UI样式及交互，移除...range api，分别导出 Datepicker 与 DateRangePicker，存在不兼容更新TimePicker：重构TimePicker为 compositionAPI，全新的UI样式及交互...，disableTime API 有所调整, 调整交互为点击确认按钮保留改动, 直接关闭弹窗不保留改动恢复初始值，存在不兼容更新FeaturesTable：筛选对话框输入筛选内容之后按回车应该和按确定按钮一样...，选择之后直接关闭Bug FixesDialog: 修复取消按钮传递 Object 显示不正确的问题Checkbox: 修复外部样式类无法使用的问题详情见：https://github.com/Tencent
大家好，又见面了，我是你们的朋友全栈君。 layer 弹出层，怎么只让他弹出一次.在线等 我昨天用这个插件的时候也有这个问题，弹出内容大了就居不了中。...jquery layer怎么弹出指定的html内元素 一个基本的弹出层应该满足以下需CSS布局HTML小编今天和大家分享： 点击按钮/链接触发弹出层，弹出层应该有半透明的遮罩层； 点击弹出层的关闭按钮...layer弹出层表单的数据使用layer.js做弹出层时，在弹出层里直接提交form表单，返回的画面仍然停留在弹出层里。...用了webuploader，想要点击按钮弹出文件上传窗口。...layer中弹出层内容点击事件不起作用 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/158426.html原文链接：https://javaforall.cn
TS 在 vanilla JS 体验之上增加了一个全面的可选类型系统。很长一段时间里，整个 JS 生态系统对 TS 的支持不足以让我觉得应该推荐它。...无法无天-主演：shia lebouf 电影：无法无天，主演 shia lebouf Typescript 类型，可以重构更大的程序 重构大型 JS 程序是一场真正的噩梦。...重构 JS 过程中引起痛苦的大部分原因是它没有强制按照函数的原型执行。这意味着 JS 函数永远不会被“误用”。...总的来说，TS 已经发展成为一种成熟且更可预测的 vanilla JS替代品。肯定仍然需要 vanilla JS，但是我现在的大多数新项目都是从一开始就是 TS。...不需要具有单线箭头功能的括号或分号。 在这里我想说清楚，这和 var 不一样，对于 vanilla 匿名函数（特别是类方法）仍有效。
中文 English 本文主要讲实现一个简单的界面，可以在窗口比较大显示列表和内容，窗口比较小时候显示列表或内容。也就是在窗口比较小的时候，点击列表会显示内容，点击返回会显示列表。 先放图，很简单。...开始的窗口是很大，可以两栏，其中左边显示列表，右边因为开始没有点击列表就显示图片，点击列表显示内容，就是下面的图。 ? ?...本文是很简单的，一般和我一样渣都能大概知道。 代码是我在很大的压力会议上写的，不到一个钟，写完修改，和大家说。我写的很简单，可以修改我代码，可以自己写，下面我来说下如何写。...Frame，在ViewModel，把Frame叫Detail 因为点击所以我们的Frame有内容 HasFrame=true; 后退按钮 在App写 Windows.UI.Core.SystemNavigationManager.GetForCurrentView...，可以去下我源代码https://github.com/lindexi/UWP 然后在按后退按钮，就把我们的hasFrame=false; 大概我们就把一个页面做好，Detail就显示我们点击传的str
-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> 我是排版样式 我说把你打断，把你的话王旭ad是个 <!
刚刚下载了一个使用原生web组件的codepen代码的时候发现了一个“似曾相识”的名词：vanilla JS。 当时就很气，说好原生实现，为啥又说要引入vanilla.js？？ 这是什么高端框架？...最后还是StackOverflow上正经的程序员的回答告诉了我真相： 原来VanillaJS === PlainJS。。。...顺着下载链接（要剃子），我终于得到这个传说中最流弊的JS库： // 只想说： 被骗人数 = 被骗人数 + 1 总之，Vanilla JS is a joke，就是指原生JS而已，虽然是一个套路，vanilla.js...因为vanilla本身就有”原生“的意思，vanilla JS就是原生JS库的代名词。...Vanilla运动希望在现如今js框架如杂草般疯长的乱象中寻找一些可贵的“原生精神”。 （完）
width.gif # 这是什么 Contrast.js插件主要用于检验移动端Web重构还原度，由于大部分设计稿是基于iPhone6以上（1334 x 750）设计的，所以该插件比较适合用iPhone6...准备好需要验证的设计稿，如bg.png 2....在重构稿中引入工具脚本contrast.js并设置图片路径 <script type="text/javascript" src="https://coderjunb.github.io/HTML-contrast...浏览页面，可以看到界面右下角多了个“对比工具”<em>按钮</em> 1519631158_28_w800_h667.jpg # 操作使用 开启工具：<em>点击</em>“工具<em>按钮</em>”，插件展示操作引导（第一次加载才显示引导...）； 关闭工具：<em>点击</em>“工具<em>按钮</em>”，插件隐藏； 查看设计稿：在屏幕上半区向右滑动，左侧展示设计稿，右侧展示<em>重构</em>稿； 设计稿透明度：在屏幕下半区向左滑动，设计稿逐渐透明；在屏幕下半区向右滑动
来源：吃葡萄不吐番茄皮 segmentfault.com/a/1190000014753304 前言 前端技术发展很快，很多项目面临前端部分重构，很开心可以让我进行这次项目前端的重构方案编写，在思考的同时参考了网上很多资料...，希望本篇重构方案有一定的完整性，可以带给大家一些在面临重构时有用的东西，同时希望路过的大牛小牛不领赐教，能给我略微指点下重构相关的点，在下感激不尽~ 一、原项目梳理 首先对原来项目做一个大概的梳理，既然是重构...1.1页面结构 我这边负责的PC端的重构，所以先把页面结构及之间的关系梳理了一遍，并用xmind画好结构图，重点功能做上标记，因为vue是渐进式框架，所以我会优先重构重要的部分 xmind结构图我就不上了...2、webstorm自带取色器（其他IDE应该都有，自行找下） 写颜色色值的地方可以点击调出取色板（不限于css），可以选颜色也可以利用吸管取色（屏幕任意处 不限于IDE内部），也有取色的网站可以收藏到书签工具文件夹里...，适得其反 ☆ 更赏心悦目的UI（字体、图片、logo，按钮、列表等） ☆ 处理好很多小的细节的地方，比如...
原文地址：How to Build a Simple Chrome Extension in Vanilla JavaScript 原文作者：Sara Wegman 译者：Chor 今天，我打算向你们展示如何用原生...因为我不打算让它一直显示，所以我将其放在一个名为settings的div下，该div只在用户点击settings按钮的时候才会显示。...我将给settings按钮和输入框添加内边距和轮廓，之后让settings按钮和输入框之间留有一点空隙。...settings-open的类，在用户点击settings按钮的时候该类名将动态添加或去除。...document.getElementById("settings").classList.toggle("settings-open"); } 现在添加一个事件监听器，它将会在settings按钮被点击的时候调用函数
最近太忙了，项目中使用的弹框老板嫌太丑，让我们优化一下，我在网上找了一下，找到了sweetalert弹框，算是比较好看的弹框了。...点击取消执行else中的方法 ? 点击确定直接执行函数 ?...五、相关问题 1、传函数错误 Swal(“确定提交吗”, function(){}, ‘error’ ); //这种写法在我用的这个版本中是错误的，我的这个版本支持then(), 不支持直接在参数中写方法...2、API问题 在这个版本中以下写法只能实现title和text的效果，其他属性都不起作用 1 swal({ 2 title: "确定删除吗？"..., "你的虚拟文件已经被删除。", "success"); 12 }); 在这个版本中只能按照我最上面所列举的去实现，那是我在官方英文文档中发现的，中文文档太坑了。
设计风格 起初咱也打算遵循 Google Material Design 风格来设计（很喜欢），顺便也借用了栅格、卡片和按钮等组件。所以最初能够快速成型。...2020-05-31 滚动 我的主题文章目录的滚动效果起初是参考 hexo-theme-melody/source/js/sidebar.js 实现的。...v0.3.0 时，我便是使用的 debounce，sidebar.js - v0.3.0 v0.4.0-v0.7.0，直接去掉了（代码看起来比较简洁），sidebar.js - v0.7.0 简而言之...，我便想用 Intersection Observer 重构一下目录滚动监听功能，然后……写出了些 BUG，没调出来，就搁置了一段时间。...再腾出时间想要重构时，突然发现 hexo-theme-next/source/js/utils.js 就是用这种方式写的。 咳，读书人的事情怎么能叫抄呢？叫参考！
领取专属 10元无门槛券
手把手带您无忧上云
