RainBow
## 前言 bootstrap响应式布局用的不熟，在网上找了现成的bootstrap响应单页很多，在这里通过分析一个`bootstrap中文网主页`的响应来分析响应式布局的原理，从此畅通，以后专注写media... 前往：[Bootstrap中文网](http://www.bootcss.com/) ## 视口 获取viewport的大小(布局视口) **获取layout viewport** ````js document.documentElement.clientWidth; document.documentElement.clientHeight; ```` **ideal viewport（理想视口）设备屏幕区域** ````js // 获取ideal viewport有两种情形 // 新设备 window.screen.width; window.screen.height; // 老设备 window.screen.width / window.devicePixelRatio; window.screen.height /...
#### 参考 - [animate.css]( https://github.com/animate-css/animate.css) - https://animate.style/ - [colorui](https://github.com/weilanwl/ColorUI/blob/master/template/colorui/animation.wxss)
## 前言 `原生`开发小程序有了两个项目，在原生开发小程序经验技巧方面有一些自己的总结，此篇文章做原创分享！ 本文适合老手查看，新手请参阅[官方文档](https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18122618)，同步至[github](https://github.com/xiaoyueyue165/blog/issues/47)。 ## 1.发布订阅处理复杂逻辑 > 支持先订阅后发布，以及先发布后订阅 - 方法源码 ```js var Event = (function() { var clientList = {}, pub, sub, remove; var cached = {}; sub = function(key,...
## 目录 - [1.生命周期](#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F) - [2.路由](#%E8%B7%AF%E7%94%B1) - [3.重要组件](#重要组件) - [4.数据交互](#%E6%95%B0%E6%8D%AE%E4%BA%A4%E4%BA%92) - [5.授权登录与用户信息](#授权登录与用户信息) - [6.调试](#%E8%B0%83%E8%AF%95) - [7.周边](#%E5%91%A8%E8%BE%B9) - [8.参考链接](#%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99) ## 生命周期 **App** ```js // app.js App({ onLaunch(options) { // 小程序初始化启动时先做一些事情，如：扩展 wx...
## 300毫秒延迟来历 在早期iphone设备中为了更好的适应设备网页的比例，加入双击缩放会将浏览器的网页缩放至原始比例。 当浏览器单击一次屏幕，浏览器需要去判断用户是想要打开链接还是会选择双击缩放，这就导致需要等待300毫秒来做进一步的判断。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕. 在现今的移动web中，300毫秒的延迟影响了用户体验，大家都在想办法优化这个体验,[300 毫秒点击延迟的来龙去脉](https://thx.github.io/mobile/300ms-click-delay)阐述的更加清楚明白。 ## 解决方法之[Hammer.js](https://github.com/hammerjs/hammer.js) hammer.js是一款开源的移动端脚本框架，他可以完美的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架，并且整个框架非常小，在使用时非常简单，代码示例如下： **hammer中的tap事件** ````html Tap html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } .test {...
# HTTP 超文本传输协议（英语：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的**应用层协议**。HTTP 是万维网的数据通信的基础。 HTTP 是一个客户端（用户）和服务端（网站）之间请求和应答的标准，通常使用 TCP 协议。通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个 HTTP 请求到服务器上指定端口（默认端口为 80）。我们称这个客户端为用户代理程序。应答的服务器上存储着一些资源，比如 HTML 文件和图像。我们称这个应答服务器为源服务器。（在用户代理和源服务器中间可能存在多个“中间层”，比如代理服务器、网关或者隧道） **协议**：规定了客户端与服务器双方必须遵守约定好的数据传输格式 **一个完成的 HTTP 请求** - 域名解析（此处涉及 DNS 的寻址过程） - 发起 TCP 的 3 次握手 -...
## 内容 - 抓取文章内容 API - 爬取限制 ### 周边 - https://github.com/cheeriojs/cheerio #### 参考链接 - https://github.com/ZY2071/Crawler-for-Github-Trending - [接口如何防刷 ](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/254) - https://juejin.im/post/5bead1b25188251e1a1f4d34 - https://dev.to/int0h/creating-a-cli-for-your-node-js-app-using-typescript-124p - [Node.js 命令行程序开发教程](https://www.kancloud.cn/kancloud/command-line-with-node#/catalog) - [30分钟使用 Node 实现一个命令行程序](https://zhuanlan.zhihu.com/p/28705824) -...
## 介绍 [FIS3](http://fis.baidu.com/fis3/docs/beginning/intro.html) 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。（官方文档） 我把它定义为一个项目后期部署上线的工具,可以使用它压缩css，js与图片压缩（png），支持Css精灵图的合并，做到文件指纹（添加md5戳），方便项目部署的更新迭代，本地调试可模拟线上发布后的状态，便于调试。 ## 安装 ```` npm install -g fis3 ```` ## 配置文件 > 默认为fis.conf.js文件 #### fis.match() ```` fis.match(selector, props); ```` > 使用props配置规则编译selector匹配到的文件 #### fis.media() fis.media() 接口提供多种状态功能，比如有些配置是仅供开发环境下使用，有些则是仅供生产环境使用的。 ````...
> webpack 3 ## 入门命令 > 随后会用webpack-dev-server替代 基本构建 ````bash webpack src/app.js dist/app.bundle.js ```` 开发环境实时构建 ````bash webpack --watch ```` 生产环境中构建 ````bash webpack -p ```` ### 其他 - webpack -d – 包含资源地图...
## 说明 在react项目中使用`ant-design`的时候，配置`import antd/dist/antd.css`的`babel-plugin-import` 插件并未成功导入，搞的很心烦，环境配置不通,此篇将babel的使用梳理一遍！！！ ## 配置文件.babelrc Babel的配置文件是`.babelrc`，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。 cmd命令行创建 ````cmd touch .babelrc ```` 该文件用来设置转码规则和插件，基本格式如下。 ````javascript { "presets": [], "plugins": [] } ```` presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。 ````javascript # ES2015转码规则 $ npm install --save-dev...