1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

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

作者:用户 来源:互联网 时间:2016-03-28 10:05:21

文件代码function项目简单工程项目复用一个util.jsjs是什么文件JS用easyui动态editorin.js写jsLab.js

js的动态加载、缓存、更新以及复用(二) - 摘要: 本文讲的是js的动态加载、缓存、更新以及复用(二),  上一篇发出来后得到了很多回复,在此首先感谢大家的热情捧场!有的推荐第三方框架,比如 In.js、requrieJS、sea.js、lab.js等。这个开

 上一篇发出来后得到了很多回复,在此首先感谢大家的热情捧场!有的推荐第三方框架,比如 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的动态加载、缓存、更新以及复用(二)-跨页面加载 字段复用

好的js文件艾

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



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索文件 , 代码 , function , 项目 , 简单 , 工程项目复用 , 一个 , util.js , js是什么文件 , JS用 , easyui动态editor , in.js , 写js Lab.js 跨页面加载 字段复用、动态缓存、nginx缓存动态页面、varnish 动态缓存、squid 动态缓存,以便于您获取更多的相关知识。

前端-requirejs的data-main加载一次后,后面就更新不了?如何解决

问题描述 requirejs的data-main加载一次后,后面就更新不了?如何解决 data-main加载main.js之后,改变了main.js,刷新网页也不更新,加载的还是最初的js,难道就没有人遇到吗?没有人遇到吗?...

javascript的动态加载、缓存、更新以及复用(一)_javascript技巧

...确保加载顺序?本文内容就是分享一下我的解决方案。 动态加载   在页面里使用加载js,显然很麻烦,那么怎么办呢?想来想去还是用动态加载的方法来解决。在网上也搜索了一番,有很多种方法,有自己手动写的,有整理...

聊一聊淘宝首页和它背后的一套

...首页需要对接形形色色的系统,接口繁多。后面会提到对动态数据源的整合。 并且这些系统对应的域名是不一样的,JSONP 格式自然也就成了首选。但一些特殊的系统,比如广告,它的渲染并不是一个简单的 JSONP 请求,可能它还...

京东上千页面搭建基石——CMS前后端分离演进史

...需要展示的内容在本机获取、封装、校验; 5. 模块化、动态数据类型初期版本(CMS 3.0会细说); 架构图: 对比1.0,新的CMS可以让频道页的开发周期降低2~4周,大大提高了业务需求的响应速度;它看起来更独立,更像一个整...

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

...确保加载顺序。本文内容就是分享一下我的解决方案。 动态加载   在页面里使用加载js,显然很麻烦,那么怎么办呢。想来想去还是用动态加载的方法来解决。在网上也搜索了一番,有很多种方法,有自己手动写的,有整理...

前三篇
后三篇