angular4 运行 ng build -pord 出错

  1. npm, angular cli 安装成功后;
  2. 安装依赖时用 npm install ,由于需要 FQ,一直安装不下去;
  3. 用了 taobao 镜像 用 cnpm install 依赖安装成功;
  4. 在用 ng build 时成功,但用 ng build -prod 时出错。错误如下:

大致意思是找不到 package.json,之前用 angular4.0 没问题,装到最新的就有问题了,可能是使用 cnpm 装依赖引起的,因为 npm install 装不成功,不能确定是不是用 npm install 就可以了,

目前暂时用 ng build –prod –no-extract-license 解决,能成功运行,如果有碰到此问题的,可以用此命令试试。

转载地址

RxJS 系列教程-什么是 RxJS?

RxJS 可以解决的问题

  • 我们知道传统的 for,while 对循环体中的异步程序是无法感知的,或者说,它们不会等待异步程序执行完毕再进入下一轮循环。
  • 错误处理是任何程序都要解决的问题,本身就已很复杂的回调函数中再嵌入 try/catch 块吗?如果还想加入重试机制呢?
  • 商业逻辑内嵌在回调函数中,可读性差,复杂度高。现如今流行的组件化编程,即可重用,又可解耦,还方便测试;
  • 闭包是强大的,过度地使用闭包将导致我们不得不谨慎地审视变量的作用域以及其值。再加上共享变量带来的副作用,混杂在 if/else 条件语句和 for 循环中,每天都会有修不完的 bug;
  • 根据事件或耗时操作无响应的时间进行取消操作;
  • 自己实现 throttling 和 debouncing 是很困难的(二者区别见http://www.jianshu.com/p/e91775195608)
  • 众所周知的事件监听带来的内存泄露问题;

RxJS 可以优雅地替代 callback,或者基于 promises 的任何第三方库,使我们可以使用一个编程模型来对待任何数据源(除了远程 http 请求,Node.js 中的 Event
Emitter 也使用的是回调机制)。也就是说,我们可以用 RxJS 来处理读取文件,http 请求,鼠标点击,鼠标移动这些事件。

数据的流动和传播

事件必然伴随着数据的产生,在响应式编程的世界中,我们把任何可以被使用的数据源统称为流(Stream)。我们再来看一下什么是响应式编程模型:

1
2
3
var x = 1;
var y = 2;
var z = x + y; // z = ? x = 2; // z = ?
阅读更多

RxJS 系列-你应该知道的一些知识

程序的可扩展性,可伸缩性

一个应用,当处理少量数据时,可以保证用户界面响应迅速,动画流畅;但当面对大量数据涌入的时候,还能做到以上的保证,我们就可以说此应用具备了可扩展性,可伸缩性。

同步和异步

同步方式运行的程序最容易理解,语句一条一条执行,下一条要等上一条执行完才能执行。但现实中并不是每条语句都可以迅速完成,比如一个网络请求,一个数据库查询,一个复杂计算等等都会导致一条语句变成耗时操作,阻塞了程序的继续执行,导致了应用程序没有响应,带来了极差的用户体验。众所周知,Javascript 是单线程模式,该如何解决耗时操作问题?没错,就是 callback(回调)函数。

回调函数其实在 Javascript 随处可见,鼠标键盘事情的处理,远程 http 请求以及文件 io 操作等等。我们提供给耗时操作一个函数,当耗时操作返回时,Javascript
runtime 会立刻执行这个函数。与此同时,我们的程序并没有被阻塞,继续一条一条的执行下去。这就是以异步方式运行程序。

时间和空间

阅读更多

angular模块库开发

随着前端框架的诞生,也会随之出现一些组件库,方便日常业务开发。今天就聊聊 angular4 组件库开发流程。

下图是 button 组件的基础文件。

image

nk-button.component.ts 为该组件的核心文件,看看代码:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import {Component, Renderer2, ElementRef, AfterContentInit, ViewEncapsulation, Input} from '@angular/core';

@Component({
selector: '[nk-button]',
templateUrl: './nk-button.component.html',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./nk-button.component.scss']
})
export class NkButtonComponent implements AfterContentInit {
_el: HTMLElement;
_prefixCls = 'ky-btn';
_type: string;
_size: string;
_shape: string;
_classList: Array<string> = [];

@Input()
get nkType() {
return this._type;
}

set nkType(value) {
this._type = value;
this._setClass();
}

@Input()
get nkSize() {
return this._size;
}

set nkSize(value: string) {
this._size = value;
this._setClass();
}

@Input()
get nkShape() {
return this._shape;
}

set nkShape(value: string) {
this._shape = value;
this._setClass();
}

constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
this._el = this._elementRef.nativeElement;
this._renderer.addClass(this._el, this._prefixCls);
}

ngAfterContentInit() {
}

/**
*设置class属性
*/
_setClass(): void {
this._classList = [
this.nkType && `${this._prefixCls}-${this.nkType}`,
this.nkSize && `${this._prefixCls}-${this.nkSize}`,
this.nkShape && `${this._prefixCls}-${this.nkShape}`
].filter(item => {
return item;
});
this._classList.forEach(_className => {
this._renderer.addClass(this._el, _className);
});
}
}

针对核心概念 ElementRef、Renderer2、ViewEncapsulation 做简要说明:

阅读更多

前端框架分享

前端 web 开发中会遇到很多框架,今天主要介绍三种:angular.js、react.js、vue.js(无排序之分)

angular.js

angularJS 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。

angularJS 的特性如下:

  1. 良好的应用程序结构
  2. 双向数据绑定
  3. 指令
  4. HTML 模板
  5. 可嵌入、注入和测试

优点:

阅读更多

罗马数字转阿拉伯数字

题目

输入一个罗马数字,输出对应的阿拉伯数字。

代码

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/**
* @param {string} s
* @return {number}
*/
var romanToInt = function(s) {
// 建立七个罗马数字与阿拉伯数字的对应关系
var temps = {
I:1,
V:5,
X:10,
L:50,
C:100,
D:500,
M:1000
}
,num=0
/**
*输出一个二维数组[[X,1]]
*一维元素表示拆分后的罗马数字的
*二维元素表示具体的罗马数字以及对应重复的次数
*/
,sArray=[];
for(var i=0;i<s.length;i++){
var sArr=[];
if(s[i]===s[i-1]){
//记录罗马数字重复的次数
sArray[sArray.length-1][1]++;
}else{
sArr[0]=s[i];
sArr[1]=1;
sArray.push(sArr);
}
}
for(i=0;i<sArray.length;i++){
var current=sArray[i][0]
,currentNum=temps[current]
,flag=1
,len=sArray[i][1];
if(i+1<sArray.length){
//遵循左减右加的规则,若当前值大于右侧的值加,反正减
if(temps[sArray[i+1][0]]-currentNum>0){
flag=-1;
}else{
flag=1;
}
}
num+=temps[current]*len*flag;
}
return num;

};

如果大家有好的解题思路,欢迎留言。

深入理解JavaScript系列—this关键字

涵义

this 关键字是一个非常重要的语法点。毫不夸张地说,不理解它的含义,大部分开发任务都无法完成。

首先,this 总是返回一个对象,简单说,就是返回属性或方法“当前”所在的对象。

1
this.property

上面代码中,this 就代表 property 属性当前所在的对象。

下面是一个实际的例子。

阅读更多

Restful API 设计指南

网络应用程序,分为前端和后端两个部分。当前的发展趋势,就是前端设备层出不穷(手机、平板、桌面电脑、其他专用设备……)。

因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信。这导致 API 构架的流行,甚至出现”API First“的设计思想。RESTful API是目前比较成熟的一套互联网应用程序的 API 设计理论。我以前写过一篇《理解 RESTful 架构》,探讨如何理解这个概念。

今天,我将介绍 RESTful API 的设计细节,探讨如何设计一套合理、好用的 API。我的主要参考了两篇文章(1,2)。

协议

API 与用户的通信协议,总是使用HTTPs 协议

阅读更多

Javascript的this用法

this是Javascript语言的一个关键字。
它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如,

1
2
3
function test(){
 this.x = 1;
}

随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

下面分四种情况,详细讨论this的用法。

情况一:纯粹的函数调用

这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。

请看下面这段代码,它的运行结果是1。

1
2
3
4
5
function test(){
  this.x = 1;
  alert(this.x);
}
test(); // 1
阅读更多