2018-01-09 07:02:55 |  0 Comments

JS-面向对象(其实并不是)造轮子(未完成)

有小伙伴问我为什么这么多天没有写博客了.其实本来是想做之前的面向对象思想整合+JS深入浅出部分笔记碎片整理的,像这样. ![](/api/file/getImage?fileId=5a54ae4493e9970910000b89) 零碎的笔记一共写了七八篇,整理起来却一直觉得不得门而入.我一直在质问自己,我真的懂了JS的面向对象吗?当我写了一个Class的时候,我真的知道自己在干什么吗? *
 2017-12-07 01:04:57 |  0 Comments

一段小代码看出水平差距

一个很简单的功能: ![](/api/file/getImage?fileId=5a28d9f693e9970919000090) 我这个菜鸡思考了一会儿,写出了这样的代码. const getPageTags = function () { const AllNode=document.querySelectorAll("*
 2017-12-06 01:46:46 |  0 Comments

实现一个简易版Promise-2.Promise 实现

这一部分我参考了: [史上最易读懂的promise完全实现](https://zhuanlan.zhihu.com/p/21834559) [promise.js中的core部分](https://github.com/then/promise/blob/master/src/core.js) #构造方法 我们默认使用原生的Promise构造方法,也就是: var promise =
 2017-12-04 22:46:08 |  0 Comments

实现一个简易版Promise-1.Promise A+规范文档翻译

翻译完成后的版本我将其转换成了PDF,放在附件中下载. #Promise A+ **一个标准的,能够进行共同操作的JavaScript Promise - 由一线工程师为一线工程师所制定.** 一个Promise代表着一个异步操作的最终结果.与它进行互动的主要方式是then方法.它注册了两个回调函数,一个用于处理Promise成功返回的结果,一个用于处理失败返回的结果. > 从这里我们已经可以
 2017-12-03 17:10:45 |  0 Comments

实现一个简易版Prmise-0.开始,文档地址与下载

一直想实现一次Promise来彻底理解Promise的来龙去脉.今天正好有这个机会,那么就试试看实现一个简单的Promise来理解Promise吧. 要实现一个Promise,首先应该了解啥是Promise.那么第一步,我们首先要搞清楚什么是Promise.辗转了许多地方,发现Promise其实是由Promise规范规定的.Promise规范大概在这里能看到. [戳我](https://pr
 2017-11-26 09:06:57 |  0 Comments

函数相关知识总结

#函数声明的定义方式 ###1.匿名函数. function(){ return 1 } 其实这就是一个匿名函数了,只是你没有办法引用它.浏览器会认为你说的是废话,于是不给通过. 所以我们需要找到一个信标,在栈里给这个存储在堆里的函数一个信标,以便找到这个函数. var fn = function(){ return 1 } 如
 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

Title - Artist
0:00