-
React 入门：安装环境
前言作为一个前端开发有些不好意思，居然还没有接触过 React ，就借这段时间积累下 React 相关经验，为疫情过后能有更多的就业机会。如果你已经是个经验丰富的 React Developer 可能这系列文章不太适合你阅读。虽然我承认下面大多数内容，基本都可以在官网找到原型。 但我会努力让你们尽可能不枉此行，如果有不对之处，望各位评论指出。推荐工具链我们可以像以前使用 jqu...
-
轻量级Javascript全文搜索库——Lunr.js
介绍Lunr.js是个用于浏览器的轻量级 JavaScript 全文搜索引擎。它为JSON文档建立索引，并提供一个简单的搜索界面来检索与文本查询最匹配的文档对于一些小型的博客、开发者文档或 Wiki 网站来说,完全可以通过它实现站内离线搜索:为什么使用它？对于已经将所有数据存储在客户端中的Web应用程序，也能够在客户端上搜索该数据也是很有意义的。这样可以节省在服务器上添加额外的...
-
轻量级Vue图片上传插件——Vue-core-image-Upload
介绍vue-core-image-upload 是一款轻量级的 Vue.js 上传插件，它可以支持的图片的上传，裁剪，压缩。它同样也支持在移动端的图片处理，它定义了诸多上传周期，你可以自由的进行流程控制。Githubhttps://github.com/Vanthink-UED/vue-core-image-upload安装npm install vue-core-image-...
-
vue框架搭建流程
一、检查node和npm是否已安装win+r打开命令工具，输入cmd，后依次输入node -v和npm -v。若能显示版本号，则安装成功。若不能，node下载路径为Node.js。 npm下载为npm install npm -g二、配置node环境1、首先在node.js的安装目录根目录下新建两个文件夹：node_global和node_cache(第二步cache配置用到)...
-
掌握这8个CSS开发工具让你瞬间成为开发高手！还在等什么！
CSS是Web开发的基础之一。但是，我们中的一些人却感到非常困惑。这是因为我们没有遵循适当的学习流程，因此我们很难理解CSS的行为。本文旨在通过两种方式为你提供CSS的学习帮助：借助专用工具对CSS进行编码以及通过一些交互环境学习CSS。网上学习制作工具1、 EnjoyCSS地址：https://enjoycss.com/这个工具非常简单，是我们学习使用CSS时的救星。你可以使...
-
Vue3.0权限管理实现流程
一、整体思路后端返回用户权限，前端根据用户权限处理得到左侧菜单；所有路由在前端定义好，根据后端返回的用户权限筛选出需要挂载的路由，然后使用 addRoutes 动态挂载路由。二、实现要点（1）路由定义，分为初始路由和动态路由，一般来说初始路由只有 login，其他路由都挂载在 home 路由之下需要动态挂载。（2）用户登录，登录成功之后得到 token，保存在 sessionS...
-
聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总
转发链接：https://mp.weixin.qq.com/s/MQues_aqTBeQ_6g8uVT9Tw前言在 4 月 21 日晚，Vue 作者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta最新进展。以下是直播内容整理想学Vue的小伙伴们，小编这几个月陆陆续续收集整理了几十篇关于Vue的学习相关文章以及项目开发中的总结，相关Vue学习资料文章请见本篇文章底部1. ...
-
如何快速删除vue项目下的node_modules文件夹
随着vue项目的增多，当项目要清除重来时，就得删除node_modules文件夹。 但如果删除一个或多个的时候，几十万个文件对于我cpu i7+16G内存的电脑来说，竟然异常地慢。系统发现文件就得好久。 因此打算寻找更快删除node_mudules文件夹的方法。 下面介绍具体的方法： npm install -g rimraf 先使用npm全局安装 rimraf，然后再使用 ...
-
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线程会被挂起（相当于被冻...
-
Vue 3.0 Beta 版本发布，你还学的动么？
技术编辑：徐九丨发自 北京SegmentFault 思否报道丨公众号：SegmentFault不知道是不是巧合，尤大又在凌晨发布了 Vue 的最新动态。等了这么久，Vue 3.0 终于发布了 beta 版本，尤大之前曾强调过 Vue 3.0 包含了五个关键变化：1.速度 2.体积 3.可维护性 4.面向原生 5.易用性。这次看来已经优化的差不多了。尤雨溪和 Vue尤雨溪尤大目前...
-
可用于浏览器Web应用的终端组件——Xterm.js
介绍Xterm.js是一个用TypeScript编写的前端组件，它允许应用程序在浏览器中为用户提供功能齐全的终端。它被VS Code，Hyper和Theia等热门项目所使用。Github（7k stars）https://github.com/xtermjs/xterm.js组件特性终端应用程序正常工作：Xterm.js适用于大多数终端应用程序，如bash，vim和tmux，这...
-
Vue前端开发规范
基于Vue官方风格指南整理一、强制1. 组件名为多个单词组件名应该始终是多个单词的，根组件 App 除外。正例：export default { name: 'TodoItem', // ...}复制代码反例：export default { name: 'Todo', // ...}复制代码2. 组件数据组件的 data 必须是一个函数。当在组件中使用 data 属性的时候 ...
-
JS的艺术，前端异常捕获技术大全。
前端异常捕获，技术大纲可疑区域增加 try...catch全局监控JS异常： window.onerror全局监控静态资源异常： window.addEventListener全局捕获没有 catch 的 promise 异常：unhandledrejectioniframe 异常：window.errorVUE errorHandler 和 React componentDi...
-
Html5调用手机摄像头并实现人脸识别的实现
需求混合App开发，原生壳子+webApp，在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容，同时可以手动拍照并进行人脸识别，将识别结果显示在网页上。技术栈vue、Html5、video标签、Android、IOS、百度AI分析1、使用navigator.mediaDevices.getUserMedia调用系统原生摄像头功能2、video标签显示摄像头内容3、c...
-
详解如何实现前端jquery中的ajax方法，看这一篇就够了
前言这篇文章主要聊一聊如何手写一个jquery的ajax方法，这是前端中的基础知识，也是一道非常经典的前端面试题！一步步手写ajax在web页面中与后端通信的顺序一般都是客户端向服务器发起请求，然后服务器再回复客户端，用于通信的工具就是ajax。如果你喜欢足球，你肯定知道荷甲联赛中也有一支豪门足球俱乐部叫阿贾克斯，名字一毛一样。ajax就像电话一样，将页面和服务器联系在一起，基...
-
前端开发规范：命名规范、html规范、css规范、js规范
一个好的程序员肯定是要能书写可维护的代码，而不是一次性的代码，怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢，这就需要规范你的代码了。我是有一点强迫症的人，上周我们后端给我了一个CanUsename的接口（该接口的目的是判断输入的目的地是否是4级目的地），我真的是崩溃的。我只是觉得这个名字不够语义化，但是让我自己想一个名字我又想不出来，于是我就在想，如...
-
CSS3动画解析抖音 LOGO制作
前言“字节跳动”现今也是如日中天，旗下产品，除头条外，还有短视频平台“抖音”，人气也是非常高，据说拥有7亿用户。今天我们就来研究研究抖音的logo，蹭蹭热度。效果预览：CSS3动画解析抖音 LOGO制作主要用css3新增属性mix-blend-mode，混合模式来实现。分解我们先来看看它的组成，由大写的“J”组成，然后有3种颜色，白色、红色、和天蓝色。ok，我们先来完成一个“J...
-
Ant Design 4.1.0 发布，涉及30多项内容
前言Ant Design 4.1.0 发布了。Ant Design 是阿里开源的一套企业级的 UI 设计语言和 React 实现，使用 TypeScript 构建，提供完整的类型定义文件，自带提炼自企业级中后台产品的交互语言和视觉风格、开箱即用的高质量 React 组件与全链路开发和设计工具体系。更新内容此版本更新内容：1、支持紧凑模式主题。#22126 @AshoneA2、新...
-
React Native 0.62 发布，默认支持 Flipper，新的暗黑模式
前言ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以<View&...
-
好看又好用，这 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。我个人认为，虽然前后端分离的模式很好的解决了后端统一的问题，但是相对来说，如果大量的重复数据或者一些基础数据每次都通过请求服务器来说无疑是对服务器资源的一种浪费，既然浏览器提供了...
-
Github非常惊艳的轻量级开源动画引擎——Animejs
介绍Anime.js是一个轻量级的JavaScript动画库，具有简单但功能强大的API。它与CSS属性，SVG，DOM属性和JavaScript对象一起使用。Github在Github上已收获近35k的star数，可见其非常受广大使用者的热爱！https://github.com/juliangarnier/anime/特性复杂的交错动画变得简单css分层转换在单个HTML元...
-
HTML5 的JavaScript 客户端PDF解决方案——jsPDF
介绍和往常一样，jsPDF是一个开源的客户端的PDF解决方案，在之前的文章中已经介绍过几个Web端和PDF相关的库，jsPDF同样是一个不错的客户端PDF引 SDK，你可以通过jsPDF在客户端完成相关操作，它包含了非常丰富的API，帮助你完成一系列的复杂操作！可以说它是相当领先的HTML5客户端解决方案了！Githubhttps://github.com/MrRio/jsPD...
-
都说Vue好，但是我自己用起来很难受
大前端时代，三大前端框架占据了大半的江山。几年前大家都还是jQuery做前端开发，但是到了现在，做后台管理系统，聪明上进的前端都开始使用angular、vue、react三大框架作为开发框架。特别是Vue，国内非常火爆，最主要的是中国人数众多，程序员也是众多。我作为一个前后端都需要开发的创业小公司程序员，三大框架都涉及，且都在使用。最喜欢的还是angular，最不喜欢的是Vue...
-
面向纯JavaScript的OCR识别引擎——Tesseract.js
介绍Tesseract.js是流行的面向纯Javascript的OCR引擎的。该库支持100多种语言（中文支持），自动文本方向和脚本检测，用于读取段落，单词和字符边界框的简单界面。Tesseract.js可以在浏览器和具有NodeJS服务器上运行。Githubhttps://github.com/naptha/tesseract.js使用方式# For v2版本npm inst...
-
JavaScript 中，5 种增加代码可读性的最佳实践
为了保证的可读性，本文采用意译而非直译。简介如果咱们关注代码本身结构及可读笥，而不是只关心它是否能工作，那么咱们写代码是有一定的水准。专业开发人员将为未来的自己和“其他人”编写代码，而不仅仅只编写能应付当前工作的代码。在此基础上，可读性高的代码可以定义为自解释的、易于人理解的、易于更改或扩展的代码。以下列表一些好编写方式，仅供参考，当然，如果你有更好的方式，欢迎留言。以下的方式...
-
腾讯发布硬件版微信WeChatBox
2020年4月1日，腾讯公司发布了一个名为WeChat Box的硬件产品，这是腾讯公司成立以来发布的首个硬件产品。WeChat Box采用了一个非常微型的操作系统，操作系统上仅有一个应用程序，即机器版微信。该产品的发布，被认为是腾讯走向操作系统研发的开始。WeChat Box内置了多种自动化产品的驱动，该产品主要市场为机械设备领域，据悉，自动化产品驱动的供应商为美国PTC旗下的...
-
Web开发实用的图片预览插件，简单零依赖——PhotoSwipe
介绍PhotoSwipe是一个JavaScript库，没有依赖项。要说唯一的依赖项那就是Vanilla.js（原生js）,因此你可以在你的任何Web项目中使用，包括主流的Vue、React、Angular以及传统jQuery的项目。PhotoSwipe可以被用到各种大中小型项目当中，并且PC和移动端完美支持！Githubhttps://github.com/dimsemenov...