最近在做将一个系统多语言化的项目，系统使用的是ASP.NET，直接使用了一种已有的方案：在页面渲染时采用正则表达式替换{XXX:001 确定}格式的标记。但是这个方式增加了服务端的字符串处理，对页面性能有影响。

        protected override void Render(HtmlTextWriter writer)

        {

            System.IO.StringWriter sw = new System.IO.StringWriter();

            HtmlTextWriter htmltw = new HtmlTextWriter(sw);

            base.Render(htmltw);

            htmltw.Close();

            sw.Close();

            writer.Write(MultiLanguageUtil.Translate(sw.ToString()));

        }

所以在考虑是否可以将多语言的处理转移到前端，首先想到了一种简单暴力的js正则替换方式，先写个demo：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <div id="container">

        <div>{TMP:001 苹果}</div>

        <div>{TMP:002 梨子}</div>

        <div>{TMP:003 橙子}</div>

        <div>{TMP:004 葡萄}</div>

        <div>{TMP:005 全部}</div>

        <div>{TMPPPPP:005 全部}</div>

        <div>{TMP:105 张三</div>

        <div>TMP:106 李四}</div>

    </div>

    <script type="text/javascript">

        var allResources = {

            'TMP:001': {

                cn: '苹果',

                en: 'Apple'

            },

            'TMP:002': {

                cn: '梨子',

                en: 'Pear'

            },

            'TMP:003': {

                cn: '橙子',

                en: 'Orange'

            },

            'TMP:004': {

                cn: '葡萄',

                en: 'Grape'

            },

            'TMP:005': {

                cn: '全部',

                en: 'All'

            }

        };

        var env = 'en';

        //var env = 'cn';

        var container = document.getElementById('container');

        var docHtml = container.innerHTML;

        var docNew = [];

        var reg = /\{([A-Z][^\ }]+?) ([^\} ]+?)\}/g;

        var result;

        var lastIdx = 0;

        while ((result = reg.exec(docHtml)) != null) {

            var key = result[1];

            var val = result[2];

            cw(result[0], key, val);

            var resource = allResources[key];

            if (resource) {

                var replacer = resource[env];

                if (!replacer) {

                    replacer = val;

                }

                docNew.push(docHtml.substring(lastIdx, result.index));

                docNew.push(replacer);

            } else {

                docNew.push(docHtml.substring(lastIdx, result.index));

                docNew.push(val);

            }

            lastIdx = result.index + result[0].length;

        }

        if (lastIdx < docHtml.length - 1) {

            docNew.push(docHtml.substring(lastIdx, docHtml.length));

        }

        cw(docNew.join('').length);

        cw(docHtml.length);

        container.innerHTML = docNew.join('');

        function cw(args) {

            console && console.log && console.log.apply(console, arguments);

        }

    </script>

</body>

</html>

这个很明显的一个缺陷是会使页面上的事件等丢失，这个可以通过调整事件绑定的顺序到替换模板之后来解决。

所以正在考虑另一种方式，也是正则替换：通过遍历dom的各个节点，替换innerText和attribute。（Todo）

2017-08-20 00:38:20更新：已经过去一年了，已经忘记这个todo了，哈哈哈，估计是没下文了的，：）

基于前端js模板替换的多语言方案思考的更多相关文章

  1. 前后端数据交互处理基于原生JS模板引擎开发

    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...

  2. 前端JS模板引擎Mustache.js的用法

    Mustache.js在前端是一个非常强大的模板 Mustache用法参考

  3. 前端js模板库 JinkoTemplate

    有时候需要使用ajax来异步生成html,最土的方法就是用js的‘+’连接html代码,生成繁琐.一旦需要修改,对于少量的html代码到没啥问题,要是比较复杂的样式时,就真坑爹了,眼花缭乱有木有?Ji ...

  4. [前端] js中call方法的理解和思考

    最近接手前端的工作,对当前项目中自制的js框架下,js的使用产生了非常多的困惑.尤其是js的类,对象,函数,this等等相互之间的关系和转换,以前学过也忘得差不多了,现在基本相当于重新看. js中的函 ...

  5. JS模板引擎：基于字符串拼接

    目的 编写一个基于字符串拼接的js模板引擎雏形,这里并不会提供任何模板与数据的绑定. 基本原理 Javascript中创建函数的方式有多种,包括: 1. var func = function () ...

  6. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  7. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

  8. 认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具

    认识Web.桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具 一.开发环境的搭建(基于win10) 1.安装node.js和npm 到node.js官网下载安装包(包含npm ...

  9. 如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端项目模板

    vue-cli 之 Preset vue-cli 插件开发指南 TLDR 背景介绍 vue-cli 3 完全推翻了 vue-cli 2 的整体架构设计,所以当你需要给组里定制一份基于 vue-cli ...

随机推荐

  1. Ubuntu下添加Python环境变量

    最近把自己在windows上的Django项目放在的Ubuntu上,启动时提示找不到模块 原来是自己的项目用的是虚拟环境,安装的第三方库全部在虚拟环境中 AutoTestSite/venv/Lib/s ...

  2. C# 中使用using的三种方法

    1.using指令 using+命名空间,这种方法基本学习过C#的都用过,好处在于,写代码的时候不需要指定详细的命名空间 using System.Windows.Media; using Syste ...

  3. [.net 多线程]volatile 摘录

    一.volatile 介绍 volatile 关键字指示一个字段可以由多个同时执行的线程修改. 声明为 volatile 的字段不受编译器优化(假定由单个线程访问)的限制. 这样可以确保该字段在任何时 ...

  4. （c++11）随机数------c++程序设计原理与实践（进阶篇）

    随机数既是一个实用工具,也是一个数学问题,它高度复杂,这与它在现实世界中的重要性是相匹配的.在此我们只讨论随机数哦最基本的内容,这些内容可用于简单的测试和仿真.在<random>中,标准库 ...

  5. PHP+JQuery实现ajax跨域

    jQuery实现ajax跨域 1.dataType:'jsonp'2.type: 'get'3.把要传的参数以url方式传出去  url:'http://gameapi.feiliu.com/lqzg ...

  6. day2学python 数据类型+深浅拷贝+循环

    数据类型+深浅拷贝+循环 别的语言的数组 python不用定义 直接使用 color=['红','橙','黄','绿','青','蓝','紫'] print(color[1:3]) //打印[1,3) ...

  7. audio音频

    html5的audio功能上已经非常强大,回放,跳转,缓冲等以前只能用flash才能实现的功能,html5的audio都能轻松搞定 最近的一个项目使用到了这个功能,把我使用的情况写下来,供大家参考, ...

  8. loj #6014. 「网络流 24 题」最长 k 可重区间集

    #6014. 「网络流 24 题」最长 k 可重区间集 题目描述 给定实直线 L LL 上 n nn 个开区间组成的集合 I II,和一个正整数 k kk,试设计一个算法,从开区间集合 I II 中选 ...

  9. eclipse创建springmvc项目

    一.在eclipse中创建maven-archetype-webapp项目: 1.新建项目选择maven项目 2.默认,下一步 3.选择maven-archetype-webapp,其他保持默认即可 ...

  10. Qt 学习之路 2（52）：使用拖放

    Qt 学习之路 2(52):使用拖放 豆子 2013年5月21日 Qt 学习之路 2 17条评论 拖放(Drag and Drop),通常会简称为 DnD,是现代软件开发中必不可少的一项技术.它提供了 ...