-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
18 lines (18 loc) · 12.6 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[JavaScript防抖节流函数了解一下]]></title>
<url>%2F2019%2F08%2F20%2F%E9%98%B2%E6%8A%96%E8%8A%82%E6%B5%81%E5%87%BD%E6%95%B0%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B%2F</url>
<content type="text"><![CDATA[总结一下防抖节流函数 节流（throttle） 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率。 使用场景： 搜索联想，用户在不断输入值时，用防抖来节约请求资源 window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次 比如是否滑到底部自动加载更多，用throttle来判断 写法一 (时间戳)12345678910111213141516171819/** * @desc 节流函数 * @param fn 函数 * @param time 延迟执行毫秒数 * @return function 返回一个函数 */function throttle (fn, time) { var next = null return function () { const context = this const args = arguments const now = Date.now() if (now - next > time) { fn.apply(context, args) next = now } }} 写法二 (定时器)1234567891011121314151617181920/** * @desc 节流函数 * @param fn 函数 * @param time 延迟执行毫秒数 * @return function 返回一个函数 */function throttle (fn, time) { var next = null return function () { const context = this const args = arguments if (!next) { next = setTimeout(() => { next = null fn.apply(context, args) }, time) } }} 防抖（debounce） 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 使用场景： 鼠标不断点击触发，mousedown(单位时间内只触发一次) 监听滚动事件 12345678910111213141516/** * @desc 防抖函数 * @param fn 函数 * @param time 延迟执行毫秒数 * @return function 返回一个函数 */function debounce (fn, time) { var timer = null return function () { const context = this const args = arguments timer && clearTimeout(timer) timer = setTimeout(() => fn.apply(context, args), time) }} 附：mqyqingfeng大佬的文章]]></content>
</entry>
<entry>
<title><![CDATA[分享我Scss常用的代码片段]]></title>
<url>%2F2019%2F08%2F16%2FScss%E5%B8%B8%E7%94%A8Mixin%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B%2F</url>
<content type="text"><![CDATA[包含Mixin圆角、背景图、渐变、阴影、清除浮动、边框、三角等 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357//mixin.scss@import "./utils.scss";/* * 作用：背景图片地址和大小 * 示例：@include back(url);*/@mixin back($url, $size: 100% 100%) { background-image: url($url); background-repeat: no-repeat; background-size: $size;}/* * 作用：盒模型 * 示例：@include box;*/@mixin box($sing: border-box) { -webkit-box-sizing: $sing; -moz-box-sizing: $sing; box-sizing: $sing;}/* * 作用：圆角 * 示例：@include radius;*/@mixin radius($radius: 10px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius;}/* * 作用：定位全屏 * 示例：@include allcover;*/@mixin allcover { position: absolute; top: 0; right: 0;}/* * 作用：定位垂直水平居中 * 示例：@include center;*/@mixin center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}/* * 作用：定位默认左上 * 示例：@include lt;*/@mixin lt($left: 0, $top: 0, $position: absolute) { position: $position; left: $left; top: $top;}/* * 作用：定位默认右上 * 示例：@include rt;*/@mixin rt($right: 0, $top: 0, $position: absolute) { position: $position; right: $right; top: $top;}/* * 作用：定位默认左下 * 示例：@include lb;*/@mixin lb($left: 0, $bottom: 0, $position: absolute) { position: $position; left: $left; bottom: $bottom;}/* * 作用：定位默认右下 * 示例：@include rb;*/@mixin rb($right: 0, $bottom: 0, $position: absolute) { position: $position; right: $right; bottom: $bottom;}/* * 作用：定位上下居中 * 示例：@include ct;*/@mixin ct { position: absolute; top: 50%; transform: translateY(-50%);}/* * 作用：定位左右居中 * 示例：@include cl;*/@mixin cl { position: absolute; left: 50%; transform: translateX(-50%);}/* * 作用：设置宽高 (默认宽高百分比) * 示例：@include wh;*/@mixin wh($width: 100%, $height: 100%) { width: $width; height: $height;}/* * 作用：设置字体大小、行高、颜色、对齐方式; * 示例：@include font(20px,30px,#cccccc,center);*/@mixin font($size, $line-height, $color, $align: left) { font-size: $size; line-height: $line-height; color: $color; text-align: $align;}/* * 作用：flex布局 及 子元素对齐方式 * 示例：@include flex;*/@mixin flex($type: space-between) { display: flex; justify-content: $type;}/* * 作用：溢出显示点点点 (默认一行) * 示例： @include line; @include line(3);*/@mixin line($num: 1) { overflow: hidden; text-overflow: ellipsis; @if ($num == 1) { white-space: nowrap; } @else { display: -webkit-box; -webkit-line-clamp: $num; -webkit-box-orient: vertical; }}/* * 作用：默认阴影 * 示例：@include shadow;*/@mixin shadow($radius: 10px, $shadow: 0 4px 20px rgba(0, 0, 0, 0.1)) { box-shadow: $shadow; @include radius($radius);}/* * 作用：清除浮动 * 使用：@include clearfix;*/@mixin clearfix { &:after, &:before { content: " "; display: table; } &:after { clear: both; }}/* * 作用：去除滚动条 (仅支持的是webkit内核的浏览器) * 使用：@include no-scrollbar;*/@mixin no-scrollbar { &::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; -webkit-appearance: none; opacity: 0 !important; }}/* * 一像素边框 * $direction: 边框方向，默认底边框 * $style: 线条样式，默认solid * $color: 边框颜色 * * 默认下边框 @include one-border; */@mixin one-border($direction: bottom, $style: solid, $color: #e5e5e5) { position: relative; $border: 1px $style $color; @if ($direction == bottom) { &:after { @include onepxTopBottom; @include setDprBorder(tb); border-top: $border; bottom: 0; } } @else if ($direction == top) { &:before { @include onepxTopBottom; @include setDprBorder(tb); border-top: $border; top: 0; } } @else if ($direction == left) { &:before { @include onepxLeftRight; @include setDprBorder(lr); border-left: $border; left: 0; } } @else if ($direction == right) { &:after { @include onepxLeftRight; @include setDprBorder(lr); border-left: $border; right: 0; } }}// 四边一像素边框@mixin full-border($color: #e5e5e5, $radius: 0, $zIndex: -1) { position: relative; z-index: 1; &:before { content: ""; position: absolute; z-index: $zIndex; border: 1px solid $color; width: 200%; height: 200%; border-radius: inherit; transform: scale(0.5); transform-origin: top left; border-radius: $radius * 2; left: 0; top: 0; }}/* * 作用：px转rem * * 示例：两种使用方法 @include px2rem(height, 400px); @include px2rem(width, 200px); margin: px2rem(10px);*/@mixin px2rem($attr, $num, $base: 37.5) { $list: (); //存储所有转换后的值 // 遍历所有值并转换为rem单位 @for $i from 1 through length($num) { // 计算单个rem值 $value: strip-units(nth($num, $i)) / $base * 1rem; // 添加到列表中 $list: append($list, $value); } // 设置属性值 #{$attr}: $list;}@function px2rem($num, $base: 37.5) { @return strip-units($num) / $base * 1rem;}/* * 作用：简单的渐变 * * 示例： @include background-gradient(rgba(255,146,156,1), rgba(216,0,0,1), vertical); @include background-gradient(rgba(255,146,156,1), rgba(216,0,0,1), radius)*/@mixin background-gradient($start-color, $end-color, $orientation: vertical) { background: $start-color; @if $orientation == vertical { background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == horizontal { background: linear-gradient(to right, $start-color, $end-color); } @else { background: radial-gradient(ellipse at center, $start-color, $end-color); }}/* * 作用：三角 * 示例：@include triangle(left, 10px);*/@mixin triangle($direction: down, $size: 5px, $color: #f96001) { width: 0px; height: 0px; @if ($direction == left) { border-top: $size solid transparent; border-bottom: $size solid transparent; border-right: $size solid $color; } @else if ($direction == right) { border-top: $size solid transparent; border-bottom: $size solid transparent; border-left: $size solid $color; } @else if ($direction == down) { border-left: $size solid transparent; border-right: $size solid transparent; border-top: $size solid $color; } @else { border-left: $size solid transparent; border-right: $size solid transparent; border-bottom: $size solid $color; }} 123456789101112131415161718192021222324252627282930313233343536// utils.scss 是 mixin.scss 所需要用的辅助方法@mixin onepxElement { content: ''; position: absolute;}@mixin onepxTopBottom { @include onepxElement; left: 0; right: 0;}@mixin onepxLeftRight { @include onepxElement; top: 0; bottom: 0;}@mixin setDprBorder($direction: tb) { @for $i from 1 through 4 { @media screen and (-webkit-min-device-pixel-ratio: $i) { @if ($direction == tb) { transform: scaleY(1 / $i); } @else if($direction == lr) { transform: scaleX(1 / $i); } @else if($direction == full) { transform: scale(1 / $i); } } }}@function strip-units($number) { @return $number / ($number * 0 + 1);} 附：小兀666大佬的分享常用的CSS函数，助你写出更简洁的代码]]></content>
</entry>
<entry>
<title><![CDATA[如何搭建Hexo + Github.io + Ocean博客]]></title>
<url>%2F2019%2F08%2F15%2Fblog-deploy%2F</url>
<content type="text"><![CDATA[程序猿都应有一个博客所以：热气腾腾的地址来了 搭建步骤 npm/cnpm install/i -g hexo 全局安装Hexo hexo init hexo-blog 初始化Hexo cd hexo-blo 进入项目目录 git clone https://github.com/zhwangart/hexo-theme-ocean.git themes/ocean 安装Ocean主题 目录 themes 中 _config.yml 选择 theme: ocean 启用主题 hexo generate 简写 hexo g 生成静态文件 hexo server 简写 hexo s 启动服务 http://localhost:4000/ hexo deploy 简写 hexo d 部署网站 本地环境有git的话 配置好deploy部署之后就可以用xxx.github.io访问了如果没有git请移步 廖雪峰git教程 配置git12345主配置文件 _config.ymldeploy: type: git repository: [email protected]:(github账户名)/(github账户名).github.io branch: master Hexo命令： hexo publish [layout] <filename> 发表草稿 hexo render <file1> [file2] ... 渲染文件 hexo clean 清除缓存文件 hexo list <type> 列出网站资料 hexo version 显示Hexo版本 hexo new [layout] <title> 新建一篇文章 其他坑点更换Ocean的导航名称找了半天不知道怎么改 最后看了一下模板代码 123456789`/themes/ocean/_config.yml`menu: 首页: / 归档: /archives 相册: /gallery 关于: /about将`首页/归档/相册/关于`改成你想要的`文字/字符`即可 本地搜索不起作用安装插件 hexo-generator-searchdb 1$ npm install hexo-generator-searchdb --save 如需更新主题12$ cd themes/ocean$ git pull 附：Ocean的🦈贼可爱Hexo文档 Ocean文档 关于 Ocean 使用中的问题]]></content>
</entry>
</search>