FictionInjection-始动:Angular 依赖注入分析和源码抽取改造(上)

几年前有一个项目构思,由于技术水平低,当时并没有思考得很清楚,所以一直没怎么着手开始。近来前端很多优秀的库出现了,也让我对那个项目有了新的想法。在写了几个 JavaScript 的项目后我觉得可以尝试开始了。尝试并成功写出一些代码之后,就开(挖)始(坑)了这个系列的博文。 项目是写一个 JavaScript 框架,干什么的在此并不是重点,但是首先需要一个可扩展的模块系统。最简单就是直接用 jQuery 扩展的写法,直接将函数等的挂载在一个对象下,不过如此一来模块之间依赖非常多的话,管理起来会十分困难。也可以使用 AMD / CMD 的模块化的方法,不过考虑到 ES2015 已经加入了 import / export 的语法,最好就直接使用。然而使用了 ES2015 的语法之后,仍然使用 AMD 等的语法就显得很别扭,但是又想要依赖注入功能怎么办? 解决方法是模(fu)仿(zhi)著名的 A…

Read more

看《Sherlock: The Abominable Bride》

看完新出的夏洛克,想必大家都会很茫然。刚好今晚也看了,就说说我看了电影和影评后的总结吧。 PS:有剧透才能更好地看电影。 PS:如果你是想看好莱坞大片,还像和我同一片场的人那样带着爆米花和泡椒凤爪来看的,可以退票了。 简单来说,整部电影的剧情几乎都是在嗑了药的夏洛克进入多层梦境中发生的。他要解决上一季结尾中莫里亚蒂的“回归”的问题,于是在脑内——或者说是思维迷宫内——解决一百年前的另外一个“死而复活的新娘”的问题。而解决这个问题的方法,就是将自己带入到那个维多利亚时代中,思考自己会如何行动,剧情如何发展。这也就是为什么差不多通篇都是维多利亚时代风格的由来。案情重组,简而言之。不过,有一个问题,就是实际上根据设定,电影中福尔摩斯并不是十九世纪的人物,如此一来就对原来的案情进行了干涉,出现矛盾,这个后面再谈。 令来看福华CP的,卖腐的,相爱相杀的女性,啊不,观众大失所望,恐怕是悬疑色彩的浓重,…

Read more

クリスマス?なにそれ?美味しいの?

一个妹子给我推荐了这个刷算法题换装的游戏。 然而随着一道又一道的题目的通过,悲伤感越来越重却是怎么回事。 在平安夜和圣诞节一个人对着电脑敲代码来给虚拟妹子解锁装扮也是够自虐的。 …

Read more

使用ES6编写一个生命游戏

GitHub 地址 缘起 前段时间看了《Understanding ECMAScript 6》,因为有 JavaScript 的基础,很快就上手了,还写了笔记。然而编程只看书是不够的,还需要让身体熟悉起来。刚好最近在看「全部成为F」这部新番,看到 ED 采用了「生命游戏」的表现形式,于是便有了用 ES6 来写一个的主意。 「生命游戏」 「生命游戏」的英文原文是「Game of Life」,是细胞自动机的一种形式,每个细胞的未来状态只取决于以其为中心周围八格细胞的当前状态。更详细的信息请看wiki条目,给出一个有意思的动画图。 而状态判断只有四条: 当前细胞为存活状态时,当周围低于2个(不包含2个)存活细胞时, 该细胞变成死亡状态。(模拟生命数量稀少) 当前细胞为存活状态时,当周围有2个或3个存活细胞时, 该细胞保持原样。 当前细胞为存活状态时,当周围有3个以上的存活细胞时,该…

Read more

《Understanding ECMAScript 6》笔记

在线免费阅读:https://leanpub.com/understandinges6/read/ 部分代码使用原书,代码版权归原书所有 块级绑定(Block Bindings) 字符串 正则 字符串模板(template strings) 标签模板(tagged templates) 函数 对象 解构(Destructuring) Symbols 生成器(Generators) 迭代器(Iterators) 类 Promises 模块(Modules) 杂七杂八 块级绑定(Block Bindings)↑ let 块级{}中有效 同块级不可重复声明 没有变量提升 块级会形成暂时性死区(TDZ,Temporal Dead Zone) const 基本和 let 相同,值不可修改 let 和 const 最…

Read more

mocha + chai + Travis CI + Codecov 使用流程

mocha a feature-rich JavaScript test framework running on Node.js and the browser chai a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework Travis CI Free continuous integration platform for GitHub projects Codecov Continuous Code Coverage 编写测试 简单来说,就是使用 mocha 作为测试框架,chai 作为断言库,将项目交给 Travis CI 做自动测试,交给 Codecov 做覆盖率测试。 以我自己的项目 …

Read more

配合 angular 和 angular-material 来开发基于 electron 的应用 · 3--文件组织结构和开发流程

文件组织结构 良好的文件组织结构不仅能帮助我们更快地定位文件,更能配合开发工具形成流畅的开发流程,从而提高编程效率。 以下的目录和文件都放在存放应用的根目录 app 下。 package.json Electron 应用的配置文件,经常做 node 开发的人应该很熟悉了。稍微说明一下一些字段: name: 应用的名字,本项目就是 radioit 了 description: 应用的描述 version: 应用的版本号 author: 作者名字 email: 作者的邮箱 main.js Electron 应用的入口点,可以在 package.json 的 main 字段自定义 node_modules/ node 库的目录,一般不用手动管理,而是使用 npm 来安装和卸载库。 lib/ 存放 node 模块的目录。 src/ 存放源代码的目录。 src/css/ 存放待编译的 css 代码,…

Read more

记一次奇怪的爬虫经历

前言 由于某些原因,我需要去爬获取一些国家旅游景点的信息。 找到国家旅游局的网站,然后找到一个 5A 风景区目录。 网址:http://www.cnta.gov.cn:8000/Forms/TravelCatalog/TravelCatalogList.aspx?catalogType=view&resultType=5A 于是去 pyspider 的 demo 页新建一个项目:5stat,就去爬了。 分析页面 网页比较特殊,看起来是用 dotnet 写的,翻页是按钮调用 js 代码实现的。跳转后还是同一个网址。 这里就要用到 pyspider 支持的页面载入后运行 js 脚本的功能。 先分析翻页按钮干了什么。 如下图,调用一个名为 __doPostBack 的函数。 在页面上寻找这个函数,看到函数体如下: var theForm = document.forms['form1']…

Read more

配合 angular 和 angular-material 来开发基于 electron 的应用 · 2--node 库的使用和抓取代码的编写

使用 nodejs 的库 python 脚本的详细编写,请看之前的博文:radioit计划——动画广播辅助脚本radioitScript。 需要用 node 实现脚本中的某些逻辑是获取和提取广播的信息,整合成 JSON 格式的数据。 而用一些库就能轻松做到。 superagent superagent 是一个极其简单的 AJAX 库。 使用方法简单得令人发指。 var request = require( 'superagent' ); request .get( 'http://xxx.com' ) .end( function ( err, res ) { // Do something }); 还用介绍吗?不用了。 bluebird bluebird 是一个 Promise 库。 凡是类似 IO 的操作,必定需要异步。经典的解决方法是回调,然而是时候用 P…

Read more

thumbnail

配合 angular 和 angular-material 来开发基于 electron 的应用 · 1--分析与配置

应用github地址。github 代码和文章代码并不同步,用作预览和 PR。 目标分析 一句话概述:开发的应用是一个抓取网页有用信息并重新统一排布的应用,是之前文章提到的 radioit 计划里脚本的 GUI 版本。 关键词:网页抓取、信息统一、信息排布、脚本的 GUI 版本 功能: 浏览某一个广播站的广播 浏览某一个广播的详细信息 下载某一个广播最新的相关图片 下载某一个广播最新的相关音频 能够通过设置代理来突破某些限制 能够离线浏览(未定) 预定周期下载任务(未定) 整合视频压制工具(未定) 业务流程: 请求特定 url 资源 对取得的 url 资源进行信息提取 信息整合成统一格式 显示信息 某些情况下执行预定命令行(未定) 技术联想: 请求特定 url 资源 -> node 对取得的 url 资源进行信息提取 -> node 的…

Read more