前端开发者如何写好简历 - 知乎专栏
你正在使用一个过时的浏览器。请以查看此页面。
{"debug":false,"apiRoot":"","paySDK":"/api/js","wechatConfigAPI":"/api/wechat/jssdkconfig","name":"production","instance":"column","tokens":{"X-XSRF-TOKEN":null,"X-UDID":null,"Authorization":"oauth c3cef7c66aa9e6a1e3160e20"}}
{"database":{"Post":{"":{"title":"前端开发者如何写好简历","author":"yubolun","content":"原文链接：作者：我一直都乐忠于评价发来我所在工作室的求职简历。并且我也经常听取别人对我自己简历的建议。有一天我就想，帮着有需要的人审阅他们的简历应该是很有意思的一件事。我也没有预料到后来发生的事。所以我就在一个有120,000人关注的频道上，发起了一个免费帮别人评阅简历的话题。在接下来的3天里，越来越多的人发给了我他们的请求。完成了这些审阅后，我也总结出了许多很有用的要点供大家参考。P.S. 需要提醒大家的是，本文中的简历教学主要针对前端开发者，要是你有不同的求职意向，这篇文章恐怕对你就不会那么有用了。在写简历的时候我们应该避免那些问题？我发起话题的频道是一个专门的web开发者频道，按理来说参与者的简历水平应该是不错的。但这并不能代表每个人写简历时都不会犯错，据此我总结了一些需要注意避免的问题。一定要注意你简历的可访问性和阅读体验在我访问一份线上简历的时候，习惯于用键盘按键来浏览。按着键盘上的方向键，结果简历的页面却没有反应，这种体验是十分糟糕的，求职者脑子里估计压根儿没考虑这个问题。简历的配色也很重要。试想一下白字在黄色背景上面的效果，简直要让人抓狂。要知道每个人的视力是有差异的，要是你的配色太糟糕，一些人可能根本就看不清楚你的内容。要记得阅读你在线简历的人可能会有视觉障碍，在你给你的简历加上花里胡哨的特效之前，先保证内容能够被看清楚。不要再尝试为自己的技能评分了技能评分这个脑残的设定曾经一度在简历圈风靡。你说你掌握了85%的AngularJS？那TM到底是什么意思？你掌握了80%的NodeJS又要怎么解释？一般来讲对一项技能的掌握程度只有三种评判方式：你压根就不懂你才刚开始学你对这事儿信手拈来游刃有余对于那些你压根儿就不懂的技术就别瞎扯了，给我讲讲你最近学的和熟练掌握的才是正经事。并且你也需要一些实际的项目经验来证明你是真的掌握了。响应式设计，移动端适配很多HR或老板收到你的简历后很有可能就直接在手机上打开看看。假若你的简历是响应式设计，能够在移动端良好的显示，我至少能对你有个良好的第一印象。否则你的简历可能连看都没被看上一眼就被关掉了。想要避免这样糟糕事情的发生。一定要让你的在线简历对移动端友好。在简历中你要怎么证明自己？你的项目经历才是整个简历里真正的干货。他们能向我证明你确实有相关的工作经验。在简历里列出你工作经历的时间线确实很不错。但作为一个开发者来讲，项目经历才是真正能够证明你的东西。下面是一些比较好的做法：让我看到你写的代码和在线项目你描述了一大堆你开发的项目，开发过程，使用的技术。但是你写的代码在哪里？你的一些私人的项目确实需要保密，但是我连你写的一行代码都看不到的话，真的会很难办。面试官会很难抉择到底要不要给你一个机会。退一步讲，代码不能看的话，你上线的项目在哪里？你有代码给我看的话，为什么它不能在线上跑呢？尝试去开发一些业余和个人项目，你可以使用和你工作中相同的技术栈。一方面熟能生巧，另一方面你写简历的时候也好有东西给别人看。让我知道你贡献过哪些代码团队开发项目可以很好的证明你的协作能力。绝大多数项目都需要团队配合。在你的简历里，一定要明确你在团队合作中扮演的角色和你的贡献。Github 的活跃度统计就是一个很好的展现方式。一定要诚实，不要过分夸大你在某个项目中的作用。因为你写的那些代码终会暴露你。证明你并不需要依赖Bootstrap或jQuery一类的框架一般入门CSS和JavaScript的时候都会学到Bootstrap和jQuery，但要是你的每个项目都必须依赖这俩货那就是一个很严重的问题了。虽然Bootstrap用起来很爽，可我得知道你对CSS的了解到底有多少。同样我也得知道你能写原生的JavaScript.这样我才能放心让你加入使用任何前端技术架构的项目中。最重要的是什么？现在我们已经大概过了一遍简历里应该出现的和需要避免的东西。那么面试官最看重你简历里的什么呢？接下来的一些建议可能不是那么具体，但同样重要。不要墨守成规几乎每个人的在线简历都是简介&技能&项目经验&联系方式的框架顺序。几乎每个人都在用汉堡按钮做导航。你想要吸引面试官的注意？那就来一些无伤大雅的小创意吧。我就看到有人把他的导航条放到了右侧，而不是通常的左侧或者顶部。简单的改变却很有效。符合你工作的预期你想应聘什么样的职位，就根据它的要求和职责来撰写你的简历。你想应聘移动WebApp的岗位简历里却满是Wordpress主题。这会让人很困惑，同时也让人觉得你可能并不适合你所申请的岗位。我们欣赏全才，但你也需要展现出自己独特的一面。最好的方法是针对你所应聘的职位专门撰写一份简历。细节决定成败你永远都不知道面试官会关注你简历上的哪一点。面试官也只是浏览而不会从头到尾逐字逐句地看。所以请确保你的排版美观大方，字句通顺，不要有打不开的链接。差不多就这样了。如果你对前端工程师撰写简历还有什么问题，或者想和大家分享你自己的心得，欢迎在评论区参与讨论。满足某些同学的好奇心原作者的在线简历：原作者帮人审阅简历的话题： （里面也有很多值得参考的在线简历链接袄）本专栏更多值得阅读的文章：","updated":"T12:15:40.000Z","canComment":false,"commentPermission":"anyone","commentCount":16,"collapsedCount":0,"likeCount":151,"state":"published","isLiked":false,"slug":"","lastestTipjarors":[],"isTitleImageFullScreen":false,"rating":"none","titleImage":"/v2-49eee51a6e5eeffcb1f0d0c_r.jpg","links":{"comments":"/api/posts//comments"},"reviewers":[],"topics":[{"url":"/topic/","id":"","name":"前端开发"},{"url":"/topic/","id":"","name":"简历"},{"url":"/topic/","id":"","name":"前端工程师"}],"adminClosedComment":false,"titleImageSize":{"width":600,"height":400},"href":"/api/posts/","excerptTitle":"","column":{"slug":"icode","name":"从零学习前端开发"},"tipjarState":"activated","tipjarTagLine":"好好学习，天天向上","sourceUrl":"","pageCommentsCount":16,"tipjarorCount":0,"annotationAction":[],"snapshotUrl":"","publishedTime":"T20:15:40+08:00","url":"/p/","lastestLikers":[{"profileUrl":"/people/feng-hai-tao-13-37","bio":"旅行和摄影，文字和光影。","hash":"b3cbc7dd856","uid":338000,"isOrg":false,"description":"一个爱喝着酸奶看电影的boy","isOrgWhiteList":false,"slug":"feng-hai-tao-13-37","avatar":{"id":"v2-add15b0cce3c5b5e76c4b83b2abc117c","template":"/{id}_{size}.jpg"},"name":"Eggy"},{"profileUrl":"/people/jc_jesse","bio":"/gitjcc","hash":"ddfbfba243fb","uid":591700,"isOrg":false,"description":"核动立SE 贪心的人要学会做减法","isOrgWhiteList":false,"slug":"jc_jesse","avatar":{"id":"v2-d704409eedbb975ffd087b","template":"/{id}_{size}.jpg"},"name":"核动立"},{"profileUrl":"/people/lin-xuan-50-53","bio":"","hash":"78d7f5b7f4d","uid":434300,"isOrg":false,"description":"像个神经病一样可爱","isOrgWhiteList":false,"slug":"lin-xuan-50-53","avatar":{"id":"v2-9ec4c4c33593bcd0ff2927d","template":"/{id}_{size}.jpg"},"name":"Follownam"},{"profileUrl":"/people/hongxiaobin","bio":"个人博客 http://blog.hongxiaobin.xyz","hash":"72eaa300c26ce20b1826e5","uid":84,"isOrg":false,"description":"","isOrgWhiteList":false,"slug":"hongxiaobin","avatar":{"id":"v2-7fd8df43f8bcbf53989d1","template":"/{id}_{size}.jpg"},"name":"洪晓斌"},{"profileUrl":"/people/si-ceng-xiang-shi-33-71","bio":"程序员","hash":"88e0dda219","uid":286700,"isOrg":false,"description":"","isOrgWhiteList":false,"slug":"si-ceng-xiang-shi-33-71","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"name":"似曾相识"}],"summary":"原文链接：作者：我一直都乐忠于评价发来我所在工作室的求职简历。并且我也经常听取别人对我自己简历的建议。有一天我就想，帮着有需要的人审阅他们的简历应该是很有意…","reviewingCommentsCount":0,"meta":{"previous":{"isTitleImageFullScreen":false,"rating":"none","titleImage":"/v2-5a67e66927_r.png","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"Web 开发"},{"url":"/topic/","id":"","name":"前端开发"},{"url":"/topic/","id":"","name":"前端入门"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"profileUrl":"/people/yubolun","bio":"少刷知乎多看书","hash":"83a3b10a446f936a77f07f78870b5eec","uid":96,"isOrg":false,"description":"我已委托“维权骑士”（）为我的文章进行维权行动。","isOrgWhiteList":false,"slug":"yubolun","avatar":{"id":"v2-06d97a62e029d46d754eb716bc81b231","template":"/{id}_{size}.jpg"},"name":"余博伦"},"column":{"slug":"icode","name":"从零学习前端开发"},"content":"背景说明文中提到的FreeCodeCamp（以下简称FCC）是全球最火的Web开发学习平台，鼓励Learning by Doing的学习方式。你可以在这里学习到前端、后端、数据可视化等几乎涵盖所有的Web开发知识。通过完成一个个循序渐进的开发小项目，像打游戏闯关一样来学习。你还可以加入聊天室或论坛和同学们交流，还可以加入学习小组，现在全球160多个国家已经有超过1000个学习小组，几乎覆盖了全球所有主要城市，国内各大城市也几乎都有自己的学习小组。FCC在Github上的Star数在一年之内就超越了曾经最火的Bootstrap两倍（Bootstrap用5年获得了10w的star，FCC用一年获得了18w的star）这是全世界学习Web开发最好的地方，Learning by Doing也是最好的方式。而且这一切都是免费的！学成之后你还可以参与为公益组织开发Web应用，作为你的项目实践经历，帮助你更好地找到工作。官网：中文网：更多详细介绍请看： 参考资料FCC 中文网官方维基文档，内容较少，不过是目前少有的中文参考资料。FCC 官方维基文档，内容多而全，只要你稍有英文基础，在做题闯关中遇到的所有疑惑基本都可以在这里找到答案。Rafael Rodriguez大神的FCC学习记录，包含了FCC前端课程的每一关内容，全部都有解题思路和代码参考。Thomas Vaeth 大神的FCC项目代码，基本包含了前端题目的所有代码题，另外他的每个实践项目都做得很精致，值得学习。FCC前端课程学习笔记博客，每一关全部都专门写了一篇博客来介绍题目和解题思路过程，非常详细，非常到位。实践项目也有从零开始的开发过程和代码示例。Codecademy/Treehouse/FreeCodeCamp都是非常优秀的在线学习资源，这个Repo分析了三个平台的优劣，并制定了三个平台相互协同利用的学习计划，取长补短，非常值得参考。只有答案。只有答案。这其实也是FCC的一个实践项目，示例项目可以用来查看FCC用户排行，在每个用户的主页可以看到他相关题目的解答。","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T21:45:30+08:00","url":"/p/","title":"全世界学习Web开发的最好方式-FreeCodeCamp学习参考资料","summary":"背景说明文中提到的FreeCodeCamp（以下简称FCC）是全球最火的Web开发学习平台，鼓励Learning by Doing的学习方式。你可以在这里学习到前端、后端、数据可视化等几乎涵盖所有的Web开发知识。通过完成一个个循序渐进的开发小项目，像打游戏闯关一样来学习。你…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":0,"likesCount":0},"next":{"isTitleImageFullScreen":false,"rating":"none","titleImage":"/v2-ad547e666f72dc8cd9ffbf_r.jpg","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"JavaScript"},{"url":"/topic/","id":"","name":"前端入门"},{"url":"/topic/","id":"","name":"前端工程师"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"profileUrl":"/people/yubolun","bio":"少刷知乎多看书","hash":"83a3b10a446f936a77f07f78870b5eec","uid":96,"isOrg":false,"description":"我已委托“维权骑士”（）为我的文章进行维权行动。","isOrgWhiteList":false,"slug":"yubolun","avatar":{"id":"v2-06d97a62e029d46d754eb716bc81b231","template":"/{id}_{size}.jpg"},"name":"余博伦"},"column":{"slug":"icode","name":"从零学习前端开发"},"content":"原文链接： 作者：声明：转载请私信联系，转载请注明出处。作为一名JS初学者。假如你听到了一些诸如“模块化构建&模块化载入” “Webpack&Browserify” 或者 “AMD&CMD”之类的术语，肯定瞬间就凌乱了。JavaScript的模块化听起来挺深奥，可其实理解它对开发者来说特别实用。在这篇文章里，我会尽量深入浅出地把这些深奥的术语翻译成浅显易懂的人话（加上一些代码示例）。希望你多少能从中学到点东西。为了避免长篇大论，整个内容会分为两篇文章，这是第一部分，主要介绍模块化是什么，为什么要使用模块。之后的第二部分会介绍如何打包JS模块，以及各类构建工具。求解释到底什么是模块化称职的作家会把他的书分章节和段落；好的程序员会把他的代码分成模块。就好像书籍的一章，模块仅仅是一坨代码而已。好的代码模块分割的内容一定是很合理的，便于你增加减少或者修改功能，同时又不会影响整个系统。为什么要使用模块模块化可以使你的代码低耦合，功能模块直接不相互影响。我个人认为模块化主要有以下几点好处：1.可维护性：根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立对其进行改进和维护。维护一个独立的模块比起一团凌乱的代码来说要轻松很多。2.命名空间：在JavaScript中，最高级别的函数外定义的变量都是全局变量（这意味着所有人都可以访问到它们）。也正因如此，当一些无关的代码碰巧使用到同名变量的时候，我们就会遇到“命名空间污染”的问题。这样的问题在我们开发过程中是要极力避免的。后面的内容里我也会举一些具体的例子来说明这一点。3.可复用性：现实来讲，在日常工作中我们经常会复制自己之前写过的代码到新项目中。复制粘贴虽然很快很方便，但难道我们找不到更好的办法了么？要是……有一个可以重复利用的模块岂不妙哉？如何引入模块引入模块有很多种方式，这里我们先介绍一些：模块模式模块模式一般用来模拟类的概念（因为原生JavaScript并不支持类，虽然最新的ES6里引入了Class不过还不普及）这样我们就能把公有和私有方法还有变量存储在一个对象中——这就和我们在Java或Python里使用类的感觉一样。这样我们就能在公开调用API的同时，仍然在一个闭包范围内封装私有变量和方法。实现模块模式的方法有很多种，下面的例子是通过匿名闭包函数的方法。（在JavaScript中，函数是创建作用域的唯一方式。）例1：匿名闭包函数(function () {\n
// 在函数的作用域中下面的变量是私有的\n\n
var myGrades = [93, 95, 88, 0, 55, 91];\n\n
var average = function() {\n
var total = myGrades.reduce(function(accumulator, item) {\n
return accumulator + item}, 0);\n\n
return 'Your average grade is ' + total / myGrades.length + '.';\n
var failing = function(){\n
var failingGrades = myGrades.filter(function(item) {\n
return item & 70;});\n\n
return 'You failed ' + failingGrades.length + ' times.';\n
console.log(failing());\n\n}());\n\n// 控制台显示：'You failed 2 times.'\n通过这种构造，我们的匿名函数有了自己的作用域或“闭包”。 这允许我们从父（全局）命名空间隐藏变量。这种方法的好处在于，你可以在函数内部使用局部变量，而不会意外覆盖同名全局变量，但仍然能够访问到全局变量，如下所示：var global = 'Hello, I am a global variable :)';\n\n(function () {\n
// 在函数的作用域中下面的变量是私有的\n\n
var myGrades = [93, 95, 88, 0, 55, 91];\n\n
var average = function() {\n
var total = myGrades.reduce(function(accumulator, item) {\n
return accumulator + item}, 0);\n\n
return 'Your average grade is ' + total / myGrades.length + '.';\n
var failing = function(){\n
var failingGrades = myGrades.filter(function(item) {\n
return item & 70;});\n\n
return 'You failed ' + failingGrades.length + ' times.';\n
console.log(failing());\n
console.log(global);\n}());\n\n// 控制台显示：'You failed 2 times.'\n// 控制台显示：'Hello, I am a global variable :)'\n要注意的是，一定要用括号把匿名函数包起来，以关键词function开头的语句总是会被解释成函数声明（JS中不允许没有命名的函数声明），而加上括号后，内部的代码就会被识别为函数表达式。其实这个也叫作立即执行函数（IIFE）感兴趣的同学可以例2：全局引入另一种比较受欢迎的方法是一些诸如jQuery的库使用的全局引入。和我们刚才举例的匿名闭包函数很相似，只是传入全局变量的方法不同：(function (globalVariable) {\n\n
// 在函数的作用域中下面的变量是私有的\n
var privateFunction = function() {\n
console.log('Shhhh, this is private!');\n
// 通过全局变量设置下列方法的外部访问接口\n
// 与此同时这些方法又都在函数内部\n\n
globalVariable.each = function(collection, iterator) {\n
if (Array.isArray(collection)) {\n
for (var i = 0; i & collection.length; i++) {\n
iterator(collection[i], i, collection);\n
} else {\n
for (var key in collection) {\n
iterator(collection[key], key, collection);\n
globalVariable.filter = function(collection, test) {\n
var filtered = [];\n
globalVariable.each(collection, function(item) {\n
if (test(item)) {\n
filtered.push(item);\n
return filtered;\n
globalVariable.map = function(collection, iterator) {\n
var mapped = [];\n
globalUtils.each(collection, function(value, key, collection) {\n
mapped.push(iterator(value));\n
return mapped;\n
globalVariable.reduce = function(collection, iterator, accumulator) {\n
var startingValueMissing = accumulator === undefined;\n\n
globalVariable.each(collection, function(item) {\n
if(startingValueMissing) {\n
accumulator = item;\n
startingValueMissing = false;\n
} else {\n
accumulator = iterator(accumulator, item);\n
return accumulator;\n\n
};\n\n }(globalVariable));\n在这个例子中，globalVariable 是唯一的全局变量。这种方法的好处是可以预先声明好全局变量，让你的代码更加清晰可读。例3：对象接口像下面这样，还有一种创建模块的方法是使用独立的对象接口：var myGradesCalculate = (function () {\n\n
// 在函数的作用域中下面的变量是私有的\n
var myGrades = [93, 95, 88, 0, 55, 91];\n\n
// 通过接口在外部访问下列方法\n
// 与此同时这些方法又都在函数内部\n\n
return {\n
average: function() {\n
var total = myGrades.reduce(function(accumulator, item) {\n
return accumulator + item;\n
}, 0);\n\n
return'Your average grade is ' + total / myGrades.length + '.';\n
failing: function() {\n
var failingGrades = myGrades.filter(function(item) {\n
return item & 70;\n
return 'You failed ' + failingGrades.length + ' times.';\n
}\n})();\n\nmyGradesCalculate.failing(); // 'You failed 2 times.' \nmyGradesCalculate.average(); // 'Your average grade is 70.33.'\n例4：揭示模块模式 Revealing module pattern这和我们之前的实现方法非常相近，除了它会确保，在所有的变量和方法暴露之前都会保持私有：var myGradesCalculate = (function () {\n\n
// 在函数的作用域中下面的变量是私有的\n
var myGrades = [93, 95, 88, 0, 55, 91];\n\n
var average = function() {\n
var total = myGrades.reduce(function(accumulator, item) {\n
return accumulator + item;\n
}, 0);\n\n
return'Your average grade is ' + total / myGrades.length + '.';\n
var failing = function() {\n
var failingGrades = myGrades.filter(function(item) {\n
return item & 70;\n
return 'You failed ' + failingGrades.length + ' times.';\n
// 将公有指针指向私有方法\n\n
return {\n
average: average,\n
failing: failing\n
}\n})();\n\nmyGradesCalculate.failing(); // 'You failed 2 times.' \nmyGradesCalculate.average(); // 'Your average grade is 70.33.'\n到这里，其实我们只聊了模块模式的冰山一角。感兴趣的朋友可以阅读更详细的资料：CommonJS & AMD上述的所有解决方案都有一个共同点：使用单个全局变量来把所有的代码包含在一个函数内，由此来创建私有的命名空间和闭包作用域。虽然每种方法都比较有效，但也都有各自的短板。有一点，作为开发者，你必须清楚地了解引入依赖文件的正确顺序。就拿Backbone.js来举个例子，想要使用Backbone就必须在你的页面里引入Backbone的源文件。然而Backbone又依赖 Underscore.js，所以Backbone的引入必须在其之后。而在工作中，这些依赖管理经常会成为让人头疼的问题。另外一点，这些方法也有可能引起命名空间冲突。举个例子，要是你碰巧写了俩重名的模块怎么办？或者你同时需要一个模块的两个版本时该怎么办？难道就没有不通过全局作用域来实现的模块方法么？当然是有的。接下来介绍两种广受欢迎的解决方案：CommonJS 和 AMD.CommonJSCommonJS 扩展了JavaScript声明模块的API.CommonJS模块可以很方便得将某个对象导出，让他们能够被其他模块通过 require 语句来引入。要是你写过 Node.js 应该很熟悉这些语法。通过CommonJS，每个JS文件独立地存储它模块的内容（就像一个被括起来的闭包一样）。在这种作用域中，我们通过 module.exports 语句来导出对象为模块，再通过 require 语句来引入。还是举个直观的例子吧：function myModule() {\n
this.hello = function() {\n
return 'hello!';\n
this.goodbye = function() {\n
return 'goodbye!';\n
}\n}\n\nmodule.exports = myModule;\n通过指定导出的对象名称，CommonJS模块系统可以识别在其他文件引入这个模块时应该如何解释。然后在某个人想要调用 myMoudle 的时候，只需要 require 一下：var myModule = require('myModule');\n\nvar myModuleInstance = new myModule();\nmyModuleInstance.hello(); // 'hello!'\nmyModuleInstance.goodbye(); // 'goodbye!'\n这种实现比起模块模式有两点好处：避免全局命名空间污染明确代码之间的依赖关系并且这种书写方式也非常舒服友好，我自己很喜欢。需要注意的一点是，CommonJS以服务器优先的方式来同步载入模块，假使我们引入三个模块的话，他们会一个个地被载入。它在服务器端用起来很爽，可是在浏览器里就不会那么高效了。毕竟读取网络的文件要比本地耗费更多时间。只要它还在读取模块，浏览器载入的页面就会一直卡着不动。（在下一篇第二部分的教程里我们会讨论如何解决这个问题）AMDCommonJS已经挺不错了，但假使我们想要实现异步加载模块该怎么办？答案就是Asynchronous Module Definition（异步模块定义规范），简称AMD.通过AMD载入模块的代码一般这么写：define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) {\n
console.log(myModule.hello());\n});\n这里我们使用 define 方法，第一个参数是依赖的模块，这些模块都会在后台无阻塞地加载，第二个参数则作为加载完毕的回调函数。回调函数将会使用载入的模块作为参数。在这个例子里就是 myMoudle 和 myOtherModule.最后，这些模块本身也需要通过 define 关键词来定义。拿 myModule 来举个例子：define([], function() {\n\n
return {\n
hello: function() {\n
console.log('hello');\n
goodbye: function() {\n
console.log('goodbye');\n
};\n});\n重申一下，不像CommonJS，AMD是优先浏览器的一种异步载入模块的解决方案。（记得，很多人认为一个个地载入小文件是很低效的，我们将在下一篇文章理介绍如何打包模块）除了异步加载以外，AMD的另一个优点是你可以在模块里使用对象、函数、构造函数、字符串、JSON或者别的数据类型，而CommonJS只支持对象。再补充一点，AMD不支持Node里的一些诸如 IO,文件系统等其他服务器端的功能。另外语法上写起来也比CommonJS麻烦一些。UMD在一些同时需要AMD和CommonJS功能的项目中，你需要使用另一种规范：Universal Module Definition（通用模块定义规范）。UMD创造了一种同时使用两种规范的方法，并且也支持全局变量定义。所以UMD的模块可以同时在客户端和服务端使用。下面是一个解释其功能的例子：(function (root, factory) {\n
if (typeof define === 'function' && define.amd) {\n
define(['myModule', 'myOtherModule'], factory);\n
} else if (typeof exports === 'object') {\n
// CommonJS\n
module.exports = factory(require('myModule'), require('myOtherModule'));\n
} else {\n
// Browser globals (Note: root is window)\n
root.returnExports = factory(root.myModule, root.myOtherModule);\n
}\n}(this, function (myModule, myOtherModule) {\n
// Methods\n
function notHelloOrGoodbye(){}; // A private method\n
function hello(){}; // A public method because it's returned (see below)\n
function goodbye(){}; // A public method because it's returned (see below)\n\n
// Exposed public methods\n
return {\n
hello: hello,\n
goodbye: goodbye\n
}\n}));\n更多有关UMD的例子请看其Github上的.原生JS希望你坚持读到了现在，我们最后再介绍一种定义模块的方式。你可能注意到了，上述的这几种方法都不是JS原生支持的。要么是通过模块模式来模拟，要么是使用CommonJS或AMD.幸运的是在JS的最新规范ECMAScript 6 (ES6)中，引入了模块功能。ES6 的模块功能汲取了CommonJS 和 AMD 的优点，拥有简洁的语法并支持异步加载，并且还有其他诸多更好的支持。我最喜欢的ES6 模块功能的特性是，导入是实时只读的。（CommonJS 只是相当于把导出的代码复制过来）。来看例子：// lib/counter.js\n\nvar counter = 1;\n\nfunction increment() {\n
counter++;\n}\n\nfunction decrement() {\n
counter--;\n}\n\nmodule.exports = {\n
counter: counter,\n
increment: increment,\n
decrement: decrement\n};\n\n\n// src/main.js\n\nvar counter = require('../../lib/counter');\n\ncounter.increment();\nconsole.log(counter.counter); // 1\n上面这个例子中，我们一共创建了两份模块的实例，一个在导出的时候，一个在引入的时候。在 main.js 当中的实例是和原本模块完全不相干的。这也就解释了为什么调用了 counter.increment() 之后仍然返回1。因为我们引入的 counter 变量和模块里的是两个不同的实例。所以调用 counter.increment() 方法只会改变模块中的 counter .想要修改引入的 counter 只有手动一下啦：counter.counter++;\nconsole.log(counter.counter); // 2\n而通过 import 语句，可以引入实时只读的模块：// lib/counter.js\nexport let counter = 1;\n\nexport function increment() {\n
counter++;\n}\n\nexport function decrement() {\n
counter--;\n}\n\n\n// src/main.js\nimport * as counter from '../../counter';\n\nconsole.log(counter.counter); // 1\ncounter.increment();\nconsole.log(counter.counter); // 2\n这看起来很酷不是么？这样就实现了我们把模块分隔在不同的文件里，需要的时候又可以合并在一起而且不影响它的功能。期待下一篇：模块打包我想看到这里的你应该已经对JavaScript模块化有了进一步的了解。在下一篇教程里，我们会介绍：为什么要打包模块几种不同的打包构建方式ECMAScript 模块载入API其他欢迎在评论区讨论提问，如果有什么不对的地方也欢迎批评指正~","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T00:13:43+08:00","url":"/p/","title":"JavaScript 模块化入门Ⅰ：理解模块","summary":"原文链接： 作者：声明：转载请私信联系，转载请注明出处。作为一名JS初学者。假如你听到了一些诸如“模块化构建&模块化载入” “Webpack&Browserify” 或者 “AMD&CMD”之类的术语，肯定瞬间就凌…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":0,"likesCount":0}},"annotationDetail":null,"commentsCount":16,"likesCount":151,"FULLINFO":true}},"User":{"yubolun":{"isFollowed":false,"name":"余博伦","headline":"我已委托“维权骑士”（）为我的文章进行维权行动。","avatarUrl":"/v2-06d97a62e029d46d754eb716bc81b231_s.jpg","isFollowing":false,"type":"people","slug":"yubolun","bio":"少刷知乎多看书","hash":"83a3b10a446f936a77f07f78870b5eec","uid":96,"isOrg":false,"description":"我已委托“维权骑士”（）为我的文章进行维权行动。","profileUrl":"/people/yubolun","avatar":{"id":"v2-06d97a62e029d46d754eb716bc81b231","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false,"badge":{"identity":null,"bestAnswerer":null}}},"Comment":{},"favlists":{}},"me":{},"global":{},"columns":{"icode":{"following":false,"canManage":false,"href":"/api/columns/icode","name":"从零学习前端开发","creator":{"slug":"yubolun"},"url":"/icode","slug":"icode","avatar":{"id":"1a8fcada9ebb","template":"/{id}_{size}.jpeg"}}},"columnPosts":{},"postComments":{},"postReviewComments":{"comments":[],"newComments":[],"hasMore":true},"favlistsByUser":{},"favlistRelations":{},"promotions":{},"draft":{"titleImage":"","titleImageSize":{},"titleImageFullScreen":false,"canTitleImageFullScreen":false,"title":"","titleImageUploading":false,"error":"","content":"","draftLoading":false,"globalLoading":false,"pendingVideo":{"resource":null,"error":null}},"config":{"userNotBindPhoneTipString":{}},"recommendPosts":{"articleRecommendations":[],"columnRecommendations":[]},"env":{"isAppView":false,"appViewConfig":{"content_padding_top":128,"content_padding_bottom":56,"content_padding_left":16,"content_padding_right":16,"title_font_size":22,"body_font_size":16,"is_dark_theme":false,"can_auto_load_image":true,"app_info":"OS=iOS"},"isApp":false},"sys":{}}