成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

React原理探索- @providesModule 模塊系統(tǒng)

My_Oh_My / 3379人閱讀

摘要：原理探索模塊系統(tǒng)是什么拋出組件化的概念后，對(duì)于開(kāi)發(fā)者而言，為了提高代碼的可讀性與結(jié)構(gòu)性，通過(guò)文件目錄結(jié)構(gòu)去闡述組件嵌套關(guān)系無(wú)疑是一個(gè)很好的辦法，但是目錄級(jí)別的加深，同時(shí)讓的文件路徑讓人頭疼。

React原理探索- @providesModule 模塊系統(tǒng) @providesModule是什么

react拋出組件化的概念后，對(duì)于開(kāi)發(fā)者而言，為了提高代碼的可讀性與結(jié)構(gòu)性，通過(guò)文件目錄結(jié)構(gòu)去闡述組件嵌套關(guān)系無(wú)疑是一個(gè)很好的辦法，但是目錄級(jí)別的加深，同時(shí)讓require的文件路徑讓人頭疼。絕大多數(shù)公司會(huì)使用自己定制的alias工具，在腳手架入口配置文件中給相應(yīng)的filePath賦予別名，pack時(shí)，進(jìn)行統(tǒng)一替換。

#ykit.config

...
alias:{
    "Common":"./src/util/index.js",
    "Component":"src/components/index.js"
}
...

當(dāng)然也可以在文件中寫(xiě)入唯一的標(biāo)識(shí)位，pack時(shí)將該標(biāo)識(shí)位與當(dāng)前聲明標(biāo)識(shí)位的filePath建立聯(lián)系，facebook提供的@providesModule的就是這一策略。使用方法如下：

#a.js
/**
 * @providesModule Common
 */

export const isArray = () => {
    ...
}

export const isObject = () => {
    ...
}

#b.js

import { isArray } from "Common"

isArray([])
如何實(shí)現(xiàn)@providesModule

fbjs-script/gulp:

shared/provides-module.js中提供了這樣一段正則，用于匹配文件中是否有類(lèi)似@providesModule的標(biāo)識(shí)符

module.exports = {
  regexp: /
?
 * @providesModule (S+)(?=
?
)/,
};

modules-map.js 中：

transform函數(shù)調(diào)用如上正則對(duì)讀入文本進(jìn)行解析，并將alias的別名與filePath建立映射關(guān)系

flush函數(shù)將前面拿到的映射表進(jìn)行處理加上統(tǒng)一前綴，并導(dǎo)入到j(luò)son文件中


  function transform(file, enc, cb) {
    if (file.isNull()) {
      cb(null, file);
      return;
    }

    if (file.isStream()) {
      cb(new gutil.PluginError("module-map", "Streaming not supported"));
      return;
    }

    // Get the @providesModule piece of out the file and save that.
    var matches = file.contents.toString().match(PM_REGEXP);
    if (matches) {
      var name = matches[1];
      if (moduleMap.hasOwnProperty(name)) {
        this.emit(
          "error",
          new gutil.PluginError(
            PLUGIN_NAME,
            "Duplicate module found: " + name + " at " + file.path + " and " +
              moduleMap[name]
          )
        );
      }
      moduleMap[name] = file.path;
    }
    this.push(file);
    cb();
  }
  
    function flush(cb) {
    // Keep it ABC order for better diffing.
    var map = Object.keys(moduleMap).sort().reduce(function(prev, curr) {
      // Rewrite path here since we don"t need the full path anymore.
      prev[curr] = prefix + path.basename(moduleMap[curr], ".js");
      return prev;
    }, {});
    fs.writeFile(moduleMapFile, JSON.stringify(map, null, 2), "utf-8", function() {
      // avoid calling cb with fs.write callback data
      cb();
    });
  }

最后導(dǎo)出如下json(以fbjs build為例)

{
  "BrowserSupportCore": "fbjs/lib/BrowserSupportCore",
  "CSSCore": "fbjs/lib/CSSCore",
  "CircularBuffer": "fbjs/lib/CircularBuffer",
  "DOMMouseMoveTracker": "fbjs/lib/DOMMouseMoveTracker",
  "DataTransfer": "fbjs/lib/DataTransfer",
  "Deferred": "fbjs/lib/Deferred",
  "ErrorUtils": "fbjs/lib/ErrorUtils",
  "EventListener": "fbjs/lib/EventListener",
  "ExecutionEnvironment": "fbjs/lib/ExecutionEnvironment",
  "Heap": "fbjs/lib/Heap",
  "IntegerBufferSet": "fbjs/lib/IntegerBufferSet",
  "Keys": "fbjs/lib/Keys",
  "Locale": "fbjs/lib/Locale",
  "Map": "fbjs/lib/Map",
  "PhotosMimeType": "fbjs/lib/PhotosMimeType",
  "PrefixIntervalTree": "fbjs/lib/PrefixIntervalTree",
  "Promise": "fbjs/lib/Promise",
  "PromiseMap": "fbjs/lib/PromiseMap",
}

而后該做什么大家也清楚了，要么node腳本去把文件里require 對(duì)應(yīng)別名的進(jìn)行路徑替換，要么通過(guò)babel替換，當(dāng)然，facebook是通過(guò)babel玩的

題外話

其實(shí)對(duì)于alias system目前提供的兩種方法，各有利弊。fb提供的方法，使得使用上更加便利，但是由于alias遍地存在，聲明沖突也變得家常便飯（當(dāng)然可以通過(guò)統(tǒng)一前綴解決）。傳統(tǒng)在腳手架配置文件中聲明的方法，雖然能讓你對(duì)alias的聲明一目了然，但是使用上也繁瑣很多

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92423.html

相關(guān)文章

  • React Native組件開(kāi)發(fā)指南

    摘要：的組件開(kāi)發(fā)一直處在一個(gè)比較尷尬的處境。目錄包含了當(dāng)前組件的源碼，是組件開(kāi)發(fā)最主要的目錄。許多的開(kāi)發(fā)者對(duì)于依然持懷疑態(tài)度。 React Native的組件開(kāi)發(fā)一直處在一個(gè)比較尷尬的處境。在官方未給予相關(guān)示例與腳手架的情況下，社區(qū)中依然誕生了許許多多的React Native組件。因?yàn)槿鄙偈纠c規(guī)范，很多組件庫(kù)僅含有一個(gè)index.js文件。這種基礎(chǔ)的目錄結(jié)構(gòu)也導(dǎo)致了一些顯而易見(jiàn)的問(wèn)題，例...

    yuanxin 評(píng)論0 收藏0

  • ReactNative-HMR原理探索

    摘要：原理探索前言在開(kāi)始本文前，先簡(jiǎn)單說(shuō)下我們?cè)陂_(kāi)發(fā)項(xiàng)目中，本地的服務(wù)究竟扮演的是什么樣的角色。這無(wú)疑是閹割了一大部分功能綜上，如果僅僅用于切圖，可能不會(huì)有那么多的問(wèn)題 ReactNative-HMR原理探索 前言 在開(kāi)始本文前，先簡(jiǎn)單說(shuō)下我們?cè)陂_(kāi)發(fā)RN項(xiàng)目中，本地的node服務(wù)究竟扮演的是什么樣的角色。在我們的RN APP中有配置本地開(kāi)發(fā)的地方，只要我們輸入我們本地的IP和端口號(hào)8081就...

    GT 評(píng)論0 收藏0

  • 初窺基于 react-art 庫(kù)的 React Native SVG

    摘要：語(yǔ)法更近似于移動(dòng)端。當(dāng)參數(shù)為兩個(gè)時(shí)，等同于，繪制光滑二次貝塞爾曲線。有些精通的同學(xué)這時(shí)候可能就要問(wèn)我了，不對(duì)啊，二次貝塞爾曲線和光滑三次貝塞爾曲線的參數(shù)都是個(gè)，你這里沒(méi)有光滑三次啊因?yàn)殚_(kāi)發(fā)的同學(xué)留坑沒(méi)寫(xiě)了呀微笑。和則是用于指定旋轉(zhuǎn)的原點(diǎn)。 技術(shù)背景 在移動(dòng)應(yīng)用的開(kāi)發(fā)過(guò)程中，繪制基本的二維圖形或動(dòng)畫(huà)是必不可少的。然而，考慮到Android和iOS均有一套各自的API方案，因此采用一種更普...

    xiaowugui666 評(píng)論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.4 - 這份 Android 有點(diǎn)甜

    摘要：閱讀本期周刊，你將快速入門(mén)，開(kāi)啟甜蜜之旅。然則的原理負(fù)責(zé)發(fā)送以及處理消息，創(chuàng)建消息隊(duì)列并不斷從隊(duì)列中取出消息交給，則用于保存消息。 showImg(/img/bVCN99?w=900&h=385); 2016 年 8 月，Android 7.0 Nougat（牛軋?zhí)牵┱桨l(fā)布，那么問(wèn)題來(lái)了，你 Marshmallow 了么(? -? ?) Cupcake、Donut、Gingerbre...

    jay_tian 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<