Posts List

第一个progressive web application,发车!

progressive web application是谷歌推出的一种渐进式web应用,通过利用service-worker等来达到类似于原生应用,而且在chrome浏览器还可以添加到主页,完全就和一个app无异。老实说我觉得pwa是一个很好的发展方向,虽然小程序搞了一段时间不温不火,但是pwa的限制更少,再说还有谷歌支持,只不过现在部分浏览器可能支持的不是很好。 国内饿了么前段时间做了一个pwa,我觉得就挺好的 https://h5.ele.me/msite/ 。 我觉得和native app使用已经比较接近了,而且还无需安装。 扯得有点多,今天主要是讲下自己怎么做一个pwa。当然了,我也是新手,我的pwa也是基于谷歌的pwa的sample做了一些改进。谷歌现在很多开发者文档都做了翻译,sample主要是一个天气应用,里面具体的实现逻辑我就不讲了,我讲以下如何部署这个pwa。 在谷歌的sample里面是推荐使用firebase来部署你的pwa,但是由于国内的高墙,在firebase init的时候总是authentication error,stackoverflow上面说是代理的原因,但是不上代理又没办法使用firebase,所以这是一个死循环。但是!!我们有github page,github page是一个很好的展示静态页面的方面,以前只能支持渲染gh分支里面的内容,现在github对于github page功能做了完善,详细可以看下这篇文章http://blog.csdn.net/neal1991/article/details/53535914 。 下面跟我来: 1.进入https://github.com/neal1991/pwa 可以fork或者clone这个项目,我已经将里面的一些东西,改掉了,可以直接运行。 2.进入settings里面设置 现在你进入https://yourusername.github.io/your-reporistry-name/就可以发车了,是不是很快。 接着我还想讲一讲我这个项目做的一些改进的地方,因为这个weather pwa使用的是yahoo的一个api,通过利用woeid可以去查询各个城市的天气以及相关信息。但是网上却没有中国各个城市的数字代码,注意是WEPID代码,我后来发觉http://www.imeihua.net/tool/weathercode.aspx 这个网站是可以查询wepid的,本来想写一个爬虫爬取的,但是这个网站似乎做了什么限制,我使用curl模拟下请求,限制访问了,这个网站使用.NET实现的,.NET的web请求里面总是包含了一些奇怪的属性。后来我又发现一个国外的网站,很方便,直接get请求就能获取http://woeid.rosselliot.co.nz/lookup ,于是我就写了一个爬虫去爬取,源代码在https://github.com/neal1991/woeid-parser 核心代码 var request = require('superagent'); var fs = require('fs'); var cityConfig = ['wuhu', 'shanghai', 'beijing', 'hangzhou', 'nanjing', 'wuxi', 'xiamen', 'longyan']; var cheerio = require('cheerio'); var url = 'http://woeid.rosselliot.co.nz/lookup/'; var attrNames = ['city', 'province', 'country', 'woeid']; var result = []; cityConfig.forEach(function(city) { request.get(url + city) .end(function(err, res) { $ = cheerio.

第一个chrome extension

如今,chrome浏览器的使用如越来越流行,chrome extension往往能提供更多很丰富的功能。以前一直想了解这方面的东西,可是又担心很复杂。前段时间,在斗鱼看一个直播,想刷弹幕,但是每次自己输入有很麻烦,所以写个小脚本就可以了,后来想以下也可以使用chrome extension来实现。关于chrome extension,google就给出了相关的文档,另外国内360也翻译了这篇文档。当然我所做的东西还是很基础的,在此,也是就是说一下自己第一次尝试的经验。 其实,chrome extension似乎和现在很火的pwa有一点类似,对于chrome extension来说,有个文件是必不可少的,即manifest.json,这对于extension是非常重要的。这个文件主要是项目的某些描述,以及一些文件的引入。以我的文件为例: { "manifest_version": 2, "name": "弹幕增强", "description": "This extension provides you a good experience of sending danmu at douyu", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "content_scripts" : [{ "matches": [ "http://*/*", "https://*/*" ], "js" : ["app.js"], "run_at": "document_end" }] } manifes_version好像是必须定义为2,这个好像是强制要求。提及一点的就是你可以使用开发者模式从而调试你的extension。你可以在tab右键打开更多工具,然后找到拓展程序打开,然后你可以通过加载已解压的拓展程序,只要选择你extension的文件夹就可以了,并且在右上角勾选上开发者模式。 接着主要讲一下“brower_action”里面定义的是extension的相关内容,”default_icon”即是插件的图标,”default_popup”就是弹出的页面,chrome extension规定html文件和js文件必须是分开来的。extension和当前打开的页面之间的环境是相互隔离的,是不可以直接通信的。”content_script”是定义插入到当前打开页面的相关js文件,“matches”可以让脚本再匹配到规定的正则才会执行,“js”则是插入到页面的js文件,你还可以插入css文件。需要注意的是,”content_script”虽然能够操纵当前页面的dom,但是他和当前页面的js环境是相互隔离的,不能够互相交互,当然也有相应的其他方法。 我的extension只是用到了”content_script”: var times = 1000; for (var i = 0; i < times; i ++) { (function(i) { setTimeout(function() { console.

你可能不知道谷歌浏览器开发工具的其他用处

原文链接 原文链接似乎翻墙才可以访问 译者:neal github: https://github.com/neal1991 你可能不知道谷歌浏览器开发工具的其他用处 Chrome内嵌开发者工具。它具有丰富的功能特色,比如元素,网络以及安全。今天,我们将完全关注javascript的console. 当我才开始编程的时候,我只是将console用作纪录服务器的响应。但是后来经过一些教学的帮助,我开始发现console可以做的更多。 在这我们讲一些你可以用console做更多有用的事情。如果你是用chrome浏览这篇文章,你可以马上就试试效果。 选择节点元素 如果你熟悉jquery的话,你应该知道$(‘.class’)和$(‘#id’)事多的么的重要。你可以根据id或者类名选择相应的元素。 同样你可以在console使用同样的方式来访问元素。$(‘tagName’) $(‘.class’) $(‘#id’)和document.querySelector(“)是等同的。这个将返回文档中第一个匹配这个选择器的元素。 你可以用$$(‘tagName’)来访问,注意这边的两个美元符号可以访问所有符合这个选择器的元素。这些元素会组成一个数组 2.将你的浏览器转化成一个编辑器 你是否想过可以直接在浏览器中直接编辑?答案是肯定的,你可以将你的浏览器转化成一个文本编辑工具。你可以在dom元素中任意添加或者删除文本。 你不需要检测html中的元素。取而代之,你只要去console里面输入以下: document.body.contentEditable = true 3.寻找dom中元素绑定的事件 当调试的时候你可能希望知道dom元素中绑定的事件。console工具能使你很轻松就找到这些事件。getEventListeners($(‘selector’))将会返回一个数组包含所有事件的对象。你可以展开这个对象看到所有的事件: 如果希望找到某个特定事件的监听,你可以这么做: getEventListeners($(‘selector’)).eventName[0].listener 这将展示所有和这个事件相关的监听。比如: getEventListeners($(‘.firstName’)).click[0].listener 4.监听事件 如果你想监听特定元素绑定的事件的时候,你也可以在console里面这么做。你可以使用以下的这些命名: monitorEvents($(‘selector’))将会监听符合这个选择器的元素的所有事件,并且将会显示这些事件当事件被触发的时候。 monitorEvents($(‘selector’),‘eventName’)将会监听符合这个选择器的特定事件。你可以将事件的名称作为一个参数传入到这个函数中。 monitorEvents($(‘selector’),[‘eventName1’,‘eventName2’….])将会监听符合这个选择器的事件。 unmonitorEvents($(‘selector’))这个会停止监听并且在console里面显示出所有的事件。 5.找到语句块执行的时间 console里面有一个很重要的函数叫做console.time(‘labelTime’)能够启动一个计时器。另外又一个函数叫做console.timeEnd(‘labelName’)能够结束相应的计时器。 比如我们想看到一个循环的执行时间,我们可以做如下处理: console.time('myTime'); //Starts the timer with label - myTime for(var i=0; i < 100000; i++){ 2+4+5; } console.timeEnd('mytime'); //Ends the timer with Label - myTime //Output - myTime:12345.00 ms 6.