javascript

JavaScript 异步编程一二三

1. JavaScript 天生异步 你说我一个浏览器写写表单验证的,怎么就突然成为如今最流行的编程语言了呢? JavaScript 设计之初是用于浏览器端 GUI 编程,这就决定了这门语言是单线程、非阻塞的。而 JavaScript 正是通过异步执行任务来实现非阻塞。 关于 JavaScript 异步机制和 Event loop 详细可见:Help, I'm stuck in an event-loop 2. 异步函数的类型 JavaScript 环境本身提供的异步函数通常可以分为两大类: I/O 函数

Introducing Casablanca——β-house 成员管理

《Casablanca》是一部1942年的美国爱情电影。在上个世纪80年代,美国音乐人 Bertie Higgins 和他女友共同观看了《Casablanca》这部电影,两人都喜欢非常这部爱情片。结合这部电影带给他的感觉,Bertie Higgins 为他的女朋友写了与《Casablanca》同名的一首歌。 介绍 Casablanca 是 β-house 成员管理应用。使用 Vue.js + Koa 构建。支持新增成员、查询/编辑/删除成员信息。另外,Casablanca 还开放了

电影

《云图》——今夜我们聊聊人类

说来惭愧,《云图》这本书是我高二买的,然而我在大二结束时才刚刚读完。 读完书的当天,我立刻把电影《云图》给看完了。很早就想看《云图》这部电影,但是一直憋着打算等到看完原著再去看电影,觉得这样无论是阅读体验还是观影体验都会好点。电影的完整版片长有172分钟,然后当时在中国上映的时候被剪成了134分钟。同样,今年的《迷失Z城》国内版也被剪了将近40分钟。这里只是举两个引进版本删减相对严重的例子。对电影的删减是严重影响观影体验的,关于这个话题不多谈,只希望国内能早日建立起电影分级制度。 《云图》这本书的叙事很特别。从19世纪到后末日未来,六个故事,六个主人公……《云图》是史诗没错,但从整体上来看,它的宏大叙事很与众不同。这六个故事不是按照时间顺序一一排列,

前端

我眼中的前端世界

接触并且正式入坑前端也有近两年了,谈谈我个人对于前端开发的一种理解吧,全为个人体验之谈。 偏向设计 所谓偏向设计,便是前端开发的最终目的便是将脑子里的 idea 或者设计师提供的设计稿赋予实践,具体开发中会精确到每一像素,还有文字的排版样式,以及一些动效等等,其最终成果是面向于普通大众的。 于后端的交流 前端开发只要不是单纯的静态展示页面,势必会涉及到数据的操作,而数据的具体处理过程是交由后台的同学的来实现的(插一句,相对于前面提到的,我认为后端开发的最终成果是面向专业人士的,比如我们前端的同学),所以在前后端分离大行其道的今天,为了提高开发效率,前后端同学就有必要事先约定数据的交换规则。包括数据的格式(一般 json 比较多还有 xml 之类的);还有 HTTP 行为(GET、

The First Encounter With Socket

网络基础 TCP/IP 在讨论 Socket 之前,我们得先追本溯源,看看 TCP/IP 是什么。 计算机与网络设备之间的通信,就如大国之间的外交一样,需要一种规则。这种规则就成称为协议(protocol)。计算机网络协议中存在各种各样的内容:从电缆规格到 IP 地址的选定方法、双方建立通信的顺序,以及 Web 页面显示需要处理的步骤,等等。 而与互联网相关联的协议集合总称为 TCP/IP。 TCP/IP 的分层 TCP/IP

javascript

Ajax 跨域问题

我的理解 为什么会存在跨域问题? 浏览器的安全机制限制 -- js 代码不能从不同的服务器读取载入文档内容,这便是浏览器的同源策略。 做到同源便是要求 域名 协议 端口 三者均相同,缺一不可。 如何解决? 基于 Ajax 立场寻求方案: HTTP 访问控制即 CORS (IE 10 +,无需改动 js 代码) 服务器端代理 (兼容性好且无需改动 js 代码,但成本会有些) 跳过 Ajax 范畴:

node

记,一次微信公众号开发

最近在做微信大作业,本着花了时间就尽量不划水的原则,就稍稍在此做个小记,我选的自定义,琢磨着开发个网易云音乐微信的低配版(期末了,时间限制,应该可以再深入)。 实现功能 说了是低配版,所以功能不多: 搜索歌曲、歌手、专辑 获取 TOP 榜 随机听歌 随机推荐 下载 APP 开发语言 选择了 NodeJS 老实说老师教的是用 PHP 开发的,但是刚刚结束了个 PHP 大作业(精简版博客系统),看着个 PHP

windows

Beautify your PowerShell

PowerShell Windows 一直以来都被很多非微软系程序员诟病,莫名奇妙的 bug 太多啊,经常蓝屏啊(这个是所有人都吐槽的),terminal 太弱太丑啊……的确,Windows 不是完美的系统,但也不至于说它彻底不适合开发。环境条件不行(待议),但人行啊,事在人为对不对。 对于程序员来说,terminal 是一个很重要的工具,其颜值和易用性很大一部分决定了开发效率的高低,在 Windows 上有两个 terminal ,很多人只知道黑不溜秋的cmd,却不知道高大上的 Powershell 。 Windows PowerShell是微软公司为Windows环境所开发的壳程序(shell)及脚本语言技术,

生活

β-house下沙篇 -- 告别

再见 上周接到通知说因学院搬迁 222 需要被清空,我才来下沙来 222 半个学期啊(心中一万只草泥马奔腾而过),尽管心中有一万个不愿意,但是告别 222 还是在今天发生了(感觉家被拆了,不高兴...) 记忆中的 β a. 2015年04月29日接到录取短信,正式成为 beta-house 的一员 b. 一次下沙例会,有幸遇到大帝、麻组等老一级的学长学姐们,愉快的下午时光 c. 和学长学姐们在一起的日租房 d. 暑期集训 e. 昨日收拾物品 e-0.

Linux中软连接的应用

linux中的软连接类似于windows中的快捷方式,可以快捷得访问目标文件或文件夹。 命令格式 ln -s [源文件或目录][目标文件或目录] 示例: 以上创建的是一个指向idea启动脚本的一个软连接,并命名为start-idea。 运行start-idea即运行idea.sh 软连接的应用 在编写java时,可能会遇到需要切换jdk版本的时候,一种方法是改变环境变量中的$JAVA_HOME,指向指定版本的jdk。但在每次修改中,会发现将对应版本的文件目录名复制进环境变量,然后再source一下环境变量将会是一件麻烦的事。软连接将会方便很多。 示例: 先建立一个指向目标jdk的一个软连接 然后将环境变量中的JAVA_HOME指向先前创建的软连接 source一下环境变量后,大功告成! 接下来看看效果吧。

javascript

Chrome扩展开发实践——外部数据的获取和存储

前言 最近尝试着写一个Chrome的天气扩展。几番折腾下来,遇到了不少问题。 正文 关于Chrome扩展的开发,当然是要看Google的Chrome开发者文档了:Chrome文档; 这个是全英文的,然而360很良心地把开发者文档翻译了一遍(⊙o⊙):360文档; 关于API和JSON处理 我的想法是这样的,这个浏览器扩展能够得到设备的地理位置并返回当前位置的天气状况,而JavaScript没有API来得到地理位置信息,必须得先获取ip并通过第三方ip地址查询接口来得到所在城市的信息。(我用的是新浪的接口) http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json 其内容如下: {"ret"

javascript

浅析 JavaScript 的函数节流和去抖

现代网页的实现上,会有很多交互上的优化,比如常见的 滚动加载 ,输入联想 等等。他们的实现思路很简单,以滚动加载而言,无非就是去是增加一个滚动的事件监听,每次滚动判断当前的元素是否已经滚动到了用户的可视区,然后根据判断结果来决定是否来加载相关数据。 输入联想也类似,无非就是修改一下监听的事件类型,和判断的相关逻辑。 前端交互的优化上,我们总是需要需要事件监听来知道用户进行了什么操作,从而设定页面给出怎样的反应。但本文主要的内容不是讲如何具体的实现某个交互,而是对交互实现的依赖的事件监听那部分的优化。 滚动加载图片的例子 var onScroll = function() { // 这里判断当前的 img 元素是否已经滚动到了用户的可视区 // 根据判断结果来决定是否来加载相关数据 // 注:img 元素当设置 src 属性值后会产生一个 http

webpack

Caiyun 的实践之 —— webpack 打包优化

caiyun 是基于 react react-router redux开发的网站, 其中使用了 webpack 作为打包工具。如果你不了解 webpack 是什么,可以先去搜索了解一下,现在网上关于他的文档教程已经很多了。本文主要记录 caiyun 在对首屏渲染的优化上,对 webpack 做的相关配置优化。 问题概述 webpack 可以通过各类的 loader 将源文件做相关处理,比如通过babel-loader 可以解析 jsx 文件,将 es6 转化成 es5。可以通过

编辑器

Sublime Text 3 分享

提高效率的Sublime Text 3插件 先安装Package Control 点击菜单中的 “View”–“Show Console”(也可通过快捷键 Ctrl + ` 打开,不过可能因与系统其他软件快捷键冲突而打不开)调出 Console。然后把下面的代码粘贴进去后回车即可,需稍微等待一段时间。(以下代码可能会因更新而导致失效,请以官网代码为准。Package Control) sublime text 3 import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf

设计模式

Object Oriented简称OO 软件开发唯一不变的真理change:软件开发完成后需要花费更多的时间 多态 (英语:polymorphism),是指计算机程序运行时,相同的消息可能会送给多个不同的类之对象,而系统可依据对象所属类,引发对应类的方法,而有不同的行为。简单来说,所谓多态意指相同的消息给予不同的对象会引发不同的动作称之。 封装在面向对象程序设计方法中,封装(英语:Encapsulation)是指,一种将抽象性函数界面的实现细节部分包装、隐藏起来的方法。同时,它也是一种防止外界调用端,去访问对象内部实现细节的手段,这个手段是由编程语言本身来提供的。这两个概念有一些不同,但通常被混合使用。封装被视为是面向对象的四项原则之一。 适当的封装,可以将对象使用界面的程序实现部分隐藏起来,不让用户看到,同时确保用户无法任意更改对象内部的重要数据。它可以让代码更容易理解与维护,

如何编写一个简单的模板引擎

看了下上篇博文,发现相隔也忒特么长了,主要是因为最近事情太多,让人烦恼的是特么我挂科了,废话不多说,让我们进入正题吧! 首先什么是模板引擎呢? 是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档(来自百度百科) 可以看出模板引擎是实现模块化和复用有用的东东(原谅我的取名),目前网络上也有非常著名的模板引擎,这就不列了,感兴趣的自行百度,那么为什么我还要自己写呢?当然肯定是装逼的了(-逃 举个栗子 在angular.js中,相信大家肯定写过类似的代码: // test.html <script> function TestController($scope)

生活

《3 Idiots》电影分享

理想主义的校园题材 剧情,喜剧,歌剧,励志,青春 #### 片名:《3 Idiots》【中 文 名】(三傻大闹宝莱坞/三个白痴) #### 情节概要:两个好朋友一起结伴而行去寻找另一个失散已久的好兄弟,希望能重组他们的“三人帮”,然而途中却遇到了种种意想不到的事情。 #### 精彩台词: - 盐水具有极强的导电性,初二物理知识,我们都学过,只有他会应用。 - 他的人和名字一样不同寻常” “一出生就有人告诉我们,生活是场赛跑,不跑快点就会惨遭蹂躏,哪怕是出生,我们都得和3亿个精子赛跑 -