随笔分类 - web前端
web前端
摘要：蓝湖 - 高效的产品设计协作平台
https://lanhuapp.com
交互原型和设计，逻辑连线，切图，批注都集成在一起了
点击原型预览界面左侧的“分享”按钮，直接复制原型链接，发送给同事，同事在电脑端、手机端都可以直接打开预览和操作；
一分钟教程 · Lanhu-help
https://sos.lanhuapp.com/quick_view.html
阅读全文
摘要：Vue用axios跨域访问数据
axios是vue-resource的替代品，vue-resource不再维护。
安装axios：npm install axios
使用vue-cli开发时，由于项目本身启动本地服务是需要占用一个端口的，所以会产生跨域的问题。在使用webpack做构建工具的项目中,使用proxyTable代理实现跨域是一种比较方便的选择。
proxyTable相关配置及使用说明：
在config/index.js文件中，找到dev对象下proxyTable对象进行跨域设置，配置如下：
阅读全文
摘要：vuejs目录结构启动项目安装nodejs命令，api配置信息思维导图版
阅读全文
摘要：canvas绘图，html5 k线图，股票行情图
canvas跟其他标签一样，也可以通过css来定义样式。但这里需要注意的是：canvas的默认宽高为300px * 150px,在css中为canvas定义宽高，实际上把宽高为300px * 150px的画布进行了拉伸，如果在这样的情况下进行canvas绘图，你得到的图形可能就是变形的效果。
所以，在canvas绘图时，应该在canvas标签里直接定义宽高。
阅读全文
摘要：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中的使用
阅读全文
摘要：JetBrains WebStorm打开多个项目project的方法
File-->Settings-->Directories
点击右侧 + Add content root，选择目录后即可显示该项目。
如果直接在已有的一个项目下添加，则都会显示在当前目录内，所以合理的方式就是新建一个空目录，先open这个空目录，然后再自行添加各个开发项目的目录。
阅读全文
摘要：WebSocket和long poll、ajax轮询的区别，ws协议测试
WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）首先HTTP有1.1和1.0之说，也就是所谓的keep-alive，把多个HTTP请求合并为一个，但是Websocket其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已
阅读全文
摘要：根据IP获取所在的国家城市
新浪的IP地址查询接口：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js
新浪多地域测试方法：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=119.139.196.127
搜狐IP地址查询接口（默认GBK）：http://pv.sohu.com/cityjson
搜狐IP地址查询接口（可设置编码）：http://pv.sohu.com/cityjson?ie=utf-8
太平洋电脑 IP库接口：(默认callback=IPCallBack) http://whois.pconline.com.cn/ipJson.jsp
淘宝网接口：http://ip.taobao.com/service/getIpInfo.php?ip=119.139.196.127
返回：
{"code":0,"data":{"ip":"119.139.196.127","country":"中国","area":"",
阅读全文
摘要：Android开源图表图形库K线图
web端k线图一般使用TradingView，android原生的一般是在MPAndroidChart 基础上做开发的，目前看到一个比较好的K线开源组件是KChartView（看起来跟火币的app K线图很像）：https://github.com/tifezh/KChartView ，ios应该也有类似的开源组件.StockChart包括分时图，k线图等实现，作者博客还有很多相关教程文章，感觉不错
MPAndroidChart 一个强大的Android图表视图/图形库
https://github.com/PhilJay/MPAndroidChart
MPAndroidChart在github上23228个star，是一款十分强大的图表框架。
KLineChartDemo: K Line Stock Chart which base on MPAndroidChart
https://github.com/gogooing/KLineChartDemo
阅读全文
摘要：2018年技能提升报告
Skill Up 2018 - Developer Skills Report | PACKT Books
https://www.packtpub.com/skill-up-2018
Packt发布了2018年技能提升报告的结果，旨在了解软件开发人员的工具使用情况和技能趋势。
报告显示，Java 在编程语言中仍然占据主导地位，但 Kotlin 极有可能将其赶出移动开发的榜首。
“2018 年技能提升报告”调查了 8000 多名开发人员和技术专家，他们分为四大类：
应用程序开发，Web 开发，安全和系统管理以及数据。
阅读全文
摘要：WebStorm: The Smartest JavaScript IDE by JetBrains
阅读全文
摘要：react系列笔记1 用npx npm命令创建react app
create-react-app my-app是开始构建新的 React 单页应用程序的最佳方式。它已经为你设置好了开发环境，以便您可以使用最新的 JavaScript 特性，提供不错的开发体验，并且可以优化你的生产环境应用。你需要在你的机器上安装 Node >= 6 。
安装node.js 工具https://nodejs.org/en/download/
安装后再打开cmd执行下面命令：
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
如果你的 npm 5.2.0+ 可以使用npx命令
阅读全文
摘要：小米note3的开发者选项在哪里?怎么进入开发者模式?如何显示布局边界？
1、找到【设置】，打开
2、点击【我的设备】
3、点击【全部参数】
4、连续点击【MIUI版本】5次
5、之后就会看见提示 “进入到开发者模式”
6、返回设置主页，找到【更多设置】，进去可以看到【开发者选项】
阅读全文
摘要：摘要：目前互联网上充斥着大量的关于RESTful API（为了方便，以后API和RESTful API 一个意思）如何设计的文章，然而却没有一个”万能“的设计标准：如何鉴权？API格式如何？你的API是否应该加入版本信息？
阅读全文
摘要：新浪微博 [异常问题] 414 Request-URL Too Large
浏览器上打开新浪微博，或则日志是返回结果提示：414 Request-URL Too Large
原因：因同IP访问微博页面过多，IP被微博限制访问
解决方法：
1、更改本机IP地址（一般宽带重启下路由器重新拨号即可换IP）
2、无法更改IP的，退出软件，暂停数小时，等限制解除后再运行
阅读全文
摘要：Google自动广告，将广告代码放置在 HTML 中的什么位置?
为自动广告生成广告代码后，您需要将此代码放置在要展示广告的每个网页中。您应将广告代码放置在网页的 标记（或正文顶部）中。
阅读全文
摘要：pyV8不支持dom操作，关于PyV8的支持DOM的疑问
PYV8只支持纯js语句。不过官方提供了w3c.py以及brower.py，可以基于此来完成，但这个用起来还是比较麻烦。
在爬取网站时，需要提交请求，其中有一个参数是执行了一大段js来得到的，本来以为用PyV8可以执行js解决的，结果由于涉及到了一点dom的东西，而原生PyV8貌似没有自带浏览器环境， 所以就会报错，导致无法执行下去。
阅读全文
