jshint在gulp中的使用 jshint是用来检测javascript的语法错误的，在grunt和gulp都有这个插件，这里简单的介绍下jshint的使用方法。 1. 安装jshint # 在已经安装node的情况下，在当前项目的目录下，使用以下的命令即可进行安装，非常的方便，因为是在gulp下使用，所以也得先安装gulp：npm install gulp npm install jshint 安装完成上面的两个组件后，在当前目录下新建一个gulpfile.js，在这个文件里，我们来调用jshint进行代码检查。 2. jshint的配置 # 这里主要讲解jshint中参数的配置和报错提示的设置。 2.1 jshint参数的配置 # 首先我们来了解下jshint的来源，再说jshint的参数配置。前端领域的大牛Douglas Crockford编写了JsLint，将他认为的那些重要的js编程实践作为静态检查项，他提出的某些编程实践也确实被人们所接受，因为这确实是容易引起问题的关键点（例如，在应该使用===的地方不要使用==等）。不过JsLint也存在一些问题，如它的某些检查过于严苛；遇到for-in语句后会停止检测；且非开源。。这些问题都使得人们对JSLint“敬而远之”。为解决jslint现存的问题，有了JSHint这个项目，此开源项目作为JSLint的一个分支，允许用户自定义检查项，使用起来更加轻量级。有了JSHint，程序员就可以根据自己的编程习惯来定制个性化的检查策略。通过以上的历史我们能够知道，jshint能进行参数配置，正是对jslint的一种改进。jshint的配置有两种方式：使用特殊文件.jshintrc和讲参数都写进json文档里(比如叫jshint_age.json)。如果使用的是.jshintrc的这种方式，jshint就会首先在当前目录里查找是否存在.jshintrc这个文件，如果没有找到就向上一级目录里寻找，直到文件的根目录。这种方式，可以让你对每个项目进行单独的配置，不过，如果你想所有的项目都是使用相同的配置，可以将.jshintrc放在根目录。还有一种就是使用json文件的配置方式，将各种参数都写进这个json文件里，然后gulpfile.js在进行引用。关于参数，可以参考的设置：{ "undef": true, // 所有的非全局变量，在使用前必须都被声明 "unused": true, // 所有的变量必须都被使用 "predef": [ "MY_GLOBAL" ] // 这里的变量可以不用检测是否已经提前声明 } 2016年8月4日添加如何在json文件进行配置呢，这里我简单的写了一个demo，可以参考一下。package.json :{ "jshintConfig":{ "undef": true, "unused": true, "predef": [ "MY_GLOBAL", "ads" ] // 声明几个全局变量 }, "author": "wenzi", "license": "ISC" } index.js :var num = 0; ads = 1; function func(){ var a=1,b; console.log(a); } gulpfile.js :var gulp = require('gulp'); var jshint = require('gulp-jshint'); var packageJSON = require('./package'); var jshintConfig = packageJSON.jshintConfig; jshintConfig.lookup = false; // 根据jshintConfig的规则检测index.js文件 gulp.task('default', function(){ gulp.src('./index.js') .pipe(jshint(jshintConfig)) .pipe(jshint.reporter('default')); }) 运行gulp之后得到的结果是：index.js: line 6, col 13, 'b' is defined but never used. index.js: line 3, col 1, Read only. index.js: line 8, col 5, 'console' is not defined. index.js: line 1, col 5, 'num' is defined but never used. index.js: line 5, col 10, 'func' is defined but never used. 5 errors 可以看到，配置文件已经起作用了，ads的全局变量没有被检测出来。2016年8月4日添加end这里再讲解几个参数的说明，如果想了解更多的参数，还可以访问其官方网站：【jshint的参数配置】 prop description bitwise 如果是true，则禁止使用位运算符 curly 如果是true，则要求在if/while的模块时使用TAB结构 debug 如果是true，则允许使用debugger的语句 eqeqeq 如果是true，则要求在所有的比较时使用===和!== evil 如果是true，则允许使用eval方法 forin 如果是true，则不允许for in在没有hasOwnProperty时使用 maxerr 默认是50。 表示多少错误时，jsLint停止分析代码 newcap 如果是true，则构造函数必须大写 nopram 如果是true，则不允许使用arguments.caller和arguments.callee nomen 如果是true，则不允许在名称首部和尾部加下划线 onevar 如果是true，则在一个函数中只能出现一次var passfail 如果是true，则在遇到第一个错误的时候就终止 plusplus 如果是true，则不允许使用++或者- -的操作 regexp 如果是true，则正则中不允许使用.或者`[^…]` undef 如果是ture，则所有的局部变量必须先声明之后才能使用 sub 如果是true，则允许使用各种写法获取属性(一般使用.来获取一个对象的属性值) strict 如果是true，则需要使用strict的用法，详见http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/ white 如果是true，则需要严格使用空格用法。 2.2 jshint的错误提示 # 既然检测错误，那就得把错误信息和错误位置提示出来，好让我们进行修改。在gulpfile.js里编写如下的代码var gulp = require('gulp'); var jshint = require('gulp-jshint'); // 建立js任务，进行代码检查 gulp.task('js', function(){ gulp.src('./js/**/*.js') // 检查文件：js目录下所有的js文件 .pipe(jshint()) // 进行检查 .pipe(jshint.reporter('default')) // 对代码进行报错提示 }); gulp.task('default', ['js']) 然后在命令里运行gulp，就可以看到对js代码的检查信息了，如果代码里有错误的话，就会提示到命令行里。当然，我们还可以自定义错误提示，不过需要引入map-stream模块。var mapstream = require( 'map-stream' ); /* file.jshint.success = true; // or false 代码检查是否成功 file.jshint.errorCount = 0; // 错误的数量 file.jshint.results = []; // 错误的结果集 file.jshint.data = []; // JSHint returns details about implied globals, cyclomatic complexity, etc file.jshint.opt = {}; // The options you passed to JSHint */ var myReporter = map(function (file, cb) { if (!file.jshint.success) { console.log('[ '+file.jshint.errorCount+' errors in ]'+file.path); file.jshint.results.forEach(function (err) { /* err.line 错误所在的行号 err.col 错误所在的列号 err.message/err.reason 错误信息 */ if (err) { console.log(' '+file.path + ': line ' + err.line + ', col ' + err.character + ', code ' + err.code + ', ' + err.reason); } }); } cb(null, file); }); gulp.task('jshint', function() { return gulp.src('./lib/*.js') // lib目录下所有的js文件 .pipe(jshint()) // js代码检查 .pipe(myReporter); // 若有错误，则调用myReporter进行提示 }); 这样就能根据我们自己的配置来进行比较顺手的错误提示，帮助我们修改代码。 3. 总结 # 当然，jshint仅仅是javascript的语法检查工具，检测不出来我们的逻辑问题；也不能用于代码的压缩与合并，其他的功能则需要其相应的模块进行处理

简析jQuery中的ready事件 不管是我们使用 jQuery 还是其他任何的库，我们大部分都会使用到 ready 的事件，因为很多的代码只能在 DOM 结构加载完成后才能执行，否则就会报错。因此都会封装跨浏览器兼容性的 ready 事件，不过本篇文章主要是讲解 jQuery 中的 ready 事件。 1. 为什么要使用 ready # 上面已经说了，“有些代码只能在 DOM 结构加载完成后才能执行”，不过有的人可能不是太理解，这里我们来举一个简单的例子var time = document.getElementById('time'); time.innerHTML = Date.now(); 我们在页面中运行上面的代码，控制台就报错：Uncaught TypeError: Cannot set property 'innerHTML' of null，意思就是不能给不存在的对象设置 innerHTML 属性。这是因为当代码执行到document.getElementById('time')时，id 为 time 的 DOM 元素还没加载，找不到 time 这个元素，代码就报错了；正确的方式就是把 js 代码放到 body 的后面，这样就能保证所有的 DOM 元素都执行完后才执行 js 代码。如果只是特别单纯简单的 js 代码，从上往下执行的那种，直接放在 body 的后面，是没必要使用 ready 的；但是，更多的情况，是没有那么多简单的 js 代码的，比如有的时候需要把 js 代码放在前面，有时需要延迟执行一些 js 代码，等等，这些就需要用到 ready 事件了。 2. ready 的书写方式 # jQuery 中的 ready 事件通常有两种书写方式，效果都是一样的：简写方式：$(function () { // ready }); 完整的方式：// 给document元素绑定ready事件 $(document).ready(function () {}); 其实在 jQuery 的内部，简写的方式最终也是通过调用下面的方式的。我们来看 jQuery 的源码里：// HANDLE: $(function) // Shortcut for document ready if () { } else if ( jQuery.isFunction( selector ) ) { return typeof rootjQuery.ready !== "undefined" ? rootjQuery.ready( selector ) : // Execute immediately if ready is not present selector( jQuery ); } 在$(selector)里，若参数 selector 是 function 类型的，即$(function () {}); function ready() {} $(ready); 则调用rootjQuery.ready( selector )，而且:rootjQuery = jQuery(document); 即：jQuery(document).ready(function () {}); 3. ready 的触发机制是什么 # 我们在上面已经了解了 jQuery 的 ready 的使用方法，在这一节我们来了解下 ready 的实现机制： document.readyState 表示文档当前的加载状态，因此可以使用document.readyState==complete来判断 DOM 是否加载完成，但是低版本的 firefox 不支持此属性： UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。 loading：加载程序进行中，但文件尚未开始解析。 loaded：部分的文件已经加载且进行解析，但对象模型尚未生效。 interactive：仅对已加载的部分文件有效，在此情况下，对象模型是有效但只读的。 complete：文件已完全加载，代表加载成功。 DOMContentLoaded 是当所有 DOM 结构解析完，而不用等待其他的资源（如图片，PDF 等）加载完成，就可以触发这个事件；所有的高级浏览器都支持此事件，只有低版本的 IE 不支持此事件； ie6~8 可以使用 document.onreadystatechange 事件监听 document.readyState 状态是否等于 complete 来判断 DOM 是否加载完毕，如果页面中嵌有 iframe 的话，ie6~8 的 document.readyState 会等到 iframe 中的所有资源加载完才会变成 complete，此时 iframe 变成了耗时大户。但是经过测试，即使页面中没有 iframe，当 readyState 等于 complete 时，实际触发的是 onload 事件而不是 DOMContentLoaded 事件，对这点表示惊奇。 还好 ie 有个特有的 doScroll 方法，当页面 DOM 未加载完成时，调用 doScroll 方法时，就会报错，反过来，只要一直间隔调用 doScroll 直到不报错，那就表示页面 DOM 加载完毕了，不管图片和 iframe 中的内容是否加载完毕，此法都有效。 当我们了解了上面的知识后，就容易理解 jQuery 的 ready 设计机制了。// Catch cases where $(document).ready() is called after the browser event has already occurred. // we once tried to use readyState "interactive" here, but it caused issues like the one // discovered by ChrisS here: http://bugs.jQuery.com/ticket/12282#comment:15 // 曾经打算用document.readyState === "interactive"来判断DOM是否加载完成，但是会出现bug，因此使用complete // 如果当前状态已经是complete里，就直接执行 if (document.readyState === 'complete') { // Handle it asynchronously to allow scripts the opportunity to delay ready // 异步执行ready方法，以保证脚本有机会延迟执行（holdReady） setTimeout(jQuery.ready); // Standards-based browsers support DOMContentLoaded // 支持addEventListener的浏览器都支持DOMContentLoaded，直接调用DOMContentLoaded即可 } else if (document.addEventListener) { // Use the handy event callback document.addEventListener('DOMContentLoaded', completed, false); // A fallback to window.onload, that will always work // 有的浏览器会缓存load方法，下一次加载时load有可能优先于DOMContentLoaded触发 // 因此两个都写上，哪个先触发就走哪个 // 但是两个都写上，就不怕触发两次么，先把这段代码看完，然后看第4节 window.addEventListener('load', completed, false); // If IE event model is used // 如果当前是IE浏览器 } else { // Ensure firing before onload, maybe late but safe also for iframes // 绑定onreadystatechange以监听readyState的变化 document.attachEvent('onreadystatechange', completed); // A fallback to window.onload, that will always work window.attachEvent('onload', completed); // If IE and not a frame // continually check to see if the document is ready // 如果当前页面中没有frame，则持续检查是否可以调用doScroll方法以监听document是否加载完成 var top = false; try { top = window.frameElement == null && document.documentElement; } catch (e) {} if (top && top.doScroll) { (function doScrollCheck() { if (!jQuery.isReady) { try { // Use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ top.doScroll('left'); } catch (e) { return setTimeout(doScrollCheck, 50); } // detach all dom ready events detach(); // and execute any waiting functions jQuery.ready(); } })(); } } 4. completed 方法 # 在上面的方法中，不论是触发 DOMContentLoaded，还是 load，还是 onreadystatechange，都会执行 completed，那这个方法里都干了些什么呢？我们来看看。/** * The ready event handler and self cleanup method */ function completed() { // readyState === "complete" is good enough for us to call the dom ready in oldIE // 即使在老版IE下readyState === "complete"也足以说明DOM加载完成 if (document.addEventListener || event.type === 'load' || document.readyState === 'complete') { detach(); // 执行detach函数 jQuery.ready(); // 执行ready } } /** * Clean-up method for dom ready events */ // 从这个方法里可以看到，不论是先执行DOMContentLoaded还是先执行load，都会把两个事件同时解除掉，因此这两个事件最多只能触发一次；IE下同理 function detach() { if (document.addEventListener) { document.removeEventListener('DOMContentLoaded', completed, false); window.removeEventListener('load', completed, false); } else { document.detachEvent('onreadystatechange', completed); window.detachEvent('onload', completed); } } 看着写了挺多，其实还有很多没有说到点子上，只是写了一些自己的理解罢了！！

使用DOM中的a标签解析url 当我们想要解析当前页面的url时，可以使用window.location中提供的各种方法，比如一个页面的地址是这样的：http://www.xiabingbao.com：80/javascript/2015/11/28/javascript-a-parse-url/?from=google&v=1.2#hash 那么我们在当前页面下的js里，就可以这样获取url中的各个部分： window.location.href : 整个完整的url window.location.protocol : url的协议（http:或https:等），当前例子返回 http: window.location.host : url的主机地址，当前例子返回 www.xiabingbao.com window.location.port : url的端口号，若采用默认的80端口（即使手动添加），则返回空字符串，当前例子返回 "" window.location.pathname : url的路径部分，当前例子返回 /javascript/2015/11/28/javascript-a-parse-url/ window.location.search : url的查询参数部分（返回带有问号），当前例子返回 ?from=google&v=1.2 window.location.hash : url的锚点部分，当前例子返回 #hash 但是，如果分析的不是当前页面的地址，而是一个变量中的值，那我们应该怎么办呢？这里我们可以借助a标签来实现解析url的功能。// 创建一个额外的a标签 function parseURL(url) { var a = document.createElement('a'); a.href = url; return { source: url, protocol: a.protocol.replace(':',''), host: a.hostname, port: a.port, query: a.search, params: (function(){ var ret = {}, seg = a.search.replace(/^\?/,'').split('&'), len = seg.length, i = 0, s; for (;i

用js制作一个简单的明朝时间轴 不多说，先上 github 地址：ming_timeline。目前皇帝和事件的数据只弄了几个，后续会接着完善，也欢迎大家补充，^_^。这个项目没有使用什么高深的技术，就是用 html 拼接出来的。这个时间轴主要是由三部分组成： 时间刻度轴（公历） 皇帝在位轴（从某年到某年在位） 大事件轴（于某年发生某事） 1. 时间刻度轴 # 设置时间刻度轴需要设置两个变量：每个年份之间的像素距离（year_per）和每个大刻度之间的年数（year_degree）// 设置时间刻度 setYearLine : function(defaults){ var html = ''; for(var i=defaults.year_start; i 0) { this.scrollLeft = sleft - 100; // 滚动条向左移动 } else { this.scrollLeft = sleft + 100; // 滚动条向右移动 } }); 当然还有很多其他的内容需要添加上，比如各个派系，内阁首辅是谁等等，需要完善的地方还有很多。

2015年年终总结 2015 年还有几天就要过去了，总的来说这一年过得不太那么顺人意，感觉这一年里自己的性格好像封闭了好多，周末不愿意出去了，要么是学习，要么是游戏，反正周末的两天就是懒得出去，这真真是个严重的问题，明年，不，现在就要改正，不论是否有人作伴，总是要出去走走的。 2012 年末总结【 2013 年的希冀 】 2013 年末总结【 2014 的希冀 】 2014 年末总结【 2015 年年末总结 】 这已经是第四次年终总结了，可是每到总结的时候，总是习惯一条一条的列出来，不能用一整段的文字描述出来 1. 回顾 # 1.1 个人 # 1.1.1 完善了自己的博客，样式、评论、css 和 js 的压缩等 # 从开始搭建博客以来，一直在修改博客的样式，大概到 8 月份的时候样式才稳定下来吧，就是希望自己的博客能够清新简洁一点，符合技术博客的特点；评论使用的是第三方插件多说；自从学习了 gulp 之后，就开始在自己的博客上练手了，把自己的博客上的 css 和 js 压缩了一下，不过还有一个没弄，就是生成 md5，过段时间弄一下。 1.1.2《狼图腾》 # 春节时看了曾经最期待的电影《狼图腾》，当然不能奢求电影和小说一样，自己看来还是不错的。《狼图腾》这本书在高中的时候看的，后来听说要拍成电影，就一直很期待，在春节的时候终于上映了，嘿嘿。 1.1.3 换工作了 # 现在来说，换工作还是有点太急了，看到其他人都在跳槽，自己也没有忍住，其实那里还是有不少的东西可以学习。不过，既然已经跳了，那就安心的做好现在的工作，能从现在的工作里学到东西 1.1.4 买了个 kindle # 在大概 11 月份的时候，买了个 kindle。看网上有很多关于 kindle 和 pad 的争论，这里不讨论谁好谁坏，从买了到现在，一直在看《明朝那些事儿》。 1.1.5 参加开源大会 # 在 12 月份的时候参加了开源中国举办的开源大会，本来人家说的是国际会议中心，结果去了国家会议中心，还好这两个中心离得不是很远，要不然真就放弃这个大会了。不过，也是没听完，见到了 PHP 的鸟哥之后，也就回去了，吃了顿午餐，领了根笔，汗！ 1.2 工作 # 1.2.1 几个同事相继离职 # 其实同事离职并不是什么大事儿，只是带我入门的大哥和部门的经理也离职了，给我感触挺大的，毕竟像咱这种小喽啰走了也就走了。 1.2.2 静态化，前端工程化 gulp # 在之前的那个公司，学习最多的就是关于版本管理和 gulp 的使用了，以前用的是 svn，现在用的是 hg；在这个公司里也接触了不少 node 和 gulp 的使用。还有就是关于前端集成方面的一些知识 1.2.3 开始做 html5 页面了 # 其实之前做的一直是 PC 前端，不过移动端肯定是个大趋势，只是没机会接触到，现在也是边做 html5，边学习中... 1.3 其他的事儿 # 1 月去打真人 CS 了 3 月份聚美 5 周年促销 好像没什么了，哈哈 去年的目标本来打算是戒掉游戏和视频的，带上 2014 年的一段时间，已经戒了很长时间了，但是因为 TI5 的举行，又开始玩起来了，罪过罪过！ 2. 展望 # 现在定下 2016 年的新目标吧，万一实现了呢（把目标定的小一点）！ 买个 iPhone 给笔记本配个外接显示器 去几次 798 leetcode 上通过 50 道题目以上 jquery 的源码学习和解读 学习 react 学习 angular，紧跟前端前沿技术 CSS3 的 flex CSS3 的 animation 等 拼图游戏 参加几次学术交流会 写一个练手的小项目（什么项目呢） 添加中... 希望我在将要到来的 2016 年能开心的度过。做人嘛，最重要的就是开心嘛！