记录关于js模块的浅薄探索(一)——从别人博客中的理解

没错,我之前的博客都没写完,我又挖了一个坑!! 之前一直在围绕着 vue webpack es6 之类的乱七八糟的东西打转,但是一无所获。今天突然又在想,webpack到底干嘛用的,一直在说管理资源啊,打包啊什么的,但是都不懂,今天看了几篇别人的博客,然后想记录一下自己的心路历程。因为工作室学前端都是把 html+css+js学一下就完了,个人觉得这样的学习注定了可能以后没有人会去学前端,并且学习了也可能对以后的一些规范项目开发不清楚(其实我也不清楚...) 所以想自己多看看大佬们的博客,然后对前路有一个清晰一点点的规划! (豪情壮志啊 我的天,哪里来的这么大的胆子)

先来看一个博客
https://www.cnblogs.com/qingkong/p/5092003.html // 浅谈前端js模块化演变 来自博客园的 peter_zhou(晴空)
这篇博客讲了一个模块化演变过程, 可以简单看一下,了解一下

那么为什么要模块化,其实这个博客也讲了,那么还有一个博客详细的讲了一下原因
http://www.cnblogs.com/haoxl/p/5492692.html // 来自博客园的 haoxl 里面有个demo讲了原因

简单概括就是很直白的原因,你跟别人一起做项目的时候,可能会有命名冲突,于是就像博客demo一样

var module1={};
module1.fn={};
module1.fn.Utils={};
module1.fn.Utils.module=function(){
    console.log("I am module1.js");
}

一层一层的定义 ,就像java里解决命名空间的方法一样, 查资料看有说 实际上,Java设计者是希望程序员反过来使用自己的 Internet域名,因为这样可以保证它们肯定是独一无二的。(之前看网课视频的时候,比如极客,老师命名就喜欢是 com.jike.xx.xx)反转域名后,句点就用来代表子目录 [ 这里的js的写法就能感觉到子目录的那种feel ] 的划分。因此,现在整个包名都是小写了。Java2 的这种机制意味着所有的文件都能够自动存活于它们自己的名字空间内,而且同一个文件内的每个类都有唯一的标识符。这样就算我们两个人用的方法一样,我import不一样的包 去调用方法,没啥大问题 ,如果还怕重复,大不了,我可以加上自己名字缩写 哈哈哈。

此处插一个关于C++命名空间的介绍 ,毕竟这个词是从这里来的
C++类( Java 类基于此)将函数包于其内,从而避免了与其它类中的函数名冲突。然而,C++仍允许全局数据和全局函数的存在,所以还是有可能发生冲突。
为了解决这个问题,C++通过几个关键字,引入了“名字空间”的概念。

关于模块化具体怎么使用,以及机制 后续再贴

第二个原因,也讲的很清楚,就是文件依赖问题。关于依赖,最常见的就是我js引用的那个顺序,到底怎么摆放,很多时候报错都是因为顺序问题导致的,比如我后面有自己写的js文件里用了"$" 但是不起效果,那很可能是我网页先加载的它后加载的JQ ,上次帮徒弟找bug 连着几个报错都是因为顺序有误导致的(博客里说到的Bootstrap也非常典型)这就是我们平时接触到最频繁的依赖问题
之前用webpack的时候就不用再index.html里写

posted @ 2018-12-22 21:40  -xw  阅读(161)  评论(0编辑  收藏  举报