2017-10-11 21:06:11 |  0 Comments

<转载>如何成为一名厉害的程序员

其实我一般是不转载的,不过这个写的确实不错啊~分享一下.
title

 2017-10-11 03:47:53 |  0 Comments

Vue.JS常用语法糖

常用语法糖

1.@xxx.stop

@xxx.stop =>阻止冒泡,等于传入$event并且在触发的事件中调用源生的$event.cancelBuble=true进行阻止冒泡.

2.@keydown.keyCode/Enter="xxx"

捕获KeyCode对应事件.对照表:
title

3.{{msg}}

3-1.{{msg}}

v-model绑定的值变化则模板变化

3-2{{*msg}}

v-model绑定的值变化模板不变化(仅绑定一次)

3-3{{{msg}}}

将msg转义为HTML内容

3-4{{msg | filter}}

在vue1.0中,存在一些默认的过滤器.但是在2.0中,这些过滤器已经被废弃.所有需要使用的过滤器均需要自己定义.比如,如果我们需要写一个转换至大写的过滤器,在1.x中:

  1. {{'test' |uppercase}}

但是在2.0中,这样写是无效的.所有的过滤器都需要自己定义.那么要定义一个转换未大写的至大写的应该是这么写

  1. Vue.filter('uppercase', function(value) {
  2. if (!value) { return ''}
  3. value = value.toString()
  4. return value.toUpperCase()
  5. })

传入value,return一个处理后的值,就可以直接用filter做值处理了.

4.is

使用方法:

  1. <p :is="xxx"></p>

此处的xxx填想要渲染到此处的组件.

常用的简单封装(EasyMock)

1.vuex中封装axios请求.

  1. const store = new Vuex.Store({
  2. // 定义状态
  3. state: {
  4. author: 'codermagefox'
  5. },
  6. actions:{
  7. saveForm(context){
  8. const mock="https://easy-mock.com/mock/59dc3b441de3d46fa94caf6e/example"
 2017-10-08 02:37:08 |  0 Comments

【一道有趣的题】442. Find All Duplicates in an Array

原:

  1. Given an array of integers, 1 a[i] n (n = size of array), some elements appear twice and others appear once.
  2. Find all the elements that appear twice in this array.
  3. Could you do it without extra space and in O(n) runtime?
  4. Example:
  5. Input:
  6. [4,3,2,7,8,2,3,1]
  7. Output:
  8. [2,3]

这个就不用翻译了,干巴巴的。要求其实很简单,就是找出出现不止一次的数。拿到手似乎能想到无数多的做法:

  1. 双重循环判断。
  2. sort以后循环一次找相邻数是否相同。

等等。

但是题目要求不能开辟新空间,并且要在O(n)内完成,这就有点意思了。先不管它,先随便写个方法完成了。

  1. var findDuplicates = function(nums) {
  2. var arrs=[]
  3. nums.sort()
  4. nums.forEach((item,index)=>{
  5. if(nums[index+1]===nums[index])
  6. {arrs.push(nums[index])}
  7. })
  8. return arrs
  9. };

嗯,但是这么做违反了不能开辟新空间的规定,很明显是不对的。我仔细思考了一下,如果按照这个思路似乎没有办法不新增空间。于是我想了想:

  1. var findDuplicates = function (nums) {
  2. let result = [];
  3. let len = nums.length;
  4. for (let i = 0; i < len; i++) {
  5. let idx = nums[i] % len;
  6. if (nums[idx] > len) {
  7. result.push(idx || len);
  8. } else {
  9. nums[idx] += len;
  10. }
 2017-10-03 09:02:13 |  0 Comments

【一道有趣的题】 LeetCode 463. Island Perimeter

原文:

You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 represents water. Grid cells are connected horizontally/vertically (not diagonally). The grid is completely surrounded by water, and there is exactly one island (i.e., one ormore connected land cells). The island doesn't have "lakes" (water inside that isn't connected to the water around the island). One cell is a square with side length 1. The grid is rectangular, width andheight don't exceed 100. Determine the perimeter of the island.

Tran:

你得到一张二维整数网格的地图,其中1代表土地,0代表水。网格单元是水平的/垂直的(不是对角的)。网格是完全被水环绕,有一个岛(即一个或多个连接地块)。这个岛没有“湖泊”(里面的水与岛上的水没有联系)。一个单元格是边长为1的正方形。网格是矩形,宽度和高度不超过100。确定该岛的周长。

enter image description here

这道题应该就是常规的找规律题。稍微观察一下,应该能够看出一个1对应的就是4条边。这个Example一共7个正方形,如果不算重复边,对应的也就是4X7=28条边。可以看到,重复边一共有6条,对应着12条重复边,所以本图的解为16.

那么规律应该就是:总方格数*4-重复边*2=边数.
但是怎么判定是否是重复的边呢?

其实也很简单。遍历每一行,如果第[i][j]个元素的[i-1][j]/[i+1][j]/[i][j-1]/[i][j+1]个元素为1,那么就判断有一个重复边。一开

 2017-09-23 02:01:39 |  0 Comments

Mobike国际化中的应用 PPT

1.Vue在摩拜国际化中的应用

title
title
每次国际化方案需要参与的人很多,沟通的部门很多,体现的价值是快不快.

痛点:

  1. 谁去同步内容.
  2. 谁去更新到不同的项目里面
    解决方法:GoogleDoc用API请求,使用Node脚本渲染.

title
title
推荐第一种.
title
不要站在前端而是站在整个Devops的角度去想i18N.
title
title
title

结合方式:Vue插件,$t('errorText')

title
title
title
问题:我们真的在任何环境下都需要同步到所有语言吗?
title
title

2.美团点评Vue SSR实战

title
title
title
title
title
title
title
title
title
title
title
title

 2017-09-13 07:27:47 |  0 Comments

Vue.JS中,解决不同页面组件之间传值问题的尝试与总结

起因:

今天测试给我提了一个BUG,大概是这样的:

有组件A,B,C,组件AC为路由跳转的两个不同的页面,B为A的子组件.现在我在组件C中做了一个操作,按照逻辑来说,B应该要刷新(调用接口数据)但是现在B没有刷新.

首先在心里默默诅咒了完全不理逻辑的产品,抽奖式开发失败,然后尝试解决这个问题吧.

简单的思路当然是利用正常的传值.

带我的老哥在框架里已经写好了现成的PageUpdate参数对应的方法.
Created下的ADDPAGE:

  1. window.AddPage = (pageName,url,alias,closeThis,execAPI,execParams)=>{
  2. //pageNavC.methods.addPage({name:pageName,url:url});
  3. execAPI = execAPI?execAPI.toUpperCase():'';
  4. if( closeThis ){
  5. this.closePage(this.showIndex);
  6. }
  7. for( var i in this.pageList ){
  8. if( this.pageList[i].name == pageName && ( !this.pageList[i].alias || this.pageList[i].alias == alias )){
  9. this.showIndex = i;
  10. if( this.pageList[i].url != url){
  11. this.pageList[i].url = url;
  12. }
  13. execAPI && document.querySelectorAll('iframe')[i].contentWindow[ execAPI == 'INIT' || execAPI == 'EXIST_INIT'?'_PAGE_INIT':'_PAGE_UPDATE' ](execParams);
 2017-08-30 11:14:47 |  0 Comments

实现一个菱形图片框所带来的思考

今天准备把我的博客头像CSS换成菱形的,顺便进行一次CSS练习.在更换的过程中发现了一些问题,写个总结积累一下.

原来的头像是这样的:

CSS:

  1. #blogPhoto
  2. {
  3. width: 155px;
  4. height: 160px;
  5. margin-top: 1px;
  6. }
  7. #blogPhoto img
  8. {
  9. display: block;
  10. width: 155px;
  11. height: 160px;
  12. border: 1px solid #f7f7f9;
  13. border-radius: 6px;
  14. };

嗯,要做成菱形边框,首先想到的当然是使用rotate进行裁切.

  1. #blogPhoto
  2. {
  3. width: 155px;
  4. height: 160px;
  5. margin-top: 1px;
  6. transform:rotate(45deg);
  7. overflow:hidden;
  8. }
  9. #blogPhoto img
  10. {
  11. display: block;
  12. width: 155px;
  13. height: 160px;
  14. border: 1px solid #f7f7f9;
  15. border-radius: 6px;
  16. transform:rotate(-45deg);
  17. };

但是事情并没有如同我想象中的发展...

title

这是怎么个意思?我有点懵逼.不然就裁成这个形状算了?不不不,还是搞明白到底咋回事比较好.

仔细想了一下,问题应该出在Width上.在我们的CSS中,子IMG的宽度和父元素是一样的.

但是这是我们的需求吗?不,我们的需求是菱形,此时,图片的宽度应该和图片的对角线一样.

图片的对角线长度是多少?这就要用到我可怜的高中数学勾股定理知识了:

一个正方形的对角线长度等于它边长的根号2倍

所以width应该是155px的根号2倍,也就是219.17px.
正准备写,突然发现.我不是可以直接缩放吗?缩放不就不用考虑是多少像素大小了?

  1. #blogPhoto
  2. {
  3. width: 155px;
  4. height: 160px;
 2017-08-28 08:29:06 |  0 Comments

0.HTTP协议权威指南 开始

1.2 web客户端和服务器

web内容是存储在web服务器上的,web服务器使用的是HTTP协议,因此经常被成为HTTP服务器.

URI:Uniform Resource Idntifier,URI.
URI有两种形式,URL和URN.(现在绝大多数都是URL)

1.3-1 媒体类型

最初设计是为了解决在不同的电子邮件系统之间搬移报文时存在的问题.

1.3-2 URL

URL:统一资源标示符.它描述了一台特定服务器上某资源的特定位置.
URL标准格式:

Scheme+因特网地址+服务器上的某个资源

Ex:
http://www.codermagefox.com/index.html

http://:HTTP协议,Scheme
www.codermagefox.com:因特网地址.
index.html:指定资源地址.

1.3-3 URN

URN为统一资源名,作为特定内容的唯一名称使用者,与目前资源所在地无关.比如RFC2141,不管它处于何处,我们都可以用下列URN来命名它:

urn:ietf:rfc:2141

1.4 事务

一个HTTP事务由一条(从客户端发往服务器的)请求命令和一个(从服务器发回客户端的)相应结果组成.这种通信是通过名为HTTP报文的格式化数据块进行的.

1.4.1 方法

HTTP支持几种不同的请求命令,这些命令被称为HTTP方法(HTTP method).这个方法会告诉服务器要执行什么动作.
常见的五种:

  1. GET:从服务器向客户端发送命名资源
  2. PUT:将来自客户端的数据存储到一个命名的服务器资源当中去
  3. DELETE:从服务器中删除命名资源
  4. POST:将客户端数据发送到一个服务器网关应用程序
  5. HEAD:仅发送命名资源响应中的HTTP首部

(详细在第三章)

1.4.2状态码

每条HTTP响应返回时都会携带一个状态码.状态码是一个三位数字的代码,告知客户端是否请求成功,或者是否需要采取其他动作.

200:OK,文档正确返回
302:Redirect(重定向)
404:NotFound.

1.4.3web页面中的多对象

一个web页面通常不是单个资源,而是一组资源

 2017-08-27 03:10:22 |  0 Comments

冒泡,捕获和事件委托

0.起因

前几天写业务的时候,碰到了这样的需求:

title

checkbox在父DIV的里面,但是checkbox绑定了v-model,要求点击图片的时候让checkbox状态改变.

这个需求说起来挺简单的,绑定之后写一个方法,让checkbox的值跟着走就行了.但是我碰到了几个小问题.解决不难,但是我希望能够进行输出并追根问底,形成自己的知识体系.

那么,开始吧.

1.修改状态带来的问题.

input中checkbox的代码简化如下:

  1. <input type="checkbox" v-model="pro.IsSelect" @click.stop="test(pro)">

已知这个checkbox在一个大的div内,但是现在的问题是,大的DIV上绑定了一个这样的事件:

  1. prochange:function(data){
  2. data.IsSelect=!data.IsSelect;
  3. },

可以看到,我使用这一个事件进行checkbox状态的修改
这样会产生一个问题,那就是我在点击大DIV的时候会正常触发事件,但是点击小的checkbox则不会.

解决方法很简单,在小事件上加上阻止事件冒泡即可.

  1. .....@click.stop="test(pro)">

这样就解决了.但是我心中的疑惑还是没有消除.冒泡究竟是怎么样的?我粗浅的知识应付工作是足够了,但是我真的了解冒泡吗?

2.冒泡和捕获,关于事件监听

解决问题的第一个方法当然是找资料.我之前进行过捕获冒泡相关知识的学习,但是印象并不是很深刻,我觉得我有必要重新总结一下.

2-1鼠标点击事件的区别

在我鼠标左键点击网页的这一刻,究竟发生了什么?我想大概是:

  1. 系统级API捕捉到了我的鼠标的动作
  2. 系统将这个事件传递给浏览器.
  3. 浏览器通过DOMAPI通知网页.
  4. 网页进行事件对应的操作.

2-2原始的方法-事件绑定

DOM Level2(链接至我认为将DOM level说的比较清楚的文章)之前,其实能够使用的方法只有事件绑定.

没错,就是古老的xxx.onclck方法.

而DOMlevel2的介绍是这样的:

DOM2级引

 2017-08-27 03:06:06 |  0 Comments

Vue+Jenkins自动同步测试环境搭建

每次写代码都会被测试烦到,Bug标了解决还是追着问为啥测的时候还没解决啊?答曰还没发测试,又被追着问啥时候发啊?于是只能说好好好这就发,发测试环境又得先build,我的i7 256GSSD 12G内存Build都慢的一笔,烦不胜烦。想了想,其实测这种项目完全可以不用Build,Vue自己数据驱动,编译以后直接就出结果,命令都省了。为了优化流程(偷懒),这不上Jenkins能忍?

(此处应有图片:愤怒的切图仔)

上Jenkins之前我首先考虑了一下要不要上Docker,后来想想看还是算了。一则本来就准备弄个虚拟机当服务器,再弄个docker没啥必要。二则需求也不是很复杂,就装个Jenkins就好,直接上手简单暴力。

首先,打开
Jenkins
下载最新版的Jenkins,然后用Xshell/SSH/Samba随便什么方法把它拷到你的随便什么目录下(在这里我使用的是用户目录)

然后开始安装?不不不,你还没装JDK呢。输入:

yum search java|grep jdk

找到各种版本的JDK。随便挑一个,就:

yum install java-1.7.0-openjdk

等它装完就成。哦,最好不要装1.6以下,我被坑了一次。

下一步正式开始装Jenkins了。CD到你使用的目录:

cd ~

这东西最好是放在后台运行,不然你没法打其他命令。确保这个目录下有你下载的jenkins.war文件,然后输入命令:

nohup java -jar ./jenkins.war --httpPort=80

为什么要映射到80?因为方便啊...

然后CD到你的项目目录,我的目录是用户目录/web。项目怎么跑我想我应该没必要说明了。直接:

npm i
nohup npm run dev > /dev/null 2>&1 &
这样后台运行项目也好了。然后我们来设置Jenkins.

打开浏览器,输入http:

Title - Artist
0:00