前端
关注
分享
扫一扫
柏灿
iOS,前端，混合开发
展开
-
团队技术选型
在软件开发领域，几乎每天都有新的技术框架诞生、更新，一些新的概念更是层出不穷，技术选型时，难免让人无从抉择。转载 2023-04-21 10:41:38 · 140 阅读 · 0 评论 -
“xxx“ is declared but its value is never read.Vetur(6133)
"xxx" is declared but its value is never read.Vetur(6133)原创 2022-09-22 10:24:47 · 1815 阅读 · 1 评论 -
flex布局
一、基本概念Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。二、容器属性// 有6个属性设置在容器上flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content2.1flex-direction属性flex-direction属性决定主轴的方向（即.原创 2021-11-12 11:07:25 · 104 阅读 · 0 评论 -
JS比较字符串大小
JavaScript中可以直接使用大于(>)、小于(<)运算符进行字符串大小比较。此方法会根据第一个不同的字符的ascii码进行比较。原创 2021-10-26 16:14:21 · 2709 阅读 · 0 评论 -
angular 监听组件属性变化
先解释一下ngOnChanges 这个一般用于父子组件传值属性监听，如果监听本组件属性变化很多人不知道怎么做下面展示一下我的实现_type = 'type';set type(val: string) { this._type = val; this.typeChange(val);}get type(): string { return this._type;}typeChange(type: string): void { console.log('type:原创 2021-08-03 11:11:29 · 1797 阅读 · 0 评论 -
js导出excel
近期公司有一个纯前端导出excel功能，先写一个快速导出方案吧，极简模式：const table = document.getElementsByTagName('table');const uri = 'data:application/vnd.ms-excel;base64,';const template = '<html><head><meta charset="UTF-8"></head><body><table bor原创 2021-07-22 15:07:38 · 577 阅读 · 0 评论 -
CSS移动端自适应布局与字体大小自适应
一、vw, vhvw它是根据可视区的宽度来计算的。vh它是根据可视区的高度来计算的。<body><style>body { margin:0; }.testDiv { width:100vw; height:100vh; font-size:10vw; background:#ccc; }</style> <div class="testDiv" ></div></body>其中100vw是把.testD转载 2020-06-03 19:46:13 · 3195 阅读 · 0 评论 -
JS闭包
什么是闭包？定义一：闭包是指有权访问另外一个函数作用域中的变量的函数。其它定义：闭包是指那些能够访问自由变量的函数。 （其中自由变量，指在函数中使用的，但既不是函数参数arguments也不是函数的局部变量的变量，其实就是另外一个函数作用域中的变量。）闭包产生的原因：首先要明白作用域链的概念，其实很简单，在ES5中只存在两种作用域————全局作用域和函数作用域，当访问一个变量时，解...转载 2019-11-26 14:26:56 · 157 阅读 · 0 评论 -
.gitignore忽略规则简单说明
# 表示此为注释,将被Git忽略*.a 表示忽略所有 .a 结尾的文件!lib.a 表示但lib.a除外/TODO 表示仅仅忽略项目根目录下的 TODO 文件，不包括 subdir/TODObuild/ 表示忽略 build/目录下的所有文件，过滤整个build文件夹；doc...转载 2019-05-14 16:06:29 · 230 阅读 · 0 评论 -
package.json中的版本管理
当我们查看package.json中已安装的库的时候，会发现他们的版本号之前都会加一个符号，有的是插入符号^，有的是波浪符号~。那么他们到底有什么区别呢？"dependencies": { "es6-promise": "~4.1.0", "vux": "2.3.3", "zepto": "^1.2.0" },//指定安装依赖的版本号:* '2.1.1' ...原创 2019-05-14 15:20:58 · 4619 阅读 · 0 评论 -
MAC 系统node版本管理
MAC系统安装node.js后，可以通过n模块和nvm进行版本管理，nvm使用比较复杂，推荐使用n模块方法：1、安装n模块 $ sudo npm install -g n 安装完成之后，直接输入n后输出当前已经安装的node版本以及正在使用的版本2、通过移动上下方向键来选择要使用的版本回车生效nvm 和 n 的区别 nvm 类似于 Pyth...原创 2019-01-08 18:20:19 · 3576 阅读 · 0 评论 -
SPA（单页面web应用）和MPA（多页面web应用）
转载 2018-12-18 10:01:32 · 1084 阅读 · 0 评论 -
JS监听浏览器的返回事件
最近在实现一个需求，要求监听浏览器的返回操作，百度之后都是这个方法，原理如下：在页面中我们可以使用javascript window history，后退到前面页面，但是由于安全原因javascript不允许修改history里已有的url链接，但可以使用pushState方法往history里增加url链接，并且提供popstate事件监测从history栈里弹出url。既然有提供popst...原创 2018-11-15 16:54:52 · 18528 阅读 · 0 评论 -
H5跳转至APP指定页面
1.设置urlschemesurlschemes尽量设一个唯一的字符串，例如可以设为：iOS+公司英文名+ 项目工程名 比如我的设为iOSTencentTest，在浏览器中输入地址iOSTencentTest://即可跳转到我的app2.跳转到指定页面在使用iOSTencentTest://打开app会调用AppDelegate的代理方法-(BOOL)application...转载 2018-11-13 09:26:45 · 9470 阅读 · 0 评论 -
常用的一些算法
字符串中各个字符串出现的次数var arr = 'abcdaabc';var info = arr .split('') .reduce((p, k) => (p[k]++ || (p[k] = 1), p), {});console.log(info); //{ a: 3, b: 2, c: 2, d: 1 }reduce 对于低版本兼容性不是很好，可以用下面的...转载 2018-04-19 16:34:58 · 290 阅读 · 0 评论 -
vue路由懒加载
vue路由懒加载就是在我们进入首屏页面的时候根据需要加载路由组件，从而优化用户体验具体实现方法如下：未使用路由懒加载的代码如下参考https://www.cnblogs.com/lijuntao/p/7777581.html...转载 2018-06-11 15:48:45 · 722 阅读 · 0 评论 -
前端性能优化－－预加载技术
当我们谈到前端的性能时，总是会提到比如合并、压缩、缓存或者在服务器上开启gzip之类的，目的都是为了让页面加载的更快。资源预拉取（prefetch）则是另一种性能优化的技术。通过预拉取可以告诉浏览器用户在未来可能用到哪些资源。Pre-fetching会提示浏览器那些未来一定或可能使用到的资源，有时在当前页面见效，有些则在未来可能打开的页面生效。 作为开发者，我们比浏览器更懂自己的应用。我们可以利用...转载 2018-06-13 09:48:52 · 749 阅读 · 0 评论 -
Chrome Dev Tool 中时间线各阶段代表的意义
Queueing(排队时间)如果某个请求正在排队，则指示：请求已被渲染引擎推迟，因为该请求的优先级被视为低于关键资源（例如脚本/样式）的优先级。 图像经常发生这种情况。请求已被暂停，以等待将要释放的不可用 TCP 套接字。请求已被暂停，因为在 HTTP 1 上，浏览器仅允许每个源拥有六个 TCP 连接。生成磁盘缓存条目所用的时间（通常非常迅速）Stalled（也即是从TCP连接建立完成，到真正可以...原创 2018-06-14 11:16:40 · 839 阅读 · 0 评论 -
从输入一个url到浏览器页面展示都经历了哪些过程
面试的时候有些面试官会问这个问题，可按如下流程作答：1、首先，在浏览器地址栏中输入url2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。5、握手成功后，浏览器向服务器发送...原创 2018-07-19 17:00:04 · 6006 阅读 · 0 评论 -
input只输入数字
1、极简方法 属性中直接添加keyup事件onkeyup="value=value.replace(/[^\d]/g,'')"2、监听input事件在函数中进行替换操作原创 2018-08-12 12:45:21 · 672 阅读 · 0 评论 -
No parser and no filepath given，using 'babylon' the ...
VUE项目run dev 的时候报No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.可能原因是vue-l...原创 2018-08-19 15:10:58 · 3566 阅读 · 0 评论 -
webstorm激活破解
2016.2.2 版本的破解方式：安装以后，打开软件会弹出一个对话框；选择“license server” 输入：http://114.215.133.70:410172016.2.3 版本的破解方式：在打开的License Activation窗口中选择“activation code”，在输入框输入下面的注册码2016.3.1 版本的破解方式：最新版本就是3.1，在打开的Licens...原创 2016-12-05 10:21:43 · 11317 阅读 · 2 评论 -
webpack配置文件详细分析
一、前言vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。重点...转载 2018-09-11 18:53:57 · 3927 阅读 · 2 评论 -
webpack4 optimization配置
从webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置，这也应该是从V3升级到V4的代码修改过程中最为复杂的一部分，下面的代码即是optimize.splitChunks 中的一些配置参考module.exports = { optimization: { runtimeChunk: { name: 'mani...转载 2018-09-12 14:50:57 · 17580 阅读 · 0 评论 -
session,cookie,sessionStorage,localStorage的区别及应用场景
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用cookie,session等跟服务端进行数据交互。一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。区别：1、保持状态：cookie保存在浏览器端，session保存在服务器端2、使用方式：（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏...转载 2018-03-30 18:16:32 · 268 阅读 · 0 评论