js array sort

如何把数组按照从小到大或从大到小的方式排序?

JavaScript中内置对象——数组本身拥有排序方法:array.sort()
关于这个方法很多人都有误区,我也不例外。
在某些数组下这个方法会按照从小到大的方式排序

阅读全文

angular bi databinding

angular 双向数据绑定

angular的特性非常多,今天主要说说:双向数据绑定。
在传统的js代码或jquery代码中,单向数据绑定无处不在。
或许你和我一样,受够了写这些面条式的代码,代码交织在一起,分都分不清。
在真实项目中,有一个需求:
页面中有两个下拉框,第一个下拉框选择机场,第二个下拉框选择航站楼。
很明显,这是二级联动。

阅读全文

use angular break the old world

用Angular打破旧世界

2014年11月某日,我接到一个任务,给公司ERP系统的创建订单功能做一些增强,支持海外下单和搜索提示。
现状:目前的创建订单功能都是基于城市这个唯一维度来做的,页面加载的是百度地图。
应用场景:用户在国内提前下单,在国外使用。
初期需求:在创建订单过程中根据用户所选择的城市来加载百度或谷歌地图,
选择国外城市后,搜索地址要能拿到对应的poi,系统能成功创建订单。
分析:谷歌地图服务在国内基本处于不可用的状态,地图加载非常缓慢,最重要的是搜索地址无法拿到poi。
讨论:经过和系统组老大、pm讨论,决定把此问题一分为二,那就是地图加载不了,拿到数据就行。
最终需求:地图可以不加载,但搜索一定要能拿到poi。
解决方案:租赁一台VPS做中间请求转发,绕过国内无法直接访问谷歌的限制。
估算工期:我心想方案已经确定,而且接口有现成的,应该不太难,所以我估计了五天。
我先做了个简单的demo,利用极路由自动翻墙的特性,成功加载谷歌地图,搜索地址成功拿到poi。
当我考虑如何把我的代码融入现有的代码中时,我傻了眼,现有的代码完全无法阅读。
html页面上各种php语句和变量,随便一个js文件代码几千行,
几乎没有注释,函数的层层调用,让你完全理不清这业务逻辑。
我看了半天后,头都大了,一瞬间我有种想重构整个代码的冲动。
为什么我想重构?
因为每次当我打开那个文件,看到满屏的代码,滚动条怎么下拉也看不到尽头的时候,人都绝望了。
与其在这个旧世界中干着一些敲敲打打,修修补补的工作。
不如用锤子砸开这个旧世界,迎来一个新世界。
而这个锤子就是angular.js。
说干就干。
这个功能中的数据(Data)来自两部分:
1、php语句在后端直接生存(譬如城市列表):

阅读全文

js red green light

红绿灯大战之终结版

2015年4月10日,微博上爆发了波澜壮阔的“红绿灯大战”,这一天史称:红绿灯日。
@十年踪迹(真名吴亮,曾就职百度,《javascript王者归来》作者,现担任360前端主管)
在微博上发了个帖子:
过程抽象之promise化--用过程抽象的思路将一个普通的异步函数“变换”成promise形式
http://code.w3ctech.com/detail/30
随后@winter(真名田永强,现就职阿里,《深入浅出node.js》作者,在js领域造诣颇深)
表示不服,也写了个版本:http://code.w3ctech.com/detail/31
然后裕波同学(360浏览器主管)
让@aimingoo(真名沈爱民,现就职豌豆荚,也是前端大牛)
来评估谁的代码实现更好些。
然后@hax(贺师俊 现百姓网前端主管)和一堆爱好者也加入进来,写了好多个版本。
把路径最后的数字不停地加一,即可看到对应的版本。
总共有44个版本,数字从30到73。
专题可见:前端要给力之:红绿灯大战中的火星生命-Promise
感兴趣的同学都可以提交自己的版本,
我在偶然间灵感触发,写了属于自己的红绿灯大战之终结版。
我的实现思路与这44个版本截然不同,是基于我上篇文章的函数嵌套来实现的。
上篇文章我们实现的是:输入框的值两秒后变成0,再隔两秒后变成1,再隔两秒后变成2。
这和红绿灯岂不是很像,立马动手,代码如下:

阅读全文

js function nest

回到上一片文章的那道面试题:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="input" value="">
<script>
var input = document.getElementById('input');
for(var i=0;i<3;i++){
setTimeout(function(){
input.value=i;
},2000)
}
</script>
</body>
</html>

阅读全文

js this

我们先来看一个例子:

<?php>
class erson(){
// 人的成员属性
var $name; //人的名字
var $age; //人的年龄
//人的成员 say() 方法
function say() {
echo "我的名字叫:".$this->name."<br/>";
echo "我的年龄是:".$this->age;
}
}
//类定义结束
$p1 = new Person(); //实例化一个对象
$p1->name = "Gonn"; //给 $p1 对象属性赋值
$p1->age = 25;
$p1->say(); //"我的名字叫:Gonn" "我的年龄是:25"
</php>

阅读全文

js async and clousure

深入理解js中的异步与闭包

有一道非常有名的面试题,粗略如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="input" value="">
<script>
var input = document.getElementById('input');
for(var i=0;i<3;i++){
setTimeout(function(){
input.value=i;
},2000)
}
</script>
</body>
</html>

阅读全文

js call and apply

如何从一个无序数组中获取最大值或最小值?

js中的数组中并没有直接内置这样的方法,那我们就尝试为数组添加这样的方法。

阅读全文

java foundation road

Java语言的初衷

1990年,SUN公司的工程师-帕特里克·诺顿获得了公司的一个”Green计划“的项目机会,
他和詹姆斯·高斯林、麦克·舍林丹一起在加州门罗帕克的一个小工作室里研究新技术,
瞄准下一代智能家电的程序设计。
团队最初考虑使用C语言,但很多成员包括SUN的首席科学家比尔·乔伊,
发现C语言和可用的API在某些方面存在很大问题。
工作小组使用的是内嵌类型平台,可以用的资源极其有限。
而C语言太复杂以至很多开发者经常错误使用。
他们发现C 缺少垃圾回收系统,可移植性。
他们想要一种易于移植到各种设备上的平台。
于是SUN公司的工程师在C语言的基础上,开发了一种面向对象的编程语言-Oak。
1992年夏天,他们发布了Green操作系统,程序设计语言Oak,类库,和其硬件。
1992年12月,他们对外展示了Star这台类PDA设备,该设备有鲜艳的图形界面和智能代理。
1992年11月,Green计划被转化成了“FirstPerson有限公司”,一个SUN公司的全资子公司。
同年时代华纳发布了一个关于电视机顶盒的征求提议书时,FirstPerson和SGI都投递了标书。
但由于有线电视业界觉得FirstPerson的平台给予用户过多地控制权,而选择了SGI。
随后与3DO公司的另外一笔关于机顶盒的交易也没有成功,
由于他们的平台不能在电视工业产生任何效益,FirstPerson再并回SUN公司。
1994年6、7月间,在经历了一场历时三天的头脑风暴的讨论之后,
团队决定再一次改变努力的目标,这次他们决定将该技术应用于万维网。
他们认为随着Mosaic浏览器的到来,因特网正在向高度互动的远景演变。

阅读全文

Get URL Parameter

URL(统一资源定位符)是Web开发中经常用到的东西,它由很多部分组成。
protocol+host+port(默认80)+pathname+search+hash
假如有一个URL:
http://www.kittencup.com/wp-login.php?username=final&password=123456
现在我想获取对应的usename值和password值。
那在js中如何实现呢?

阅读全文