前端小白成长记：适合练手的开源项目推荐

我们做代码开发，从小白到大佬是一个成长的过程。而这个过程，需要练手，动手，思考，结合思考再去动手，将动手实战，最终成长为大佬。

1 小白的拦路虎

作为前端小白的我，曾经有这样的拦路虎，你是否也曾有过呢？

A 公司接触的项目简单，自己接触不到丰富而复杂的内容；

B 公司有核心成员写核心代码，而自己只能做边角料；

C 跟大佬学习代码，学着学着就跟不上；

D 很多大佬热心收徒，但他们收费；

E 自己有闲余时间，但总是想摸鱼玩游戏，不想学习，学不下去；

F 项目重复度高，公司业务固定，写来写去就是那些代码，毫无进展与挑战；

G 没有新项目，缺乏项目经验，无法将知识转化为实战技能；

H 技术栈变动快，学完这个出那个，学完这个版本出那个版本；

I 自己开发习惯了，缺少大团队的代码协作过程。

2 开源项目推荐

推荐给大家。对，你没有看错，是的，你没有听错。这个项目就是：js-tool-big-box前端JS工具库

2.1 你可以学习里面的公共方法代码

对，没错。你把代码库git clone下来以后，你就可以看到里面的每个方法是怎么写的，如果你对JS接触不深，那么这将会是一个非常好的入门代码库，里面有各种各样的公共方法，可以帮助你前端基本功的提升。

git clone GitHub - jsToolBigBox/js-tool-big-box: If you use this js Library, you will happy!

2.2 你可以使用里面的公共方法

当你需要做一个判断是否手机端浏览器的时候，你可以直接使用里面的这个方法，拷贝到自己的项目里面去

isMobileBrowser: function() {
        if (
            window.navigator.userAgent.match(
            /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
        )
        ) {
            return true; // 移动端
        } else {
            return false; // PC端
        }
    },

当你需要判断当前元素是否在可视范围内的时候，你可以直接使用这里面的方法，拷贝到自己的项目里面去。

isElementInViewport: function(element) {
        const eleDom = document.querySelector(element);
        const rect = eleDom.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    },

2.3 你可以主动承担团队的公共开发者

当有个新项目需要开发的时候，你可以主动和组长说，我想负责团队中公共方法部分的开发。那个时候，你就可以直接使用这里面的方法，这个库的方法这么全，一定可以帮助你成为团队的核心成员。

当团队需要判断数据的详细类型的时候，你可以直接从这里面拿代码

getDataType: function(value) {
        return Object.prototype.toString.call(value);
    },

当团队需要存储cookie的时候，你可以直接从这里面拿代码

 setCookie(key, value, expiresTime, domain, path) {
        let date = new Date();
        let newExpiresTime = '';
        if (expiresTime) {
            date.setTime(date.getTime() + expiresTime);
            newExpiresTime = ` expires=${date.toGMTString()};`;
        }
        domain = domain ? ` domain=${domain};` : '';
        path = path ? ` path=${path};` : '';
        const newCookie = `${key}=${value};${newExpiresTime}${domain}${path}`;
        document.cookie = newCookie;
    },

2.4 你还可以提升git工具功底

你还可以fock一下自己的库，让朋友们和你一起改动里面的相同的文件，你如果总是自己开发，团队人员少。你可以故意让大家产生冲突，然后故意去解决各种各样的冲突，以提升自己的git工具的功底。

2.5 你可以自造场景

这个库的公共方法齐全，而且不同以往的是，这个库的开发者是我们中国人。你可以和作者深入交流，可以通过方法，自己去创造场景，自己去创造独特的业务。不是老觉得自己开发的场景少嘛，我们可以帮你思考，帮你去想，慢慢的，你自己不就开发的多了嘛。

2.6 用于求职

当你需要求职的时候，你一定非常需要有一个自己拿得出手的项目。那么这个时候，你可以和作者交流，让你成为团队开发者。那个时候，这就是你的项目，你就是团队成员，有哪个团队不想要一个有思想，有实干的孩子呢。

3 最后

不要说什么环境不好，不要说什么公司业务量小，不要说什么自己遇到的场景少，不要说什么自己没呆过大团队，不要说什么自己忙，不要说什么自己懒。学起来，让10年后的自己感谢曾经的自己。