commonjs

在模块化开发过程中经常遇到模块的导出导入。涉及到 require 、export、module.exports、exports这些关键词。但是其中究竟有什么区别。自己还真的经常弄糊涂。 索性自己好好缕一缕。 首先呢，总体上区分两大规范 CommonJS模块规范 和 ES6模块规范 require: node 和 es6 都支持的引入 export / import : 只有es6 支持的导出引入 module.exports / exports: 只有 node 支持的导出 Node里面的模块系统遵循的是CommonJS规范。 CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require) =================== CommonJS模块规范中 module.exports / exports / require=========================== 为了方便，Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。 var exports = module.exports; 具体的可参考测试代码 新建utils.js console.log( '1=', module.exports); // 结果为：{} console.log('2

文章首发于 sau交流学习社区 一、前言 目前主流的模块规范： 1、UMD通用模块 2、CommonJs 3、es6 module 二、UMD模块（通用模块） ( function ( global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.libName = factory()); }( this, ( function ( ) { 'use strict';}))); 如果你在js文件的头部看到这样的代码，这个js文件使用的规范就是UMD规范； 什么是UMD模块规范？就是AMD+CommonJs+全局变量的组合规范。 这段代码用来 判断当前的运行环境 ，如果是node环境，就会使用CommonJs规范，然后判断是否是AMD环境，是的话就会使用AMD规范，最后导出全局变量 有了UMD后我们的代码可以同时运行在node和浏览器上。现在前端多数的库最后打包都是使用UMD规范。 二、CommonJs nodejs的运行环境使用的模块系统就是基于CommonJs规范实现的

作者： lizheming 编辑：魔卡 原文地址： http://www.zcfy.cc/@lizheming ━━━━━ 令人欣慰，React 16 首个 beta 版已经发布，可以公开测试了！🎉 下面我来告诉大家如何使用以及新版的一些值得注意的地方。 如何使用 安装 由于还是 beta 版，常规的 NPM 安装命令仍然会使用 15.6 正式版。beta 版我们使用 next 标签发布在 NPM 上，你需要使用如下命令安装使用 beta 版： # Yarn yarn add react@next react-dom@next # NPM npm install --save react@next react-dom@next Javascript 环境要求 由于 React 16 依赖 新的数据集合类型 Map 和 Set ，所以我们不支持一些老浏览器和设备（例如 <IE11）。如果你要支持它们的话，最好为项目引入一个全局的 Polyfill，core-js 和 babel-polyfill 都是不错的选择。 下面是在 React 16 中使用 core-js 来支持老浏览器的示例： import 'core-js/es6/map'; import 'core-js/es6/set'; import React from 'react'; import ReactDOM from

1,什么是模块化？ 模块化是指将一个复杂的系统分解为多个模块，方便编码。 2,为什么要用模块化？ 降低复杂性，降低代码耦合度，部署方便，提高效率。 3,模块化的好处？ a,避免命名冲突，减少变量空间污染 b,更好的分离代码，按需加载 c,更高复用性 d,更高可维护性 模块化实现 1，函数形式 2，命名空间形式 3，立即执行函数 4，模式增强 模块化规范 1，CommonJs 2，AMD 3，CMD 4，Es6 CommomJs 据CommonJs规范规定每一个Js文件都可以看作一个模块，其内部定义的变量是属于这个模块的，不会对外暴露，也就是说不会污染全局变量。该规范最初 用在服务器端的node环境中 。 CommonJS采用 同步加载 不同模块文件，适用于服务器端的。因为模块文件都存放在服务器的各个硬盘上，读取加载时间快，适合服务器端，不适应浏览器。 浏览器不兼容CommonJs ，原因是浏览器缺少module、exports、require、global四个环境变量。如要使用需要工具转换。 CommonJS的核心思想 就是通过 require 方法来同步加载所要依赖的其他模块，然后通过 exports 或者 module.exports 来导出需要暴露的接口。 案例： exports是导出，require引入，最后通过 http://browserify.org/

loader承担的是翻译官的职责，利用其弥补了让webpack只能理解JavaScript和JSON文件的问题，从而可以处理其它类型的文件，所以loader对webpack的重要性不言而喻，所以学习构建一个loader是学习webpack的必经之路。在学习编写一个loader之前，要明确一下loader的职责： 其职责是单一的，只需要完成一种转换 。下面将逐步阐述选择loader开发中的几个关键点并实现一个loader。 一、Loader分类 loader是一个CommonJs风格的函数，接收输入的source后可通过同步或异步的方式进行处理，然后将内容进行输出。 1.1 同步Loader 同步loader指的是同步的返回转换后的内容。由于是在Node.js这样的单线程环境，所以转换过程会阻塞整个构建，构建缓慢，不适用于耗时较长的环境中。对于同步loader，主要有两种方法返回转换后的内容：return和this.callback. return 利用return可直接返回转换后结果。 module.exports = function ( source , map, meta){ // ... // output为处理后结果 return output； } this.callback 该方法相比于return更加灵活，其参数主要有四个： this.callback( err:

谈一谈let与var和const的区别 let为ES6新添加申明变量的命令，它类似于var，但是有以下不同： let命令不存在变量提升，如果在let前使用，会导致报错 let暂时性死区的本质，其实还是块级作用域必须“先声明后使用”的性质，let 暂时性死区的原因：var 会变量提升，let 不会。 let，const和class声明的全局变量不是全局对象的属性 const可以在多个模块间共享 const声明的变量与let声明的变量类似，它们的不同之处在于，const声明的变量只可以在声明时赋值，不可随意修改，否则会导致SyntaxError（语法错误） const只是保证变量名指向的地址不变，并不保证该地址的数据不变 说说箭头函数的特点 箭头函数不属于普通的 function，所以没有独立的上下文。 箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。 由于箭头函数没有自己的this，函数对象中的call、apply、bind三个方法，无法"覆盖"箭头函数中的this值。 箭头函数没有原本(传统)的函数有的隐藏arguments对象。 箭头函数不能当作generators使用，使用yield会产生错误。 在以下场景中不要使用箭头函数去定义： 1. 定义对象方法、定义原型方法、定义构造函数、定义事件回调函数。 2. 箭头函数里不但没有 this，也没有

https://juejin.im/post/5e61136ee51d4527196d6019 tip： 一二三面连着面的，中间有10分钟休息时间，面试官都很和善的，不会给太大的压力，不过字节的每一个问题都会问的很深，很深。。。感觉到了跟大佬的差距O(∩_∩)O😄 一面 (视频面 1小时35分钟) 20年3月1日 自我介绍 vue和react有什么区别，更喜欢用哪个，为什么 react hook熟悉吗，解决了什么问题，用react hook写一个用户鉴权的组件，所有其他组件都要经过它验证(auth是一个promise) 为什么请求放在useEffect里，放在外面和放里面有什么区别？在useEffect里想使用async/await怎么用 谈了谈useLayoutEffect和useEffect具体执行时机 算法，一个树结构，有id和一个子节点数组，要求在所有子节点上增加一个属性为父节点的parentId async/await和promise性能差异， 我提到了堆栈追踪，在本人发表的其他文章里有写到 react写一个时间选择组件，先设计要传什么样的props接口，说明原因，外部组件如何使用(其实就是考封装组件库), 如果是手机端的，无线滚动的效果具体如何实现 CommonJS和ES6模块化有什么区别，设计一个方法，让CommonJS导出的模块也能改变其内部变量 webpack

感谢支持ayqy个人订阅号，每周义务推送1篇（ only unique one ）原创精品博文，话题包括但不限于前端、Node、Android、数学（WebGL）、语文（课外书读后感）、英语（文档翻译） 如果觉得弱水三千，一瓢太少，可以去 http://blog.ayqy.net 看个痛快 零.7种模块化方式 1.分节注释 <!--html--> <script> // module1 code // module2 code </script> 手动添加注释来标明模块范围，类似于CSS里的分节注释： /* ----------------- * TOOLTIPS * ----------------- */ 惟一作用是让浏览代码变得容易一些，迅速找到指定模块， 根本原因 是单文件内容太长，已经遇到了维护的麻烦，所以手动插入一些锚点供快速跳转 非常原始的模块化方案，没有实质性的好处（比如模块作用域，依赖处理，模块间错误隔离等等） 2.多script标签 <!--html--> <script type="application/javascript" src="PATH/polyfill-vendor.js" ></script> <script type="application/javascript" src="PATH/module1.js" ></script>

写在前面 书籍介绍：本书由首章Node介绍为索引，涉及Node的各个方面，主要内容包含模块机制的揭示、异步I/O实现原理的展现、异步编程的探讨、内存控制的介绍、二进制数据Buffer的细节、Node中的网络编程基础、Node中的Web开发、进程间的消息传递、Node测试以及通过Node构建产品需要的注意事项。 我的简评：这是一本难得的好书，这本书理论和实践结合的很好。如果你是一个纯前端的开发者，这本书可以读读开拓些视野，如果你是一个全栈的开发者，这本书作为入门和深入后端也很不错，推荐拜读。 ！！文末有pdf书籍、笔记思维导图、随书代码打包下载地址，需要请自取！阅读[书籍精读系列]所有文章，请移步： 推荐收藏-JavaScript书籍精读笔记系列导航 第一章 Node简介 1.1.Node的诞生历程 2009年3月， Ryan Dahl 1.2.Node的命名与起源 别名 Nodejs、 NodeJS、 Node.js 找到了设计高性能， Web服务器的几个要点： 事件驱动、非阻塞I/O JavaScript 高性能、符合事件驱动、没有历史包袱 构建网络应用的一个基础框架 1.3.Node给JavaScript带来的意义 浏览器中除了V8作为JavaScript引擎外，还有一个WebKit布局引擎 浏览器通过事件驱动来服务界面上的交互， Node通过过事件驱动来服务I/O 1.4