2016年年底国内网站对IE浏览器的支持情况 还有 6 天的时间马上就要进入 2017 年了，在 IE 份额逐渐减少的情况下，我们来看看国内网站对 IE 浏览器的支持情况。按照百度对浏览器市场份额近三个月的统计，我们可以了解到几个重要的信息： 国内第一大浏览器当属chrome，紧随其后的是 IE8 浏览器 IE6 浏览器不再单独统计，纳入“其他”分类，可见 IE6 的市场份额已经相当低了 IE7 的市场份额约占 3.96% 2016 年的年底，IE6 已经基本退出了市场，大部分的网站都已经不再支持 IE6 了。曾经在聚美优品工作时，那时聚美优品的网站还要支持到 IE6 呢，不知道现在还支持不。 而 IE7 的市场份额则刚不到 4%，如果为了这 4%的用户也可以做兼容，放弃这些用户，让这些用户升级浏览器也是个不错的选择，就看公司里整体的安排了。chrome 浏览器能在国内坐上第一的宝座，也是花了不少的时间呀。我们也知道国内用户的特点，改变用户的习惯，让用户进行新的选择，可是一件非常难的事情。不过 chrome 凭着良好的性能和优秀的体验，终于是登上了第一的宝座。 1. 各网站对 IE 浏览器的支持 # 针对国内网站对 IE 浏览器的支持情况，我选择了几个流量比较大的网站，来看看他们的支持情况（只检测 IE7 及以上）： 网站 网址 支持情况 百度 www.baidu.com IE7 腾讯新闻 www.qq.com IE7 淘宝 www.taobao.com IE8(IE7下全屏提示，且无法关闭) 新浪 www.sina.com.cn IE7 微博 www.weibo.com IE7 好123 www.hao123.com IE7 天猫 www.tmall.com IE7,IE8：全屏提示且无法关闭IE9,IE10: 顶部tip提示IE11: 正常 sohu www.sihu.com IE7 光明网 www.gmw.cn IE7 斗鱼直播 www.douyu.com IE8(IE7下全屏提示，可关闭) 虎牙直播 www.huya.com IE8(IE7下全屏提示，可关闭) 通过上面的表格可以发现，大部分的网站还是支持到 IE7 的，只有几个网站在低版本浏览器下进行了提示。而且我们能够看到，淘宝和天猫做的很彻底，IE7 下直接全屏提示且无法关闭，用户必须升级浏览器才能使用。具体情况可点击链接进行查看：【天猫即将不支持 IE8】(文章于双 11 后写的，不过天猫于 12 月 20 日已经部署不支持 IE8 模块到天猫首页、搜索和商品详情，因此标题看起来有点不对)。其他的网站可能出于各种各样的原因，都依然在支持着 IE7 的浏览器，可见 IE7 浏览器还依然收到相当的重视，不可忽略。不过，相信在不远的未来，低版本浏览器终将会被淘汰，进入历史的坟墓。我们能做的，就是加快低版本浏览器淘汰的速度。一步步的提示，让用户放弃低版本浏览器，选择更好的浏览器，为了前端更好的发展。 2. 低版本浏览器的提示 # 对于给用户的提示，我们也是需要有一定策略的，一步步的来： 顶部 tip 提示，可关闭到不可关闭； 全屏提示，可以关闭 全屏提示，不可关闭，用户在当前浏览器不可使用网站 提示进行到最后一步，网站就彻底对低版本浏览器关上了大门，强制用户升级浏览器。 3. 浏览器兼容不是前端的全部工作 # 之前也看到不少人的论调：“没有低版本浏览器，你们程序员不做这些浏览器兼容，工作量少了，就该失业了”。我想说的是：前端不再做兼容方面复杂的工作，就会有更多的精力投入到更好的开发中，可以为用户提供更好更酷的功能。 4. 总结 # 淘汰低版本浏览器，任重而道远，并且也不能成为我们前端开发人员一厢情愿的想法，更应该让用户了解到低浏览器的不足，用户愿意升级。

不平凡的2016年 2016年就这么过去了，最近因为项目比较近，经常加班，今天也才有机会静下心来想想刚刚过去的这一年。我记得2016年的元旦也是在加班，同学过来我这边住还得等我加完班之后才能回去。今天的元旦前后又是忙碌的状态，是在为某项目做一个拉取流量的活动，时间短，接口多，经常需要调试，经常需要加班；而且还造成另一个项目的开始时间一直在延期；然后元旦之后还有一个第4季度的工程师之星评选。时间确实非常紧，不过好歹一步步走，总算是都差不多完成了。大致翻看了一下去年定下的目标，也就实现了一个目标，其他的都没有实现。本来一直打算买一个大点的显示器，不过后来搬家了，桌子变得非常小，导致没有显示器的地方，就搁置了。入职腾讯差不多1年3个月，总的来说稳中有升吧。上半年是进行新闻各频道的改版，下半年里有个奥运会，还有进行其他的工作。翻看了下2016年完成的工作清单，没有出彩的地方，换句话说，就是稳定。在这一年里，确实有些松懈，新技术学习的不到位，接下来要重点学习了。老抓着旧技术不放，总是会被淘汰的。 2017年的目标 # 虽然定目标没什么卵用，但还是要定的： 学习vue，熟练使用vue； leetcode上达到100的正确题目； 换一个单间，我们自己住，这个时候就可以买个显示器了； 希望明年的薪资能再涨涨； 学习下node，这个可能会成为下一年的重点； 希望生活越来越好 愿所有人能在2017年过的更好，加油！

从0到1学习node系列总索引 在node学习中，也总结了一些自己的经验和学习经历，希望能给大家提供一些帮助。 从0到1学习node(一)之模块规范 从0到1学习node(二)之搭建http服务器 从0到1学习node(三)之文件操作 从0到1学习node(四)之简易的网络爬虫 从0到1学习node(五)之mysql数据库的操作 从0到1学习node(六)之express初识 从0到1学习node(七)之express搭建简易论坛 从0到1学习node(八)之异步控制工具asyn 持续更新中...

从0到1学习node(一)之模块规范 总索引： 从0到1学习node系列总索引在讲解CommonJS, AMD, CMD这些概念之前，我们首先俩了解下js的模块化。模块化，顾名思义，就是将项目按照功能或者其他逻辑进行分解处理，每个部分只处理一个功能，进行功能的解耦处理，方便以后的开发和维护。那么模块化必须具有以下的能力，才能进行模块的拆分和组装： 定义封装的模块； 定义新模块对其他模块的依赖； 可对其他模块的引入支持； 那么就需要一套规范准则来定义这些能力，于是就出现了CommonJS, AMD, CMD等。 1. CommonJS # CommonJS原先叫做ServerJS，是js在服务端的规范，node使用的就是这种规范。根据CommonJS规范，一个单独的文件就是一个模块，require用来加载一个模块，exports用来向外部暴露该模块里的方法或属性。例如：// hello.js function say(username){ console.log( 'hello, '+username ); } exports.say = say; =============// main.js var person = require('./hello'); person.say('wenzi'); // hello, wenzi person.say('师少兵'); // hello, 师少兵 person.say('NUC'); // hello, NUC 同时，require语句可以写在文件中的任何位置，只要使用之前引用之前即可，不一定要写在文件的最前面。不过，为了代码更易阅读，能直观地看到当前引用了哪些模块，最好是放在文件的最前面。 exports与module.exports的区别 # 可能有人见过直接使用exports的，有的是使用module.exports的，这里稍微的讲解下这两者的区别。先举个简单的例子：var a = {name:'wenzi'}; var b = a; console.log(a); // {name: "wenzi"} console.log(b); // {name: "wenzi"} a和b输出的结果是一样的。现在我改变下b中name的值：b.name = 'shaobing'; console.log(a); // {name: "shaobing"} console.log(b); // {name: "shaobing"} a和b的输出结果都发生了改变。我再对b进行重新声明：var b = {name:'师少兵'}; console.log(a); // {name: "shaobing"} console.log(b); // {name: "师少兵"} 这三个例子输出了三种结果： 声明a对象，并把a赋值给b，然后a和b输出了相同的结果； 改变了b中的name，那么a中的name也跟着改变； 重新声明了b对象，那么a中的name则没有跟着b一起改变 解释：a 是一个对象，b 是对 a 的引用，即 a 和 b 指向同一块内存，所以1中的输出是一样的。当对 b 作修改时，即 a 和 b 指向同一块内存地址的内容发生了改变，a 也会体现出来，所以第2个例子输出也一样。当 b 被覆盖时，b 指向了一块新的内存，a 还是指向原来的内存，所以最后输出会不一样。那么此时就可以引出exports和module.exports了： module.exports 初始值为一个空对象 {} exports 是指向的 module.exports 的引用 require() 返回的是 module.exports 而不是 exports 如果module.exports发生了新指向，则exports无效；若module.exports没有发生变化，则直接exports即可。 2. AMD与RequireJS # 说到AMD，不得不说到RequireJS，AMD从CommonJS社区独立出来，单独成为了AMD社区，AMD的流行，很大程度上也是依托了RequireJS作者的推广。AMD规范中，默认推荐的模块格式是：// hello.js // 将需要引入的模块全部写入到数组中，然后传递参数进行调用 define(['a', 'b'], function(a, ,b){ // do something return{ hello : function(username){ console.log( 'hello, '+username ); } } }) ==========// main.js define(['./hello'], function(h){ h.hello('wenzi'); }) 也就是说，在AMD中，模块必须使用define定义，依赖通过函数参数传进来，这样的一个好处就是所有的依赖都能一目了然。 3. CMD与seajs # CMD规范是国内著名的玉伯大神提出来的，将就的就是就近依赖，什么时候用到，就在那个地方进行require。SeaJS就是使用的CMD规范：// hello.js define(function(require, exports, module){ var a = require('a'); // do a var b = require( 'b' ); // do b module.exports.hello = hello; // 对外输出hello }) 从这里也能看到AMD和CMD的区别： AMD通常需要一次性引入全部的依赖，然后通过参数传递；而CMD则需要时才引入 不过，AMD也支持CMD这样的引入格式，但内部还是按照AMD的逻辑进行执行。 4. 总结 # 这篇文章里介绍了下CommonJS, AMD, CMD规范的相关区别与联系，这里再简要的总结下： CommonJS： 每个文件就是一个模块，不用define进行定义，node使用此规范； AMD： 使用define定义一个模块，讲究提前依赖； CMD： 使用define定义模块，将就就近依赖 接下来，我们就要开始正式进行node的学习了。

从0到1学习node(二)之搭建http服务器 总索引： 从0到1学习node系列总索引在上节的课前学习中，我们了解了一下不同模块规范之间的联系与区别。本节我们正式开始node的学习，首先我们从搭建一个http服务器，能运行简单的程序开始说起。 1. hello world # 最经典的hello world。首先我们创建一个server.js来保存我们的代码：console.log( 'hello world' ); 在终端输入node server.js运行:node server.js 终端就会输出 hello world 的字样。可是我们一个node服务器程序，总是要在浏览器上访问的呀，这里就要用到node里自带的http模块了：var http = require('http'); // 引入http模块 // 创建http服务器 // request : 从浏览器带来的请求信息 // response : 从服务器返回给浏览器的信息 http.createServer(function(request, response){ response.writeHead(200, {'content-type': 'text/plain'}); // 设置头部信息，输出text文本 response.write('hello world'); // 输出到页面中的信息 response.end(); // 返回结束 }).listen(3000); console.log('server has started...'); 我们再次在终端输入node server.js运行，终端里会有输出 server has started... 的字样，表示服务器已创建并正在运行，然后我们在浏览器上访问127.0.0.1:3000，就可以看到页面中输出了hello world。 2. form表单 # 刚才我们只是在页面中输出了一段简单的文本，现在我们要在页面中呈现一个表单，可以让用户输入信息并进行提交：// server.js var http = require('http'); http.createServer(function(request, response){ var html = '\ \ \ \ \ \username : \password : \age : \\\ \ '; var query = url.parse( request.url, true ).query; if( query.submit ){ var data = 'back'+ 'username:'+query.username+''+ 'password:'+query.password+''+ 'age:'+query.age+''; response.writeHead(200, {'content-type': 'text/html'}); response.write(data); }else{ response.writeHead(200, {'content-type': 'text/html'}); response.write(html); } response.end(); // 结束 }).listen(3000); console.log('server has started...'); 我们再次运行提交后就能在页面中显示出数据了。url.parse是用来解析URL字符串的，并返回解析后的URL对象。若我们只输出一下 url.parse(request.url) ：url.parse(request.url); result:{ protocol: null, slashes: null, auth: null, host: null, port: null, hostname: null, hash: null, search: '?username=111113&password=123&age=122&submit=submit', query: 'username=111113&password=123&age=122&submit=submit', pathname: '/', path: '/?username=111113&password=123&age=122&submit=submit', href: '/?username=111113&password=123&age=122&submit=submit' } 如果将第2个参数设置为true，则会将返回结果中的query属性解析为一个对象，其他属性不变；默认值为false，即query属性是一个字符串：url.parse(request.url, true); result:{ ... query: { username: '111113', password: '123', age: '122', submit: 'submit' }, ... } 因此我们可以通过如下语句判断是否有提交数据并获取提交数据，然后再输出到中即可：var query = url.parse( request.url, true ).query; /* { username: '111113', password: '123', age: '122', submit: 'submit' } */ 2.2 获取表单POST方式提交的数据 # 现在我们使用post方式来提交数据。因为POST请求一般都比较“重” （用户可能会输入大量的内容），如果用阻塞的方式来处理处理，必然会导致用户操作的阻塞。因此node将post数据拆分为很多小的数据块，然后通过data事件（表示新的小数据块到达了）和end事件传递这些小数据块（表示所有的数据都已经接收完毕）。 所以，我们的思路应该是：在data事件中获取数据块，在end事件中操作数据。// server.js var http = require('http'), querystring = require('querystring'); http.createServer(function(request, response){ var html = '\ \ \ \ \ \username : \password : \age : \\\ \ '; response.writeHead(200, {"Content-Type":"text/html"}); response.write( html ); response.end(); } exports.start = start; 展示获取的数据：// uploader.js 展示获取的数据 var querystring = require('querystring'); function upload(request, response){ var postData = ''; request.addListener('data', function(chunk){ postData += chunk; }); request.addListener('end', function(){ var data = querystring.parse(postData); console.log( 'postData: '+postData ); console.log(data); var s = 'back'+ 'username:'+data.username+''+ 'password:'+data.password+''+ 'age:'+data.age+''; response.writeHead(200, {'content-type': 'text/html'}); response.write(s); response.end(); }) } exports.upload = upload; 然后在server.js中进行路由选择// server.js var http = require('http'), url = require('url'); http.createServer(function(request, response){ var pathname = url.parse(request.url).pathname; console.log(pathname); response.end(); }).listen(3000); console.log('server has started...'); 我们任意改变URL地址，会看到输出的每个地址的pathname（忽略/favicon.ico）：http://127.0.0.1:3000/ // 输出： / http://127.0.0.1:3000/show/ // 输出： /show/ http://127.0.0.1:3000/show/img/ // 输出： /show/img/ http://127.0.0.1:3000/show/?username=wenzi // 输出： /show/ 因此我们就根据pathname进行路由，对路由进行方法映射：// server.js var http = require('http'), url = require('url'), starter = require('./starter'), uploader = require('./uploader'); http.createServer(function(request, response){ var pathname = url.parse(request.url).pathname; var routeurl = { '/' : starter.start, '/show' : uploader.upload } if( typeof routeurl[pathname]=== 'function' ){ routeurl[pathname](request, response); }else{ console.log('404 not found!'); response.end(); } }).listen(3000); console.log('server has started...'); 如果匹配到路由 / ，则执行 starter.start(request, response) ；如果匹配到路由 /show ，则执行 uploader.upload(request, response) 。如果都没匹配到，则显示404。 4. 图片上传并显示 # 在上面我们已经能成功提交数据了，这里来讲解如何进行图片上传并显示。使用node自带的模块处理起来非常的麻烦，这里我们使用别人已经开发好的formidable模块进行编写，它对解析上传的文件数据做了很好的抽象。npm install formidable --save-dev 在starter.js中，我们添加上file控件：// starter.js function start(request, response){ var html = '\ \