mobile 模块化js文件node

1.为甚么要用模块(包)

　　1.1</script src="js/xxx.js"></script>

 　　整个页面只写一个js文件,所有特效都写在里面了

　　缺点:耦合度太高,代码关联性太强,不利于后期维护,造成全局污染

 

　　<script src="js/xxx1.js"></script>

　　<script src="js/xxx2.js"></script>

　　<script src="js/xxx3.js"></script>

　　页面链多个js文件,特效都在里面

　　缺点:发生请求过多,依赖模糊,难于维护

 

　　以上传统开发形式都被抛弃了

 

 

2.模块化开发

　　2.1 概念:node自带的规范commoujs规范

　　2.2 规范:运行在服务端,不是浏览器端,如果使用在浏览器端,需要使用该文件进行打包预编译

　　(借鉴工具browserify,webpack,gulp等)

　　2.3 优点:减少代码之间关联度部署方便,更好的分离 按需加载 避免命名冲突容易维护

 

书写模块的时候，对外暴露接口 module.exports={}  exports.xxx=

　　2.4 引入模块方法

　　require(我是主文件路径)

 

　　2.5 CommonJS

　　　　CommonJS暴露的是一个名字叫exports的对象

　　　　Commonjs是node的规范，但他是同步加载的，同步加载在浏览器端是一个坑，只要一个环节卡住了，后面的就没法执行。所以不建议使用，如果非要使用就需要编辑打包。

 

　　2.6 Web端

　　每个js都是一个模块，每个模块都必须有一个暴露接口，每个js文件有一个全局的方法叫require()用于引入模块。

 

　　2.7 exports和module.exports概念以及区别:

，　　　module是一个变量，指向一块内存，exports是module中的一个属性，存储在内存中，然后exports属性指向{}模块

　　　　exports:首先对于本身来讲是一个变量（对象），它不是module的引用，它是{}的引用，它指向module.exports的{}模块

　　　　exports只能使用.语法向外暴露内部变量  例   exports.xxx=xxx;

　　　　module.exports既可以通过点语法，也可以直接赋值一个对象    例  module.exports.xxx=xxx;     module.exports=xxx;

　　　　二者本质一样,都是暴露一个exports对象

　　2.8 模块

1.node自带的模块(包)  path url fs

2.第三方模块  weui jquery axios zepto

Npm 全名 node packsge manager  node包管理工具 增删查改

https://www.npmjs.com/

如果npm操作太慢

可以安装npm镜像 :  npm install -g cnpm --registry=https://registry.npm.taobao.org

2.9下载安装

Npm install jquery

下载存放的位置

全局下载 在任何一个文件夹下都能使用这个包 全局安装目录

C:\Users\Administrator\AppData\Roaming\npm\node_modules

如何全局安装

Npm install -g jquery

局部安装

Npm install jquery

就会在当前目录下生成一个node_modules的文件夹里面

Npm install jquery --save

这个是下载运行环境(生产环境)的包 比如 jquery

 

Npm install jquery --save -dev

这个是下载开发环境所以来的包------- 比如  npm browserify

 

 二者区别

 

前者--save 是上线时会被压缩的包

后者--save-dev是上线时会被抛弃的包

 

　　　　　　　　dependencies---- 生产环境下的包(模块)

　　　　　　　　devDependencies------开发环境下的包的说明

　　　　　　　　

　　　　　　　　3.0增删查改

 

　　　　　　　　增--指定版本下载  npm install  jquery@3.2.2 --- save

　　　　　　　　删--npm uninstaall jquery

　　　　　　　　查--npm seacrch jquery

　　　　　　　　改(更新)--npm updata jquery

　　　　

　　3自定义模块化(我们写的)

　　　　　　配置模块说明文件   npm init 就会生成一个名为package.json的文件

　　　　{

　　　　"　name":"xxxx",

　　　　"version":""1.0.0",

　　　　"description":"study",

　　　　"main":index.js",

　　　　"script:":{

　　　　"test":"echo\"Error:no test specified\" && exit 1 "

　　　　　　　　},

　　　　"author":"",

　　　　"license":"ISC"

　　　　}

　　　　main:index  ----- 我们的主文件是index.js

 

　　　　index.js 是这个包的输出文件,即便删除了package.json 只要不改变index的js的文件名就没事

　　　　,一旦改了就报错.是因为包的输出文件默认是index.js

 

　　　　var  obj = require("默认在node_modules下找这个包");

　　　　在浏览器端,说require is not defined 说明浏览器不支持commoujs,需要借鉴打包工具(browserify)

　　4.Node

　　Node是javascript的环境，在node里面可以运行js文件。指令  node 文件名

 

 

　　　　

 

 

 

Mobile

1,模块===包

 

传统开发：整个网页我们写了一个js文件，所有的特效都写在里面了。

缺点：耦合度太高，代码关联性太强，不便于后期维护，会造成全局污染。

 

发生的请求次数过多，依赖模糊，难于维护。

以上都是传统的开发形式，都被抛弃了。

2.  使用模块化开发

为什么使用模块化？

减少代码之间的关联度，部署方便，更好的分离 按需加载，避免命名冲突，容易维护。

3.  什么是模块化？

Node自带的规范 commonjs规范

Commonjs是node的规范，运行在服务端，不是浏览器端，如果使用在浏览器端，需要使用对该文件进行打包编译（借鉴工具browserify，webpack，gulp等）

书写模块的时候，对外暴露接口 module.exports={} exports.xxx=

引入模块 require(路径)

Commonjs暴露的本质是一个叫exports的对象

Module.export={}和exports.xxx=

二者暴露的本质是一样的，都是暴露一个exports对象

Commonjs是node的规范，但他是同步加载的，同步加载在浏览器端是一个坑，只要一个环节卡住了，后面的就没法执行。所以不建议使用，如果非要使用就需要编辑打包。

Web端

每个js都是一个模块，每个模块都必须有一个暴露接口，每个js文件有一个全局的方法叫require()用于引入模块。

模块

1.node自带的模块(包) path url fs

2.第三方模块 weui jquery axios zepto

Npm 全名 node packsge manager node包管理工具 增删查改

https://www.npmjs.com/

如果npm操作太慢

可以安装npm镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

下载

Npm install jquery

下载存放的位置

全局下载 在任何一个文件夹下都能使用这个包 全局安装目录

C:\Users\Administrator\AppData\Roaming\npm\node_modules

如何全局安装

Npm install -g jquery

局部安装

Npm install jquery

就会在当前目录下生成一个node_modules的文件夹里面

Npm install jquery --save

这个是下载运行环境(生产环境)的包 比如 jquery

Npm install jquery --save -dev

这个是下载开发环境所以来的包 比如npm browserify

二者区别

前者--save 是上线时会被压缩的包 后者--save-dev是上线时会被抛弃的包

 

指定版本下载

Npm install jquery@3.2.1 --save

删除

Npm uninstall jquery

查版本

Npm search jquery

更新

Npm updata jquery

3.自定义模块 我们写的

1.配置模块说明文件 npm init 就会生成一个package.json的文件

 

main：index.js 我们的主文件是index.js

Index.js是这个包的输出文件，即便删除了package.json只要不改变index.js的文件名就没事，一旦改了就报错。是因为包的输出文件默认是index.js

2.var obj=require("cui")

默认在node_modules文件夹下找这个包

在浏览器端，说require is not defined 说明浏览器不支持commonjs，需要借鉴打包工具

1.browserify

npm install -g browserify

2.

Node

Node是javascript的环境，在node里面可以运行js文件。指令 node 文件名