首页 > 前端开发 > Javascript
-
关于Firefox火狐浏览器下使用sortable.js进行拖拽时打开新窗口页面的问题处理
最近使用Sortable.js开发拖拽的功能，但在Firefox浏览器下遇到一个问题，任何时候拖拽，都会打开一个新窗口页面，这是没办法接受的，于是对此问题进行了以下方式的处理，问题总算解决了。 在页面加载完成时执行以下代码即可：document.body.ondrop = function (event) { event.preventDefault(); e...
-
js闭包的强大功能
我觉得闭包的强大之处主要在于他的封装性，也就是信息隐藏。下面我们从以下几个方面来详细说明。函数与私有状态通过闭包，我们可以创建拥有私有状态的函数，闭包使得状态被封装起来。工厂模式与私有原型对象我们先来看一个通过原型创建对象的常规方式，如下：let todoPrototype = { toString : function() { return this.id + " " + t...
-
WebStorm 2020.2 正式发布
WebStorm 2020.2 发布了，此版本可将 Prettier 用作默认格式化程序，还带来了对 Vue 的支持、对 JavaScript 的新意图，和对 GitHub PR 的全面支持等等。主要新特性和改进包括：框架和技术：使用 Prettier 作为默认格式化程序的选项，对 Vue.js 进行了各种改进，并支持 WSL 2 中安装的 Git。JavaScript 和 T...
-
轻量级Javascript全文搜索库——Lunr.js
介绍Lunr.js是个用于浏览器的轻量级 JavaScript 全文搜索引擎。它为JSON文档建立索引，并提供一个简单的搜索界面来检索与文本查询最匹配的文档对于一些小型的博客、开发者文档或 Wiki 网站来说,完全可以通过它实现站内离线搜索:为什么使用它？对于已经将所有数据存储在客户端中的Web应用程序，也能够在客户端上搜索该数据也是很有意义的。这样可以节省在服务器上添加额外的...
-
JavaScript数组常用方法
1、数组去重function removeRepeat(arr){ var newArr = []; for(var i = 0; i < arr.length; i++){ if(newArr.indexOf(arr[i])==-1){ newArr.push(arr[i]); } } retur...
-
Javascript运行机制深入
浏览器内核（渲染进程）浏览器的渲染进程是多线程的!包含了哪些线程（列举一些主要常驻线程）:GUI渲染线程负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻...
-
JS的艺术，前端异常捕获技术大全。
前端异常捕获，技术大纲可疑区域增加 try...catch全局监控JS异常： window.onerror全局监控静态资源异常： window.addEventListener全局捕获没有 catch 的 promise 异常：unhandledrejectioniframe 异常：window.errorVUE errorHandler 和 React componentDi...
-
详解如何实现前端jquery中的ajax方法，看这一篇就够了
前言这篇文章主要聊一聊如何手写一个jquery的ajax方法，这是前端中的基础知识，也是一道非常经典的前端面试题！一步步手写ajax在web页面中与后端通信的顺序一般都是客户端向服务器发起请求，然后服务器再回复客户端，用于通信的工具就是ajax。如果你喜欢足球，你肯定知道荷甲联赛中也有一支豪门足球俱乐部叫阿贾克斯，名字一毛一样。ajax就像电话一样，将页面和服务器联系在一起，基...
-
好看又好用，这 5 个国产 JS 开源项目在 Gitee 火了
JavaScript 作为「前端三件套」中至关重要的一员，在开源领域的地位也是毋庸置疑的，Gitee 上有超过 40 万个开源项目使用 JavaScript 开发，今天给大家推荐的 5 款是 Gitee 上最近最受欢迎的 JavaScript 项目。1.vue-mini-player基于 Vue 的一个轻量级 HTML5 视频播放组件，适配 PC 和移动端。项目地址：https...
-
将分割的文件进行合并
将分割后的文件进行合并，还原成一个完整的文件本质其实就是文件的拷贝，只不过在拷贝的时候是追加文件而不是新建文件这个时候我们使用到的是字节流，就是将分割后的文件输入到程序，然后输出到文件也可以理解为多个输入流一个输出流package cn.jd.io;import java.io.BufferedInputStream;import java.io.BufferedOutputS...
-
Web开发之浏览器数据库存储解决方案的选择和使用
本文背景在我们的Web项目开发中常常会遇到一些数据的存储问题，因为有一些数据相对来说对于安全性要求比较低，在现代Web项目开发中大部分已经走向前后端分离的模式，一般通用的都是向前端提供rest api。我个人认为，虽然前后端分离的模式很好的解决了后端统一的问题，但是相对来说，如果大量的重复数据或者一些基础数据每次都通过请求服务器来说无疑是对服务器资源的一种浪费，既然浏览器提供了...
-
面向纯JavaScript的OCR识别引擎——Tesseract.js
介绍Tesseract.js是流行的面向纯Javascript的OCR引擎的。该库支持100多种语言（中文支持），自动文本方向和脚本检测，用于读取段落，单词和字符边界框的简单界面。Tesseract.js可以在浏览器和具有NodeJS服务器上运行。Githubhttps://github.com/naptha/tesseract.js使用方式# For v2版本npm inst...
-
JavaScript 中，5 种增加代码可读性的最佳实践
为了保证的可读性，本文采用意译而非直译。简介如果咱们关注代码本身结构及可读笥，而不是只关心它是否能工作，那么咱们写代码是有一定的水准。专业开发人员将为未来的自己和“其他人”编写代码，而不仅仅只编写能应付当前工作的代码。在此基础上，可读性高的代码可以定义为自解释的、易于人理解的、易于更改或扩展的代码。以下列表一些好编写方式，仅供参考，当然，如果你有更好的方式，欢迎留言。以下的方式...
-
Web开发实用的图片预览插件，简单零依赖——PhotoSwipe
介绍PhotoSwipe是一个JavaScript库，没有依赖项。要说唯一的依赖项那就是Vanilla.js（原生js）,因此你可以在你的任何Web项目中使用，包括主流的Vue、React、Angular以及传统jQuery的项目。PhotoSwipe可以被用到各种大中小型项目当中，并且PC和移动端完美支持！Githubhttps://github.com/dimsemenov...
-
用JS开发跨平台桌面应用，从原理到实践
导读使用Electron开发客户端程序已经有一段时间了，整体感觉还是非常不错的，其中也遇到了一些坑点，本文是从【运行原理】到【实际应用】对Electron进行一次系统性的总结。【多图，长文预警～】本文所有实例代码均在我的github electron-react上，结合代码阅读文章效果更佳。另外electron-react还可作为使用Electron + React + Mob...
-
代码详解：Async/Await优于基础Promises的7大原因
Async/await已被引入NodeJS 7.6，当前能在几乎所有先进的浏览器上运行。这绝对是自2017年以来JavaScript最好的附加语法，没有之一。Async/Await 101• Async/await是一种编写异步代码的新方法。以前编写异步代码会用callbacks和promises。• Async/await 实际上只是一种基于promises的糖衣语法，不能与...
-
jqurey获取表单所有数据
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script src="jquery-3.2.1.min.js"></script> <!--<link h...
-
TypeScript 被吹过头了
开始看本文之前，我希望读者朋友们知道我在很大程度上是一位 TypeScript 粉丝。在我的前端 React 项目和各种后端 Node 工作里，所使用的主要编程语言都是 TypeScript。我是这条船上的人，但也确实有一些疑惑，想在这篇文章中讨论一下。到目前为止，我已经使用 TypeScript 写了至少三年的代码，涉及的项目不计其数，因此可以说 TypeScript 的确是...
-
为什么我们现在应该停止使用的JavaScript构造器
JavaScript通过保留旧结构来保持与旧应用程序的向后兼容性。在大多数情况下，它们都是过时的，并被更简洁、更有表现力的新代码结构所取代。在本文中，我们将介绍应该立即停止使用或尽量减少使用的旧结构。1.传统函数传统函数是以关键字 function 开头的函数。我们不应该再频繁地使用它们，因为我们已经将类语法作为语法糖，用于构造函数和不关心 this 的箭头函数。提升传统函数还...
-
四个最佳实践，引导你写出高质量JavaScript模块
使用 ES2015 模块，您可以将应用程序代码分成可重用的、封装的、专注于单一任务的模块。这很好，但是如何构造模块呢？一个模块应该有多少个函数和类？这篇文章介绍了有关如何更好地组织 JavaScript 模块的4种最佳实践。1.优先使用命名导出当我开始使用 JavaScript 模块时，我使用默认的语法来导出模块定义的单个块，不管是类还是函数。例如，这是一个将模块 Greete...
-
Javascript正则表达式扫盲
前言正则表达式应用太广泛了，遍布于各端程序猿日常编码中。这里只是做学习补充，简单阐述一下对?!，?=，?:的理解，知道的大佬就算是温故了，不理解希望能够帮你扫扫盲点。用一个例子开头吧，我在写bolg的注册部分时，密码要求必须为数字、字母、特殊符号组合，并且长度为8-16位。长度很好验证，难点是在必须为数字、字母、特殊符号的组合。哪些是不可行的1. 纯数字不行2. 纯字母不行3....
-
JS基础入门：闭包详细讲解
闭包是函数创建时作用域内所有变量的集合。要使用闭包，需要在另一个函数中创建一个函数，这种函数被称为嵌套函数。内部函数可以访问外部函数作用域中的变量（依靠闭包可以访问外部函数作用域），即使在返回外部函数之后也是如此。每次创建嵌套函数时都会创建闭包。作用域链在继续了解闭包之前，首先了解一下JavaScript中的作用域链。通常，有两种类型的作用域：全局作用域局部作用域在JavaSc...
-
JavaScript实现图片合成下载
背景：最近项目一个功能需求，需实现将两张图片合成后下载的一个功能。分析完功能需求后，决定直接使用前端技术来实现。为提高效率，使用插件(html2canvas)配合编写此功能。有关插件(html2canvas)的介绍，这里不多说明，大家可自行网上查阅。以下直接附上效果演示图以及完整代码效果演示：完整代码：(代码复制可直接使用)注：最好将代码文件放在服务器环境下运行，以防止插件(h...
-
js组件的开发与简单应用
什么是js组件我们先理解下什么是组件？通俗的讲，可以认为组件是能满足我们某项或某些需求的“东西”，它是什么无所谓。比如我想要一个能放money的东西，那么钱包就是这个“组件",我不用管它是怎么加工的，用的什么材质。这就是一个”组件“那么回过头来理解下js组件，就可以理解为能够满足我们某个功能需求的js。我们不关心它内部怎么实现的，只要知到怎么用就行了。最简单的js组件任性的需求...
-
JavaScript内部原理：浏览器的内幕
简介Javascript 是一种奇怪语言，有些人喜欢它，有些人讨厌它。它有许多独特的机制，这些机制在其他流行语言中不存在，也没有对应的机制，还有突出明显的就是代码的执行顺序了解浏览器环境，它的组成以及它的工作原理会让我们在编写 JS 时更加自信，并为可能发生的潜在问题做好了充分的准备。在这篇文章中，我们试着解释一下Chrome浏览器下到底发生了什么，来一起看看：V8 Javas...
-
js防抖动函数
什么是js防抖动?我是这样理解的，限制某个事件（函数）在指定时间内不重复触发。比如有一个输入框，当用户输入后进行远程搜索，如果不限制频次，用户每输入一个字符就会发起网络请求，但请求的很大可能不是用户想要的，这时候就可以用防抖动机制，规定用户在500ms内没有新的输入才发起网络请求。 一个简单的防抖实现<!DOCTYPE html><html lang="en...
-
我从来不理解JavaScript闭包，直到有人这样向我解释它
正如标题所述，JavaScript闭包对我来说一直有点神秘,看过很多闭包的文章，在工作使用过闭包，有时甚至在项目中使用闭包，但我确实是这是在使用闭包的知识。最近看到的一些文章，终于，有人用于一种让我明白方式对闭包进行了解释，我将在本文中尝试使用这种方法来解释闭包。准备在理解闭包之前，有个重要的概念需要先了解一下，就是 js 执行上下文。这篇文章是执行上下文 很不错的入门教程，文...
-
你不知道的冷知识：JSON.stringify 居然还能这样用？
JSON.stringify() 这个 API 想必大家都用过，可以帮助我们将数据解析成字符串类型，如下是个例子：const obj = { name: 'foo', level: 'low', age: '100', money: 'empty'}JSON.stringify(obj)// "{"name":"foo","level":"low","age":"100","m...
-
开发人员注意啦！JavaScript中一直使用===是错误的
全文共3228字，预计学习时长10分钟相比==，许多开发人员更喜欢使用===，为什么呢？网上大多数教程都有解释过，JavaScript的强制转换太过复杂，难以预测，因此建议始终使用===。互联网上一些教程的错误观念误导了大众，以及许多不成文的规则和受欢迎的网站都建议一直使用===。这些都导致许多程序员放弃了一些程序语言，并将其视为缺陷，而不是深入理解领悟它们。下面的两个案例说明...
-
$.ajax,axios,fetch三种ajax请求的区别
Ajax是常用的一门与Web服务器通信的技术，目前发送Ajax请求的主要有4种方式：原生XHRjquery中的$.ajax()axiosfetch至于原生的XHR目前工作中已经很少去手写它了，前些年我们比较常用的是jquery的ajax请求，但是近些年前端发展很快，jquery包装的ajax已经失去了往日的光辉，取而代之的是新出现的axios和fetch，两者都开始抢占“请求”...