2017-11-10 02:53:54 |  0 Comments

0.1+0.2+why?+extra

#0.polyfill解决: ES6中,已经有解决方案Number.EPSILON.当然也可以为之前的版本提供polyfill: if (!Number.EPSLION){ Number.EPSILON=Math.pow(2,-52) } #1.Question 众所周知,JS里0.1+0.2并不等于0.3.但是知道归知道,这是为什么,又怎
 2017-11-02 02:32:55 |  0 Comments

一个可编辑表格+第三方打印程序的复杂bug调教过程

#Target 表格打印想必很多人都做过,但是做成我们这项目这样沟壑众多好不容易才填平的还真的不多.仅以此记录这令我印象深刻的三天. #一.一个需求. 公司要做结算单打印,2.0版本的系统中正在做,但是产品说要提前到1.5来做. 想要做打印怎么做呢?我们的Winform壳是C#的,并不能使用现成的HTML2Canvas等库再调用window.print.于是技术大佬们商议之后决定买一个插件来
 2017-10-17 03:47:11 |  0 Comments

一个伪Select组件的开发过程

今天接到了一个需求:改动车型选择的样式.

本来是一个简单的select,需求要求做成这个样子的:
title
其实说起来这个东西并不算难,不过一些小细节浪费了我一些时间.于是决定还是把细节写出来,让自己以后不要踩这些坑.

整体思路与需求

这么一个组件分左右两边.左边是A-Z,右边是品牌的选择.当点击左边的时候,跳转到右边以该字母开头的品牌.接口的数据已经返回了车牌和首字母.
那么这个一个组件,应该拆分为左右两个部分.

左边部分

左边为A-Z的字符.众所周知,这种select当然是用absolute,然后用flex做竖向排列,没有什么困难.但是这里有一个细节:A-Z应该怎么实现呢?

最开始我想着是写死.但是后来发现了一个问题,那就是我在后面的跳转中需要点击一个索引后以(该字母开头的项目数*每个选项的宽度值)做scoll的跳转.
如果写死,那么我就需要取[A-Z]这个数组中第i个字符处于的位置值,显得很愚蠢:我既然都已经确定是26个字符了,还要重新循环一次取索引,这不是又多干一次事吗?所以更好的方法应该是将索引转化为A-Z.
于是我写了这样的生成函数:

  1. initializationList: function () {
  2. for (let i = 0; i < 26; i++) {
  3. this.letterlist.push(String.fromCharCode(65 + i))
  4. }
  5. },

这样即可生成26个字母,同时索引在后面还能继续用.

右边部分

右边部分的要求只有两个,一是点击左边部分会跳转至右边部分对应的值,二是根据点击的值进行返回.有了思路写起来就很简单了.

  1. setRightScoll: function (sortnum) {
  2. this.brandList.forEach((item,index) => {
  3. if (item.FirstLetter == String.fromCharCode(65 + sortnum)) {
  4. document.querySelector('.car-sele
 2017-10-14 06:38:31 |  0 Comments

自定义Title属性的难题.

项目优化出现了一个这样的需求:

这样的表格,当缩小时,hover显示全部内容.
title
咋一看很简单,不就是加个title属性嘛.就哼哧哼哧的把表格内容都加了个title.

然后就懵逼了:公司项目用的C#壳不支持title属性.这可咋整?请教带我的老哥,他直接说:

那你就一个个画弹出的弹出层啊.

不是我不愿意做啊,先不说一直复制粘贴,就算我真的做了,这工作量得做到啥时候去?肯定有更好的办法.

先是灵机一动:增加hover属性,让hover的时候单元格变大,不就一样可以达到显示全部文字的效果?
try2

然后产品表示:你这个跳来跳去的.体验更差了.
我表示可以左侧固定然后加过渡动画,但是产品并不认为这样好,坚持要加浮动层提示.

好吧好吧,看起来需求是定死的,那就想想如何优雅的实现吧.
一个个画似乎太过于没意思了.于是我想到了使用伪类.
具体思考和写的过程不提,最终写成了这样.

  1. .hoverlist th:hover::before{
  2. transition: all .5s;
  3. margin-left: -30px;
  4. margin-top: -30px;
  5. content:attr(data-msg);
  6. position:absolute;
  7. display:inline-block;
  8. color:#333;
  9. border-radius:5px;
  10. font-size:10px;
  11. }

只说碰到的坑.
第一,父元素一定要设置为relative,否则会出现样式错乱.
第二,这样写不能带边框等样式,否则在没有内容的时候会出现小黑点,需要另外做处理.
第三,content很强大.之前我没有做过这样的应用,之后要慢慢补起来.

图片标题
再进行一部分的样式美化:

图片标题

可以看到这里是有一个问题的.当标签没有data-msg这个attr的时候,一样会显示这个伪类.

如何解决?这里我有两个解决思路:一是通过nth-child去控制元素是否带有这个伪类,另一个是直接用visibility的值去控制这个伪类的显示与否.那么如何才能根据attr的存在与否确认visibility的值呢?

1

 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);
Title - Artist
0:00