seaJs学习笔记之javascript的依赖问题
之前分别为大家介绍了有关javascript中的冲突和性能问题，今天为大家介绍一下有关javascript中的依赖问题。我们将继续就之前javascript中性能问题继续介绍。
先来回顾一下性能问题的解决方法，那就是按需引入js文件。那么这样按需引入会不会存在问题呢?今天我们为大家继续揭晓答案。先看如下页面。
多文件HTML代码
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
</head>
<body>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
</body>
</html>
如上面所示。如果按照上面的方法拆分的话，那么页面中可能会引入很多js文件。如果这四个文件若没有互相依赖的关系的话，这还算勉强过得去。但是如果b.js会依赖a.js的话，那么就会出现依赖的问题。 如果b.js依赖a.js的话，那么b.js只能写在a.js下面，不能写在a.js的上面。如果b.js写在了a.js之上，这顺序就会出现问题了。那么现在还没看到问题，我们现在就举一个具体的问题，来说明一下依赖问题，几个js文件的话就有可能出现问题。
比如A小伙伴儿写了个js文件叫“b.js”，怎么使用呢，调用一下就可以使用了。然后A小伙伴儿把写好的a.js文件给其他小伙伴儿去用。B小伙伴儿就用了a.js文件。B小伙伴儿把b.js引入页面当中，接下来在页面中调用一下就可以了。看着好像没有什么问题，但是却出问题了。B小伙伴儿就去查找问题，查清楚了。a.js若想简单调用的话，必须依赖b.js才能正常使用。这时候B小伙伴儿问A小伙伴儿是否是缺少js文件，A小伙伴儿突然想起来少了个a.js文件。
依赖问题HTML代码
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
</head>
<body>
<!-- 使用b.js -->
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript">
//进行调用，却发现有问题了
b();
</script> <!-- b.js依赖了a.js，把a.js引入页面中 -->
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript">
//好用了
meng();
</script>
</body>
</html>
过了一段时间，可能产品发生了变化，新加了一些需求。要把meng函数的效果变得复杂一些，新加了一些功能。需要再依赖c.js才能完成这个效果。这时候，A小伙伴儿还得告诉B小伙伴儿文件还需要再依赖c.js才能正常使用。B小伙伴儿需要再给每一个文件添加c.js。这时候B小伙伴儿已经很不爽了，因为不仅在一个页面调用这些js，而是在很多个页面调用了这个js，需要各个页面手动添加c.js，这样才会保证没有问题。
这时候，产品又要该需求了。现在不去依赖a.js了，功能上要减少一些。这时候a.js存在页面中，那肯定是很耗资源的。A小伙伴儿又告诉了B小伙伴儿，把a.js从页面中去掉吧，要不然也是多余的。B小伙伴儿又把a.js从页面中去掉了。去掉之后，发现meng函数出问题了。这meng函数不是不依赖a.js了么，怎么去掉又出问题了。结果发现，页面中其他js比如d.js依赖a.js。又不得不把a.js重新添加到页面中。
其实几个js文件，我们就可以发现，js文件互相依赖，会存在很严重的维护问题。这就是javascript中的依赖问题，导致我们经常的在加班处理这些问题。如果有一个更好的解决方案，来处理javascript中的冲突、性能和依赖问题的话，让更多的时间进行开发工作而不是修改问题。多出来的时间可以干一些有意义的事情。Js模块化就是用来解决javascript中冲突、性能和依赖问题的。
seaJs学习笔记之javascript的依赖问题就先为大家介绍到这里，有关模块化怎么书写，敬请关注梦龙小站接下来有关seaJs的更新。
seaJs学习笔记之javascript的依赖问题的更多相关文章
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- RX学习笔记：JavaScript数组操作
RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.un ...
- 学习笔记：Javascript 变量 包装对象
学习笔记:Javascript 变量 包装对象 如下代码,可以输出字符的长度. var str = "Tony"; str.length; 这时再试试以下代码,返回是 undefi ...
- 【学习笔记】JavaScript的基础学习
[学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...
- 微信小程序开发：学习笔记[5]——JavaScript脚本
微信小程序开发:学习笔记[5]——JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来 ...
- go微服务框架kratos学习笔记八 (kratos的依赖注入)
目录 go微服务框架kratos学习笔记八(kratos的依赖注入) 什么是依赖注入 google wire kratos中的wire Providers injector(注入器) Binding ...
- 再起航，我的学习笔记之JavaScript设计模式01
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 在通 ...
- 【MarkMark学习笔记学习笔记】javascript/js 学习笔记
1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...
- 再起航，我的学习笔记之JavaScript设计模式02
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...
随机推荐
- easyui之combotree
这几天时间比较空闲的我把easyui中比较难的控件回顾一遍 这次的总结是easyui中的combotree easyui的中文文档上说:combotree结合选择控制和下拉树,类似于combobox只 ...
- swift 语法 - 以及学习资料
附上一些swift的一下学习资料: 1.Swift语法介绍官方英文版:The Swift Programming Language 2.Swift与Objective-C相互调用Using Swift ...
- uva 812 Trade on Verweggistan
题意: 给w个货架, 每个货架上有bi个货物, 每次只能拿最上面的货物, 每个货物有个价值, 所有货物的售价均为10. 问:能获得的最大利润, 以及能获得这个利润需要多少个货物. (有多种组合时只需输 ...
- 【网络流24题】No.4 魔术球问题 （二分+最小路径覆盖）
[题意] 假设有 n 根柱子, 现要按下述规则在这 n 根柱子中依次放入编号为 1, 2, 3, ¼的球.( 1)每次只能在某根柱子的最上面放球.( 2)在同一根柱子中,任何 2 个相邻球的编号之和为 ...
- 【BZOJ 2693】jzptab（莫比乌斯+分块）
2693: jzptab Description Input 一个正整数T表示数据组数 接下来T行 每行两个正整数 表示N.M Output T行 每行一个整数 表示第i组数据的结果 Sample I ...
- Java使用JAX-WS来写webservice时 Unable to create JAXBContext
webservice,作为web开发人员来说必须掌握的一门技术,它的好处这里就不多说了,eclipse中自带了一种生成webservice的 方法,使用JAX-WS,如果我没有弄错的话,它需要java ...
- Android 性能优化 四 布局优化merge标签的使用
小白:之前分享了ViewStub标签的使用,Android还有其他优化布局的方式吗? 小黑:<merge />标签用于减少View树的层次来优化Android的布局.先来用个例子演示一下: ...
- SSI指令使用详解（转）
什么是 SHTML使用SSI(Server Side Include)的html文件扩展名,SSI(Server Side Include),通常称为“服务器端嵌入”或者叫“服务器端包含”,是一种类似 ...
- eclipse环境NDK问题汇总
1. 配置NDK路径设置 可以在cygwin中通过vim修改,也可以在windows安装目录中修改 home\<你的用户名>\.bash_profile 文件中最后添加环境变量 NDK=/ ...
- （转载）按行合并两个sql的查询结果
(转载)http://blog.csdn.net/wxwstrue/article/details/6784774 Union all join 是平行合并 为水平连接 Union all 是垂直合并 ...