Vue(小码哥王洪元)笔记04前端模块化,模块化规范,模块对象的导出和导入,webpack打包,配置,loader,处理less,css,图片,vue,抽取模板内容,插件,搭建本地服务器

1、前端模块化

通过对象导出一系列的对象属性,这个对象赋值个模型
导出模型对象

//导出了一个model对象
var model = (function () { 
  var obj = {};
  var name = 'zhangsan';
  var age = 21;
  function sum(num1, num2) { 
    return num1 + num2;
  }
  var flag = true;
  if (flag) { 
    console.log(sum(10,34));
  }
  obj.flag = flag;
  obj.sum = sum;

  return obj;
})();

使用模型对象

modelA.flag
modelA.sum()

2、成熟的模块化规范

CommonJS
AMD
CMD
ES6的Models

3、CommonJs

有两个核心,导出和导入
以下代码必须在node.js环境中才能实现。

  • 1、CommonJS的导出
model.exports = {
  flag: true,
  test(a, b) { 
    return a + b;
  },
  demo(a, b) { 
    return a * b;
  }
}
  • 2、CommonJS的导入
//commonJS模块
let{test,demo,flag}=require('moduleA');
//等同于
let _mA=require('moduleA');
let test=_mA.test;
let demo=_mA.demo;
let flag=_mA.flag;

4、ES6的模块化

  • 在单独的一个文件(module.js)中编写模块脚本。
  • 主页面中通过

你可能感兴趣的:(Vue)