脚本宝典收集整理的这篇文章主要介绍了

?)/g;

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

angular模块库开发实例

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

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

image

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

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做简要说明:

ElementRef

在应用层直接操作 DOM,就会造成应用层与渲染层之间强耦合,通过 ElementRef 我们就可以封装不同平台下视图层中的 native 元素 (在浏览器环境中,native 元素通常是指 DOM 元素),最后借助于 Angular 提供的强大的依赖注入特性,我们就可以轻松地访问到 native 元素。

参考链接

Renderer2

渲染器是 Angular 为我们提供的一种内置服务,用于执行 UI 渲染操作。在浏览器中,渲染是将模型映射到视图的过程。模型的值可以是 JavaScript 中的原始数据类型、对象、数组或其它的数据对象。然而视图可以是页面中的段落、表单、按钮等其他元素,这些页面元素内部使用DOM来表示。

参考链接

ViewEncapsulation

ViewEncapsulation 允许设置三个可选的值:

  • ViewEncapsulation.Emulated - 无 Shadow DOM,但是通过 Angular 提供的样式包装机制来封装组件,使得组件的样式不受外部影响。这是 Angular 的默认设置。
  • ViewEncapsulation.Native - 使用原生的 Shadow DOM 特性
  • ViewEncapsulation.None - 无 Shadow DOM,并且也无样式包装

参考链接

button组件创建思路:

  • 针对button我们只需修改其样式,因此在这里创建属性指令
  • 提供属性接口
  • 根据其传入的属性值动态渲染DOM

至此,最简单的button就开发结束。

模块打包流程

合并html、css到component文件

let fs = require('fs');
let pathUtil = require('path');
let sass = require('node-sass');
let filePath = pathUtil.join(__dirname, 'src', 'temp_components');

let fileArray = [];

function fildFile(path) {
if (fs.statSync(path).isFile()) {
if (/.component.ts/.test(path)) {
fileArray[0] = path;
}
if (/.html$/.test(path)) {
fileArray[1] = readFile(path)
}
if (/.component.scss$/.test(path)) {
fileArray[2] = path;
}
} else if (fs.statSync(path).isDirectory()) {
let paths = fs.readdirSync(path);

if (fileArray.length === 3) {
writeFile(fileArray);
fileArray = [];
}
paths.forEach((p) => {
fildFile(pathUtil.join(path, p));
});
}

}

function readFile(file) {
return fs.readFileSync(file);
}

function writeFile(fileArray) {
let file = fileArray[0];
let content = fileArray[1];
let scssPath = fileArray[2];
mergeContent(file, content, scssPath)
.then(result => {
if (!result) return;
fs.writeFile(file, result, function (err) {
if (err) console.error(err);
console.log('file merge success!');
})
});

}

/**
* 转换scss
* @param path
* @returns {Promise}
*/

function processScss(path) {
return new Promise((resolve, reject) => {
sass.render({
file: path
}, (err, result) => {
if (!err) {
resolve(result.css.toString())
} else {
reject(err);
}
})
})
}

function mergeContent(file, content, scssPath) {
let componentContent = readFile(file);
let htmlRegex = /(templateUrl *:s*["|'])(.*[""|']

总结

以上是脚本宝典为你收集整理的

?)/g;

全部内容,希望文章能够帮你解决

?)/g;

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过