《JavaScript编程精解》读书笔记-第七章：模块化

7.1模块

js本身其实没有类的概念，所以平时写js都是在一个全局环境中任意的写，当然这是初学者的一般做法。这样就时的代码非常的乱，也会使自己出现函数调用错误、变量重定义等很多问题，如何解决就要靠模块化了。就是把有一定关联的变量或者函数集中放到一个‘地方’。关于这里的‘地方’可以是一个函数，一个js文件，或者是文件夹。总之就是让代码分开，别纠缠在一起。

从最简单的一个例子说起，比如下面两个独立函数：

?
function forEachIn(object,action){
       for(var property in object){
           if(Object.prototype.hasOwnProperty.call(object,property)){
               action(property,object[property]);
           }
       }
 }
 function forEach(array,action){
        for(var i = 0; i<array.length; i++){
             action(array[i]);
        }
}

上面两个是典型的独立函数，我们会经常使用，但是觉对我们的js文件没有任何依赖。像这样的函数如果定义在js中不光是写重复代码增加劳动量，而且也会使原本的代码更乱。最好的方法自然是把这一类的代码统统放到单独的文件中，然后引用它。

另外就是文件的模块化，指的是把不同的模块写到不同的文件当中。比如有a.js和b.js两个文件，而b.js中的函数需要用到a.js中的函数（有依赖关系），现在需要做的就是把这两个文件全部引用到test.html中（这是你的应用场所）。这样之后引入的两个脚本之间就能够互相访问对方的内容了。

?
<html>
    <head>
         
        <script type="text/javascript" src="b.js"></script>
        <script type="text/javascript" src="a.js"></script>
        <script type="text/javascript">
            function add1(a,b){
                return a * b;
            }
            alert(add2(1,2,3));
        </script>
    </head>
</html>

上面的代码中有3个地方可以定义函数。1.在a.js中定义，2.在b.js中定义，3.在当前的<script></script>标签中定义。并且 这三个地方的脚本是能相互访问的。

7.2模块的形态

当在全局的环境中定义变量的时候很容易导致命名空间的污染，js对于重复定义的变量是不会报错的，这样大家对待全局的变量的时候就该更谨慎一些，而且是尽量不要这样做。下面的代码告诉你封装成模块的一个方法：

?
//普通的写代码方式
   var names = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   function getMonthName(number){
       if(arguments.length > 0){
           if(number >= 1)
               return names[number-1];
       }else{
           return "have no this month";
       }
   }
 
   function getMonthNumber(name){
       for(var i = 0; i<names.length; i++){
           if(names[i] == name)
               return i+1;
       }
   }
 
   //----------------------------------------------------
   //下面把names全局变量封装起来，只把两个函数的调用露出来
   function buildMonthNameModule(){
       var names = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
       function getMonthName(number){
           if(arguments.length > 0){
               if(number >= 1)
                   return names[number-1];
           }else{
               return "have no this month";
           }
       }
 
       function getMonthNumber(name){
           for(var i = 0; i<names.length; i++){
                if(names[i] == name)
                   return i+1;
           }
       }
 
       window.getMonthName = getMonthName;
       window.getMonthNumber = getMonthNumber;
   }
 
   function getMonthName(){
       return "zhangran";
   }
   buildMonthNameModule();//绑定到window对象
   alert(getMonthName()); //这个操作之后会优先调用buildMonthNameModule()里面的同名函数。

 7.3接口设计

没啥好说的，书上说的又是概念一大堆。

不过书中还是有一个例子代码写得不错，我一时竟没反应过来，js中函数即为值这点还是理解的不够啊，代码如下：

?
//该函数的作用是找出数组中符合一定规则的元素，当然，‘规则’是动态指定的，如果不给出则默认是“==” <br>function positionOf(element,array,compare,start,end){
         if(start == null)
            start = 0;
         if(end == null)
            end = array.length;
         for(;start<end;start++){
            var current = array[start];
            if(compare ? compare(element,current):element == current)//这一行写的有点意思
                return start;
        }
 }

7.4JS库

列举了几个常用的js库。自己平时用最多的自然还是jQuery了，这个毋庸置疑，而且别的很多库也是基于jQuery的。另外还有dwz，jQueryUI，bootstrap，knockout这几个推荐看一下吧。

posted @   张小然  阅读(1751)  评论(4)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 单线程的Redis速度为什么快？
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 展开说说关于C#中ORM框架的用法！
· SQL Server 2025 AI相关能力初探
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示