MyWebsite如何发布jQuery或AngularJS,该网站A和网站B可以使用,没有冲突？

Question

假设我有一个网站MyWebsite,您可以在其中构建呼叫操作框的内容,该内容应显示在另一个网站,WebsiteA以及更多不使用iframe选择我们的解决方案的网站上.

如何使用jQuery或AngularJS创建该框,没有冲突,不知道客户在他们的网页中有什么,他们只是导入我们的some_script.js设置一些设置就是这样.最重要的是,我们不能搞砸顾客方面(显然),客户使用的技术也不应该搞乱我们的超级盒子.

我很想看到一个有效的例子.这很难(我认为),所以如果你没有解决这个问题,请在回答之前花些更多时间思考.感谢帮助人!

Answer 1

RequireJS允许您创建可消耗的JQuery/AngularJS应用程序(AMD),而无需担心版本冲突

RequireJS不是担心库noconflict's,而是在AMD的全局范围之外创建一个单独的沙箱/变量范围.在AMD内部,只提供包含的版本.

AMD -异步模块定义是自封闭的应用程序,具有自己的库范围.Self-Encolsure就像命名空间,完全没有冲突.有关使用模块的详细说明,请参阅 WHY WEB MODULES.

一个AngularJS示例,创建一个AngularMain.js文件:

require.config({
    baseUrl: "js",    
    paths: {
       'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min',
       'angularAMD': 'lib/angularAMD.min',
       'ngload': 'lib/ngload.min'
    },
    shim: { 'angularAMD': ['angular'], 'angular-route': ['angular'] },
    deps: ['AngularApp']
});

现在,require.config已经表明还应该包含AngularApp.js(正如您将看到的,RequireJS通常假设".js"扩展名),具有angular.js和angular-route.js的依赖项

现在,您可以在文件中使用RequireJS和AngularJS语法的组合来定义Angular App和Controllers AngularApp.js:

define(['angularAMD', 'angular-route'], function (angularAMD) {
    var app = angular.module("webapp", ['ngRoute']);
    app.config(function ($routeProvider) {
        $routeProvider.when("/home", angularAMD.route({
            templateUrl: 'views/home.html', controller: 'HomeCtrl',
            controllerUrl: 'ctrl/home'
        }))
    });
    return angularAMD.bootstrap(app);
});

define(['app'], function (app) {
    app.controller('HomeCtrl', function ($scope) {
        $scope.message = "Message from HomeCtrl"; 
    });
});

最后:您的HTML页面请求引用您的应用程序,引用require.js和data-main指示应用程序文件的属性.

<script data-main="js/AngularMain" src=".../require.js"></script>

再一次: ".js"文件扩展名是可选的

• 大部分代码示例都是从marcoslin.github.io借来的

• tnajdek有一个angular-requirejs-seed Git Hub repo,用于构建需要预先配置的角度应用程序.

• RequireJS官方网站有一个关于创建 JQuery AMD的好教程.