前端动态加载JS

JavaScript022

前端动态加载JS,第1张

最近机顶盒遇到一种特殊场景需要按需加载js,所以特此记录动态加载JS的方法

这个方法加载的是本地的js,如果要加载非本地js的话,应该要加上crossorigin头。

使用angularjs

+

requirejs就可以实现js文件的按需加载。

实现代码如下:

define(['app','navData'],

function

(app)

{

app.config(function($stateProvider,

$urlRouterProvider,

$controllerProvider,

navData){

app.registerController

=

$controllerProvider.register

app.loadJs

=

function(js){

return

function($rootScope,

$q){

var

def

=

$q.defer(),

deps=[]

angular.isArray(js)

?

(deps

=

js)

:

deps.push(js)

require(deps,function(){

$rootScope.$apply(function(){

def.resolve()

})

})

return

def.promise

}

}

$urlRouterProvider.otherwise('/memory')

angular.forEach(navData,

function(it){

var

st

=

it.state.split(/\./gi),

ctrlPath

=

'controllers/'

+

st[0],

ctrlName

=

'ctrl.'

+

st[0]

$stateProvider.state(st[0],{

url

:

'/'

+

st[0],

templateUrl

:

'tpls/'

+

st[0]

+

'.html',

controller

:

ctrlName,

resolve:{

deps:app.loadJs(ctrlPath)

}

})

})

})

})