Night Sun

本文不是讲history的replaceState和pushState这2个方法怎么用，而是要说在无法删除浏览器history的情况下，如何能正确回退页面的问题。 ## 场景 有个H5的需求，需要一屏一屏的切换页面，到最后一个结果页面时，如果点击了手机的返回键，或者浏览器自带的返回键，希望能回到主页。但是在中间的切屏过程中，点返回或者前进，就是这几个页面之间切换。 比如，总共有这么几个页面： 1. 首页 1. 1/4页 1. 2/4页 1. 3/4页 1. 4/4页 1. 结果页 如果你在2/4页时，点击返回是要回到1/4页，如果你是在结果页，点击返回，是要回到首页。 ## 处理 典型的spa应用，通过改变 `location.hash` 并且监听 `onhashchange` 事件，处理对应的页面即可。 ## 问题 对于浏览器而言，改变了location.hash，其实也是给浏览器的history对象，写入了一条历史记录。 所以，对于我这个应用的处理，其实就生成了6条历史记录，可以通过：history.length查看（假如浏览器地址栏输入地址直接进入的首页）。 那么，对于需求来说，在中间的页面切换都没有问题，但是到了...

jQuery中提供了3个方法，`.attr()`、`.prop()` 和 `.data()`，本文就介绍下这3者之间的不同。 ## .attr 和 .prop 关于这组概念在 `jquery-1.6.1` 的升级日志里说的太清楚不过了，看：[这里](http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/)，这里我大体总结下。 其实有一句话非常关键，大家只要理解了它，就自然明白了：  ### `property` 是元素的固有特性，体现了它相关的 `attribute`（如果存在的话） 比如：对于 `checkbox` 而言 `checked` 是其固有特性。怎么理解这句话呢？ 看看示例： ```html ``` * 这里没有checked这个属性（attribute），即：$('#checkbox').attr('checked') 的值是 undefined * 但是我可以通过js，获取其是否选中的特性，即：$('#checkbox').prop('checked')...

最近在用ajax进行上传的时候，用到了许多ajax上传的js插件，有一些坑，拿出来跟大家分享下。 ## 常用的2款ajax上传插件 * [AjaxFileUpload](https://github.com/carlcarl/AjaxFileUpload) * [jQuery File Upload](http://blueimp.github.io/jQuery-File-Upload/) 论功能来说，我是觉得 `jQuery File Upload` 要比 `AjaxFileUpload` 强大很多，比如：前者支持跨域。 当然，二者在处理ajax上传上面的思想都是一样的，就是通过 `iframe` 的方式提交上传以及获取返回结果等。 ## 基础知识 ### 关于input:file的特殊限制 1. 处于安全限制，浏览器禁止使用js修改input:file的值。比如你想清空file文本框：`$('#file').val('')`，是不行滴。 1. 处于安全限制，对于input:file，`clone()`后的对象，value是空的。 ### jquery中的clone()方法 参考：[JS解惑-jQuery.clone](http://www.night123.com/2016/night-js-disabuse-jquery-clone/)...

--- title: JS解惑-jQuery.clone date: 20161107104059 categories: [WEB] tags: [js] --- 关于jQuery中clone的一些解惑。 ## 用途 假如你想把一个html元素copy一份到另一个元素中，就可以使用 `.clone` 了。 比如： ```html Hello Goodbye ``` 如果你想把 `.hello` 放到 `.goodbye` 中，那么以下写法就是不对的。 ```js $( ".hello" ).appendTo(...

本文将帮助你理解这几个概念：`shim`、`polyfill` 和 `vanilla`。 ## shim 是一个小的类库（lib），提供独立的API，以弥补人们在不同的环境下使用原生语言需要考虑兼容性的问题。比如：使用js原生Ajax操作时，你用 `XMLHttpRequest` 创建xhr对象，但是在IE8上，你就得用 `ActiveXObject`，为了解决这些兼容问题，同时简化操作，jQuery出现了。jQuery的核心理念就是： `write less,do more`！ 所以，`jQuery` 就可以看成一个 `shim`。 ## polyfill 是一个小的类库（lib），用于实现浏览器并不支持的原生API的代码。比如：IE9以下不支持html5新增的一些标签，于是 [`HTML5 shim`](https://github.com/aFarkas/html5shiv) 出现了；当前ES6，以及ES6+的一些语法并未完全普及时，如果你要使用，那么晚了可以使用 [`Babel`](https://babeljs.io/) 来编译成 `ES5` 的语法。 这里注意概念中的一点：`原生API的代码`，指能称得上polyfill的类库，解决方案一定是在不兼容的环境下，重新定义JS本身的语法，不会重新定义API。 比如：IE9以下不支持 `` 标签，`HTML5 shim`...

有没有发现，行内元素之间有一些空隙？ ## 一、行内元素之间的空隙 先举个栗子 ```html 1 2 3 ``` 展示出来的结果，你发现1、2、3之间并未严格贴在一起，而是之间有一些间隙？ 这就是行内元素之间默认的间隙！ 本文简单的讲下出现这种问题的常见的场景！ ## 二、行内元素的形成 ### 2.1 默认的行内元素存在间隙 如：`a`、`span`、`img`等 ### 2.2 强制将元素属性设置为 `inline` 或者 `inline-block`的 ```css div{ display : inline;/* inline-block...

 昨天开小组例会时，我们收集到一个组内同事提的议题：`怎么判断一个东西是否达到了行业标准，怎么获取一个东西的行业标准？`。 初次看到这个话题，我首先想到的是行业标准就是 `参考别人怎么做的`，至于怎么获取，要么就是自己已经明确知道行业内的老大都有哪些了，要么就是初次进入这个行业，那么就只能多走走市场，多在百度上 `Google` 一下喽！但是，后来仔细想了下，觉得这个话题并没有这么简单，我的回答也并没有令人满意，疑点颇多。 再加上我们不是修改了我们的中期愿景么？简单点说就是：`只做第一！`，这个口号的潜台词就是，`在这个行业内`，我们：`只做第一！`，不是么？到别的领域这个口号也就没意义了。 人常说 `知己知彼，百战不殆！`，我们现在处于 `什么行业？`，`行业内我们现在排行第几？`，`这个排行如何定义的？`，搞不清这些何谈 `只做第一？`。 本文就来谈谈自己的理解和认识。 > 注：由于本人知识面浅薄，如果您觉得我的言论片面，欢迎批评指正。 ## 什么是行业 行业，指主要根据职业、性质或具体事物，对社会各个领域的称呼。—— ([维基百科](https://zh.wikipedia.org/wiki/%E8%A1%8C%E4%B8%9A)) ## 行业的特点 既然我们知道了行业只是一个称呼，那么这里面就会有太多的不确定性，随机性，只是这个称呼在特定时间特定场合下大家一致认可了而已。 比如，我们经常说的： 1. `传统行业`，说到这个词我们从不同的维度，如：衣食住行相关的、吃喝玩乐相关的等，举出一些如：服装行业、餐营业、酒店行业、旅游业、土木水电行业、煤炭行业等等。 1. `IT行业`，这个就是相对于 `传统行业` 最近些年才出现的行业，也慢慢的被大家所认可，有些人一提到这个行业，就会默默的给它打个标签：`高薪`、`加班`、`程序猿`，甚至 `猝死` 之类。...

我们知道页面直接进入CSS文件是不存在跨域问题的，但是有没有遇到过CSS中依赖的字体会存在跨域问题？ ## 问题 比如，现在矢量小图标非常流行，也有一些开源的矢量图库让你用，比如我们将 `font-awesome` 这个CSS部署到一台服务器上，在另一台服务器访问。 如：我们在 `y.domain.com` 地址中请求 `x.domain.com` 的这个资源。 ```html ``` 你会看到类似的跨域的错误：  ## 原因 `font-awesome.css` 依赖了字体文件： ```css @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.6.3'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3')...

你知道 `+new Date()` 结果等于多少吗？ ## 背景 昨天看到一种书写方式，当时就有点懵，写法如下： ```js var time = +new Date(); ``` 好奇之，就Google了一下，豁然开朗，于是分享之…… ## 结果 以上代码，等于如下代码： ```js function(){ return Number(new Date); } ``` 所以，结果其实就是 `当前时间的时间戳`，也等于如下结果： ```js new Date().getTime();//20170329205038...

`undefined`和`null`本质上没什么区别，只是用法上代表的含义不一样罢了。 ## 前言 为什么说，`undefined`和`null`本质上没什么区别？ 通过这个来看看： ```js undefined == null //true null == undefined //true ``` 另外，再阅读本文之前，建议大家先看看阮一峰老师的博客，以便了解下这二者的历史。 [阮一峰 > undefined与null的区别](http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html) ## 定义 * `null`，表示一个“无”的对象； * `undefined`，表示一个“无”的原始值； 如何理解这2个定义？看看例子： ```js typeof(null) //object typeof(undefined)...