爱客仕-前端团队博客园

发表于 |

为什么要了解浏览器渲染页面和加载页面的机制?
1.了解浏览器如何进行加载，我们可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。
2.了解浏览器如何进行解析，我们可以在构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率。
3.了解浏览器如何进行渲染，明白渲染的过程，我们在设置元素属性，编写js文件时，可以减少”重绘“”重新布局“的消耗。

阅读全文 »
爱客仕-前端团队博客园

发表于 |

前言

因为路由权限问题，简单的看了一下vue-router（v0.7.13）。整理了一下router的一个简单过程

beforeEach -> canReuse -> canDeactivate -> canActivate -> deactivate -> afterEach -> activate

其中canDeactivate | canActivate | deactivate | activate这几个钩子涉及组件复用的问题，所以有可能不会被调用，但是当canReuse返回false时，就一定会被调用了

注：canDeactivate，deactivate与canActivate，activate分别作用于要销毁和要生成的组件。
如：a/b -> a/c，这里b组件要被销毁，c组件要被生成。

阅读全文 »
爱客仕-前端团队博客园

发表于 |

前言

输入验证在前端开发中必不可少，在vue的开发过程中，vue-validator作为目前项目中在用的一个验证插件，其用法还是比较简单直观的，vue-validator API也对验证的使用做了较为详细的讲解，但是仍然有一些隐藏的点是平时注意不到的，特别是随着需求的不断变更，前端的验证也要灵活变化。

基本用法

一个最简单的表单验证大概是这样的：

1
2
3
4
<validator name="validation">
  <input type="text" v-validate:name="['required']">
  <p v-if="$validation.name.required">不可为空</p>
</validator>

验证器名称是由validator元素的name属性加$前缀组成，上例中验证器名称为$validation,在每次input标签的value值发生改变时触发验证，并将验证的结果保存在验证器中。$validation验证器的各个字段的属性及验证结果，如下图所示：

阅读全文 »
爱客仕-前端团队博客园

发表于 |

开篇词

最近这两年，如果作为一个前端程序员，要是还没听说过虚拟DOM，那基本就可以说是不合格的，但一般前端主要还是在交互，动画，数据通讯上面做一些事情，很少会涉及到编译方面的东西，虚拟DOM一听就挺虚的，就好像飘在那儿，似乎知道怎么回事，又说不出个所以然来，要是说自己实现一个，那简直可以说是无头无绪，一个偶然的机会，让我必需要面对这个问题，索性就研究了一下，并把我的感想和思路在这里分享给大家

阅读全文 »
爱客仕-前端团队博客园

发表于 |

一切从vue-cli开始

知乎上1个问题，学v1还是v2，引用一个回复

凡事为啥一定要纠结呢？这世上除了二选一，非黑即白以外，其实往往会有第三个选择。
当然是可以一起学的呀！
真正做东西用 Vue 1.x，做的时候你才会遇到远比框架本身更多的问题，然后顺着报错信息到网上找答案，这时候才是展现生态力量的时候。
而与此同时，看看 Vue 2.x 的源码，就当学习 ES6 语法、API 设计、项目构建等等，不要忘了框架作为一个「项目」本身也是有很多值得学习的地方。

马上装起来，必须先全局安装vue-cli

1
2
npm install -g vue-cli
vue init webpack my-project

ps:默认安装vue2，要回顾vue1的，可以用

1
vue init webpack-simple#1.0 mynewproject
阅读全文 »
爱客仕-前端团队博客园

发表于 |

本来打算写一下网络工具在开发中应用的文章，不过呢，咱公司网络工具用的不是很多，只是在用charles, gas mask 和 mamp没有用，好像是也没有用的必要。而且真要写，篇幅也是挺大的。

所以呢，咱就写篇接地气的，解决一个痛点。刷知乎居然要用鼠标，不能忍。

大家在刷知乎的过程中，可能会点赞，收藏，关注，这些行为都会在 最新动态 中展示。如果想要回味一下自己感兴趣的东西，刷一遍 最新动态 那是极好的。

阅读全文 »
爱客仕-前端团队博客园

发表于 |

格式化金额之一般式

场景是这样，一件商品，会在页面上显示价钱，如果是街边上的一家煎饼馃子摊铺，那一般可能是这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
    <div>￥{{data.price}}元</div>
</template>
<script>
export default {
    data() {
        return {
            data: {
                price: 5
            }
        }
    }
}
</script>

渲染结果如下：

1
<div>￥5元</div>

这样好像没什么问题，但是（一但有了但是，就好像有什么不好的事情发生），如果这是汤臣一品的一套房，那就是另一番景象了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
    <div>￥{{data.price}}元</div>
</template>
<script>
export default {
    data() {
        return {
            data: {
                price: 5000000000000000
            }
        }
    }
}
</script>

渲染结果如下：

1
<div>￥5000000000000000元</div>

谁能告诉我，这是多少钱，我这辈子还有希望么，这还让不让人活了，感觉还是回家种田吧，大城市里太陌生，我干了这么多年的活，居然买不起一块地砖，呜。。。。。。。

阅读全文 »
爱客仕-前端团队博客园

发表于 |

首先这是一个问题，但通过标题没法很好的表述出来，而大多数童鞋应该不会遇到这样的问题，然而我还是决定记录下来。

我们知道，npm3把所有依赖模块路径拍扁了(工程目录下的node_modules出现了很多package.json中没有声明的模块)，解决了windows下路径名过长的问题，更使得公共依赖被充分共享。但如果多个模块依赖了同一个模块的不同版本，后安装的模块，为了不和别人冲突，就只能将这个依赖安装在自己的node_modules下。

阅读全文 »