总体思路

1、  建立一个js服务,该服务实现通用js文件的加载、依赖、缓存、更新以及复用。

2、  各个项目如果使用通用js,可(bi)以(xu)使用js服务实现加载。

3、  Js服务只提供通用的js,比如jQuery、my97、easyUI等(可根据实际情况设定具体的js文件)。

4、  其他针对特点需求写的js文件,需要自己写代码加载。Js服务可以提供加载用函数。(正在考虑要不要使用sea.js)

5、  Js服务加载的js文件,不需要做任何修改。当然也不负责各个文件里的函数名称是否冲突。

  Sea.js追求自然编程,代码要写的自然。很是巧合我也推崇自然编程,我写的框架就叫做“自然框架”。只是在加载js这块和sea.js的思路有点不同。

  一个项目里需要的js文件可以分为三种:第三方通用js(比如jQuery、my97等);自己公司写的通用js(比如我写的NatureUI);自己对特定需求写的特定js。

  我觉得对于通用的js,就不需要每次用的时候都去写一行代码进行加载,太麻烦了。比如jQuery,加载(自动处理)之后我直接$就可以用了,没必要在写一行加载用的代码。因为Js服务会把各种通用js文件一次性的加载到top页面,然后利用“复用”的方式,让其他页面可以直接使用。也就是说在子页里,不用去考虑jQuery有没有加载,加载完成了没,不用再令写一行加载的js,直接用就好了。

  就像我们写C#代码,新建一个项目的时候,VS会把常用的dll引用进来;新建一个页面的时候,VS会把常用的命名空间using上,不需要我没再去操心了。我觉得这种方式比较简单,至于是否自然,那就是仁者见仁智者见智了。

加载流程

看图

1、  在页面里使用<script >引用boot.js。这个主要是一个引导程序,用他来加载其他的js。

2、  然后看看是否有缓存信息。

3、  如果有缓存信息,那么说明这是子页。调用适配函数,让子页可以访问top页里加载的js文件。然后看看子页里有没有jsReady函数,如果有则调用。

4、  如果没有缓存信息,说明这是top页面,需要加载另一个js(bootLoad.js)。这个是真正干活的文件。这里放在配置信息和加载css、加载js的函数。然后开始各种加载。

  基本流程就是这样,如果你看了第一篇的预告,会感觉这个流程图似乎不太一样。确实不一样,我又修改了一遍。感觉修改后流程更简洁、思路也更清晰了。下面用FAQ的方式来进行说明。估计看了之后会有不少疑问。

FAQ

1、 为啥有一个boot.js后又有一个bootLoad.js?

  原来只有一个的,分成两个是为了让boot.js尽可能的不需要修改。因为我无法保证boot.js是最新的。

2、 Top页面是啥?

  Top页面就是最外面的页面,top页面里用iframe加载其他页面,叫做子页。

3、 子页是啥?

  在top页面里用iframe加载的页面。可以通过top.的方式来访问top页里的信息和函数。

4、 适配是啥意思?

    在子页里虽然可以访问top页里的函数,比如top.$。但是访问的时候要加上top.这个就比较麻烦了。所谓的适配,就是让程序员不用操心自己写的js是运行在top页里还是子页里,统统$就可以了。

    对于第三方插件需要做一些适配,目前已经搞定了jQuery和my97,easyUI还没有搞定。

    因为可能大家都没有想过在子页里使用top页里的函数吧,所以写插件的时候根本就没考虑。比如my97,在top页里弹出日期选择的div,由于子页和top有位置偏差,所以日期选择也偏出去了,没想到啥好办法,只好改my97 的源码了。

5、 不就是加载js吗,弄这么复杂干嘛?

    如果只有一两个js文件要加载,确实不需要这么复杂。但是如果有十多个甚至几十个js文件要加载呢?

    如果自己要开发一套UI插件,那么在开发调试阶段,要加载未合并的js,这样便于调试和修改。开发的差不多了,在改成引用合并后的js文件。那么引用js的部分怎么处理呢?尤其是一边开发UI,一边开发项目的时候。

6、 怎么还有css的事?

  Css也是要加载的,一般一个项目的各个页面用的css都是一样的。这里也顺便一起加载了。

7、 配置信息里都有啥?

    因为js服务在一个单独的站点里面,那么这个站点的网址是啥呢?192.168.0.55还是Resource.naturefw.com ?这个地址就需要在配置信息里面说明,以便于引用。另外还有单点登录的网址,还有其他的一些信息。

8、 为啥要缓存?

    不想每个页面都去加载固定不变的东东,比如配置信息和通用函数。虽然浏览器在加载的时候会启用缓存,但是不太好控制。客户端也可以强制不用缓存。也许是我控制欲比较强吧,我想更好的控制。

    另外用缓存,速度会更快一些,比较不用浏览器去做各种判断了。虽然判断的时间一般也挺快的。

9、 如何实现更新?

    用版本号,设定一个版本号,有更新了,改一下这个版本号就可以了。

10、  看你写了好几次复用,到底是啥?

    就是让子页用top页里加载好的js。

11、  如何避免各个文件里的函数名称冲突?

    我用的是命名空间的方式,C#写的比较多了,感觉命名空间挺好用的,就移植过来了。看了sea.js的介绍,里面也提到了命名空间的方式,是yahoo用过。Sea.js并不推荐,因为使用的时候要记住长长的命名空间。但是我觉得这个不算事呀。不就是长点吗,安装Resharper(R#)之后,点.也是可以出提示的。另外可以用“别名”,比如 var form = Nature.Controls.Form; 这样就好了。

12、  其他js都是怎么下载的?

    做一个js文件路径的字典,json格式,弄个昵称最为key,域名 + 路径 + 文件名作为value。按照依赖制定前后顺序,然后按照这个字典进行逐一加载就可以了。

13、  为什么没有做延迟加载?

    我把共用的js文件都加载到了top页面里,子页想用的话,直接用好了,完全没有再次加载的过程。虽然一开始需要加载更多的js,但是一般可以忍受。另外登录OA,第一件事情就是输入用户名和密码,那么完全可以利用这个“空余”时间来实现其他js的加载。

 

目前只想到这些,还有哪些疑问,欢迎大家提问。

ps:下集预告,就是看看运行效果了,可能写了这么多,大家可能还没有一个具体的概念,到底是啥样子的呀。下一篇会贴一些运行截图。

js的动态加载、缓存、更新以及复用(三)的更多相关文章

  1. js的动态加载、缓存、更新以及复用(四)

    本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...

  2. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  3. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  4. js的动态加载、缓存、更新以及复用(一)

    使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些 ...

  5. js的动态加载、缓存、更新以及复用

    使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些 ...

  6. js的动态加载、缓存、更新以及复用(二)

    上一篇发出来后得到了很多回复,在此首先感谢大家的热情捧场!有的推荐第三方框架,比如 In.js.requrieJS.sea.js.lab.js等.这个开阔了眼界,以前只知道sea.js,省去了自己搜索 ...

  7. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  8. js怎么动态加载js文件(JavaScript性能优化篇)

    下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...

  9. 篇一:js中动态加载---append

    之前是一行代码,不能动态加载,新的需求要动态加载,使用append $('#Order_information').append(' <div class="single_produc ...

随机推荐

  1. javascript语句——表达式语句、块语句、空语句和声明语句

    × 目录 [1]表达式 [2]块语句 [3]空语句[4]声明 前面的话 如果表达式在javascript中是短语,那么语句(statement)就是javascript整句或命令.表达式计算出一个值, ...

  2. Android开发之广播

    广播是Android开发中的一个重要的功能,在Android里面有各式各样的广播,比如:电池的状态变化.信号的强弱状态.电话的接听和短信的接收等等,现在给大家简单介绍一下系统发送.监听这些广播的机制. ...

  3. Android进程间通信之socket通信

    用Java中的socket编程. 通过socket实现两个应用之间的通信,可以接收和发送数据,同时将接收到的数据显示在activity界面上. Server端: ServerLastly.java p ...

  4. 可视化(番外篇)——在Eclipse RCP中玩转OpenGL

    最近在看有关Eclipse RCP方面的东西,鉴于Gephi是使用opengl作为绘图引擎,所以,萌生了在Eclipse RCP下添加画布,使用opengl绘图的想法,网上有博文详细介绍这方面的内容, ...

  5. 原生JS编写的照片墙效果实例演示特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Android网格视图(GridView)

    GridView的一些属性: 1.android:numColumns=”auto_fit”   //GridView的列数设置为自动,也可以设置成2.3.4…… 2.android:columnWi ...

  7. 170多个Ionic Framework学习资源(转载)

    在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的. ...

  8. J2EE修炼之四书五经[转自2004年程序员]

    J2EE修炼之四书五经 作者:彭晨阳 J2EE其实没有四书五经,因为J2EE一直如汹涌澎湃的大江,推陈出新,不断高速发展,这是一种带领我们走向未来的技术.当然,如何在这种气势如虹的潮流之中不至于迷失方 ...

  9. RPC原理详解

    RPC 功能目标 RPC 的主要功能目标是让构建分布式计算(应用)更容易,在提供强大的远程调用能力时不损失本地调用的语义简洁性. 为实现该目标,RPC 框架需提供一种透明调用机制让使用者不必显式的区分 ...

  10. SQL Server安全(2/11):身份验证(Authentication)

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...