IonicMUI,前者是国外最为流行的 Hybrid App 框架,后者在国内较为流行。因为正在使用ionic进行开发,对MUI不熟习,无法进行性能比较,而且没有实际开发经验,很多功能和实现都不了解,或多或少带有主观偏见。这篇文章只供参考。

UI

从UI方面来看,ionic将UI组件进行directive封装,页面上使用自定义标签或者属性来调用,这样html文件会很干净。MUI的组件逻辑代码嵌入到页面中,习惯了MVVM的模式,今天去看MUI的代码简直头大。客观的来说MUI提供的UI组件会比ionic的多,但是这些组件复用性不太高,几个开源的案例,都是逻辑代码和表现层耦合在一起,修改和维护成本较高。

阅读全文 »

Factory

工厂模式的目的是,创建对象,主要是防止new所带来的高耦合,《JavaScript Patterns》上就举了一个工厂的例子,似乎JavaScript中并没有分,简单工厂,工厂方法和抽象工厂这些,我在网上查了资料,抽象工厂好像也是有的,但是没有细看,书上的例子应该是简单工厂的,但和Java这些工厂模式,比较起来又不太一样,可能是基于原型和类继承的差别,这里先做笔记,回来再研究。简单工厂,是通过传入的参数不同,返回不同的实例化对象,书上的例子正好是这样,传入不同种类的车,但又不是写死在工厂中的。下面是创建代码:

1
2
3
4
5
6
var corolla  = CarMaker.factory('Compact'); 
var solstice = CarMaker.factory('Convertible');
var cherokee = CarMaker.factory('SUV');
corolla.drive(); // "Vroom, I have 4 doors"
solstice.drive(); // "Vroom, I have 2 doors"
cherokee.drive(); // "Vroom, I have 17 doors

阅读全文 »

Quiz

Write a generic function chainer that takes a starting value, and an array of functions to execute on it (array of symbols for ruby).

The input for each function is the output of the previous function (except the first function, which takes the starting value as it’s input). Return the final value after execution is complete.

1
2
3
4
5
6
7
8
9
10
function add(num) {
return num + 1
}

function mult(num) {
return num * 30
}

chain(2, [add, mult]);
// returns 90;

阅读全文 »

预见性

开头,文章用棋手的例子来说明,一个专业棋手(expert)和业余的区别,专业棋手,能预见(visualize)这一步棋可能产生的影响。所以预见处理过程(processes)会产生的结果,是通往计算机科学必修之课。

线性递归和迭代

解决n!的方法有很多种,一种是通过观察得出,n可以由n-1计算得到,有如下代码:

1
2
3
4
(define (factorial n)
(if (= n 1)
1
(* n (factorial (- n 1)))))

阅读全文 »

Quiz

Complete the function caffeineBuzz, which takes a non-zero integer as it’s one argument.

If the integer is divisible by 3, return the string “Java”.

If the integer is divisible by 3 and divisible by 4, return the string “Coffee”

If the integer is one of the above and is even, add “Script” to the end of the string.

Otherwise, return the string “mocha_missing!”

阅读全文 »

Quiz

You are going to be given a string. Your job is to return that string in a certain order that I will explain below:

Let’s say you start with this: 012345

The first thing you do is reverse it:543210
Then you will take the string from the 1st position and reverse it again:501234
Then you will take the string from the 2nd position and reverse it again:504321
Then you will take the string from the 3rd position and reverse it again:504123

阅读全文 »

MDN上对callapply的区别如下:

Note: While the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

这2个东东基本是一个作用,都是绑定this的,执行上下文环境,最大区别是参数的不同。来简单做一个题,将数组展开:

1
[[1,2,3],["a","b","c"],[1,2,3]] => [1,2,3,"a","b","c",1,2,3]

阅读全文 »

对象字面量方法

单例最简单的实现,应该是使用对象字面量表达式,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var singleton = (function() {
var
_username = 'Mr.Yu',
_instantiated;

function _init() {
return {
getUser: function() {
return _username;
},
setUser: function(newUser) {
_username = newUser
}
}
}

return {
getInstance: function() {
if (!_instantiated) {
_instantiated = _init();
}
return _instantiated;
}
}
}())
var user = singleton.getInstance();

console.info(user.getUser()); // Mr.Yu

user.setUser('Jeffrey Yu');

console.info(user.getUser()); // Jeffrey Yu

var user2 = singleton.getInstance();

console.info(user2.getUser()); // Jeffrey Yu

阅读全文 »

链式申明赋值

1
2
3
4
5
// antipattern, do not use 
function foo() {
var a = b = 0;
// ...
}

要避免上面的变量定义,因为这样会成为如下形式:

1
var a = (b = 0);

这就相当于b成为隐式全局(可以被删除)变量了。

阅读全文 »