如何理解前端模块化

JavaScript010

如何理解前端模块化,第1张

前端模块化

在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀

这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码

模块

既然JavaScript不能handle如此大规模的代码,我们可以借鉴一下其它语言是怎么处理大规模程序设计的,在Java中有一个重要带概念——package,逻辑上相关的代码组织到同一个包内,包内是一个相对独立的王国,不用担心命名冲突什么的,那么外部如果使用呢?直接import对应的package即可

import java.util.ArrayList

遗憾的是JavaScript在设计时定位原因,没有提供类似的功能,开发者需要模拟出类似的功能,来隔离、组织复杂的JavaScript代码,我们称为模块化。

一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。模块开发需要遵循一定的规范,各行其是就都乱套了

规范形成的过程是痛苦的,前端的先驱在刀耕火种、茹毛饮血的阶段开始,发展到现在初具规模,简单了解一下这段不凡的历程

函数封装

我们在讲函数的时候提到,函数一个功能就是实现特定逻辑的一组语句打包,而且JavaScript的作用域就是基于函数的,所以把函数作为模块化的第一步是很自然的事情,在一个文件里面编写几个相关函数就是最开始的模块了

function fn1(){

statement

}

function fn2(){

statement

}

这样在需要的以后夹在函数所在文件,调用函数就可以了

这种做法的缺点很明显:污染了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间没什么关系。

对象

为了解决上面问题,对象的写法应运而生,可以把所有的模块成员封装在一个对象中

var myModule = {

var1: 1,

var2: 2,

fn1: function(){

},

fn2: function(){

}

}

这样我们在希望调用模块的时候引用对应文件,然后

myModule.fn2()

这样避免了变量污染,只要保证模块名唯一即可,同时同一模块内的成员也有了关系

看似不错的解决方案,但是也有缺陷,外部可以随意修改内部成员

myModel.var1 = 100

这样就会产生意外的安全问题

立即执行函数

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

var myModule = (function(){

var var1 = 1

var var2 = 2

function fn1(){

}

function fn2(){

}

return {

fn1: fn1,

fn2: fn2

}

})()

这样在模块外部无法修改我们没有暴露出来的变量、函数

上述做法就是我们模块化的基础,目前,通行的JavaScript模块规范主要有两种:CommonJS和AMD

CommonJS

我们先从CommonJS谈起,因为在网页端没有模块化编程只是页面JavaScript逻辑复杂,但也可以工作下去,在服务器端却一定要有模块,所以虽然JavaScript在web端发展这么多年,第一个流行的模块化规范却由服务器端的JavaScript应用带来,CommonJS规范是由NodeJS发扬光大,这标志着JavaScript模块化编程正式登上舞台。

定义模块

根据CommonJS规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性

模块输出:

模块只有一个出口,module.exports对象,我们需要把模块希望输出的内容放入该对象

加载模块:

加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象

在研究react和webpack的时候,经常看到在js文件中出现require,还有import,这两个都是为了JS模块化编程使用。CSS的是@import

1.ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。

Require是CommonJS的语法,CommonJS的模块是对象,输入时必须查找对象属性。

复制代码

复制代码

// CommonJS模块

let { stat, exists, readFile } = require('fs')

// 等同于

let _fs = require('fs')

let stat = _fs.stat

let exists = _fs.exists

let readfile = _fs.readfile

复制代码

above:整体加载fs模块(即加载fs所有方法),生成一个对象"_fs",然后再从这个对象上读取三个方法,这叫“运行时加载”,因为只有运行时才能得到这个对象,不能在编译时做到静态化。

ES6模块不是对象,而是通过export命令显示指定输出代码,再通过import输入。

import { stat, exists, readFile } from 'fs'

above:从fs加载“stat, exists, readFile” 三个方法,其他方法不加载,

2.ES6模块默认使用严格模式,无论是否声明“use strict”

ES6 模块之中,顶层的this指向undefined,即不应该在顶层代码使用this。

Module 主要由两个命令组成,import和export,export用于规定模块的对外接口,import命令用于输入其他模块提供的功能

3.Export

模块是独立的文件,该文件内部的所有的变量外部都无法获取。如果希望获取某个变量,必须通过export输出,

// profile.js

export var firstName = 'Michael'

export var lastName = 'Jackson'

export var year = 1958

或者用更好的方式:用大括号指定要输出的一组变量

复制代码

// profile.js

var firstName = 'Michael'

var lastName = 'Jackson'

var year = 1958

export {firstName, lastName, year}

复制代码

除了输出变量,还可以输出函数或者类(class),

export function multiply(x, y) {

return x * y

}

还可以批量输出,同样是要包含在大括号里,也可以用as重命名:

复制代码

复制代码

function v1() { ... }

function v2() { ... }

export {

v1 as streamV1,

v2 as streamV2,

v2 as streamLatestVersion

}

复制代码

Attention:

export 命令规定的是对外接口,必须与模块内部变量建立一一对应的关系

复制代码

复制代码

// 写法一

export var m = 1

// 写法二

var m = 1

export {m}

// 写法三

var n = 1

export {n as m}

// 报错

export 1

// 报错

var m = 1

export m

复制代码

报错的写法原因是:没有提供对外的接口,第一种直接输出1,第二种虽然有变量m,但还是直接输出1,导致无法解构。

同样的,function和class的输出,也必须遵守这样的写法。

复制代码

复制代码

// 报错

function f() {}

export f

// 正确

export function f() {}

// 正确

function f() {}

export {f}

复制代码

And:export语句输出的接口,都是和其对应的值是动态绑定的关系,即通过该接口取到的都是模块内部实时的值。

位置:export模块可以位于模块中的任何位置,但是必须是在模块顶层,如果在其他作用域内,会报错。

function foo() {

export default 'bar' // SyntaxError

}

foo()

4.Import命令

export定义了模块的对外接口后,其他JS文件就可以通过import来加载这个模块,

复制代码

// main.js

import {firstName, lastName, year} from './profile'

function setName(element) {

element.textContent = firstName + ' ' + lastName

}

复制代码

import命令接受一对大括号,里面指定要从其他模块导入的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

如果想重新给导入的变量一个名字,可以用as关键字,

import { lastName as surname } from './profile'

import后的from 可以指定需要导入模块的路径名,可以是绝对路径,也可以是相对路径, .js路径可以省略,如果只有模块名,不带有路径,需要有配置文件指定。

注意,import命令具有提升效果,会提升到整个模块的头部,首先执行。(是在编译阶段执行的)

因为import是静态执行的,不能使用表达式和变量,即在运行时才能拿到结果的语法结构(e.g. if...else...)

程序员逻辑思维的培养对软件工程非常重要,思维快的能快速编写逻辑代码。可以从一下几个方面进行慢慢培养。第一:明确学习目的逻辑思维学习编程对多数IT业人员来说都是非常有用的。学编程,做一名编程人员,从个人角度讲,可以解决在软件使用中所遇到的问题,改进现有软件,可以为自己找到一份理想的工作添加重要得砝码,有利于在求职道路上谋得一个好的职位;从国家的角度,可以为中国的软件产业做出应有的贡献,一名优秀的程序员永远是被争夺的对象。学习编程还能锻炼思维,使我们的逻辑思维更加严密;能够不断享受到创新的乐趣,将一直有机会走在高科技的前沿,因为程序设计本身是一种创造性的工作。知识经济时代给我们带来了无限的机会,要想真正掌握计算机技术,并在IT行业里干出一番事业来,有所作为,具有一定的编程能力是一个基本条件和要求。第二打好基础,学好基础知识对我们开发也很重要学编程要具备一定的基础,总结之有以下几方面:首先是数学基础 从计算机发展和应用的历史来看计算机的数学模型和体系结构等都是有数学家提出的,最早的计算机也是为数值计算而设计的。因此,要学好计算机就要有一定的数学基础,出学者有高中水平就差不多了。其次是逻辑思维能力的培养 学程序设计要有一定的逻辑思维能力,“逻思力”的培养要长时间的实践锻炼。要想成为一名优秀的程序员,最重要的是掌握编程思想。要做到这一点必须在反复的实践、观察、分析、比较、总结中逐渐地积累。因此在学习编程过程中,我们不必等到什么都完全明白了才去动手实践,只要明白了大概,就要敢于自己动手去体验。谁都有第一次。有些问题只有通过实践后才能明白,也只有实践才能把老师和书上的知识变成自己的,高手都是这样成材的。最后是选择一种合适的入门语言 面对各种各样的语言,应按什么样的顺序学呢?程序设计工具不外乎如下几类: 1)本地开发 应用软件开发的工具有:Visual Basic 、Delphi 、VC++ ( C++ Builder ) 等;数据库开发工具有:Visual Foxpro 、Oracle Developer 、Power Builder 等。 2)跨平台开发 开发工具如 Java 等。 3)网络开发 对客户端开发工具如:Java Script 等;对服务器开发工具如:PHP 、ASP 、JSP 、ISAPI 、NSAPI 、CGI 等。 以上不同的环境下几种开发工具中 VB 法简单并容易理解,界面设计是可设化的,易学、易用。选 VB 作为入门的方向对出学者是较为适合的。第三:注意理解一些重要概念一本程序设计的书看到的无非就是变量、函数、条件语句、循环语句等概念,但要真正能进行编程应用,需要深入理解这些概念,在理解的基础上应用,不要只简单地学习语法、结构,而要吃透针对这些语法、结构的应用例子,做到举一反三,触类旁通。第四:掌握编程思想,编程思想使用较多的就是oop编程思想学习一门语言或开发工具,语法结构、功能调用是次要的,最主要是学习它的思想。例如学习 VC 就要学习 Windows 的内在机理、什么是线程......;学习 COM 就要知道VTALBE 、类厂、接口、idl......,关键是学一种思想,有了思想,那么我们就可以触类旁通。第六:多实践、多交流,一切思维来自项目开发的积累掌握编程思想必须在编程实际工作中去实践和体会。编程起步阶段要经常自己动手设计程序,具体设计时不要拘泥于固定的思维方式,遇到问题要多想几种解决的方案。这就要多交流,各人的思维方式不同、角度各异,各有高招,通过交流可不断吸收别人的长处,丰富编程实践,帮助自己提高水平。亲自动手进行程序设计是创造性思维应用的体现,也是培养逻辑思维的好方法。第七:养成良好的编程习惯编程入门不难,但入门后不断学习是十分重要的,相对来说较为漫长。在此期间要注意养成一些良好的编程习惯。编程风格的好坏很大程度影响程序质量。良好的编程风格可以使程序结构清晰合理,且使程序代码便于维护。如代码的缩进编排、变量命令规则的一致性、代码的注释等。第八:上网学编程在网上可以学到很多不同的编程思想、方法、经验和技巧,有大量的工具和作品及相关的辅导材料供下载8.加强计算机理论知识的再学习思维培养学编程是符合“理论→实践→再理论→再实践”的一个认识过程。一开始要具有一定的计算机理论基础知识,包括编程所需的数学基础知识,具备了入门的条件,就可以开始编程的实践,从实践中可以发现问题需要加强计算机理论知识的再学习。程序人人皆可编,但当你发现编到一定程度很难再提高的时候,就要回头来学习一些计算机科学和数学基础理论。学过之后,很多以前遇到的问题都会迎刃而解,使人有豁然开朗之感。因此在学习编程的过程中要不断地针对应用中的困惑和问题深入学习数据结构、算法、计算机原理、编译原理、操作系统原理、软件工程等计算机科学的理论基础和数理逻辑、代数系统、图论、离散数学等数学理论基础知识。这样经过不断的学习,再努力地实践,编程水平一定会不断提高到一个新高度。这就是总结出来的思维培养模式,希望能帮到你,谢谢!