- 博客(34)
- 收藏
- 关注
RSS订阅原创 vue3.0之UI框架推荐
Vue3已经发布一段时间了，版本趋于稳定并且可以用于生产。虽然很多开发人员对这个版本褒奖不一，新版本由于算是重新构建生态系统，相关资源的缺乏。与Vue2丰富的UI框架相比，Vue3就显得有点少，也算是影响开发人员使用Vue3的原因之一。在Vue中使用UI框架是一个很好的组合，因为它使开发人员更加专注抽象通用组件，从而提供了一个可维护的、高效的开发过程。本文推荐几个比较流行的VUE3 UI框架，同时提供出色的开发人员体验，合理利用，又或者学习借鉴都是不错的选择，排名不分先后。Ant Design Vue
2021-09-19 22:53:04
5368
原创 js中的骚操作
???? js中的骚操作???? 1、最简单的单行评级组件"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate); 定义一个变量 rate 是 1 到 5 的值，然后执行上面代码，如下???? 2、JS 错误处理的方式的正确姿势（直接定位错误原因）try { // something} catch (e) { window.location.href = "http://stackoverflow.com/search?q=[js]+"
2021-09-18 17:55:55
359
1
翻译 BEM规范
BEM规范BEM是什么?BEM包含的内容Block特点例子Block使用指南嵌套例子Element特点例子Element使用指南嵌套例子嵌套例子从属性例子从属性例子可选性例子我应该创建Block还是Element?创建Block创建ElementModifier特点Modifier的分类1.布尔类型例子1.Key--Value类型例子Modifier使用指南不能脱离Block或者Element独立使用例子Mix特点例子BEM是什么?BEM (Block, Element, Modifier)是一个基于组
2021-08-26 13:59:56
3005
原创 vue单元测试---组件挂载
mount和shallowMount区别mount会渲染整个组件树而shallowMount在挂载组件之前对所有子组件进行存根。shallowMount可以确保你对一个组件进行独立测试，有助于避免测试中因子组件的渲染输出而混乱结果。使用建议mount适合小组件测试shallowMount适合多场景测试(能用shallowMount就不用mount)...
2021-05-27 22:17:11
889
原创 vue单元测试环境的配置
配置.eslintrc文件,使eslint识别jest环境中的变量 "env": { "node": true, "jest": true },配置script的脚本,在跑单元测试前先运行eslint解决eslint报错"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service li.
2021-05-27 21:57:20
299
原创 service worker的最佳注册时机
确保用户具有最佳的首次访问体验应成为重中之重。 在初始访问期间延迟服务工作线程注册直到页面已加载，可帮助确保这一点。 您仍可获得具有服务工作线程进行重复访问的所有优势。为确保延迟服务工作线程的初始注册直到第一个页面已加载，一个简单的方法是使用以下代码：if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/se.
2021-01-29 21:12:58
309
翻译 Workbox---高级建议
给所有用户提供一个可以reload的页面渐进式Web应用程序的常见UX模式是在service worker更新并等待安装时显示标语。为此，您需要在页面和service worker中添加一些代码。<script type="module">import {Workbox, messageSW} from 'https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-window.prod.mjs';if ('
2021-01-29 21:04:17
855
翻译 Workbox----常用建议
此页面包含可以与Workbox一起使用的一组示例缓存策略。谷歌字体谷歌字体服务包含两部分具有@font-face的定义的样式表,会链接字体文件静态的修订版的字体文件样式表可以经常更改，因此最好在重新验证时使用陈旧之类的缓存策略来检查每个请求的更新。另一方面，字体文件本身不会更改，可以利用缓存优先策略。在这里，我们将缓存字体文件的有效期限制为一年（与HTTP Cache-Control标头匹配），最大限制个数为30（以确保我们不会用完用户设备上的过多存储空间）。import {reg
2021-01-29 17:19:11
310
1
翻译 Workbox---插件
使用插件在许多情况下，能够在获取和缓存请求和响应时对其进行操作，这是有益的，因为它使您无需编写大量的样板代码即可向服务人员添加其他行为。Workbox插件允许您通过在请求的生命周期中处理响应和请求来添加其他行为。开箱即用Workbox提供了许多可以使用的插件，如果您想添加自定义逻辑，则可以实现自己的插件。Workbox的插件Workbox提供了下面的插件BackgroundSyncPlugin: 如果网络请求失败，则将其添加到后台同步队列中，并在触发下一个同步事件时重试该请求。Br
2021-01-29 11:16:40
491
翻译 workbox---处理第三方请求
处理第三方的请求大量的网站会使用不同源的文件,比如,你使用看谷歌字体,你需要从https://fonts.googleapis.com/导入样式和字体,对于一个文件来说,从不同源发起任何请求会被认为是跨域的请求,而且这些请求在Workbox中时是需要特殊处理的在这个指南中,我们会探索一个跨域的请求是如何不同的,并且我们应该在Workbox中如何支持这些跨域的请求跨域请求和不透明响应浏览器中的一种安全机制是，当一段JavaScript请求来自其他来源的URL时，它就无法访问正文和响应的许多其
2021-01-29 10:25:10
502
原创 vue专家不想让你知道的7个秘密
1.聪明的watch有一种业务场景我们会在组件created的时候根据某个数据去请求接口,之后我们监听这个数据,改变后重新请求数据,我们很容易写出下面的代码 watch: { searchText () { this.fetchUserList() } }, created () { this.fetchUserList() }优化后created() { this.fetchUserList()},watch: {searchTex
2021-01-27 22:49:15
164
原创 eventloop之宏任务和微任务
对比使用setTimeout的效果，感受差异<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><bod
2020-09-29 17:26:04
620
1
原创 如何发布并更新npm包
1.在 https://www.npmjs.com/ 上注册账号2.确保npm的源是本身的源 https://registry.npmjs.org3.在项目的根目录的终端中登录你的账号npm adduser或者npm login4.将包发布为公共包，因为前段时间npm修改了发包模式分为私有包和公共包，如果不添加–access public命令会报错npm publish --access public5.更新包版本npm version 版本号npm publish6.撤销发
2020-09-23 17:35:21
2323
原创 vue高级开发的技巧
1.在v-for中使用函数2.使用Object.assign进行多个响应式属性赋值3.使用修饰符.passive提升移动端性能3.使用inheritAttrs:false禁止属性集成，但是不影响class和style的合并4.使用.sync来简化父子组件的通讯5.使用@hook:生命周期来优化代码，增加可维护性将绑定监听函数和解绑监听函数写到同一个钩子中，便于维护在组件外部监听组件的生命周期，而不需要改动组件逻辑6.小型项目采用vue2.6提供的新API Vue.observ
2020-09-17 18:54:32
1243
1
原创 在vue的开发环境和生产环境如何配置webpack让其支持vue-router的history路由模式
如果在vue的项目中使用history的路由模式,当页面跳转到子路由后,如果此时刷新页面会报404,这时会影响开发模式下的开发体验,此时可以通过配置,一.开发环境1.vue-cli3的项目可以修改vue.config.js中的devserevr选项 devServer: { port: 9000, proxy: { '/': { //关注点 ...
2020-04-29 20:28:38
2301
原创 几种方式可以创建对象
创建对象有几种方法通过字面量和new Object（）产生var o1={ name:'test'}var o2=new Object({ name:'test'})通过构造函数创建var Fun=function（）{ this.name='test'}var o3=new Fun()通过Object.create()方法创建 var P={ ...
2019-08-22 21:03:11
389
原创 css盒模型
一、分类<1>标准盒模型在标准盒模型下，width和height是内容区域即content的width和height。而盒子总宽度为在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)<2>IE盒模型而IE盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外...
2019-08-21 22:53:06
119
原创 nodeJS程序调试方法
方法一：1.启动nodejs的时候， 使用 node --inspect-brk server.js2.访问 http://127.0.0.1:9229/json文件中的 devtoolsFrontendUrl 地址，在Chrome控制台可调式方法二：chrome浏览器中访问chrome://inspect点开页面中的 Open dedicated DevTools for Node 可...
2019-08-19 09:28:42
310
原创 css3动画
前端动画的几种实现方式1.CSS 的transition2.CSS3的animation 属性3.原生JS 动画4.插件5.引用GIF图片6.使用canvas制作7.SVG动画后两个需要去学习cavans 和svg的api文档今天就讲一下 css 的动画实现方式一、傻傻分不清楚的三个属性，关系首先，先区分一下 transition transform translatetr...
2019-08-19 09:28:09
174
原创 http的四种请求方式(get/post/put/delete)
常见四种请求<1>get 通常用来请求某条数据或是一个数组的列表数据,参数会放在地址栏进行传输,常见的大部分请求都是get请求缺点: 因为参数放在地址栏上,所以不安全,一般get请求会发送一些对安全性不高的数据请求,像登录注册相关的请求不会采用get请求地址栏的长度是有限制的,大概2kb左右//请求列表(数组)http://www.baidu.com/users?name=l...
2019-08-04 18:26:12
10998
原创 js中关于对象的那些事
对象的使用<1> 对象的是定义一: 字面量var obj={}二: 构造函数定义var obj=new Object({})<2> 对象的使用 :(1) 点语法使用 => obj.key (2) 中括号使用 => obj['key']var obj={ a:1, b:'1', c: true, d:fun...
2019-08-04 18:24:53
97
原创 npm、cnpm、yarn、以及npx的区别
npm cnpm yarn 和 npx的区别<1>从功能上分: 所有的都是为了安装依赖(js代码库)<2>从结果上分:npm\cnpm\yarn 都会把依赖下载到node_modules中(本地开发环境)npx会先检测本地node_modules中是否有相关依赖,有则直接调用他的命令行,没有的话回去上一级的node_modlues中寻找,直到找到系统的node_mu...
2019-08-04 18:24:02
4229
2
原创 js开发服务端（node）业务时和客户端的区别
node开发与前端开发的区别node后端开发的关注点要关心内存是否泄漏关心cpu和内存的占用,这些资源在服务端是稀缺资源关心网站服务端的稳定性和安全性(因为你的接口是暴露在外网上的)校验用户采用cookie的问题1.不安全,开发者可以通过js盗取并设置来伪装其他用户登录账户操作数据cookie(document.cookie="键=新值")可以通过在服务端的cookie设置...
2019-08-04 18:21:54
468
原创 js中数组的高阶函数用法map,filter,reduce,forEach,some,every
数组的高级函数用法(函数式编程)<1> forEach 遍历每一项 会改变原数组<2> map 会基于原数组产生新数组 //返回一个新数组,不改变原数组<3> filter 会基于原数组产生新数组(过滤掉不满足条件的数组项) 返回一个新数组,不改变原数组<4> reduce 会将多项值合成一个,加法,乘法<5> so...
2019-08-04 18:18:13
570
原创 js中发生类型隐式转换的场景
// 1.字符串拼接时: 1+'2' // 12// 2.==判断时: 100 == '100' //true 0 == '' //true null == undefined //true // 3.if语句的()中时: var a=100 if(a){ //业务逻辑 ...
2019-08-04 18:15:56
340
原创 js函数的arguments对象
arguments1.特性: arguments是函数调用时所有实参的集合,是一个类数组的集合,只能使用for循环去遍历,其他方法不可用,如果想使用的数组的其他方法,可以通过call,apply,和bind把数组的方法调用时的this绑定到arguments上使用,比如:[].reduce.call(arguments)2.arguments不是一个全局变量,而是一个函数内的局部变量,只有在函...
2019-08-04 18:14:56
206
原创 字符串和数组以及对象之间的转换
数组<==>字符串1.数组转换成字符串 Array.prototype.join(‘分隔符’)var arr=[1,'w','er']console.log(arr.join()) // 1,w,erconsole.log(arr.join('.')) //1.w.erconsole.log(arr.join('')) //1wer2.字符串转换成数组 St...
2019-08-04 18:14:03
1031
原创 描述new一个构造函数时发生了什么
var obj1=new fun()1.先创建一个空对象 var obj={}2.将空对象的原型绑定为new操作符后面的构造函数的原型 obj.__proto__=fun.prototype3.让this指向新创建的对象,并执行构造函数的函数体,创建相关属性和方法 4.判断执行结果是否返回了新的对象,如果有返回新对象,就是用返回的新对象,没有的话,返回原来创建的对象(obj)/...
2019-08-04 18:12:57
1050
原创 js中非常实用的类型转换的快捷用法
1.字符串转换成数字类型<1>字符串前加上+ +'1' //1<2>字符串与0按位取或运算 '1'|0 //1 0|'1' //12.数字转化成字符串<1>数字加'' 1+'' //'1'3.利用&&和||短路特性进行求值,可以避免if语句 1&&2...
2019-08-04 18:11:34
113
原创 判断一个变量的类型
1.typeof 能够区分除数组和对象和null外的所有类型// 根据typeof判断对象不太准确表达式 返回值typeof undefined 'undefined'typeof null 'object'typeof true 'boolean'typeof...
2019-08-04 18:09:50
983
原创 怎么使用vue-cli3一步一步生成项目(全网最全的中英文对照)
创建vue项目步骤<1>vue create 项目名(enter键确认,并进入下一步)<2>出现底下两项 default (babel, eslint)(默认初始化一个项目的最小配置,) Manually select features(手动选择项目特性)<3>选择manually select (enter键确认,并进入下一步)...
2019-06-29 18:18:38
9124
原创 js正则的个人总结
正则的分类1 或的关系[]比如: /[abcd] /会匹配a或b或c或d单个字符,有一个就会匹配一个与的关系()这个也叫分组比如: /(abc)/会匹配abc连在一起的字符串和/abc/效果一样非的关系^比如: /^(abc)/会匹配不是abc的结果js正则中的预定类/./ &amp;amp;lt;=&amp;amp;gt;/[^\r\n]/ 匹配除了回车符和换行符之外的所有字符/\d/&amp;amp;
2018-12-25 22:45:18
127
原创 vue采坑之路-stylus开发
vue采坑之路-stylus开发项目是基于vue+stylus开发,运行npm run dev后重新编译时,报 expect ‘indent’,got ‘outdent’ ,如果stylus是写在style中的说明你的缩进有问题,如果是外部引入的,说明外部的文件已经成功引入,只是样式文件中的缩进有问题,这时产生问题的原因有可能是以下两种:&amp;lt;1&amp;gt;样式文件中缩进有问题&amp;lt;2&amp;gt...
2018-12-19 11:03:01
217
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人