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

JavaScript017

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的使用

因为jquery之前较少使用,这里记录一下jquery验证使用方式。当然,具体问题具体解决。

1.引入jquery.js和jquery.validate.js

2.表单中的内容

<STYLE type=text/css>input.error { border: 2px dashed red} LABEL { color: red} textarea.error { border: 2px dashed red} </STYLE>

<form id="dataForm" name="dataForm" action="import" method="post">

<table boder="0">

<tr><td>名称:<input type="text" id="name" name="name" ></td></tr>

<tr><td>年份:<input type="text" id="dataYear"name="dataYear"/>*</td></tr>

<tr><td><input type="submit" value="数据入库"/></td></tr>

</table>

</form>

3.jquery验证

<script type="text/javascript">

$("#dataForm").validate( {//提交表单时,开始验证

rules : {

'name' : {

required : true

},

'dataYear' : {

required : true

}

},

messages : {

'name' : {

required : "请输入名称"

},

'dataYear' : {

required : "请输入时间"

}

},

focusInvalid : false,

onkeyup : false,

errorPlacement : function(error, element) {

error.appendTo(element.parent())

}

})

</script>

common.js跟普通的js包含文件并没有其他不一样,主要是一些javascript经常要用到的函数,也定义了一些包括浏览器兼容,cookie操作,字符串函数扩展,图片操作等脚本,都是比较简单的函数扩展,直接看代码比较容易理解有编程基础的应该清楚程序头文件的作用,他就相当于javascript的一个头文件,为了具有更广泛的通用性,一般不调用其他文件,因此这个文件也可以直接用于其他页面js的扩展调用其中的函数大多是为了基于代码重用的目的方便在页面中调用,每次版本更新对这个文件的修改除了某些函数算法的优化,还要应对程序的扩展而对函数调用接口的更新,跟程序头文件的操作方式类似.