JavaScript
文章平均质量分 61
AndyQsmart
自由职业者
展开
-
Ajax跨域请求的两种实现方式
最近网站新增了一个域名B用于分离不同的功能。但是需要复用服务器的高防等服务,但是服务和原有域名A绑定,所以新域名B需要直接去调用域名A。一开始想使用CNAME的方式,让B直接指向A。但是Https支持性有点问题,需要多域名证书。也考虑过反向代理,但是代理服务器的性能和高防等又是一个问题。最终决定在域名B的网页中,所有请求都直接去调用域名A的接口。于是就遇到了跨域请求的问题。网上找了许多资料来实现跨域请求。最终预估下来,有两种方案比较靠谱:通过iframe实现和CORS方案初步设想是加载一个域名A的ifram原创 2022-06-24 12:00:38 · 671 阅读 · 1 评论 -
JS在浏览器中base64、url、blob互相转换
公众号:程序员波波在平时开发的时候,我们在处理文件,尤其是图片的时候,经常会跟base64、url、blob(file)这三种形式的内容打交道。base64格式一般都是以data:image/jpeg;base64,这种类似形式打头的一串很长的字符串。url一般以服务器地址或者路径(形如http://xxx.jpg或者/static/xxx.jpg)为主,也会有浏览器本地地址(形如...原创 2019-11-15 10:40:43 · 13316 阅读 · 1 评论 -
JS扩展运算符巧用
公众号:程序员波波JavaScript中es6里面有一个扩展运算符...感觉十分方便。和Python中的*、**有点类型。...的作用是展开一个对象或者数组中的数据,比如:let a = [1, 2, 3]let b = [2, ...a, 4] // b = [2, 1, 2, 3, 4]sum(...a) <=> sum(1, 2, 3)let x = ...原创 2019-11-12 10:01:59 · 204 阅读 · 0 评论 -
[React组件封装][优化]文件选择按钮(解决安卓下type为file的input标签不触发onChange的问题)
公众号:程序员波波之前已经写过“[React组件封装][实例]文件选择按钮组件封装”这篇文章。目的是封装一个文件选择按钮。但是在真正运用的时候发现,还是存在问题的。主要是安卓端的微信浏览器input标签不触发onChange函数。在经过一些查阅后,发现可能原因是安卓端的WebView不支持input标签为file,不会触发onChange,而微信安卓端使用了WebView,所以会有...原创 2019-11-12 09:56:05 · 812 阅读 · 1 评论 -
[React组件封装][实例]不受控组件变成受控组件
公众号:程序员波波开发中可能会用到一些第三方的组件或者是早期开发的组件,而这些组件并不受控。就是说组件内部维护了state或者内部修改了一下数据,导致组件的状态并不是由props来定义的。所以我们希望通过封装一层,来使得组件变得受控。步骤:1、首先我们需要知道组件的状态是由哪些变量定义的。(比如富文本的状态是由富文本的内容定义的)2、然后封装一层受控组件,受控组件通过pro...原创 2019-09-16 14:20:03 · 541 阅读 · 0 评论 -
[React组件封装][实例]懒加载切换视图组件
公众号:程序员波波在开发过程中会遇到一种需求,就是在一块视图区域,可能需要根据不同的状态展示不同的组件。但是如果单纯的只根据状态显示相应的组件,那么其他未显示组件的内部状态可能就无法保存了。当然如果外部组件保存了它们所有组件的所需要的所有状态变量,那么就另当别论了。(scrollTop这类的状态可能保存起来比较麻烦)所以想要封装一个组件。可以根据需求显示不同的组件,但是能维持组...原创 2019-09-16 14:19:47 · 311 阅读 · 0 评论 -
[React组件封装][实例]文件选择按钮组件封装
公众号:程序员波波文件选择器是我们经常会使用到的,一般都是通过点击某个按钮然后选取文件。所以封装一个文件选择按钮还是有必要的。首先,这个按钮使用起来必须和普通按钮一模一样,否则就失去了封装的意义。其次也要基本符合我[基础]中讲到的几点。于是(注意在chrome中使用image/*会很慢):(基础版本)import React, { PureComponent } fr...原创 2019-09-16 14:19:28 · 1778 阅读 · 0 评论 -
[React组件封装][实例]FontAwesome图标组件封装
公众号:程序员波波FontAwesome是前端开发常用了一种图标字体。在React中使用可以使用对应的库,但是感觉不怎么好用。另一种方式就是通过import 'font-awesome.min.css',然后<i class="fa fa-times" ></i>这种使用方式缺点是每次需要引入font-awesome.min.css,但是如果忘记...原创 2019-09-16 14:19:09 · 528 阅读 · 0 评论 -
[React组件封装][基础]对于React组件封装的注意点
接触React也有一段时间了,从刚开始jquery式地去使用React,到慢慢走上正轨,还是经过了不少学习的。从开发过程中,遇到的组件大概有两类:UI类、工具类。UI类顾名思义就是能看得到的UI,这些组件一般就是按照需要渲染成相应的样子。工具类是一类虽然看上去好像什么东西都不渲染,但是却需要写在render中作为组件加载才能使用。(无法通过传统对象或者类方法之类实现)作为一个组件,...原创 2019-09-16 14:17:32 · 1588 阅读 · 0 评论 -
JS深拷贝和深比较
公众号:程序员波波JS中对于对象类型(包括数组和字典),赋值效果和C++中指针一样,都是指向了同一块内存的对象,所以修改操作相当于是连带的,如果b={x1, x2, x3};a = b那么修改a.x1,最终打印出来的b.x1也会变化,因为没有新的对象生成,它们指向的都是同一个对象。但是对于基本类型number,string,它们的赋值就是相当于拷贝,两个变量是独立的。说白了...原创 2019-03-22 10:18:34 · 510 阅读 · 0 评论 -
JS优先队列
公众号:程序员波波基于数据结构中堆可实现优先队列。此处仅贴代码记录一下:// 优先级大的排在前面class PriorityQueue { // 构造函数,传入优先级比较函数 constructor(cmp_func) { if (cmp_func) { this._cmp_func = cmp_func ...原创 2019-01-14 18:08:05 · 480 阅读 · 0 评论 -
JS浏览器数据库
公众号:程序员波波最近做功能需要浏览器自己备份一份数据,但是本地数据还需要支持条件查询。于是,查找了一下是否有浏览器数据库这种东西。发现了Web SQL和IndexedDB这两个东西,前者是关系型数据库,后者是NoSQL类型的。因为功能需要关系型查询,所以准备选用前者,但是前者兼容性有问题,而且不是标准的规范,而且停止了更新。实践了一下发现Web SQL在火狐等浏览器上确实是不支持...原创 2018-09-07 15:10:51 · 1365 阅读 · 0 评论 -
JS中实现函数在指定时间内单次执行
公众号:程序员波波在项目开发过程中遇到过这样一个情景需求:某一个函数延迟t时间执行,但是在短时间内多次触发延时执行的时候,只会执行最后一次的延时执行。比如:我在某个k时刻,希望函数A在t时刻后执行。然后在k+t1(t1<t)时刻又希望函数A在t时刻后执行。那么函数A最终仅会在k+t1+t时刻的时候执行一次。类似于函数A的延时操作可以被重置的效果。实现方法有很多...原创 2018-08-27 14:45:36 · 3036 阅读 · 0 评论 -
React通过反射动态加载自定义组件
公众号:程序员波波最近在写一个类似于页面编辑器的工具。一般来说,可视化的编辑器,是通过拖拽已有组件,然后设置组件的属性,来完成一个编辑的过程。然后在开发过程中遇到了一些问题,在此记录一下。首先编辑器的开发在这就不多提了。说重点,在开发中遇到了对于生成的自定义数据,然后需要通过数据来动态加载组件(因为某个编辑生成的页面,不一定包含所有自定义组件,在预览页面只需要加载用到的组件...原创 2018-06-14 19:06:32 · 8023 阅读 · 2 评论