上一篇发出来后得到了很多回复,在此首先感谢大家的热情捧场!有的推荐第三方框架,比如 In.js、requrieJS、sea.js、lab.js等。这个开阔了眼界,以前只知道sea.js,省去了自己搜索的麻烦。也用了点时间简单看了一下,因为每一个都是大块头,都有自己的理念,如果只是简单使用的话,那么谁便找一个就可以了,但是我习惯把原理弄清楚。因为我觉得虽然不知道原理也可以使用,但是知道了原理后,可以用的更好

  主要看的是sea.js,目前简单的理解是:一个加载js的机制 + 模块化编程(CMD规范)的理念。这个是淘宝用的,肯定很强大、很结实了。那么我是不是拿来用呢?这就要看看我到底想要什么,以及改动量大小。

  那么我想要啥呢?第一步只想要一个可以动态加载js的代码,越简单越好。为啥呢?越简单就越不需要修改。为啥要求不需要修改呢?因为我想达到的效果是,每个页面只需要 <script type="text/javascript" src="/boot.js"></script> 这么一行,就可以把所有的共用的js文件都统统的加载进来,并且可以自动更新。

  不知道大家有没有发现一个问题,boot.js 可以搞定其他js文件的更新,但是他自己的更新如何搞定呢?有两个方法,一个是在后面加个随机数作为参数;另一个就是一辈子都不需要修改。我不想用前者,因为每次都要去服务器加载,和初衷不符。我想用后者,当然我也知道,不可能一辈子不变,只能尽量延迟修改的时间。所以就需要——简单。越简单越不需要修改,也就可以保持更长的时间。所以我起名叫做 boot。就是一个简单的引导(加载)的功能。

  第二步才开始真正的管理js文件。这时候可以考虑使用第三方框架,当然也可以自己写。因为我可以用boot.js来确保加载哪些文件,以及加载最新的文件。在第二步就需要确定一个解决方案。我的想法就是做一个js文件服务。由这个服务实现加载js、更新js、加载顺序(依赖),还有复用。

  如果我们要做五个项目,每个项目都是一个独立的站点,那么对于共用的js文件是怎么处理的呢?1、每个项目站点都放一份,引用自己站点里的。2、做一个独立的站点存放共用的js,然后其他的项目都统一到这里引用。我用的是第二个方法,你们呢?

  突然想到一个问题,我们写js到底要达到什么目的(效果)?基础功能(jQuery、my97、editor等)、UI(easyUI等)、处理业务逻辑(做点判断了啥的)。还有其他的啥。我们每写一个js文件,都需要考虑要引用哪些文件吗?目前我做的项目是,由js文件服务来搞定js文件的加载,然后写点处理业务逻辑的代码就ok了。

  想说的还有很多,只是思路有点乱。后续要上具体的代码了,不知道大家是不是喜欢。

ps:

面对的问题。引用 https://github.com/seajs/seajs/issues/547

恼人的命名冲突

我们从一个简单的习惯出发。我做项目时,常常会将一些通用的、底层的功能抽象出来,独立成一个个函数,比如

function each(arr) {
// 实现代码
} function log(str) {
// 实现代码
}

并像模像样地把这些函数统一放在 util.js 里。需要用到时,引入该文件就行。这一切工作得很好,同事也很感激我提供了这么便利的工具包。

直到团队越来越大,开始有人抱怨。

小杨:我想定义一个 each 方法遍历对象,但页头的 util.js 里已经定义了一个,我的只能叫 eachObject 了,好无奈。

小高:我自定义了一个 log 方法,为什么小明写的代码就出问题了呢?谁来帮帮我。

抱怨越来越多。团队经过一番激烈的讨论,决定参照 Java 的方式,引入命名空间来解决。于是 util.js 里的代码变成了

var org = {};
org.CoolSite = {};
org.CoolSite.Utils = {}; org.CoolSite.Utils.each = function (arr) {
// 实现代码
}; org.CoolSite.Utils.log = function (str) {
// 实现代码
};

引用结束。

现在我采用的也是命名空间的方式,当然是按照.net的习惯来的。

好的js文件艾

不知不觉居然写了这么多。用命名空间确实便于管理。尤其是管理源码。另外也应该学习一下CMD、AMD都是啥,自己写的代码也应该规范一点。

  

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的动态加载、缓存、更新以及复用(三)

    总体思路 1.  建立一个js服务,该服务实现通用js文件的加载.依赖.缓存.更新以及复用. 2.  各个项目如果使用通用js,可(bi)以(xu)使用js服务实现加载. 3.  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. poj 2385Apple Catching(简单dp)

    /* 题意: 有两棵苹果树,每一棵苹果树每一秒间隔的掉落下来一个苹果,一个人在树下接住苹果,不让苹果掉落! 人在两棵树之间的移动是很快的!但是这个人移动的次数是有限制的,问最多可以接住多少个苹果! 思 ...

  2. Java多线程系列--“JUC集合”06之 ConcurrentSkipListSet

    概要 本章对Java.util.concurrent包中的ConcurrentSkipListSet类进行详细的介绍.内容包括:ConcurrentSkipListSet介绍ConcurrentSki ...

  3. php基础教程-变量

    变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念.变量可以通过变量名访问.在指令式语言中,变量通常是可变的:但在纯函数式语言(如Haskell)中,变量可能是不可变(immutable) ...

  4. ASProtect注册码使用教程|ASProtect SKE(加壳脱壳工具) 2.56 汉化注册版

    ASProtect 是功能非常完善的加壳.加密保护工具.能够在对软件加壳的同时进行各种保护.如:反调试跟踪.自校验及用密钥加密保护等:还有多种限制使用措施,如:使用天数限制.次数限制及对应的注册提醒信 ...

  5. MAC与HMAC的介绍及其在AWS和Azure中的应用

    MAC 在密码学中,(消息认证码)Message Authentication Code是用来认证消息的比较短的信息.换言之,MAC用来保证消息的数据完整性和消息的数据源认证. MAC由消息本身和一个 ...

  6. [Python] Ubuntu12.04LTS

    Ubuntu 12.04LTS中缺省安装了Python2.7.3. python -h 查看可用选项 python -V 查看Python版本 下面写个简单的测试程序: 新建HelloWorld.py ...

  7. 百度,淘宝,腾讯三大巨头HTML页面规范分解

    [兼容html5方案] 百度贴吧,百度图片的实现 <!--[if lt IE 9]> <script> (function(){ var tags = ['header','f ...

  8. 关于Unicode和URL encoding入门的一切以及注意事项

    本文同时也发表在我另一篇独立博客 <关于Unicode和URL encoding入门的一切以及注意事项>(管理员请注意!这两个都是我自己的原创博客!不要踢出首页!不是转载!已经误会三次了! ...

  9. 15 Best Responsive HTML5 Frameworks 2014

    Best HTML5 frameworks are most popular because with the use of these frameworks you can create websi ...

  10. 扩展Exception,增加判断Exception是否为SQL引用约束异常方法!

    在设计数据表时,如果将某些列设置为关联其它表的外键,那么如果对其进行增加.修改操作时,其关联表若没有相匹配的记录则报错,或者在对其关联表进行删除时,也会报错,这就是外键约束的作用,当然除了外键还有许多 ...