TLWB云开发平台文档(v4.0.0)

# 原因

  • 随着ajax的引入，前后端越来越分离。
  • 客户端将对服务端请求过来的数据进行加工、处理、渲染，所以导致前端的代码越来越多。工作中项目的开发是多人共同进行的，所以难免会避免不了一些重名的问题（利用的全局变量），若是这样的话默写自己定义的属性可能会被其他的属性进行篡改，导致巨大的问题

# 解决的方法

  • 匿名函数
//匿名函数的使用,之所以加分号，是防止js在引入的时候出现冲突
;(function(){})()
//缺点：因为函数自己有自己作用域，所以函数的复用性会变得比较差
1
2
3
  • 导出对象（模块化的基本封装）
//只需要记住模块化的名字即可，相对大量的变量命名的冲突会少的多
var moduleA = (function(){
    //利用该对象作为模块的出口
    var obj ={};
    obj.flag = true;
    obj.myfunc = function (info){
        console.log(info);
    };
    //返回对象
    return obj;
})();
1
2
3
4
5
6
7
8
9
10
11
  • 模块化规范（CommonJS——>node、AMD、CMD、也有ES6中的Modules）

# CommonJS(了解)

  • 核心：导出和导入
  • CommonJS的导出
module.exports = {
    flag : true,
    test(a,b){
        return a+b;
    }
}
1
2
3
4
5
6
  • CommonJS的导入
//CommonJS模块
let { test,demo,flag } = require('moduleA');
//等同于
let _mA =require('modeleA');
let test = _mA.test;
let demo = _mA.demo;
let flag = _mA.flag;
1
2
3
4
5
6
7

# ES6模块化实现

# export导出

//第一步设置引入的文件为module类型，保证js文件的独立性
<script src="./aaa.js" type="module"></script>
//第二步  在js文件中设置导出接口（对象），以至于外面可以访问内容文件
//aaa.js文件的内容
flag: true;
function sum(num1,num2){
    return num1+num2;
}
//第一种导出对象
exports{
    flag,sum，Person
}
//需要注意的是：对象在使用的时候必须new Person()进行创建
//第二种
export var flag = true;
export var height = 180;
//第三种  导出函数/类
export function sum(num1,num2){
    return num1+num2;
}
export class Person(){
    run(){
        console.log("征途将是星辰大海");
    }
}
//第四种  让用户自己定义名字，但是default只能有一个，如果出现多个将会区分不开
const address = "Zhangwan"
export default address;
//默认的使用方式
import ade from "./weizhi.js"(不存在则导入默认的方式)
console.log(ade);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# import导入

//导入{}定义的变量
Import {flag，sum} from "./aaa.js"
//全部导入
import * as aaa from "./vue/furture.js"
1
2
3
4

← webpack详解 →