2017-03-16 Lim Geng
原测试链接:http://davidshariff.com/quiz/ 这些测试题是David Shariff(不要问我他是谁,因为我也布吉岛)写的,感觉挺有意思,拿来分享一下。注意了,这里是前端测试题,找前端面试题的盆友请绕行,当然如果你绕行可能会错过面试时遇到的测试题。 CSS 1、 CSS是大小写敏感的吗? 不是 css ul { MaRGin: 10px; } 2、 margin-top和margin-bottom会对行内元素有影响吗?不会 3、 padding-top和padding-bottom会影响行内元素的大小吗?不会 4、 如果有个的样式为font-size:10rem,当用户改变浏览器大小 继续阅读 »
2017-03-07 Lim Geng
没图片太单调,用啥图呢,思考片刻选择了这幅图 数据绑定的本质 实现数据绑定的本质就是Setter+change事件,前者Setter用于在数据模型变化时更新UI,后者change事件,用于在UI变化时更新数据模型,来看个大某: Demo1 ```js // 数据模型 var data = { text: 'Hello World' }; // UI元素 var input = document.getElementById('input'), label = document.getElementById('lbl'); // Setter Object.defineProperty(data, 'tex 继续阅读 »
2017-02-17 Lim Geng
昨天有朋友说让vsc支持react和es6太难配置了,我说直接用webpack吧,vsc仅仅用来敲代码就行了。之所以我这么说,因为我的vsc只是用来敲代码的,常用的git操作,依赖安装都是寄几在终端搞的。于是今天试了一下webpack,也踩了几脚坑,先让我擦干眼泪。 这里是这篇文章涉及到的源代码,如果需要运行可以直接跳到下面的最后一步生成。 如何配置 当你看到最终的是如何实现的时候,我其实是拒绝的,我宁可花长时间写的复杂点,但是很简单,绞尽脑汁也多写不了几行字。 创建目录 cd ~/Desktop mkdir hello-react cd hello-react 初始化npm npm init -y // 你也可以不 继续阅读 »
2017-02-16 Lim Geng
CSS自定义属性除了简单的保存和获取CSS值机制外,还有很多有趣的用处。在这篇文章里,我们将会探索自定是属性的最佳实践。 浏览器支持度 从图中可以看出浏览器的支持度还是挺高的。 用class分离css和js 大多数情况下,为了分离关注点和简化两者的交互,你想让js和CSS保持高度分离。最简单的经常被工程师实践的示例是使用定义良好的CSS类,在js端为了触发事件驱动的视觉变化,只需要添加或移除相关的css类,比如: ```css .button { position: relative; transform: scale(1); } .button.js-toggled { transform: scale 继续阅读 »
2017-02-12 Lim Geng
最近在网上看到有部分人在面试(比如1月面试记)的时候被问到了LazyMan,而且网友也有不同的实现方式。这里我用两种方式实现了lazyman,以供参考,如有更好的方法,欢迎留言。 队列 这种方式,每次都是往queue里添加执行函数,next函数用来决定什么时候调用下一个函数。 ``js var LazyMan = function LazyMan (name) { if (!(this instanceof LazyMan)) return new LazyMan(name); this.queue = [() => { console.log(hello ${name}`); 继续阅读 »
2017-02-09 Lim Geng
在以前的十多年里,我们通常会把web页面根据视觉分成不同的节(或者叫做块,盒子,区域等)。问题是我们从没有一款工具可以去做这种划分。往往是网页开起来是分块的,但是底层结构确是用编号标题(h1,h2,h3...)和非语义化元素堆积起来的。因为我们可以用来实现视觉上的分块,但是其表现与不同。对于AT用户和数据挖掘软件并不认为div分块是文档内容的分块 现在H5最终有了可用的section元素,但是很多人都不情愿去使用。为什么?因为我们是一个反对改变的群体,而且也因为说明文档与建议存在一些差异。事实上,该建议与section的算法比先前的实现更容易使用。 没错,section元素可以帮助你构建文档结构,这是w3c说明文档里的说到的。接 继续阅读 »
2016-12-23 Lim Geng
唠叨 还有一周2016就要过去了,时间过得太快,压抑的一年,好像什么都没做,闭目冥思,反思自我得失...我勒个去,文采不好,再唠叨真成大妈了。 这一年听到最多的声音就是房价涨了,房价涨了,房价上蹿上蹿,一路飙升,疯了,全国都疯了,我也疯了,房租涨了,工资没涨,不好意思,我又禁不住 啰嗦了两句,还是聊技术吧,只有技术最可靠。 最近看了几篇关于table-cell的用法,觉得旭神总结的还不错,于是乎我就抄袭,不对,是模仿,也不合适, 其实是微微扩展了以下,增加几点需要注意的地方。 支持度 从下图可以看出,所有浏览器都支持的很好嘛。 特性(Peculiarities) table-cell的特征就是跟table的td表现是 继续阅读 »
2016-11-25 Lim Geng
前言 每次写文章都想在前面提提~~事实~~时事,今天想说的是:*******,如果你看到的是星号,那很抱歉,“福利”被和谐了,你可以更换浏览器试试。本文对setTimeout、setImmediate、process.nextTick的区别做了简单阐述,如有疑问,请留言。 api介绍 setTimeout(callback, delay):经过delay时间后只执行一次callback,但是并不能保证时间点的精确性。delay的意思是,告诉callback可以被执行了,如果callback所在队列前面还有任务没执行,那它也得稍等等。 **setImmediate(callback)**:执行callback的时机是在IO 继续阅读 »
2016-11-09 Lim Geng
随便聊聊 最近三星在研究炸弹,不仅手机能爆炸,洗衣机也会爆炸,尼玛,产品设计师难不成是研究炸弹的;NBA开赛了,可惜湖人没了科比的身影,在我还没成为球迷之前他已经不在了,很湿伤心,还是听听音乐吧。说到听歌,给大家推荐一首神曲《我的滑板鞋》,看到这歌名,我想你们内心是崩溃的,听到原唱你们肯定骂了不止一百遍逗比碧池,心细的同学可能注意到我提到了原唱,没错原唱是不堪入耳,但是经过华晨宇的改编已经脱胎换骨了,“一步两步,一步两步”,steps, step-start, step-end。 示例 CSS: ```css .cube { height: 150px; width: 200px; } 继续阅读 »
2016-09-08 Lim Geng
是时候总结一下vim的使用方法了,一方面防止自己忘记不常用的指令,另一方面给大家提供一个参考。 等有时间再把文中的链接内容展开介绍。 先来看看我的vim vim键盘图 vim的安装 exvim中文这里面包含了exvim的安装与配置,以及插件的安装。 vim指令入门 Vim入门教程这篇文件是我强烈推荐的,入门必备,告诉你如何使用指令, 如何人类的语言来使用指令。 高频组合指令 单指令是必须记住的,这里提几个组合指令。 替换: :s/a/b将该行的第一个a替换成b,:s/a/b/g替换该行的所有a,:n,ms/a/b替换n行到m行,%s/a/b替换所有行的第一个a,%s/a/b/g替换所有a 选中: v20G, 继续阅读 »