具有模块自治性的Javascript单页体系结构_Javascript_Jquery

具有模块自治性的Javascript单页体系结构

javascript jquery

具有模块自治性的Javascript单页体系结构,javascript,jquery,Javascript,Jquery,我刚刚开始了这个HTML5项目，我们决定利用jQuery$.load（）方法将它变成一个单页架构。不幸的是，一旦JS开始增长，我们很快就开始遇到加载到主仪表板的模块不知道其父模块的问题架构如下所示： dashboard.html（主文件） moduleA.html moduleA.js moduleB.html moduleB.js moduleC.html moduleC.js 由于我们决定将JS作为单独的文件保存，因此我们必须通过dashboard.html加载所有JS文件，以便在加载mo

我刚刚开始了这个HTML5项目，我们决定利用jQuery$.load（）方法将它变成一个单页架构。不幸的是，一旦JS开始增长，我们很快就开始遇到加载到主仪表板的模块不知道其父模块的问题

架构如下所示：

dashboard.html（主文件）
moduleA.html
moduleA.js
moduleB.html
moduleB.js
moduleC.html
moduleC.js

由于我们决定将JS作为单独的文件保存，因此我们必须通过dashboard.html加载所有JS文件，以便在加载modulex时单独调用它们

因此，在将moduleA.html加载到仪表板时，我们必须调用其相应的JS。为此，我们只需使用模块模式编写JS，这样我们就可以通过函数调用轻松调用它，如：

另一个限制是，我们不再能够单独处理模块，因为脚本和CSS调用发生在父级（dashboard.html）上，所以当直接加载moduleA.html时，它肯定是纯html，没有脚本或CSS

我查看了其他问题，但没有发现有人有同样的问题

我看了AngularJS、EmberJS、KO.JS和BoilerPlateJS，但它们都没有提到我们正在努力实现的目标。唯一具有类似单页概念的是jQuery Mobile，但我不知道是否可以从jQuery切换到jQuery Mobile，并且一切都可以正常工作

有人面对过这个问题吗？是否有解决方案，或者我必须使用自定义解决方案

谢谢

我可以和你争论AngularJS的事。这正是你需要的

dashboard.html是附加了一些指令的布局，但如果您使用

ng view

指令，则其威力在于AngularJs

下面是一个例子：

dashboard.js

var app = angular.module("modularApp",[]);
app.config(['$routeProvider', "$locationProvider", function routes($routeProvider, $locationProvider) {
    $routeProvider.when('/dashboard', {
        controller:'HomeCtrl',
        templateUrl:'templates/home.html'
    });    
    $routeProvider.when('/moduleA', {
        controller:'ModuleACtrl',
        templateUrl:'templates/moduleA.html'
    });
    $routeProvider.when('/moduleB', {
        controller:'ModuleBCtrl',
        templateUrl:'templates/moduleB.html'
    });
    $routeProvider.otherwise({redirectTo: "/dashboard"});
}]);

var app=angular.module("modularApp");
app.controller("ModuleACtrl",function($scope){
  $scope.scopeValue="Hellow from view";
});

var app=angular.module("modularApp");
app.controller("ModuleBCtrl",function($scope){
  $scope.scopeValue="Hellow from another view";
});

模板/dashboard.html

<html ng-app="modularApp">
<head>
  <!--.... include angular minified js file and what else you need...-->
  <script type="text/javascript" src="dashboard.js"></script>
  <script type="text/javascript" src="moduleACtrl.js"></script>
  <script type="text/javascript" src="moduleBCtrl.js"></script>
</head>
<body>
  <a ng-href="#/moduleA">Open Module A View</a>
  <a ng-href="#/moduleB">Open Module B View</a>
  <!-- Add widgets header menus .... -->
  <ng-view></ng-view>
</body>
</html>

<div>{{scopeValue}} in module A</div>

<div>{{scopeValue}} in module B</div>

moduleBCtrl.js

var app = angular.module("modularApp",[]);
app.config(['$routeProvider', "$locationProvider", function routes($routeProvider, $locationProvider) {
    $routeProvider.when('/dashboard', {
        controller:'HomeCtrl',
        templateUrl:'templates/home.html'
    });    
    $routeProvider.when('/moduleA', {
        controller:'ModuleACtrl',
        templateUrl:'templates/moduleA.html'
    });
    $routeProvider.when('/moduleB', {
        controller:'ModuleBCtrl',
        templateUrl:'templates/moduleB.html'
    });
    $routeProvider.otherwise({redirectTo: "/dashboard"});
}]);

var app=angular.module("modularApp");
app.controller("ModuleACtrl",function($scope){
  $scope.scopeValue="Hellow from view";
});

var app=angular.module("modularApp");
app.controller("ModuleBCtrl",function($scope){
  $scope.scopeValue="Hellow from another view";
});

模板/moduleA.html

<html ng-app="modularApp">
<head>
  <!--.... include angular minified js file and what else you need...-->
  <script type="text/javascript" src="dashboard.js"></script>
  <script type="text/javascript" src="moduleACtrl.js"></script>
  <script type="text/javascript" src="moduleBCtrl.js"></script>
</head>
<body>
  <a ng-href="#/moduleA">Open Module A View</a>
  <a ng-href="#/moduleB">Open Module B View</a>
  <!-- Add widgets header menus .... -->
  <ng-view></ng-view>
</body>
</html>

<div>{{scopeValue}} in module A</div>

<div>{{scopeValue}} in module B</div>

但那就是，请原谅我的法语，斯多普。我在RubyonRails中尝试了两个LIB来实现类似的功能，但后端是呈现内容，或者只是部分内容。但我不确定您使用的是哪种后端，您是否有兴趣切换到rails。

BoilerplateJS中的DomController可以满足您的需要，而不使用任何自定义HTML属性。您的dashboard.html可以只在您想要注入组件的位置设置占位符。我只是从BoilerplateJS index.html中提取下面的一些html来展示它是如何工作的：

<body>
    <section id="page-content">
        <header>
            <section class="theme"></section>
            <section class="language"></section>
        </header>
        <aside>
            <section class="main-menu"></section>
        </aside>
    </section>
</body>

以上代码摘自“/boilerplatejs/src/modules/baseModule/module.js”

谢谢米兰，这是一个很好的例子。我将再次拉下AngularJS并尝试您的示例。这似乎很容易理解。