js模块化开发 | 易学教程

项目伪模块化开发之：requirejs（AMD）开发

阅读更多关于项目伪模块化开发之：requirejs（AMD）开发

附：伪模块开发，终将会被es6的模块开发取代。其只为过渡阶段使用一、为什么要用require.js？最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。 <script src="1.js"></script> 　 <script src="2.js"></script> 　　<script src="3.js"></script> 　　<script src="4.js"></script> 　　<script src="5.js"></script> 　　<script src="6.js"></script> 这段代码依次加载多个js文件。这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。 require.js的诞生，就是为了解决这两个问题：　　（1）实现js文件的异步加载，避免网页失去响应；　　（2）管理模块之间的依赖性，便于代码的编写和维护。二、require.js的加载

Grunt、Gulp区别 webpack、 requirejs区别

阅读更多关于 Grunt、Gulp区别 webpack、 requirejs区别

1. 书写方式 grunt 运用配置的思想来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段，导致认知成本的提高，运用的时候要搞懂各种插件的配置规则。 gulp 是用代码方式来写打包脚本，并且代码采用流式的写法，只抽象出了gulp. src , gulp. pipe , gulp. dest , gulp. watch gulp. task 等接口,运用相当简单。经尝试，使用gulp的代码量能比grunt少一半左右。 2. 任务划分 gulp 是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译替代手工实现自动化工作 1. 构建工具 :　可以用构建基础项目 2. 自动化 : 可以通过gulp.task配置各接口自动对js,css,html代码进行压缩, 自动刷新页面( IDE好多已经可以自动刷新了 ) 3. 提高效率用 : 可以编译less语法,可认快速对css的编辑 webpack 是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案 1. 打包工具 : gulp 也可以,但是需要按项目配置属性项 , webpack 很集成了,简单 2. 模块化识别 3. 编译模块代码方案用所以定义和用法上来说都不是一种东西

ES6模块化-导入导出

阅读更多关于 ES6模块化-导入导出

什么是：项目中一些程序代码经常被其他业务场景使用，为了避免重复开发，就把这些代码设置为共享模式，共享模式就是模块化。像jquery、axios、vue等等都是模块化的体现，需要的时候直接拿过来用即可模块化技术有哪些： CommonJS(nodejs)、ES6模块化、AMD、CMD等 CommonJS： CommonJS模块化是2009年发布的，是民间出品的，相对不正规，可以在nodejs中应用 // 导出 module . exports = 对象 // 导入 var obj = require ( 模块文件 ) ES6模块化： ES6模块化是2015年官方正式出品的，已经被纳入到JavaScript标准里边，也是js未来的标准，由于各种原因 nodejs和浏览器中现在还不能直接使用ES6模块化，要相信未来可以 AMD模块化： Asynchronous Module Definition 异步模块定义 2009年诞生，可以实现浏览器中应用模块化技术 CMD模块化： Common Module Definition 通用模块定义 2011年诞生，阿里公司出品，可以实现浏览器中应用模块化技术各个模块化应用的场合： commonjs模块化可以应用在nodejs中，浏览器中不可以 es6模块化暂时还不能在nodejs 和浏览器中使用，但是要相信，未来可以

模块化开发

阅读更多关于模块化开发

前言：　　在上一篇文章中我介绍了我们对N产品性能优化的整个历程，主要偏重优化方法。本篇我将介绍在这一过程中，我们的代码出现了什么样的问题，以及我们是如何通过前端重构来解决掉这些问题，并产生了哪些收益。痛点：　　按需加载为我们的页面带来了很大的性能提升，但同时也为代码结构带来了很大的冲击，很多直接调用的方式被改为了模块化的调用形式（先判断模块是否存在，不存在就先加载对应的js，再执行回调）。　　而js代码本身又不是模块化形式的。就使得代码结构很混乱，各种调用方式都存在，开发人员在写代码的时候不知道该直接调用还是模块化调用。　　打包配置混乱，散落在各个目录结构中，经常出现重复打包和漏打包的现象，严重的还造成线上问题。　　因为长期的产品策略变更，导致代码不同功能块之间耦合严重，一些关键方法不知道都在哪里被调用过，如果修改的时候有遗漏，就会出现问题。　　没有文档。　　没办法做自动化测试。思考：　　因为以上问题，我们每次产品升级都如履薄冰，需要非常小心谨慎，测试也很耗费精力。为了提高效率，我们必须要重构。　　这次重构迫切要解决的问题有三点：　　1. 代码调用方式统一，希望加载方式可以对开发人员透明。　　2. 模块职责明确、模块之间依赖关系清晰。　　3. 按需加载的配置可以统一管理，不影响开发时的效率。　　这三点，让我很自然地就想到了JS模块化开发模块化开发

前端模块化——彻底搞懂AMD、CMD、ESM和CommonJS

阅读更多关于前端模块化——彻底搞懂AMD、CMD、ESM和CommonJS

我们知道，在NodeJS之前，由于没有过于复杂的开发场景，前端是不存在模块化的，后端才有模块化。NodeJS诞生之后，它使用CommonJS的模块化规范。从此，js模块化开始快速发展。模块化的开发方式可以提供代码复用率，方便进行代码的管理。通常来说，一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。下面开始一一介绍：回到顶部 CommonJS NodeJS是CommonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持： module 、 exports 、 require 、 global 。实际使用时，用 module.exports 定义当前模块对外输出的接口（不推荐直接用 exports ），用 require 加载模块。复制// 定义模块math.js var basicNum = 0; function add(a, b) { return a + b; } module.exports = { //在这里写上需要向外暴露的函数、变量 add: add, basicNum: basicNum } /** 必须加./路径，不加的话只会去node_modules文件找 **/ // 引用自定义的模块时，参数包含路径，可省略.js var math =

CSS模块化：less

阅读更多关于 CSS模块化：less

less的安装与基本使用 less的语法及特性一、本地使用less的方法 Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。是一种动态样式语言，属于css预处理语言的一种。下载后找到less.js：less.js-2.5.3\dist\less.js 也可以直接使用CDN缓存： < script src ="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js" ></ script > 注意link的rel属性： < link rel ="stylesheet/less" type ="text/css" href ="styles.less" /> 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet/less"

前端工程——基础篇

阅读更多关于前端工程——基础篇

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> # 前端工程——基础篇 > 喂喂喂，那个切图的，把页面写好就发给研发工程师套模板吧。你好，切图仔。不知道你的团队如何定义前端开发，据我所知，时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位，虽然身份之争多少有些无谓，但我对这种偏见还是心存芥蒂，酝酿了许久，决定写一个系列的文章，试着从工程的角度系统的介绍一下我对前端，尤其是Web前端的理解。只要我们还把自己的工作看作为一项软件开发活动，那么我相信读过下面的内容你也一定会有所共鸣。 ## 前端，是一种GUI软件现如今前端可谓包罗万象，产品形态五花八门，涉猎极广，什么高大上的基础库/框架，拽炫酷的宣传页面，还有屌炸天的小游戏……不过这些一两个文件的小项目并非是前端技术的主要应用场景，更具商业价值的则是复杂的Web应用，它们功能完善，界面繁多，为用户提供了完整的产品体验，可能是新闻聚合网站，可能是在线购物平台，可能是社交网络，可能是金融信贷应用，可能是音乐互动社区，也可能是视频上传与分享平台…… > 从本质上讲，所有Web应用都是一种运行在网页浏览器中的软件，这些软件的图形用户界面（Graphical User Interface，简称GUI）即为前端。如此复杂的Web应用，动辄几十上百人共同开发维护，其前端界面通常也颇具规模

前端模块化、工程化

阅读更多关于前端模块化、工程化

　　先谈谈前端工程化，web前端越来越像“应用程序”，处理的业务繁杂，需要用的html，css，js等文件越来越多；因此不得不用工程化的思想去组织管理这些文件；当然关于前端工程化在细节上见仁见智；以下是个人的理解：　　首先是业务需求文档的规范化；　　其次是开发过程中的管理：版本控制(git/svn)，js模块化(AMD,CMD,ES6)，MVVM框架(react,vue)等　　再其次是测试阶段：自动化测试js接口函数等(karma,mocha)，数据mooc 　　最后是打包部署：构建工具进行丑化、合并等构建工具grunt && gulp 　　Grunt 是最先流行起来的前端工程，其核心思想是基于配置的工作流模式，定义一个配置文件，声明工作流各个环节的相关配置，调用 grunt 就能完成打包编译；　　 Gulp 几乎取缔 Grunt ，成为前端的默认流程工具，其核心思想是基于内存的流的方式，提供高效的性能，极简的 API，定义不同的 task，然后将 task 串联起来；　　 Gulp入门教程开发效率　　通常的前端开发过程是，修改前端代码，调用命令编译代码，然后浏览器 F5 刷新。这个过程可以做到自动化，通过代码监控工具，指定要监控的目录和文件，如果对应文件有改变，调用编译工具编译源码，然后通过 livereload 自动刷新浏览器；数据mock 　

前端模块化，AMD与CMD的区别

阅读更多关于前端模块化，AMD与CMD的区别

最近在研究cmd和amd，在网上看到一篇不错的文章，整理下看看。在 JavaScript 发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用， jQuery 等前端库层出不穷，前端代码日益膨胀这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码模块既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在 Java 中有一个重要带概念——package，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接import对应的package即可 import java.util.ArrayList; 遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能

前端模块化

阅读更多关于前端模块化

在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码模块既然JavaScript不能handle如此大规模的代码，我们可以借鉴一下其它语言是怎么处理大规模程序设计的，在Java中有一个重要带概念—— package ，逻辑上相关的代码组织到同一个包内，包内是一个相对独立的王国，不用担心命名冲突什么的，那么外部如果使用呢？直接 import 对应的package即可 import java.util.ArrayList; 遗憾的是JavaScript在设计时定位原因，没有提供类似的功能，开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称为模块化。一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，各行其是就都乱套了

订阅 js模块化开发