mobile
1.模塊===包
<script src="js/app.js"></script>
傳統(tǒng)寫法網(wǎng)頁通常只寫一個js文件,把所有的特效都加進去了
缺點:耦合度太高,代碼關聯(lián)性太強,不便于后期維護,會造成全局污染
<script src="js/nav.js"></script>
<script src="js/banner.js"></script>
<script src="js/lazy.js"></script>
發(fā)送的請求次數(shù)過多,依賴模糊。難于維護。
以上都是傳統(tǒng)的開發(fā)形式,都被拋棄了。
2.使用模塊化開發(fā)
為什么使用模塊化?
減少代碼之間的關聯(lián)度,部署方便,更好的分離,按需加載,避免命名沖突,容易維護。
3.什么是模塊化?
Node自帶的規(guī)范 commonjs規(guī)范
Commonjs是node的規(guī)范,運行在服務端,不是瀏覽器端,如果使用在瀏覽器端,需要使用對該文件進行打包編譯(借鑒工具browserify,webpack,gulp等)
書寫模塊的時候,對外暴露接口 module.exports={} ?exports.xxx=
引入模塊 require(路徑)
Commonjs暴露的本質(zhì)是一個叫exports的對象
Module.export={}和exports.xxx=
二者暴露的本質(zhì)是一樣的,都是暴露一個exports對象
Commonjs是node的規(guī)范,但他是同步加載的,同步加載在瀏覽器端是一個坑,只要一個環(huán)節(jié)卡住了,后面的就沒法執(zhí)行。所以不建議使用,如果非要使用就需要編輯打包。
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 jquery
下載存放的位置
全局下載 在任何一個文件夾下都能使用這個包 全局安裝目錄
C:\Users\Administrator\AppData\Roaming\npm\node_modules
如何全局安裝
Npm install -g jquery
局部安裝
Npm install jquery
就會在當前目錄下生成一個node_modules的文件夾里面
Npm install jquery --save
這個是下載運行環(huán)境(生產(chǎn)環(huán)境)的包 比如 jquery
?
Npm install jquery --save -dev
這個是下載開發(fā)環(huán)境所以來的包 比如npm browserify
?
二者區(qū)別
前者--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的文件
?{
"name":"cui",
"version":"1.0.0",
"description":"study",
"main":"index.js",
"scripts":{
"test":"echo\"Error :no test specified\" && exit 1"
},
"author":"",
"license":"ISC"
}
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?
Node
Node是javascript的環(huán)境,在node里面可以運行js文件。指令 ?node 文件名
轉載于:https://www.cnblogs.com/txf-123/p/10967461.html
總結
- 上一篇: 毁三观的变量定义
- 下一篇: standard_init_linux.