专栏首页前端入门学习初学者接触web前端需要注意什么?避免走上弯路
原创

初学者接触web前端需要注意什么?避免走上弯路

初学Web前端要注意什么?如何学好JS模块化编程?JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎。很多同学表示JavaScript涵盖的知识点太多太复杂、应用也是五花八门完全摸不着头脑。但只要我们一点一点由基础到进阶的学习,就一定能学好JavaScript,接下来小编就给大家分享有关JavaScript模块化编程的知识。

模块是实现特定功能的一组方法,模块化是一种规范、一种约束,这种约束会大大提升开发效率。JS模块化思想是将每个JS文件看作是一个模块,每个模块通过固定的方式引入,并且通过固定的方式向外暴露指定的内容。

模块化需要实现的功能

1.解决命名冲突。当代码达到一定规模,功能很多的时,命名冲突就会出现,模块化可以很好的解决命名冲突的问题。

2.实现依赖管理。当一个页面要加载多个JS并且他们之际有些还有依赖关系,这时候就需要慎重仔细的排列这些JS的顺序,以保证每个组件都能正常运行,而模块化之后就不用为此多费心思。

3.提高复用性和代码可读性。一个功能为一个模块,每个模块相互独立,互不影响,代码组件封装可以重复利用,去除这个模块不影响其它的。

JavaScript模块化发展

闭包与命名空间

这是最容易想到的也是最简便的解决方式,早在模块化概念提出之前很多人就已经使用闭包的方式来解决变量重名和污染问题。这样每个JS文件都是使用IIFE包裹的,各个JS文件分别在不同的词法作用域中,相互隔离,最后通过闭包的方式暴露变量。每个闭包都是单独一个文件,每个文件仍然通过script标签的方式下载,标签的顺序就是模块的依赖关系。

面向对象开发

这种方法只是闭包方式的小改进,约束js文件返回必须是对象,对象其实就是一些个方法和属性的集合。这样的优点:1)规范化输出,更加统一的便于相互依赖和引用;2)使用‘类’的方式开发,便于后面的依赖进行扩展。本质上这种方法只是对闭包方法的规范约束,并没有做什么根本改动。

YUI

雅虎出品的一个工具,模块化管理只是一部分,其还具有JS压缩、混淆、请求合并(合并资源需要server端配合)等性能优化的工具,可谓是现有JS模块化的鼻祖。通过YUI全局对象去管理不同模块,所有模块都只是对象上的不同属性,相当于是不同程序运行在操作系统上。

CommonJs

2009年Nodejs发布,Commonjs发布之后,就成了Node里面标准的模块化管理工具。同时Node还推出了npm包管理工具,npm平台上的包均满足Commonjs规范,随着Node与npm的发展,Commonjs影响力也越来越大,并且促进了后面模块化工具的发展,具有里程碑意义的模块化工具。

AMD和RequireJS

AMD是"AsynchronousModuleDefinition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到所有依赖加载完成之后(前置依赖),这个回调函数才会运行。

RequireJs是JS模块化的工具框架,是AMD规范的具体实现。但是有意思的是,RequireJs诞生之后,推广过程中产生的AMD规范。RequireJs的优点:1)动态并行加载js,依赖前置,无需再考虑js加载顺序问题;2)核心还是注入变量的沙箱编译,解决模块化问题;3)规范化输入输出,使用起来方便;4)对于不满足AMD规范的文件可以很好地兼容。

CMD和SeaJs

CMD规范由国内(阿里)诞生,借鉴了Commonjs的规范与AMD规范,在两者基础上做了改进。特点:1)define定义模块、require加载模块、exports暴露变量;2)不同于AMD的依赖前置,CMD推崇依赖就近(需要的时候再加载);3)推崇api功能单一,一个模块干一件事。

SeaJs是CMD规范的实现,跟RequireJs类似,CMD也是SeaJs推广过程中诞生的规范。CMD借鉴了很多AMD和Commonjs优点,同样SeaJs也对AMD和Commonjs做出了很多兼容。

ES6中的模块化

ES6规范中终于将模块化纳入JavaScript标准,从此JS模块化被官方扶正,也是未来JS的标准。ES6中的模块化在Commonjs的基础上有所不同,增加了关键字import、export、default、as、from,而不是全局对象。二者有两点主要的区别:1)CommonJS模块输出的是一个值的拷贝,ES6模块输出的是值的引用;2)CommonJS模块是运行时加载,ES6模块是编译时输出接口。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 最全Html标签Meta介绍,全面总结,学HTML这一篇够了

    今天查Html手册时,又有了新的发现。也就这机会,好好总结下HTML中Meta的使用。

    用户5827212
  • 月入35k大佬总结:web前端必须学习的内容(附全套前端教程)

    优秀的WEB前端工程师具备编写任何一个互联网系统的前端页面、交互代码的能力。根据对100家互联网名企对Web开发工程师的招聘要求分析,企业要求主要有两部分,一个...

    用户5827212
  • 你不知道的web前端那些事

    你不知道的web前端那些事,web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HT...

    用户5827212
  • 理解动态规划

    我们小时候上学的时候,从家到学校的方案应该有多种,假如某一天你想知道走哪一条路最快到学校,走哪一条路最慢,走哪一条路风景最好,该怎么办呢?

    每天学Java
  • Typecho 的 Handsome 主题下谷歌 AdSense 广告错位修正

    最近明月在 Handsome 主题“文章页脚广告位”广告位投放了谷歌 AdSense 的“匹配内容”广告样式,这种广告样式的匹配度和对用户的吸引力以及延长访问者...

    明月云服务
  • Typecho 的 Handsome 主题下谷歌 AdSense 广告错位修正

    最近明月在 Handsome 主题“文章页脚广告位”广告位投放了谷歌 AdSense 的“匹配内容”广告样式,这种广告样式的匹配度和对用户的吸引力以及延长访问者...

    明月登楼
  • ETC和IOTA谁将是物联网领域的霸主?

    进入11月份,IOTA市值暴涨了8倍多,一跃进入数字货币排行榜前四,成功击败老牌数字货币瑞波币。IOTA主要服务于物联网,炒作的点也是物联网,而物联网在近两年也...

    企鹅号小编
  • Windows和Linux的环境变量

    环境变量(Environment Variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数,如:临时文件夹位置和系统文件夹位置等。

    于小勇
  • jenkins中的环境变量 原

    这些环境变量可以在Shell或Batch脚本中被使用,以JOB_NAME环境变量为例:

    donghui
  • 爬虫笔记2-解析

    BeautifulSoup 用于解析已经抓取的文件内容。是解析、遍历、维护“标签树”的功能库。

    七适散人

扫码关注云+社区

领取腾讯云代金券