最近在做将一个系统多语言化的项目，系统使用的是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. 利用find同时查找多种类型文件

    find . -name "*.c" -o -name "*.cpp" -o -name "*.h" 就可以列出当前目录下面所有的c,cpp ...

  2. OC自定义文档头部注释

    1.创建文件 IDETemplateMacros.plist 2.向文件里添加内容 具体内容 // 文 件 名:___FILENAME___ // // 版权所有:___COPYRIGHT___ // ...

  3. Selenium辅助工具

    下载Firefox39.0版本浏览器,安装firebug和FirePath.最新版的Firefox在扩展组件中无法找到firebug,可以使用旧的版本的Firefox浏览器. FirePath插件的使 ...

  4. windows查看和杀死占用端口的进程

    1.首先使用 netstat -ano查看占用端口的进程号 2.然后使用 taskkill /PID (进程号)杀死进程

  5. [Swift]八大排序算法（七）：归并排序

    排序分为内部排序和外部排序. 内部排序:是指待排序列完全存放在内存中所进行的排序过程,适合不太大的元素序列. 外部排序:指的是大文件的排序,即待排序的记录存储在外存储器上,待排序的文件无法一次装入内存 ...

  6. python基础之条件判断

    一.简单的if语句 举例 if money > 10000: print '我们去旅游吧' #左侧一定要有缩进,一般4个空格 print '请输入学生的考试成绩' score = print ( ...

  7. Spring AOP（面向切面编程）

    一.AOP简介 1.AOP概念:Aspect Oriented Programming 面向切面编程 2.作用:本质上来说是一种简化代码的方式 继承机制 封装方法 动态代理 …… 3.情景举例 ①数学 ...

  8. 如何在UITableViewController上添加一个固定的视图

    最近在使用UITableViewController,想在上面添加一个固定的视图,不随ScrollView滑动而移动.最后找到2种解决办法,一种是计算TableView的偏移,调整视图的位置,不断更新 ...

  9. html基础知识，整理

    # HMTL 基础知识 ###查看网页源代码吗 ``` ctrl + u``` ###dom元素 一个标签即代表一个dom元素 ###dom元素属性 ``` <p id ="first ...

  10. 《Java并发编程实战》第十章 避免活跃性危急 读书笔记

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/love_world_/article/details/27635333 一.死锁 所谓死锁: 是指两 ...