commonjs

1. 数组循环 介绍数组循环之前，先回顾一下ES5数组的循环 (1)数组遍历(代替普通的for)：arr.forEach(callback(val,index,arr){todo}) //val是数组的当前项，index是数组的键名(下标)，arr是整个数组 let arr = ['today','tomorrow','the day after tommrrow','three days from now' ]; arr.forEach( function (val,index,arr){ console.log(val,index,arr); // today 0 (4) ["today", "tomorrow", "the day after tommrrow", "three days from now"]... }); (2)数组映射：arr.map(callback(item,index,arr){todo... 正常情况下，需要配合return，返回的是一个新数组，若没有return，相当于forEach，一般用于在有return的情况下}) //item是数组的当前项，index是数组的键名(下标)，arr是整个数组 let arr = [ {title: 'aaaa',read:100,hot: true }, {title: 'bbbb',read:100

一、vue文件 vue文件是一个自定义的文件类型，用类HTML语法描述一个vue组件，每个.vue组件包含三种类型的顶级语言快< template>< script>< style>，还允许添加自定义的模块； < template > < div class ="example" > {{ msg }} </ div > </ template > < script > export default { data () { return { msg: ' Hello world! ' } } } </ script > < style > .example { color : red ; } </ style > < custom1 > This could be e.g. documentation for the component. </ custom1 > 如果你喜欢分隔你的.vue文件到多个文件中，你可以通过src属性导入外部文件： < template src ='./template.html' ></ template > < style src ='./style.css' ></ style > < script src ='./script.js' ></ script > 二、vue-loader vue-loader会解析文件，提取出每个语言块

前言 阮一峰老师的 ES6 入门教程 看了好几遍，发现每次看完都感觉有很多地方不懂，越看越焦虑，现在稍微明白了，这可能是大多数人追求的完美主义，希望每件事情都搞懂心理才踏实。其实，是没必要的，根据”二八定律“，我们只要掌握其中的 20% 常用知识和语法去解决开发中的 80% 问题就够了，剩下不懂的地方可以通过阅读相关文档和资料解决。更重要的原因是前端技术更新迭代如此之快，我们也要跟上步伐，把有限的时间放在正确的事情上，更何况我们还有诗和远方。所以在这里总结一下 ES6 常用语法和开发过程中遇到的一些坑，然后继续前行。 let 声明 VS const 声明 相同点 没有变量提升，必须先声明后使用，否则报错 形成块级作用域，暂时性死区 不能重复声明 在全局声明，不能挂载在window上 不同点 const 声明变量时需要赋初始值 const 声明的基本类型数值不能被修改，声明的引用类型可以修改属性，但是不能重新赋值改变引用的地址 使用 const 程序执行效率更快 console .log(a) // 报错，Uncaught ReferenceError: a is not defined let a = 1 let a = 2 // 报错，Uncaught SyntaxError: Identifier 'a' has already been declared if ( true

按顺序阅读 1. npm 模块管理器 2. package.json 文件 3. npm 模块安装机制简介 4. npm scripts 使用指南 5. CommonJS 规范 随着 es6 模块化特性的出现，慢慢的在线编译模块方案将被淘汰。 6. webpack 中文文档 7. webpack-demos 选读： es6 Module 的语法 npx 是什么 npx: npm 5.2.0 内置的包执行器 SPA（单页面 web 应用）和 MPA（多页面 web 应用）的区别 gulp 有哪些功能是 webpack 不能替代的？ - 寸志的回答 Gulp：任务自动管理工具 总结：webpack 不适用多页面应用，单页面应用首选 转自: http://meia.fun/article/1542268422095 来源： oschina 链接： https://my.oschina.net/u/4412687/blog/3742584

现代前端，模块化已成必备，不仅有多种工具类的库，还被写进规范当中，不论大小公司，代码都遵循模块化思想在开发，它已经成为独立于技术的一种经验和能力。 本文我们就来聊聊这个话题。 需求 网页刚出现的时候，只是很简单的文档，样式简单，极少的交互，极少的设计元素，一个页面不会依赖很多文件，逻辑代码少。 但随着Web技术的发展，网页变得越来越丰富，于用户来说是绝对的福音，但对开发者来说，问题逐渐凸显。 代码多，命名冲突概率大 代码冗余，请求过多拖慢速度 文件间依赖增多，易出现引用错误，导致代码运行出错 难复用，重写？copy一份？ 修改或者改版时，要去成百上千行代码里找，难维护 综上所述，不论是从开发还是体验角度，都需要解决方案。 模块 无数实践证明，小的、组织良好的代码远比庞大的代码更易理解和维护。因此，优化程序的结构和组织方式，把它们分成小的、耦合相对松散的片段，不失为更明智的做法，这些片段就称为模块。 还好，JavaScript有一种原生的组织方式——函数。 函数 函数用来做什么？封装具备一定功能的代码，它里面可以包裹所有类型的东西，且有自己独立的作用域，然后在需要的地方调用即可。譬如： function f1 ( ) { //... } function f2 ( ) { //... } function f3 ( ) { f1(); f2(); } 复制代码 这样做功能明了

前言 主要学习一下四种模块加载规范: AMD CMD CommonJS ES6 模块 历史 前端模块化开发那点历史 require.js requirejs 为全局添加了 define 函数，你只要按照这种约定的方式书写这个模块即可。 define( function () { //Do setup work here return { color: "black", size: "unisize" } }); //my/shirt.js now has some dependencies, a cart and inventory //module in the same directory as shirt.js define([ "./cart", "./inventory"], function (cart, inventory) { //return an object to define the "my/shirt" module. return { color: "blue", size: "large", addToCart: function () { inventory.decrement( this); cart.add( this); } } } ); 以上示例代码 来源 于require.js官网 demo代码详见 https://github.com

注意： 1 、在webpack里，所有文件都是模块 例如：JS模块 ---> 模块化(AMD、CMD、ES6 Module、Commonjs) 关于模块化参见https: // www.cnblogs.com/jianxian/p/12753375.html. 　　如下所示 　　 　　接下来便可以导入使用 　　 　　最后做下验证输出，可以直接打包生成文件 　　 　　接下来做下测试，引入脚本文件，打开html文件进行测试 　　 　　但我们想知道这里为什么是main.js，接下来做个配置文件进行修改 　　 　　接下来开始编写代码，但注意webpack是基于node的，所以必须 遵循Commonjs规范 。 　　 　　依次填充 　　 　　 　　 . 来源： oschina 链接： https://my.oschina.net/u/4312329/blog/3421264

早期的javascript版本没有块级作用域、没有类、没有包、也没有模块，这样会带来一些问题，如复用、依赖、冲突、代码组织混乱等，随着前端的膨胀，模块化显得非常迫切。 前端模块化规范如下： 一、前端模块化概要 1.1、模块概要 JavaScript在早期的设计中就没有模块、包、类的概念，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。 模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块 。 模块化开发的四点好处： 　　（1）、 避免变量污染，命名冲突 　　（2）、提高代码复用率 　　（3）、提高了可维护性 　　（4）、方便依赖关系管理 为了避免缺少模块带来的问题，我们可以看看程序员应对的历程： 1.2、函数封装 我们在讲函数的时候提到，函数一个功能就是实现特定逻辑的一组语句打包，而且JavaScript的作用域就是基于函数的，所以把函数作为模块化的第一步是很自然的事情，在一个文件里面编写几个相关函数就是最开始的模块了 // 函数1 function fn1(){ // statement } // 函数2 function fn2(){ // statement } 这样在需要的以后夹在函数所在文件，调用函数就可以了 缺点： 污染了全局变量，无法保证不与其他模块发生变量名冲突

import和require就是两种不同的JS模块化实现方式而已，由于之前npm生态的很多包都是基础CommonJS规范写的，所以相当一段时间之内必然是import和require这两种模块引入方式共存的。 import是编译时加载，必须放在模块顶部，在性能上会比后者好一些，require是运行时加载，理论上来说放在哪里都可以 import采用的是实时绑定方式，即导入和导出的值都指向 同一个内存地址 ，所以导入值会随着导出值变化。而require在导出时是指 拷贝 ，就算导出的值变化了，导入的值也不会变化，如果想要更新值就要重新导入 es6的export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。可以理解为export导出的是一种引用关系而不是一个具体的值，它们的实质是，在接口名与模块内部变量之间，建立了一一对应的关系. //会报错 export 1; var m = 1; export m; //以对象的方式导出 就正常 var m = 1; export { m } //require就比较简单了，导入是什么 导出就是什么 // test.js var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; module.exports = { firstName, lastName,

前言：模块化开发需求 在JS早期，使用script标签引入JS，会造成以下问题： 加载的时候阻塞网页渲染，引入JS越多，阻塞时间越长。 容易污染全局变量。 js文件存在依赖关系，加载必须有顺序。项目较大时，依赖会错综复杂。 引入的JS文件过多，不美观，且不易于管理。 一、CommonJS规范 CommonJS Modules/1.0规范，服务器端规范。 Node.js推广使用。该规范的核心是：允许模块使用require方法来同步加载所依赖的其他模块，然后通过exports或module.exports导出需要暴露的接口。 特点： 一个模块是一个文件 使用module.exports或exports导出模块 // module.js exports.add = (a, b) => a+b module.exports = { add: (a, b) => a + b } 使用require加载模块 a. require命令第一次加载模块时，执行整个脚本，在内存中生成对象 b. 多次执行require命令再次加载该模块时，不会再执行该脚本，直接从缓存中取值 c. CommonJS加载模块是同步加载模块 Tips： 为什么CommonJS规范不适合作为浏览器的规范 由于CommonJS是同步加模块，在服务端加载模块时都是从本地硬盘中加载，读取速度很快。但是在浏览器端加载模块时