- 博客(43)
- 收藏
- 关注
RSS订阅原创 前端开发规范
● 禁止使用var声明变量, 推荐使用let和const分别声明可变和不可变的变量test() {// 禁止// 正确// 正确● 定义属性时必须有类型num = 1;// 禁止// 正确● 避免使用any类型除底层框架以外, 禁止在业务层代码中出现使用any类型定义的属性// 禁止// 禁止// 正确// 正确id: number;● 简单且确认不会被共用的类型可以使用匿名类型定义, 其他的必须用显示类型。
2024-03-07 15:41:53
948
原创 UTF-8 与 UTF-16区别详解
计算机将数据（包括文本字符）存储为二进制（1 和 0）。ASCII 是一种早期的编码方式，或将字符映射到二进制代码以便计算机可以存储它们。但是，ASCII 没有为非拉丁字符和数字以二进制表示提供足够的空间。Unicode 是解决这个问题的方法。Unicode 为每种人类语言中的每个字符分配一个唯一的“代码点”。UTF-8 是一种 Unicode 字符编码方法。这意味着 UTF-8 获取给定 Unicode 字符的代码点并将其转换为二进制字符串。它也做相反的事情，读取二进制数字并将它们转换回字符。U
2024-02-19 14:14:40
2114
原创 vite 中使用插件 vite-plugin-svg-icon加载svg资源
由于 vite.config.ts 中配置的 svg 目录为 src/assets/icons，首先将 car.svg 拷贝到该目录下。在vite.config.ts 中配置。// SVG 图标名称或在线URL。
2023-12-13 15:47:13
769
原创 使用发布订阅模式处理多维度复杂融合场景
······················本文原链接 前端之神-林三心 微信公众号文章，如有侵权，可以随时联系删除······················
2023-12-12 19:28:21
97
原创 手写一个函数实现简易版的promise(包括resolve,reject,then,catch,finally,all方法的实现)
promise原理
2022-06-14 17:06:32
364
原创 vue3笔记整理
1.ref和reactive两个都是创建的响应式对象ref偏向于创建基础数据类型reactive偏向于创建较复杂深层的数据类型我们可以理解为ref是reactive的二次封装，ref创建出来的对象，在js中访问时需要使用 .value来对值进行访问，但是在html模版中访问会被解包，直接使用即可，因此模板中不需要 .value。reactive可以传递一个ref，这样将对会ref进行解包，并保持ref的响应性2.setup发生在创建组件实例时，prop被解析之后，beforeCreate之前，
2022-03-23 15:23:26
489
原创 碎片知识整理
1.双等和三等的区别双等会先进行转换再比较 ( == );三等仅比较而不会转换 ( === );双等在进行类型转换时,遵循以下三个原则:(1) 如果有一个操作数是布尔值类型,会先将布尔值转换成对应的数值类型0和1(2) 如果一个操作数是数值,一个操作数是字符串,会先将字符串转化成数值,再进行两者的比较(3) 如果一个操作数是对象,另外一个操作数不是,那么会先调用对象的valueOf()方法,用最终得到的基本类型再按照前面的规则进行比较看下面的例子,如果一个自定义对象重写了valueOf()方法
2022-01-18 17:44:54
499
原创 H5原生路由跳转模式简单记录
1.Web Api: history接口history.pushState(state, title[, url])history.replaceState(state, title[, url])history的pushState()和replaceState()都可以使浏览器展示新的页面地址，但是并不会导致浏览器页面重新加载，甚至不会检查页面地址是否存在。区别在于pushState()方法是向当前浏览器会话历史堆栈中添加一个状态（或添加一条历史记录），而replaceState()是修改了当
2021-10-21 16:41:20
1878
原创 webpack项目，使用require.context动态加载本地图片
1.关于require.context文章开头先介绍一下require.context的使用，它是一个webpack的api，可以通过这个方法获取一个特定的上下文，用来实现文件的批量自动化导入，在前端的项目中，如果遇到需要从一个文件夹下面引入很多模块的情况，就可以使用这个api遍历获取，从而摒弃掉使用多个import单个引入的方式。...
2021-06-11 18:37:45
2271
原创 React Hook的个人学习以及理解
Hook是react 16.8版本新增的功能，可以让你在不用class类的方式来进行页面的编写，即函数式的编程1. useState2. useEffect可以认为是一个与componentDidMount，componentDidUpdate，componentWillUnmount具有相同函数作用的集合。function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount
2021-04-30 15:36:05
121
1
原创 不同类型的设备对font-weight的支持情况
安卓系统：ios系统：可以看出：对于汉字 => 安卓和ios的区分是一样的，只有normal和bold。但是注意一点，ios的加粗是从600往后开始算的，安卓的是从700开始算的。所以我们日常要是给文字加粗，正常就是写font-weight:bold/700;对于字母和数字 => 安卓是有对于不同数值的粗细区分的，但是ios没有，跟汉字一样只有normal和bold。另外，lighter只针对安卓有效果，相当于是100/200的粗细效果。normal统一都是400，bold是700
2021-01-06 16:41:55
2165
1
原创 js复制文本（带文本格式or不带文本格式）
1.js仅直接复制文本（修复ios会自动弹出键盘的问题）const input = document.createElement('input');document.body.appendChild(input);input.setAttribute('value', 你要复制的文本);input.setAttribute('readonly', 'readonly'); // 这步为了解决ios会自动弹出键盘的问题，input改为只读就可以了input.select();document.ex
2020-11-19 11:27:33
1134
原创 typescript笔记
1.类型推断和类型注解类型推断是ts自己推断出来的数据类型类型注解是我们自己在书写代码的时候自己为数据添加上的类型注解
2020-09-21 15:37:45
1545
1
原创 node笔记
1.module加载module的时候，里面的语句就会被执行，无论当前module是否调用，且只会加载一次，加载完成一次后就会直接从内存的缓存中读取一旦某个模块被循环加载，就只会输出到当前被加载模块的已被执行部分，未执行的部分不会输出(https://coding.imooc.com/lesson/146.html#mid=7461) ****3/32.require当require一个本地的文件时（即本地路径引入时），若不加后缀名，则会默认按照以下次序找寻相应的文件，js=>json=
2020-07-13 23:31:25
323
2
原创 函数节流的实现
在监听页面的scroll事件，并触发相应的操作时候，使用函数节流，特此记录一下上代码！！！//节流函数//这里时间设置为每800毫秒执行一次哦function throttle (action, wait = 800) { let time = Date.now() return function () { if (time + wait - Dat...
2020-04-27 15:25:40
580
转载 es6中的装饰器decorator
定义：装饰器是一种与类(class)相关的语法，用来注释或修改类和类方法。应用：可以看下面的例子@testableclass MyTestableClass { // ...}function testable(target) { target.isTestable = true;}MyTestableClass.isTestable // true所以，实际上：...
2020-03-11 17:13:45
368
原创 js处理浮点数精度丢失问题
以下是个人封装的js方法，包括：乘、除、加、减、保留小数数位废话不多说，上代码～～～～～// 自己实现const toFixedSelf = (num, n) => { if (num < 0) { num = -num; return (parseInt(num * Math.pow(10, n) + 0.5, 10) / Math.pow(10, n))...
2019-11-29 14:51:40
501
原创 移动端兼容性问题(建议码住，持续更新哦～)
最近开发移动端较多，整理了一下最近遇到的一些兼容问题1.1px在移动端的解决方案最开始当然从移动端的兼容性适配开始了，关于的详细解释，在我上一篇博客中已经大概讲了一下，1px在移动端的解决方案，问题产生的原因就是在于不同dpr的设备上，1px的css样式像素会产生不同的效果。对于老项目，最好的解决方案可以使用css3中的transform结合伪类::af.........
2019-10-24 18:48:40
4189
原创 移动端dpr解析
移动端中drp是devicePixelRatio的简称，表示的是css样式中1px在当前设备上所占的物理像素个数，苹果6一般作为设计中的基准，一般drp都等于2，也就是我们说的二倍屏PC端中在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，也就是drp=1其实对于我们用户来说，drp越大，手机的分辨率越高，我们的用户体验越好。这也就是比如我们设置边框为0.5px时，在...
2019-10-16 17:06:22
2722
翻译 JSON对象转JSON字符串，格式化字符串以及JSON.stringify参数详解
1. JSON.stringify提供了参数用于格式化字符串var str_json = JSON.stringify(data,null,’\t’)这样打印出来的字符串就是添加了换行之后的字符串啦，可以用于导出这些数据，保存本地查看方便。2. JSON.stringify提供了参数用于筛选自己需要的那部分数据例如对于一个对象data：var data =[{ name: "...
2019-10-11 15:23:35
950
原创 vue项目打包后，css兼容性样式前缀消失解决方案～
用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了，自己不需要做什么改动就会自动加前缀：但是本小仙女在开发过程中，发现一个问题，OMG# ~~~~~ #项目打包前后的样式怎么会不一样？？？譬如：这个css3中设置背景渐变的属性吧，打包后在谷歌浏览器里面竟然不兼容。打开控制台一看，咦？属性前缀肿么没有了？？？网络上面找解决方法，看下面????我们可以分析对比下bui...
2019-09-11 16:54:55
1975
原创 Redux入门小tips
以下是个人一些小笔记：redux要是想修改状态state，只能通过分发action来修改，强制使用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么，而reducer就是连接action和state的桥梁所在，reducer只是一个接受action和state，并返回新的state的函数...
2019-08-27 10:53:40
124
原创 vue的.sync用法，使props的单向数据流变为双向数据流
起源：.sync这个修饰符，平时用的没那么多，直到有次发现子组件中的数据，除了需要来源于父组件中传来的值，还需要子组件本身的单击修改props自身的值，这样一来子组件中的数据来源就不止父组件的传值，还有自身的传值修改了。印象中vue文档中是有这样一个api存在的，后来一查，果然存在，这个.sync实现了prop的双向...
2019-08-15 20:10:54
745
原创 vue项目中使用axios，拦截器实现自动刷新token机制，拦截请求队列
管理系统项目，基于vue+axios,使用axios拦截器实现自动刷新token机制整个项目的首次登录会获取到用户的token，refreshToken，expires_intoken为本次登录的请求凭证，有效期较短，使用expires_in与当前时间戳进行比较，判断是否过期，一般为两个小时，若过期，需要使用refreshToken重新换取refreshToken是用来刷新token的凭证...
2019-07-17 14:32:12
8504
16
原创 关于mpvue小程序的生命周期顺序以及全局事件
1.第一次进入时的生命周期执行顺序(1).created(2).onload(option),option作为页面路径中的参数， 一个页面只会调用一次，接收页面参数，监听页面加载(3).onshow(4).onready 页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互(5).mounted2.onload和onshow的区别onLoad是在当前页面...
2019-05-10 15:52:29
2369
原创 小程序获取dom节点方法总结
1.创建一个selectorQuery对象实例使用 wx.createSelectorQuery()会返回一个selectorQuery对象实例如：const aa = wx.createSelectorQuery()2.使用这个对象实例来获取要进行查询select的某个节点，如查询匹配某个选择器的节点select(‘.class’)匹配当前页面的第一个匹配某个选择器的节点select...
2019-05-10 15:45:51
14172
1
原创 npm run dev时出现UnhandledPromiseRejectionWarning:EACCES: permission denied错误的可能有效的解决方案
场景还原今天在运行项目时，使用npm run dev运行时，出现以下错误提示我UnhandledPromiseRejectionWarning:EACCES: permission denied，没有管理员权限，并且使用async以及promise这些异步容器抛出错误，包括我在对项目进行打包npm run build时，都会报错，后来查询网上的解决办法是使用sudo以管理员权限运行项目，su...
2019-03-07 11:09:57
11460
9
原创 dependencies和devDependencies的区别
我们知道dependencies是依赖，附属的意思，而前缀dev是develop的简写，devDependencies是开发环境下的依赖，相对的，dependencies是生产环境下的依赖。1.使用npm安装依赖时，–save和–save-dev使用–save安装的依赖，会被写到dependencies区块里面去。而使用–save-dev安装依赖，则会被写到devDependencies区块...
2019-02-23 16:57:31
14252
3
原创 async异步强势来袭，与promise优雅结合写法
1.Async详解(1)async与Generator关系async 函数就是 Generator 函数的语法糖（使用async代替*,使用await代替yield)，也不需要next()执行器手动执行，内置执行器(2)async原理这是个异步操作，而await写法必须写在async函数内部，await命令后面可以是一个promise对象（当然也可以是其他数据类型，但如果是简单(复杂)数...
2019-02-18 19:35:33
416
原创 ES6中class的constructor以及super使用介绍
ES6中class详解，class的constructor以及super使用（**第一次使用markdown编辑呀，一个字，爽！)下面开始正文的介绍：1.定义Constructor是一种用来 创建和初始化class类创建的对象 的特殊方法，一般写在class类的方法里面，使类创建出来的新对象可以继承到class类上面绑定的方法以及属性, es6类中的constructor构造方法对应的是e...
2019-02-18 16:44:47
4275
2
原创 微信小程序中的webSocket长连接的使用
我们在交互的过程中，常常会遇到需要实时刷新页面，显示进度的需要，如果这时候如果使用setTimeout定时器这种就显得笨拙许多，需要定时不断的发起http请求，造成页面开销过大，这时候使用webSocket长连接就显得很有必要了一.webSocket 一种TCP长连接，浏览器和服务器只需要完成一次握手，两者就可以持久性的连接并且双向数据传输，持续的从服务端主动向客户端推送数据,浏览器发出...
2019-01-03 11:42:35
5207
3
原创 关于微信小程序的fly交互以及fly拦截器
当我们在做微信小程序端的交互的时候，发现jquey、axios这些都无法在小程序中使用，因为小程序中js的运行环境与普通浏览器的运行环境不同，页面的脚本逻辑是在JsCore中运行的，而JsCore中没有xmlhttpRequest对象，所以无法使用它们，同时JsCore无法提供window对象，这也是我们在小程序中无法使用window对象的原因，在这时候我们的主角fly大显身手
2019-01-03 11:31:48
2254
原创 言简意赅，告诉你object.create()和new object()区别所在！
1.Object.create(obj)创建的是一个空对象，但是将obj的属性键值对绑定在了创建的新对象的_proto_原型属性上，相当于绑定了新创建的对象的原型，将对象obj继承到_proto_属性上 2.new Object()（1）是创建一个新的对象，实例化一个新的对象； 完整例子
2018-09-27 11:59:12
3052
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人