TIS_OMiddle

TIS_OMiddle 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

TIS_OMiddle 收藏了文章 · 2019-07-07

Angular 4 快速入门

建了个群有兴趣的朋友可以加一下 QQ 群:Angular 修仙之路(1)群 - 153742079 (已满),请加 Angular 修仙之路(2)群 - 648681235。

目录

  • 第一节 - Angular 简介
  • 第二节 - Angular 环境搭建
  • 第三节 - 插值表达式
  • 第四节 - 自定义组件
  • 第五节 - 常用指令简介
  • 第六节 - 事件绑定
  • 第七节 - 表单模块简介
  • 第八节 - Http 模块简介
  • 第九节 - 注入服务
  • 第十节 - 路由模块简介
查看新版教程,请访问 Angular 6.x 快速入门

第一节 Angular 简介

Angular 是什么

Angular 是由谷歌开发与维护一个开发跨平台应用程序的框架,同时适用于手机与桌面。

Angular 有什么特点

  • 基于 Angular 我们可以构建适用于所有平台的应用。比如:Web 应用、移动 Web 应用、移动应用和桌面应用等。
  • 通过 Web Worker和服务端渲染 (SSR),达到在如今Web平台上所能达到的最高渲染速度。
  • Angular 让你能够有效掌控可伸缩性。基于 RxJS、Immutable.js 和其它推送模型,能适应海量数据需求。

Angular 提供了哪些功能

  • 动态HTML
  • 强大的表单系统 (模板驱动和模型驱动)
  • 强大的视图引擎
  • 事件处理
  • 快速的页面渲染
  • 灵活的路由
  • HTTP 服务
  • 视图封装
  • AOT、Tree Shaking

Angular 与 AngularJS 有什么区别

  • 不再有ControllerScope
  • 更好的组件化及代码复用
  • 更好的移动端支持
  • 引入了 RxJSObservable
  • 引入了 Zone.js,提供更加智能的变化检测

第二节 - Angular 环境搭建

基础要求

Angular 开发环境配置方式

配置开发环境

本快速入门教程,选用第一种配置方式搭建 Angular 开发环境:

基于 Angular Quickstart

  • 使用 Git 克隆 quickstart 项目
git clone https://github.com/angular/quickstart ng4-quickstart
code ./ng4-quickstart
  • 安装项目所需依赖
npm i 
  • 验证环境是否搭建成功
npm start

基于 Angular CLI

npm install -g @angular/cli
  • 检测 Angular CLI 是否安装成功
ng --version
  • 创建新的项目
ng new PROJECT-NAME
  • 启动本地服务器
cd PROJECT-NAME
ng serve

第三节 - 插值表达式

在 Angular 中,我们可以使用 {{}} 插值语法实现数据绑定。

绑定普通文本

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

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

绑定对象属性

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

@Component({
  selector: 'my-app',
  template: `
    <h2>大家好,我是{{name}}</h2>
    <p>我来自<strong>{{address.province}}</strong>省,
      <strong>{{address.city}}</strong>市
    </p>
  `,
})
export class AppComponent {
  name = 'Semlinker';
  address = {
    province: '福建',
    city: '厦门'
  }
}

值得一提的是,我们可以使用 Angular 内置的 json 管道,来显示对象信息:

@Component({
  selector: 'my-app',
  template: `
    ...
    <p>{{address | json}}</p>
  `,
})
export class AppComponent {
  name = 'Semlinker';
  address = {
    province: '福建',
    city: '厦门'
  }
}

第四节 - 自定义组件

在 Angular 中,我们可以通过 Component 装饰器和自定义组件类来创建自定义组件。

基础知识

定义组件的元信息

在 Angular 中,我们可以使用 Component 装饰器来定义组件的元信息:

@Component({
  selector: 'my-app', // 用于定义组件在HTML代码中匹配的标签
  template: `<h1>Hello {{name}}</h1>`, // 定义组件内嵌视图
})

定义组件类

export class AppComponent  {
  name = 'Angular'; 
}

定义数据接口

在 TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。

interface Person {
  name: string;
  age: number;
}

let semlinker: Person = {
  name: 'semlinker',
  age: 31
};

自定义组件示例

创建 UserComponent 组件

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

@Component({
    selector: 'sl-user',
    template: `
    <h2>大家好,我是{{name}}</h2>
    <p>我来自<strong>{{address.province}}</strong>省,
      <strong>{{address.city}}</strong>市
    </p>
    `
})
export class UserComponent {
    name = 'Semlinker';
    address = {
        province: '福建',
        city: '厦门'
    };
}

声明 UserComponent 组件

// ...
import { UserComponent } from './user.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, UserComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

使用 UserComponent 组件

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

@Component({
  selector: 'my-app',
  template: `
    <sl-user></sl-user>
  `,
})
export class AppComponent {}

使用构造函数初始化数据

@Component({...})
export class UserComponent {
    name: string;
    address: any;

    constructor() {
        this.name = 'Semlinker';
        this.address = {
            province: '福建',
            city: '厦门'
        }
    }
}

接口使用示例

定义 Address 接口

interface Address {
    province: string;
    city: string;
}

使用 Address 接口

export class UserComponent {
    name: string;
    address: Address;
    // ...
}

第五节 - 常用指令简介

在 Angular 实际项目中,最常用的指令是 ngIfngFor 指令。

基础知识

ngIf 指令简介

该指令用于根据表达式的值,动态控制模板内容的显示与隐藏。它与 AngularJS 1.x 中的 ng-if 指令的功能是等价的。

ngIf 指令语法

<div *ngIf="condition">...</div>

ngFor 指令简介

该指令用于基于可迭代对象中的每一项创建相应的模板。它与 AngularJS 1.x 中的 ng-repeat 指令的功能是等价的。

ngFor 指令语法

<li *ngFor="let item of items;">...</li>

ngIf 与 ngFor 指令使用示例

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

interface Address {
    province: string;
    city: string;
}

@Component({
    selector: 'sl-user',
    template: `
    <h2>大家好,我是{{name}}</h2>
    <p>我来自<strong>{{address.province}}</strong>省,
      <strong>{{address.city}}</strong>市
    </p>
    <div *ngIf="showSkills">
        <h3>我的技能</h3>
        <ul>
            <li *ngFor="let skill of skills">
                {{skill}}
            </li>
        </ul>
    </div>
    `
})
export class UserComponent {
    name: string;
    address: Address;
    showSkills: boolean;
    skills: string[];

    constructor() {
        this.name = 'Semlinker';
        this.address = {
            province: '福建',
            city: '厦门'
        };
        this.showSkills = true;
        this.skills = ['AngularJS 1.x', 'Angular 2.x', 'Angular 4.x'];
    }
}

第六节 - 事件绑定

在 Angular 中,我们可以通过 (eventName) 的语法,实现事件绑定。

基础知识

事件绑定语法

<date-picker (dateChanged)="statement()"></date-picker>

等价于

<date-picker on-dateChanged="statement()"></date-picker>

介绍完事件绑定的语法,接下来我们来为第五节中的 UserComponent 组件,开发一个功能,即可以让用户动态控制技能信息的显示与隐藏。

事件绑定示例

@Component({
    selector: 'sl-user',
    template: `
    ...
    <button (click)="toggleSkills()">
        {{ showSkills ? "隐藏技能" : "显示技能" }}
    </button>
    ...
    `
})
export class UserComponent {
    // ...
    toggleSkills() {
        this.showSkills = !this.showSkills;
    }
}

第七节 - 表单模块简介

Angular 中有两种表单:

  • Template Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 )
  • Reactive Forms - 响应式表单

本小节主要介绍模板驱动式的表单,接下来我们来演示如何通过表单来为我们的之前创建的 UserComponent 组件,增加让用户自定义技能的功能。

基础知识

导入表单模块

import { FormsModule } from '@angular/forms';
// ...
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, UserComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

模板变量语法

<video #player></video> 
<button (click)="player.pause()">Pause</button>

等价于

<video ref-player></video>

表单使用示例

@Component({
    selector: 'sl-user',
    template: `
    ...
    <div *ngIf="showSkills">
        <h3>我的技能</h3>
        ...
        <form (submit)="addSkill(skill.value)">
            <label>添加技能</label>
            <input type="text" #skill>
        </form>
    </div>
    `
})
export class UserComponent {
   // ...
    addSkill(skill: string) {
        let skillStr = skill.trim();
        if (this.skills.indexOf(skillStr) === -1) {
            this.skills.push(skillStr);
        }
    }
}

第八节 - Http 模块简介

Angular 4.3 版本后,推荐使用 HttpClient,可以参考 Angular HTTP Client 快速入门

基础知识

导入 Http 模块

// ... 
import { HttpModule } from '@angular/http';

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule],
  declarations: [AppComponent, UserComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用 Http 服务步骤

(1) 从 @angular/http 模块中导入 Http 类

(2) 导入 RxJS 中的 map 操作符

(3) 使用 DI 方式注入 http 服务

(4) 调用 http 服务的 get() 方法,设置请求地址并发送 HTTP 请求

(5) 调用 Response 对象的 json() 方法,把响应体转成 JSON 对象

(6) 把请求的结果,赋值给对应的属性

Http 服务使用示例

使用 Http 服务

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http'; // (1)
import 'rxjs/add/operator/map'; // (2)

interface Member {
    id: string;
    login: string;
    avatar_url: string;
}

@Component({
    selector: 'sl-members',
    template: `
    <h3>Angular Orgs Members</h3>
    <ul *ngIf="members">
      <li *ngFor="let member of members;">
        <p>
          <img [src]="member.avatar_url" width="48" height="48"/>
          ID:<span>{{member.id}}</span>
          Name: <span>{{member.login}}</span>
        </p>
      </li>
    </ul>
    `
})
export class MembersComponent implements OnInit {
  members: Member[];

  constructor(private http: Http) { } // (3)

  ngOnInit() {
    this.http.get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`) // (4)
        .map(res => res.json()) // (5)
        .subscribe(data => {
           if (data) this.members = data; // (6)
        });
    }
}

声明 MembersComponent 组件

// ...
import { MembersComponent } from './members.component';

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule],
  declarations: [AppComponent, UserComponent, MembersComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用 MembersComponent 组件

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

@Component({
  selector: 'my-app',
  template: `
    <sl-members></sl-members>
  `,
})
export class AppComponent {}

第九节 - 注入服务

基础知识

组件中注入服务步骤

(1) 配置已创建的服务,如:

@NgModule({
  // ...
  providers: [MemberService]
})
export class AppModule { }

(2) 导入已创建的服务,如:

import { MemberService } from '../member.service';

(3) 使用构造注入方式,注入服务:

export class MembersComponent implements OnInit {
   // ...
   constructor(private memberService: MemberService) { }
}

服务使用示例

创建 MemberService 服务

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class MemberService {
    constructor(private http: Http) { }

    getMembers() {
        return this.http
            .get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`)
            .map(res => res.json())
    }
}

配置 MemberService 服务

import { MemberService } from "./member.service";

@NgModule({
  // ...
  providers:[MemberService],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用 MemberService 服务

// ...
import { MemberService } from "./member.service";

@Component({...})
export class MembersComponent implements OnInit {
    members: Member[];

    constructor(private memberService: MemberService) { }

    ngOnInit() {
        this.memberService.getMembers()
            .subscribe(data => {
                if (data) this.members = data;
            });
    }
}

第十节 - 路由模块简介

基础知识

导入路由模块

// ...
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule, RouterModule],
  declarations: [AppComponent, UserComponent, MembersComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

配置路由信息

import { Routes, RouterModule } from '@angular/router';
import { UserComponent } from './user.component';

export const ROUTES: Routes = [
  { path: 'user', component: UserComponent }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES)
  ],
  // ...
})
export class AppModule {}

routerLink 指令

为了让我们链接到已设置的路由,我们需要使用 routerLink 指令,具体示例如下:

<nav>
  <a routerLink="/">首页</a>
  <a routerLink="/user">我的</a>
</nav>

当我们点击以上的任意链接时,页面不会被重新加载。反之,我们的路径将在 URL 地址栏中显示,随后进行后续视图更新,以匹配 routerLink 中设置的值。

router-outlet 指令

该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载的组件时,它将动态创建对应的组件,并将其作为兄弟元素,插入到 router-outlet 元素中。具体示例如下:

@Component({
  selector: 'app-root',
  template: `
    <div class="app">
      <h3>Our app</h3>
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent {}

路由使用示例

配置路由信息

export const ROUTES: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'user' },
  { path: 'user', component: UserComponent },
  { path: 'members', component: MembersComponent }
];

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule,
    RouterModule.forRoot(ROUTES)],
  // ...
})
export class AppModule { }

配置路由导航

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

@Component({
  selector: 'my-app',
  template: `
    <div class="app">
      <h1>欢迎来到Angular的世界</h1>
      <nav>
        <a routerLink="/user">我的</a>
        <a routerLink="/members">Angular成员</a>
      </nav>
      <router-outlet></router-outlet>
    </div>
  `,
})
export class AppComponent { }

完整示例

AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { UserComponent } from './user.component';
import { MembersComponent } from './members.component';
import { MemberService } from "./member.service";

export const ROUTES: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'user' },
  { path: 'user', component: UserComponent },
  { path: 'members', component: MembersComponent }
];

@NgModule({
  imports: [BrowserModule, FormsModule, HttpModule,
    RouterModule.forRoot(ROUTES)],
  declarations: [AppComponent, UserComponent, MembersComponent],
  providers: [MemberService],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent

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

@Component({
  selector: 'my-app',
  template: `
    <div class="app">
      <h1>欢迎来到Angular的世界</h1>
      <nav>
        <a routerLink="/user">我的</a>
        <a routerLink="/members">Angular成员</a>
      </nav>
      <router-outlet></router-outlet>
    </div>
  `,
})
export class AppComponent { }

UserComponent

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


interface Address {
    province: string;
    city: string;
}

@Component({
    selector: 'sl-user',
    template: `
    <h2>大家好,我是{{name}}</h2>
    <p>我来自<strong>{{address.province}}</strong>省,
      <strong>{{address.city}}</strong>市
    </p>
    <button (click)="toggleSkills()">
        {{ showSkills ? "隐藏技能" : "显示技能" }}
    </button>
    <div *ngIf="showSkills">
        <h3>我的技能</h3>
        <ul>
            <li *ngFor="let skill of skills">
                {{skill}}
            </li>
        </ul>
        <form (submit)="addSkill(skill.value)">
            <label>添加技能</label>
            <input type="text" #skill>
        </form>
    </div>
    `
})
export class UserComponent {
    name: string;
    address: Address;
    showSkills: boolean;
    skills: string[];

    constructor() {
        this.name = 'Semlinker';
        this.address = {
            province: '福建',
            city: '厦门'
        };
        this.showSkills = true;
        this.skills = ['AngularJS 1.x', 'Angular 2.x', 'Angular 4.x'];
    }

    toggleSkills() {
        this.showSkills = !this.showSkills;
    }

    addSkill(skill: string) {
        let skillStr = skill.trim();
        if (this.skills.indexOf(skillStr) === -1) {
            this.skills.push(skillStr);
        }
    }
}

MembersComponent

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

import { MemberService } from "./member.service";

interface Member {
    id: string;
    login: string;
    avatar_url: string;
}

@Component({
    selector: 'sl-members',
    template: `
    <h3>Angular Orgs Members</h3>
    <ul *ngIf="members">
      <li *ngFor="let member of members;">
        <p>
          <img [src]="member.avatar_url" width="48" height="48"/>
          ID:<span>{{member.id}}</span>
          Name: <span>{{member.login}}</span>
        </p>
      </li>
    </ul>
    `
})
export class MembersComponent implements OnInit {
    members: Member[];

    constructor(private memberService: MemberService) { }

    ngOnInit() {
        this.memberService.getMembers()
            .subscribe(data => {
                if (data) this.members = data;
            });
    }
}

MemberService

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class MemberService {
    constructor(private http: Http) { }

    getMembers() {
        return this.http
            .get(`https://api.github.com/orgs/angular/members?page=1&per_page=5`)
            .map(res => res.json())
    }
}

我有话说

除了本系列教程外,还有其它学习资源么?

本系列教程的主要目的是让初学者对 Angular 的相关基础知识,有一定的了解。除了本系列教程外,初学者还可以参考以下教程:

查看原文

TIS_OMiddle 收藏了文章 · 2019-06-28

spring进步 -- log4j的学习

一直感觉到log4j是使用比较混乱,今天抽空整理一下,以后方便使用

一、引用apache.log4j
使用maven进行lo4j的引用

<!-- Apache Log4j 1.2.17 -->
<dependency>
    <groupId>log4j</groupId>
    <artifactId>log4j</artifactId>
    <version>1.2.17</version>
</dependency>

其他版本也可以再资源库搜索添加
http://mvnrepository.com/arti...

二、再spring的bean中或者java类中加入log4j

/**
* lo4j引用demo
*/
@Controller
@RequestMapping("demoWeb")
public class DemoWebController {
    //使用方法1 -- 用this直接代表本类
    private final Logger logger = Logger.getLogger(this.getClass());
    //使用方法2 -- 使用用本类引用
    private final Logger logger = Logger.getLogger(DemoWebController.getClass());
}

三、配置log4j配置文件(引用的lo4j百度百科)
1、在配置resources或自定义路径下配置log4j.properties(命名自定义,只要spring能检索到就可以)
2、说明:
① 配置根Logger

Logger 负责处理日志记录的大部分操作。
其语法为:
log4j.rootLogger = [ level ] , appenderName, appenderName, …
其中,level 是日志记录的优先级,分为OFF、FATAL、ERROR、WARN、INFO、DEBUG、ALL或者自定义的级别。
Log4j建议只使用四个级别,优先级从高到低分别是ERROR、WARN、INFO、DEBUG。
通过在这里定义的级别,您可以控制到应用程序中相应级别的日志信息的开关。比如在这里定义了INFO级别,只有等于及高于这个级别的才进行处理,则应用程序中所有DEBUG级别的日志信息将不被打印出来。
ALL:打印所有的日志,OFF:关闭所有的日志输出。 
appenderName就是指定日志信息输出到哪个地方。可同时指定多个输出目的地。
示例:
log4j.rootLogger=info, stdout

② 配置日志信息输 Appender

##这里填写你输出的方式
og4j.appender.appenderName = {appender}

Log4j提供的appender有以下几种:

  • org.apache.log4j.ConsoleAppender(控制台)
  • org.apache.log4j.FileAppender(文件)
  • org.apache.log4j.DailyRollingFileAppender(每天产生一个日志文件)
  • org.apache.log4j.RollingFileAppender(文件大小到达指定尺寸的时候产生一个新的文件)
  • org.apache.log4j.WriterAppender(将日志信息以流格式发送到任意指定的地方)
  • org.apache.log4j.jdbc.JDBCAppender(向数据库发送日志)
  • org.apache.log4j.net.SMTPAppender(邮件发送日志)

示例:

##这里表示控制台的信息记录
og4j.appender.appenderName = org.apache.log4j.ConsoleAppender

## 下面是appender的基本options

##系统输出方式
log4j.appender.appenderName.Target = System.out
##生成文件路劲
log4j.appender.appenderName.File = E:\\file\\log\\qc.log
##追加方式 true为在信息后面追加  false为覆盖信息后输出
log4j.appender.appenderName.Append = true
##指定输出等级
log4j.appender.appenderName.Threshold = INFO 
##布局输出
log4j.appender.appenderName.layout = org.apache.log4j.PatternLayout

③置日志信息的格式(布局)

##这里填写你输出的方式
og4j.appender.appenderName.layout  = {style}

Log4j提供的style有以下几种:

  • org.apache.log4j.HTMLLayout(以HTML表格形式布局),
  • org.apache.log4j.PatternLayout(可以灵活地指定布局模式),
  • org.apache.log4j.SimpleLayout(包含日志信息的级别和信息字符串),
  • org.apache.log4j.TTCCLayout(包含日志产生的时间、线程、类别等等信息)

如果使用pattern布局就要指定的打印信息的具体格式ConversionPattern,打印参数如下:

  • %m 输出代码中指定的消息;
  • %M 输出打印该条日志的方法名;
  • %p 输出优先级,即DEBUG,INFO,WARN,ERROR,FATAL;
  • %r 输出自应用启动到输出该log信息耗费的毫秒数;
  • %c 输出所属的类目,通常就是所在类的全名;
  • %t 输出产生该日志事件的线程名;
  • %n 输出一个回车换行符,Windows平台为"rn”,Unix平台为"n”;
  • %d 输出日志时间点的日期或时间,默认格式为ISO8601,也可以在其后指定格式,比如:%d{yyyy-MM-dd HH:mm:ss,SSS},输出类似:2002-10-18 22:10:28,921;
  • %l 输出日志事件的发生位置,及在代码中的行数;
  • [QC]是log信息的开头,可以为任意字符,一般为项目简称。
    示例
##这里进行输出格式配置
log4j.appender.appenderName.layout.ConversionPattern= [QC] %p [%t] %C.%M(%L) | %m%n

输出的信息
[demo] DEBUG [main] DemoBeanFactory.getDemo(189) | this is output log

以上就完成了基本的log4j的配置和使用


下面进行一般示例配置:

### 设置日志等级  ###
log4j.rootLogger=DEBUG,CONSOLE,DATABASE,DAIY_LOG,DAIY_INFO_LOG,DAIY_ERROR_LOG

### CONSOLE 控制台输出 ###
log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender
log4j.appender.CONSOLE.Target=System.out
log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout
log4j.appender.CONSOLE.layout.ConversionPattern=[spring-demo][%p] [%-d{yyyy-MM-dd HH:mm:ss}] %C.%M(%L) | %m%n

### 将错误日志存到DATABASE中 ###
log4j.appender.DATABASE=org.apache.log4j.jdbc.JDBCAppender
##数据库地址
log4j.appender.DATABASE.URL=jdbc:mysql://127.0.0.1:3306/demo
##数据库桥
log4j.appender.DATABASE.driver=com.mysql.jdbc.Driver
##mysql用户名
log4j.appender.DATABASE.user=root
##mysql密码
log4j.appender.DATABASE.password=root
##讲console中的警告日志书写的到数据库中
log4j.appender.CONSOLE.Threshold=WARN
# INSERT INTO LOG4J (Message) VALUES ('[framework] %d - %c -%-4r [%t] %-5p %c %x - %m%n')
log4j.appender.DATABASE.sql=INSERT INTO LOG4J(stamp,thread, infolevel,class,messages) VALUES ('%d{yyyy-MM-dd HH:mm:ss}', '%t', '%p', '%l', '%m')
log4j.appender.DATABASE.layout=org.apache.log4j.PatternLayout
log4j.appender.DATABASE.layout.ConversionPattern=[spring-demo][%p] [%-d{yyyy-MM-dd HH:mm:ss}] %C.%M(%L) | %m%n

### DAIYLOG 每日信息 ###
log4j.appender.DAIY_LOG=org.apache.log4j.DailyRollingFileAppender
log4j.appender.DAIY_LOG.File=E:\\file\\log\\demo_all_log.log
log4j.appender.DAIY_LOG.Append=true
log4j.appender.DAIY_LOG.Threshold=ALL 
log4j.appender.DAIY_LOG.layout=org.apache.log4j.PatternLayout
log4j.appender.DAIY_LOG.layout.ConversionPattern=[spring-demo][%p] [%-d{yyyy-MM-dd HH:mm:ss}] %C.%M(%L) | %m%n

### DAIYLOG 每日INFO信息 ###
log4j.appender.DAIY_INFO_LOG=org.apache.log4j.DailyRollingFileAppender
log4j.appender.DAIY_INFO_LOG.File=E:\\file\\log\\demo_info_log.log
log4j.appender.DAIY_INFO_LOG.Append=true
log4j.appender.DAIY_INFO_LOG.Threshold=INFO 
log4j.appender.DAIY_INFO_LOG.layout=org.apache.log4j.PatternLayout
log4j.appender.DAIY_INFO_LOG.layout.ConversionPattern=[spring-demo][%p] [%-d{yyyy-MM-dd HH:mm:ss}] %C.%M(%L) | %m%n

### DAIYLOG 每日ERROR信息 ###
log4j.appender.DAIY_ERROR_LOG=org.apache.log4j.DailyRollingFileAppender
log4j.appender.DAIY_ERROR_LOG.File=E:\\file\\log\\demo_error_log.log
log4j.appender.DAIY_ERROR_LOG.Append=true
log4j.appender.DAIY_ERROR_LOG.Threshold=ERROR 
log4j.appender.DAIY_ERROR_LOG.layout=org.apache.log4j.PatternLayout
log4j.appender.DAIY_ERROR_LOG.layout.ConversionPattern=[spring-demo][%p] [%-d{yyyy-MM-dd HH:mm:ss}] %C.%M(%L) | %m%n

自定义等后续进行补充和完善


概念引用:https://baike.baidu.com/item/...

查看原文

TIS_OMiddle 收藏了文章 · 2019-06-11

用 Vue 开发自己的 Chrome 扩展程序

翻译:疯狂的技术宅

原文:https://www.sitepoint.com/bui...

未经允许严禁转载

浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务,例如阻止广告,管理密码,组织标签,改变网页的外观和行为等等。

好消息是浏览器扩展并不难写。可以用你已经熟悉的 Web 技术(HTML、CSS 和 JavaScript)创建 —— 就像普通网页一样。但是与网页不同的是,扩展程序可以访问许多特定于浏览器的 API,这才是有趣的地方。

在本教程中,我将向你展示如何为 Chrome 构建一个能够改变新标签页行为的简单扩展。这个扩展程序的 JavaScript 部分,我将使用 Vue.js 框架,因为它将允许我们快速启动并运行,而且用 vue 工作是很有趣的。

本教程的代码可以在GitHub上找到

Chrome 扩展程序的基础知识

Chrome扩展程序的核心部分是 manifest 文件后台脚本。manifest 文件采用JSON格式,提供有关扩展的重要信息,例如其版本、资源或所需的权限。后台脚本允许扩展对特定的浏览器事件做出反应,例如创建新选项卡。

为了演示这些概念,让我们先写一个“Hello,World!” Chrome 扩展。

创建一个名为 hello-world-chrome 的新文件夹和两个文件:manifest.jsonbackground.js

mkdir hello-world-chrome
cd hello-world-chrome
touch manifest.json background.js

打开 manifest.json 并添加以下代码:

{
  "name": "Hello World Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

nameversionmanifest_version 都是必填字段。 nameversion 字段可以是你想要的任何内容; manifest version 应设置为2(从Chrome 18开始)。

background 允许我们注册一个后台脚本, 在scripts 后面的数组中列出。除非扩展需要用 chrome.webRequest API来阻止或修改网络请求,否则 persistent 键应设置为 false

将以下代码添加到 background.js ,使浏览器在安装扩展时弹出出 hello 对话框:

chrome.runtime.onInstalled.addListener(() => {
  alert('Hello, World!');
});

最后安装扩展程序。打开 Chrome 并在地址栏中输入 chrome://extensions/。你应该看到一个显示已安装扩展程序的页面。

由于我们要从文件(而不是Chrome网上应用店)安装自己的扩展程序,因此需要使用页面右上角的切换按钮来激活开发者模式。这应该添加一个额外的菜单栏,其中包含 Load unpacked选项。单击此按钮并选择你之前创建的 hello-world-chrome 文件夹。单击打开,应该能够看到已安装的扩展,并弹出“Hello,World!”窗口。

1543919896chrome-ext-1.jpg
恭喜!你刚刚制作了一个 Chrome 扩展程序。

覆盖 Chrome 的新标签页

为了在打开新选项卡时迎接我们的是自己的扩展程序。可以通过使用 Override Pages API 来完成此操作。

注意:在你取得进展之前,请务必停用其他能够覆盖 Chrome 新标签页的扩展程序。一次只允许一个扩展改变这种行为。

首先创建一个要显示的页面,而不是新的标签页。我们称之为 tab.html。它应该与清单文件和后台脚本位于同一文件夹中:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My New Tab Page!</title>
</head>
<body>
  <h1>My New Tab Page!</h1>
  <p>You can put any content here you like</p>
</body>
</html>

接下来需要让扩展知道页面的存在。可以通过在清单文件中指定 chrome_url_overrides 来实现,如下所示:

"chrome_url_overrides": {
  "newtab": "tab.html"
}

最后,你需要重新加载扩展才能使更改生效。你可以通过在 Chrome 的扩展程序页面上单击 Hello World 扩展程序的 reload 图标来执行此操作。

1543921059chrome-ext-2.jpg
现在,当你打开新标签页时,你的自定义消息会出现。

将Vue添加到扩展

现在我们有一个非常基本的扩展,接下来要实现剩下的需功能了。当用户打开新标签页时,我希望扩展能够:

  • 从精彩的笑话网站 icanhazdadjoke.com 获取一个笑话。
  • 以良好的格式向用户显示该笑话。
  • 显示用户喜欢该笑话的按钮。这样可以把笑话保存到 chrome.storage
  • 显示一个按钮,供用户查看已收藏的笑话。

当然你也可以用纯 JavaScript 或像 jQuery 这样的库来完成所有这些 —— 你开心就好!

但是出于本教程的目的,我将用 Vue 和令人敬畏的 vue-web-extension 样板来实现此功能。

用 Vue 可以让我又快又好地编写更有条理的代码。正如我们所看到的,样板文件提供了几个脚本,可以在构建 Chrome 扩展程序时解决一些痛苦的常见任务(例如:每当你进行更改时都必须重新加载扩展程序)。

vue-web-extension-boilerplate

本节假定你的计算机上安装了 Node 和 npm。如果不是这样,你可以到 https://nodejs.org/en/ 获取相关二进制文件,或者你可以使用版本管理器。我建议使用版本管理器。

我们还需要安装 Vue CLI@vue/cli-init package

npm install -g @vue/cli
npm install -g @vue/cli-init

完成后,让我们得到样板的副本:

vue init kocal/vue-web-extension new-tab-page

这将打开一个向导,询问你一堆问题。为了保证本教程的重点,我把回答列出来:

? Project name new-tab-page
? Project description A Vue.js web extension
? Author James Hibbard <jim@example.com>
? License MIT
? Use Mozilla's web-extension polyfill? No
? Provide an options page? No
? Install vue-router? No
? Install vuex? No
? Install axios? Yes
? Install ESLint? No
? Install Prettier? No
? Automatically install dependencies? npm

你可以根据自己的喜好调整答案,但是你一定要安装 axios。我们会用它来获取笑话。

接下来,切换到项目目录并安装依赖项:

cd new-tab-page
npm install

然后就可以用样板提供的脚本构建我们的新扩展了:

npm run watch:dev

这会将扩展构建到项目根目录中的 dist 文件夹中,来进行开发并监视更改。

要将扩展程序添加到 Chrome,请执行上述相同的步骤,要选择 dist 文件夹作为扩展程序目录。如果一切按计划进行,那么当扩展程序初始化时,你应该看到“Hello world!”消息。

项目设置

让我们花一点时间来看看样板给了我们些什么。当前文件夹结构应如下所示:

.
├── dist
│   └── <the built extension>
├── node_modules
│   └── <one or two files and folders>
├── package.json
├── package-lock.json
├── scripts
│   ├── build-zip.js
│   └── remove-evals.js
├── src
│   ├── background.js
│   ├── icons
│   │   ├── icon_128.png
│   │   ├── icon_48.png
│   │   └── icon.xcf
│   ├── manifest.json
│   └── popup
│       ├── App.vue
│       ├── popup.html
│       └── popup.js
└── webpack.config.js

在项目根目录中可以看到,样板文件正在使用 webpack。这很好,因为这为我们的后台脚本提供了 Hot Module Reloading

src文件夹包含我们将用于扩展的所有文件。manifest 文件和 background.js 对于我们来说是熟悉的,但也要注意包含Vue 组件的 popup 文件夹。当样板文件将扩展构建到 dist 文件夹中时,它将通过 vue-loader 管理所有 .vue 文件并输出一个浏览器可以理解的 JavaScript 包。

src 文件夹中还有一个 icons 文件夹。如果你看一眼 Chrome 的工具栏,会看到我们的扩展程序的新图标(也被称为 browser action)。这就是从此文件夹中拿到的。如果单击它,你应该会看到一个弹出窗口,显示“Hello world!” 这是由 popup/App.vue 创建的。

最后,请注 scripts 文件夹的两个脚本:一个用于删除 eval 用法以符合 Chrome Web Store 的内容安全策略,另一个用于当你要把扩展上传到Chrome Web Store时将其打包到 .zip 文件中,。

package.json 文件中还声明了各种脚本。我们将用 npm run watch:dev 来开发扩展,然后使用 npm run build-zip 生成一个ZIP文件以上传到 Chrome Web Store。

在新标签页中使用 Vue 组件

首先从 background.js 中删除烦人的 alert 语句。

src 文件夹中创建一个新的 tab 文件夹来存放新标签页的代码。我们将在这个新文件夹中添加三个文件 —— App.vuetab.htmltab.js

mkdir src/tab
touch src/tab/{App.vue,tab.html,tab.js}

打开 tab.html 并添加以下内容:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>New Tab Page</title>
  <link rel="stylesheet" href="tab.css">
</head>
<body>
  <div id="app"></div>
  <script data-original="tab.js"></script>
</body>
</html>

这里没什么特别的。这是一个简单的 HTML 页面,它将保存我们的 Vue 实例。

接下来在 tab.js 中添加:

import Vue from 'vue';
import App from './App';

new Vue({
  el: '#app',
  render: h => h(App)
});

在这里导入 Vue,用它为元素传递一个选择器,然后告诉它渲染 App 组件。

最后在 App.vue 中写如下代码:

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data () {
    return {
      message: "My new tab page"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 20px;
}
</style>

在使用这个新标签页之前,我们需要更新 manifest 文件:

{
  "name":"new-tab-page",
  ...
  "chrome_url_overrides": {
    "newtab": "tab/tab.html"
  }
}

为了使它们可用于扩展,我们还需要让样板编译我们的文件并复制到 dist 文件夹。

像下面这样修改 webpack.config.js,更新entryplugins键:

entry: {
  'background': './background.js',
  'popup/popup': './popup/popup.js',
  'tab/tab': './tab/tab.js'
}
plugins: [
  ...
  new CopyWebpackPlugin([
    { from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
    { from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml },
    { from: 'tab/tab.html', to: 'tab/tab.html', transform: transformHtml },
    ...
  })

你需要重新启动 npm run watch:dev 任务才能使这些更改生效。完成此操作后,重新加载扩展程序并打开新选项卡。你应该会看到“My new tab page”。

1543929657chrome-ext-3.jpg

获取并显示笑话

好的,我们已经覆盖了 Chrome 的新标签页,并且将其替换为了 mini Vue app。但是我们要做的不仅仅是显示一条消息。

更改 src/tab/App.vue 中的模板部分如下:

<template>
  <div>
    <div v-if="loading">
      <p>Loading...</p>
    </div>
    <div v-else>
      <p class="joke">{{ joke }}</p>
    </div>
  </div>
</template>

<script> 部分更改为如下代码:

<script>
import axios from 'axios';

export default {
  data () {
    return {
      loading: true,
      joke: "",
    }
  },
  mounted() {
    axios.get(
      "https://icanhazdadjoke.com/",
      { 'headers': { 'Accept': 'application/json' } }
    )
      .then(res => {
        this.joke = res.data.joke
        this.loading = false;
      });
  }
}
</script>

最后,将 <style> 部分更改为如下代码:

<style>
body {
  height: 98vh;
  text-align: center;
  color: #353638;
  font-size: 22px;
  line-height: 30px;
  font-family: Merriweather,Georgia,serif;
  background-size: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.joke {
  max-width: 800px;
}
</style>

如果你正在运行 npm run watch:dev 任务,则扩展程序会自动重新加载,并且每当你打开新标签页时都会看到一个笑话。

1544265269chrome-ext-4.jpg

接下来花点时间来了解一下自己都做了些什么。

在模板中,我们使用 v-if 块来显示加载消息或笑话,具体取决于 loading 的状态。最初它被设置为 true(显示加载消息),然后我们的脚本将触发 Ajax 请求来检索笑话。一旦 Ajax 请求完成,loading 属性将被设置为 false,导致组件被重新渲染并显示笑话。

<script> 部分,我们导入了 axios,然后声明了几个数据属性——前面提到的 loading 属性和一个 joke 属性来保存这个笑话。然后使用了 mount生命周期钩子,一旦我们的 Vue 实例被挂载就会触发,向 joke API 发出 Ajax 请求。请求完成后,更新两个数据属性使组件重新渲染。

到目前为止还挺好。

将笑话持持久化到 Chrome Storage

接下来,添加一些能够让用户喜欢一个笑话和列出喜欢的笑话列表的按钮。由于我们将使用 Chrome’s storage API 来保存这些笑话,所以可能需要添加第三个按钮来删除 storage 中的笑话。

将按钮添加到 v-else 块:

<div v-else>
  <p class="joke">{{ joke }}</p>

  <button @click="likeJoke" :disabled="likeButtonDisabled">Like Joke</button>
  <button @click="logJokes" class="btn">Log Jokes</button>
  <button @click="clearStorage" class="btn">Clear Storage</button>
</div>

没有什么令人兴奋的东西了。请注意我们将类似按钮的 disabled 属性绑定到 Vue 实例上的数据属性来确定其状态。这是因为用户不应该多次喜欢一个笑话。

接下来,将 click handler 和 Like Button Disabled 添加到脚本部分:

export default {
  data () {
    return {
      loading: true,
      joke: "",
      likeButtonDisabled: false
    }
  },
  methods: {
    likeJoke(){
      chrome.storage.local.get("jokes", (res) => {
        if(!res.jokes) res.jokes = [];
        res.jokes.push(this.joke)
        chrome.storage.local.set(res);
        this.likeButtonDisabled = true;
      });
    },
    logJokes(){
      chrome.storage.local.get("jokes", (res) => {
        if(res.jokes) res.jokes.map(joke => console.log(joke))
      });
    },
    clearStorage(){
      chrome.storage.local.clear();
    }
  },
  mounted() { ... }
}

在这里,我们声明了三个新方法来处理这三个新按钮。

likeJoke 方法在 Chrome 的存储中查找 jokes 属性。如果它不存在(也就是说,用户尚未喜欢一个笑话),会将其初始化为空数组。然后它将当前的笑话推送到此数组并将其保存到 storage。最后,将 likeButtonDisabled 数据属性设置为 true,并禁用 like 按钮。

logJokes 方法还在 Chrome storage 中查找 jokes 属性。如果找到了,会遍历其所有条目并将它们输出到控制台。

clearStorage 方法负责清除数据。

继续在扩展中调整这个新功能,直到自己满意。

1544267933chrome-ext-5.jpg

为扩展做一些美化

它能够工作了,但是按钮是很丑,页面也有点简单。下面就要给扩展做一些润色。

下一步,安装 vue-awesome 库。它能够使我们在页面上使用 Font Awesome 图标,并使这些按钮看起来更漂亮一些:

npm install vue-awesome

src/tab/tab.js 中对库进行注册:

import Vue from 'vue';
import App from './App';
import "vue-awesome/icons";
import Icon from "vue-awesome/components/Icon";

Vue.component("icon", Icon);

new Vue({
  el: '#app',
  render: h => h(App)
});

修改模板:

<template>
  <div>
    <div v-if="loading" class="centered">
      <p>Loading...</p>
    </div>
    <div v-else>
      <p class="joke">{{ joke }}</p>

      <div class="button-container">
        <button @click="likeJoke" :disabled="likeButtonDisabled" class="btn"><icon name="thumbs-up"></icon></button>
        <button @click="logJokes" class="btn"><icon name="list"></icon></button>
        <button @click="clearStorage" class="btn"><icon name="trash"></icon></button>
      </div>
    </div>
  </div>
</template>

最后,让我们为按钮添加更多样式,并添加一张图片:

<style>
body {
  height: 98vh;
  text-align: center;
  color: #353638;
  font-size: 22px;
  line-height: 30px;
  font-family: Merriweather,Georgia,serif;
  background: url("https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/12/1544189726troll-dad.png") no-repeat 1% 99%;
  background-size: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.joke {
  max-width: 800px;
}

.button-container {
  position: absolute;
  right: 0px;
  top: calc(50% - 74px);
}

.btn {
  background-color: #D8D8D8;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  display: block;
  margin-bottom: 5px;
  width: 50px;
}

.btn:hover {
  background-color: #C8C8C8;
}

.btn:disabled {
  background-color: #909090;
}
</style>

重新加载扩展并打开一个新标签,你应该看到这样的东西。

1544268608chrome-ext-6.jpg

将扩展程序上传到 Chrome Web Store

如果想让其他人也可以使用你的扩展程序,可以通过 Chrome Web Store 做到。

首先你需要有一个 Google 帐户,可以用该帐户登录 Developer Dashboard 。系统会提示你输入开发人员详细信息,在发布第一个应用程序之前,你必须支付 5 美元的开发人员注册费(通过信用卡)。

接下来,你需要为自己的应用创建一个 ZIP 文件。你可以通过 npm run build-zip 在本地执行这项操作。这会在项目根目录中创建一个名为 dist-zip 的文件夹,其中包含准备上传到 Web Store 的 ZIP 文件。

对于简单的小扩展,这就够了。但是,在你上传自己的扩展之前,请务必阅读官方 Publish in the Chrome Web Store 指南。

总结

在本教程中,我重点介绍了 Chrome 扩展程序的主要部分,并展示了如何用在 Vue.js 中 vue-web-extension 样板构建扩展程序,最后讲解了如何将扩展上传到 Web Store。

希望你喜欢本教程,并用它指导你始构建自己的 Chrome 扩展。


本文首发微信公众号:前端先锋

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章:


查看原文

TIS_OMiddle 回答了问题 · 2019-06-06

解决mpvue编译后 样式文件vendor.wxss被引用两次

同样的经历。。我是用了scss,想在main.js导入全局样式main.scss,结果发现每个wxss文件都去导入了。
我main.scss目的是使用全局样式,但实际上App.vue这个文件的<style></style>片段,对应编译后的app.wxss,而app.wxss的样式会应用到整个小程序当中,所以我们只要在App.vue中写全局样式,并且别用scoped就行了。只要不在main.js中去全局引入样式,目前还没发现其他问题,表现和想象中一致

关注 4 回答 3

TIS_OMiddle 收藏了文章 · 2019-06-06

自定义自己的vue-cli模板

自定义自己的vue-cli模板

在使用vue-cli的过程中,常用的webpack模板只为我们提供最基础的内容,但每次需要新建一个项目的时候就需要把之前项目的一些配置都搬过来,这样就造成挺大的不方便,如果是作为一个团队,那么维护一个通用的模板,我认为是挺有必要的。
例如下面是我常用构建项目的目录。

src
├─api  //接口
├─assets //图片
├─components  //公用组件
├─css  //样式 主要是scss
├─js //第三方以及工具类
├─page  //页面
├─router //路由
└─store  //vuex

下面说下怎么自定义自己的vue-cli模板

fork一个自己的模板

https://github.com/vuejs-templates/webpack fork 一个库,再提交自己的修改到【自己的分支】,因为我们大部分内容还是在这个基础上做修改的。

关于vue-cli的源码分析可以参考下这个文章从vue-cli源码学习如何写模板

vuejs-templates/webpack目录如下,

│  .gitignore
│  circle.yml
│  deploy-docs.sh
│  LICENSE
│  meta.js   //该文件必须导出为一个对象, 用于定义模板的 meta 信息
│  package.json
│  README.md
│  test.sh
├─docs  // 一些介绍该模板一些模块的文档
└─template  //模板的内容


D:\work\nodetest\webpack>

meta.js

meta.js 主要是定义模板的一些配置, 目前可定义的字段如下:

  • prompts<Object>: 收集用户自定义数据

  • filters<Object>: 根据条件过滤文件

  • completeMessage<String>: 模板渲染完成后给予的提示信息, 支持 handlebars 的 mustaches 表达式

  • complete<Function>: 模板渲染完成后的回调函数, 优先于 completeMessage

  • helpers<Object>: 自定义的 Handlebars 辅助函数

prompts

有用过vue-cli的同学应该有看过下面的这个图

image

看下 prompts的代码

 "prompts": {
    "name": {  //项目名
      "type": "string",
      "required": true,
      "message": "Project name"  
    },
    "description": {  
      "type": "string",
      "required": false,
      "message": "Project description",
      "default": "A Vue.js project"
    },
    "author": {
      "type": "string",
      "message": "Author"
    },
    "router": {   
      "type": "confirm",
      "message": "Install vue-router?"
    },
    ...   
 }

所有的用户输入完成之后, template 目录下的所有文件将会用 Handlebars了解相关的语法点这里) 进行渲染. 用户输入的数据会作为模板渲染时的使用数据,例如,在cmd确认使用router后,那么main.js就会import router,main.js中源码:

{{#router}}
import router from './router'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
//类似 {{#if_eq lintConfig "airbnb"}};{{/if_eq}}是启用lint后一些语法的检查

{{/router}}


因为开发常用到vuex,我们可以加入vuex,修改meta.js

 "vuex":{
      "type": "confirm",
      "message": "Install vuex?"
    },

安装过程中,就会询问是否安装vuex

helper

上面的if_eq,还有源码中的unless_eq是原本vue cli中注册的那个辅助函数,在vue-cli中的generate.js:

# vue-cli/lib/generate.js

//...

// register handlebars helper
Handlebars.registerHelper('if_eq', function (a, b, opts) {
  return a === b
    ? opts.fn(this)
    : opts.inverse(this)
})

Handlebars.registerHelper('unless_eq', function (a, b, opts) {
  return a === b
    ? opts.inverse(this)
    : opts.fn(this)
})

类似的,你也可以自定义一些函数,方便你自己去处理一些数据,在meta.jshelpers对象中可以加入自己的方法,如源码中就有注册一个if_or的方法,你在文件中就可以用{{#if_or a b}}{{/if_or}}去使用

"helpers": {
    "if_or": function (v1, v2, options) {
      if (v1 || v2) {
        return options.fn(this);
      }

      return options.inverse(this);
    }
  },

filters

filters 是根据条件过滤文件,源码:

 "filters": {
    ".eslintrc.js": "lint",
    ".eslintignore": "lint",
    "config/test.env.js": "unit || e2e",
    "test/unit/**/*": "unit",
    "build/webpack.test.conf.js": "unit",
    "test/e2e/**/*": "e2e",
    "src/router/**/*": "router"  //例如上面的 router 为true的时候,就会加入这个目录
  },

同样,这里我可以加入自己的vuex目录,当,vuextrue的时候,会导入这个目录


 "filters": {
    ".eslintrc.js": "lint",
    ".eslintignore": "lint",
    "config/test.env.js": "unit || e2e",
    "test/unit/**/*": "unit",
    "build/webpack.test.conf.js": "unit",
    "test/e2e/**/*": "e2e",
    "src/store/**/*": "vuex",  //加入自己的目录
    "src/router/**/*": "router"
  },

然后在main.js引入vuex

{{#vuex}}  //vuex为true的时候就会写入这些
import Vuex from 'vuex'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
import store from  './store/store'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
Vue.use(Vuex){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
{{/vuex}}

//store.js 文件是我写vuex的入口

new Vue({
  el: '#app',
  {{#router}}
  router,
  {{/router}}
  {{#vuex}}
  store,
  {{/vuex}}
  {{#if_eq build "runtime"}}
  render: h => h(App){{#if_eq lintConfig "airbnb"}},{{/if_eq}}
  {{/if_eq}}
  {{#if_eq build "standalone"}}
  template: '<App/>',
  components: { App }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
  {{/if_eq}}
}){{#if_eq lintConfig "airbnb"}};{{/if_eq}}

还有在template/package.json中也要加入vuex

 "dependencies": {
    "vue": "^2.5.2"{{#router}},
    "vue-router": "^3.0.1"{{/router}}{{#vuex}},
    "vuex": "^2.1.1"{{/vuex}}

  },

后续的话只需要将自己需要的文件跟文件夹,加入到template/src,例如,我这里加入一个询问是否是移动端的,是移动端的话,会引入 lib-flexible.js 以及相关配置的scss文件

  "isMobile":{
        "type": "confirm",
        "message": "is Mobile project?"
    },

最后,提交到github自己的分支上,就可以使用了

vue init jamielhf/webpack#template1 name

github地址

https://github.com/jamielhf/webpack/tree/template1

参考:

vue-cli webpack的配置详解
从vue-cli源码学习如何写模板

查看原文

TIS_OMiddle 收藏了文章 · 2019-05-23

免费的编程中文书籍索引(2018第三版)

之前我在 github 上整理了来一份:free-programming-books-zh_CN(免费的计算机编程类中文书籍)

截至目前为止,已经在 GitHub 收获了 40000 多的 stars,有 90 多人发了 600 多个 Pull Requests 和 issues。

在收集的过程中,有不少书的链接失效了,也有不少书的链接变更了,感谢项目的参与者和维护者们即使更正链接。今天我又重新核准了文章中的链接地址,发布了 3.0 版。

欢迎大家提 PR: https://github.com/justjavac/...

操作系统

智能系统

分布式系统

编译原理

函数式概念

计算机图形学

WEB服务器

版本控制

编辑器

NoSQL

PostgreSQL

MySQL

管理和监控

项目相关

设计模式

Web

大数据

编程艺术

其它

Android

APP

AWK

C/C++

C#

Clojure

<h2 id="csshtml">CSS/HTML</h2>

Dart

Elixir

Erlang

Fortran

Go

Groovy

Haskell

iOS

Java

JavaScript

LaTeX

LISP

Lua

OCaml

Perl

PHP

Prolog

Python

R

Ruby

Rust

Scala

Shell

Swift

读书笔记及其它

最后,欢迎大家提 PR:https://github.com/justjavac/... (提交之前请确保书的版权)

查看原文

TIS_OMiddle 收藏了文章 · 2019-05-23

V8引擎深入研究目录贴

对于每个前端程序员来讲都有一个终极理想,那就是搞懂 javascript 引擎是如何工作的。

从我的网络 ID(justjavac)可以看出来,当我开始使用这个 ID 的时候并不是一个前端程序员,我主攻的语言是 java 和 C,当我开始决定阅读 JVM 源码时,他们告诉我说当时进步最大、性能提升最快的是 V8,于是就走上了前端的不归路。

javascript 性能经过了两次飞跃:

javascript 性能经过了两次飞跃

第 1 次飞跃是 2008 年 V8 发布,第 2 次则是 2017 年的 WebAssembly。不过 WebAssembly 到底能不能掀起前端的波澜还是未知数,但是 V8 对前端的贡献大家都有目共睹。

从去年底开始连载《V8源码分析》,记录一下自己学习 V8 源码的点点滴滴。

此文是索引贴,随时更新

这几天 SF 增加了新的板块——直播。我也收到了官方的邀请。4月15(星期六)晚8点和大家一起聊聊 V8 引擎:前端程序员应该懂点 V8 知识 - SegmentFault 讲堂

最后是鸡汤时间:“精通 one,学习 another,关注 next”。

查看原文

TIS_OMiddle 提出了问题 · 2019-05-22

vue中引入virtual dom除了更多功能还有什么更深的含义吗?

现在疑问主要就是我觉得vue通过数据劫持+同时绑定真实dom节点,应该能够做到现有的效果吧?当数据变化异步更新到实际的dom节点,应该可以直接锁定dom节点并完成dom操作,似乎没必要引入virtual dom来构建一棵树去diff和patch。而且vue也是2.0以后才引入的,所以说以前的vue应该并不需要virtual dom就能实现数据绑定mvvm吧?

vue引入virtual dom,我了解到的用处有提供render函数、支持jsx、服务器渲染这三个,所以说是不是就是主要为了这三个功能而引入?对原来数据劫持然后更新到真实dom节点这一流程是否有什么影响呢?

关注 2 回答 2

TIS_OMiddle 收藏了文章 · 2019-05-20

浅谈浏览器多进程与JS线程

引言

一直对浏览器的进程、线程的运行一无所知,经过一次的刷刷刷相关的博客之后,对其有了初步的了解,是时候该总结一波了。

进程、线程之间的关系

一个进程有一个或多个线程,线程之间共同完成进程分配下来的任务。打个比方:

  • 假如进程是一个工厂,工厂有它的独立的资源
  • 工厂之间相互独立
  • 线程是工厂中的工人,多个工人协作完成任务
  • 工厂内有一个或多个工人
  • 工人之间共享空间

再完善完善概念:

  • 工厂的资源 -> 系统分配的内存(独立的一块内存)
  • 工厂之间的相互独立 -> 进程之间相互独立
  • 多个工人协作完成任务 -> 多个线程在进程中协作完成任务
  • 工厂内有一个或多个工人 -> 一个进程由一个或多个线程组成
  • 工人之间共享空间 -> 同一进程下的各个线程之间共享程序的内存空间(包括代码段、数据集、堆等)

进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位),线程是cpu调度的最小单位(线程是建立在进程的基础上的一次程序运行单位)。

浏览器内的进程

知道了进程与线程之间的关系之后,下面是浏览器与进程的关系了。首先,浏览器是多进程的,之所以浏览器能够运行,是因为系统给浏览器分配了资源,如cpu、内存,简单的说就是,浏览器每打开一个标签页,就相当于创建了一个独立的浏览器进程。例如我们查看chrome里面的任务管理器。

注意: 在这里浏览器应该也有自己的优化机制,有时候打开多个tab页后,可以在Chrome任务管理器中看到,有些进程被合并了(譬如打开多个空白标签页后,会发现多个空白标签页被合并成了一个进程),所以每一个Tab标签对应一个进程并不一定是绝对的。

除了浏览器的标签页进程之外,浏览器还有一些其他进程来辅助支撑标签页的进程,如下:
① Browser进程:浏览器的主进程(负责协调、主控),只有一个。作用有

  • 负责浏览器界面显示,与用户交互。如前进,后退等
  • 负责各个页面的管理,创建和销毁其他进程
  • 网络资源的管理,下载等

② 第三方插件进程:每种类型的插件对应一个进程,仅当使用该插件时才创建
③ GPU进程:最多一个,用于3D绘制等
④ 浏览器渲染进程(浏览器内核),Renderer进程,内部是多线程的,也就是我们每个标签页所拥有的进程,互不影响,负责页面渲染,脚本执行,事件处理等

如下图:

图片描述

浏览器内核

浏览器内核,即我们的渲染进程,有名Renderer进程,我们页面的渲染,js的执行,事件的循环都在这一进程内进行,也就是说,该进程下面拥有着多个线程,靠着这些现成共同完成渲染任务。那么这些线程是什么呢,如下:

① 图形用户界面GUI渲染线程

  • 负责渲染浏览器界面,包括解析HTML、CSS、构建DOM树、Render树、布局与绘制等
  • 当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行

② JS引擎线程

  • JS内核,也称JS引擎,负责处理执行javascript脚本
  • 等待任务队列的任务的到来,然后加以处理,浏览器无论什么时候都只有一个JS引擎在运行JS程序

③ 事件触发线程

  • 听起来像JS的执行,但是其实归属于浏览器,而不是JS引擎,用来控制时间循环(可以理解,JS引擎自己都忙不过来,需要浏览器另开线程协助)
  • 当JS引擎执行代码块如setTimeout时(也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等),会将对应任务添加到事件线程中
  • 当对应的事件符合触发条件被触发时,该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理
  • 注意:由于JS的单线程关系,所以这些待处理队列中的事件都得排队等待JS引擎处理(当JS引擎空闲时才会去执行)

④ 定时触发器线程

  • setIntervalsetTimeout所在线程
  • 定时计时器并不是由JS引擎计时的,因为如果JS引擎是单线程的,如果JS引擎处于堵塞状态,那会影响到计时的准确
  • 当计时完成被触发,事件会被添加到事件队列,等待JS引擎空闲了执行
  • 注意:W3C的HTML标准中规定,setTimeout中低与4ms的时间间隔算为4ms

⑤ 异步HTTP请求线程

  • 在XMLHttpRequest在连接后新启动的一个线程
  • 线程如果检测到请求的状态变更,如果设置有回调函数,该线程会把回调函数添加到事件队列,同理,等待JS引擎空闲了执行

浏览器内核,放图加强记忆:

图片描述

为什么JS引擎是单线程的

JavaScript作为一门客户端的脚本语言,主要的任务是处理用户的交互,而用户的交互无非就是响应DOM的增删改,使用事件队列的形式,一次事件循环只处理一个事件响应,使得脚本执行相对连续。如果JS引擎被设计为多线程的,那么DOM之间必然会存在资源竞争,那么语言的实现会变得非常臃肿,在客户端跑起来,资源的消耗和性能将会是不太乐观的,故设计为单线程的形式,并附加一些其他的线程来实现异步的形式,这样运行成本相对于使用JS多线程来说降低了很多。

浏览器内核中线程之间的关系

GUI渲染线程与JS引擎线程互斥

因为JS引擎可以修改DOM树,那么如果JS引擎在执行修改了DOM结构的同时,GUI线程也在渲染页面,那么这样就会导致渲染线程获取的DOM的元素信息可能与JS引擎操作DOM后的结果不一致。为了防止这种现象,GUI线程与JS线程需要设计为互斥关系,当JS引擎执行的时候,GUI线程需要被冻结,但是GUI的渲染会被保存在一个队列当中,等待JS引擎空闲的时候执行渲染。
由此也可以推出,如果JS引擎正在进行CPU密集型计算,那么JS引擎将会阻塞,长时间不空闲,导致渲染进程一直不能执行渲染,页面就会看起来卡顿卡顿的,渲染不连贯,所以,要尽量避免JS执行时间过长。

JS引擎线程与事件触发线程、定时触发器线程、异步HTTP请求线程

事件触发线程、定时触发器线程、异步HTTP请求线程三个线程有一个共同点,那就是使用回调函数的形式,当满足了特定的条件,这些回调函数会被执行。这些回调函数被浏览器内核理解成事件,在浏览器内核中拥有一个事件队列,这三个线程当满足了内部特定的条件,会将这些回调函数添加到事件队列中,等待JS引擎空闲执行。例如异步HTTP请求线程,线程如果检测到请求的状态变更,如果设置有回调函数,回调函数会被添加事件队列中,等待JS引擎空闲了执行。
但是,JS引擎对事件队列(宏任务)与JS引擎内的任务(微任务)执行存在着先后循序,当每执行完一个事件队列的时间,JS引擎会检测内部是否有未执行的任务,如果有,将会优先执行(微任务)。

WebWorker

因为JS引擎是单线程的,当JS执行时间过长会页面阻塞,那么JS就真的对CPU密集型计算无能为力么?

所以,后来HTML5中支持了 Web Worker

来自MDN的官方解释

Web Workers 使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务,从而允许主(通常是UI)线程运行而不被阻塞/放慢。

注意点:

  • WebWorker可以想浏览器申请一个子线程,该子线程服务于主线程,完全受主线程控制。
  • JS引擎线程与worker线程间通过特定的方式通信(postMessage API,需要通过序列化对象来与线程交互特定的数据)

所以,如果需要进行一些高耗时的计算时,可以单独开启一个WebWorker线程,这样不管这个WebWorker子线程怎么密集计算、怎么阻塞,都不会影响JS引擎主线程,只需要等计算结束,将结果通过postMessage传输给主线程就可以了。

另外,还有个东西叫 SharedWorker,与WebWorker在概念上所不同。

  • WebWorker 只属于某一个页面,不会和其他标签页的Renderer进程共享,WebWorker是属于Renderer进程创建的进程。
  • SharedWorker 是由浏览器单独创建的进程来运行的JS程序,它被所有的Renderer进程所共享,在浏览器中,最多只能存在一个SharedWorker进程。

SharedWorker由进程管理,WebWorker是某一个Renderer进程下的线程。

浏览器的渲染流程

每个浏览器内核的渲染流程不一样,下面我们主要以webkit为主。
首先是渲染的前奏:

  1. 浏览器输入url,浏览器主进程接管,开了一个下载线程
  2. 然后进行HTTP请求(DNS查询、IP寻址等等),等待响应,开始下载响应报文。
  3. 将下载完的内容转交给Renderer进程管理
  4. 开始渲染...

在说渲染之前,需要理解一些概念:

  • DOM Tree: 浏览器将HTML解析成树形的数据结构。
  • CSS Rule Tree:浏览器将CSS解析成树形的数据结构。
  • Render Tree:DOM树和CSS规则树合并后生产Render树。
  • layout:有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系,从而去计算出每个节点在屏幕中的位置。
  • painting: 按照算出来的规则,通过显卡,把内容画到屏幕上。
  • reflow(回流):当浏览器发现某个部分发生了点变化影响了布局,需要倒回去重新渲染,内行称这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下,依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。
  • repaint(重绘):改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。

注意:display:none的节点不会被加入Render Tree,而visibility: hidden则会,所以display:none会触发reflowvisibility: hidden会触发repaint

浏览器内核拿到响应报文之后,渲染大概分为以下步骤

  1. 解析html生产DOM树。
  2. 解析CSS规则。
  3. 根据DOM Tree和CSS Tree生成Render Tree。
  4. 根据Render树进行layout,负责各个元素节点的尺寸、位置计算。
  5. 绘制Render树(painting),绘制页面像素信息。
  6. 浏览器会将各层的信息发送给GPU,GPU会将各层合成(composite),显示在屏幕上。

详细步骤略去,大概步骤如下,渲染完毕后JS引擎开始执行load事件,绘制流程见下图。

图片描述

由图中可以看出,css在加载过程中不会影响到DOM树的生成,但是会影响到Render树的生成,进而影响到layout,所以一般来说,style的link标签需要尽量放在head里面,因为在解析DOM树的时候是自上而下的,而css样式又是通过异步加载的,这样的话,解析DOM树下的body节点和加载css样式能尽可能的并行,加快Render树的生成的速度,当然,如果css是通过js动态添加进来的,会引起页面的重绘或重新布局。
从有html标准以来到目前为止(2017年5月),标准一直是规定style元素不应出现在body元素中。

前面提到了load事件,那么与DOMContentLoaded事件有什么分别。

  • 当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片。 (譬如如果有async加载的脚本就不一定完成)
  • 当 onLoad 事件触发时,页面上所有的DOM,样式表,脚本,图片都已经加载完成了。 (渲染完毕了)

顺序是:DOMContentLoaded -> load

最后

写到这里,总结了也有不少的内容,也对浏览器多线程、JS引擎有所了解,后面打算在看看JS的运行机制。前端知识也是无穷无尽,数不清的概念与无数个易忘的知识、各种框架原理,学来学去,还是发现自己知道得太少了。

查看原文

TIS_OMiddle 收藏了文章 · 2019-05-15

你不知道的Virtual DOM(一):Virtual Dom介绍

欢迎关注我的公众号睿Talk,获取我最新的文章:
clipboard.png

一、前言

目前最流行的两大前端框架,React和Vue,都不约而同的借助Virtual DOM技术提高页面的渲染效率。那么,什么是Virtual DOM?它是通过什么方式去提升页面渲染效率的呢?本系列文章会详细讲解Virtual DOM的创建过程,并实现一个简单的Diff算法来更新页面。本文的内容脱离于任何的前端框架,只讲最纯粹的Virtual DOM。敲单词太累了,下文Virtual DOM一律用VD表示。

这是VD系列文章的开篇,以下是本系列其它文章的传送门:
你不知道的Virtual DOM(一):Virtual Dom介绍
你不知道的Virtual DOM(二):Virtual Dom的更新
你不知道的Virtual DOM(三):Virtual Dom更新优化
你不知道的Virtual DOM(四):key的作用
你不知道的Virtual DOM(五):自定义组件
你不知道的Virtual DOM(六):事件处理&异步更新

二、VD是什么

本质上来说,VD只是一个简单的JS对象,并且最少包含tag、props和children三个属性。不同的框架对这三个属性的命名会有点差别,但表达的意思是一致的。它们分别是标签名(tag)、属性(props)和子元素对象(children)。下面是一个典型的VD对象例子:

{
    tag: "div",
    props: {},
    children: [
        "Hello World", 
        {
            tag: "ul",
            props: {},
            children: [{
                tag: "li",
                props: {
                    id: 1,
                    class: "li-1"
                },
                children: ["第", 1]
            }]
        }
    ]
}

VD跟dom对象有一一对应的关系,上面的VD是由以下的HTML生成的

<div>
    Hello World
    <ul>
        <li id="1" class="li-1">
            第1
        </li>
    </ul>
</div>

一个dom对象,比如li,由tag(li), props({id: 1, class: "li-1"})children(["第", 1])三个属性来描述。

三、为什么需要VD

VD 最大的特点是将页面的状态抽象为 JS 对象的形式,配合不同的渲染工具,使跨平台渲染成为可能。如 React 就借助 VD 实现了服务端渲染、浏览器渲染和移动端渲染等功能。

此外,在进行页面更新的时候,借助VD,DOM 元素的改变可以在内存中进行比较,再结合框架的事务机制将多次比较的结果合并后一次性更新到页面,从而有效地减少页面渲染的次数,提高渲染效率。我们先来看下页面的更新一般会经过几个阶段。
clipboard.png

从上面的例子中,可以看出页面的呈现会分以下3个阶段:

  • JS计算
  • 生成渲染树
  • 绘制页面

这个例子里面,JS计算用了691毫秒,生成渲染树578毫秒,绘制73毫秒。如果能有效的减少生成渲染树和绘制所花的时间,更新页面的效率也会随之提高。
通过VD的比较,我们可以将多个操作合并成一个批量的操作,从而减少dom重排的次数,进而缩短了生成渲染树和绘制所花的时间。至于如何基于VD更有效率的更新dom,是一个很有趣的话题,日后有机会将另写一篇文章介绍。

四、如何实现VD与真实DOM的映射

我们先从如何生成VD说起。借助JSX编译器,可以将文件中的HTML转化成函数的形式,然后再利用这个函数生成VD。看下面这个例子:

function render() {
    return (
        <div>
            Hello World
            <ul>
                <li id="1" class="li-1">
                    第1
                </li>
            </ul>
        </div>
    );
}

这个函数经过JSX编译后,会输出下面的内容:

function render() {
    return h(
        'div',
        null,
        'Hello World',
        h(
            'ul',
            null,
            h(
                'li',
                { id: '1', 'class': 'li-1' },
                '\u7B2C1'
            )
        )
    );
}

这里的h是一个函数,可以起任意的名字。这个名字通过babel进行配置:

// .babelrc文件
{
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "h"    // 这里可配置任意的名称
    }]
  ]
}

接下来,我们只需要定义h函数,就能构造出VD

function flatten(arr) {
    return [].concat.apply([], arr);
}

function h(tag, props, ...children) {
    return {
        tag, 
        props: props || {}, 
        children: flatten(children) || []
    };
}

h函数会传入三个或以上的参数,前两个参数一个是标签名,一个是属性对象,从第三个参数开始的其它参数都是children。children元素有可能是数组的形式,需要将数组解构一层。比如:

function render() {
    return (
        <ul>
            <li>0</li>
            {
                [1, 2, 3].map( i => (
                    <li>{i}</li>
                ))
            }
        </ul>
    );
}

// JSX编译后
function render() {
    return h(
        'ul',
        null,
        h(
            'li',
            null,
            '0'
        ),
        /*
         * 需要将下面这个数组解构出来再放到children数组中
         */
        [1, 2, 3].map(i => h(
            'li',
            null,
            i
        ))
    );
}

继续之前的例子。执行h函数后,最终会得到如下的VD对象:

{
    tag: "div",
    props: {},
    children: [
        "Hello World", 
        {
            tag: "ul",
            props: {},
            children: [{
                tag: "li",
                props: {
                    id: 1,
                    class: "li-1"
                },
                children: ["第", 1]
            }]
        }
    ]
}

下一步,通过遍历VD对象,生成真实的dom

// 创建dom元素
function createElement(vdom) {
    // 如果vdom是字符串或者数字类型,则创建文本节点,比如“Hello World”
    if (typeof vdom === 'string' || typeof vdom === 'number') {
        return doc.createTextNode(vdom);
    }

    const {tag, props, children} = vdom;

    // 1. 创建元素
    const element = doc.createElement(tag);

    // 2. 属性赋值
    setProps(element, props);

    // 3. 创建子元素
    // appendChild在执行的时候,会检查当前的this是不是dom对象,因此要bind一下
    children.map(createElement)
            .forEach(element.appendChild.bind(element));

    return element;
}

// 属性赋值
function setProps(element, props) {
    for (let key in props) {
        element.setAttribute(key, props[key]);
    }
}

createElement函数执行完后,dom元素就创建完并展示到页面上了(页面比较丑,不要介意...)。

clipboard.png

五、总结

本文介绍了VD的基本概念,并讲解了如何利用JSX编译HTML标签,然后生成VD,进而创建真实dom的过程。下一篇文章将会实现一个简单的VD Diff算法,找出2个VD的差异并将更新的元素映射到dom中去:你不知道的Virtual DOM(二):Virtual Dom的更新

P.S.: 想看完整代码见这里,如果有必要建一个仓库的话请留言给我:代码

查看原文

认证与成就

  • 获得 2 次点赞
  • 获得 4 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 4 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-09-05
个人主页被 297 人浏览