随笔分类 - html5
html5
摘要：Cookie写不进去问题深入调查 https Secure Cookie
什么情形下，Cookie 会写不进去？https Secure Cookie
像是语法错误那种显而易见的就不用说了，除此之外你可能会答说：写完全不同domain的Cookie。例如说你的网页在http://a.com却硬要写http://b.com的Cookie，这种情形当然写不进去。
或者，你可能会回答：不在https却想加上Secureflag的Cookie。
没错，像是这种情形也会写不进去。
除了这些，你还能想到什么吗？
如果想不太到，那就听我娓娓道来吧！
阅读全文
摘要：微信内置浏览器禁止缓存的问题
解决方案1：
调试阶段或者频繁更新的页面加入以下头信息：
注：上面对一般浏览器有用，微信内置浏览器有时候可能没用
也可以通过服务器配置来解决缓存问题
解决方案2：
更新文件的时候，在引用css，js等文件的语句上加上一个版本号，就能有效防止浏览器一直使用缓存中的css，js
阅读全文
摘要：使用HTML meta no-cache标签来禁用缓存
因为是 HTML 页面，可以于 HEAD 标签内直接添加 META 标签：
其他文件就需要使用服务器设置文件控制 header
阅读全文
摘要：vue获得当前页面URL动态拼接URL复制邀请链接方法
当前页面完整url可以用 location.href
路由路径可以用 this.$route.path
路由路径参数 this.$route.params
实例：动态邀请链接，获得当前页面URL去掉path，替换成注册的加上邀请码：
this.invitelink = location.href.replace(this.$route.path,'') + "/register?invitecode=" + this.invitecode;
复制邀请链接方法：
main.js里添加：
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
阅读全文
摘要：pt和px区别 pt是逻辑像素，px是物理像素
字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？
先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；
pt就是point，是印刷行业常用单位，等于1/72英寸。
以iPhone8为基础750做的设计pt单位的，再网页中用px做单位要在pt基础上乘以2了
阅读全文
摘要：JS的防抖与节流
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。
此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
阅读全文
摘要：懒加载是如何实现的？
找到一个不需要知道图片宽高的懒加载方法了（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）
dinbror/blazy: Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.
https://github.com/dinbror/blazy#demo
这个兼容性比较好
注：vuejs，react有对应的懒加载插件
阅读全文
摘要：基于Vue的Quasar Framework 介绍 这个框架UI组件很全面
基于Vue的Quasar Framework 中文网
quasarframework/quasar: Quasar Framework
https://github.com/quasarframework/quasar
Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：响应式网站
阅读全文
摘要：vue项目初始化时npm run dev报错webpack-dev-server解决方法
原因：这是新版webpack存在的BUG，卸载现有的新版本webpack，装老版本就好
webpack-dev-server 版本需要从最新版本降低到如下版本,因为开始构建项目所用的插件版本太低
（1）、npm uninstall webpack-dev-server
（2）、npm install webpack-dev-server@2.9.1
（3）、npm run dev
===================
如何执行npm uninstall webpack-dev-server 也报错的话只能用下面方法了
原因是你的node_modules有意外改动，导致依赖库不完整。
解决：
1.删除项目下的node_modules
2.在项目目录下重新执行npm install 或者cnpm install，会重新生成node_modules
3.执行npm run build 或者cnpm run build
4.执行npm run dev 或者cnpm run de
阅读全文
摘要：vue全局使用axios插件请求ajax
Vue 原本有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方宣布停止更新vue-resource，并推荐大家使用axios，越来越多的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目会使用 Vuex 来管理数据。
之前一直使用的是 vue-resource插件，在主入口文件引入import VueResource from 'vue-resource'之后，直接使用Vue.use(VueResource)之后即可将该插件全局引用了；
Axios 是一个基于 promise 的 HTTP 库，并没有install方法，所以是不能使用vue.use()方法的。
简单点就是每个文件引用一次，import axios from 'axios';
全局使用的解决方法有很三种：
1.结合 vue-axios使用
2. axios 改写为 Vue 的原型属性
3.结合 Vuex的action
阅读全文
摘要：移动手机版要求我们在制作嵌入h5的时候去适配不同的手机。适配有多重模式，有flex、百分比等。字体大小的控制也有px、百分比、rem等单位，webpack中 px转rem。
vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别
1 安装依赖包 npm install postcss-pxtorem --save-dev
2 创建 .postcss.js文件，做webpack相关配置
阅读全文
摘要：16款优秀的Vue UI组件库推荐
Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。
在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。
开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。
在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。
PS：国内的UI组件大部分都只有一部分的，常用的头部导航，底部导航，listview，grid表格很多都是没有的。
阅读全文
摘要：vue生命周期图示中英文版Vue实例生命周期钩子。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
阅读全文
摘要：vue使用tradingview开发K线图相关问题
1.TradingView中文开发文档
https://b.aitrade.ga/books/tradingview/CHANGE-LOG.html
2.vue开源项目：
https://github.com/webdatavisualdev/vue-tradingview
https://github.com/472647301/tradingView-webSocke
https://github.com/webdatavisualdev/vue-tradingview
阅读全文
摘要：canvas绘图，html5 k线图，股票行情图
canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的默认宽高为300px * 150px,在css中为canvas定义宽高，实际上把宽高为300px * 150px的画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。
所以，在canvas绘图时，应该在canvas标签里直接定义宽高。
阅读全文
摘要：jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jquery.lazyload.js是一个用JavaScript编写的jQuery插件。它可以延迟加载长页面中的图片，在浏览器可视区域外的图片不会被载入。
直到用户将页面滚动到它们所在的位置，这与图片预加载的处理方式正好是相反的。
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度，浏览器将会在加载可见图片之后即进入就绪状态，在淘宝商品详情页、漫画网站很多图片的情况下还可以帮助降低服务器负担。
阅读全文
摘要：JS中的函数节流throttle详解和优化
在前端开发中，有时会为页面绑定resize事件，或者为一个页面元素绑定拖拽事件（mousemove），这种事件有一个特点，在一个正常的操作中，有可能在一个短的时间内触发非常多次事件绑定程序。
DOM操作时很消耗性能的，如果你为这些事件绑定一些操作DOM节点的操作的话，那就会引发大量的计算，在用户看来，页面可能就一时间没有响应，这个页面一下子变卡了变慢了。在IE下，如果你绑定的resize事件进行较多DOM操作可能直接就崩溃了。
怎么解决？函数节流(throttle)就是一种办法。
阅读全文
摘要：jQuery懒加载插件jquery.lazyload.js使用说明实例
很多网站都会用到‘图片懒加载’这种方式对网站进行优化，即延迟加载图片或符合某些条件才开始加载图片。
懒加载原理：浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件。
它可以延迟加载长页面中的图片在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置。
与图片预加载的处理方式相反，在包含很多大图片长页面中延迟加载图片可以加快页面加载速度，尤其是移动端。
浏览器将会在加载可见图片之后即进入就绪状态，在淘宝商品详情页、漫画网站很多图片的情况下还可以帮助降低服务器负担。
一、下载和引用
官网下载地址：http://plugins.jquery.com/lazyload/ 下载2014年最后更新的1.9.3即可
Lazy Load 依赖于 jQuery. 所以需要先引用jqueryjs：
二、实例调用
要使用懒加载，需要改变img的src标签
img alt="" wi
阅读全文
摘要：CSS, JavaScript 压缩, 美化, 加密, 解密
JS压缩, CSS压缩, javascript compress, js在线压缩，javascript在线压缩，css在线压缩，YUI Compressor压缩，Google Closure Compiler压缩，js压缩，uglifyjs压缩，javascript压缩，js美化，javascript美化，js加密，js解密，js混淆，javascript加密，javascript解密，js格式化，javascript格式化
阅读全文
摘要：
Base64图片编码原理，base64图片工具介绍，图片在线转换Base64
DataURI 允许在HTML文档中嵌入小文件，可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码，减少 HTTP 请求，加快小图像的加载时间。
经过Base64 编码后的文件体积一般比源文件大 30% 左右。
// Base64 在CSS中的使用
.box{
background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}
// Base64 在HTML中的使用
阅读全文
Base64图片编码原理，base64图片工具介绍，图片在线转换Base64
DataURI 允许在HTML文档中嵌入小文件，可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码，减少 HTTP 请求，加快小图像的加载时间。
经过Base64 编码后的文件体积一般比源文件大 30% 左右。
// Base64 在CSS中的使用
.box{
background-image: url("data:image/jpg;base64,/9j/4QMZR...");
}
// Base64 在HTML中的使用
阅读全文
