ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
[TOC] ## AMD [require.js官网](http://requirejs.org/) 引入 require.js 会产生一下几个全局 - 全局 define函数 - 全局 require函数 - 依赖js会自动、异步加载 ## 使用非 AMD 形式的 模块化 ``` //util.js export{ getFormatDate:function(date,type){ } } //a-util.js var getFormatDate = require('util.js') export{ aGetormatDate:function(date){ return getFormatDate(date,2) } } //a.js var aGetormatDate = require('a-util.js') var dt = new Date() console.log(aGetormatDate(dt)) //HTML 中 引入 a 文件 即可 不会带来全局污染 <script scr='a.js '>< /script> ``` ### 使用require.js 进行模块化 依赖中的文件会异步加载 ``` //util.js define(function(){ return { getFormatDate;function(date,type){ if (type===1) { return '2017-06-15' }else if(type===2){ return '2017年6月15日' } } } }) //a-util.js define(['./util.js'],function(util){ return { aGetFormatDate:function(date){ return util.getFormatDate(date,2) } } }) //a.js define(['./a-util.js'],function(aUtil){ return { printDate:function(date){ console.log(aUtil.aGetFormatDate(date)) } } }) //main.js require(['./a.js'],function(a){ var date = new date() a.printDate(date) }) //HTML 中 引入 a 文件 即可 不会带来全局污染 <script src="/require.min.js" data-main="./main.js"></script> //require.js 也可以使用 CDN 上的 js ``` ### CommonJs 实现模块化 - nodes模块化规范,现在被大量用前端,原因 - 前端开发依赖的插件和库,都可以从npm中获取 - 构建工具的高度自动化,使得使用npm的成本非常低 - Commons不会异步加载JS,而是同步一次性加载出来 ### AMD和 Commons的使用场景 - 需要异步加载JS,使用AMD - 使用了npm之后建议使用 Commons ## 构建工具 - grunt - gulp - fis4 ### webpack 准备工作 1. 安装 nodejs 2. 安装`http-server` `sudo npm install http-server -g` #### 搭建 webpack 环境 1. 初始化 npm `npm init ` 填写相关项目相关信息 2. 安装 webpack ``` npm install webpack --save-dev --save : 保存起来 -dev : 只用在开发环境 ``` 3. 安装 `jquery` `npm install jquery --save` 4. 在项目目录中创建`webpack.config.js` ```js var path = require('path') var webpack = require ('webpack') module.exports = { context:path.resolve(__dirname,'./src'), //资源路径 entry:{ app:'./app.js' //app 的入口文件 }, output:{ path:path.resolve(__dirname,'./dist'), //输出文件地方 filename:'bundle.js' } } ``` 在`src/app.js`添加 `console.log(100)` 在 `packpage.json` 添加新的的script ``` "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack" //添加 webpack 在命令行中 运行 npm start }, ``` 在命令行中 `npm start` #### webpack 引用 jquery 在上诉项目中`app.js`引入 juqery ```js var $ = require('jquery') console.log($("body")); ``` 重新构建 `npm start` 刷新页面即可 #### 引入 a-utils.js 在`src/a-utils.js`中 ``` module.exports = { print:function(){ console.log(123) } } ``` 在`src/app,js` 中 ``` var aUtil = require('./a-utils.js') aUtil.print() ``` //重构 `npm start` 重构 `npm start`