CommonJS与ES6模块化的具体使用方式

JavaScript011

CommonJS与ES6模块化的具体使用方式,第1张

所以:只需要将需要暴露给外部的变量或者方法 设置为exports的属性 就行,

可以把exports看做一个全局对象,把所有暴露出来的函数和变量都存放在里面

1.先写个6.js文件

CommonJS规范规定,每个模块内部,module变量代表当前模板,这个变量是一个对象,他的 exports 属性(相当于 module.exports )是对外的接口。 这里详情请看我的另一篇文章: module、exports 和 require的关系

加载某个模块,其实是加载该模块的module.exports属性。require方法用于加载模块

ES6模块化的使用方法:(注!因为CommonJS类库众多,以及 CommonJS 和 ES6 之间的差异,所以无法直接兼容es6。)

直接/按需导出:可使用多个 用变量/常量的方式

导入:需要用按需导入 {解构} 的方式获取

默认导出:只能使用一个 (default属性只有es6才有)可以用引入对象定义多个属性,但这样在引入后调用的时候,更麻烦。

导入:优点:可以直接使用文件做接收参数且不用结构。

重命名export和import

如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题,为了解决该问题,ES6为提供了重命名的方法,当你在导入名称时可以这样做:

如果想看CommonJS与ES6模块化的原理 可以去看我另一篇文章

[秦圆圆]大佬写的 require和import的区别

[大孩子气]大佬写的 require/exports、import/export 的区别

[七分sunshine!]大佬写的# 前端模块化工具 requireJs的使用

1、学习html5不需要会java,但是需要编程基础,比如各种JS/JQuery等。

2、学习html5最重要的不是已经会多少东西,而是你的不断学习的学习能力。要明白,技术是时刻在更新的。

学习HTML5可以参考下列进阶知识:

一、前段页面重构

1、PC端网站布局(HTML基础,CSS基础,CSS核心属性;CSS样式层叠,继承,盒模型;浏览器兼容性与宽高自适应;定位、锚点、图片整合;表格,CSS属性与滤镜。)

2、HTML5+CSS3基础(HTML5新增的元素与属性;CSS3选择器、媒体查询;CSS3位移与变形处理;CSS3 2D、3D转换与过度动画;响应式设计。)

3、WebApp页面布局(移动端页面设计规范;移动端切图;文字流式/控件弹性/图片等比例/特殊设计的100%布局;等比缩放布局;viewport/meta、rem/vw的使用;移动web特别样式处理)

二、JavaScript高级程序设计

1、原生JavaScript交互功能(基本语法、循环语句、函数与数组、String与Date、BOM与DOM、事件、拖拽效果、cookie存储、正则表达式、Ajax、面向对象基础、运动与游戏开发)

2、面向对象进阶与ES5/ES6应用(Promise/A+、设计模式(观察者模式等)、原型链、构造函数、执行上下文栈与执行上下文、变量对象与活动对象、作用域链、闭包、this、ES5、ES6)

3、JavaScript工具库(DOM库、事件库、AJAX库、原型和继承库、MVVM核心库、基于SPA的路由库)

三、PC端全栈项目

1、jQuery经典交互特效(时间轴特效、tab页面切换效果、网页定位导航特效、滑动门特效、焦点图轮播特效、导航条菜单效果、瀑布流特效、弹出层效果、倒计时效果、抽奖效果)

2、PHP+MySQL后端基础(PHP、MySQL、HTTP(s)协议详解、Ajax进阶、跨域与Defered、Apache与Nginx 环境搭建与配置、接口的定义、Mock数据、Restful、前后端联调、前端安全XSS,CSRF,JSON注入)

3、前端工程化与模块化应用(Gulp、Webpack、NPM、Git/SVN、CommonJS、AMD、CMD、ES6模块化)

四、移动端WebApp开发

1、应用Vue.js开发WebApp项目

2、应用React.js开发WebApp项目

3、应用Angular开发WebApp项目

五、混合(Hybrid,RN)开发

1、微信公众号开发

2、微信小程序开发

3、React Native

六、NodeJS基础、MongoDB、GraphGL、Express、Koa、socket 即时通信

??

分为以下几个步骤:

①npm 安装axios,文件根目录下安装。

②修改原型链,在main.js中引入axios,接着将axios改写为Vue的原型属性,这样之后就可在每个组件的methods中调用$http命令完成数据请求。