Night Sun
# 你连 Js 数组遍历都无法中断还敢自称资深前端？ ## 背景 面试了一个小伙伴，自称资深前端，精通Js、精通Vue，工作 6 年。 我们也不玩虚的，让他觉得 `面试造火箭，工作拧螺丝`，那就来点实在的。 问1：``你知道Js可以实现数组遍历的有哪些方法？`` 答1：``for、for/in、for/of、forEach、map 等等反正都可以用来遍历”`` 问2：``那这些方法中哪些可以中断？`` 答2：``好像 for 不可以，好像 for/in 可以，....`` 语无伦次，陷入沉思。 来来来，各位看官，如果你也不知道，那么看完本文可以 `收藏+点赞` 鼓励一波。 ## 数组遍历的方法 ### 方法一览 1. for...
JS解惑-语法糖
什么是语法糖？其实很简单。 ## 定义 什么是语法糖？ 语法糖，英文是：Syntactic Sugar 维基百科的定义是： > In computer science, syntactic sugar is syntax within a programming language that is designed to make things easier to read or to...
最近H5的事情做的多一些，但是有一些移动端的概念还是有些模糊，索性就仔细研究了一下，拿出来共同提高。 ## 物理像素（physical pixel） 也叫做：设备像素（device pixel）。 可以理解为屏幕上的点，这个是跟硬件有关系，跟Web软件语言没一毛钱关系。 你见过霓虹灯吗？LED灯？对！就是那上面一个个会发光的颗粒。 这个概念大家一般喊中文，貌似没见过缩写（当然你可以叫它：pp），因为在软件方面我们很少关注硬件嘛！自然这个概念也就没多大用啦！ ## 分辨率（resolution） 这也是一个物理概念，其实就是指一个设备上横竖的点数。 比如：一个LED灯上面，横着放3个灯泡，竖着放4个灯泡，那么这个LED设备的分辨率就是：3 x 4。 当然对应到PC上的显示器上，或者手机端的屏幕行，这一个个的小点，就不是灯泡啦，而是一种新型的发光原件，而且由于排列密集，所以你肉眼根本看不见具体的一个个的点啦而已。 举个栗子： iPhone手机的主屏：4.7英寸1334x750，就是指：对角线4.7英寸长，高1334个物理像素数，宽750个物理像素数。 ## CSS像素（css pixel） 是Web编程的概念，指的是CSS样式代码中使用的逻辑像素（或者叫虚拟像素）。 而我们知道，软件的开发离不开硬件的支持，就比如你要在浏览器看到显示效果，就得浏览器支持你呀！ 在CSS规范中，长度单位可以分为绝对单位和相对单位，比如：`px` 是一个 **相对单位** ，相对的是 `物理像素（physical pixel）`，这也就是说到底我们平常开发中的 `1px`...
## 一、基础概念 在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：`dpr` 是什么意思？ [移动端H5解惑-概念术语（一）](https://github.com/sunmaobin/sunmaobin.github.io/issues/27) ## 二、为什么要做页面适配 ### 2.1 PC端为什么要解决浏览器兼容 因为在PC端，由于浏览器种类太多啦，比如几个常用的：IE、火狐、Chrome、Safari等。同时，由于历史原因，不同浏览器在不同时期针对当时的WEB标准有一些不一样的处理（虽然大部分一样），比如：IE6、IE8、IE10+等对于一些JS事件处理、CSS样式渲染有所不同。 而恰恰又有一些人在使用着不同类型的浏览器，以及不同浏览器的不同版本。所以，为了能让你的网站让这些不同的人看到效果一致，你就不得不做兼容，除非这些人不是你的目标用户。 ### 2.2 移动端为什么要做适配 在移动端虽然整体来说大部分浏览器内核都是webkit，而且大部分都支持CSS3的所有语法。但是，由于手机屏幕尺寸不一样，分辨率不一样，或者你需要考虑横竖屏的问题，这时候你也就不得不解决在不同手机上，不同情况下的展示效果了。 另外一点，UI一般输出的视觉稿只有一份，比如淘宝就会输出：`750px` 宽度的（高度是动态的一般不考虑）（[详情](https://github.com/amfe/article/issues/17)），这时候开发人员就不得不针对这一份设计稿，让其在不同屏幕宽度下显示 `一致`。 `一致`是什么意思？就是下面提到的几个主要解决的问题。 ## 三、页面适配主要解决的问题 1. 元素自适应问题 2. 文字rem问题 3. 高清图问题 4. 1像素问题...
# 经验分享-提高生产效率的一些编码技巧（1） 本文包含了一些个人开发经验总结和设计模式的总结，希望能给大家有所帮助。 ## 条件语句if使用技巧 将代码少的逻辑放到if中，而更多的逻辑当成正常系处理，更有利于阅读和理解。 ### 方法 原始代码： ```js if(condition){ //中间有100行代码 }else{ //这里只有1行代码！ }; ``` 以上逻辑最好的书写规范是： ```js if(!condition){ //1行代码！ return; }; //剩余100行代码 ``` ### 案例 原始代码： ```js selectCategory :...
本文参考了 `Element UI` 的 `md-loader` 源码，为 `Element UI` 团队表示深深的敬意。 以下示例是层层递进的，从简单到复杂的顺序进行叙述。另外只有部分代码片段，如果要运行： 1. 使用 `vue-cli3` 初始化一个标准工程 `vue create demo-md` 2. 新建或者修改按照下面对应的示例文件即可 ## 一、工程需要有解析 Markdown 文件的能力 ### demo-md-1 演示一个 Vue 工程如何解析一个基本的 Markdown 文件...
## 一、了解 MAC ### 1、C盘、D盘哪去了？ * `访达` 中的 `文稿` 对应Windows上的 `我的电脑` * `启动台` 对应Windows上的 `所有程序` * `系统偏好设置` 是Mac上设置所有选项的地方，相当于Windows上的 `控制面板` 等  * 在 `文稿` 中新建几个根文件夹，然后可以作为Windows上的C盘、D盘之类的，可以右键文件夹，标记为不同的颜色，以后操作的时候，可以通过颜色快速定位到想要的目录，不必要从 `文稿` 一级一级往下翻 ### 2、APP顶部的菜单栏去哪了？ 在Mac中，所有APP共享顶部的导航栏，在不同App中，顶部的导航栏显示当前App的导航栏。比如：...
由于 Lodash 是一个非常强大的工具类，提供了非常多的工具方法，所以这里仅仅罗列一部分常用的方法，供大家参考。 如果想了解更全的，建议到官网去仔细过一遍，学习一下：[https://www.lodashjs.com/docs/latest](https://www.lodashjs.com/docs/latest)，以备不时之需。 ## Array 数组 ### _.uniq 数组去重，返回一个去重后的新数组。 参数： * Array，数组 示例： ```js _.uniq([2, 1, 2]); // => [2, 1] ``` ### _.uniqBy 这个方法类似 `_.uniq`，不过可以接收一个回调函数，数组中每一个值会调用一遍回调函数，之后再去重。 参数： * Array，数组...
当我们使用for/in遍历一个Object对象的时候，打印的结果是否按key的顺序打印出来呢？ 答案是：`不一定`。 ## 背景 最近在做一个项目的时候，遇到这样一个需求： 一个下拉列表中有3个固定选项，包括：`-1：全部；0：正常；1：失效`。 于是，我就定义了一个对象，然后循环这个对象，把结果放到 `` 上面： ```js var obj = { '-1': '全部', '0' : '正常', '1' : '失效' }; ``` ```html {{item}} ``` 于是就有了今天这篇文章，且看下文。 ## 解惑...
以下资源是我个人收集的一些资料，跟大家分享下。 ## 一、知名网站 - Github， - 掘金， - v2ex， - 阮一峰博客， - infoQ，[http://www.infoq.com/cn/Front-end/](http://www.infoq.com/cn/Front-end/?utm_source=infoq&utm_medium=header_graybar&utm_campaign=topic_clk) - w3cplus， - Deep Ocean， - 前端观察， - web前端开发， - 奇舞团， - JDC， - UI中国， ## 二、大公司前端团队...