![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端点滴知识
弹琴弹琴
这个作者很懒,什么都没留下…
展开
-
推荐 9 个 GitHub 上练手项目(在线考试、仿美团、仿抖音、仿B站、仿头条...)
GitHub项目推荐 推荐的这几个 GitHub 项目并不是简单的 XX 管理系统,我会从下面这些方向推荐几个入门级别但是不那么 Low 的项目。 “我自己是一名从事了6年web前端开发的老程序员,今年年初我花了一个月整理了一份最适合2021年自学的web前端全套培训教程(视频+源码+笔记+项目实战),从最基础的HTML+CSS+JS到移动端HTML5以及各种框架和新技术都有整理,打包给每一位前端小伙伴,这里是前端学习者聚集地,欢迎初学和进阶中的小伙伴...转载 2022-04-06 09:28:58 · 3821 阅读 · 0 评论 -
推荐一个键盘快捷键库Mousetrap
官网:Mousetrap - Keyboard shortcuts in JavascriptMousetrap is a simple keyboard shortcut/event library written in Javascript.https://craig.is/killing/mice原创 2021-12-20 11:44:44 · 312 阅读 · 0 评论 -
Nginx 最全操作总结
本文将会从:安装 -> 全局配置 -> 常用的各种配置 来书写,其中常用配置写的炒鸡详细,需要的童鞋可以直接滑倒相应的位置查看。 安装 nginx 下载 nginx 的压缩包文件到根目录,官网下载地址:http://nginx.org/download/nginx-x.xx.xx.tar.gz yum update #更新系统软件cd /wget nginx.org/download/nginx-1.17.2.tar.gz 解压 tar.gz...转载 2021-10-20 09:19:39 · 1297 阅读 · 0 评论 -
几张图让你看懂WebAssembly
(图片来源:giphy.com)编者按:本文由明非在众成翻译平台上翻译。最近,WebAssembly 在 JavaScript 圈非常的火!人们都在谈论它多么多么快,怎样怎样改变 Web 开发领域。但是没有人讲他到底为什么那么快。在这篇文章里,我将会帮你了解 WebAssembly 到底为什么那么快。第一,我们需要知道它到底是什么!WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。当大家谈论起 WebAssembly 时,...转载 2021-07-14 09:48:24 · 189 阅读 · 0 评论 -
推荐一个最好用的IP地址工具
官网:https://www.ipaddress.com/原创 2021-03-17 09:09:16 · 1906 阅读 · 0 评论 -
js获取当前周、上一周、下一周日期
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>日历操作</title> <script> window.onload = function(.转载 2021-02-03 11:55:46 · 2374 阅读 · 0 评论 -
前端必须注意的40条移动端H5坑位指南
前言不知不觉在网易已有三年半,占了一半时间都在与移动端打交道,整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固标准和未知特性多得难以快速掌握。三年半沉淀通过本文记录下所遇到的坑位,或许有些坑位还未遇到,但本文记录的40条坑位绝对能让同学们少走很多弯路,特别是前端小白。为了减少废话提高本文质量,对以下内容做一些约定。提及的安卓系统包转载 2021-01-28 09:33:05 · 670 阅读 · 0 评论 -
搭建前端脚手架
1.什么是脚手架脚手架用于快速生成新项目的目录模板,并集成一系列体系化工具的安装,无需自己从零开始一步步配置,减少copy操作,有效提升开发体验和效率,尽管这些脚手架非常优秀,但是未必是符合我们的实际应用的,所以我们可以定制一个属于自己的脚手架,来提升自己的开发效率。平时我们在开发React-Native的时候就会使用到raect-native-cli这个脚手架为我们创建项目脚手架的作用减少重复性的工作,不需要复制其他项目再删除无关代码,或者从零创建一个项目和文件。 可...转载 2020-12-29 10:30:59 · 1386 阅读 · 0 评论 -
前端性能监控
根据W3C性能小组引入的新的API(目前IE9以上的浏览器)--window.performance,实现前端性能监控以下是fast3G情况下数据展示使用方法:将下面函数引入到index.html文件 每次切换页面即可读取到信息,最好是放在打包上线后的文件中,这样可以读取dns,tcp解析时间。各个阶段图示以下是函数封装(function () { handleAddListener('load', getTiming) function handleA转载 2020-12-29 09:42:47 · 129 阅读 · 0 评论 -
移动端适配及PC端适配心得总结体会(二) (可能比较全
移动端适配及PC端适配心得总结体会(一) (可能比较全写在之前,3年前端开发经验,刚开始对于适配的概念就是只知rem,对于各种成型的布局方式或者适配想法,都是很模糊的,没有体系的概念, 所以做了一些功课,也参考了许多优秀博文~ 欢迎补充~指路下篇~ ☞ 移动端适配及PC端适配心得总结体会(二) (可能比较全1.相关概念1像素1.像素像素就是构成图像的最小单位,指显示屏上的最小单位,图像由像素组成,单位面积内的像素越多 效果就越好像素的大小不是绝对的,是根据设备的分辨率决定的2.分辨率转载 2020-10-22 10:23:41 · 3971 阅读 · 0 评论 -
移动端适配及PC端适配心得总结体会(一) (可能比较全
1.相关概念1像素1.像素像素就是构成图像的最小单位,指显示屏上的最小单位, 图像由像素组成,单位面积内的像素越多 效果就越好 像素的大小不是绝对的,是根据设备的分辨率决定的2.分辨率屏幕分辨率 : 屏幕横向和纵向的像素点数,单位为px相同大小的屏幕 分辨率越低,单位像素尺寸越大,分辨率越高,单位像素尺寸越小图像分辨率 : 指图片含有的像素数 , 表示图片分别在垂直和水平上所具有的像素点数同一尺寸的图片,分辨率越高,图片越清晰。3.PPI每英寸包括的像素数转载 2020-10-22 10:20:38 · 5681 阅读 · 0 评论 -
PC端、移动端Video自动播放兼容完美解决方案(IOS、安卓、微信端)
最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配自动播放兼容,这些问题很是头疼;得到这个需求后,开始查看各个大厂的移动端网站,发现很少有官网在移动端使用视频当做背景;正当手足无措时,无意中看到了滴滴的移动端官网,大家可以查看下图,这个我们看似是视频的背景,其实是由300多张图片组动态更换图片的src组成的;滴滴移动端网站(PC需要F12打开控制台 -> Ctrl + Shift + M 切换到移动端)这时候会有同学问:为什么不直接放一.转载 2020-09-08 10:01:54 · 5975 阅读 · 1 评论 -
由file.type为空字符串或没有读取到文件类型
今天项目上遇到了一个问题,用户需要导入一个从我们服务器上下载的EXCEL文件,前端根据获取到的文件的type属性进行判断是否可以上传["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "application/vnd.ms-excel"],但是在某一个用户的电脑上却出现了通过获取到的file对象中,type属性为"",于是开始找各种资料希望了解浏览器是如何获取这个type属性的,为什么同一个文件不同的电脑获取到的属性不一转载 2020-07-09 17:08:16 · 1643 阅读 · 0 评论 -
nginx实现跨域访问并支持(GET, POST,PUT,DELETE, OPTIONS)
最近有同事提出在使用客户端跨域访问的时候,发现服务器对option请求返回了403,后来查看了网络添加了一段配置,发现option服务返回204了,但是后续的put操作也直接返回了204导致无法使用图片上传功能,经过一番查询才发现,原来put等请求也需要定义,不然会直接使用option那段配置的请求#首先nginx需要支持dav_module模块 1 ./configure --prefix=/home/zqlx/apps/usr/webserver/nginx-1.转载 2020-06-29 14:31:07 · 5120 阅读 · 1 评论 -
vue中使用文件流进行下载(new Blob),不打开一个新页面下载
exportfunctiondownload(url,params,filename){Message.warning('导出数据中')returnaxios.get(url,{params:params,responseType:'arraybuffer',}).then((r)=>{constcontent=r.dataconstblob=newBlob([content],{type:'...原创 2020-06-05 14:05:41 · 5204 阅读 · 2 评论 -
前端高级进阶:前端部署的发展历程
前端一说起刀耕火种,那肯定紧随着前端工程化这一话题。随着 react/vue/angular,es6+,webpack,babel,typescript 以及 node 的发展,前端已经在逐渐替代过去 script 引 cdn 开发的方式了,掀起了工程化这一大浪潮。得益于工程化的发展与开源社区的良好生态,前端应用的可用性与效率得到了很大提高。前端以前是刀耕火种,那前端应用部署在以前也是刀耕火种...转载 2020-03-13 09:11:59 · 348 阅读 · 0 评论 -
如何在Github上面精准搜索开源项目?
很多的小伙伴,经常会有这样的困惑,我看了很多技术的学习文档、书籍、甚至视频,我想动手实践,于是我打开了GitHub,想找个开源项目,进行学习,获取项目实战经验。这个时候很多小伙伴就会面临这样的问题:“我不会搜啊,我该怎么找呀?”,最终只能放弃。相信看完这篇文章,你就可以学会如何精准地在GitHub搜索项目。开源项目的组成部分在讲清楚之前呢,我们先来了解一下一个开源项目有哪些组成部分:n...转载 2020-02-28 09:10:50 · 1046 阅读 · 0 评论 -
浅谈JIT&AOT
这是一篇给自己脑补的笔记!想必很多Android用户已经在自己各种设备上使用Android L了。自己年初在淘宝上¥1200进了nexus5,系统早早的升级到Android L,不得不说Nexus是一个非常非常棒的手机。Android L与之前Android KK的对比,Dalvik虚拟机已经在L中移除,ART(Android run time)在kk的时候作为Optional,现在已经正...转载 2020-02-21 09:34:55 · 439 阅读 · 0 评论 -
常见的跨域解决方案(全)
什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:资源跳转: A链接、重定向、表单提交 资源嵌入: link、script、img、frame等dom标签,还有样式中background:url()、@font-face()等文件外链 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的,是...转载 2020-01-05 09:39:02 · 272 阅读 · 0 评论 -
Jest 测试框架
jest 是facebook推出的一款测试框架,集成了 Mocha,chai,jsdom,sinon等功能。安装与配置npm install --save-dev jestnpm install -g jest运行命令 jest 后会自动运行项目下所有.test.js和.spec.js这种格式的文件。涉及到运用 ES 或 react 的,要与babel相结合,加上.babe...转载 2019-12-19 09:16:04 · 1021 阅读 · 0 评论 -
vue视频播放插件vue-video-player
安装npm install vue-video-player --save复制代码引入可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一)【1】全局引用, 在main.js里面导入并引用 import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme....转载 2019-11-08 09:23:50 · 990 阅读 · 1 评论 -
可能是最全的 “文本溢出截断省略” 方案合集
前言在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断判断是基于行数还是基于高度?这些问题之下,都有哪些实现方案?他们之间的差异性和场景适应性又是如何?凡事就怕较真,较真必有成长。本文试图通过编码实践,给出一些答案。先来点基础的,单行文本溢出省略核心 CSS 语句overf...转载 2019-11-06 09:15:46 · 197 阅读 · 0 评论 -
【手把手】15分钟搭一个企业级脚手架
1 写在前面的话搭一个脚手架,考验了你的 nodejs 水平、工程化能力、以及工具服务的设计能力,是前端进阶不可或缺的过程笔者在开发 cli 的过程中,调研流行的 cli 并形成最佳实践,本文旨在用最短的篇幅实现主要功能,揭露核心原理,同时提供 demo 仓库与大家学习探讨。通篇阅读大约需要 10 分钟,基于本教程自己撸一个 cli 大约需要花费 15 分钟仓库清单:文章博客 | 脚手...转载 2019-11-04 09:20:57 · 300 阅读 · 0 评论 -
将本地项目、代码添加到github上
github一个面向开源及私有软件项目的托管平台,是每个程序员必须要掌握的,本文对将本地项目或者代码添加到Github上步骤进行了整理,方便自己查阅,希望对小伙伴有所帮助!将本地项目添加到github上(方法一)1,在github上创建一个新仓库2,复制刚创建的项目git地址3,git init初始化相当于再项目的更...转载 2019-10-24 09:26:35 · 1007 阅读 · 0 评论 -
干货!各种常见布局实现+知名网站实例分析
各种页面常见布局+知名网站实例分析+相关阅读推荐阅前必看:本文总结了各种常见的布局实现,每个方法的优缺点分析往后在github上陆续补充。还有就是这篇文章没提到的其他布局,待本人后续想到或遇到定会在github上及时更新。由于文章篇幅较长,排版有些混乱,希望别介意哈。掘金PC端是会自动生成目录的,为了方便移动端阅读,还特意做了个锚点目录,一个个标题重写,真心累!(==后来发现掘金对文章的标题经...转载 2019-10-12 10:24:11 · 5672 阅读 · 0 评论 -
单屏页面响应式适配玩法
首先瞅一下效果图接着就是思考怎么做,我的想法如下图。把公共的页头、页脚、导航栏、边框放到最顶层,比方说设置层级为999,其他每个独立页则放在下面,然后切换页面的时候更新独立页的层级以达到效果图的效果(当然不能超过最顶层)。适配上面的方式已经把效果做出来了,接下来就是响应式适配了。1、Mac OS + Chrome先考虑一下我自己的系统及显示器,MacBo...转载 2019-03-26 14:49:54 · 896 阅读 · 0 评论 -
详解 ESLint 规则,规范你的代码
在很久之前就想通过工具来规范自己的代码风格,减少程序出错的概率,如果看过我的一个前端程序猿的Sublime Text3的自我修养,这篇博客的朋友,肯定知道在当时我使用SublimeLinter-jshint插件来规范风格,但是实际上一直懒癌发作也没去看它的文档,使用着它默认的规则。不过现在是时候切换到 ESLint 了!作为一个有理想有抱负的前端工程师,只是使用默认规则,而不是...转载 2019-03-26 11:51:31 · 22934 阅读 · 0 评论 -
细数国内外的前端大牛
前言本文将枚举一些前端界内比较熟知的前端技术大牛,分为个人简介、技术博客、擅长领域几个方向,希望能对初步进入前端的人一些指引和学习的方向。以下排名不分先后,个人推荐需要了解的大牛有朴灵,尤雨溪,大漠,张鑫旭,阮一峰,wintercn等。国内玉伯简介玉伯(王保平),淘宝前端类库 KISSY、前端模块化开发框架SeaJS、前端基础类库Arale的创始人。2003-2006 年,中科...转载 2019-03-25 17:38:27 · 3270 阅读 · 0 评论 -
框架选择对照表
1.vue移动端: 1.vux 2.mint-ui 3.vant2.cnd方式移动端 1.aui 3.vue PC端: 1.element-ui 2.iView4.cnd方式PC端 1.SUI 2.bootstrap5.原创 2018-07-03 20:10:48 · 245 阅读 · 0 评论 -
可能这些是你想要的H5软键盘兼容方案
前言最近一段时间在做H5聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上。需求很明确,看似很简单,其实不然。从实验过一些机型上看,发现主要存在以下问题:在Android和IOS上,获知软键盘弹起和收起状态存在差异,且页面webview表现不同。 在IOS12上,微信版本v6.7.4及以上,输入框获取焦点,键盘弹起,页面(web...转载 2019-04-26 09:27:52 · 171 阅读 · 0 评论 -
关于移动端开发 1px 线的一些理解和解决办法
1px线变粗的原因在做移动端项目时,常常是根据设计图设置元素节点的大小和样式,但是有时候根据设计图写出来的样式还是不如人意,虽然表面上看起来和设计稿是一样的,可是就是没设计稿那种感觉,而且莫名还有一种山寨的气息,UI审查的时候也常常会觉得分割线或则边框线太粗了,要更细一点,但是一看代码,已经是1px了,为什么看着还是那么粗呢?要知道问题的原因首先要了解一下几个概念:(1)物理像素(ph...转载 2019-06-10 09:08:24 · 576 阅读 · 0 评论 -
CNTV视频深入挖掘分析
摘自Crazy Code:话说CNTV曾经有几个视频想要下载,才疏学浅,一直找不到原视频地址,在缓存中找文件的方法对CNTV不管用了。这两天再次分析了一下,虽然最终还是没能找到方法,但还是有点收获的。以http://bugu.cntv.cn/life/science/kejizhiguang/classpage/video/20100808/100432.shtml页面为例,先不要急着看源...转载 2019-09-10 09:11:01 · 1453 阅读 · 0 评论 -
移动 web 最佳实践(干货长文,建议收藏)
笔者在公司用 web 技术开发移动端应用已经有一年多的时间了,开始主要以 vue 技术栈配合 native 为主,目前演进成 vue + react native 技术架构,vue 主要负责开发 OA 业务,react native 主要负责即时通信部分,是在 mattermost-mobile 的基础上修改的(mattermost 是一个开源的即时通讯方案)。因为公司在这方面没有太多技术沉淀...转载 2019-09-24 09:11:45 · 484 阅读 · 0 评论 -
推荐一个社区infoq
官网:https://www.infoq.cn/原创 2019-03-13 18:01:21 · 788 阅读 · 1 评论 -
飞冰(ICE) 阿里家的前端图形化一键工具
官网:https://alibaba.github.io/ice原创 2019-03-20 14:47:22 · 1267 阅读 · 0 评论 -
大前端知识点和商业应用总结
参考:http://www.itcast.cn/subject/webzly/?jingjia-02-chuanzhi-qianduan-xin-pc-html5%2520canvasjiaocheng基于 Node.js 的前后端分离解决方案基于 Webpack 的前端模块化解决方案基于 JWT 的接口鉴权解决方案基于 EasyMock 的接口 Mock 解决方案基于...转载 2019-03-15 18:13:53 · 503 阅读 · 2 评论 -
关于前端开发谈谈单元测试
单元测试Unit Test很早就知道单元测试这样一个概念,但直到几个月前,我真正开始接触和使用它。究竟什么是单元测试?我想也许很多使用了很久的人也不一定能描述的十分清楚,所以写了这篇文章来尝试描述它的特征和原则,以帮助更多人。什么是单元测试?先来看看单元测试的定义,在维基百科英文版中可以找到Kolawa Adam在 Automated Defect Prevention: Best P...转载 2017-03-24 01:04:28 · 999 阅读 · 0 评论 -
微信WKWebview内核点返回,页面不刷新
ajax请求的时候延迟500毫秒加载,setTimeout(function(){},500) cache:flase;原创 2017-09-27 10:59:28 · 1467 阅读 · 0 评论 -
键盘回车事件导致页面刷新的问题
一个 Ajax 查询的功能,代码如下:[html] view plain copy<form name="keywordForm" method="post" action=""> <p id="profile_nav"> <label for="profile"> 关键字搜索: </转载 2017-12-21 10:39:15 · 800 阅读 · 0 评论 -
淘宝前端团队
淘宝大牛前端http://fex.baidu.com/原创 2017-12-26 14:51:16 · 1616 阅读 · 0 评论