最近在做将一个系统多语言化的项目，系统使用的是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. 去除两张img中间的间隙

    这样写 图片之间肯定有间隙 正确写法就是去掉空格 <img src="hlppic.png" /><img src="hlppic.png" ...

  2. Java集合类总结 （二）

    LinkedList类 由于基于数组的链表有一个大的缺点,那就是从链表中间移除一个元素时需要将此元素后面的所有元素向前移动,会产生大量的开销,同样的在链表中间插入一个新元素也会有大量开销.如下图: L ...

  3. WinForm中DataGridView的使用（三） - 各种事件

    CellMouseDown/CellMouseUp 可获得行.列号 可用if (rowIndex >= 0 && e.Y > 4 && e.Y < ( ...

  4. [译] 关于 SPA，你需要掌握的 4 层 （2）

    此文已由作者张威授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 视图层 现在我们有了一个可执行且不依赖于框架的应用程序,React 已经准备投入使用. 视图层由 presen ...

  5. 单链表倒数第K个节点的查找和显示

    1.使用一个固定长度队列装链表段,当遍历到链表根时,返回队列头元素. class Node{ int value; Node next; public Node(int value){ this.va ...

  6. 864. Shortest Path to Get All Keys

    We are given a 2-dimensional grid. "." is an empty cell, "#" is a wall, "@& ...

  7. vi—终端中的编辑器

    *:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...

  8. shell传参给matlab问题解决办法

    之前需要通过shell脚本传参给matlab程序,但是遇到一些问题,现将我遇到的问题分享出来,给遇到同样问题的人一些借鉴. shell部分脚本Execl.sh: /usr/bin/python /ho ...

  9. 期待suqingnian.h

    不定期更新,跟着自己的进度走的. 有什么好的东西可以收录的尽管留言 UPD:话说真的没人发现本宝宝的$Martix$类的$operator$打错了么?$qwq$ $2018.7.19$ /*by Qi ...

  10. 局域网内搭建一个服务器，可以使用 https 吗

    https://www.v2ex.com/t/472394 这是一个创建于 126 天前的主题,其中的信息可能已经有所发展或是发生改变. 局域网内通过嵌入式设备搭建一个轻量级 web 服务,可以仍然使 ...