javascript动态加载实现方法一


Posted in Javascript onAugust 22, 2012

现在也有很多JS动态加载的框架,比如In.js。但是这种并不是我想要的编写方式,我来说说我的想法。

先来一段java代码

import Biz.User; 
User u = new User(); 
u.show();

按流程就是导包、实例化、调用。

JS是做不了导包的,或者说代码意义上的导包,一般只是在页面上进行script标签的引入。
那么 先假设需要写成这样

Using("User"); 
var u = new User(); 
u.show();

那么,在JS里面可以实现吗?

来一句一句的分析,当然,前提是页面并不用script标签载入user.js,不然就没意义了。

第一句

Using("User");

为什么用Using,当然只是我的一个命名想法而已,可以联想一下C#,用的就是using,借来而已。

Using里面写入的当然是我需要的对象User,顾名思义,我当然写成Using("User")了。先不说内里是怎么实现的,起码思路是这样。
因为不能模拟关键字写成 Using User;这种起码我是做不到了。
第二句和第三句

var u = new User(); 
u.show();

很正常,就是很平常的实例化与函数调用,唯一不解的是User对象哪里来的?那么当然是第一句导包的时候导入的。

流程就是这么个流程,那么到底能不能实现,关键就在第一句话。也就是说,到底能不能导包成功,而且该怎么导包。

从script标签吸引灵感,对,异步加载所需要的js文件。
也就是说

Using("User");

相当于写了一句
<script type="text/javascript" src="user.js"></script>

现在这么看下来,这么做有意义吗?就为把script标签写成JS动态引入的?或者,只为少写几个字符?

当然不能,这么做毫无意义!那要怎么做?
先从效率来讲。
如果一个页面需要载入N多js文件的时候,如下

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="view.js"></script> 
<script type="text/javascript" src="register.js"></script> 
<script type="text/javascript" src="validate.js"></script> 
<script type="text/javascript" src="user.js"></script> 
<script type="text/javascript" src="order.js"></script> 
<script type="text/javascript" src="type.js"></script>

等等等等。

是不是很吓人,那是相当吓人,而且后期维护需要很高的成本,有多少页面,可能就需要修改几个页面。那么,当页面只引入关键的几个js文件,其他文件都采用动态载入的方式呢?
比如我们只需要载入jquery文件,然后调用

$.getScript("user.js",function(){});

这样,我们就做到页面文件里面只需要引入
<script type="text/javascript" src="jquery.min.js"></script>

即可。
那么这种写法的坏处在哪里?看一段代码
$.getScript("user.js",function(){ 
$.getScript("order.js",function(){ 
$.getScript("type.js",function(){ 
$.getScript("validate.js",function(){ 
// and so on.. 
}); 
}); 
}); 
});

PS:用In.js的watch函数是可以避免这种情况产生的。这不在本博文的考虑范围了。

花眼吗?还愿意去对齐代码吗?即便有格式化工具,你还愿意将闭合括号与哪个$.getScript对应吗?当然不愿意。
那么,仿java的导包形式应声而出。

Using("User"); 
Using("Order"); 
Using("Type"); 
Using("Validate"); 
// and so on..

或者你愿意,你可以
Using("User","Type","Order","Validate",...);

写法问题 无所谓。当然我推荐使用第一种方法,清晰。

导包之后,所有的用法不需要任何嵌套,正常使用。

var u = new User(); 
var o = new Order(); 
// and so on..

但是会提出一个问题。假如异步的加载都在Using("XXX")的时候执行,那么
Using("User"); 
Using("Order"); 
Using("Type"); 
Using("Validate"); 
// and so on..

这一段我就需要异步载入4个文件,虽然是异步的,但是未免有些麻烦?而且需要创建4个链接。你愿意合并JS的话,也可以。而且,Using的时候我是不需要使用对象的,这个时候未免太浪费资源了?

至于这个问题,我的解决办法就是学习hibernate,延迟加载,按需加载。
那么怎么做呢?

Using("User");

这个时候肯定是不加载,不加载做什么?当然是返回一个mock,也就是模拟对象。给用户先用着,只有当用户真正需要使用这个对象的时候,再去加载所需的js。也就是说
Using("User"); // 这句话执行完毕之后会创建一个User对象,当时仅仅是个mock 
var u = new User(); // 这个时候用需要的是真实的User对象实例,就在这个时候去动态加载JS文件,并且返回已经实例化的User对象

大家都知道,异步加载是与当前运行的状态不冲突的,也就是说
var u = new User();

这句话执行之后,u是一个没有实际意义值的变量,而已。那么,怎么解决这个问题,我暂且想到的办法,只能是采用同步策略了。只有当js加载完毕,再去执行之后的js语句,这个地方有点遗憾,而且同步可能带来的浏览器假死,也是一个比较严重的问题,暂且不顾这些问题,希望以后能有更好的办法解决。

那问题出来了,这么做同步,有什么优势吗?
我不知道有什么优势,起码对比异步加载,应该没有劣势。比如正常的异步加载为

$.getScript("user.js",function(){ 
var u = new User(); 
});

单单执行这个语句,要执行到function,本质上也是等user.js加载完毕才会执行,那么对比
var u = new User();

理论上时间应该相当,因为都是等user.js加载完毕之后才执行的。

起码第二种看起来更像java式的代码,不必理会其他非业务相关的代码。

那么,怎么会知道需要的对象在什么地方,怎么加载进来?我能想到的就是模拟一个配置文件,为什么用配置文件,而不是像In.js用add函数或者其他框架的类似于register的函数,大概我只是想用配置文件,更像java,而且后期的修改起来也会更解耦一些吧。

Using.Config = { 
"User" : "/js/user" // 可以隐去.js 因为肯定是加载JS文件了 
}

整个思路大概就是这个样子,我在其基础上进行了一些约束,比如加入了命名空间
var u = new Using.Modules.User();

这样可以减少一些全局变量,而且有需要的话,可以插入一些所有对象可能都具有的共性,减少创建类时的重复编码。

当然,也还是支持不使用命名空间的。

为了解决这个约束的效力,加入了Class.create函数来进行类创建约束。

Using.Class.create("User",function(){ 
}).property({ 
}).static({ 
}).namespace(Using.Modules);

这里的大概意思就是

create(类名,构造函数)
property(类的属性)
static(类的静态属性)
namespace(命名空间)

引申到此,为何不加入MVC形式?
后来我发现,要MVC,那么几个类之间的动态维护,或者创建之时就由Using这个类来自动维护,暂时还没想到好的解决办法,所以没有加入其中,只能自己创建类,自己维护了.

通过上面的文字,最后得到一个Using.js
然后在页面里面就只需要引入一个

<script type="text/javascript" src="using.js"></script>

这样接下来就可以写
Using("jquery"); 
Using("User"); $("#ID").click(function(){ 
var user = new User(); 
user.name = "xx"; 
user.show(); 
});
Javascript 相关文章推荐
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
web性能优化之javascript性能调优
Dec 28 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
原生js写的放大镜效果
Aug 22 #Javascript
window.open不被拦截的实现代码
Aug 22 #Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 #Javascript
网页打开自动最大化的js代码
Aug 22 #Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 #Javascript
eval的两组性能测试数据
Aug 17 #Javascript
javascript五图轮播切换实用版
Aug 17 #Javascript
You might like
基于php冒泡排序算法的深入理解
2013/06/09 PHP
eclipse php wamp配置教程
2016/06/30 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
javascript document.referrer 用法
2009/04/30 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
Python操作列表之List.insert()方法的使用
2015/05/20 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
高考考python编程是真的吗
2020/07/20 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
运动会解说词100字
2014/01/31 职场文书
森林防火工作方案
2014/02/14 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
小学庆六一主持词
2015/06/30 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers