模块化

摘要：层级依赖的体现、实现基础增删查改、改善编程习惯、配置文件的改变、thymeleaf替代jsp、拦截器和过滤器 1、建立springboot父工程 artfactid:springbootDemo2---->由于要作为父工程，我们不再需要parent标签，有的话就删掉，再找到下面的标签， 加入<packaging>pom</packaging> 1 <groupId>com.aaa.liu.springboot</groupId> 2 <artifactId>springbootDemo2</artifactId> 3 <!--添加pom--> 4 <packaging>pom</packaging> 5 6 <version>1.0-SNAPSHOT</version> 2、按照正常的流程开始在父工程的基础上新建module：springboot-mapper springboot-model springboot-service springboot-web springboot-common 再依次添加工程依赖，组成层次依赖的关系，，将所需要用到的jar包放入父工程的mxl中，并用dependencyManage管理： 1 <dependencyManagement> 2 <dependencies> 3 4 <dependency> 5 <groupId>org

什么是前端工程化、模块化、组件化？ 前端工程化 工程化是一种思想而不是某种技术(当然为了实现工程化我们会用一些技术) 再用一句通俗的话来概括前端工程化:前端工程化就是用做工程的思维看待和开发自己的项目,而不再是直接撸起袖子一个页面一个页面开写 前端模块化 前端工程化是一个高层次的思想,而模块化和组件化是为工程化思想下相对较具体的开发方式,因此可以简单的认为模块化和组件化是工程化的表现形式。 模块化开发， 一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。 模块化开发的4点好处： 　　1 避免变量污染，命名冲突 　　2 提高代码复用率 　　3 提高维护性 　　4 依赖关系的管理 那具体什么是模块化呢？还是举简单的例子,我们要写一个实现A功能的JS代码,这个功能在项目其他位置也需要用到,那么我们就可以把这个功能看成一个模块采用一定的方式进行模块化编写,既能实现复用还可以分而治之,同理在写样式的时候,如果我们需要某种特殊的样式,会在很多地方应用,那么我们也可以采用一定的方式进行CSS的模块化,具体说来,JS模块化方案很多有AMD/CommonJS/UMD/ES6 Module等,CSS模块化开发大多是在less、sass、stylus等预处理器的import/mixin特性支持下实现的 总体而言, 模块化不难理解

文件作用域 在JavaScript文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。 通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置，如： // app.js App({ globalData: 1 }) // a.js // The localValue can only be used in file a.js. var localValue = 'a' // Get the app instance. var app = getApp() // Get the global data and change it. app.globalData++ // b.js // You can redefine localValue in file b.js, without interference with the localValue in a.js. var localValue = 'b' // If a.js it run before b.js, now the globalData shoule be 2. console .log(getApp().globalData) 模块化 我们可以将一些公共的代码抽离成为一个单独的js文件，作为一个模块。模块只有通过

Node.js中的模块化 好处 复用性高，一次定义，多次使用 前端模块化 AMD AMD的实现需要使用 require.js CMD CMD的实现需要使用 sea.js 【 不更新 】 Common.js Node.js使用了Common.js规范 内置模块引用 自定义模块引用 第三方模块引用 EcmaScript 模块化 es5 module.export / exports es6 export default / export export default 默认导出一个 ， import xx from xxx export 批量导出，导出多个, import { xxx } from xxx Node.js中内置模块使用 1. 格式： var/let/const 变量名 = require(路径) 内置模块路径就是模块名称 2. 使用内置模块身上的方法 const fs = require( 'fs' ) fs.readFile('../dist/1.txt','utf8',( error,docs ) => { console.log( docs ) }) request第三方模块 作用： 数据请求 使用： 1. 安装 npm/cnpm i/install request --dev-save/-D 开发环境安装 npm/cnpm i/install request -

commonjs 导出一个 a.js function add(a, b){ return a+b; } module.exports = add; b.js const add = require('./a'); const sum = add(10, 20); console.log(sum); 执行 node b.js 打印出30 导出多个 a.js function add(a, b){ 　　return a + b; } function mul(a, b){ 　　return a * b } module.exports = { 　　add, 　　mul }; b.js const {add, mul} = require('./a'); const sum = add(10, 20); const res = mul(10, 20); console.log(sum, res); 执行 node b.js 打印出30 200 通过commonjs引入npm包 b.js const _ = require('lodash'); const arr = _.concat([1,2], 3); console.log(arr); 执行node b.jg 打印出[1,2,3] 来源： https://www.cnblogs.com/wzndkj/p/11343584.html

1. CommonJS 用于服务端模块化编程，比如nodejs就采用此规范； 一个文件就是一个模块，require方法用来加载模块，该方法读取一个文件并执行，最后返回文件内部的module.exports对象； require是默认读取.js文件的，所以require(模块名)可以不写后缀； 同步加载，由于服务端加载的模块一般在本地，所以可以这样；但是在客户器端如果一个模块过大就会导致页面“假死”； module.exports属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取module.exports变量；为了方便也可以用exports，exports指向module.exports；即exports = module.exports = {} exports.xxx相当于在导出的对象上添加属性，该属性对调用模块可见； exports = 相当于给exports重新赋值，这样就切断了和module.exports的关联，调用模块就不能访问exports的对象及其属性； 2. AMD 加载模块：require([module], function(module){})； 定义模块：define([module], function(module){})；module为依赖模块； require.js（前端模块化管理的工具库）实现js文件的异步加载，避免网页失去响应

1.webpack 与 gulp 区别 Gulp 就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。 Gulp 像是流水线，产品生产的 整个过程 都要受到 流水线控制。 Gulp是通过task对整个开发过程进行构建。 webpack 是对 前端资源模块化管理和打包 的工具，通过 loader，可以将 任何资源js、css、图片、less、commonjs、es6等模块化。 2. 来源： https://blog.csdn.net/from_shanghai/article/details/97623022