• vue双向绑定的原理以及具体实现
  1. 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。（forEach遍历data属性值，递归；get推入Dep订阅器数组,set数据更新通知所有订阅者）
  2. 实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
  3. 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。事件是在compile的里面挂载的。
• bus传递参数的方法，以及原理
• vue源码解析之事件机制原理）（$on $emit的原理）
• Vue组件是什么数据类型（是个构造函数）
• Vuex state修改有哪些方法？能不能在全局修改state?
• Vuex的mutation action dispatch区别？在mutation使用异步会发生什么？会报错吗？（区分严格模式）
• es6 import和require用法和区别

• Vue mixins混入的几种情况，重名了怎么办？
• 实现一个闭包和一个构造函数
• 圣杯布局的原理以及实现
• css 画三角形的实现和原理（border-width:0 10px 10px 10px; 四条边框的宽度）
• rem自适应原理，根据根元素的字体大小来自适应（html)
• XSS 与 CSRF 两种跨站攻击以及如何防范（cookie的隐患）
• 常见正则表达式

关于this的题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var num = 10;
var obj = {
    num:8,
    inner: {
        num: 6,
        print: function () {
            console.log("num: "+num+" , this.num: "+this.num);
        }
    }
}
num = 888;
obj.inner.print(); //num: 888 , this.num: 6
var fn = obj.inner.print;
fn(); //num: 888 , this.num: 888, this: Window
(obj.inner.print)(); //num: 888 , this.num: 6
(obj.inner.print = obj.inner.print)(); //num: 888 , this.num: 888

总结

感觉从长沙出来还是比较仓促，没有好好复习面试题做准备 基础原理方面还是有所欠缺，还是像以前在学校一样裸考肯定是不行..
面了4天累得不行（还是有几个offer）可能是身体有点虚QAQ~
总的来说问的问题有基础的知识，也有深入到框架的原理，还有业务中的兼容和性能/安全问题，还是都要了解的拉。

之前h5移动端项目有一个顶部tab栏的组件,那个是基于jq的各种操作dom,现在项目用vue重构,所以便想用vue重构下这个组件.

思路

1. 先理清需求,把需要自定义配置的参数列出来(tab栏数量,tab栏文字,active颜色,tab栏点击事件..)
2. 在App.vue里将需要的参数传入组件,在组件内用数据渲染成需要的结构
3. 最后再完善样式

   使用

• 安装

  1	npm install mm-vue-tab

• 引用

  1 2 3

  import Vue from 'vue' import Tab from 'mm-vue-tab' Vue.use(Tab);

• 使用demo

  1 2 3 4

  <mm-vue-tab :options="option"> <div slot="bd-1">...</div> <div slot="bd-2">...</div> </mm-vue-tab>

1
2
3
4
5
6
7
8

option:{
    name: ['导航一','导航二'],   //导航名称
    lineColor: '',              //默认 #f95d5b
    slotName: ['bd-0','bd-1'],  //插槽名称
    tabClick:function(){        //触发导航
        console.log('click tab')
    }
}

踩坑

1. 关于npm发布,需要先将项目打包到lib,并且配置好package.json

   “private”: false, //设置为开源
   “main”: “lib/index.js” //打包路径

2. 如果你切换过npm源,发布的时候需要在npm login前切换回来.

3. 在你决定正式发布之前应该在本地写demo测试几遍

附录

Demo
源码

1.linux下安装git环境

yum -y install git

2.给git账户配置密钥 //生成密钥:ssh-keygen -t rsa -C “邮箱地址”

cd ~/.ssh/cat id_rsa.pub   //将密钥复制添加到你的git账户

3.clone项目,安装依赖

4.写python脚本(路径要写绝对路径)

5.添加定时任务(crontab命令)

6.执行crond

遇到的一些问题

1.crontab添加了定时任务之后没有crond start启动

/sbin/service crond start //启动服务
/sbin/service crond stop //关闭服务
/sbin/service crond restart //重启服务
/sbin/service crond reload //重新载入配置
/sbin/service crond status //查看状态

在执行crond 时提示cron: can’t lock /var/run/crond.pid, otherpid may be 2699: Resource temporarily unavailable;
解决方案 rm -rf /var/run/crond.pid
重启即可 /etc/init.d/crond restart

2.在定时任务跑python脚本没有环境变量

搜索了一下,采用shell脚本来执行..

3.关于shell脚本

注意要写成绝对路径;注意.sh文件的文件格式(我在window下编辑好上传了一个shell脚本,然后运行报错了,最后发现是文件格式的问题)
可以使用:set ff=unix转换文件格式.

1.JS引擎
2.本地储存和离线缓存
3.Javascript实现几种常用的排序算法
4.v8sort排序
5.闭包,继承,es6,异步

二、css

1.垂直居中方法
2.盒模型
3.什么是BFC

三、git

理解merge/rebase的区别
分支合并有冲突的情况与解决方法

四、vue

1.双向绑定原理
2.虚拟dom原理
3.Vue的SSR原理(nuxt)
4.webpack异步原理/代码分割

五、算法

1.实现一个JSON.stringify方法
2.数组去重/复杂度

参考连接：http://lawlite.me/

有什么问题可以在下面留言评论或者左边的联系方式问我

下面大概说一下实现步骤

1.创建图床

你可以用你自己的服务器搭一个，也可以使用七牛云，最方便当然还是直接在git上建一个仓库用来存放图片，缺点就是一次性添加图片过多的时候上传会有点慢。

2.压缩图片并整理图片信息

这一步需要读取文件，你可以用nodejs,python,php等等都行。主题的作者是用的nodejs,我参考使用的是python。大概实现的功能就是读取原图，压缩图片，将原图和压缩过的图片的信息都整理好存到一个json文件中以便于hexo 主题模板渲染页面使用。

3.在blog目录中渲染相册页面

拿到了图片信息json文件后需要编辑相册页面模板，你也可以自定义一些样式。在source目录中创建photos文件夹，在里面编辑ejs,js,css

4.部署

以上这些都弄完没问题之后就可以部署上去了(每次更新图片需要跑一下脚本更新json)

遇到的问题

在运行python脚本时候你可能会没有环境，简单，对照官网安装配置环境就好了。

安装PIL => pip install Pillow //图像处理库

然后还遇到里字符编码问题，保存的json文件中无法存中文。

因为Python2中默认的编码方式一般是GBK,需要在处理的中文字符串后.decode(‘gbk’) //将gbk编码的字符串转换成unicode编码

图片无法显示：

1.图片后缀是否保存正确
2.控制台查看引用的路径是否正确
3.图片是否已经成功上传到，并在仓库设置开启git pages

监听浏览器返回事件

1
2
3
4

window.history.pushState(null, null, null);//兼容
window.addEventListener("popstate", function(e) {
    //do something  
},false);

注意：ios8会有bug，页面加载的时候会直接执行监听的内容。

原因：浏览器版本，导致进页面就默认触发了popstate，导致了代码段执行，可以用下面的代码解决。

1
2
3
4
5
6
7
8
9
10
11
12

var obj = {
    params:{isRun: false},
    backTo:{
        //图一代码段
    },
    initBack:{
       var self = this;
       self.param.isRun = false;  
       setTimeout(function () { self.param.isRun = true; }, 1000); //延迟1秒 防止微信返回立即执行popstate事件  
       self.backTo();
    }
}

浏览器缓存问题

1.如是跳转页面 可以加时间戳

1
2

//调用
timestamp(getReferrer())

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

//定义函数
function getReferrer() {
    var referrer = '';
    try {
        referrer = window.top.document.referrer;
    } catch (e) {
        if (window.parent) {
            try {
                referrer = window.parent.document.referrer;
            } catch (e2) {
                referrer = '';
            }
        }
    }
    if (referrer === '') {
        referrer = document.referrer;
    }
    return referrer;
};

function timestamp(url) {
    var getTimestamp = new Date().getTime();
    if (url.indexOf("&timestamp") > -1) {
        url = url.split("&timestamp")[0] + "&timestamp=" + getTimestamp;
    } else {
        if(url.indexOf("?") > -1){
            url = url + "&timestamp=" + getTimestamp
        }else{
            url = url + "?timestamp=" + getTimestamp
        } 
    }
    return url;
}

2.可以在前页设置cookie或者session，设置标识判断

1
2
3
4
5
6

cookie.set('isDelateBack', '1');//前页 设置cookie

if(cookie.get('isDelateBack')=='1'){//后页 监听cookie,刷新页面(重置状态或清空cookie)
    cookie.set('isDelateBack','0')
    window.location.reload();
}

3.缓存机制是浏览器自带的， 不会发起请求和执行js代码。pageshow方法是无效的

后续

• 微信小程序自带返回在ios和安卓的区别。

• 新坑，ios11以上，position：fixed弹窗上弹出键盘输入，会导致定位的弹窗错位以及光标错位；换成absolute就好

更新于2018.02.09 20:10 (小年夜)

<web-view src="https://www.xxx.com?parmes=data&token=token"></web-view>

在内嵌的h5页面中通过
if(window.__wxjs_environment === ‘miniprogram’){}
判断当前环境是在h5还是小程序//需要引用JSSDK 1.3.1 以上版本
然后在进行相关的逻辑操作，最后带参数返回小程序

通过url传参

wx.miniProgram.navigateTo({url:'https:xxx.com?parmes=1&key=2'})onLoad: function (options) {    console.log(options);//{parmes=1,key=2}}

• 当前小程序不支持h5支付流程，只好调相关支付小程序或其他方法

• 目前往里跳转的页面路径最多只能十层

• 待续

• 可以细化操作，回调方法，但是在移动端（安卓）卡顿

二丶css3 animation

• 可以用@keyframes细化过渡效果，没有回调操作，只能监控animation/transition是否已完成。

三丶transform 过渡top/left 导致重绘，手机性能不好时依然卡顿

• 使用绝对位置定位页面上的动画元素，将其脱离文档流，可以有效的防止重排。

• 使用transform:translateY/X来移动元素 scale()缩放元素

• 加上 -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); 开启GPU硬件加速

• [参考链接]http://blog.csdn.net/majun0007/article/details/70049070

四丶RequestAnimationFrame

如果你需要细化过渡效果，但是使用setTimeout可能在性能不够的手机上还是会出现卡顿的情况，我就遇到了这样的情况。 setTimeout会存在过度绘制，会造成帧丢失，继而导致动画断续显示。这也是setTimeout的定时器值推荐最小使用16.7ms的原因（16.7 = 1000 / 60, 即每秒60帧）。而requestAnimationFrame是跟着浏览器绘制来的，不会存在过度绘制，也就不会出现动画卡顿的情况。
参考链接代码

五丶遇到的坑

• 元素display:none的时候是拿不到transform的值（其他属性没试），解决办法：用visibility: hidden;

• 过渡动画的时候，先让元素display:block 马上执行css3动画，结果浏览器直接忽略过渡动画，渲染最后的结果。

  解决办法：使用延时器，延迟一点css3动画的执行。

=>原因未知，将证书和key的路径改成相对路径就可以了

2. [emerg] shared zone “SSL” has no equal addresses: 02CC0000 vs 02CB0000

=>错误原因：ssl_protocols SSLv2 SSLv3 TLSv1 应该是协议配置的问题
=>解决办法：ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;

3. 如果是include vhost里的配置，则vhost里的conf配置也要加上listen 443;

Windows 下的 cmd 和 powershell 默认是 GBK 编码显示输出内容， 这导致使用 UTF-8 的 Python 程序中的中文内容（包括注释、文档、和字符串字面量）会以不正确的解码方式输出成乱码内容。

解决办法

Windows 内置了一个叫 “chcp” 的命令，它可以修改要显示的字符集编码的编号。UTF-8 的编号是 65001，所以启动 cmd 或者 powershell 以后可以手动输入：chcp 65001来改变编码。

启动 powershell 的时候带上修改编码的参数: “chcp.com 65001” 即可做到自动设置编码。设置如下:

选择：文件 - 首选项 - 用户设置，粘贴下面的配置键值到 json 中保存：

"terminal.integrated.shellArgs.windows": ["-NoExit", "/c", "chcp 65001"]

但是注意：仅靠修改代码页编号在 cmd 下仍然无法正常显示中文，需要进一步修改字体（有待考证）。
ps:(当我用默认的cmd,没换成poweshell时候,)
所以没有管 cmd 了，因为在 powershell 下是正常的。

修改 Terminal

选择：文件 - 首选项 - 用户设置，粘贴下面的配置键值到 json 中保存：

"terminal.integrated.shell.windows": "C:\\WINDOWS\\sysnative\\WindowsPowerShell\\v1.0\\powershell.exe"

附参考链接：

蓝雨博客

基础环境

https://www.python.org/ 下载python3.x安装包

安装好，并添加至系统环境变量。

虚拟环境virtualenv

1. pip install virtualenv
2. cd 到一个你想创建的目录路径
3. virtualenv venv 环境名称

二、基本语法

python对缩进要求非常严格，

如果格式有误则会抛出类似‘IndentationError: unexpected indent’的错误。

空格与tab不能混用，否则会报错。所以还是用两个空格吧><

数字

1. 正常的+，-，*，/，取余%和js都是一样的；
2. 除法（/）永远返回一个浮点数 15/3=5.0
3. 如果想取整可以使用（//）运算符 17//3=5
4. 计算幂乘方使用（**） 5**2=25
5. 交互模式中，最近一个表达式的值会赋给变量（_），这是一个系统内置变量

字符串

1. 和js一样，单引号‘’，双引号“”都可以表示字符串，\ 用来转义。
2. print() 函数生成可读性更好的输出, 它会省去引号并且打印出转义后的特殊字符
3. 如果字符串中的\字符被当作特殊字符，可以使用原始字符串，在第一个引号前加r

>>> print(‘C:\some\name’) # here \n means newline!
C:\some
ame
>>> print(r’C:\some\name’) # note the r before the quote
C:\some\name

4. 三个引号表示多行字符串文本，行尾的换行符会被自动包含在字符串中，可以在行尾加\来避免换行。
5. 字符串拼接用+，重复字符串用*；

>>> 3 * ‘un’ + ‘ium’
‘unununium’

6. python相邻的字符串会自动连接，但字符串和变量不会自动连。

>>> text = (‘Put several strings within parentheses ‘
‘to have them joined together.’)
>>> text
‘Put several strings within parentheses to have them joined together.’

7. 字符串自带索引，左边从0开始，负数则从最后一个字符开始。
8. 字符串自带切片,’Python’[0:2] = ‘Py’;

s[:i] + s[i:] 永远等于 s ; ‘Python’[:2] + ‘Python’[2:] = ‘Python’

9. len(str) 内置函数返回字符串长度

效果图:

1、Techniques used

• layui (phper推荐的,mmp)
• context.js (自定义右键菜单)
• highcharts,echarts (可视化图表)
• 等等还有一些其他东西

2、Problem

1. layui自称是一个模块化框架，首先引用它就和我们用的RequireJS模块加载器冲突了。

解决办法：
在app.js里需要配置路径，然后shim导出，然后在文件中还需要配置layui的指向

1
2
3
4

layui.config({
    dir: '//s1.bbgstatic.com/beacon-manager/js/plug/layui/',
    debug: false //
});

2. layui里一些东西无法灵活的配置，满足你的需求，这个没办法，不好用就不用呗

3. 柱状图x轴条数过多，倾斜，默认超出会自适应的滚动条的

   1 2 3 4 5 6 7 8 9 10 11 12

   xAxis: { min: 0, max :10, type: 'category', labels: { rotation: -45, style: { fontSize: '13px', fontFamily: 'Verdana, sans-serif' } } }

4. 一些正则和逻辑判断，continue break return

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

for(var i in urlData.conf){
    var _weight = urlData.conf[i].urlList[0].weights;
    var _url = urlData.conf[i].urlList[0].url;
    if(_weight==''&&_url==''){//为空就跳过，验证下一行
        continue;
    }else{
        if(_weight<0||_weight>100||!(/^\d+$/.test(_weight))){                                
            weightBoolean = false;break;
        }else{
            weightBoolean = true;
            if(!/https?:\/{2}[^\s]*/.test(_url)){
                urlBoolean = false;break;
            }else{
                urlBoolean = true;continue;
            }
        }
    }
}

if(!weightBoolean){    layer.msg('权重请输入1-100的正整数！', { icon: 5})    return;}if(!urlBoolean){    layer.msg('url格式输入有误，请检查后重新输入！', { icon: 5})    return;}

总结

       技术选型很重要，以后不要选layui这种啦。

基础操作

• 跳伞未开伞，视角往下按住W加速垂直下落，可以比其他人提前到达。

• 跳伞未开伞，视角向前，保持125km/h速度，按住w，可以尽量飞得远。

• 松开W按等号键自动奔跑，按住ALt键自由观看，可以在自动奔跑时观察周围。

• V切换第一/第三人称，第一人称更适合瞄准，第三人称适合观察。

• 持枪单击右键使用第一人称瞄准（使用瞄准镜的话只有单击右键才能看到）按住右键虚拟准星第三人称瞄准。

• 滚轮可以切换武器。

• Tab键可以捡周围物品，右键点击周围物品快速拾取，在东西杂乱的地方好用。

• 右键背包里的配件可以自动装在武器栏配件里。

• Q，E可以微微探头。

• 丢物品时按住ctrl可以选择数量。

• 密位Pg，up，Pg，down可以在有倍数瞄准镜的情况下调整校正。

• 拿到枪要换子弹..此时不能奔跑。

• T是附近/队伍语音。

• 开镜/机瞄时按shift屏息，稳定准星，无倍数镜时增加微量放大倍数。必须在静止不动时使用（神迹，用全息红点也能打很准很远）也可以用做望远镜。

• 步行时ctrl静步,游泳时ctrl下降空格上浮，游泳也可以用等号自动游。

• 驾驶车辆，快艇时按shift提速，会微微增加油耗。

• 载具中，ctrl+1/2/3/4在车里切换座位，1为驾驶2为副驾驶，行驶中亦可使用，主要用于队友司机被击倒之后恢复对车辆控制。

• 投掷类右键瞄准拉环，左键丢出，请不要按住右键不放手。

• 1、7条旁边有队友时候请格外小心。

• B切换枪的单发和连射模式，突击步枪蹲人的时候切换成连发比较占便宜，但是后坐力很大。

枪支&&配件

狙击枪：

　　AWM：伤害和射程之王，三级头也是一枪倒。

　　M24：不输AWM的一把狙击，二级头及以下一枪。

　　Kar98(karabiner，98，Kruz)：二战手动步枪，每一发.射击后要拉栓，一级及无.头一枪击杀，2级头一发99。

　　SKS：连狙，打头的击杀能力与Kar98差不多，身体要略逊一筹，10发弹匣，对枪法有自信的人近战可以当AK用。

　　除AWM用.300马格南，其他都是7.26。

　　AWM，与M24只能在补给箱获得。

　　狙击枪：你一个新手还能拿到？拿到能用就行啦。

突击步枪：

　　AKM口径大，伤害最高。

　　M16A4，射速最快。

　　M416，配件项目最多。

　　SCAR没有最好的地方，各项数据平均。

新手玩家推荐：

　　优先级

　　手枪P1911

　　霰弹枪S12K

　　冲锋枪UMP9

　　突击步枪：有什么拿什么兄弟！

手枪：
　　R1895：与AK一样口径的手枪，威力直追AK，缺点是怕3级防具与换弹速度慢。枪法自信的人可以初期清理附近的人使用，初期没有高级护甲2-3枪可以杀人。

　　P1911：很平均，新手可用，.45子弹。

　　P92：伤害最低射速最快，如果能中三枪，枪法好的人可用，不过初期杀人要三枪打底。

霰弹枪：

　　S686：两发一个弹匣，有少量的中距离能力，大概在一个房子的距离之内。

　　S1897：亮点在于五发弹匣，伤害很足，距离和稳定性差，打纯优势战斗（对方实力不足/单发手枪/S686）的时候可以用，冲房子的时候推荐S12K。

　　S12K：五发弹匣，连喷，有中距离能力，近战之王，最多两枪一个，推荐清屋子，巷战侧翼包抄使用。

冲锋枪：

　　Uzi：乌兹，总体数据不如UMP9，射速稍快，而且较为稀有，不推荐，不过经常看到Uzi的枪托。

　　UMP9：中规中矩，近战打头拼命伤害还是很足的，2级头三枪撂倒。

　　汤普森：.45手枪子弹，射速全游戏最高，100弹匣，有效范围直追突击步枪，适合近中距离作战，只能在补给里获得。

握把　　
垂直握把减少枪口的上下后坐力，直角握把能减少上下的后坐力与左右飘的后坐力，但是没有垂直效果明显，不知道为什么游戏数据装配垂直握把会没有增强属性，战术握把，M416专用，增加稳定性。

枪尾

　　子弹袋，分为Kar98用和霰弹枪用，作用和QuickDraw，相同，减少换弹时间和取枪速度，托腮板，增加稳定性，应该是只有狙击有这个。

　　瞄准镜我就不细说了，15x只有补给有，8x4x和无倍数都能在各处找到。红点和全息我推荐红点，全息的圈圈阻挡视野。

枪口：

　　消焰器、消音器、补偿器、扼流圈

　　消焰器顾名思义，消除枪口火焰，让你更难被发现，同时开高配时候机瞄会有枪口火焰阻挡视野，可以增加击杀几率，讲道理，低配真的没用。

　　消音器，效果非常好，然而找。到合适的真的很难，这游戏由于做了超音速子弹音效，本身就比较难靠枪声判定方位，加了消音器几乎是隐身击杀

　　扼流圈，只有霰弹枪能用，集中射击范围，相当于勉强增加了射程，有就带上。

　　补偿器，降低后坐力，连发时效果中等。

　　消音>补偿>消焰

弹夹

　　QuickDraw，单看属性，加的是射速，但实际上，是增加换弹速度，和，取枪速度。

　　快速弹夹，提高换弹速度。

　　扩容弹夹，能给百分之三十的容量，扩充，其实很有用，连续作战能力好。

　　双弹夹，是兼容，两项的，好东西，优先级，一定是，双弹夹>，扩容，快速

1

E:not(s1, s2, ...) {}

在css3中仅能匹配一个选择器,css4中可以匹配多个;

:not([data-xxx=”xx”],[data-xxx=”xxx”]);

可以用:not()来提高优先级 e.g .negation:not(p){ color:blue; } .negation { color: black; }

仅支持safari

2. :matches

1
2
3

E:matches(s1, s2) {}
E:-webkit-any(s1, s2, ...) {}
E:-moz-any(s1, s2, ...) {}

意义与:not()相反,匹配对应选择器,简化重复的规则

:matches(span, div) :matches(span, div) {}

支持大部分主流浏览器,不支持ie和Edge(win10内置浏览器)

3. :has

1

E:has(rs1, rs2, ...)

包含伪类选择器,匹配选择器

暂时没有浏览器支持

4. E:[foo=”bar” i]

1

E:[foo="bar" i]{}

属性选择器,忽略大小写

不支持ie,Edge和Chrome for Mobile

5. :dir

1

E:dir(ltr/rtl){}

根据文本方向匹配,从左到右或者从右到左

[dir=…]无法匹配到没显示声明 dir 的元素,:dir()可以

仅支持Firefox

6. :lang

1

E:lang(*-CA) {}

在css2中就被添加,css4中新增了通配符

暂时木有浏览器支持

7. :any-link

1
2
3

E:any-link {}
E:-webkit-any-link {}
E:-moz-any-link {}

超链接伪类选择器,只要a有href就能匹配,在以前只能a[href=value]

支持大部分主流浏览器,不支持ie和Edge

8. :scope

1

E:scope() {}

样式范围伪类选择器,style scope的父元素以内的范围

持大部分主流浏览器,不支持ie和Edge

9. :current / :past / :future

1
2
3

E:current(s1, s2, ...) {}
E:past(s1, s2, ...) {}
E:future(s1, s2, ...) {}

匹配当前,过去和未来的伪类选择器,类似歌词/字幕

给媒体元素规定外部文本轨道，当媒体播放时，这些文件可见
暂时没有浏览器支持

10. :drop

1

E:drop(active || valid || invalid) {}

匹配被拖动元素覆盖的元素(状态)

暂时没有浏览器支持

11. :indeterminate

1

:indeterminate {}

匹配不确定的元素,如Checkbox & radio,默认只有两种状态checked unchecked,
需要用js赋第三种状态document.querySelector(‘#id’).indeterminate = true;
支持所有主流浏览器

12. :default

1

E:default {}

匹配默认元素的伪类选择器,一组相近的ui元素中默认的,form表单的第一个按钮

不支持ie和Edge浏览器

13. Validity

1
2

E:valid {}
E:invalid {}

匹配input&form元素有效还是无效,e.g input type=’mail’ > input type=’tel’

兼容所有主流浏览器

14. Range

1
2

E:in-range {}
E:out-of-range {}

匹配input的值是否在规定范围区间

兼容主流浏览器,除了ie

15. Optionality可选性

1
2

E:required {}
E:optional {}

可选性伪类选择器,匹配表单内input是否必选

兼容所有主流浏览器

16. :user-error

1

E:user-error {}

匹配:invalid, :out-of-range, or empty :required,当用户与元素有了交互才能生效

不兼容所有浏览器.

18. :read-only / :read-write

1
2

E:read-only {}
E:read-write {}

前者匹配不能编辑的元素比如p,span,h1,h2..;后者匹配可编辑元素 contenteditable=”true”的元素.input textarea等

不支持ie和Safari for mobile,Opera for mobile

19. Placeholder-Shown

1
2
3
4

E:placeholder-shown { /* Style properties */ }
E::-webkit-input-placeholder { /* Chrome, Safari, Opera */ }
E::-moz-placeholder { /* Firefox */ }
E:-ms-input-placeholder { /* IE */ }

匹配有占位字符的输入框,给占位字符设置样式

兼容所有主流浏览器

20. :blank

1
2

E:blank {} 
E:-moz-only-whitespace { /* Firefox */ }

与css3中的:empty类似,区别是:empty中不能有元素,:blank中可以有;匹配空格,tab和段落换行

仅支持火狐,需兼容写法

21. Grid-Structural

1
2
3

E:column(selector) {}
E:nth-column(an + b) {}
E:nth-last-column(an + b) {}

匹配对应列的所有元素,:nth-last-column是从后往前数

暂不支持所有浏览器

附参考资料：

文档

Demo

遇到这个错误首先可以先尝试重新安装hexo-deployer-git依赖

npm install hexo-deployer-git –save

如果还是无法部署，可以尝试将.deploy_git文件夹删除，重新hexo g hexo d

效果图:

代码:

       显然这么写是不行的,增加了许多没意义的标签,可维护性也不好!整个文本就应该用一个标签包起来,这样也方便维护,所以就了解到了BFC(块级格式化上下文)

1、触发BFC的条件

float元素；overflow:auto,scroll,hidden,display :inline-block,table,table-caotionposition:absolute,fixed 

2、布局规则

• 里面元素不影响外面，完全独立
• 从上到下，同一父BFC内margin重叠
• BFC不与浮动元素重叠，浮动参与高度计算、
• 内部BFC margin 贴紧 外部border 左或右

注意: 在这里是用到了第3条.overflow:hidden触发了BFC,导致自己内部浮动元素高度参与计算,从而避免了高度塌陷.

改完之后:

<ul>    <li>        <i class="dot"></i>        <div>积分金额指有效真实消费，仅计算使用现金、信用卡、借记卡、步步高商务卡付款等实际付款金额。</div>    </li>    <li>        <i class="dot"></i>        <div>健身卡、课程卡、礼品卡、购买商务卡、优惠券（代金券）等礼券类付款部分、促销活动立减部分及积分抵扣部分、特殊品牌（详见门店公告）不参与积分。</div>    </li></ul> 

前面的dot需要浮动,文本段加上overflow:hidden即可

总结

       平时写代码的时候最好不要图快,抱着实现就可以了的想法,做到扩展性强,可读性好,方便维护.

————————[图1]十里画壁———————————–[图2]大坝眺望——————-[图3]大江口——–

       这里就放这几张图吧,本来我也挺喜欢旅游的,只是因为太懒了,以为没有什么比呆在家里更nice~但这次小旅行改变我的看法.一起爬观音崖,一起去大坝下面找螃蟹,乘船遨游大江口,参观博物馆,爬香炉山…除了这些之外还有一个有意思的项目就是狼人杀了,一直玩到凌晨都舍不得去睡…

猫

       最近一直想样一只小猫,原因有很多,没有立马行动也是因为有一些其他顾虑…但是相信不久之后,或者说等工作稳定了,便会立刻去领养一只并对它负责一生吧//

书

       看书的话,最近在看[解忧杂货店],之前就看了一半了,计划这个月看完,然后下个月看亲密关系

电视剧

       国产的楚乔传,冲着颖宝和林狗去看的,没看过小说,剧情有点拖沓,勉强能看;美剧-权利的游戏第7季终于在7-17开更了…据说只有第七季和第八季了,龙妈和异鬼在两边杀,所以发便当的速度会非常快~总而言之,这是一部非常值得一看的剧~

结束

webpack是一个模块打包工具，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。

为什么是WebPack

1.模块化

• 将复杂的程序细分成小模块,通过可以将其他资源转换成 JavaScript 的加载器，实现一切皆模块
• 对 CommonJS 、 AMD 、ES6的语法做了兼容，以及特殊模块的 Shim 处理(shim:为那些没有使用define()来声明依赖关系、设置模块的”浏览器全局变量注入”型脚本做依赖和导出配置。)
• CommonJS模块必须通过 module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中
• 异步加载,模块通过 define 函数定义在闭包中,return返回

2.开发便捷

• 能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等
• 对 JS、CSS、图片等资源文件都支持打包，配合 loader 加载器，也可以支持 Sass，Less 等 CSS 预处理器
• 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，通过 babel-loader 就可以直接使用 ES6 的模块机制
• 具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活。

3.性能更优

• 基于配置智能分析打包多个文件，实现公共模块按需加载
• 在内存中打包，性能更快
• 使用异步io,并具有多级缓存

4.区别于gulp&&grunt

• Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
• Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件

文件目录

|—— app|   |—— Greeter.js|   |__ main.js|   |__ module.js|   |__ color.scss|   |__ module.js||—— public|   |—— bundle.js|   |__ index.html||—— node_modules        //依赖|__ package.json        //环境配置|__ webpack.config.js   //参数配置

WebPack安装与配置

npm install -g webpack              //全局安装npm install --save-dev webpack      //当前项目中安装npm install                         //安装依赖npm install -g webpack-dev-server   //安装webpack开发服务器

插件

1.css - ExtractTextPlugin

WebPack常用命令

• webpack 最基本的启动webpack命令
• webpack -w 提供watch方法，实时进行打包更新
• webpack -p 对打包后的文件进行压缩
• webpack -d 提供SourceMaps，方便调试
• webpack-dev-server –open 静态资源服务器

静态资源服务器

npm install -g webpack-dev-server   //安装webpack开发服务器 

从WebPack 1.X 迁移到 WebPack 2.X

1.Resolve

resolve.extensions 不再需要传入空字符串，extensions: [‘’, ‘js’] -> extensions: [‘js’]。

2.Module 取消了在模块名中自动添加 -loader 后缀

module.loaders 修改为 module.rules 。
// 为了兼容旧版，module.loaders 语法仍然有效，旧的属性名依然可以被解析
Loaders 需要添加 -loader，如 babel -> babel-loader 。

module: {    rules: [      {        use: [          //"style",          "style-loader",          //"css",          "css-loader",          //"less",          "less-loader",        ]      }    ]  }

3.链式 loaders

与 v1 版本相同，loaders 可以链式调用，上一个 loader 的输出被作为输入传给下一个 loader。使用 rule.use 配置项，use 可以设置为一个 loaders 的列表。在 v1 版本中，loaders 通常被用 ! 连写。这一写法在新版中只在使用旧的 module.loaders 时有效。

4.Extract-Text-Webpack-Plugin

module: {  rules: [    test: /.css$/,     //loader: ExtractTextPlugin.extract("style-loader", "css-loader", { publicPath: "/dist" })     loader: ExtractTextPlugin.extract({       fallbackLoader: "style-loader",       loader: "css-loader",       publicPath: "/dist"     })  ]} 

567…

参考资料

• 官方文档(https://webpack.js.org/guides/get-started/)
• 中文文档(https://doc.webpack-china.org/guides/get-started/)