Fork me on GitHub

发表于 | 分类于 
1
2
3
https://angular.io/
https://www.angular.cn/
http://www.angularjs.cn/
1
2
1. Angular和JavaScript不互通（函数、变量、事件都不互通）
2. Angular的开发模式和传统开发模式完全不通：只需盯住数据，数据是核心

简介及入门

Angular2是面向未来的科技，要求浏览器支持ES6+

Angular 应用是由组件组成的。 组件由 HTML 模板和组件类组成，组件类控制视图

每个组件都以@Component装饰器函数开始，它接受一个元数据对象参数。该元素对象描述了 HTML 模板和组件类是如何一起工作的

selector属性为 Angular 指定了在index.html中的自定义标签里显示该组件

1
2
3
4
5
6
7
8
9
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

注️：template后面不是单引号

网页版使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网页版使用示例</title>
    <script src="angular.js"></script>
</head>
<body>
    <div ng-app="" ng-init="str=123">
        <input type="text" ng-model="str"/>
        <div ng-bing="str"></div>
    </div>
</body>
</html>

说明：

  • ng-app:表示此区域内由angular控制

Angular CLI

http://www.itnose.net/detail/6694827.html

Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布

  1. 因为angular-cli是用typescript写的，所以要先装这两个:npm install -g typescript typings
  2. 全局安装 :npm install -g @angular/cli
  3. 创建新项目:ng new my-app
  4. 启动开发服务器:cd my-app;ng serve --open
  • 问题1：/usr/local/lib/node_modules/angular-cli/node_modules/_@ngtools_json-schema@1.0.9@@ngtools/json-schema/src/schema-class-factory.js:34
1
解决：node版本太低
  • 问题2:Installing packages for tooling via npm.
1
太耗时，强制停止后，通过cnpm下载依赖
命令 使用说明
组件Component ng generate component my-new-component
指令Directive ng generate directive my-new-directive
服务Service ng generate pipe my-new-service
管道Pipe ng generate pipe my-new-pipe
类Class ng generate class my-new-class
接口Interface ng generate interface my-new-interface
枚举对象Enum ng generate enum my-new-enum
模块Module ng generate module my-module

架构

Angular 应用使用方法：用 Angular 扩展语法编写 HTML 模板， 用组件类管理这些模板，用服务添加应用逻辑， 用模块打包发布组件与服务

通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互

image

模块 (module)

模块简介

Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 Angular 模块或 NgModules

每个 Angular 应用至少有一个模块（根模块），习惯上命名为AppModule。

Angular 模块都是一个带有@NgModule装饰器的类。

NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：

  • declarations - 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。
  • exports - declarations 的子集，可用于其它模块的组件模板。
  • imports - 本模块声明的组件模板需要的类所在的其它模块。
  • providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
  • bootstrap - 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。
1
2
3
4
5
6
7
8
9
10
11
// src/app/app.module.ts
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Angular 模块库

Angular 提供了一组 JavaScript 模块。可以把它们看做库模块。每个 Angular 库的名字都带有@angular前缀

1
import { Component } from '@angular/core';

组件 (component)

组件负责控制屏幕上的一小块区域，我们称之为视图; 组件通过一些由属性和方法组成的 API 与视图交互

1
2
3
4
5
6
7
8
9
10
11
12
export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

模板 (template)

通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在，告诉 Angular 如何渲染组件

元数据 (metadata)

元数据告诉 Angular 如何处理一个类;要告诉 Angular HeroListComponent是个组件，只要把元数据附加到这个类

1
2
3
4
5
6
7
8
@Component({
  selector:    'hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

数据绑定 (data binding)

数据绑定的语法有四种形式：
image

1
2
3
4
<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>
<input [(ngModel)]="hero.name">

每种形式都有一个方向 —— 绑定到 DOM 、绑定自 DOM 以及双向绑定。

指令 (directive)

Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令提供的操作对 DOM 进行转换

服务 (service)

组件是最大的服务消费者

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//src/app/logger.service.ts
export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}
//src/app/hero.service.ts
export class HeroService {
  private heroes: Hero[] = [];

  constructor(
    private backend: BackendService,
    private logger: Logger) { }

  getHeroes() {
    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
      this.logger.log(`Fetched ${heroes.length} heroes.`);
      this.heroes.push(...heroes); // fill cache
    });
    return this.heroes;
  }
}

依赖注入 (dependency injection)

Angular 使用依赖注入来提供新组件以及组件所需的服务

  1. 当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 (injector)。
  2. 注入器维护了一个服务实例的容器，存放着以前创建的实例。 如果所请求的服务实例不在容器中，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular。
  3. 当所有请求的服务都被解析完并返回时，Angular 会以这些服务为参数去调用组件的构造函数。

这就是依赖注入

image

  • 函数：参数由调用方决定
  • 依赖注入：参数由定于方决定

模版

1
2
3
4
5
6
7
* {{msg}}  

*  $scope  Controller

* filter    {{123|currency}} {{12321213|date:"yyyy-MM-dd"}}

* ng-clack

发表于 | 分类于

[toc]

网址

AntD Pro脚手架：（官方脚手架）

简介

开箱即用的中台前端/设计解决方案

image

安装使用

1
2
3
4
5
$ npm install ant-design-pro-cli -g
$ mkdir my-project && cd my-project
$ pro new  # 安装脚手架
$ npm install
$ npm start

布局

  • BasicLayout：基础页面布局，包含了头部导航，侧边栏和通知栏
  • BlankLayout：空白的布局
  • PageHeaderLayout：带有标准 PageHeader 的布局
  • UserLayout：抽离出用于登陆注册页面的通用布局

发表于 | 分类于

CSS预处理器技术已经非常的成熟，而且也涌现出了越来越多的 CSS 的预处理器框架。最普遍的分别是 Sass、Less CSS、Stylus，本文以Less重点讲解。

CSS预处理器
CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处

1.Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码
2.Less 可以通过 npm 在命令行上运行；在浏览器上作为脚本文件下载；或者集成在广大的第三方工具内
3.在服务器端最容易的安装方式就是通过 npm （node.js 的包管理器），方法如下：npm install -g less
4.安装 Less 后，就可以在命令行上调用 Less 编译器了，如：lessc styles.less或lessc styles.less > styles.css
若要输出压缩过的 CSS，只需添加 -x 选项。如果希望获得更好的压缩效果，还可以通过 --clean-css 选项启用 Clean CSS 进行压缩
5.在代码中调用 Less如下：
var less = require(‘less’);

less.render(’.class { width: (1 + 1) }’, function (e, css) {
  console.log(css);
});
6.还可以手动调用分析器（paser）和编译器:
var parser = new(less.Parser);

parser.parse(’.class { width: (1 + 1) }’, function (err, tree) {
  if (err) {
    return console.error(err)
  }
  console.log(tree.toCSS());
});
7.可以给编译器传递多个参数
var parser = new(less.Parser)({
  paths: [’.’, ‘./lib’], // Specify search paths for @import directives
  filename: ‘style.less’ // Specify a filename, for better error messages
});

parser.parse(’.class { width: (1 + 1) }’, function (e, tree) {
  tree.toCSS({
    // Minify CSS output
    compress: true
  });
});
8.Less 还和流行的 Grunt 构建工具进行了集成，可以参考 grunt-contrib-less 插件
9.在客户端使用 Less.js 是最容易的方式，并且在开发阶段很方便，但是，在生产环境中，性能和可靠性非常重要，我们建议最好使用 node.js 或其它第三方工具进行预编译

http://www.bootcss.com/p/lesscss/

LESS 原理及使用方式
本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性

LESS 可以直接在客户端使用，也可以在服务器端使用。在实际项目开发中，我们更推荐使用第三种方式，将 LESS 文件编译生成静态 CSS 文件，并在 HTML 文档中应用
客户端： ==LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析
服务器端：目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译
以通过这个关键字引入我们需要的 .less 或 .css 文件。 如：
@import “variables.less”;
.less 文件也可以省略后缀名，像这样：
@import “variables”;
引入 CSS 同 LESS 文件一样，只是 .css 后缀名不能省略

变量
1.LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单
2.ESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是作用域，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局
@width : 20px; 
 #homeDiv { 
   @width : 30px; 
   #centerDiv{ 
       width : @width;// 此处应该取最近定义的变量 width 的值 30px 
              } 
 }

Mixins（混入）
1.混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样
// 定义一个样式选择器
 .roundedCorners(@radius:5px) { 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 // 在另外的样式选择器中使用
 #header { 
 .roundedCorners; 
 } 
 #footer { 
 .roundedCorners(10px); 
 }
2.Mixins中@arguments是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ 
 -moz-box-shadow: @arguments; 
 -webkit-box-shadow: @arguments; 
 box-shadow: @arguments; 
 } 
 #header { 
 .boxShadow(2px,2px,3px,#f36); 
 }
3.LESS也采用了命名空间的方法来避免重名问题
 #mynamespace { 
 .home {…} 
 .user {…} 
 }
如果我们要复用 user 这个选择器的时候，就可以了通过：#mynamespace > .user 的方式
4.嵌套的规则
在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：
 HTML 片段
 

 
 
top
 
 
 
 
left
 
  
 
 
 

    对应LESS 文件
 #home{ 
   color : blue; 
   width : 600px; 
   height : 500px; 
   border:outset; 
   #top{ 
        border:outset; 
        width : 90%; 
   } 
   #center{ 
        border:outset; 
        height : 300px; 
        width : 90%; 
        #left{ 
          border:outset; 
          float : left; 
        width : 40%; 
        } 
        #right{ 
          border:outset; 
          float : left; 
          width : 40%; 
        } 
    } 
 }

运算及函数
简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。
下面是 LESS 提供的针对颜色操作的函数列表：
 lighten(@color, 10%); // return a color which is 10% lighter than @color 
 darken(@color, 10%); // return a color which is 10% darker than @color 
 saturate(@color, 10%); // return a color 10% more saturated than @color 
 desaturate(@color, 10%);// return a color 10% less saturated than @color 
 fadein(@color, 10%); // return a color 10% less transparent than @color 
 fadeout(@color, 10%); // return a color 10% more transparent than @color 
 spin(@color, 10); // return a color with a 10 degree larger in hue than @color 
 spin(@color, -10); // return a color with a 10 degree smaller hue than @color
变量使用示例：
 @init: #111111; 
 @transition: @init*2; 
 .switchColor { 
  color: @transition; 
 }

Comments（注释）
适当的注释是保证代码可读性的必要手段，LESS 对注释也提供了支持，主要有两种方式：单行注释和多行注释
LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中，所以如果注释是针对样式说明的请使用多行注释

发表于 | 分类于

CSS的缺点

  1. 不能重新排序文档中的元素
  2. 不能判断和控制那个元素被显示，哪个元素不被显示
  3. 不能统计计算元素中的数据

XSL：eXtensible StyleSheet Language可扩展样式表语言

在HTML中应用CSS的三种方式

  1. 嵌入式，通过script标签放在head中
  2. 外部引用式：A @import方法 @import “.css”/@import url(“.css”); B link元素
  3. 内联式：写在元素内部
    规则块：@规则以一个关键字@开头，紧跟在后的是一个标识符，共有如下几个@规则：
    @import，@charset，@page，@media
    注意：CSS不区分大小写；关键字以标识符的形式出现，不可发那个旨在引号之间；客户端浏览器特定的扩展以字符-或者—开头；
    升入了解一下CSS的计数器
    属性值的计算步骤：指定值，计算值，使用值，实际值

CSS的选择符的语法：

  1. 简单选择符：类型选择符 p{}；通用选择符 *
  2. 派生选择符： A B，元素B是其前辈元素的任意后代，而不仅仅是元素A的直接子元素
  3. 子选择符：body >em，当一个元素是另一个匀速的直接子元素是使用
  4. 相邻同级选择符： E1+E2，其中E2是选择符的主题，也就是说，设置的是E2元素的样式。匹配条件是：如果E1和E2在文档中的父元素相同，且E1紧接在E2之前（忽略文本节点和注释），则匹配
  5. 属性选择符和类选择符
    A 属性选择符：E[];E[foo=”str”];E[foo~=””]属性的值可以是包含空白的字符串，但是字符串中两个空白之间必须有一个只是恰好等于str;E[lang|=”en”],左边开始的字符串值必须是en
    B 类选择符 *.E
    C 匹配子集 <P class=“Tom john boy”/>，则p.Tom.john.boy匹配他
    D ID选择符 *#E
    E 伪元素和伪类（见下方详细说明）

BOX模型

由外到内是margin，border，padding，content

块级元素和行内级元素（div和span）：

了解其不同，通过display属性进行转换

伪元素、伪类选择和动态生成内容

为了对文档树之外的信息赋予样式，CSS引入了伪元素和伪类的概念，有如下几种：

  1. 第一个子元素伪类：first-child
  2. 动态和链接相关的伪类
    A 链接伪类（：link，：visited）
    B 动态伪类（：hover，：active，：focus）
    C 语言伪类（：lang）
    D 首行和首字符伪元素（：first-line，：first-letter）
    E 用于插入内容的伪元素（：before，：after）
  • 学习对列表定义样式
  • 学习对溢出和裁剪的用法：overflow，clip:rect(5px,12px,1px,3px)

！import用来改变属性的优先级，一般不建议使用，可通过此标签查找冲突

CSS中盒子的定位：

  • 定位方式：正常流向，浮动，绝对定位
  • 学习position，display，flow和z-index的使用

利用CSS分页显示(Page-break-before)和打印
使用IE转悠filter属性实现滤镜和过渡效果
Filter:滤镜名（滤镜参数）

发表于 | 分类于

[toc]

1
2
https://www.tslang.cn/
http://www.typescriptlang.org/

简介

微软出品，2012

  1. 编译型语言
  2. 强类型语言
  3. 真面向对象
  4. AMD方式

cnpm install -g typescript

扩展名：.ts／.tsx/.d.ts
编译： tsc 1.ts //1.js

number\string\boolean\symbol\void\null\undefined\enum\any

any:变体变量

var a:any;
a=12;
a=“abc”;

var a:any; 等同于 var a;//类型推测（隐式类型声明）

冲突检测：编译器会自动排除掉无用的选项

联合类型：
var a:number|string;
a=12;
a=‘abc’;
a=false;//报错

数组也有类型

外部声明declare，window等都内部声明过了
declare var 名字；

function sum(a:number,b:number):number{
return a+b;
}

function ajax(url:string,success:(res:string,code:number)=>void,error:(code:number)=>void){

}

对象类型：ObjectType
var a:{x:number,y:number}
可选声明：var a:{x:number,y:number,z?:number},调用或赋值的时候，z可有可无

接口：约定、限制
interface Point{
x:number,
y:number,
z?:number
}

泛型：

class Calc{
a:T;
b:T;
}

var obj=new Calc();
obj.a=12;
obj.b=‘123’;//报错

tsconfig.json

发表于 | 分类于

http://www.cnblogs.com/wangshenhe/archive/2013/02/16/2913431.html

在实际的项目中，我们可能随时面对各种不同的需求，它的各个方面的要素决定了我们所采用的开发模式。
比如，它的复杂度如何？所有的需求是否足够清晰？开发人员对相关的业务是否足够了解？项目的工期是否合理？种种问题，不一而足。这也决定了我们可能面对不同的需求可能需要采用不同的开发模式。下面大概说几种：

  1. TDD
    TDD指的是Test Drive Development，很明显的意思是测试驱动开发，也就是说我们可以从测试的角度来检验整个项目。大概的流程是先针对每个功能点抽象出接口代码，然后编写单元测试代码，接下来实现接口，运行单元测试代码，循环此过程，直到整个单元测试都通过。这一点和敏捷开发有类似之处。

TDD的好处自然不用多说，它能让你减少程序逻辑方面的错误，尽可能的减少项目中的bug，开始接触编程的时候我们大都有过这样的体验，可能你觉得完成得很完美，自我感觉良好，但是实际测试或者应用的时候才发现里面可能存在一堆bug，或者存在设计问题，或者更严重的逻辑问题，而TDD正好可以帮助我们尽量减少类似事件的发生。而且现在大行其道的一些模式对TDD的支持都非常不错，比如MVC和MVP等。

但是并不是所有的项目都适合TDD这种模式的，我觉得必须具备以下几个条件：
首先，项目的需求必须足够清晰，而且程序员对整个需求有足够的了解，如果这个条件不满足，那么执行的过程中难免失控。当然，要达到这个目标也是需要做一定功课的，这要求我们前期的需求分析以及HLD和LLD都要做得足够的细致和完善。

其次，取决于项目的复杂度和依赖性，对于一个业务模型及其复杂、内部模块之间的相互依赖性非常强的项目，采用TDD反而会得不尝失，这会导致程序员在拆分接口和写测试代码的时候工作量非常大。另外，由于模块之间的依赖性太强，我们在写测试代码的时候可能不采取一些桥接模式来实现，这样势必加大了程序员的工作量。

  1. BDD
    BDD指的是Behavior Drive Development，也就是行为驱动开发。这里的B并非指的是Business，实际上BDD可以看作是对TDD的一种补充，当然你也可以把它看作TDD的一个分支。因为在TDD中，我们并不能完全保证根据设计所编写的测试就是用户所期望的功能。BDD将这一部分简单和自然化，用自然语言来描述，让开发、测试、BA以及客户都能在这个基础上达成一致。因为测试优先的概念并不是每个人都能接受的，可能有人觉得系统太复杂而难以测试，有人认为不存在的东西无法测试。所以，我们在这里试图转换一种观念，那便是考虑它的行为，也就是说它应该如何运行，然后抽象出能达成共识的规范。如果你用过JBehave之类的BDD框架，你将会更好的理解其中具体的流程。这里我推荐一篇具体阐述的文章。亲身体验行为驱动开发。
    另外，关于TDD和BDD之间的关系，还可以参考这篇文章: 虚拟座谈会：代码测试比率、测试驱动开发及行为驱动开发

  2. DDD
    DDD指的是Domain Drive Design，也就是领域驱动开发。这是一种非常好的思想，在我们刚开始学习程序，甚至刚开始学习三层架构的时候，我们曾经面临过很多疑惑，比如如何来实现我们的数据层？后来我们开始学习MVC，MVP等架构，如何设计Model层又成了我们的新问题。我们见过太多这种情况，Model变成了单纯的数据容器，也就是我们经常说的贫血模式。DDD实际上也是建立在这个基础之上，因为它关注的是Service层的设计，着重于业务的实现，因此不可避免的以贫血模式为基础而存在。但是它最大的特别是将分析和设计结合起来，不再使他们处于分裂的状态，这对于我们正确完整的实现客户的需求，以及建立一个具有业务伸缩性的模型，是有很大帮助的。

发表于 | 分类于

http://www.360doc.com/content/16/0115/10/597197_528136785.shtml

express中使用ejs

1
2
3
4
var express = require('express');//需要安装 express
var app = express();

app.set("view engine","ejs");//模版引擎设置为 ejs

文件组织

在express中使用ejs，文件组织遵循express。

  • views-------放置动态模版
  • public------放置静态网页
  • layouts-----放置布局文件

EJS成员函数：

  • Render(str,data,[option]):直接渲染字符串并生成html
1
2
3
str：需要解析的字符串模板
data：数据
option：配置选项
  • Compile(str,[option]):编译字符串得到模板函数
1
2
str：需要解析的字符串模板
option：配置选项

基本语法

  1. <% code %>:无缓冲的条件语句元素
  2. <%= code %>:转义HTML，该code并且会打印出来
  3. <%- code %>:非转义的buffering，该code并且会打印出来
  4. <% include file %>:内嵌别的文件
  5. <% layout(file) -%>:指定布局文件
  6. <% script(file) -%>:包含js脚本文件
  7. <% stylesheet(file) -%>:包含css文件
  8. <% block(code, code) -%>:指定块内容
  9. <%# %>:注释标签

基本对象

  1. scripts:包含的脚本
  2. stylesheets:包含的css
  3. blocks:包含的块

发表于 | 分类于

[toc]

安装

  1. npm install -g pug
  2. npm install -g pug-cli
  3. pug index.pug

webstorm添加pug文件自动编译

  1. WebStorm下，File->settings，在左上角搜索watcher，选择Tools->fileWatcher
  2. 添加一个watcher，选择类型为Jade（pug支持安装了，但是不知道怎样使用，发现全部用Jade也能使用）
  3. 在Program下，选择pug的安装路径，如我的为：/usr/local/bin/pug,在Arguments的默认值前面添加-P可以让编译后的文件格式化显示
  4. 编写pug文件，编写后，会自动生成相应的编译后文件

在 Express 中调用 jade 模板引擎

1
2
3
4
5
6
app.set('view engine', 'jade'); // 设置模板引擎
app.set('views', __dirname);  // 设置模板相对路径(相对当前目录)

app.get('/', function(req, res) {
    res.render('test'); // 调用当前路径下的 test.jade 模板
})

基本语法及支持

类名和ID名

  • a.class名称,如：a.button,翻译为：
  • a#id名称，如：a#button，翻译为：

属性

属性可以使用()包裹起来,属性值之间用逗号隔开，如：a(href=“google.com”,title=“google”)

文本内容

在html标签后空格直接书写

多行文本内容

1
2
3
p.
    asdfasdfa
    asdfasd

或者

1
2
3
4
p
    | dfas <strong>hey</strong>
        strong hey man
    | dfas

注释

  1. 单行注释
  • 普通方式：// just some paragraphs，翻译为：
  • 非缓冲注释，不会被编译到HTML：//- will not output within markup
  1. 多行注释
1
2
3
//
    As much text as you want
    can go here.

变量

jade 的变量调用有 3 种方式:

  1. #{表达式} //此方式可以自由的嵌入各个地方
  2. =表达式 //返回的是表达式的值,会编码字符串
  3. !=表达式 //返回的是表达式的值,不会编码字符串

注意：符号 - 开头在 jade 中属于服务端执行的代码

1
2
3
4
- console.log('hello'); // 这段代码在服务端执行
- var s = 'hello world' // 在服务端空间中定义变量
p #{s}          //<p>hello world</p>
p= s            //<p>hello world</p>

使用：

  1. 直接在 jade 模板中定义变量
  2. 在 express 中调用 res.render 方法的时候将变量一起传递进模板的空间中,调用模板的时候，在 jade 模板中也可以如上方那样直接调用 s 这个变量
1
2
3
res.render(test, {
    s: 'hello world'
});

流程代码

if判断

方式1:

1
2
3
4
5
6
7
- var user = { description: '我喜欢猫' }
- if (user.description)
    h2 描述
    p.description= user.description
- else
    h1 描述
    p.description 用户无描述

方式2:

1
2
3
4
5
6
7
8
- var user = { description: '我喜欢猫' }
#user
  if user.description
    h2 描述
    p.description= user.description
  else
    h1 描述
    p.description 用户无描述

方式1、方式2执行结果：

1
2
3
4
<div id="user">
  <h2>描述</h2>
  <p class="description">我喜欢猫</p>
</div

方式3:
使用 Unless 类似于 if 后的表达式加上了 ! 取反;这个 unless 是 jade 提供的关键字，不是运行的 js 代码

1
2
3
- var user = { name: 'Alan', isVip: false }
unless user.isVip
  p 亲爱的 #{user.name} 您并不是 VIP

循环

  1. for 循环
1
2
3
4
5
- var array = [1,2,3]
ul
  - for (var i = 0; i < array.length; ++i) {
    li hello #{array[i]}
  - }
  1. each:in后的循环目标支持数组、json
1
2
3
ul
  each val, index in ['西瓜', '苹果', '梨子']
    li= index + ': ' + val

Case选择

case 不支持case 穿透，如果 case 穿透的话会报错

1
2
3
4
5
- var friends = 1
case friends
  when 0: p you have no friends
  when 1: p you have a friend
  default: p you have #{friends} friends

或

1
2
3
4
5
6
7
8
- var friends = 10
case friends
  when 0
    p you have no friends
  when 1
    p you have a friend
  default
    p you have #{friends} friends

模板中调用Markdown语言

1
2
3
4
5
:markdown
  # Markdown 标题
  
//翻译后：
<h1>Markdown 标题</h1>

可重用的 jade 块 (Mixins)

1
2
3
4
5
6
7
8
9
10
11
12
mixin article(title)
  .article
    .article-wrapper
      h1= title
      //- block 为 jade 关键字代表外部传入的块
      if block
        block
      else
        p 该文章没有内容
        
+article('Hello world')
+article('Hello Jade')

结果：

1
2
3
4
5
6
7
8
9
10
11
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>该文章没有内容</p>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello Jade</h1> 
  </div>
</div>

Mixins 同时也可以从外部获取属性:

1
2
3
4
5
6
7
mixin link(href, name)
  a(class!=attributes.class, href=href)= name
   
+link('/foo', 'foo')(class="btn")

//编译后
<a href="/foo" class="btn">foo</a>

模板包含 (Includes)

可以使用 Includes 在模板中包含其他模板的内容

模板继承 (Extends)

layout.jade

1
2
3
4
5
6
7
8
9
doctype html
html
  head
    title 我的网站
    meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
    link(type="text/css",rel="stylesheet",href="/css/style.css")
    script(src="/js/lib/jquery-1.8.0.min.js",type="text/javascript")
  body
    block content

article.jade

1
2
3
4
5
//- extends 拓展调用 layout.jade
extends ../layout
block content
  h1 文章列表
  p 习近平忆贾大山 李克强:将启动新核电项目

res.render(‘article’) 的结果：

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head>
    <title>我的网站</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
    <link type="text/css" rel="stylesheet" href="/css/style.css"></head>
    <script src="/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>文章列表</h1>
    <p>习近平忆贾大山 李克强:将启动新核电项目</p> 
  </body>
</html>

发表于 | 分类于

[toc]

API: http://nodejs.cn/api/readline

简介

Readline是Node.js里实现标准输入输出的封装好的模块，通过这个模块我们可以以逐行的方式读取数据流。使用require(“readline”)可以引用模块

创建Readline实例

readline.createInterface(options)

1
2
3
4
5
6
7
8
9
10
11
12
创建一个readline的接口实例. 接受一个Object类型参数，可传递以下几个值:

input - 要监听的可读流 (必需)
output - 要写入 readline 的可写流 (必须).
completer - 用于 Tab 自动补全的可选函数。(不常用)
terminal - 如果希望 input 和 output 流像 TTY 一样对待，那么传递参数 true ，并且经由 ANSI/VT100 转码。 默认情况下检查 isTTY 是否在 output 流上实例化。(不常用)

var readline = require(‘readline’); 
var rl = readline.createInterface({ 
    input: process.stdin, 
    output: process.stdout 
});

接口

  • rl.close()：关闭接口实例 (Interface instance), 放弃控制输入输出流。”close” 事件会被触发
  • rl.pause()：暂停 readline 的输入流 (input stream), 如果有需要稍后还可以恢复
  • rl.prompt([preserveCursor])：为用户输入准备好readline，将现有的setPrompt选项放到新的一行，让用户有一个新的地方开始输入。将preserveCursor设为true来防止光标位置被重新设定成0
  • rl.question(query, callback)：预先提示指定的query，然后用户应答后触发指定的callback。 显示指定的query给用户后，当用户的应答被输入后，就触发了指定的callback
  • rl.resume()：恢复 readline 的输入流 (input stream)
  • rl.setPrompt(prompt)：设置提示符，例如当你在命令行运行 node 时，你会看到(prompt)

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var readline = require('readline');
var rl = readline.createInterface(process.stdin,process.stdout);

// question方法
rl.question('what is you name? ',function(answer){
  console.log('my name is ' + answer);
  //不加close，则不会结束
  rl.close();
});
// close事件监听
rl.on('close',function(){
  console.log('欢迎下次再来');
  process.exit(0);
});