前端开发基础

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

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

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

一个简单的去重问题引发的思考

今天写业务的时候偶然碰到了一个数组内去重的需求.想想看这应该算是一个经典面试题了吧,当然也十分简单没什么花头,写出来大概是这样的:

一个最简单的排序后去重

  1. var a=[1,2,3,4,4,3,2]
  2. a=a.sort(); //先排序
  3. var b=[];
  4. for(var i = 1; i < a.length; i++){
  5. if(a[i] !== a[i-1]){
  6. b.push(a[i]);
  7. }
  8. }
  9. console.log(b).

写起来真是太简单了,先排序,然后对它做一个循环判断是不是两两相等就可以了.是不是so Easy?顺手写成一个function吧.

  1. function sortarr(arr) {
  2. arr=arr.sort();
  3. var b=[];
  4. for (var i=0;i<arr.length;i++){
  5. if(arr[i]!==arr[i-1]){
  6. b.push(a[i])
  7. }
  8. }
  9. return b;
  10. }

这样我们就可以直接调用sortarr这个函数进行去重了.

等等,就这样结束了?Nope.

优化后的写法

这种写法只是用源生JS的最基础写法,或许我们可以优化一下?比如,使用hash方法?

  1. function sortarr (arr) {
  2. var hash = {}, result = [], item;//声明一个hashObj(哈希表),一个res数组,一个item值
  3. for (var i = 0; i < arr.length; i++) {//在函数中以传入对象的长度为限度做循环
  4. item = arr[i];//将传入对象的值赋给items
  5. if (!hash[item]) {//如果哈希表中没有当前项
  6. hash[item] = true;//存入哈希表
  7. result.push(item);//将当前数组当前项存入结果数组
  8. }
  9. }
  10. return result;
  11. }

这样,我们就用O(1)-O(n)复杂度的另外一种方法实现了去重,并进行了初步的优化.


现成的用法

好的好的,我们已经理解了它的算法思想.但是实际上我们

Title - Artist
0:00