博客全新升级！使用更简单，功能更强大！
- 发表于 2018-12-03 · 最后访问 9小时前 -
博主今年秋招找完工作后对此博客进行了一次较大的升级，去掉了一些不太实用的功能，加强了现有功能，重构了部分代码，提高规范性和扩展性，看到这半年时间陆陆续续积累了100多个star，博主也是有了更下去的动力，也感谢大家的关注，相信这个博客会越来越好用的哈哈😄下面是最新版的介绍：前台：极简风格制作，注重移动端显示，只使用了最基础的 bootstrap，加载速度快：文章浏览：浏览量统计，标签功能文章搜索：支持标题、标签搜索文章评论：支持评论与回复，邮件提醒后台：使用 React + Ant Design ：文章管理：支持置顶、公开/隐藏文章...
JavaScript中使用正则表达式
- 发表于 2018-07-27 · 最后访问 5小时前 -
可以用正则的方法：search() 找到匹配的第一个字符串，返回位置match() 提取匹配的字符串，返回子串replace() 替换全部匹配的字符串RegExp.test()使用1：var re = new RegExp('a', 'i');使用2：var re = /a/i;数字：\d英文数字下划线：\w空白字符：\s除了数字： \D除了英文数字下划线：\W除了空白字符：\S任意：.出现n次：{n}出现n-m次：{n,m}出现最少n次：{n,}若干个：+出现0或1次：？出现0或多次：*或者：|方括号：[abc], [a-z0-9], [^a-z]（^除了...）忽略大小写：i全局匹配：g行首：^行尾：$-----
按值传递和引用传递
- 发表于 2018-07-26 · 最后访问 1小时前 -
在JavaScript中，基础类型变量是按值传递的，对象类型变量是引用传递的var a;var b=a;a=3;console.log('b=', b);// b= undefined 因为基础类型变量是按值传递，b=a 会给b创建一块新内存，a的改变不会影响到bvar a={name:'M416'};var b=a;console.log('b=', b);// b= {name:'M416'}a.name = '98k';console.log('b=', b);// b={name:'98k'} 因为对象类型变量是引用传递，b=a 会使b指向a所指向的内存，a的改变会影响到ba = {name:'Scar'};console.log(&#x...
box-sizing 的应用
- 发表于 2018-07-23 · 最后访问 1小时前 -
box-sizing 是 CSS3中添加的特性box-sizing 可选的值：content-box，border-box，inherit默认值是：content-box通过将 box-sizing 设置为 border-box 可以将元素的内边距和边框在元素已设定的宽度和高度下绘制，也就是说实际的宽度不会因为 padding 和 border 的变化而变化例子：// html<div class="div1"> div1</div><div class="div2"> div2</div>// css.div1{ width: 300px; height: 300px; background-color: gray; padding: 20px; box-sizing: border-box;}.div2{ width: 300px...
多个 Promise 顺序执行
- 发表于 2018-07-22 · 最后访问 2小时前 -
const timeout = ms => new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, ms);});const ajax1 = () => timeout(2000).then(() => { console.log('1'); return 1;});const ajax2 = () => timeout(1000).then(() => { console.log('2'); return 2;});const ajax3 = () => timeout(2000).then(() => { console.log('3'); return 3;});const mergePromise = ajaxArray => { let p = Promise.resolve(); return Promise.all(ajaxArray.map(item => {...
JavaScript 面向对象写法
- 发表于 2018-07-20 · 最后访问 1天前 -
面向对象：黑盒子，可以在不了解原理的情况下，使用它的功能，例如：Date，Array对象组成：属性和方法对象特点：抽象（类似建模），封装，继承多重继承：一个孩子多个爹方法一：工厂方式（构造函数法）function User(name, age, sayName){ this.name = name this.age = age this.sayName = function(){ alert(this.name) }}var sadcreeper = new User('sadcreeper', 26)sadcreeper.sayName() //sadcreeper缺点：函数重复，资源浪费改进后的方法二：//构造函数加属性function User(name, age, sayName){ this.name = nam...
在 create-react-app 生成的项目中使用 vw 实现移动端适配
- 发表于 2018-07-03 · 最后访问 1小时前 -
最近在开发一个移动端网页时遇到了经典的布局问题，即美工做的移动端UI图是1080*1920像素的UI图，如果直接按照UI图做出来的页面无法在手机上正常的展示，如何能够实现按照UI图1:1开发的网页能够在不同的机型上都能够比较好的显示呢？经过查阅文章，有两种方式可以实现：使用 rem+viewpoint 的方式：这种方式淘宝工程师做了个轮子，参考文章：使用Flexible实现手淘H5页面的终端适配 使用 vw 的方式：这种方式使用了CSS3新增的单位 vw 和 vh 实现，参考文章：再聊移动端页面的适配 ----以及--- 如何在Vue项目中使用vw实现移动端适配 我使用...
electron-builder 打包 electron 应用时的常见问题
- 发表于 2018-06-02 · 最后访问 23小时前 -
connect ETIMEDOUT 54.231.97.224:443如下图所示：这里我使用了科学上网，能连上YouTube的情况下，仍然出现网络错误，设置淘宝源可解决：npm config set registry https://registry.npm.taobao.org/npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/Application entry file "build\electron.js" in the "D:\..\dist\win-unpacked\resources\app.asar" does not exist.如图所示：这个问题需要把 main.js 重命名为 electron.js 然后放到 public 文件夹下，再执行 npm run build 打包到 build 文...
使用 Ant Design Mobile 的 TabBar 结合 React Router@4 的移动端布局方案
- 发表于 2018-04-29 · 最后访问 11小时前 -
And Design Mobile 是 antd 家族针对移动端出品的基于 React 的 UI 框架，用来快速搭建移动端 Web App 是一个利器，不仅包含了移动端常用的各种组件，还直接给出了几种常用的布局，非常方便，比如最常见的底部标签栏布局：TabBar 但是在使用 TabBar 的过程中我发现，文档中提供的例子是使用类似标签页的方法实现的，即多个标签页其实同时存在，只是再点击底部标签栏时，对应的标签页显示出来，其他的则隐藏这样用的话，Web App 一旦稍微复杂就会不太好，如果页面再比较多的话，就必须加入 React Router 了下面我们考虑这么几个需求，应该...
HTML 速查手册
- 发表于 2018-04-26 · 最后访问 5小时前 -
标准HTML文档<!DOCTYPE html><html><head> <title>文档的标题</title></head><body> </body></html>属性alt="示例图" //图片无法显示时的替换文字target="_self" //在当前框架打开（默认）target="_blank" //在新窗口中打开target="_parent" //在父框架集中打开target="_top" //在整个窗口中打开target="frameName" //在 frameName 框架中打开title="示例提示" //鼠...