javascript动态加载实现方法一

现在也有很多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();
});

(0)

相关推荐

  • js加载之使用DOM方法动态加载Javascript文件

    传统上,加载Javascript文件都是使用<script>标签. 就像下面这样: <script type="text/javascript" src="example.js"></script> <script>标签很方便,只要加入网页,浏览器就会读取并运行.但是,它存在一些严重的缺陷. (1)严格的读取顺序.由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,

  • JavaScript动态创建link标签到head里的方法

    本文实例讲述了JavaScript动态创建link标签到head里的方法.分享给大家供大家参考.具体分析如下: 相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签--link标签.这里我们就来说说如何在浏览器中动态创建link标签. 使用 jQuery 创建 link 标签 如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的: 复制代码 代码如下: var cssURL = '/style.css',     linkTag = $('<l

  • 深入理解Javascript动态方法调用与参数修改的问题

    Javascript中可以对所传参数在函数内进行修改,如下 复制代码 代码如下: function func1(name) {     name = 'lily';     alert(name); } func1('jack');//输出lily 再看一个例子 复制代码 代码如下: function fun1(n) {     this.name = n; } function fun2(name) {     fun1.call(this,'lily');     alert(name);

  • javascript动态创建及删除元素的方法

    本文实例讲述了javascript动态创建及删除元素的方法.分享给大家供大家参考.具体分析如下: 在DOM中我们可以方便快速的动态删除与删除dom元素,这里我们就来给各位朋友简单的介绍一下. 例1: 动态创建一个按钮 复制代码 代码如下: <html> <head> <title>动态创建按钮</title> <script language="javascript"> var a,b,ab,ba,c; function cr

  • javascript动态添加、修改、删除对象的属性与方法详解

    现在介绍如何为一个对象添加.修改或者删除属性和方法.在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而且程序必须经过重新编译.JavaScript 中却非如此,它提供了灵活的机制来修改对象的行为,可以动态添加.修改.删除属性和方法.例如首先使用类Object来创建一个空对象user:var user=new Object(); 1.添加属性这时user 对象没有任何属性和方法,显然没有任何用途.但可以为它动态的添加属性和方法,例如:user

  • javascript中兼容主流浏览器的动态生成iframe方法

    以下代码在IE8下运行通过,在IE9中出错: 复制代码 代码如下: document.createElement('<iframe id="yige-org-iframe" src="yige.org.logo.gif" style="position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;"></iframe>'); 错误提示:excep

  • Javascript动态引用CSS文件的2种方法介绍

    最近做一个项目,需要javascript动态插入样式,结果以前的方法失效了!查了2个小时的原因竟然是自己手贱,这个最后再说! javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现和页面换肤的时候.最近做的这个任务是用户在别人的站点上点击一个按钮,就会在别的站点页面下插入一个脚本,执行,这其中包含了样式的插入. 一般情况下javascript动态插入样式有两种,一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件,另一种是在页面中使用

  • IE8中使用javascript动态加载CSS的解决方法

    众所周知做前端开发的都恨不得踹IE开发者几脚,IE开发者名声之差不低于GFW开发者,昧着良心搞坏市场,人人得而诛之,但是在中国这些地方市场占有率摆在那里,没办法只能向现实低头. 最近我们产品需要在浏览器里动态载入一段CSS,以前的代码是直接用的: 复制代码 代码如下: var bubbleCss = document.createElement('style');bubbleCss.type = 'text/css';bubbleCss.innerHTML = blc_conf.bubbleSt

  • JavaScript 动态创建VML的方法

    要使用VML,我们首先要开辟一个命名空间.以前动态创建比较麻烦 document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml', "#default#VML"); ie8出现后,微软一口气升级了IE6,IE7.创建方法更简单. document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml'); 它们的作用相当于把HTML标签搞成下面这个样子: <html x

  • javascript动态加载实现方法一

    现在也有很多JS动态加载的框架,比如In.js.但是这种并不是我想要的编写方式,我来说说我的想法. 先来一段java代码 复制代码 代码如下: import Biz.User; User u = new User(); u.show(); 按流程就是导包.实例化.调用. JS是做不了导包的,或者说代码意义上的导包,一般只是在页面上进行script标签的引入. 那么 先假设需要写成这样 复制代码 代码如下: Using("User"); var u = new User(); u.sho

  • javascript动态加载三

    之前两篇都介绍了,通过动态加载JS文件或者说JS模块,是怎么一步一步实现. 首先是通过同步策略来实现模块加载与回调函数之间进行分离,接着是通过异步策略来实现模块加载与回调函数之间进行分离. 这一篇,主要是为了说说怎么优化异步策略,并且实现了随意加载(非任意顺序加载模块),页面Ready之后加载文件.先接一下上一篇遗留下来的问题 1.页面Ready之后进行加载 2.随意添加模块 进行加载 看第一个问题,这个问题其实还是比较简单的,主要是监听页面的DOMContentLoaded事件,这里就不多讲解

  • 使用javaScript动态加载Js文件和Css文件

    JS动态加载CSS 在可换主题的界面中具有很重要的意义,用户可以根据自己的浏览习惯选择自己喜欢的页面显示方式,下面详细说明. 希望下面的方法对你有帮助. (1)使用JavaScript动态加载Js文件 /*JavaScript动态加载Js文件*/ var scriptNode = document.createElement('script'); scriptNode.src = 'proxy.js?t='+new Date().getTime();/*附带时间参数,防止缓存*/ documen

  • JavaScript动态加载样式表的方法

    本文实例讲述了JavaScript动态加载样式表的方法.分享给大家供大家参考.具体如下: 如果需要更换皮肤,我们可以通过JS代码动态加载皮肤的样式表,下面的代码就可以做到,非常简单,你只需要把这段代码做成函数动态调用即可. var el = document.createElement('link'); el.rel = 'stylesheet'; el.type = 'text/css'; el.href = 'http://www.jb51.net/...' + 'styles.css';

  • javascript动态加载二

    在上一篇javascript动态加载中,提到了使用同步加载策略这一个方式来实现如 复制代码 代码如下: Using("jquery"); Using("User"); $("#ID").click(function(){ var user = new User(); user.name = "xx"; user.show(); }); 由于JS是单线程的,所以同步策略带来的坏处不少,比如阻止之后的代码运行.造成浏览器假死等问题

  • 如何实现JavaScript动态加载CSS和JS文件

    项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var link =

  • JavaScript动态加载重复绑定问题

    前言 在添加一条数据时,使用动态加载显示在界面,后来发现一个严重的bug,拿我做的这个便签为例,当我添加一条数据后,然后点击删除的时候,提示是否删除,如下图: 但是当我添加两条以上的数据时,删除第几条就会提示几次是否确认删除. 经过排查,终于发现问题所在. 正文 当动态添加内容后,通常会写上添加的这些div中需要用到的事件,比如click事件/chang事件等.还拿我的删除事件为例,由于删除事件必须写在添加便签的事件下,所以当添加第一条数据时,绑定一次,添加第二条时,绑定一次,添加第n条数据时,

  • JavaScript 动态加载脚本和样式的方法

    一 动态脚本 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的JS脚本而降低了整站的性能; 所以就出现了动态脚本的概念,在适时的时候加载相应的脚本; 1.动态引入js文件 var flag = true; if(flag){ loadScript('browserdetect.js'); // 调用函数,引入路径; } function loadScript(url){ var script = document.createElement('script'); // 创建script

  • javascript 动态加载 css 方法总结

    1. 用在外部CSS文件中加载必须的文件 @importurl(style.css); //只能用在CSS文件中或者style标签中 2. 简单的在页面中加载一个外部CSS文件 document.createStyleSheet(cssFile); 2. 用createElement方法创建CSS的Link标签 varhead=document.getElementsByTagName('HEAD').item(0); varstyle=document.createElement('link'

随机推荐