代码解读

来源:互联网 发布:慧莫森软件科技 编辑:程序博客网 时间:2024/05/22 00:09



1、exports   exports._esModule  module.exports  :   

       作用:使得编译时就能确定模块的依赖关系,以及输入和输出的变量。模块功能主要由两个命令构成:

        exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

              一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变

                    量,就必须使用export关键字输出该变量。

      区别:

exports 和 module.exports 则用来导出代码, 其实就是导出用于实现接口的变量

module.exports 初始值为一个空对象 {},

exports 是指向的module.exports 的引用,

require()返回的是 module.exports 而不是 exports。

exports._esModule 就是babel将module.exports = {};这个输出模板就行转换。到得
         "use strict";

         Object.defineProperty(exports,"__esModule", {  value:true});

         exports.default = {};其中(Babel 用于转化你的 JavaScript 代码)。

                 ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";

      写法:export的写法:
// profile.jsvar firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export {firstName, lastName, year};

                import命令:使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文 件)。
                                               
// main.jsimport {firstName, lastName, year} from './profile';function setName(element) {  element.textContent = firstName + ' ' + lastName;}
               上面代码的import命令,就用于加载profile.js文件,并从中输入变量。import命令接受一个对象(用大括号表示),里面指
                   定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

                  export default  :就是用户希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。使用export default时,对应
                                               的import语句不需要使用大括号,export default命令用于指定模块的默认输出。;不使用export default
                                               时,对应的import语句需要使用大括号。

           
2、模块:
         定义:就是通过使用易模块,用户可以将常用的代码封装起来重复使用到其它程序,或提供给第三方使用,或
                    用作开发大型软件项目中的某个部分,然后在软件项目的封装阶段将所有这些模块组织编译成为一个完
                    整程序。模块就像一个已经编译好的程序,如果你需要直接可以带到你的程序里来使用。
 
      模块的加载:
           实质上就是,注入exports、require、module三个全局变量,然后执行模块的源码,然后将模块的 exports 变量的值输出。

         模块间的依赖关系:依赖描述了两个模型元素之间的关系,如果被依赖的模型元素发生变化就会影响到另一个模型元素。

    耦合:如果改变程序的一个模块要求另一个模块同时发生变化,就认为这两个模块发生了耦合。如果模块A调用
       模块B提供的方法,或访问模块B中的某些数据成员(当然,在面向对象开发中一般不提倡这样做),我
       们就认为模块A依赖于模块 B,模块A和模块B之间发生了耦合。

3、接口:
         通俗定义:你写一个函数,别的地方会调用,如何调用呢?要看他的参数和返回值,这就是接口,就是告诉别
                          人该怎么用你这个函数。

实现:模块对外提供两种类:一个是需要外部模块实现的接口(接口设计从本模块需要出发,当然每个接口尽
管是为某个功能点服务,但也要注意其在模块内通用性),另一个是其它模块要求本模块实现的接口的实
现类。即:A模块拥有一些需要B模块实现的接口(A模块对B模块的要求),而B模块中也有要求A模块实
现的接口,因而A有这些接口的实现类。


4、require ():
                require 并不是全局性命令,而是每个模块提供的一个内部方法,也就是说,只有在模块内部才能使用
           require 命令(唯一的例外是 REPL 环境)。另外,require 其实内部调用 Module._load 方法(首先解析出模
           块的绝对路径(filename),以它作为模块的识别符。然后,如果模块已经在缓存中,就从缓存取出;如果不在缓存中,就
           加载模块。)。
           require函数使用一个参数,参数值可以带有完整路径的模块的文件名,也可以为模块名.当使用node中提供的模
               块时,在require函数中只需要指定模块名即可.
                    建立一个页面2.js;代码如下
                       var name="思思博士";
                       exports.name=name;
                    建立一个页面1.js;代码如下
                       var two=require("./2.js");
                       console.log(two.name);
                     输出结果:思思博士
               在node中所有的脚本文件都是一个模块文件,因此1.js也是一个模块文件,又由于该文件是在命令行
               窗口中通过node命令被直接运行的,因此在node中该模块文件被定义为应用程序的主模块

                  require.resolve(str)
              在node中,可以使用这个函数来查询某个模块文件的带有完整绝对路径的文件名.
                  var url=require.resolve("./2");
                  console.log(url);
         
        模块函数调用:
  
                 require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,第二个参数是一个回调函数,当前面指定的模
             块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

5、Babel: 能够实现 ES6 到 ES5 的代码转换多亏了 Babel,ES6到ES5有很多新特性不能呈现的时候就需要进行转码。

                     _interopRequireDefault();函数?
        babel-runtime 的作用是模拟 ES2015 环境。我们可以在自己的模块里单独引入。
                Babel 用了优秀的 core-js 用作 polyfill,并且还有定制化的 regenerator 来让 generators(生成器)和
                async functions(异步函数)正常工作。


6、JavaScript中几种常用的定义函数的方法:
                      function func(){} 或 var func=function(){}; 
                      function class(){}   class.prototype={};    var item=new class(); 
                     (function(){ //独立作用域 })(); 
            作为选择器使用  :       var addEvent=new function(){   if(!-[1,]) return function(elem,type,func){   
                               attachEvent(elem,'on'+type,func);}; 
                              else return function(elem,type,func){
                              addEventListener(elem,type,func,false);}  };//避免了重复判断 

7、 var a=(function(){})(a)表示函数执行结果赋值给变量a。
          自执行匿名函数 :         
               常见格式:(function() { /* code */ })();  
                 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未
                           命名函数,括号内为匿名函数的参数。
              作用:可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,那么外部就不能访
                            问,除非你允许(变量前加上window,这样该函数或变量就成为全局)。各JavaScript库的代码也基本
                           是这种组织形式。


8、utils.js: 可供其他页面共享的js,就是一个公共函数,模块工具类,用来初始化各模块视图,自定绑定事件以及其
他辅助功能。

9、name.js.map:
定义:Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,
所对应的转换前的位置。经过babel打包之后,通过生成source.map来进行定位。一般都在最后一行加上
     //# sourceMappingURL=name.js.map
格式: 
{
     version : 3,
     file: "out.js",
     sourceRoot : "",
     sources: ["foo.js", "bar.js"],
     names: ["src", "maps", "are", "fun"],
     mappings: "AAgBC,SAAQ,CAAEA"
   }

  - version:Source map的版本,目前为3。

   - file:转换后的文件名。

   - sourceRoot:转换前的文件所在的目录。如果与转换前的文件在同一目录,该项为空。

   - sources:转换前的文件。该项是一个数组,表示可能存在多个文件合并。

   - names:转换前的所有变量名和属性名。

   - mappings:记录位置信息的字符串,下文详细介绍。

mappings:

      第一层是行对应,以分号(;)表示,每个分号对应转换后源码的一行。所以,第一个分号前的内容,

                就对应源码的第一行,以此类推。

   第二层是位置对应,以逗号(,)表示,每个逗号对应转换后源码的一个位置。所以,第一个逗号前的内容,

               就对应该行源码的第一个位置,以此类推。

   第三层是位置转换,以VLQ编码表示,代表该位置对应的转换前的源码位置。


10、接口监控:目的就是为了发现线上出现的前端异常
                 站点:一个站点(site)是一个存储区,它存储了一个网站包含的所有文件。通俗一点的说,一个站点就是
                            一个网站所有内容所存放的文件夹。站点管理是对一个Internet的站点进行组织、维护和管理的功能
                            集合。

                 异常:a ,页面上有javascript异常  b. 各种因素造成的页面的样式丢失。
                 
                 配置:只要是对要监控的接口网站的url进行传输验证。
11、var folder = './config/' + process.env.NODE_ENV '/';?

12、json: 
             定义:JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式。
             数据交换:是指为了满足不同信息系统之间数据资源的共享需要,依据一定的原则,采取相应的技术,实现
                            不同信息系统之间数据资源共享的过程。
             格式:
                     JSON有两种表示结构,对象和数组。对象结构以”{”大括号开始,以”}”大括号结束。中间部分由0或
                     多个以”,”分隔的”key(关键字)/value(值)”对构成,关键字和值之间以”:”分隔,语法结构如代码。
{    key1:value1,    key2:value2,    ...}

                   其中关键字是字符串,而值可以是字符串,数值,true,false,null,对象或数组。

                数组结构以”[”开始,”]”结束。中间由0或多个以”,”分隔的值列表组成,语法结构如代码。

复制代码
[    {        key1:value1,        key2:value2     },    {         key3:value3,         key4:value4       }]


            区分:
             字符串:这个很好解释,指使用“”双引号或’’单引号包括的字符。例如:var comStr = 'this is string';
             json字符串:指的是符合json格式要求的js字符串。
                    例如:var jsonStr = " {StudentID:'100',Name:'tmac',Hometown:'usa'}";
             json对象:指符合json格式要求的js对象。
                    例如:var jsonObj = { StudentID: "100", Name: "tmac", Hometown: "usa" };

               读写:JSON是JS的一个子集,所以可以在JS中轻松地读,写JSON。读和写JSON都有两种方法,分别是利
                   用”.”操作符和“[key]”的方式。

13、.sh:    是UNIX/LINUX操作系统的脚本文件(脚本文件类似于DOS操作系统中的批处理文件,它可以将不同的命令组合起来,并按
确定的顺序自动连续地执行。)。

sh命令调用缺省shell(shell是:用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件)并
使用它的语法和标志。链接到/usr/bin/sh路径的shell是缺省的shell。操作系统的
标准配置把/usr/bin/sh路径链接到Korn shell。
写法:
#!/bin/sh
echo "Hello World !"
符号#!用来告诉系统它后面的参数是用来执行该文件的程序。在这个例子中我们使用/bin/sh来执行程序。
#开头的句子表示注释,直到这一行的结束
所有的变量都由字符串组成,并且您不需要对变量进行声明,直接赋值就可以,应用变量的话,用$+变量名的形式。
                    缺省的shell:就是默认的shell,你创建一个账户是系统默认会给你分配一个shell,linux下是bash,bsd下是csh,这个
就是缺省的shell
语法:
cp sourcefile destfile: 文件拷贝
  cd sourcefile destfile:进入文件


14、pm2:
定义:pm2 是一个带有负载均衡功能的Node应用的进程管理器.
                 功能:
                             后台运行
                            0 秒停机重载,我理解大概意思是维护升级的时候不需要停机.
                             具有 Ubuntu 和 CentOS 的启动脚本
                            停止不稳定的进程(避免无限循环)
                           控制台检测
                           提供 HTTP API
                           远程控制和实时的接口 API ( Nodejs 模块,允许和 PM2 进程管理器交互 )

15、koa框架:
                Koa 是一个类似于 Express 的Web开发框架,使用了 ES6 的 Generator 函数,进行了架构的重新设计。
                         koa2完全使用Promise并配合async来实现异步。


16、.do:














































1、exports   exports._esModule  module.exports  :   

       作用:使得编译时就能确定模块的依赖关系,以及输入和输出的变量。模块功能主要由两个命令构成:

        exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

              一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变

                    量,就必须使用export关键字输出该变量。

      区别:

exports 和 module.exports 则用来导出代码, 其实就是导出用于实现接口的变量

module.exports 初始值为一个空对象 {},

exports 是指向的module.exports 的引用,

require()返回的是 module.exports 而不是 exports。

exports._esModule 就是babel将module.exports = {};这个输出模板就行转换。到得
         "use strict";

         Object.defineProperty(exports,"__esModule", {  value:true});

         exports.default = {};其中(Babel 用于转化你的 JavaScript 代码)。

                 ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";

      写法:export的写法:
// profile.jsvar firstName = 'Michael';var lastName = 'Jackson';var year = 1958;export {firstName, lastName, year};

                import命令:使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文 件)。
                                               
// main.jsimport {firstName, lastName, year} from './profile';function setName(element) {  element.textContent = firstName + ' ' + lastName;}
               上面代码的import命令,就用于加载profile.js文件,并从中输入变量。import命令接受一个对象(用大括号表示),里面指
                   定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

                  export default  :就是用户希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。使用export default时,对应
                                               的import语句不需要使用大括号,export default命令用于指定模块的默认输出。;不使用export default
                                               时,对应的import语句需要使用大括号。

           
2、模块:
         定义:就是通过使用易模块,用户可以将常用的代码封装起来重复使用到其它程序,或提供给第三方使用,或
                    用作开发大型软件项目中的某个部分,然后在软件项目的封装阶段将所有这些模块组织编译成为一个完
                    整程序。模块就像一个已经编译好的程序,如果你需要直接可以带到你的程序里来使用。
 
      模块的加载:
           实质上就是,注入exports、require、module三个全局变量,然后执行模块的源码,然后将模块的 exports 变量的值输出。

         模块间的依赖关系:依赖描述了两个模型元素之间的关系,如果被依赖的模型元素发生变化就会影响到另一个模型元素。

    耦合:如果改变程序的一个模块要求另一个模块同时发生变化,就认为这两个模块发生了耦合。如果模块A调用
       模块B提供的方法,或访问模块B中的某些数据成员(当然,在面向对象开发中一般不提倡这样做),我
       们就认为模块A依赖于模块 B,模块A和模块B之间发生了耦合。

3、接口:
         通俗定义:你写一个函数,别的地方会调用,如何调用呢?要看他的参数和返回值,这就是接口,就是告诉别
                          人该怎么用你这个函数。

实现:模块对外提供两种类:一个是需要外部模块实现的接口(接口设计从本模块需要出发,当然每个接口尽
管是为某个功能点服务,但也要注意其在模块内通用性),另一个是其它模块要求本模块实现的接口的实
现类。即:A模块拥有一些需要B模块实现的接口(A模块对B模块的要求),而B模块中也有要求A模块实
现的接口,因而A有这些接口的实现类。


4、require ():
                require 并不是全局性命令,而是每个模块提供的一个内部方法,也就是说,只有在模块内部才能使用
           require 命令(唯一的例外是 REPL 环境)。另外,require 其实内部调用 Module._load 方法(首先解析出模
           块的绝对路径(filename),以它作为模块的识别符。然后,如果模块已经在缓存中,就从缓存取出;如果不在缓存中,就
           加载模块。)。
           require函数使用一个参数,参数值可以带有完整路径的模块的文件名,也可以为模块名.当使用node中提供的模
               块时,在require函数中只需要指定模块名即可.
                    建立一个页面2.js;代码如下
                       var name="思思博士";
                       exports.name=name;
                    建立一个页面1.js;代码如下
                       var two=require("./2.js");
                       console.log(two.name);
                     输出结果:思思博士
               在node中所有的脚本文件都是一个模块文件,因此1.js也是一个模块文件,又由于该文件是在命令行
               窗口中通过node命令被直接运行的,因此在node中该模块文件被定义为应用程序的主模块

                  require.resolve(str)
              在node中,可以使用这个函数来查询某个模块文件的带有完整绝对路径的文件名.
                  var url=require.resolve("./2");
                  console.log(url);
         
        模块函数调用:
  
                 require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,第二个参数是一个回调函数,当前面指定的模
             块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

5、Babel: 能够实现 ES6 到 ES5 的代码转换多亏了 Babel,ES6到ES5有很多新特性不能呈现的时候就需要进行转码。

                     _interopRequireDefault();函数?
        babel-runtime 的作用是模拟 ES2015 环境。我们可以在自己的模块里单独引入。
                Babel 用了优秀的 core-js 用作 polyfill,并且还有定制化的 regenerator 来让 generators(生成器)和
                async functions(异步函数)正常工作。


6、JavaScript中几种常用的定义函数的方法:
                      function func(){} 或 var func=function(){}; 
                      function class(){}   class.prototype={};    var item=new class(); 
                     (function(){ //独立作用域 })(); 
            作为选择器使用  :       var addEvent=new function(){   if(!-[1,]) return function(elem,type,func){   
                               attachEvent(elem,'on'+type,func);}; 
                              else return function(elem,type,func){
                              addEventListener(elem,type,func,false);}  };//避免了重复判断 

7、 var a=(function(){})(a)表示函数执行结果赋值给变量a。
          自执行匿名函数 :         
               常见格式:(function() { /* code */ })();  
                 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未
                           命名函数,括号内为匿名函数的参数。
              作用:可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,那么外部就不能访
                            问,除非你允许(变量前加上window,这样该函数或变量就成为全局)。各JavaScript库的代码也基本
                           是这种组织形式。


8、utils.js: 可供其他页面共享的js,就是一个公共函数,模块工具类,用来初始化各模块视图,自定绑定事件以及其
他辅助功能。

9、name.js.map:
定义:Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,
所对应的转换前的位置。经过babel打包之后,通过生成source.map来进行定位。一般都在最后一行加上
     //# sourceMappingURL=name.js.map
格式: 
{
     version : 3,
     file: "out.js",
     sourceRoot : "",
     sources: ["foo.js", "bar.js"],
     names: ["src", "maps", "are", "fun"],
     mappings: "AAgBC,SAAQ,CAAEA"
   }

  - version:Source map的版本,目前为3。

   - file:转换后的文件名。

   - sourceRoot:转换前的文件所在的目录。如果与转换前的文件在同一目录,该项为空。

   - sources:转换前的文件。该项是一个数组,表示可能存在多个文件合并。

   - names:转换前的所有变量名和属性名。

   - mappings:记录位置信息的字符串,下文详细介绍。

mappings:

      第一层是行对应,以分号(;)表示,每个分号对应转换后源码的一行。所以,第一个分号前的内容,

                就对应源码的第一行,以此类推。

   第二层是位置对应,以逗号(,)表示,每个逗号对应转换后源码的一个位置。所以,第一个逗号前的内容,

               就对应该行源码的第一个位置,以此类推。

   第三层是位置转换,以VLQ编码表示,代表该位置对应的转换前的源码位置。


10、接口监控:目的就是为了发现线上出现的前端异常
                 站点:一个站点(site)是一个存储区,它存储了一个网站包含的所有文件。通俗一点的说,一个站点就是
                            一个网站所有内容所存放的文件夹。站点管理是对一个Internet的站点进行组织、维护和管理的功能
                            集合。

                 异常:a ,页面上有javascript异常  b. 各种因素造成的页面的样式丢失。
                 
                 配置:只要是对要监控的接口网站的url进行传输验证。
11、var folder = './config/' + process.env.NODE_ENV '/';?

12、json: 
             定义:JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式。
             数据交换:是指为了满足不同信息系统之间数据资源的共享需要,依据一定的原则,采取相应的技术,实现
                            不同信息系统之间数据资源共享的过程。
             格式:
                     JSON有两种表示结构,对象和数组。对象结构以”{”大括号开始,以”}”大括号结束。中间部分由0或
                     多个以”,”分隔的”key(关键字)/value(值)”对构成,关键字和值之间以”:”分隔,语法结构如代码。
{    key1:value1,    key2:value2,    ...}

                   其中关键字是字符串,而值可以是字符串,数值,true,false,null,对象或数组。

                数组结构以”[”开始,”]”结束。中间由0或多个以”,”分隔的值列表组成,语法结构如代码。

复制代码
[    {        key1:value1,        key2:value2     },    {         key3:value3,         key4:value4       }]


            区分:
             字符串:这个很好解释,指使用“”双引号或’’单引号包括的字符。例如:var comStr = 'this is string';
             json字符串:指的是符合json格式要求的js字符串。
                    例如:var jsonStr = " {StudentID:'100',Name:'tmac',Hometown:'usa'}";
             json对象:指符合json格式要求的js对象。
                    例如:var jsonObj = { StudentID: "100", Name: "tmac", Hometown: "usa" };

               读写:JSON是JS的一个子集,所以可以在JS中轻松地读,写JSON。读和写JSON都有两种方法,分别是利
                   用”.”操作符和“[key]”的方式。

13、.sh:    是UNIX/LINUX操作系统的脚本文件(脚本文件类似于DOS操作系统中的批处理文件,它可以将不同的命令组合起来,并按
确定的顺序自动连续地执行。)。

sh命令调用缺省shell(shell是:用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件)并
使用它的语法和标志。链接到/usr/bin/sh路径的shell是缺省的shell。操作系统的
标准配置把/usr/bin/sh路径链接到Korn shell。
写法:
#!/bin/sh
echo "Hello World !"
符号#!用来告诉系统它后面的参数是用来执行该文件的程序。在这个例子中我们使用/bin/sh来执行程序。
#开头的句子表示注释,直到这一行的结束
所有的变量都由字符串组成,并且您不需要对变量进行声明,直接赋值就可以,应用变量的话,用$+变量名的形式。
                    缺省的shell:就是默认的shell,你创建一个账户是系统默认会给你分配一个shell,linux下是bash,bsd下是csh,这个
就是缺省的shell
语法:
cp sourcefile destfile: 文件拷贝
  cd sourcefile destfile:进入文件


14、pm2:
定义:pm2 是一个带有负载均衡功能的Node应用的进程管理器.
                 功能:
                             后台运行
                            0 秒停机重载,我理解大概意思是维护升级的时候不需要停机.
                             具有 Ubuntu 和 CentOS 的启动脚本
                            停止不稳定的进程(避免无限循环)
                           控制台检测
                           提供 HTTP API
                           远程控制和实时的接口 API ( Nodejs 模块,允许和 PM2 进程管理器交互 )

15、koa框架:
                Koa 是一个类似于 Express 的Web开发框架,使用了 ES6 的 Generator 函数,进行了架构的重新设计。
                         koa2完全使用Promise并配合async来实现异步。


16、.do:.do是一种网页后台程序(就是 一个 把 变量 和 样式表 有机整合的一个东西,她可以方便的让我们给 变量 赋值,并自动套用到 样式表 生                                                            网页文件(可能是静态网页,也可以是动态网页),现有工具cms)。在配置文件中配置的一种url模式 
                 多数为编程人员为了使网站极具个性化或者隐藏正确的网页而自发使用一些后缀名网页。
                 struts使用一个特殊的servlet作为“交换机”,将来自web浏览器的请求转到相应的serverpage。在开发web应用时有一个必须要写的部署描述
                 文件(web-inf/web.xml)。servlet(路径或者扩展名)和那些servlets的参数的映射。在这个文件中,你配置struts action servlet作为一个操
                  控所有指定映射(通常以.do为扩展名)请求的servlet——这就是“交换机”。













































0 0