微醺岁月
微醺岁月
## 零、起因 **世间万物，为我所用。** 掘金不仅是一个很好的在线同性交友平台，也是一个学习交流和分享技术场所，更是程序猿和程序媛获取养料的精神家园。 分享是一个杂乱无章的环节，这无可厚非，因为在这里人人平等，每个人都可以分享自己看到的精品文章，也可以创作记录分享自己的成果，这是平台带给大家的优势，同时，面对零零散散的文章，对于我们来说，很困惑，我到底该学什么，从入门到精通的过程是怎样的？我该如何系统的学习这门语言？ **汪洋大海，我该如何探寻所需的宝藏？ 学习路途，我该如何寻找最佳的曲线？** 去年开始看掘金，收藏了很多文章，也收获了很多知识，但是对于上面的疑问一直也在摸索当中，这里先感谢掘金这个平台，让我能学习到很多新的未知的东西，但在用掘金的这段时间内，也发现看的东西虽然很多，但是很杂，没有系统化的去深入了解一个东西，于是诞生了把自己看到过的，错过的，还有将要发表的，一起做一个整理和集合。 看见好的文章就收藏，后来发现收藏了几百篇，很多都是重复的，也不够系统化，资源如浩瀚大海，找起来也麻烦，无疑给自己增加了负担，在此，为了方便大家系统的学习前端这门课程，找准自己的定位，我利用空余时间，把掘金有**屎**以来分享的前端文章做了一个归类，方便掘金的朋友学习和收藏，喜欢的朋友可以收藏一下，这篇文章会持续更新，也欢迎关注[【我的GitHub博客】](https://github.com/jawil/blog)获取最新动态。 **贵有恒何必三更眠五更起，最无益只怕一日曝十日寒。** 一天更新一点，每天看一点，坚持就是胜利，如果只整理和收藏不花时间看，一切都是徒劳。✌️ ## 一、推荐规则 * **推荐内容全部来自广大码农朋友的分享和专栏的原创，也就是掘金能搜索到的内容；** * **每个分类原则上不多于3篇，除非这一分类优秀的文章特别多；** * **每个文章我都有粗略阅读，排名按照收藏数和个人感觉关联度；** * **文章日期全部来自2017-3月之前，会不定期更新，如果遗漏非常精彩的文章，可以及时联系我** * **由于工程量大，推荐和排版难免出错，还望见谅，如果错误请底下及时评论反馈** ## 二、代码规范篇 **没有规矩，无以成方圆。** 为什么把这个放在首位呢？好的代码规范不仅自己看起来赏心悦目，心情舒畅，我怎么就这么牛逼写出这么好看的代码（熏疼自己三秒钟，这往往只是错觉），别人看起来也直观一目了然，后来接手维护的人看了这种高逼格的代码也不会出现这种情况：这尼玛什么几把玩意，简直一坨翔，坑死劳资了（反正我走了也听不到🙉，你就骂吧） ### 2.1 前端开发规范总览...
之前通过深入学习DOM的相关知识，看了慕课网[DOM探索之基础详解篇](http://www.imooc.com/video/9500)这个视频（**在最近看第三遍的时候，准备记录一点东西，算是对自己学习的一点总结**），对DOM的理解又具体了一步，因为DOM本来就是一个抽象和概念性的东西，每深入一步了解，在脑中就会稍微具体一点，通过这次的对DOM的系统学习，对DOM有一个比较深刻的理解，明白了DOM在JavaScript这门语言中举足轻重的地位，了解了DOm的发展历史，也让我明白了存在浏览器浏览器兼容性的历史原因，对DOM的结构有了进一步的认知，对DOM的一些API也更加熟悉，对比较抽象和概念性的DOM认知稍微具体了一些。下面就是自己深入学习DOM这门课程整理的一些笔记，大部分来自学习中查阅的资料以及视频中老师讲的一些关键性知识点,当然也不可或缺的有自己的一些记录和理解。 **原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。** **文章稍长，本文只论述DOM基础概念，不涉及DOM的一些事件原理机制，页面元素的操作和常用API的讲解以及兼容性事项，所以概念性东西比较多，稍微有点抽象，其中有笔记来大部分来自老师的口述，还有一部分是查阅的文档，最后有一部分是自己的记录和理解。** ``` 通过document.createElement("p")创建一个p元素一共溯寻了7层原型链，你知道吗？ ``` 学习视频地址：[DOM探索之基础详解篇](http://www.imooc.com/video/9500)，老师讲的很好，有兴趣的可以结合视频学习一下，建议看完视频再看笔记，加深印象，你会受益匪浅。 ### 1、什么是DOM? >DOM，文档对象模型（Document Object Model）。DOM是 W3C（万维网联盟）的标准，DOM定义了访问HTML和XML文档的标准。在W3C的标准中，DOM是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 W3C DOM由以下三部分组成： * 核心DOM - 针对任何结构化文档的标准模型 * XML DOM - 针对 XML 文档的标准模型 *...
最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，搜集和尝试了很多方式，最终采用了纯css驱动的实现方式完成评分和展示分数的功能，没有js,也就意味着没判断逻辑，代码出错的几率更少，也更便于维护，在此，把这个功能的实现的过程记录和分享一下，一起学习交流。 **原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步。** ### 五角星的实现 #### 1.图片或者字体图标 不极致追求性能的话,直接利用设计师给的png或者jpg啥的,或者直接转成base64.  #### 2:利用Fontawesome 图标库，其实只是一种矢量字体。 HTML: ```html ``` CSS: ```css @import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); .icon:before { content: '\f005'; font-family: FontAwesome; } ``` [在线预览地址](http://codepen.io/weixun/pen/PpxxrE)...
[](https://juejin.im/entry/59c9521e6fb9a00a437b1dbc/detail) 之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：[这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已](https://github.com/jawil/blog/issues/24)，没想到受到了大家的欢迎，有人希望能博主还能整理个 `CSS` 的一些黑魔法小技巧，无奈我 `CSS` 一直很渣，没什么干货，最近写了一个 `Chrome` 插件 [GayHub](https://github.com/jawil/GayHub)，算是把 `GitHub` 的样式审查了个变，在写的过程中，也收获了很多关于 `CSS` 的小技巧，尤其是开始的第一个技巧，学习到了很多，于是再加上一波搜集，就诞生这篇博文，欢迎补充~~~😂。 ### 1、利用 `CSS` 的 `content` 属性 `attr` 抓取资料 #### 需求 >**鼠标悬浮实现一个提示的文字，类似github的这种，如图：**  想必大家都想到了伪元素 `after`，但是文字怎么获得呢，又不能用 `JavaScript`。 `CSS` 的伪元素是个很強大的东西，我们可以利用他做很多运用，通常为了做一些效果，`content:"...
## 1111 html5提供了两种方式在页面中操作历史 history.pushState(state, title, url) 将当前URL和history.state加入到history中，并用新的state和URL替换当前, 不会造成页面刷新。 history.replaceState(state, title, url) 用新的state和URL替换当前, 不会造成页面刷新。 history.state 如果当前URL不是通过pushState或者replaceState产生的，那么history.state是null。 提供检测历史记录变化的事件popstate 每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝. 调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器操作如点击前进or后退按钮(JS调用也可), URL中"#"后面的字符串改变时触发. #### 2222 html5提供了两种方式在页面中操作历史 history.pushState(state, title, url) 将当前URL和history.state加入到history中，并用新的state和URL替换当前, 不会造成页面刷新。...
### 一些文章 [1、这就是所谓的Node.js------单线程，非阻塞，事件驱动](http://www.cnblogs.com/renyanlei/p/6665535.html) [2、Node.js 探秘：初识单线程的 Node.js](http://taobaofed.org/blog/2015/10/29/deep-into-node-1/) [3、进程和线程](http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014319272686365ec7ceaeca33428c914edf8f70cca383000) [4、同步、异步、阻塞及非阻塞](http://www.jianshu.com/p/315275698250?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=weixin-friends) [5、进程 线程 协程 管程 纤程 概念对比理解](https://zhuanlan.zhihu.com/p/26757689?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) [6、I/O模型 阻塞 非阻塞 同步 异步概念对比区分](https://zhuanlan.zhihu.com/p/26751797?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) ### 一些概念 #### 1、什么是Node.js? >Node.js® is a JavaScript runtime built on...
## Nodejs Style Guide(by [felixge](https://github.com/felixge/node-style-guide)) [格式](#%E6%A0%BC%E5%BC%8F) - [2个空格缩进](#2%E4%B8%AA%E7%A9%BA%E6%A0%BC%E7%BC%A9%E8%BF%9B) - [换行](#%E6%8D%A2%E8%A1%8C) - [清除尾随空格](#%E6%B8%85%E9%99%A4%E5%B0%BE%E9%9A%8F%E7%A9%BA%E6%A0%BC) - [使用分号](#%E4%BD%BF%E7%94%A8%E5%88%86%E5%8F%B7) - [每行限制 80 个字符](#%E6%AF%8F%E8%A1%8C%E9%99%90%E5%88%B6-80-%E4%B8%AA%E5%AD%97%E7%AC%A6) - [使用单引号](#%E4%BD%BF%E7%94%A8%E5%8D%95%E5%BC%95%E5%8F%B7) - [在同一行书写左大括号](#%E5%9C%A8%E5%90%8C%E4%B8%80%E8%A1%8C%E4%B9%A6%E5%86%99%E5%B7%A6%E5%A4%A7%E6%8B%AC%E5%8F%B7) - [每个 var 语句只声明一个变量](#%E6%AF%8F%E4%B8%AA-var-%E8%AF%AD%E5%8F%A5%E5%8F%AA%E5%A3%B0%E6%98%8E%E4%B8%80%E4%B8%AA%E5%8F%98%E9%87%8F) [命名约定](#%E5%91%BD%E5%90%8D%E7%BA%A6%E5%AE%9A) - [使用小驼峰式命名法对变量、属性和函数名命名](#%E4%BD%BF%E7%94%A8%E5%B0%8F%E9%A9%BC%E5%B3%B0%E5%BC%8F%E5%91%BD%E5%90%8D%E6%B3%95%E5%AF%B9%E5%8F%98%E9%87%8F%E5%B1%9E%E6%80%A7%E5%92%8C%E5%87%BD%E6%95%B0%E5%90%8D%E5%91%BD%E5%90%8D) -...
### 场景 在日常使用 `git` 作为仓库使用的时候，有时可能会遇到这样的一些情况： ```js 1. 有两个 `github` 账号，一台电脑怎么同时连接这两个账号进行维护呢？ 2. 自己用一个 `github` 账号，平时用来更新自己的一些资料；公司使用的 `gitlab`（也是 `git` 的衍生产品） ``` ### `SSH Key` 的配置 1.`Windows` 下打开 `Git Bash`，创建 `SSH Key`，按提示输入密码，可以不填密码一路回车 ```js $...
### 本地密码登录远程服务器 > ssh -p 29197 [email protected] ### 使用 ssh 免密码登录 1. 本机操作： >ssh-keygen -t rsa -C "[email protected]" 2. 远程服务器操作 ``` mkdir .ssh cd .ssh touch authorized_keys chmod 700 authorized_keys...
### 面试技巧 1. 心理学 ### 面试题 1. github [高级前端进阶](https://github.com/yygmind/blog) [Weekly-FE-Interview](https://github.com/airuikun/Weekly-FE-Interview) [React.js有哪些设计缺陷？](https://www.zhihu.com/question/316425133/answer/673451425) [面试官(7): 聊一聊 Babel?](https://juejin.im/post/5c03b85ae51d450c740de19c?utm_source=gold_browser_extension) [Daily-Interview-Question](https://github.com/Advanced-Frontend/Daily-Interview-Question) ### 数据结构和算法 1. LeetCode [leetcode题解，记录自己的leetcode解题之路](https://github.com/azl397985856/leetcode) [用动画的形式呈现解LeetCode题目的思路](https://github.com/MisterBooo/LeetCodeAnimation) 2. 视频 [JavaScript版 数据结构与算法](https://coding.imooc.com/class/315.html) 3. 合集 [程序员必须掌握哪些算法？ - 程序员吴师兄呀的回答...