模块化

1.模块化： Js模块化提供了三种规范 　　　1，commonjs 规范 代表就是nodejs 适合后台开发 因为是同步的 服务器的运行比较快等待时间不长，commonjs不适合用于前端，前端的客户端是浏览器，浏览器追求异步加载，浏览器不能等待太长时间。 　　　2，前端模块的规范是Amd规范 代表就是requirejs，他是异步的，很多前端框架都是用的amd规范，比如jquery angular等 　　　3，第三个模块化规范是而es6 2.模块化的操作 　　1.Commonjs的操作 　　　　所有的模块化都是两个方向，暴露模块接口和引入模块。 　　　　Module.exports={} 暴露的是一个叫exports的对象 　　　　Require() 引入一个模块 　　　　这是后台的规范，在nodejs环境可以直接运行，但是在客户端不能直接运行，需要对文件打包解析。Webpack gulp。 拓展 　　Var a； 　　Var a 就是声明一个变量a，就是浏览器往window上添加一个属性a。 前端模块 自定义前端模块 案例分析 　　定义一个shangjun模块，没有任何依赖，定义一个feixiang模块，这个模块依赖shangjun模块，定义一个主文件index.js 依赖feixiang模块。 　　 　　 　　 　　Html文件 　　　 注意事项 　　依赖关系千万不能出错 　

一、webpack4初识 1.首先先了解几个规范 CommonJS规范，导出：module.exports = Header; 其他规范CMD,AMD 2.给出一个小的项目 如果该项目不用webpack打包根本并不会正确运行，因为浏览器并不会识别导入导出的js语法，但是webpack可识别这些语法 首先 npm init 初识化项目，然后npm install webpack webpack-cli -D/--save-dev 进行安装webpack 将index.js文件打包，npx webpack index.js 这时候在导入生成的dist目录下的main.js即可正常运行项目 但是就会有人说了，那webpack不就是js的翻译器么，这样说其实是夸大了他的功能，因为他只能识别很少部分js 二、webpack的安装 1.全局安装：npm install webpack webpack-cli -g 2.小点补充：（1）npm info webpack 可以车看webpack中所有的版本 文章来源: https://blog.csdn.net/sunshine_yinger/article/details/92401011

前端模块化 模块化： 是具有特定功能的一个对象（ 广义理解 ） 模块定义的流程： 1.定义模块（对象） 2.导出模块 3.引用模块 好处：可以存储多个独立的功能块，复用性高 种类： AMD（ require.js） CMD ( sea.js ) Common.js CommonJs用在服务器端，AMD和CMD用在浏览器环境 三者的一个详细介绍： https://www.jianshu.com/p/d67bc79976e6 AMD定义一个模块：使用define来定义，用require来使用模块 // AMD /* 目录 admDir a.js index.js */ // AMD定义 a.js define ( { a : 1 , b : 2 , add : function ( ) { } } ) // AMD引用 index.js require ( [ . / a . js ] , function ( moduleA ) { //moduleA指的就是定义来的对象 } ) CMD定义模块：使用define来定义，用require来使用模块 //CMD /* 目录结构 b.js index.js */ // 模块定义 b.js define ( function ( require , exports , module ) { // 模块代码 } ) ; //模块引用

Vuex 模块化 (2.0) Vuex 强调使用单一状态树，即在一个项目里只有一个 store，这个 store 集中管理了项目中所有的数据以及对数据的操作行为。但是这样带来的问题是 store 可能会非常臃肿庞大不易维护，所以就需要对状态树进行模块化的拆分。 首先贴出一个逻辑比较复杂的H5项目： 源码 DEMO 该项目主要包括 banner、feeds、profile 三个部分。其中 feeds 模块最复杂，需要对数据列表进行处理，如果单条数据中是图片：1张按照屏幕宽展示；2张各占50%；3张以上采用九宫格形式展示；如果单条数据是视频，则显示播放按钮，播放一条视频时，其他视频暂停。 由于该项目数据、交互较多，我们使用 Vuex 对数据进行托管，只在 Vue 组件中保留最基本的操作。 如果不使用 Vuex，许多数据流需要通过 props 的方便向下传递，十分不便，尤其是一些跨组件的操作更加困难。使用 Vuex 后就可以将数据与操作保留在 store 中，每个组件都能轻松调用。 本项目中除了根 store 以外，还通过 module 将各组件的 store 分开管理，还不了解的同学可以往下看。 Module 首先介绍下基本的组件化规则：你可以根据项目组件的划分来拆分 store，每个模块里管理着当前组件的状态以及行为，最后将这些模块在根 store 进行组合。 const

简单模块化 import 最好在最顶端 sys.path.append("..")表示把当前程序所在位置向上提了一级 在python3规范中，__init__.py并不是必须的。 　　文件结构： . ├―― utils │ ├―― util . py │ └―― class_util . py ├―― src │ └―― sub_main . py └―― main . py # utils/utils.py def get_sum ( a , b ): return a + b # utils/class_utils.py class Encoder ( object ): def encode ( self , s ): return s [::- 1 ] class Decoder ( object ): def decode ( self , s ): return '' . join ( reverse ( list ( s ))) # main.py from utils . utils import get_sum print ( get_sum ( 1 , 2 )) ########## 输出 ########## 3 # src/sub_main.py import sys sys . path . append ( ".." ) from utils .

2016-04-20 架构说 19 阅读 应用服务器——系统运行的托管员 综述 阿里巴巴集团有国内最大规模的Java系统，几万台的应用服务器规模也空前庞大，目前主要使用的应用服务器有Tomcat，JBoss和Jetty三种。阿里巴巴自从2004年开始转向Java技术平台后，先后经历了从WebLogic到Jboss和Tomcat迁移。到了2008年，随着更为轻量级的Tomcat和Jetty容器的迅速发展，越来越多的应用系统开始尝试使用Tomcat或Jetty作为底层应用服务器。2013年上半年，阿里巴巴集团中间件成立了独立的应用服务器团队，主要面向整个集团进行应用服务器相关的工作，目前在公司内部主推Tomcat服务器。 本文将从中间件团队在2013年双十一大促前针对应用服务器上进行的工作展开，重点讲解Tomcat监控诊断工具，以及Pandora隔离技术两方面内容。 6.1、Tomcat监控管理工具 Tomcat Monitor模块是一个Tomcat的监控和诊断模块，提供了一些基本的工具，可以对Tomcat的连接池、线程、内存、类加载以及JVM相关等进行监控和诊断。Tomcat Monitor的出现，解决了广大开发人员无法快速定位线上问题的尴尬问题，同时也帮助开发人员能够通过简单且统一的命令行工具来排查问题、查看程序运行时状态，而不需要使用各种包括jmap

一、理解 1、什么是模块、模块化？ 将一个复杂的程序依据一定的规范封装成几个文件，并进行组合在一起 2、为什么要模块化？ 降低复杂度，提高解耦性，部署方便 3、模块化的好处 避免命名冲突（减少命名空间污染） 更好的分离，按需加载 更高复用性 高可维护性 4、页面引入加载script 二、模块化规范 1、CommonJS（node根据该规范编写） 说明： 每一个文件都可以当做一个模块 在服务器端：模块的加载 是运行时同步加载的 在浏览器端：模块需要提前编译打包处理 基本语法： 模块引入：require（xxx） 　　第三方模块：xxx为模块名 　　自定义模块：xxx为模块文件路径 暴露模块：exports.xxx = value 和 module.exports = value 　　module.exports = value 是直接用value新对象来覆盖原来的空对象 实现： 服务器端实现：Node.js 浏览器端实现：Browserify （CommonJS的浏览器端的打包工具） 下载安装browserify 　　全局：npm install browserify -g 　　局部：npm install browserify --save-dev 定义模块代码（js文件代码 并暴露相应内容） 页面使用引入： <script type="text/javascript" src=

var main = main || {}; ; (function (main) { 'use strict'; //私有变量 var _s1 = 'Hello '; var _s2 = 'World!~'; //私有方法 var _func = { helloWorld: function (str1, str2) { return str1 + str2; } }; //公有方法 main.method = { add: function (a, b) { return a + b; }, subtract: function (a, b) { return a - b; }, multiply: function (a, b) { return a * b; }, divide: function (a, b) { return a / b; }, total: function (a, b) { return _func.helloWorld(_s1, _s2) + this.add(a, b) + this.subtract(a, b) + this.multiply(a, b) + this.divide(a, b); } }; //将公有方法返回 return main.method; })(main); var t = main.method.total(1, 1

之前在网上浏览器的webpack模块化很乱，而且也没有把CMD模块化使用讲清楚的，终于忍不下去，将几种模块化以一种清晰的方式写出来，这也是我一直想做的事，下面就来讲讲CMD、AMD、commonJs、es6模块化的运用。 CMD CMD是seaJs在推广过程中生产的对模块定义的规范 属于同步模块定义，在哪里需要用就在哪里引入， 用define定义 定义方法： define(function(){require,exports, module}) require: 导入其他依赖的办法 exports、导出的方法 导出的方法 CMD有三种方式导出 第一种使用exports导出 //common.js //使用define定义模块，require、exports、module是define自带的 define ( function ( require , exports , module ) { //定义导出的方法 function minus ( a , b ) { return a - b } // 使用exports导出 exports . minus = minus } ) 第二种使用moudle导出 //common.js //使用define定义模块，require、exports、module是define自带的 define ( function ( require ,

如果写超过es5版本的js，或者ts等。是需要babel来进行编译的。 但是babel值编译，如果遇到模块化他就无能为力了 需要webpack对其进行模块化打包功能。 通常babel编译+webpack处理模块打包压缩等，挺好的。是完美的方案 但是webpack它不老实。它想牛逼，于是他就内置了不用任何配的情况下，就支持对es6的编译环节。您只管使用webpack命令，他就支持编译+模块处理打包了。但是稍微高端的就不行，比如我要编译ts等，就需要引入ts-loader了。 但是人家ts也不是吃白饭的啊，人家自己的语言 自己肯定要提供编译的cli呀。于是tsCli之tsc命令人家自己也能编译ts为浏览器或者node可运行的代码。 那也就是说 后端node开发人可以直接用tsCli或者babelCli来处理ts代码 前端因为浏览器目前2019年均不直接支持模块化，所以需要进行搭配来使用 如果您的代码是es6，且没有用模块，那么用chrome直接运行即可，无需任何处理，我自己测试了，chrome支持良好。 如果你不放心，或者还要支持其他浏览器，那么你可以用babel编译一下子，是的不推荐你用webpack，因为你没有用模块化功能，所以浪费了，webpack肯定要比babel重 若果您的代码有es6以及其模块化，那么推荐您直接上webpack，因为它既能处理es6普通语法，也能处理模块化