模块化

一般来说，编程语言中， 库、包、模块是同一种概念，是代码的组织方式。 Python中只有一种模块对象，但是为了模块化组织模块的便利，提供了一个概念——包！ 模块（module）：指的是Python的源代码文件。 包（package）：是的是 模块组织在一起的包名同名的目录及其相关文件。 导入语句 import 模块1，模块2：这是完全导入(导入不建议用逗号分隔写成一行，可以多个导入) import……as……：模块别名 import语句 知道指定的模块，加载和初始化它，生成模块对象，找不到，抛出ImportError异常。 在import所在的作用域的局部命名空间中（比如在py文件和函数内导入的作用域就不同），增加名称和上一步创建的对象关联。 单独运行下面的例子，体会其区别 import functools print(dir()) print(functools) print(functools.wraps)#import的本质是找到它，单独加载它，初始化它，生成一个模块对象，在当前模块中增加名称。映射到模块对象中。 结果为： ['In', 'Out', '_', '__', '___', '__builtin__', '__builtins__', '__doc__', '__loader__', '__name__', '__package__', '__spec__', '

一、为什么要用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的加载 使用require.js的第一步，是先去官方网站 下载 最新版本。

序言 熟悉了TINY相关开源内容的同学都有一个印象，那就是 Tiny框架 的目录分得非常细，比如Tiny工程的目录结构是下面的样子的： 比如 TinyUiEnterprise 项目的目录结构是这样的： 再比如，我们开源的 软件开发过程管理 软件的地目录结构是这样的： 有少许的人看了之后，深以为然，而更多的人看了之后却觉得莫名其妙。所以今天就乱弹一下模块化。 什么是模块化？ 百度了一下，发现下面的说法非常经典，就此引用一下： 模块化是一种处理复杂系统分解为更好的可管理模块的方式 。 百度百科中，关于模块化设计是这样描述的： 模块化设计，简单地说就是程序的编写不是开始就逐条录入计算机语句和指令，而是首先用主程序、 子程序 、子过程等框架把软件的主要结构和流程描述出来，并定义和调试好各个框架之间的输入、输出链接关系。 逐步求精 的结果是得到一系列以功能块为单位的算法描述。 以功能块为单位进行程序设计，实现其求解算法的方法称为模块化。模块化的目的是为了降低程序复杂度，使程序设计、 调试 和维护等操作简单化。 前半拉和我想表述的意思没有太大关系，大家只要看我加粗变红了的部分，就可以了。 TINY框架模块化之后的效果 随心所欲：想要啥就要啥，不想要啥就不要啥 自动组装：只要通过POM依赖或去除依赖，就可以增加或去除某一功能及其相应配置 这么说说可能比较抽象，那我说几个场景。 比如

作者： 阮一峰 这个系列的 第一部分 和 第二部分 ，介绍了Javascript模块原型和理论概念，今天介绍如何将它们用于实战。 我采用的是一个非常流行的库 require.js 。 一、为什么要用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

Javascript模块化编程（三）：require.js的用法 这个系列的 第一部分 和 第二部分 ，介绍了Javascript模块原型和理论概念，今天介绍如何将它们用于实战。 我采用的是一个非常流行的库 require.js 。 一、为什么要用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的诞生

（一） 随着网站逐渐变成" 互联网应用程序 "，嵌入网页的Javascript代码越来越庞大，越来越复杂。 网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。 Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。 但是，Javascript不是一种模块化编程语言，它不支持" 类 "（class），更遑论"模块"（module）了。（正在制定中的 ECMAScript标准 第六版，将正式支持"类"和"模块"，但还需要很长时间才能投入实用。） Javascript社区做了很多努力，在现有的运行环境中，实现"模块"的效果。本文总结了当前＂Javascript模块化编程＂的最佳实践，说明如何投入实用。虽然这不是初级教程，但是只要稍稍了解Javascript的基本语法，就能看懂。 一、原始写法 模块就是实现特定功能的一组方法。 只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。 　　function m1(){ 　　　　//... 　　} 　　function m2(){ 　　　　//... 　　} 上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。 这种做法的缺点很明显："污染"了全局变量

以前，开发中我们通常使用整套框架（easyui，bootstrap）,不得不说，easyui的自定义打包下载，让我很困惑，因为那个时候，需要手动跟踪组件依赖，也就是说，你需要自己手动下载相关文件，并注意在页面的引入顺序（好吧，有点耐心，细致点，总能解决的）。 现在，项目规模的增长，业务复杂度的增加，以及客户对交互与ui的要求不断提高。我们基本不再使用整套框架，都是选择开源的单一组件，各种组合，来实现相关业务。我们需要引入大量的插件文件，页面引入时，如何避免组件的彼此冲突，相互干扰，成为了很尖锐的问题。（曾经被select.js重写$坑过的朋友应该有感触）。 为了解决这个问题，两种竞争关系的模块规范AMD和CommonJS问世了，它们允许开发者遵照一种约定的沙箱化和模块化的方式来写代码，这样就能避免“污染生态系统”。 一 AMD( Asynchronous Module Definition ) 异步模块加载--主要适用在web客户端 以require.js为主力，在社区推进规范发展。 下面是只依赖jquery的模块foo的代码： // 文件名: foo.js define(['jquery'], function ($) { // 方法 function myFunc(){}; // 暴露公共方法 return myFunc; }); 还有稍微复杂点的例子

对象写法 模块即实现特定功能的一组方法。只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。 若多个函数依次调用，缺点很明显：”污染”了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。 避免这种缺点，可以使用对象写法：把模块写成一个对象，把所有的模块成员（即所要调用的函数）写进一个对象里。 123456789 var module1 = new Object({ _count: 0, m1: function() { }, m2: function() { }}); 则调用函数即访问对象的属性： module1.m1(); 但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值： module1._count = 5; 立即执行函数 使用”立即执行函数”（IIFE），可以达到不暴露私有成员的目的。 12345678910111213 var module1 = (function() { var _count = 0; var m1 = function() { }; var m2 = function() { }; return { m1: m1, m2: m2 }; //将 m1、m2 暴露出来，可以被外部访问})(); 然而这种写法无法从外部访问到 _count 变量

ES6中的模块化输出 在之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库。随着技术的发展，前后端分离，前端的业务变的越来越复杂化。直至ES6带来了模块化，才让javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块。 export的用法: 在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容，就必须使用 export 来对其进行暴露（输出）。先来看个例子，来对一个变量进行模块化。我们先来 创建一个test.js 文件，来对这一个变量进行输出： export let myName="laowang"; 然后可以创建一个index.js文件，以import的形式将这个变量进行引入: import {myName} from "./test.js"; console.log(myName);//laowang ★ 如果要输出多个变量可以将这些变量包装成对象进行模块化输出： let myName="laowang"; let myAge=90; let myfn=function(){ return "我是"+myName+"！今年"+myAge+"岁了" } export { myName, myAge, myfn } /

一、基本信息 标题：基于Web前端的性能优化方案研究 时间：2017 来源：北京邮电大学 关键词：Web前端；模块化；JavaScript；Node.js；前端模板 二、研究内容 1.主要内容： 　　1.1研究背景与意义 当今互.联网飞速发展，网络用户的需求变化既快又大，大部分网站的更新周 期都是以日，小时甚至分钟为单位，在这种情况下，网站的前端就成了变化最频 繁的部分川。随着互联网公司对前端开发的逐渐重视，前端开发人数也越来越多， 但是技术人员的投入总是有限的，而前端开发领城并没有为开发者们提供一-种简 洁，有条理的方式来管理模块的方法，前端模块化问题经久不衰。 以JavaScript 模块化为例，其经历了无模块时代，即代码次序堆特的时代、 模块萌芽时代及当前的模块化组件化时代，ECMA2015 也将模块化纳入到规范 中，使模块化成为JavaScript规范，开发人员不断地在模块化领域进行摸索及探 求。模块化开发使得前端开发人员摆脱繁琐的文件依赖和命名冲突，增强代码复 用性，将代码划分模块管理，也方便开发人员的分工划分。每个人员对自己的模 块负责，考虑其复用性及可扩展性，从这个角度来看，模块化开发也提升了开发 人员的开发效率和代码质量。 本论文研究模块化技术，发现前端模块化在使用及应用场景等方面主要存在 以下问题，亟待进一步优化: (1)前端开发因其特殊性，在模块化方面-