博客园 - myqianlanuuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=136552020-04-18T10:49:26Zmyqianlanhttps://www.cnblogs.com/myqianlan/feed.cnblogs.comhttps://www.cnblogs.com/myqianlan/p/5626505.htmlwebpack打包第三方类库的正确姿势 - myqianlanwebpack 的使用越来越广泛,但其中不乏很多鲜为人知的细节设置,甚至很多人会认为这是 webpack 的 bug。这次,我们就来聊一聊 webpack.optimize.CommonsChunkPlugin。 这个 plugin 我相信几乎90%的用 webpack 的都用了这个,但我同样相信几2016-06-29T05:18:00Z2016-06-29T05:18:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】webpack 的使用越来越广泛,但其中不乏很多鲜为人知的细节设置,甚至很多人会认为这是 webpack 的 bug。这次,我们就来聊一聊 webpack.optimize.CommonsChunkPlugin。 这个 plugin 我相信几乎90%的用 webpack 的都用了这个,但我同样相信几 <a href="https://www.cnblogs.com/myqianlan/p/5626505.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4754826.htmlwindows下git bash存储alias - myqianlan在用户目录下新建一个.bashrc配置文件```bashalias bs='browser-sync start --server --files "**/*.*" --reload-debounce'```就像上面这样2015-08-24T07:11:00Z2015-08-24T07:11:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】在用户目录下新建一个.bashrc配置文件```bashalias bs='browser-sync start --server --files "**/*.*" --reload-debounce'```就像上面这样 <a href="https://www.cnblogs.com/myqianlan/p/4754826.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4505732.htmllegend标签的一些糊涂帐 - myqianlan我也没有想到,某一天,我居然和legend标签纠结起来了。我在codepen上写了一个原始demo:http://codepen.io/myqianlan/pen/RPaxGJ可以看到,legend右对齐了,但是margin-right却木有生效!why? why? why?真是百思不得其解,于是进...2015-05-15T05:52:00Z2015-05-15T05:52:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】我也没有想到,某一天,我居然和legend标签纠结起来了。我在codepen上写了一个原始demo:http://codepen.io/myqianlan/pen/RPaxGJ可以看到,legend右对齐了,但是margin-right却木有生效!why? why? why?真是百思不得其解,于是进... <a href="https://www.cnblogs.com/myqianlan/p/4505732.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4431742.htmlJS事件处理中心的构想 - myqianlan在以jQuery为基础库的前端开发体系中,经常会在一个页面上通过各种标识绑定许许多多的事件。就算简单的使用了事件代理,也还是造成了事件的分散,不好维护和管理。那么,如何解决这个问题呢?而我,想到了backbone中的events。如下:```javascriptevents: { "click...2015-04-23T05:03:00Z2015-04-23T05:03:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】在以jQuery为基础库的前端开发体系中,经常会在一个页面上通过各种标识绑定许许多多的事件。就算简单的使用了事件代理,也还是造成了事件的分散,不好维护和管理。那么,如何解决这个问题呢?而我,想到了backbone中的events。如下:```javascriptevents: { "click... <a href="https://www.cnblogs.com/myqianlan/p/4431742.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4379961.htmlform的novalidate属性 - myqianlan今天,在看jquery.validate插件源码的时候,发现了这么一句话。源码第35到36行:```javascript// Add novalidate tag if HTML5.this.attr( "novalidate", "novalidate" );```注释已经说的很清楚了,但是由于我...2015-03-31T01:24:00Z2015-03-31T01:24:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】今天,在看jquery.validate插件源码的时候,发现了这么一句话。源码第35到36行:```javascript// Add novalidate tag if HTML5.this.attr( "novalidate", "novalidate" );```注释已经说的很清楚了,但是由于我... <a href="https://www.cnblogs.com/myqianlan/p/4379961.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4341505.htmlAOP思想在JS中的应用 - myqianlanAOP全称为Aspect Oriented Programming,即面向切面编程。AOP可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑各部分之间的耦合度降低,提高程序的可重用性,同时提高了开发的效率。推荐两篇关于这个的博文:http://www.ibm.com/developerworks/c...2015-03-16T04:22:00Z2015-03-16T04:22:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】AOP全称为Aspect Oriented Programming,即面向切面编程。AOP可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑各部分之间的耦合度降低,提高程序的可重用性,同时提高了开发的效率。推荐两篇关于这个的博文:http://www.ibm.com/developerworks/c... <a href="https://www.cnblogs.com/myqianlan/p/4341505.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4310649.html推行浏览器升级提示,从自己做起 - myqianlan低端古旧的浏览器一直是前端开发者心中抹不去的一份伤痛。我们要做的只是让后人可以尽可能的肆意妄为。```html 点击关闭提示 您使用的浏览器 版本过低 ,请 升级您的浏览器 以获得更好的体验。 ...2015-03-03T04:19:00Z2015-03-03T04:19:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】低端古旧的浏览器一直是前端开发者心中抹不去的一份伤痛。我们要做的只是让后人可以尽可能的肆意妄为。```html 点击关闭提示 您使用的浏览器 版本过低 ,请 升级您的浏览器 以获得更好的体验。 ... <a href="https://www.cnblogs.com/myqianlan/p/4310649.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4305397.htmldoT.js模板引擎 - myqianlan官网:http://olado.github.io官网上面有详细的使用文档。这里我仅仅记录将其如何改为jQuery插件。```javascript$.extend({tmpl: function(template, data){ return doT.template(template...2015-02-28T06:35:00Z2015-02-28T06:35:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】官网:http://olado.github.io官网上面有详细的使用文档。这里我仅仅记录将其如何改为jQuery插件。```javascript$.extend({tmpl: function(template, data){ return doT.template(template... <a href="https://www.cnblogs.com/myqianlan/p/4305397.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4276598.html关于JS获取元素宽度的一点儿思考 - myqianlan因为最近在做一个图片布局的东西,采用的是浮动方式(PS:经过查资料后,结论是浮动布局性能没有绝对定位高。有哪位大神可以详细说说么?)好像歪楼了,回归正题。##问题出现背景:因为图片布局需要比较精确的宽度数据,用来对图片进行处理。直接在resize的时候使用元素的offsetWidth来获取宽度数据。...2015-02-06T02:47:00Z2015-02-06T02:47:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】因为最近在做一个图片布局的东西,采用的是浮动方式(PS:经过查资料后,结论是浮动布局性能没有绝对定位高。有哪位大神可以详细说说么?)好像歪楼了,回归正题。##问题出现背景:因为图片布局需要比较精确的宽度数据,用来对图片进行处理。直接在resize的时候使用元素的offsetWidth来获取宽度数据。... <a href="https://www.cnblogs.com/myqianlan/p/4276598.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4275163.html类似百度图片,360图片页面的布局插件 - myqianlan这是一个jQuery插件,功能简单,专注一件事,也想在后面做好一件事。这种布局要求是同行高度相等,每行刚好容器宽,而且图片按比例缩放。经过一番折腾,并且参考了360和百度图片的布局,最终简单做出了这个DEMO。后期肯定还有许多根据业务需要修正的地方,不过还在实现方式比较简单易懂,也为以后重写奠定了基...2015-02-05T08:26:00Z2015-02-05T08:26:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】这是一个jQuery插件,功能简单,专注一件事,也想在后面做好一件事。这种布局要求是同行高度相等,每行刚好容器宽,而且图片按比例缩放。经过一番折腾,并且参考了360和百度图片的布局,最终简单做出了这个DEMO。后期肯定还有许多根据业务需要修正的地方,不过还在实现方式比较简单易懂,也为以后重写奠定了基... <a href="https://www.cnblogs.com/myqianlan/p/4275163.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4267161.html也说2015前端框架将何去何从 - myqianlan前几天,看了一篇博客:2015前端框架何去何从 http://www.cnblogs.com/sskyy/p/4264371.html博主说,2015将是前端框架相互借鉴相互融合的一年。我对这个观点,是同意,也是不同意。为何同意?2014,前端框架可谓如春秋战国,诸子百家一般。每个框架都有自己不同的...2015-02-02T02:48:00Z2015-02-02T02:48:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】前几天,看了一篇博客:2015前端框架何去何从 http://www.cnblogs.com/sskyy/p/4264371.html博主说,2015将是前端框架相互借鉴相互融合的一年。我对这个观点,是同意,也是不同意。为何同意?2014,前端框架可谓如春秋战国,诸子百家一般。每个框架都有自己不同的... <a href="https://www.cnblogs.com/myqianlan/p/4267161.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4255346.htmla标签中使用img后的高度多了4px - myqianlan前两天,在做一个网站的时候,发现a标签中使用img后的高度多了4px,各种纠结。最后,仔细分析,终于找到原因了,因为img是行内元素,默认display: inline; 它与文本的默认行为类似,下边缘是与基线(baseline)对齐,而不是紧贴容器下边缘。将displayp设置为block即可消除...2015-01-28T03:31:00Z2015-01-28T03:31:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】前两天,在做一个网站的时候,发现a标签中使用img后的高度多了4px,各种纠结。最后,仔细分析,终于找到原因了,因为img是行内元素,默认display: inline; 它与文本的默认行为类似,下边缘是与基线(baseline)对齐,而不是紧贴容器下边缘。将displayp设置为block即可消除... <a href="https://www.cnblogs.com/myqianlan/p/4255346.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4233999.htmlBackbone.js学习之View - myqianlan千呼万唤始出来,终于到最后一个要点View了。照旧,先来一睹官方文档:> Backbone views are almost more convention than they are code — they don't determine anything about your HTML or C...2015-01-19T08:04:00Z2015-01-19T08:04:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】千呼万唤始出来,终于到最后一个要点View了。照旧,先来一睹官方文档:> Backbone views are almost more convention than they are code — they don't determine anything about your HTML or C... <a href="https://www.cnblogs.com/myqianlan/p/4233999.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4233473.htmlBackbone.js学习之Router - myqianlan官方文档的解释:> Web applications often provide linkable, bookmarkable, shareable URLs for important locations in the app. Until recently, hash fragments (#p...2015-01-19T04:39:00Z2015-01-19T04:39:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】官方文档的解释:> Web applications often provide linkable, bookmarkable, shareable URLs for important locations in the app. Until recently, hash fragments (#p... <a href="https://www.cnblogs.com/myqianlan/p/4233473.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4226592.htmlBackbone.js学习之Collection - myqianlan首先,当然是一如既往地看官方文档的解释。> Collections are ordered sets of models. 翻译:> Collections是models的一个集合。关于book和bookshelf的例子```javascript var Book = Backbone...2015-01-15T08:56:00Z2015-01-15T08:56:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】首先,当然是一如既往地看官方文档的解释。> Collections are ordered sets of models. 翻译:> Collections是models的一个集合。关于book和bookshelf的例子```javascript var Book = Backbone... <a href="https://www.cnblogs.com/myqianlan/p/4226592.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4225718.htmlBackbone.js学习之Model - myqianlan首先,我们看一下官方文档中对Model的解释(或者说定义):> Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the log...2015-01-15T02:52:00Z2015-01-15T02:52:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】首先,我们看一下官方文档中对Model的解释(或者说定义):> Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the log... <a href="https://www.cnblogs.com/myqianlan/p/4225718.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4211130.html一段好久前与同学的对话 - myqianlan今日,偶然翻起。记录之。> 花凋叶落尽归根,楼去人空各寻梦。> 青春年少可荒废,满心欢喜想愁忧。> 迷途之羊尚知返,脑残之童徒自救。> 大熊有毛能御寒,笨蛋无心难哓意。> 小熊无毛亦御寒,天才有心亦不知> 石头剪刀谁出布,简单游戏几人赢。> 朗朗乾坤人尽善。昭昭日月心自明。> 奈何人间如一梦?不知天...2015-01-08T07:32:00Z2015-01-08T07:32:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】今日,偶然翻起。记录之。> 花凋叶落尽归根,楼去人空各寻梦。> 青春年少可荒废,满心欢喜想愁忧。> 迷途之羊尚知返,脑残之童徒自救。> 大熊有毛能御寒,笨蛋无心难哓意。> 小熊无毛亦御寒,天才有心亦不知> 石头剪刀谁出布,简单游戏几人赢。> 朗朗乾坤人尽善。昭昭日月心自明。> 奈何人间如一梦?不知天... <a href="https://www.cnblogs.com/myqianlan/p/4211130.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4208725.html浏览器检测(包括国内)原理 - myqianlan浏览器检测通常都是通过分析用户代理字符串(navigator.userAgent)来进行检测。由于国内浏览器用的内核多是国外的,所以很多特性无法与国外浏览器区分,所以要先检测国外浏览器,再检测国内浏览器。这样当国内浏览器没有找到匹配项时就是内核默认的国外浏览器。```javascriptfuncti...2015-01-07T08:16:00Z2015-01-07T08:16:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】浏览器检测通常都是通过分析用户代理字符串(navigator.userAgent)来进行检测。由于国内浏览器用的内核多是国外的,所以很多特性无法与国外浏览器区分,所以要先检测国外浏览器,再检测国内浏览器。这样当国内浏览器没有找到匹配项时就是内核默认的国外浏览器。```javascriptfuncti... <a href="https://www.cnblogs.com/myqianlan/p/4208725.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4201483.html奇妙的输出,其实不奇妙 - myqianlan首先,给出一个奇妙的输出。如下:```javascriptalert(12>1) // false```啊哈,换了一个方向,怎么就输出不一样了?好奇妙的样子!其实认真分析一下,也就是正常的输出了,一点儿也不奇妙!首先,我们要知道在javascript中,undefined, null, 0, '...2015-01-04T08:39:00Z2015-01-04T08:39:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】首先,给出一个奇妙的输出。如下:```javascriptalert(12>1) // false```啊哈,换了一个方向,怎么就输出不一样了?好奇妙的样子!其实认真分析一下,也就是正常的输出了,一点儿也不奇妙!首先,我们要知道在javascript中,undefined, null, 0, '... <a href="https://www.cnblogs.com/myqianlan/p/4201483.html" target="_blank">阅读全文</a>https://www.cnblogs.com/myqianlan/p/4197909.html从2014到2015,还有什么? - myqianlan2014年,在我身上发生了太多的事情。愉快的,悲伤的,令人兴奋的,使人悲痛欲绝的,可谓应有尽有。这一年,我从无锡折腾到了广州,然后我又回到了无锡。这一年,我本该毕业,可未能如期毕业。这一年,我从一个前端新手,逐步成长,有了想望。这一年,我穷得可以,有时候,只能吃馒头充饥!过去的,都过去了!我也不想再...2015-01-01T14:22:00Z2015-01-01T14:22:00Zmyqianlanhttps://www.cnblogs.com/myqianlan/【摘要】2014年,在我身上发生了太多的事情。愉快的,悲伤的,令人兴奋的,使人悲痛欲绝的,可谓应有尽有。这一年,我从无锡折腾到了广州,然后我又回到了无锡。这一年,我本该毕业,可未能如期毕业。这一年,我从一个前端新手,逐步成长,有了想望。这一年,我穷得可以,有时候,只能吃馒头充饥!过去的,都过去了!我也不想再... <a href="https://www.cnblogs.com/myqianlan/p/4197909.html" target="_blank">阅读全文</a>