angular模塊庫開發實例

JerryZou 發布于2019-08-21 17:07 / 2936人閱讀

摘要：模塊庫開發實例隨著前端框架的誕生，也會隨之出現一些組件庫，方便日常業務開發。在瀏覽器中，渲染是將模型映射到視圖的過程。然而視圖可以是頁面中的段落表單按鈕等其他元素，這些頁面元素內部使用來表示。

angular模塊庫開發實例

隨著前端框架的誕生，也會隨之出現一些組件庫，方便日常業務開發。今天就聊聊angular4組件庫開發流程。

下圖是button組件的基礎文件。

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 = [];

  @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;
  let scssRegex = /(styleUrls *:s*)([.*],?)/g;

  let newContent = "";
  if (htmlRegex.test(componentContent) && scssRegex.test(componentContent)) {
    let contentArray = componentContent.toString().split(htmlRegex);
    contentArray[1] = "template:`";
    contentArray[2] = content + "`,";
    contentArray.forEach(con => {
      newContent += con;
    })
    contentArray = newContent.toString().split(scssRegex);

    return new Promise((resolve, reject) => {
      processScss(scssPath)
        .then(result => {
          newContent = "";
          contentArray[1] = "styles:[`";
          contentArray[2] = result + "`],";
          contentArray.forEach(con => {
            newContent += con;
          })
          resolve(newContent)
        }, err => {
          reject(err);
        })
    });
  }
}

fildFile(filePath);

ts編譯(tsconfig-aot.json)

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./publish/src",
    "baseUrl": "./",
    "declaration": true,
    "importHelpers": true,
    "module": "es2015",
    "sourceMap": false,
    "target": "es2015",
    "types": [
      "node"
    ]
  },
  "files": [
    "./src/temp_components/ng-kylin.module.ts"
  ],
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "strictMetadataEmit": true,
    "flatModuleOutFile": "index.js",
    "flatModuleId": "ng-kylin",
    "skipTemplateCodegen": true
  }
}

rollup打包 (rollup-config.js)

import resolve from "rollup-plugin-node-resolve"
import replace from "rollup-plugin-replace"

const format = process.env.ROLLUP_FORMAT || "es"

let globals = {
  "@angular/animations": "ng.animations",
  "@angular/cdk": "ng.cdk",
  "@angular/core": "ng.core",
  "@angular/common": "ng.common",
  "@angular/compiler": "ng.compiler",
  "@angular/forms": "ng.forms",
  "@angular/platform-browser": "ng.platformBrowser",
  "moment": "moment",
  "moment/locale/zh-cn": null,
  "rxjs/BehaviorSubject": "Rx",
  "rxjs/Observable": "Rx",
  "rxjs/Subject": "Rx",
  "rxjs/Subscription": "Rx",
  "rxjs/observable/fromPromise": "Rx.Observable",
  "rxjs/observable/forkJoin": "Rx.Observable",
  "rxjs/observable/fromEvent": "Rx.Observable",
  "rxjs/observable/merge": "Rx.Observable",
  "rxjs/observable/of": "Rx.Observable",
  "rxjs/operator/auditTime": "Rx.Observable.prototype",
  "rxjs/operator/catch": "Rx.Observable.prototype",
  "rxjs/operator/debounceTime": "Rx.Observable.prototype",
  "rxjs/operator/distinctUntilChanged": "Rx.Observable.prototype",
  "rxjs/operator/do": "Rx.Observable.prototype",
  "rxjs/operator/filter": "Rx.Observable.prototype",
  "rxjs/operator/finally": "Rx.Observable.prototype",
  "rxjs/operator/first": "Rx.Observable.prototype",
  "rxjs/operator/map": "Rx.Observable.prototype",
  "rxjs/operator/pluck": "Rx.Observable.prototype",
  "rxjs/operator/startWith": "Rx.Observable.prototype",
  "rxjs/operator/switchMap": "Rx.Observable.prototype",
  "rxjs/operator/takeUntil": "Rx.Observable.prototype",
  "rxjs/operator/throttleTime": "Rx.Observable.prototype",
}

if (format === "es") {
  globals = Object.assign(globals, {
    "tslib": "tslib",
  })
}

let input
let file

switch (format) {
  case "es":
    input = "./publish/src/index.js"
    file = "./publish/esm15/index.js"
    break
  case "umd":
    input = "./publish/esm5/index.js"
    file = "./publish/bundles/ng-kylin.umd.js"
    break
  default:
    throw new Error(`format ${format} is not supported`)
}

export default {
  input,
  output: {
    file,
    format,
  },
  exports: "named",
  name: "ngKylin",
  plugins: [replace({ "import * as moment": "import moment" }), resolve()],
  external: Object.keys(globals),
  globals,
}

shell腳本定義執行流程(build.sh)

#!/usr/bin/env bash

rm -rf ./publish

cp -r src/app/components src/temp_components

node ./html.merge.js

echo "Generating entry file using Angular compiler"
$(npm bin)/ngc -p tsconfig-aot.json
rm -rf src/temp_components

echo "Bundling to es module"
export ROLLUP_FORMAT=es
$(npm bin)/rollup -c rollup-config.js
rm -rf publish/src/*.js
rm -rf publish/src/**/*.js
sed -e "s/from ".//from "./src//g" publish/src/index.d.ts > publish/index.d.ts
sed -e "s/":".//":"./src//g" publish/src/index.metadata.json > publish/index.metadata.json
rm publish/src/index.d.ts publish/src/index.metadata.json

echo "Transpiling es module to es5"
$(npm bin)/tsc --allowJs --importHelpers --target es5 --module es2015 --outDir publish/esm5 publish/esm15/index.js

echo "Bundling to umd module"
export ROLLUP_FORMAT=umd
$(npm bin)/rollup -c rollup-config.js

echo "Minifying umd module"
$(npm bin)/uglifyjs publish/bundles/ng-kylin.umd.js --output publish/bundles/ng-kylin.umd.min.js

echo "Copying package.json"
cp package.json publish/package.json

至此，項目打包結束。

源碼

GPU云服務器云服務器開發模塊模塊實例模塊開發開發庫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89156.html

angular - 收藏集 - 掘金

摘要：如何在中使用動畫前端掘金本文講一下中動畫應用的部分。與的快速入門指南推薦前端掘金是非常棒的框架，能夠創建功能強大，動態功能的。自發布以來，已經廣泛應用于開發中。如何在 Angular 中使用動畫 - 前端 - 掘金本文講一下Angular中動畫應用的部分。首先，Angular本生不提供動畫機制，需要在項目中加入Angular插件模塊ngAnimate才能完成Angular的動畫機制...

AlexTuan 2019-08-20 17:19 評論0 收藏0
Angular（01）-- 架構概覽

摘要：正文架構概覽正文架構概覽接觸大概一個月吧，期間寫了個項目，趁現在稍微有點時間，來回顧梳理一下。里的模塊，并不等同于項目中的模塊概念。當然，這只是我目前階段的理解。聲明本系列文章內容梳理自以下來源： Angular 官方中文版教程官方的教程，其實已經很詳細且易懂，這里再次梳理的目的在于復習和鞏固相關知識點，剛開始接觸學習 Angular 的還是建議以官網為主。因為這系列文章，更多的會...

bitkylin 2019-04-23 11:46 評論0 收藏0
前端每周清單半年盤點之 Angular 篇

摘要：延伸閱讀學習與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發布的前端每周清單...

LeviDing 2019-08-20 18:54 評論0 收藏0
從安裝認識Angular 2

摘要：首先，要確認安裝了，并且創建了目錄并執行初始化。想必看見上面的那么多包會一臉懵逼，沒關系，我第一眼看見這些的那刻，和你現在的表情一樣，下面在適當的時候我會逐個解釋的，你只需要相信我上面的包都是跑所必須的，缺一不可。關于介紹，只說一句：Angular 2是一個強大、全面、龐大的MVVM框架。安裝安裝，也算是一個坎，因為你需要安裝一大堆東西，卻不知道每個東西是做什么的，盡管有Angu...

xietao3 2019-08-22 13:02 評論0 收藏0
2017年前端框架、類庫、工具大比拼

摘要：相比于開發人員的數量，目前框架類庫和工具的數量似乎更多一些。本文將會討論目前最為流行的客戶端框架類庫和工具以及它們之間的基本差異。典型的類庫包括字符串處理日期元素事件動畫網絡請求等功能。所以不需要明確的區分類庫框架和工具。相比于JavaScript開發人員的數量，目前JavaScript框架、類庫和工具的數量似乎更多一些。截至2017年5月，GitHub上的快速搜索顯示，有超過110...

Alliot 2019-08-20 17:22 評論0 收藏0