GVKun编程网logo

使用ES6的模块编写web页面碰到的坑（es6html）

16

在这篇文章中，我们将带领您了解使用ES6的模块编写web页面碰到的坑的全貌，包括es6html的相关情况。同时，我们还将为您介绍有关-webkit-overflow-scrolling:touch介绍

在这篇文章中，我们将带领您了解使用ES6的模块编写web页面碰到的坑的全貌，包括es6html的相关情况。同时，我们还将为您介绍有关-webkit-overflow-scrolling:touch介绍和碰到的坑、ES6的模块化、es6的模块化和commonJS的模块化区别、es6的模块化编程的知识，以帮助您更好地理解这个主题。

本文目录一览：

使用ES6的模块编写web页面碰到的坑（es6html）

使用ES6的模块编写web页面碰到的坑（es6html）

 

昨天写最近在做的web应用时，在web页面的js文件中使用了模块功能，这样在html文件中只需要导入一个js就好了

做完测试时发现，模块导入时向服务器发送申请时，没有后缀名！

但是如果加了后缀名的话，eslint就会提示代码不规范。。

--------------------------------------------------------------------------这些是废话--------------------------------------------------------------------------

谷歌了一下，发现完全看不懂大家在说什么啊！什么mime什么二进制编码判断文件的。。

虽然我也有写mime.mjs但是完全不知道怎么做到通过文件的二进制编码判断文件类型啊！

当天已经不早了，故把别的不规范代码修正后便未接着做下去。

 

今天跑去问了一个教web的老师、一个jsp老师，两个老师给的答复一个是“为什么要没有后缀名呢，我们都用后缀名的啊”，另一个是“我不懂”

我的天啊，顺便吐槽一句，我的学校给老师分配教职任务时，完全是乱分配的嘛，上学期的java老师这学期给别的班教安卓，这学期的jsp老师研究方向是大数据，安卓老师一副我不是很懂所以大家随意的样子

--------------------------------------------------------------------------这些是废话--------------------------------------------------------------------------

之后我想了一想，可以通过判断文件夹名称给文件添加后缀名

注：我的文件夹嵌套是

html

--css

--js

故可如此将就一下。

服务器端代码如下：

// 不使用上传功能且按后缀名分类文件的话这样应该够用了吧
// 为无后缀的请求添加后缀
// pathname是文件存放地址
if (pathname.indexOf(''.'') === -1) {
    // 临时存储倒数第一个反斜杠的位置
    const tempCoordinate1 = pathname.lastIndexOf(''\\'');
    // 临时存储倒数第二个反斜杠的位置
    const tempCoordinate2 = pathname.lastIndexOf(''\\'', tempCoordinate1 - 1);
    // 临时存储后缀名
    const tempMime = pathname.substring(tempCoordinate2 + 1, tempCoordinate1);
    pathname = `${pathname}.${tempMime}`;
}

这为其一

 

做好这个后我又接着使用eslint了，然后发现一个更坑的

eslint提示''Vue'' is not defined

然后我尝试导入vue，之后发现，我js文件夹中的vue文件，没有使用export导出文件，翻看了一下官方文档，虽然知道了npm包中的vue.esm.browser.js为浏览器中使用的js，但是接着向下翻就完全不懂其说的使用打包工具进行打包需要添加的属性，我并不会使用打包工具啊！而且每次测试都要打包也太怪了吧！故又跑去谷歌，发现大家说的也是糊里糊涂的。

在尝试各种网上的方法后，我快要被搞得心态爆炸了，突然我的脑袋灵光一闪，何不去看一看这个vue.esm.browser.js文件写的是什么呢。跑去一看，好家伙，还真是使用ES6的模块一个js文件，赶紧覆盖了我原来的vue文件，使用eslint和web测试了一下，完美

-webkit-overflow-scrolling:touch介绍和碰到的坑

-webkit-overflow-scrolling:touch介绍和碰到的坑

1.作用

       可控制元素在移动设备有滚动回弹效果，可惯性滚动

2.适应场景

      在ios移动端上，设置容器overflow-y:scroll;使容器内元素滚动时，滑动会很卡顿，使用-webkit-overflow-scrolling:touch;可以解决该问题。 

     原理：该属性开启了硬件加速

     缺点：耗内存

3.引发的bug（仅ios）

     3.1 在设置了该属性的滚动容器内手动设置scrollTop时容器会变空白，（内容绘制出错，应该是浏览器底层的问题）

     3.2 手动设置scrollTop,某些机型上的scrollTop值改变了，但是页面不滚动

     3.3 滑动时偶尔卡顿

4.解决方案

    3.1 & 3.2（规避问题）：在手动改变scrollTop前先将-webkit-overflow-scrolling属性设置为auto,scrollTop改变后再设置回touch

    3.1: 可先让页面延时100ms再滚动1px,空白可以恢复正常

    3.2：给容器的某个子元素高度加1px

    3.3：给容器设置position:static

 

ES6的模块化

ES6的模块化

如果你对模块化已经了解，可以直接从第三点开始阅读。

一、模块化的概念：

在进行项目分析或者编码时，先把项目进行拆分，拆分成很多的类，对象，很多的函数等等。能够提高代码的复用性。这些被拆分出来的类型，对象，函数就是模块。就像一辆汽车是由很多的零部件组成，每个零部件就是一个小模块，而由很多零件组成的发动机之于一辆汽车可以认为是一个大模块；或者说，一台计算机，由主板，cpu，内存，硬盘，显示器，键盘等大模块组成。而一个内存或者cpu又分别由很多的小模块组成。以模块为单位管理代码，会更加独立，调试方便，维护也很方便。

 

二、模块化经历的阶段：

    1. 函数封装

这种做法的缺点很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。不同js文件里有相同的全局变量，如果被引入到同一个html文件中，全局变量就会互相影响。

     2. 对象

这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内的成员也有了关系，看似不错的解决方案，但是也有缺陷，外部（对象之外）可以随意修改内部成员(属性)

对象的属性就是对象中每个方法的全局变量。

var p = {

    id:"007",

    name :"芙蓉",

    age:25,    

    eat:function(str){

        alert(this.name+"在吃"+str);

    },

    work:function(str){

        alert(this.name+“在干"+str);

    }           

}

//存在问题：

//如：对于p对象的年龄,有效取值应该是在0-150之间的整数。

//  而以下代码的执行，

p.age = 151;

都会使得项目内部出现了不合法的数据。这是程序的健壮性不好。   

所以，对于对象的成员变量(属性)，应该不能被外部访问才对。

  3.  立即执行函数

可以通过立即执行函数，来达到隐藏细节的目的


var p = (function (){

    var name="芙蓉";

    var age=25;

    function eat(str){

        alert(this.name+"在吃"+str);

    }

    function setAge(age){

        if(age<0 || age>150){

            alert("亲，年龄超出有效值（0-150）的范围");

            return;

        }

        age = age;

    }

    function getAge(){

        return age;

    }

    return {

        eat:eat,

        setAge:setAge,

        getAge:getAge

    }                   

})();  

var p = (function (){

    var name="芙蓉";

    var age=25;

    function eat(str){

        alert(this.name+"在吃"+str);

    }

    function setAge(age){

        if(age<0 || age>150){

            alert("亲，年龄超出有效值（0-150）的范围");

            return;

        }

        age = age;

    }

    function getAge(){

        return age;

    }

    return {

        eat:eat,

        setAge:setAge,

        getAge:getAge

    }                   

})();  

    4. 模块化的解决方案。

  •  以上模块化存在的问题：

不管是以上哪种方式（函数，对象，立即执行函数），都存在同样的问题：

1)、html不但要引入自己需要的js文件，还需要引入js文件需要的js文件。如：a.html需要使用 b.js的代码，而由于b.js中使用了c.js里的代码。所以，在a.html中必须引入b.js和c.js。这是JavaScript语言先天性的缺陷----js文件没法引入js文件。其它编程语言（java，c#，c/c++）就不存在这个问题。

2)、引入js文件的顺序问题以及异步加载问题。

 

  • 为此出现了一些解决方案：

 1)、前端模块化

    在前端里出现了第三方的解决方案 AMD和CMD

 2)、后端模块化

    在后端里（nodeJS）出现了commonjs规范。

 

三、ES6的模块化：

   1、原生支持模块化了

ES6中新增的模块化，即从ES6开始，原生js支持模块化了，现在很多浏览器也支持模块化了。

  2、模块化的两个概念

    1）、导出（export关键字）：导出就是对外开放的，可以导出变量，常量，函数，对象等等。使用export关键字。放在export关键字后面的（即对外导出的）变量，常量，函数和对象，在其它js文件中可以使用，否则，其它js文件中是不能使用的。即只能内部使用的。

在用export导出时，可以导出多个

如：person.js文件（模块）里，如下：

//导出字符串

export var str = "hello";

//导出函数

export var fun = function(){

    alert("我是函数");

}

//导出对象

export const p =  {

    "id":"007",

    "name":"张三疯",

    "eat":function(){

        alert("吃");

        ff();

    }

}

//此函数没有使用export关键字导出，所以，只能在当前js文件内部使用

function ff(){

    alert("我只能在当前js被使用");

}

2）、导入（import）：导入就是把其它js文件引入到当前js文件里。使用关键字import。

 

在使用import导入（export导出的）时，要使用花括号，

如：import {str,fun,p} from './person.js';

 

在index.js文件中，引入模块person.js；

//导入时，需要使用{}，这是解构赋值。

import {str,fun,p} from './person.js';

window.onload = function(){

    document.getElementById("btn01").onclick = function(){

        console.log(str);

        fun();

        console.log(p.id);

        p.eat();

    }

}

3）、在html文件中引入index.js（注意： type="module"）
注意：js中使用了模块化的关键字import，在引入时，script标签的type属性的值必须写成module。即：<script type="module" src="js/index.js"></script>

 

<body>

    <input id="btn01" type="button" value="测试" />

</body>

<script type="module" src="js/index.js"></script>

注意：测试以上代码时，google浏览器要求放在服务器上进行 ，否则，就会有跨域问题。

4）、export default和export 有什么区别：

  1. 、export与export default均可用于导出常量、函数、文件、模块等
  2. 、在一个文件或模块中，export可以有多个，export default仅有一个，而且export default在导出是不需要变量名，相当于匿名的。
  3. 、通过export方式导出，在导入时要加{ }，export default则不需要。

代码示例：

模块定义：dog.js

export default {

    "name":"大黄",

    "eat":function(){

        alert("吃");

    }

}

导入模块：

import d from './dog.js';

window.onload = function(){

    document.getElementById("btn01").onclick = function(){

        console.log(d);

        d.eat();

    }

}

 

es6的模块化和commonJS的模块化区别

es6的模块化和commonJS的模块化区别

表列 Aes6commonjs
导入importrequire
导出exports（可以多个），exports default（只能1个）module.exports
加载机制输出的是值的引用输入的是被输出的值的拷贝，模块内部的变化就影响不到这个值

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
CommonJs 是单个值导出，ES6 Module可以导出多个
CommonJs 是动态语法可以写在判断里，ES6 Module 静态语法只能写在顶层
CommonJs 的 this 是当前模块，ES6 Module的 this 是 undefined

es6的模块化编程

es6的模块化编程

es6的模块化编程
基本用法
es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个 变量，就必须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量。

// math.js

export const add = function (a, b) {
    return a + b
}

export const subtract = function (a, b) {
    return a - b
}
exports & import
一个模块包含多个独立的子功能，如果需要公开相应的功能模块，直接用export关键字即可，来看一个例子：
// exports.js
export function foo(canvas, options) {
  //可以导出function
}
export class bar {
  //可以导出class
}
export {foo,bar} //可以是Object
导入模块
import {foo, bar} from "kittydar.js";
//重命名
import {foo as fooRename} from "kittydar.js";
import {bar as barRename} from "kittydar.js";
export default

ES6完全支持import语句从历史项目AMD或CommonJS模块化方案中导入模块。

//传统CommonJS写法
module.export = {
  field1: value1,
  field2: function(){
    //implements
  }
}
//ES6写法
//exportDefault.js
export default {
   field1: value1,
   field2: function(){
     //implements
   }
};
模块化（ES6最新定义的写码方式）。跟大家过去的那种写码方式相比，模块化有一些不同，具体来说：

  1. 模块需要用严格模式，这别无选择；

  2. 模块有一个顶级作用域，但不是全局作用域；

  3. 可以通过import从其他模块引入绑定；

  4. 可以通过export声明需要输出的绑定。

关于使用ES6的模块编写web页面碰到的坑和es6html的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于-webkit-overflow-scrolling:touch介绍和碰到的坑、ES6的模块化、es6的模块化和commonJS的模块化区别、es6的模块化编程的相关知识，请在本站寻找。

本文标签：

上一篇Bootstrap框架和inconfont、font-awesome使用（bootstrap3框架）

下一篇前端函数防抖(debounce)和函数节流(throttle)（函数防抖和节流js实现）

相关文章