发表于 |

1 前言

我们在开发手机版网页的时候，常常会出现下面的情景：

(1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log；

(2) 上线后，某用户表示页面失灵，但我们自己又重现不出来，看不到用户侧的出错信息。

如果说(1)还可以通过电脑连接手机以查看log来解决，那(2)在没有完善的前端上报体系时就非常被动了。
作为开发者，我们的诉求很简单：有没有快捷的方法在手机前端页面看到log日志？

阅读全文 »

发表于 |

Chrome内嵌开发者工具。它具有丰富的功能特色，比如元素，网络以及安全。今天，我们将完全关注javascript的console.

当我才开始编程的时候，我只是将console用作纪录服务器的响应。但是后来经过一些教学的帮助，我开始发现console可以做的更多。

在这我们讲一些你可以用console做更多有用的事情。如果你是用chrome浏览这篇文章，你可以马上就试试效果。

阅读全文 »

发表于 |

在做公司签到项目过程中有一个需求就是在手机上根据地点限制进行打卡，在项目过程中使用到了以下功能,

1.初始化地图

2.更加经纬度定位中心点

3.根据经纬度自定义mark标记

4.根据经纬度自定义范围Cirle标记

5.根据关键字搜索并对搜索结果进行处理

封装代码全部采用es6的方式。在过程中对搜索结果采用了Promise，用以解决搜索结果延迟的的问题（JavaScript同步）
demo下载

阅读全文 »

发表于 |

什么是BEM？

BEM代表块（Block），元素（Element），修饰符（Modifier）。
BEM是一种书写CSS的一种命名规范好处：
1.统一的规范便于维护
2.结构清晰容易后来的人对结构和代码的理解
3.利于团队之间的协作

BEM（或BEM的变体）是一个非常有用，强大，简单的命名约定，以至于让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确而且更加严密。

阅读全文 »

发表于 |

简介

低级语言，比如C，有低级的内存管理基元，像malloc(),free()。另一方面，JavaScript的内存基元在变量（对象，字符串等等）创建时分配，然后在他们不再被使用时“自动”释放。后者被称为垃圾回收。这个“自动”是混淆并给JavaScript（和其他高级语言）开发者一个错觉：他们可以不用考虑内存管理。
内存生命周期

不管什么程序语言，内存生命周期基本一致：
分配你所需要的内存
使用它（读、写）
当它不被使用时释放 ps：和“把大象装冰箱“一个意思
第一二部分过程在所有语言中都很清晰。最后一步在低级语言中很清晰，但是在像JavaScript等高级语言中，最后一步不清晰。

阅读全文 »

发表于 |

CSS 三角形绘制方法主要是利用：transparent（透明）

transparent

用来指定全透明色彩。
transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。
在CSS3中，transparent被延伸到任何一个有color值的属性上。

我们可以想象下一个正方形
正方形示例

去掉（隐藏-》透明）画X的部分就是我们需要的

阅读全文 »

发表于 |

在做一个关于新闻的评论功能的H5页面时，需求里面要求能够发送表情显示表情，如果使用自定义的表情库，则在评论也还要加载大量的表情符图片，极大的影响加载速度，消耗流量，去看了下别的新闻网页版的评论部分也没有使用外带的表情库。

在input输入框里面添加上键盘自带表情符后，发送给后台服务器会显示服务异常，网上有给出解决方法，表情编码是16进制的，而我们用的是8进制的于是报错。将表情符转码成就能够ok。代码如下：

阅读全文 »

发表于 |
  1. 淘宝固定html标签font-size模式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="" />
</head>

<body>
    <div style="width:2.666666666666667rem;height:2.666666666666667rem;background:red">

    </div>
    <script>
        var scale = 1 / window.devicePixelRatio;
        console.log(scale)
        document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width,initial-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no');
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
    </script>
</body>

</html>
阅读全文 »

发表于 | 
动画的定义：动画就是让元素的位置随着时间而不断的发生变法，记住2点时间和位置。

    位置：

    说到位置我们不得不说到定位（position），position有4个值，static，fixed，relative，absolute，定位是一门艺术，如何用网络上有很多优秀的文章介绍，我们这里是对JS动画所以不做叙述，通过对元素设置不同的position值，可以利用left，right，top，bottom来改变元素的位置，如下方式

1
2
3
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "100px";
阅读全文 »