像C++一样写JavaScript

最新推荐文章于 2022-12-22 13:52:04 发布
最新推荐文章于 2022-12-22 13:52:04 发布
阅读量121 收藏
点赞数
文章标签： c/c++ xhtml java
原文链接：http://www.cnblogs.com/suncoolcat/p/3293970.html
版权

像C++一样写JavaScript

C/C++/Java的include或import可以引用第3方文件和包. 这个功能在Html/Js里没有默认的实现. 假设我们有这样一个HTML文件index.html:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
  <title>欢迎使用ligerUI</title> 

  <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  <link href="lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
  <link href="lib/css/common.css" rel="stylesheet" type="text/css" />  
  <link href="lib/css/index.css" rel="stylesheet" type="text/css" />

  <script src="lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
  <script src="lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>  
  <script src="lib/ligerUI/js/plugins/ligerTab.js" type="text/javascript"></script>
  <script src="lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>

  <script src="lib/js/common.js" type="text/javascript"></script>
  <script src="lib/js/LG.js" type="text/javascript"></script>
  <script src="lib/js/login.js" type="text/javascript"></script>

  <script src="/lib/jquery-validation/jquery.validate.min.js" type="text/javascript"></script> 
  <script src="/lib/jquery-validation/jquery.metadata.js" type="text/javascript"></script>
  <script src="/lib/jquery-validation/messages_cn.js" type="text/javascript"></script>

  <script src="lib/js/changepassword.js" type="text/javascript"></script>
  <script src="lib/ligerUI/js/plugins/ligerForm.js" type="text/javascript"></script>

  <!-- settings menus -->
  <script src="index.html.js" type="text/javascript"></script>
</head>
<body>
...
</body>
</html>


可以看到, 为了使用某个第3方库(这里是ligerUI), 我们不得不把所有需要的js文件在html里引入进来. 下面修改上面的index.html, 看看新的写法可以给我们带来什么惊喜:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title>欢迎使用ligerUI</title>

    <link href="lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
    <link href="lib/css/common.css" rel="stylesheet" type="text/css" />
    <link href="lib/css/index.css" rel="stylesheet" type="text/css" />

    <script src="lib/prerequisite.js" type="text/javascript"></script>
    <script src="index.html.js" type="text/javascript"></script>
</head>
<body>
...
</body>
</html>

是不是简洁多了, 这个写法的关键是我们必须在引用任何js之前引入一个全局的API文件, 这里是prerequisite.js, 然后就可以引入自己的js文件, 这里是index.html.js, 在自己的js文件里引入所有我们需要的第3方库文件(如ligerUI). 下面我们看看index.html.js这个文件里作了什么:

 

 

 

/**
 * index.html.js
 * version: 0.0.1
 */
UTIL.importScripts(
    "lib/jquery/jquery-1.5.2.min.js",
    "lib/ligerUI/js/ligerui.min.js",
    "lib/js/common.js",
    "lib/js/LG.js",
    "lib/js/login.js",
    "lib/jquery-validation/jquery.validate.min.js",
    "lib/jquery-validation/jquery.metadata.js",
    "lib/jquery-validation/messages_cn.js",
    "lib/js/changepassword.js"
);


/* 下面是业务代码, 和文件包含没关系 */
(function (window, undefined) {
    "use strict";

    
    /**
     * public interfaces
     */

}(window));


 

是不是很神奇呢, 这个和C/C++/java很像啦. UTIL.importScripts(...) 这个函数帮我们做了一切事情, 它是在 prerequisite.js 中定义的, 那么最后就是prerequisite.js文件:

 

 

/**
 * prerequisite.js
 *    included before all *.js
 *  version: 0.0.1
 *  cheungmine
 * 2012-5
 */
(function (window, undefined) {
    "use strict";

    window.UTIL = {}


    /* Modify DEBUG = false if release */
    var DEBUG = true;


    var log = function () {
        if (window.UTIL.DEBUG === true) {
            /* Thanks to Paul Irish for this one:
             * http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
             */
            log.history = log.history || [];
            log.history.push(arguments);

            /* Make sure console is present */
            if ('object' === typeof console) {
                /* Setup console and arguments */
                var c = console[console.warn? 'warn':'log'],
                    args = Array.prototype.slice.call(arguments),
                    a;
                /* Add marker to first argument if it's a string */
                if (typeof arguments[0] === 'string') {
                    /* args[0] = 'your marker: ' + args[0]; */
                }

                /* Apply console.warn or .log if not supported */
                a = c.apply? c.apply(console, args) : c(args);
            }
        }
    };


    var getScriptPath = function (jsfile) {
        var e = {};
        var htmlPath = "";
        var jsPath = "";

        if (document.location.protocol === 'file:'){
            e.BasePath = unescape(document.location.pathname.substr(1));
            e.BasePath = 'file://' + e.BasePath.substring(0,e.BasePath.lastIndexOf('/')+1);
            e.FullBasePath = e.BasePath;
        } else {
            e.BasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('/')+1);
            e.FullBasePath = document.location.protocol + '//' + document.location.host + e.BasePath;
        }

        htmlPath = e.FullBasePath; 
        var i, at, src, slc, scriptTag = document.getElementsByTagName("script");

        for (i = 0; i < scriptTag.length; i++) {
            src = scriptTag[i].src;
            at = src.lastIndexOf(jsfile);

            if (at!==-1) {
                at++;
                slc=src.toLowerCase();
                if (slc.indexOf("file://") === 0) {
                    jsPath = src.substring(0,at);
                    break;
                } else if (slc.indexOf("http://") === 0) {
                    jsPath = src.substring(0,at);
                    break;
                } else if (slc.indexOf("https://") === 0) {
                    jsPath = src.substring(0,at);
                    break;
                } else if (slc.indexOf("../") === 0) {
                    jsPath = htmlPath + src.substring(0,at);
                    break;
                } else if (slc.indexOf("./") === 0) {
                    jsPath = htmlPath + src.substring(0,at);
                    break;
                } else if (slc.indexOf("/") === 0) {
                    if (document.location.protocol === 'http:' || document.location.protocol === 'https:') {
                        jsPath = document.location.protocol + "//" + document.location.host + src.substring(0,at);
                    }
                    break;
                } else if (slc.search(/^([a-z]{1}):/) >= 0) {
                    jsPath = src.substring(0,at);
                    break;
                } else {
                    jsPath = htmlPath;
                }
            }
        }
        return jsPath;
    };

    
    var getScriptName = function () {
        var js = document.scripts;
        return js[js.length-1].src.substring(js[js.length-1].src.lastIndexOf("/"));
    }


    var appendScript = function (url, source, head) {
        if ( source && !document.getElementById(url) ) {
            var oHead = head ? head : document.getElementsByTagName("HEAD").item(0);
            var oScript = document.createElement("script");
            oScript.language = "javascript";
            oScript.type = "text/javascript";
            oScript.id = url;
            oScript.defer = true;
            oScript.text = source;
            oHead.appendChild(oScript);
        }
    }


    var importScripts = (function (globalEval) {
        var oHead = document.getElementsByTagName("HEAD").item(0);

        var xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else if ( window.ActiveXObject ) {
            try {
                xhr = new ActiveXObject("MsXml2.XmlHttp");
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        if (! xhr) {
            throw "prerequisite.js: XMLHttpRequest Not supported."
        }

        var basePath = null;

        return function importScripts () {
            var
                args = Array.prototype.slice.call(arguments),
                len = args.length,
                i = 0,
                meta,
                data,
                content
            ;

            if (!basePath) {
                basePath = getScriptPath(getScriptName());
            }

            for (; i<len; i++) {
                var url = basePath + args[i];

                if (url.substr(0, 5).toLowerCase() === "data:") {
                    data = url;
                    content = data.indexOf(",");
                    meta = data.substr(5,content).toLowerCase();
                    data = decodeURIComponent(data.substr(content+1));

                    if (/;\s*base64\s*[;,]/.test(meta)) {
                        data=atob(data);
                    }

                    if (/;\s*charset=[uU][tT][fF]-?8\s*[;,]/.test(meta)) {
                        data = decodeURIComponent(escape(data));
                    }
                } else {
                    xhr.open("GET", url, false /* async = false */);
                    xhr.send(null);
                    data = xhr.responseText;
                }

                /* globalEval(data); */
                appendScript(url, data, oHead);
            }
        };
    } (eval));


    /**
     * global functions:
     */
    window.UTIL.ERRINDEX = -1;
    window.UTIL.DEBUG = DEBUG;
    window.UTIL.log = log;
    window.UTIL.importScripts = importScripts;
}(window));


最后我总结一下, 为了实现类似C/java的文件引用包含, 我写了一个prerequisite.js, 它提供全局的函数UTIL.importScripts(), prerequisite.js唯一的要求就是必须在页面的其他js加载前加载. 以后我们就可以在我们的js里使用UTIL.importScripts() 包含任何你想要包含的js文件. 因为我们必须要保证包含的文件必须被加载, 因此UTIL.importScripts()采用的是同步模式.

 

 

好了, 大胆的使用这个技巧吧, 你就可以实现真正的code behind. 总共就3步:

1) 写一个A.html, 并将prerequisite.js作为第一个引入的js文件;

2) 写自己的B.js库, 需要引用其他C.js, D.js, E.js文件的时候,就在B.js文件头部使用

UTIL.importScripts("/path/C.js", "/path/D.js", "/path/E.js");

3) path是C,D,E.js相对于B.js的路径.

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/suncoolcat/p/3293970.html

weixin_30756499
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WTL webbrowser javascript c++ 开发html界面
02-23
一直想做html的界面，基于MFC的html界面开发网上有很多源码，但是使用WTL开发的网上资源很少。CSDN上有些貌似的资源不过可惜的还是MFC的翻版，让人可恨的是，抄别人的代码，你也改改文件名，函数明吧，你就把别人的代码拿过来删掉全部的注释，然后就说自己开发，垃圾。 这个是我在www.codeproject.com上找到的源码，个人感觉不错，能够让人清晰的知道如何开发html界面，以及c++与javascript的交互（双方面）。
html插入运行c程序,WebAssembly之使用JS调用C/C++接口
weixin_32762235的博客
06-16 1449
image.png如果想在C/C++代码中定义一个需要从JavaScript调用的函数，可以使用Emscripten 的ccall()函数并使用EMSCRIPTEN_KEEPALIVE声明(它将添加函数到导出函数列表)来完成。代码创建创建一个test.c文件：#include #include int main(int argc, char ** argv){printf("Hello World...
html写界面，C++|Qt后台处理业务（后台登录例子JavaScript给Qt提供数据）
IT1995的博客
03-25 7073
目录 背景 演示及源码 背景 因为前些日子，去了XX培训，看到某公司写的软件，简直惊艳无比，如果使用Qt传统的widgets来写，辣么，将会是无比的复杂。 如果使用qml去写，难道稍微降低了一点点，但还是比较难。 但是，如果用html写，那尼玛就简单很多了（因为和很多三方的js，提供了很有意思的功能）。 下面来演示Html使用JavaScript和Qt进行数据交互的...
C++界面库HtmlForm
02-17 423
HtmlForm是一个开源的Win32界面库,支持用Html开发本机程序,兼容一切Html标签及JS函数,是Windows平台开发桌面程序的首选 下面是使用该界面库制作的一个Demo: 为什么说该界面库是是Windows平台开发桌面程序的首选呢? 首选，该界面可使用大名鼎鼎的Webk...
函数封装：Ajax发送http请求（get&post）
cherish152的博客
07-18 646
ajax_tool.js： // 方法：ajax get 五部曲 function ajax_get(url,data) { // 异步对象 var ajax = new XMLHttpRequest(); // url 方法 // 如果是get发送数据 发送的格式为 xxx.php?name=jack&age=18 // 所以 这里 需要拼接 url if (data)...
jquerymnw.rar_JavaScript/JQuery_Visual_C++_
08-11
jquery代码实现仿微博文字滚动效果，带渐变的竖向图文列表滚动特效，整体向下滚动，自动补全第一条内容，就像无缝循环滚动一样，内容是不间断循环的
json for modern c++
03-24
4.使用json 像使用STL容器一样。 5.STL和json容器之间可以相互转换。 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用...
JavaScript中的对象与JSON
12-08
从另一方面来说，javascript对象是javascript语言中的一种数据类型，就像PHP中的数组、C++中类和结构体。 定义JSON与javascript对象 在javascript程序中定义对象的时候，对象的属性名可以加双引号也可以不加双引号。...
Javascript this 的一些学习总结
10-28
相信有C++、C#或Java等编程经验的各位，对于this关键字再熟悉不过了。由于Javascript是一种面向对象的编程语言，它和C++、C#或Java一样都包含this关键字，接下来我们将向大家介绍Javascript中的this关键字
C++和JS代码相互调用
09-17
c++和JS代码相互调用 利用COM原理 有一个类做了封装，大家可以照着Demo学习
C++中各类插件
10-30
Visual C++ 6.0中会用到的插件，ws2_32.dll是一款Windows系统中的必备组件文件之一。ws2_32.dll的丢失或者损坏会造成系统自使用过程中部分软件或者游戏无法正常开启使用，只有下载该文件，放进指定位置运行后即可修复。
C++与js相互调用
10-13
这里是 VC与JavaScript交互(三) ———— JS调用C++，下载的时候需要看清楚
C++读取html内容
11-27
C++读取html内容，支持HTTPS,只包含cpp,h文件，可以应用到任何C++项目经理
flask与js交互的示例代码_QT5.12 C++与前端JavaScript/HTML实现通信交互
weixin_39777242的博客
11-21 206
"WebSocket connection to 'ws://localhost:12345/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED" 最近在公司实习，使用QT开发需要导出分析报告，选择使用HTML&JS进行页面渲染，那么问题来了，如何实现 C++ QT 和 JavaScript 的通...
[C++]自己编写简单浏览器：HTML, CSS和JavaScript一起跑起来了
weixin_44040041的博客
12-22 338
自己第一次实现浏览器三大组件同时运行起来。虽说JavaScript是刚刚开了个头， 虽说还不知道如何支持if和循环， 但这对我来说确实是一个大突破。见图；
QWebEngine 之 C++与Js通信
wjjontheway的专栏
12-14 4224
文章目录QWebEngine 之 C++与Js通信Qt 嵌入式网页技术QWebChannel简介js 与 C++ 互相调用js 向C++传递参数从C++端传递参数到js端使用信号传递数据C++直接调用Js方法 QWebEngine 之 C++与Js通信 Qt 嵌入式网页技术 在传统的Widget中嵌入支持H5 和 js 技术的控件 对于client中的JS本质来说，Qt WebEngine主要是提供了一个JS的宿主环境- Chromuim项目下的v8引擎。另外在Qt提供的web渲染引擎是Chromuim
从C++转成JS的那些事
新兴IT民工的专栏
08-26 3293
前言JS的一些硬伤与尝试是编译还是解释变量是动态还是静态asm.jswasmLLVM编译过程与LLVM关于两种编译器和的小历史顺带了解一下的ASTWebAssemblyEmscripten记录下emscripten的安装过程构建系统工具对wasm的支持V8引擎nodeJS 前言 最近接触到了不少前端的技术，作为一个老的C++程序员，了解到竟然可以把C++代码直接编译成JS在前端运行感觉到不可思议，于是就跳入了这个大坑。 从我这个老的C++程序员的理解顺序来说，我是从如下几个方面去了解整个webas
字符串序列判定/最后一个有效字符( c++ java javascript python )
最新发布
01-14
例如，在C语言中，可以使用strrchr()函数，在Java语言中，可以使用lastIndexOf()函数，在JavaScript语言中，可以使用lastIndexOf()函数，在Python语言中，可以使用rfind()函数。这些函数都可以返回最后一个有效字符...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值