javascript

说说牛客上的一道 JavaScript 题目

牛客上有这么一道 JavaScript 的题目。 //填写内容让下面代码支持a.name = “name1”; b.name = “name2”; function obj(name){ 【1】 } obj.【2】 = "name2"; var a = obj("name1"); var b = new obj; 【1】和【2】是填写的内容,【2】的答案是 prototype.name,没争议。 问题是【1】,参考答案居然是 if(name){ this.name = name;}return this;,这么随便地玩弄 this 不就是明摆着污染全局变量吗?暴力赋值不可取。 下面的一些高票讨论还说了一大堆解释的废话,连他自己都说自己好罗嗦。对,你不但罗嗦,而且还没有改错。注释里都说了给 window 的属性赋值,还不自知出问题,真是误人子弟。 先来分析一下题目,a…

Read more

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

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

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

配合 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

配合 angular 和 angular-material 来开发基于 electron 的应用 · 0--前言

Electron Electron 是什么?它之前的名字是 Atom Shell,是 Github 开发的结合了 io.js 和 chromium 的跨平台桌面应用框架。Github 自己出的编辑器 Atom 以及微软出的编辑器 VSCode 都是基于这个框架。 众所周知,Google chrome 就是基于 chromium 而发展出来的一款优秀的浏览器。因其出色的体验和网页解析性能,所有国内出产的山寨浏览器 / 双核浏览器,无不选用了 chrome 作为内核。所以在网页解析渲染方面,使用 chromium 是极其正确的选择。 那跟平常的桌面应用构建,使用 Electron 又有什么优势呢? 普通的桌面应用构建,比较成熟的语言不外乎 C/C++、Java、C#、Python 等。然而 C/C++ 易学难精,即使其 GUI 框架有 MFC、Qt、KDE 等众,也是极难快速开发;Java 的…

Read more

i18n.js库的编写兼使用npm辅助开发

近来由于开发某页面需要支持多语言切换,遂写一个切换页面语言的JS库。 编写库的既定事项 写JS库也不是一两次了,当然只是小型或者微型的。不过思想和方法和大型库都是通用的。一般是直接在sublime text里打开一个JS文件,然后写下一个Self-Executing Anonymous Functions(自执行匿名函数?),接着在函数里面创造库的对象,最后将对象挂在window对象下。 Show you the code的话就是以下所示: (function( window, undefined ){ var i18n = {}; i18n.bar = function () { return; }; window.i18n = i18n; })( window ); 学得这样的写法是来源于对jQuery源代码的阅读。 通过将代码都包在一个匿名函数中,实现了一个闭包。如此一来…

Read more