码迷,mamicode.com
首页 > Web开发 > 详细

JS模块化

时间:2018-07-23 15:07:07      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:编码   下载安装   app   ini   命名   return   strong   右键   浏览器   

模块化的好处:1.避免命名冲突

                          2.更好的分离,按需加载

                          3.更高的复用性

                          4.高可维护性

    <script type="text/javascript" src="module1.js"></script>
    <script type="text/javascript" src="module2.js"></script>
    <script type="text/javascript" src="module3.js"></script>
    <script type="text/javascript" src="module4.js"></script>

 

问题:               1.引入文件过多

                          2.依赖模糊

                          3.难以维护

1.闭包IIFE模式

var loadingRender = (function (window,$) {
var a = 1;
return { init: function () { } } })(window,jQuery) loadingRender.init()

好处:模块内变量不受外界干扰;外面无法修改内部变量;只暴漏一个初始化的接口

2.服务器端commonJS使用方法

## Node.js模块化教程生成webpack文件 npm init
1. 下载安装node.js
2. 创建项目结构
```
|-modules
|-module1.js
|-module2.js
|-module3.js
|-app.js
|-package.json
{
"name": "commonJS-node", //姓名不能中文,和大写
"version": "1.0.0"
}
```
3. 下载第三方模块
* npm install uniq --save
4. 模块化编码
/*暴露一个对象*/
module.exports = {
    msg:‘module‘,
    foo(){
        console.log(this.msg)
    }
};
/*暴露一个函数*/
module.exports = function () {
  console.log(‘module2‘)
}
/*exports对象暴露出去*/
exports.foo = function () {
  console.log(‘module3‘)
}
exports.arr = [1,2,3,4,5,6,1,2,3,1,2];

调用

/*第三方模块引用*/
let uniq = require(‘uniq‘);
/*自定义模块引用*/
let module1 = require(‘./modules/module‘);
let module2 = require(‘./modules/module2‘);
let module3 = require(‘./modules/module3‘);
/*执行方法*/
module1.foo();
module2();
module3.foo();
let ary = uniq(module3.arr);
console.log(ary)
5. 通过node运行app.js
* 命令: node app.js
* 工具: 右键-->运行

3.在浏览器中使用commonjs## Browserify模块化使用教程1. 创建项目结构
  ```
|-js
|-dist //打包生成文件的目录
|-src //源码所在的目录
|-module1.js
|-module2.js
|-module3.js
|-app.js //应用主源文件
|-index.html
|-package.json
{
"name": "browserify-test",
"version": "1.0.0"
}
```
2. 下载browserify
* 全局: npm install browserify -g
* 局部: npm install browserify --save-dev dev开发环境依赖 save注入依赖
3. 定义模块代码
* module1.js
```
module.exports = {
foo() {
console.log(‘moudle1 foo()‘)
}
}
```
* module2.js
```
module.exports = function () {
console.log(‘module2()‘)
}
```
* module3.js
```
exports.foo = function () {
console.log(‘module3 foo()‘)
}

exports.bar = function () {
console.log(‘module3 bar()‘)
}
```
* app.js (应用的主js)
```
//引用模块
let module1 = require(‘./module1‘)
let module2 = require(‘./module2‘)
let module3 = require(‘./module3‘)

let uniq = require(‘uniq‘)

//使用模块
module1.foo()
module2()
module3.foo()
module3.bar()

console.log(uniq([1, 3, 1, 4, 3]))
```
* 打包处理js:
* browserify js/src/app.js -o js/dist/bundle.js
* 页面使用引入:
<script type="text/javascript" src="js/dist/bundle.js"></script> ;


4.ES6模块

JS模块化

标签:编码   下载安装   app   ini   命名   return   strong   右键   浏览器   

原文地址:https://www.cnblogs.com/liangfc/p/9353883.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!