前端
分享一下自己学习前端以及对前端部分的理解。
unique_Lee
路漫漫其修遠兮,吾將上下而求索。
展开
-
leetCode11题:Container With Most Water
给你 n 个非负整数 a1,a2,…,an,每个数代表坐标中的一个点 (i, ai) 。在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0)。找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。1.直接处理,所谓的暴力解题法:/** * @param {number[]} height * @return {number} */var maxArea = function(height) { var area = 0; for(原创 2020-06-12 18:56:37 · 127 阅读 · 0 评论 -
JS函数节流和分时函数
函数节流和分时函数是JS 高阶函数的两种具体应用场景,它们都是将函数作为返回值 return 到函数外部。JS函数节流函数节流就是降低函数被调用的频率,主要是针对 DOM 事件暴露出的问题提出的一种解决方案。例如,使用 resize、mousemove、mouseover、mouseout、keydown、keyup 等事件,都会频繁的触发事件。如果这些事件的处理函数中包含大量耗时操作,如 Ajax 请求、数据库查询、DOM 遍历等,则可能会让浏览器崩溃,严重影响用户体验。例如,在大型网点平台的.转载 2020-05-17 08:02:22 · 244 阅读 · 0 评论 -
nw (node-webkit) 应用在win7上黑屏
在本地机器开发时,应用正常,没任何问题,部署的时候,打开应用黑屏。我用的版本是目前最新的v0.45.4。 因为之前就用过,怀疑是版本的问题,用之前的版本试一下,发现v0.37之前的没有问题。 如果你还是选择使用v0.37版本之后的,需要在package.json中增加设置:"chromium-args": "--disable-gpu"。 可能有人质疑为何不...原创 2020-04-29 11:26:47 · 1728 阅读 · 0 评论 -
pdf.js不显示签名问题
原文件有签名,但是使用pdf.js查看的时候签名不显示:通过F12发现是:Warning: Unimplemented widget field type "Sig", falling back to base field type.解析的问题。修改代码:pdf.worker.js 找到//if(data.fieldType==='Sig'){//_th...原创 2020-04-22 14:33:52 · 7226 阅读 · 2 评论 -
React 项目打包后文件体积过大,网页加载速度慢的问题。(gzip的使用)
react项目中利用dva脚手架,roadhog打包工具打包后只生成了一个index.css 和 index.js 。所有的 js文件 都打包在了一个 index.js 文件中,所以这个文件有1.1M。部署到服务器上,首次访问首页加载的会特别慢,这样会流失很多的用户。解决办法: gzip 压缩。GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来...转载 2020-02-22 16:00:07 · 2632 阅读 · 0 评论 -
roadhog打包过大
维护之前的项目,使用的antd pro,当时antd依赖roadhog来构建,打包时发现打出的包很大。如下:打完后提示我打包过大,这样的代码部署到服务器之后,浏览器加载首页时,会非常慢,需要分包,下面说一下分包的过程。主要修改的内容就是.webpackrc.js中的配置:const path = require('path');export default { entry: ...原创 2020-02-22 15:54:07 · 1602 阅读 · 4 评论 -
js获取距离屏幕的坐标
首先计算js距离浏览器窗口的坐标:let X = $('#test').offset().left + window.screenLeft;let Y = $('#test').offset().top;再计算浏览器距离屏幕的宽和高,通过window.screenLeft和window.screenTop获取浏览器距离屏幕的偏移量;两者相加就可以得到距离屏幕的坐标:let X...原创 2019-01-07 16:41:18 · 5162 阅读 · 0 评论 -
pdf.js禁掉下载和打印的功能
关于pdf.js如何禁掉下载和打印等功能,我处理的比较简单粗暴,如引起不适反应,请在评论区指正。就是这两个按钮。打开viewer.html,搜索download,将按钮直接设置成style='display:none'重新运行。收工,额,有些简单粗暴了点。...原创 2018-12-13 15:09:11 · 5933 阅读 · 8 评论 -
js中encodeURI和encodeURIComponent的区别
encodeURI和encodeURIComponent都是对url的编码。对URL编码是常见的事,所以这两个方法应该是实际中要特别注意的。它们都是编码URL,唯一区别就是编码的字符范围了:encodeURI方法不会对下列字符编码ASCII字母、数字、~!@#$&*()=:/,;?+'encodeURIComponent方法不会对下列字符编码ASCII字母、数字、~!...原创 2018-12-13 11:05:46 · 5468 阅读 · 1 评论 -
file origin does not match viewer's
使用pdf.js时,当有跨域的问题时,会加载失败,错误信息为file origin does not match viewer's。修改起来简单粗暴。直接注释掉web/viewer.js中的1564到1566这几行,不去判断跨域即可。if (origin !== viewerOrigin && protocol !== 'blob:') { throw new...原创 2018-12-13 10:58:48 · 15701 阅读 · 3 评论 -
jquery tmpl显示图片
使用jquery.tmpl.js模版显示数据,网上有很多详细的介绍,就不再多说了,主要的说一下显示图片的问题,发现没有文章提及到。先说一下自己遇到的问题吧,我在展示一个url的图片时,展示图片过多的时候,通过滚动条滚动之后,图片的src会获取不到url的值,图片无法显示。解决方案:本地图片使用如下:<img src='${url}' alt=""/>网络图片使用如...原创 2018-10-23 11:03:10 · 478 阅读 · 0 评论 -
获取姓氏(姓和名),判断复姓
提供一个姓氏的方法,返回姓和名。export const getFirstName = (fullname: string) => { let hyphenated = ['欧阳', '太史', '端木', '上官', '司马', '东方', '独孤', '南宫', '万俟', '闻人', '夏侯', '诸葛', '尉迟', '公...原创 2018-09-17 16:00:03 · 7062 阅读 · 0 评论 -
Ant Design内网环境下显示图标,antd 显示离线包内容
在做react开发时,遇到了打包后,页面不显示小图标的问题,去查看结果方案,发现大部分朋友提供的方案都是要去修改node-modules里面的内容,或者改打好包的bundle.js的内容,个人觉得这些解决方式不够简单,除了两种情况之外,你可以使用这些方案;1.整个项目你自己开发,不需要和其他人沟通;2.实在找不到其他解决方案了,而且这个问题很着急。其他情况很不建议这么做,...原创 2018-09-11 11:07:43 · 2897 阅读 · 0 评论 -
js检验台湾身份证是否合法
中国台湾地区的身份证称为“国民身份证”,号码一共有10位,第1位是大写的英文字母,后9位是阿拉伯数字。比如:U193683453。一、地区编码 第一位大写的英文字母是地区编码,代表初次登记的户籍所在地,比如,U代码花莲县。每个地区编码还对应有一个两位数的验证码,用于公式验证。台湾的所有地区编码和验证码如下: 英文 县市 / 地区 验证码(数字) A 台北市 10 B 台中市 11 C 基隆原创 2016-11-01 10:22:31 · 1935 阅读 · 0 评论 -
快应用搭建
从20号快应用的发布到现在已经过去三四天了,简单的学习了一下快应用,今天来分享一下,微信小程序刚刚发布的时候,我不是特别的看好,主要是开发小程序的厂商并不多,而且微信刚开始支持的力度比较一般。随着近期“跳一跳”、“答题”、“H5游戏”的火爆,现在身边的人越来越多的开始关注微信小程序了。20号,9大厂商发布快应用,颇有“9大门派围攻光明顶之势”。所以就来学习一下,html + css...原创 2018-03-24 09:44:16 · 4259 阅读 · 5 评论 -
css艺术字效果,渐变字
实现的原理是利用CSS3的text-shadow属性,对文字的四个边均用阴影。text-shadow属性:语法:text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*上干货:<!doctype html><html lang="en"> <head> <met原创 2017-05-16 15:19:47 · 15504 阅读 · 0 评论 -
优雅降级和渐进增强的区别
随着前端的发展越来越繁荣,现在出现的概念性的越来越多,下面来介绍一下优雅降级和渐进增强的区别。优雅降级:项目开始就构建站点的完整功能,然后针对浏览器测试和修复。对低版本的浏览器就行兼容性的修复。渐进增强:项目开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。渐进增强相当于向上兼容,而优雅降级相当于向下兼容。向下兼容指的是高版原创 2017-07-25 10:56:43 · 2029 阅读 · 0 评论 -
Typescript引入css文件时,找不到css模块
typescript比较适合大型的项目,所以为了就开始自学typescript,遇到的问题还是挺多的,遇到了“Typescript引入css文件时,找不到css模块”,郁闷了好久,最好翻墙出去找到了解决的方案,英文比较简单,我就不去卖弄自己的翻译了,亲测好使。希望可以帮助到同样有问题的朋友。如果有解决不了的朋友,可以留言,愿尽力帮忙。Using CSS Modules with T翻译 2018-01-22 19:49:24 · 16707 阅读 · 1 评论 -
使用webpack打包vue工程
最近在研究vue.js,在react中使用的webpack,vue的官网安装的demo工程默认就可以创建webpack的依赖。 下面地址可以安装https://cn.vuejs.org/v2/guide/installation.html。 文件解释: build中配置了webpack的基本配置、开发环境配置、生产环境配置 config中配置了路径端口值等 n原创 2017-05-27 12:13:40 · 10439 阅读 · 0 评论 -
延迟加载js文件
关于延迟加载js文件的几种方式:1.使用setTimeout的方式进行延迟加载 <script type="text/javascript"> function test(){ alert("test"); } setTimeout(test,2000) </script>2.引入的js文件加载到</body>前,不要放在<head></head>标签内原创 2017-04-27 12:39:00 · 3918 阅读 · 0 评论 -
js中数组去重的方法
最近在研究vue.js,在react中使用的webpack,vue的官网安装的demo工程默认就可以创建webpack的依赖。下面地址可以安装https://cn.vuejs.org/v2/guide/installation.html。 文件解释: build中配置了webpack的基本配置、开发环境配置、生产环境配置 config中配置了路径端口值等 node_m原创 2017-06-16 11:45:40 · 2610 阅读 · 1 评论 -
快速排序(Quicksort)的Javascript实现
关于快排算法的详细说明,可以参考文章快速排序"快速排序"的思想很简单,整个排序过程只需要三步:(1)在数据集之中,选择一个元素作为"基准"(pivot)。(2)所有小于"基准"的元素,都移到"基准"的左边;所有大于"基准"的元素,都移到"基准"的右边。(3)对"基准"左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。var quickSort = f转载 2017-06-27 17:49:39 · 306 阅读 · 0 评论 -
IE8中parseInt的坑
做项目时用到parseInt方法,parseInt() 函数可解析一个字符串,并返回一个整数。项目需要兼容IE6以上的所有版本,在其他的IE版本中测试没有问题, 使用IE8的时候,出现了某个数据始终是0的结果,该数据在其他浏览器中没有问题。例如:在其他的版本中是没问题的:然后又去了解parseInt函数,发现了新的说明。其他的浏览器版本,应该是默认的10,在IE原创 2017-06-28 16:43:47 · 3282 阅读 · 0 评论 -
javascript使用冒泡法排序(并去重)
冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法。它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。 冒泡排序算法的运作如下:(从后往前)1.比较相邻的元素。如果第一个比第二个大,就交换他们两个。2.对每一对相邻元素作同样的工作,从开始原创 2017-07-27 17:46:57 · 2139 阅读 · 0 评论 -
react引入js插件
我们在写react项目的时候,有时候需要引入js的插件,下面介绍一下我们如何使用模块的方法引入一个js插件。首先在js库的开始加上如果js库有引用jquery的话,在开头加上const $ = require('jquery')。在js库的尾部加上,现在就可以在组件中使用import了;import answerSheet from './answersheet原创 2018-02-01 21:45:38 · 20549 阅读 · 0 评论