「国際的なテーマとスイッチ」スキーム小さな心のフロントエンド技術開発

その他 2019-09-01 17:41:22 訪問数: null

1はじめに

長年にわたり、ヴューの出現により、フロントエンドとその枠組みの一部を反応して、方法の開発が急速な変化を遂げてきました。著者の専門家10年、サーバーコンポーネントをレンダリングするのは時期尚早マイクロソフトAsp.Netのコンポーネントの使用は、JSP、JAVAテンプレート制御システム、（EasyUI、JqueryUI）コンポーネント、そうでExtJSの、道場、との数に基づいてjQueryのフレームワークを使用していました。これらのフロントエンド（またはフレームと呼ばれる）のコンポーネント別の後、基本的な考え方は同じであるが、ブラウザが操作やDOM操作を最適化することです。言って真で、特に大規模なプロモーションのフロントエンド技術開発の場合には、あまりにも一般的であり、そして今jqueryのベースのフロントエンドで前に新しいフレームワークは、開発モデルがレベルアップしていない新たな枠組みの特徴を具現化するように見えました。ソフトウェア開発チームの担当者からなる情報システム、特に、この点を見ることができ、より多くのフロントエンドエンジニアでなく、フロントエンドには、成長しています。技術や複雑なシステム後に、多くの場合、分而治之近年では、ゆっくりと上昇させ、多くの開発チームで使用されている開発モデル「の終了前と後」、顔の孤立を解決する問題。しかし、SPA（単一ページ）システムがあり、苦痛の多くを引き起こしているフロントエンドの開発を理解しているようです。

彼はそれに変化がない最後に組成モジュールの形で今、複雑な情報システム、ビジネスのフロントエンド、それほどの変化を語りました。それとも、顔今人気のマイクロサービスフレームワークでは、フロントエンド・アプリケーション・シナリオは、何が起こったかです。

ただ、最近の大フロントエンドの生産システムは、大きな変革に直面して、システムはおそらく、プラットフォーム（ページコンテナ）、いくつかのビジネス・モジュールを含んでいます。サービスモジュールは、プラットフォームへのメニューの形で登録する必要があり、プラットフォームが（全体として、タブ形式）開口部内にネスト。

統合された.PNG

当社は、ベースモジュールが含まれているオープンソースの開発フレームワーク、多くの場合、フロントエンドエンジニアリング、多くのを見て、だけでなく、ビジネス・モジュール、およびSPA上のシステム、いわゆる大規模な単一ページのアプリケーションが含まれています。しかし、実際のR＆Dチームは、独立したマイクロ・サービス開発チームの多くを持っている傾向がある、各チームが独自の技術体系を持っています。大規模な、統合されたパッケージの形で単一ページの進展に従い、組織はクロスチームの多くを横断し、ブロックするように思われる場合は、更新プロセスは非常に複雑であると思われます。だから、当然、各ビジネス・モジュールのための最も適切な方法は、SPAアプリケーションの形で開発され、さまざまなチーム（プラットフォームも真）の責任は、最終的に特定の形式でプラットフォームに統合され、さまざまなモジュールを統一します。だから、複雑な情報システムのためのオープンソースの開発フレームワークの多くは少なく、研究開発モードになりがち。現在の構造の下では、我々は複雑なシステムを行うことはできません。この形式SPAです。

だから、より良い方法が、それはまだによる各事業に組み込まれた統合モジュールに、同様の複雑なシステムの前に処理され、実際には、コンテナ船のプラットフォームはiframeフロントた、唯一の違いは、ビジネス・モジュールの分割後で、各モジュールすることができます独立した形でのSPAは、私は、これはマイクロサービスの改革、それの本来の意図だと思います。

このモジュールは、システムがなってきた影響、サービスモジュールとコンテナモジュールの統合の形を決める统一性キーが配置されています。この点において、2つのコンテンツは、フロントエンドの開発フレームワークの設計における重要な考慮事項があります。別のブロックスイッチのテーマを統一;これはまた、今日の言語、統一された国際的なプロセスの焦点です。

ストレートポイントに、すべてのこのナンセンスを語りました。本論文では、フロントエンドエンジニアリングの開発プロセスおよびスイッチングソリューション話題の国際化のプロセスを共有するために、プレゼンテーションに基づいてフロントエンドソリューションの+ Antd + Umijsこのセットを、反応します。第一のスイッチング効果の図の例：

テーマchange.gif

図2に示すように、ソースコードと使用

複数の現在ベースのフロントエンドとAntdを反応させ、より多くのプロジェクト、およびオープンソースの足場Umijsの使用は中小のプロジェクトのために必須となっているようです。今日共有するためのコードタグと説明の下の最初のプログラム：

giteeます。https：//gitee.com/BeautifulHao/theme-demo-app

//本地演示
git clone https://gitee.com/BeautifulHao/theme-demo-app.git
cd theme-demo-app
yarn install
yarn start

3、国際プログラム

​国际化是一个全局性的设置，所以作为单页应用，最理想的设置地方最好是最外层的包装组件，而结合umijs，最合适的就是layout组件，或者说是route的最外层嵌套组件设置全局国际化。react的国际化有两个库，一个是react-intl，另一个是react-intl-universal，本文介绍的是react-intl-universal。

ant design 组件国际化

结合官方的文档：https://ant.design/docs/react/i18n-cn，列举项目源码说明src/layouts/index.js


import React, { PureComponent } from 'react'
//antd国际化包装组件
import { ConfigProvider } from 'antd';
import intl from 'react-intl-universal';
//antd国际化资源
import zhCN from 'antd/es/locale-provider/zh_CN';
import enUS from 'antd/es/locale-provider/en_US';
//本地国际化资源
import enTranslationsData from '../locale/en-US';
import zhTranslationsData from '../locale/zh-CN';
//国际化键常量和基于cookie全局设置方法
import { Locale_en_US, Locale_zh_CN, getCookieLocale } from '../utils/i18n';

//包含常规一些国际化字符串
require('intl/locale-data/jsonp/en.js');
require('intl/locale-data/jsonp/zh.js');

const AntdTranslations = {
  [Locale_zh_CN]: zhCN,
  [Locale_en_US]: enUS,
}

class BasicLayout extends PureComponent {

  state = {initDone: false}

  componentWillMount () {
    //通过平台容器集设置的cookie获取当前全局环境的国际化设置
    const currentLocale = getCookieLocale();
    //初始化react-intl-universal 组件国际化设置
    intl.init({
      currentLocale,
      locales: {
        [Locale_zh_CN]: { ...zhTranslationsData },
        [Locale_en_US]: { ...enTranslationsData },
      }
    }).then(() => {
      this.setState({initDone: true});
    });
  }

  render () {
    const currentLocale = getCookieLocale();
    return (
      //按照antd官网设置国际化包装器ConfigProvider
      this.state.initDone &&
          <ConfigProvider locale={AntdTranslations[currentLocale]}>{this.props.children}</ConfigProvider>
    )
  }
}

本地国际化资源格式（../locale/en-US）：

const enUS ={
  "test.helloworld": "hello world",
  "test.show":"hello,I'm from english context!",
  "test.buttom":"test buttom",
  "test.themeAndLocale":'Please Select The Theme & Locale：',
  "test.pageShow":'page show：'
}

export default enUS

业务组件国际化使用

//引入组件
import intl from 'react-intl-universal';
//调用方法获取
intl.get('test.themeAndLocale')

4、主题切换方案

可行方案介绍

  • css换肤：生成多套主题css，在页面加载时根据主题选择加载指定css

  • less换肤：采用动态Less机制，通过js动态编译less变量修改css（可参考：less换肤）

css主题切换介绍

从效果来说，动态Less换肤优于css换肤（页面不刷新），但对于单个业务模块而言，虽然作为SPA应用，但是模块内多个功能地址都将作为菜单独立打开，每次加载一个页面都将动态编译一次less，性能将有很大的消耗。所以在行文开头说明的复杂系统的场景下less换肤不是一个最优的选择。那么css换肤呢，综合考量了下，的确还是能够达到预期的效果的，尤其是antd一个主色就能搞定一个主题的场景（antd）,而且主题切换往往就是antd皮肤切换。所以要实现主题切换，就得从antd下手。

生成多份主题文件

AntdスタイルのCSSファイルは、リンクタグを介して導入することができ、プロジェクトはまた、Antdテーマのスタイルのいくつかのセットを提供するように要求します。最初に考えたのは、直接Quguanネットワークは直接カスタマイズし、CSSファイルをダウンロードすることができます。しかし、答えはノーです。しかし、業界最高のオープンソースプロジェクトとして、Antdはカスタムテーマのスタイルをカスタマイズする方法を提供し、公式サイトで詳細な手順カスタムテーマがある、しかしAntdだけLESSスタイルカスタマイズ可能な機能を提供し、既製のCSSスタイルファイルを提供していません機能をカスタマイズしてダウンロードしてください。

だから、自然に実現可能な方法は次のとおりです。

  • 公式の標準LESSマスターファイルへのアクセス
  //一般就在当前项目下
  node_modules/antd/dist/antd.less
  • ニーズに応じて指定されたスタイルの変数をカバーし、メインファイルに導入された後LESSカスタムドキュメント、
  @import "../node_modules/antd/dist/antd.less";   
// Import Ant Design styles by less entry
  
  @primary-color: #1890ff;
  • 最終CSSファイルをコンパイルするために必要なlesscツールを使用します
lessc -js theme-demo-app-default.less ../public/theme/theme-demo-app-default.css

上記の考え方に基づいて、私たちはいくつかの異なる@の原色の色によりcssファイルを実行する必要があります。
複数テーマの.png
複数テーマ2.png

指定されたテーマのCSSをロードします

指定されたCSSをロードするために、ページの読み込みの開始時に、単一ページのアプリケーションのエントリindex.htmlファイルから起動し、HTMLテンプレートファイルには、次のように組み合わせは、我々が処理することができumijs：document.ejsを

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Theme-Demo Application</title>
  <script>
    window.publicPathString = "<%= context.publicPath %>"
    document.title = "<%= context.config.plugins[0][1].title %>"
  </script>
  <script src="<%= context.publicPath %>theme/append-theme.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
</html>
// append-theme.js
//根据cookie动态添加sup-ui的样式文件
var themeHandle = {
  getCookie: function(name) {
    name = name + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
         }
         if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
         }
     }
    return undefined;
  },
  appendTheme: function() {
    var publicPath = window.publicPathString;
    var theme = this.getCookie('theme');
    theme = theme ? theme : 'default'
    var link = document.createElement('link');
    link.type = 'text/css';
    link.id = 'theme-' + theme;
    link.rel = 'stylesheet';
    link.href = publicPath + 'theme/theme-demo-app-' + theme + '.css';
    document.getElementsByTagName('head')[0].appendChild(link);
  },
};

themeHandle.appendTheme();

主要的过程就是从cookie中获取指定主题设置，然后加载不同的antd主题css.

参考：

https://www.jianshu.com/p/35e0581629d2
https://boycgit.github.io/customize-antd-css/

おすすめ

転載: www.cnblogs.com/blogsfuh/p/11442279.html
おすすめ
NetBSD は AI によって生成されたコードの提出を禁止します
ランキング
C＃の変数インスタンス、クレジット・カードケース
通过uniCloud白捡一个在线图库管理工具
Linuxのいくつかの基本的なコマンドに関する洞察（20ベース）
vueエントリーの基礎知識、コア知識をマスターするならこの記事で十分
食品化学クエスチョンバンク
CentOSの7制御システムは、ファイルを占めます
単一の el-form 内の el-form-item テキストの左揃えを解決する方法
ノードJSベースノート
関数にSQL Serverの文字列：
sparksql_相関分析
アーカイブ
もっと
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)

コードワールド

© 2018 codetd.com