前端路上

万物皆有裂缝

Git 是一种流行的分布式版本控制系统,它允许开发者在不同的分支上进行工作,同时保持代码的完整性和历史记录。在使用 Git 进行版本控制的过程中,我们可能会遇到需要放弃当前工作进度的情况,例如,当发现当前分支的修改与主分支的代码不兼容,或者需要切换到另一个分支继续工作时。

概述

这篇文章会介绍如何在 Git 中放弃对文件的修改,包括以下几个方面:

阅读全文 »

最近在某些比较看重的事情上,处理的很失败,感觉整个心态都发生了变化。下班独行的那段路上,突然惊醒自己也许需要做出一些改变,晚饭后静静的思考了一阵:似乎勇往前行才是我最需需要的改变。古语有云:走自己的路,让别人去说吧。是的,生活需要你不断踽踽独行,活在他人的世界里是可怕的,特别他(她)还是陌生人。随手记录一些句子,它们是我最近的心态和生活的写照,也以此鞭策自己砥砺前行。


时间不会因你沮丧而停滞不前
生活不会因你懊恼而雨过天晴

阅读全文 »

下面记录的主要是本人在项目中遇到的一些问题的解决方案或者个人觉得精妙的代码,方案也许来自于自己的想法,也有可能来自于网络(我尽量给出出处,以便大家追源溯流),也许干脆就是一个插件库(实际在项目中对于一些小的功能个人是拒绝引入不纯粹的三方库的)。肯定,这其中有些方案也不是尽善尽美,我会一一列出。如果对于某个问题在你看来有更好的解决方案,请不吝指出!

placeholder属性支持

有时候项目中placeholder也许要兼容某些特殊的浏览器,所以才有了下面这段代码。这种方案有一个缺点就是:如果你恰好要对这个输入框绑定focus事件并操作它的值,必须要小心处理

阅读全文 »

以前对于正则是非常惧怕的,因为看不懂和学不会。但最近项目中频繁的使用到了正则,因此强迫自己去学习了解,慢慢的体会到了他的魅力与强大。当然学习正则初入门的时候有些枯燥难懂,但越学越觉得轻松。本文不准备说关于正则本身的事儿,而是说一说关于javascript中关于正则的几个方法中被很多人忽略的地方。

工具

说到正则,很多人都是从抄到改到自己写,这个过程可能有时候很漫长。如一些工具能帮助你快速分析和学习正则,那么学习的过程你肯定要轻松得多。下面我推荐两个我经常使用的正则在线可视化工具,正则可视化工具图解符合铁路图规律(其实不明白什么是铁路一样很容易看懂,只是一些细微的地方和我们的常规思维有点差别)。

阅读全文 »

在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,这是一个非常好的机制。但是为什么要慎用呢?在实际业务中我们往往会对公共组件样式做细微的调整,如果添加了scoped属性,那么样式将会变得不易修改。初写这篇文章时,本人没有找到一个好的方法去解决这个问题,后来经过大伙的解答,才让我恍然大悟。

何为谨慎使用

谨慎使用不是不用,而是持一种审视的目光去看待它。scoped肯定是解决了样式私有化的问题,但同时也引入了新的问题—样式不易(可)修改,而很多时候,我们是需要对公共组件的样式做微调的。所以我才说要谨慎使用

阅读全文 »

众所周知,虽然javascript中关于时间的API有不少,我们可以通过方法单独的获取年、月、日、时、分、秒、毫秒…貌似很多,最近写了一个日历(以前写的,但写得很烂,最近优化一下),所以下面简单的记录一下如何写一个日历,列出了一些我在写日历过程中自己封装的一些方法

效果图

先来一张效果图,由于没有UI设计,所以就自己简单的设计了一个样式(好歹我也是设计专业的,虽然已不做设计很多年),虽然略丑,但重要的是功能!!!

阅读全文 »

for...infor...of都是用于数据的遍历。for...inES5标准,用于遍历对象属性(键),而for...ofES6标准,是对for...in的修正,用于遍历对象元素(值),for...of兼容性不是很好(除了PC端老顽固IE之外,移动端某些安卓机和浏览器也是不支持它,具体可以查看MDN)。

for…in

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Object.prototype.objMethod = function() {};
Array.prototype.arrMethod = function() {};

var arr = [2, 9, 5], obj = { name: '2ue', w: 130 };
arr.msg = 'hello';
obj.msg = 'hello';

for (var i in arr) {
console.log(i); // "0", "1", "2", "msg", "arrCustom", "objCustom"
}

for (var i in arr) {
if (arr.hasOwnProperty(i)) {
console.log(i); // "0", "1", "2", "msg"
}
}
for (var i in obj) {
console.log(i); // "name", "w", "msg", "objCustom"
}

for (var i in obj) {
if (obj.hasOwnProperty(i)) {
console.log(i); // "name", "w", "msg"
}
}
阅读全文 »

目前,web网页使用桌面通知功能的越来越多,包括微博,腾讯视频等大厂站,桌面通知功能是H5的一个API - Notifications。它允许网页或应用程序可以发出通知,通知将被显示在页面之外的系统层面上(通常使用操作系统的标准通知机制,但是在不同的平台和浏览器上的表现会有差异),这样即使应用程序空闲或在后台也可以向用户发送信息。

应用场景

Notifications的诞生简化了网站或者应用与用户之间的沟通成本(时间成本和开发成本),增强用户黏性(减少了用户离开应用的可能)。传统的通知方式,大多是通过站内信(消息),邮件,短信等方式,它们通常需要刷新(跳转)页面、离开应用打开其他应用或终端来查看消息;而桌面通知功能大大的简化了这个过程,消息的传递基本不消耗时间(如果不设置setTimeout,用时基本不会超过1s),并且用户不需要离开应用,这都带来了极大的方便。可以预见,Notifications将会在很多网页或应用中被大量使用。当然Notifications也具有它的局限性:无法存档、即看即毁
那么,这个功能到底能用在哪些场景呢?只能说能应用的场景很多:

阅读全文 »

mocha+chai是比较流行的测试框架‘套装’,能实现一些基本的前端测试如函数功能测试,模拟登陆,异步测试,流程测试等

官方文档

mocha

阅读全文 »

前端测试是保证代码质量以及程序稳定的一种可靠方式,同时也从代码层面解决了自测难,自测烦等前端测试综合症。当然在前端开发引入测试环节无疑会增加人力和时间成本,如果最终产生的结果和增加的成本能够两两抵消产生正面效应,那么有必要考虑把测试环节加入到团队的规划中。但是在实际开发过程中,测试用例更多的被用于开源项目中,在大部分公司的生成项目很少使用维护测试用例,其根本原因是不纯粹的生产环境导致维护测试用例变得困难,而目的性很强的开源项目则更纯粹,所以前端测试的发展任重而道远。

Ps:本次更多的是讲述概念性的东西,代码性的具体实例不做过多实践


阅读全文 »
0%