最近在做将一个系统多语言化的项目，系统使用的是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. ajax 跨域名调用

    在ajax 中要跨域名 请求的时候要注意 1. dataType: 'jsonp', 2. jsonp: 'callback', <script type="text/javascri ...

  2. if 判断

    语法一: if 条件: #条件成立时执行的字代码块 代码1 代码2 代码3 示例: sex='female' age=18 is_beautiful=True if sex == 'female' a ...

  3. Sharepoint2013搜索学习笔记之自定义结果源(七)

    搜索中心新建好之后在搜索结果页上会默认有所有内容,人员,对话,视频这四个结果分类,每个分类会返回指定范围的搜索结果,这里我再添加了部门日志结果分类,搜索这个分类只会返回部门日志内容类型的搜索结果,要实 ...

  4. laravel中chunk方法使用外部变量以及改变该变量

  5. .Net Core 项目引用本地类库方式（一）

    最近了解到.NET Core 项目,引用本地类库DLL的方式有三种 1.非同解决方案下的引用,直接引用,浏览,找到对应的DLL,然后确定引用. 这种方式有个不好的地方就是,如果引用的DLL文件里面,也 ...

  6. IdentityServer4实现单点登录统一认证

    什么是单点登录统一认证:假如某公司旗下有10个网站(比如各种管理网站:人事系统啊,财务系统啊,业绩系统啊等),我是该公司一管理员或者用户,按照传统网站模式是这样:我打开A网站 输入账号密码 然后进入到 ...

  7. 华硕X550VC安装ubuntu后wifi无法连接问题

    在网上找了很多资料比如重新编译内核,想办法连上有线网络然后更新驱动,下载离线驱动安装包…… 等等方法 其中有些方法实际测试的时候失败了,文章是几年前的,可能缺少某些依赖.上个网都这么麻烦实在让人疲惫. ...

  8. c++最短路经典问题

    一提起最短路,各位oier会想到什么呢? floyd,spfa,dij,或是bellman-ford? 其实,只要学会一种算法,大部分最短路问题就能很快解决了. 他就是堆优化的dijkstra. 首先 ...

  9. 十六、Node.js-fs模块-流

    10. fs.createReadStream 从文件流中读取数据 /** * 之前我们学习过读取文件内容的方法readFile():该方法适合读取文件内容比较少的文件,如果遇到数据量庞大的文件,我们 ...

  10. NetworkX初相识

    听说NetworkX是一个很牛的复杂网络研究的工具,就来试一下吧. import networkx as nx G= nx.Graph()#建立一个空白的图 G.add_node("node ...