最近在做将一个系统多语言化的项目，系统使用的是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. React+gulp+browserify模块化开发

    阅读本文需要有React的基础知识,可以在React 入门实例教程和React中文官网进行基础学习. 没有React基础也可以学习本文,本文主要不是学习React,而是gulp+browserify进 ...

  2. JavaScript中function 之return false的理解(实例代码)

    1.司空见惯代码,在某一dom节点上注册事件方法 $("#btnResponse").click(Login); $("#txtCode").keydown(R ...

  3. vs2015+opencv3.3.1 实现 c++ 灰度高斯滤波器

    #include <opencv2\highgui\highgui.hpp> #include <iostream> #include<vector> using ...

  4. SiriShortCut模型建立及数据交互逻辑

    1.模型数据需求 意图: 手机号 密码 网关ID 打开该情景的命令 情景号 情景名 情景背景图 添加该意图时的 token值 主程序登陆共享数据 手机号 token值 2.操作逻辑 1.意图被唤起 获 ...

  5. 【bzoj4007】[JLOI2015]战争调度 暴力+树形dp

    Description 脸哥最近来到了一个神奇的王国,王国里的公民每个公民有两个下属或者没有下属,这种 关系刚好组成一个 n 层的完全二叉树.公民 i 的下属是 2 * i 和 2 * i +1.最下 ...

  6. root@localhost

    root代表当前的用户 也就是说你使用root的帐号登录的localhost是系统的名字 没有设置系统名字的时候默认名称是localhost/ 代表你当前所处的目录位置 你当前在根目录下# 是用户提示 ...

  7. layer mobile开发layer.full

    Layer For Mobile 之 layer.full() 背景介绍:layer mobile是专门针对手机页面开发的一套框架,具体介绍请看官方文档 http://layer.layui.com/ ...

  8. 说说Cookie和Session（会话）的区别？

    1.Cookie 通俗讲,是访问某些网站后在本地存储的一些网站相关信息,下次访问时减少一些步骤.更准确的说法是:Cookies是服务器在本地机器上存储的小段文本并随每一个请求发送至同一服务器,是在客户 ...

  9. CSS column 布局总结

    有时候 第一列 底部会跑到顶部那里一部分.这时候应该这样. 在 每个 div前加上 display:inline-block

  10. 【算法笔记】B1054 求平均值

    atof(str)字符串转换浮点数 #include<bits/stdc++.h> using namespace std; bool isLegal(char *s){ ; ]=='-' ...