模块化 | 易学教程

前端模块化——彻底搞懂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"

Lodash学习记录

阅读更多关于 Lodash学习记录

Lodash学习记录官方网站 Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 Lodash 的优势 Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法非常适用于：遍历 array、object 和 string 对值进行操作和检测创建符合功能的函数未完待续版权声明：文章内容总结于网络，如侵犯到原作者权益，请与我联系删除或授权事宜来源： CSDN 作者：石似心链接： https://blog.csdn.net/qq845484236/article/details/103871163

前端工程——基础篇

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

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

Android 开发:由模块化到组件化

阅读更多关于 Android 开发:由模块化到组件化

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 模块化和组件化模块化组件化不是个新概念,其在各行各业都一直备受重视.至于组件化什么时候在软件工程领域提出已经无从考究了,不过呢可以确认的是组件化最早应用于服务端开发,后来在该思想的指导下, 前端开发和移动端开发也产生各自的开发方式. 在了解组件化之前,先来回顾下模块化的定义 Modular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality. 简单来说,模块化就是将一个程序按照其功能做拆分，分成相互独立的模块，以便于每个模块只包含与其功能相关的内容。模块我们相对熟悉,比如登录功能可以是一个模块,搜索功能可以是一个模块,汽车的发送机也可是一个模块. 组件化现在来看看”组件化开发”,这里我们看一下其定义 : Component-based software

组件化开发和模块化开发概念辨析

阅读更多关于组件化开发和模块化开发概念辨析

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 网上有许多讲组件化开发、模块化开发的文章，但大家一般都是将这两个概念混为一谈的，并没有加以区分。而且实际上许多人对于组件、模块的区别也不甚明了，甚至于许多博客文章专门解说这几个概念都有些谬误。想分清这两个概念我觉得结合一下软件的渐进式开发场景更容易理解。但是下面的篇幅会比较长，所以我先说结论，不耐烦的同学可以先看：概念区别对比说明组件：最初的目的是代码重用，功能相对单一或者独立。在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。模块：最初的目的是将同一类型的代码整合在一起，所以模块的功能相对复杂，但都同属于一个业务。不同模块之间也会存在依赖关系，但大部分都是业务性的互相跳转，从地位上来说它们都是平级的。因为从代码组织层面上来区分，组件化开发是纵向分层，模块化开发是横向分块，所以模块化并没有要求一定组件化。也就是说你可以只做模块化开发，而不做组件化开发。那这样的结果是什么样的呢？就是说你的代码完全不考虑代码重用，只是把相同业务的代码做内聚整合，不同模块之间还是存在大量的重复代码。这样的成果也算是做到了模块化，只不过我们一般不会这样而已。和组件模块近似的一对概念是库和框架。库的概念偏近于代码的堆集，是分层的概念，所以对应组件化。框架是结构化的代码，所以应用于模块化

web前端开发图文全面解析

阅读更多关于 web前端开发图文全面解析

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前端是什么？在回答这个问题之前，我想到了一道面试题：当我们在浏览器中输入网址并按回车之后，接下来会发生什么？我们来简单地看一看 “网页展现” 的整个过程。比如这里有一个用户，它需要访问 abc.com 这个网址。一般来说，当用户输入一个域名时，是在请求一个 HTML 资源。当他完成域名解析之后，他的浏览器会向 abc.com 这个域名所指向的 Web 服务器发出请求。有时候 Web 服务器直接就可以返回用户的请求了；有时候 Web 服务器还需要向数据库查询一些数据，然后才能把处理结果返回给用户。当用户的浏览器拿到服务器返回的 HTML 资源之后，就开始解析并显示 HTML 的内容了。一般来说，HTML 页面需要 CSS 资源来描述页面的样式。比如浏览器在解析 HTML 时发现了一个 CSS 外链 abc.com/a.css ，它就会去请求这个资源。 HTML 页面往往还需要加载外部的 JS 资源，比如 abc.com/a.js ，此时浏览器同样会向服务器请求这个资源。当所需的资源都加载完成之后，这个页面就可以提供完整的外观和功能了。整个过程差不多就是这个样子了。我们看一看这张流程图，可以在中间画一道竖线，把它分成左右两个部分。我们会发现，这道线左侧的事情发生在浏览器端，我们称之为 “前端”

前端模块化、工程化

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

　　先谈谈前端工程化，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代码，我们称为模块化。一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，各行其是就都乱套了

订阅模块化