体彩排列5双期走势图

站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 探索angularjs+requirejs全面实现按需加载的套路
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

探索angularjs+requirejs全面实现按需加载的套路

来源: 易采站长站

在进行有一定规模的项目时,通常希望实现以下目标:1、支持复杂的页面逻辑(根据业务规则动态展现内容,例如:权限,数据状态等);2、坚持前后端分离的基本原则(不分离的时候,可以在后端用模版引擎直接生成好页面);3、页面加载时间短(业务逻辑复杂就需要引用第三方的库,但很可能加载的库和用户本次操作没关系);4,还要代码好维护(加入新的逻辑时,影响的文件尽量少)。

想同时实现这些目标,就必须有一套按需加载的机制,页面上展现的内容和所有需要依赖的文件,都可以根据业务逻辑需要按需加载。最近都是基于angularjs做开发,所以本文主要围绕angularjs提供的各种机制,探索全面实现按需加载的套路。

一、一步一步实现
基本思路:1、先开发一个框架页面,它可以完成一些基本的业务逻辑,并且支持扩展的机制;2、业务逻辑变复杂,需要把部分逻辑拆分到子页面中,子页面按需加载;3、子页面中的展现内容也变了复杂,又需要进行拆分,按需加载;4、子页面的内容复杂到依赖外部模块,需要按需加载angular模块。

1、框架页
提到前端的按需加载,就会想到AMD( Asynchronous Module Definition),现在用requirejs的非常多,所以首先考虑引入requires。

index.html

<script src="static/js/require.js" defer async data-main="/test/lazyspa/spa-loader.js"></script>

注意:采用手动启动angular的方式,因此html中没有ng-app。

spa-loader。js

require.config({
  paths: {
    "domReady": '/static/js/domReady',
    "angular": "//cdn.bootcss.com/angular.js/1.4.8/angular.min",
    "angular-route": "//cdn.bootcss.com/angular.js/1.4.8/angular-route.min",
  },
  shim: {
    "angular": {
      exports: "angular"
    },
    "angular-route": {
      deps: ["angular"]
    },
  },
  deps: ['/test/lazyspa/spa.js'],
  urlArgs: "bust=" + (new Date()).getTime()
});

spa。js

define(["require", "angular", "angular-route"], function(require, angular) {
  var app = angular.module('app', ['ngRoute']);
  require(['domReady!'], function(document) {
    angular.bootstrap(document, ["app"]); /*手工启动angular*/
    window.loading.finish();
  });
});

2、按需加载子页面
angular的routeProvider+ng-view已经提供完整的子页面加载的方法,直接用。
注意必须设置html5Mode,否则url变化以后,routeProvider不截获。

index.html

<div>
  <a href="/test/lazyspa/page1">page1</a>
  <a href="/test/lazyspa/page2">page2</a>
  <a href="/test/lazyspa/">main</a>
</div>
<div ng-view></div>

spa.js

app.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  /* 必须设置生效,否则下面的设置不生效 */
  $locationProvider.html5Mode(true);
  /* 根据url的变化加载内容 */
  $routeProvider.when('/test/lazyspa/page1', {
    template: '<div>page1</div>',
  }).when('/test/lazyspa/page2', {
    template: '<div>page2</div>',
  }).otherwise({
    template: '<div>main</div>',
  });
}]);

            
Tags:
最新图文资讯
1 2 3 4 5 6
体彩排列5双期走势图相关的文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -
辽宁福彩35选7和值走势图 齐鲁风采23选5复式计算表 华东15选5走势图 福彩双色球201遗漏走势图 福彩双色球蓝球201走势图 河北福彩20选5走势图 江苏体彩七位数走势图 体彩排列3类型走势图 河南福彩22选5大小走势图 浙江体彩6 1质合走势图 河北福彩排列7走势图 齐鲁风采23选5除三走势图 体彩七星彩走势图 浙江体彩6 1历史开奖号码 浙江体彩20选5走势图 华东15选5除五走势图 福彩3D走势图 河南福彩22选5中奖规则 河北福彩20选5走势图 齐鲁风采23选5重号分布图