
html
文章平均质量分 52
柏灿
iOS,前端,混合开发
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JS UMD规范实现
JS UMD规范实现原创 2023-07-11 17:35:20 · 734 阅读 · 0 评论 -
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 · 129 阅读 · 0 评论 -
JS闭包
什么是闭包?定义一:闭包是指有权访问另外一个函数作用域中的变量的函数。其它定义:闭包是指那些能够访问自由变量的函数。 (其中自由变量,指在函数中使用的,但既不是函数参数arguments也不是函数的局部变量的变量,其实就是另外一个函数作用域中的变量。)闭包产生的原因:首先要明白作用域链的概念,其实很简单,在ES5中只存在两种作用域————全局作用域和函数作用域,当访问一个变量时,解...转载 2019-11-26 14:26:56 · 182 阅读 · 0 评论 -
js如何判断用户使用的设备类型及平台
前端开发经常遇到需要判断用户的浏览设备,是pc端还是移动端,移动端使用的是什么手机系统?android、ios、ipad、windows phone等等,有时候还需要知道用户浏览页面是在微信中打开还是在移动端浏览器中打开,等等一系列判断做一些相应的处理。 1、首先判断pc端还是移动端。 function IsPC() { var userAgentInfo = nav...转载 2018-03-04 10:36:25 · 3837 阅读 · 0 评论 -
session,cookie,sessionStorage,localStorage的区别及应用场景
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。一、cookie和sessioncookie和session都是用来跟踪浏览器用户身份的会话方式。区别:1、保持状态:cookie保存在浏览器端,session保存在服务器端2、使用方式:(1)cookie机制:如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随浏...转载 2018-03-30 18:16:32 · 287 阅读 · 0 评论 -
Chrome Dev Tool 中时间线各阶段代表的意义
Queueing(排队时间)如果某个请求正在排队,则指示:请求已被渲染引擎推迟,因为该请求的优先级被视为低于关键资源(例如脚本/样式)的优先级。 图像经常发生这种情况。请求已被暂停,以等待将要释放的不可用 TCP 套接字。请求已被暂停,因为在 HTTP 1 上,浏览器仅允许每个源拥有六个 TCP 连接。生成磁盘缓存条目所用的时间(通常非常迅速)Stalled(也即是从TCP连接建立完成,到真正可以...原创 2018-06-14 11:16:40 · 911 阅读 · 0 评论 -
从输入一个url到浏览器页面展示都经历了哪些过程
面试的时候有些面试官会问这个问题,可按如下流程作答:1、首先,在浏览器地址栏中输入url2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。3、在发送http请求前,需要域名解析(DNS解析),解析获取相应的IP地址。4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手。5、握手成功后,浏览器向服务器发送...原创 2018-07-19 17:00:04 · 6066 阅读 · 0 评论 -
input只输入数字
1、极简方法 属性中直接添加keyup事件onkeyup="value=value.replace(/[^\d]/g,'')"2、监听input事件在函数中进行替换操作原创 2018-08-12 12:45:21 · 702 阅读 · 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 · 3600 阅读 · 0 评论 -
webpack4 optimization配置
从webpack4开始官方移除了commonchunk插件,改用了optimization属性进行更加灵活的配置,这也应该是从V3升级到V4的代码修改过程中最为复杂的一部分,下面的代码即是optimize.splitChunks 中的一些配置参考module.exports = { optimization: { runtimeChunk: { name: 'mani...转载 2018-09-12 14:50:57 · 17676 阅读 · 0 评论 -
H5跳转至APP指定页面
1.设置urlschemesurlschemes尽量设一个唯一的字符串,例如可以设为:iOS+公司英文名+ 项目工程名 比如我的设为iOSTencentTest,在浏览器中输入地址iOSTencentTest://即可跳转到我的app2.跳转到指定页面在使用iOSTencentTest://打开app会调用AppDelegate的代理方法-(BOOL)application...转载 2018-11-13 09:26:45 · 9603 阅读 · 0 评论 -
SPA(单页面web应用)和MPA(多页面web应用)
转载 2018-12-18 10:01:32 · 1120 阅读 · 0 评论 -
跨域的几种方式
什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:1.) 资源跳转: A链接、重定向、表单提交2.) 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链3.) 脚本请求: js发起的aja...转载 2018-03-03 15:27:54 · 473 阅读 · 0 评论 -
移动前端中的 viewport
一、viewport 移动设备上的视口是设备屏幕上用来显示网页的那部分区域,再具体一点就是浏览器上用来显示网页的那部分区域,但视口又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域大,也可能比浏览器的可视区域小。在默认情况下,移动设备上的视口都是大于浏览器可视区域的,这是因为移动设备的分辨率相对于PC来说都比较小,所以为了能在移动设备上正常显示那些为PC浏览器设计的网站,移动设备...原创 2018-03-03 15:04:54 · 231 阅读 · 0 评论 -
webstorm无法编辑代码问题
万恶的deavim万恶的deavim万恶的deavim重要的话说三遍,耗费我好几个小时的时间另外不要被网络上的insert误导先声明:我的是MAC版,Windows版本可以试一下我们安装webstorm的时候会自动弹出要不要安装ideavim,你点了之后打开项目编辑代码,就会不知所以,光标变黑框,无法编辑代码,有人说按Fn+i 是一种办法,但最彻底的是禁用 Vi原创 2018-01-16 00:44:16 · 12815 阅读 · 0 评论 -
html表单制作
初学html这里贴出部分代码及效果, 教学意见调查表 个人及课程资料 科目名称: 请选择系所: 英文系 法律系 信息管理系 电子工程系 信息工程系 讲师: 性别: 男生 女生 开课日期:原创 2016-05-24 17:52:02 · 1690 阅读 · 0 评论 -
vue-router页面跳转
vue-router页面跳转Vue-Router的教程地址https://router.vuejs.org/zh-cn/我们在简历项目的时候命令行如下:$ vue init webpack my-project$ cd my-project$ npm install$ npm run dev最新的项目已经自动安装了vue-router 下面介绍步骤一、vue组件中添加标签,格式如下 <div原创 2017-03-28 16:12:57 · 4649 阅读 · 0 评论 -
vue-cli中使用stylus
1、在package.json文件中写入依赖: "stylus-loader": "^2.5.0", "stylus": "0.52.4",12122、在命令行运行npm install 安装插件。 或者直接运行:$ npm i stylus-loader stylus --save113、运行 $ npm run dev11原创 2017-03-29 10:34:30 · 6977 阅读 · 0 评论 -
Vue keep-alive
vue 在路由切换时,我们有时候不希望重新渲染界面,这时候就需要使用keep-alive,来将组件缓存vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗template> div class="app"> keep-alive> router-view>router-view> keep-alive> div>原创 2017-05-09 18:10:42 · 4150 阅读 · 0 评论 -
vue2.0父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据可以通过props属性来传给子组件 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1:pro转载 2017-09-19 12:19:36 · 455 阅读 · 0 评论 -
vue绘制环形图
我们有时候会有这样的需求绘制一个环形图百度的Echart太重,又不想在vue的package.json中引入依赖经过对vue-schart的研究将其精简为一个组件放入项目中引用,分享一下经验希望对大家有帮助我们新建一个vue组件在template中:id="canvasId" :width="width" :height="height">data,此处我将圆环原创 2017-11-08 17:24:47 · 9326 阅读 · 1 评论 -
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 · 11363 阅读 · 2 评论 -
css盒模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。我们说过,行内元素比如 文字 类似牛奶,也需要一个盒子把他们装起来,我们前面学过的双标签都是一个盒子。有了盒子,我们就可以随意的,自由的,摆放位置了。看透网页布局的本质: 把网页元素比如文字图片转载 2017-12-26 22:18:48 · 455 阅读 · 0 评论 -
webpack3 配置详解
今天详细的学习了webpack3 下面贴出我的主要配置代码给后来人一些参考/** * Created by shanpengfei051 on 2018/1/3. */const path = require('path')const uglify = require('uglifyjs-webpack-plugin') //JS压缩组件const htmlPlugin= requ原创 2018-01-03 19:03:09 · 1959 阅读 · 0 评论 -
浏览器性能优化-JS篇
众所周知,JS的加载和执行会阻塞浏览器渲染,所以目前业界普遍推荐把script放到之前,以解决js执行时找不到dom等问题。但随着现代浏览器的普及,浏览器为我们提供了更多强大的武器,合理利用,方可大幅提高页面加载速度。理解渲染过程(HTML Parser)首先我们从浏览器的角度解释一下从输入URL到页面展示经历了些什么,以如下html文档举例html>head>转载 2018-01-03 23:15:42 · 3178 阅读 · 0 评论 -
浏览器性能优化-CSS篇
众所周知,CSS的加载会阻塞浏览器渲染或是引起浏览器重绘,目前业界普遍推荐把CSS放到中,防止在CSS还没加载完,DOM就已经绘制出来了,造成CSS加载完成后的重绘。那在现代浏览器中我们有没有办法提高首屏渲染速度那?你是不是经常在第一次打开某个网站的时候看到这种情况,本来的页面是这样的实际上刚加载出来的是这样的字体文件没加载出来,或者加载的太慢了理解CSS解析过转载 2018-01-03 23:19:06 · 328 阅读 · 0 评论 -
Emmet for Dreamweaver:HTML/CSS代码快速编写神器
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示:去年年底,该插件已经改名为Emmet。但Emmet不只改名,还带来了一些新特性。本文就来直观地演示给你。 一、快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签,比转载 2016-05-24 16:27:59 · 582 阅读 · 0 评论