前端相关
关注
分享
扫一扫
JS、TS、Ionic、Web App、原生开发、微信端等
阿敏Joney
温故而知新，再简单的东西也要亲自手写一遍~~~
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
手写JS的new操作符的功能、手写实现JS中Object类的call函数、apply函数的功能
手写JS的new操作符的功能、手写实现JS中Object类的call函数、apply函数的功能。原创 2023-11-07 14:16:25 · 188 阅读 · 0 评论 -
Vite构建的Vue3项目打包后dist文件夹放Nginx服务器访问添加上下文路径
Vue3项目打包后如何添加访问路径，vite.config.ts、Nginx如何配置原创 2023-07-11 14:31:35 · 4233 阅读 · 0 评论 -
Angular高版本中为自定义的独立class类添加显式的Angular装饰器
【代码】Angular高版本中为自定义的独立class类添加显式的Angular装饰器。原创 2022-11-21 18:18:59 · 1281 阅读 · 0 评论 -
javascript递归遍历文件夹下面的所有文件并返回所有文件全路径名称数组以及解析JavaScript方法体字符串的结束位置
前端脚本经常需要用到遍历指定文件夹下面的所有文件（包含子文件夹）的内容并做特定的逻辑处理，下面给出同步遍历的方式，开箱即用。main()function main() { let allFiles = getAllFiles(srcDir); console.log(`文件数量:${allFiles.length}`); for (let i = 0; i < allFiles.length; i++) { let filePath = allFiles[原创 2022-01-07 18:09:08 · 15676 阅读 · 0 评论 -
div内容居中和布局居中样式总结
1.div的内容居中（1）水平居中<div align="center"><button>按钮></button></div>CSS：div{ display: block; // div默认为块级元素，如果是第三方控件或继承父类元素不是block，则需要指定（必要时提高优先级） text-align: center;}（2）垂直居中设置line-height等于height即可（当line-height为原创 2020-12-21 11:24:34 · 703 阅读 · 0 评论 -
金额输入框校验和自动校正、支持指定任意位数小数decimal、支持只能输入整数、支持是否允许输入负数等功能
应用场景：开发前端交互页面时，经常遇到金额输入框、指定小数位数的数字输入框，单一的正则表达式无法满足大部分的业务校验需求，下面总结一个实用巧妙而又灵活的把普通输入框变成自动校正输入框的解决方案：数字（金额）输入框：输入金额：<input id="money">原生JS自动校正：let dom = document.getElementById("money");dom.addEventListener("input", function () { co...原创 2020-05-29 19:08:38 · 1891 阅读 · 0 评论 -
总结JSON.parse()报错VM71:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0等之类的问题
问题场景：在调试前端应用的时候经常出现形如“Uncaught SyntaxError: Unexpected”之类的令人头疼觉得莫名其妙的问题；所以有必要总结整理一下关于JSON.parse()这个API方法的注意事项。以便在以后的开发中出现类似的问题能第一时间想到可能是这个方法的参数值不合法导致的报错。常见取值对应报错的情况：...原创 2020-05-23 21:21:20 · 3620 阅读 · 0 评论 -
CSS定位总结：position=static/relative/absolute/fixed时的区别、top/bottom/left/right与margin外边距的运用
<!DOCTYPE html><html><head><style> *{ margin:0; padding:0; }div{margin:0px;width:200px;height:100px;background-color:yellow;}.parent{ position:static; border: 1px solid red; width:300px; height:230px; b.原创 2020-05-14 16:17:24 · 566 阅读 · 0 评论 -
JS正则表达式常见场景下的用法总结
（一）前置知识总结：1. 正则表达式 /xxxx/[标识] 其中的标识含义•g （全文查找）•i （忽略大小写）•m （多行查找）2. 正则表达式创建的两种方式（等价，都是对象）创建对象的方式：var re = new RegExp("a"); // RegExp是一个对象,最简单的正则表达式,将匹配字母avar re= new RegExp("a", "i");// ...原创 2020-05-08 14:21:05 · 914 阅读 · 0 评论 -
原生JS动态计算输入框文本内容的宽度，当内容宽度超过输入框的宽度时可控
需求场景：左边输入框输入内容，右边输入框用placeholder展示，当placeholder的内容宽度超过右边输入框的宽度时，placeholder强行替换为“请选择”注意事项：1、左右输入框的大小、样式都无关；2、实际业务中右边输入框的大小样式是随机的，所以示例代码中右边输入框加了左右不等的内边距，并且监听了浏览器窗口大小的变化，而具体的业务开发时右边输入框的大小是随机确定...原创 2020-01-08 18:55:30 · 2512 阅读 · 0 评论 -
使用PDF.js实现前端和手机端网页预览PDF文件（可定制，支持本地文件、Base64编码和远程URL跨域方式）
1.插件下载地址：https://mozilla.github.io/pdf.js/下载后解压pdfjs-1.10.88-dist.zip文件后得到：2.把pdfjs-1.10.88-dist放到项目静态资源中，在自己的页面中通过iframe链接到pdfjs-1.10.88-dist/web/viewer.html文件中。3.访问自己的页面，默认就是本地文件的方式打开PDF文件，可...原创 2020-01-08 13:18:13 · 7051 阅读 · 10 评论 -
npm安装与卸载和cordova及ionic项目打包调试等相关命令总结归纳
一、安装和卸载node和npm的命令1、Mac系统彻底卸载npm sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}2、因网络问题导致包安装失败的安全解决方法 cd到对应项目之下，如果有权限问题前加sudo rm -rf node_modules/...原创 2019-10-31 14:31:18 · 1697 阅读 · 0 评论 -
项目总结1：微信扫码自动识别设备类型并跳转到相应的应用下载页面（apk或App Store）之解决方案
问题分析：普通页面一般无法调用微信的扫一扫接口，从而否定通过微信扫一扫功能给我们判断当前扫码的设备类型。解决方案：通过应用下载页面自身来获取当前访问的客户端设备类型（iPhone、Android、iPad），然后分别跳转到不同的下载链接。新建一个静态页面，如：download.html; 在download.html中布局，分别设置安卓和iOS的下载按钮指示（避免自动跳转失败时可以让用户...原创 2018-08-02 14:11:00 · 5222 阅读 · 0 评论 -
项目总结2：ionic3开发跨平台App如何设置和替换应用图标及启动图
前言： 和原生开发一样，ionic官方提供的设置方式也很简单，只不过多了一个步骤：基于ionic命令的方式自动修改全局的配置文件config.xml。设置或替换应用图标和应用启动图：把UI提供的图标拿过来改成特定的名称"icon.png"（不一定是png格式的，可以为png、psd、ai格式，但名称不变）； 将"icon.png"拖拽到项目更目录下面的"resources"...原创 2018-08-06 09:53:02 · 1245 阅读 · 0 评论 -
项目总结3：ionic3开发的App在启动过程中部分手机出现白屏或黑屏问题之终极解决方案
问题场景：采用ionic3开发的App，当项目比较大的时候，会出现部分真机设备在启动的过程中有白屏或黑屏的情况。原因预测：个别手机，尤其是安卓手机的性能比较差，App在启动后进入首页或登录页前的初始化工作还没有完成。方案总结：在网上查过很多资料发现大部分的解决办法都是简单的分为两种：1、自动关闭启动页；2、设置具体的毫秒后手动关闭启动页；但是，仍然会有部分项目部分手机还是无法解决这个问...原创 2018-08-06 11:10:31 · 1827 阅读 · 6 评论 -
ES5总结1：数组Array新特性最全最精简的详解
2个位置方法：indexOf lastIndexOf5个迭代方法：forEach every some filter map 2个高阶函数：reduce reduceRight （可用于数组求和）API:1、indexOf(searchElement: T, fromIndex?: number): number; // 返回被...原创 2018-08-28 16:42:32 · 1373 阅读 · 0 评论