ext.js缓存问题导致js文件不对

JavaScript024

ext.js缓存问题导致js文件不对,第1张

ext.js缓存问题导致js文件不对可以在页面引入的js文件后面增加日趋,如果不经常改动的文件,可以在每次改动后修改后缀。当页面之前已经被该浏览器访问过,那这个路径访问的js文件已经被缓存在浏览器中了,所以再次通过该路径访问该js文件时,此时访问的是缓存中的js文件,而不是从服务器中获取的。因此当下次服务器中修改了api.js这个文件时,想要用户重新获取修改后的api.js文件,那么要修改访问该js的路径,就是在路径后面添个版本号。这样的话,浏览器加载的时候发现路径变了就会重新加载这个js文件的内容了。由于效率的缘故,浏览器通常会缓存js文件,这就给我们带了一个问题:当服务器端部署的项目中的js文件进行了修改后,如果再客户端不手动去刷新一次页面,js的修改效果就不会起作用,因为浏览器还是用的缓存在本地的js文件。

您需要的是一个动态加载的功能。判断哪些JS(或类)被加载过,而只加载没有的类库。

DOJO

有个动态加载的机制,但我没用过不好评论。

我的做法是用单独做一个JS包,尽可能少的依赖别的架构。用它实现动态加载。一是完成防止自身重复加载,二是有一个页面全局的注册机(一个HASH对象就可以搞定,很简单)

而程序要变的地方有两个,

首先,是所有的JS都用它加载,保障在注册机中的唯一性;

其次,在使用EXT类库的地方,需要等动态加载完以后才可以使用所有的EXT类库。类似的你可以写一个onReadyXXX()的方法。

另外,

相信您也看过动态加载JS的办法,这里还需要注意的一点是FF,IE,Safari对Document.write的JS加载办法处理不一样,IE是同步的,其它是异步的,所以在写这个动态加载类库里要由其注意。需要判断浏览器,要有不同的加载实现。

研究一下 extjs的tree树形结果,已经封装的很简单了

Ext.require([

'Ext.tree.*',

'Ext.data.*'

])

Ext.onReady(function() {

var store = Ext.create('Ext.data.TreeStore', {

proxy: {

type: 'ajax',

url: 'get-nodes.php',

extraParams: {

isXml: true

},

reader: {

type: 'xml',

root: 'nodes',

record: 'node'

}

},

sorters: [{

property: 'leaf',

direction: 'ASC'

},{

property: 'text',

direction: 'ASC'

}],

root: {

text: 'Ext JS',

id: 'src',

expanded: true

}

})

// create the Tree

var tree = Ext.create('Ext.tree.Panel', {

store: store,

hideHeaders: true,

rootVisible: true,

viewConfig: {

plugins: [{

ptype: 'treeviewdragdrop'

}]

},

height: 350,

width: 400,

title: 'Directory Listing',

renderTo: 'tree-example',

collapsible: true

})

})