• 《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中函数即为值这点还是理解的不够啊,代码如下:

    //该函数的作用是找出数组中符合一定规则的元素,当然,‘规则’是动态指定的,如果不给出则默认是“==” 
    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这几个推荐看一下吧。

  • 相关阅读:
    android中数据存储
    服装销售系统数据库课程设计(MVC)
    重新设计的道道指令
    CSS cursor属性
    hdu4488 Faulhaber’s Triangle(模拟题)
    SPOJ 1043 1043. Can you answer these queries I
    再谈内存管理与ARC运行机制(一)
    PowerMock注解PowerMockIgnore的使用方法
    hdu 1317 XYZZY【Bellheman_ford 判断正环小应用】
    HDU 1104 Remainder( BFS(广度优先搜索))
  • 原文地址:https://www.cnblogs.com/zhangran/p/2853129.html
Copyright © 2020-2023  润新知