js模块化开发

webpack是一个模块管理工具，它跟grunt,gulp,fis等诸多前端工具一样，为了使日渐增多的js代码变得合理有序，应运而生的模块化工具 1 - 它同时支持commonjs和AMD规范（甚至混合的形式）； 2 - 它可以打成一个完整的包，也可以分成多个部分，在运行时异步加载（可以减少第一次加载的时间）； 3 - 依赖在编译时即处理完毕，可以减少运行时包的大小； 4 - Loaders可以使文件在编译时得到预处理，这可以帮我们做很多事情，比如说模板的预编译，图片的base64处理； 5 - 丰富的和可扩展的插件可以适应多变的需求。 下面是我的webpack的配置： var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports = { //插件项 plugins: [commonsPlugin], //页面入口文件配置 entry: { index : './app/js/index.js' }, //入口文件输出配置 output: { path: 'dist/js', filename: '[name].js' }, module: { //加载器配置 loaders: [ { test: /

了解后端语言的童鞋一定听过模块化开发的概念，比如java、python等后端语言都有自己的模块化特性，然而和后端语言相比，javascript还尚未实现模块化的功能，虽然之后的更高版本可能引入模块化开发的概念，但是现阶段我们可以通过第三方控件来实现。 今天我就来给大家介绍下可以帮助我们实现前端模块化的工具——seaJs。如果对seaJs已经有实际使用经验的小伙伴可以直接忽略这篇文章。 如果有小伙伴了解requireJs，那么学习seaJs会相当的容易，因为requireJs也是前端模块化的构建工具之一，两者的主要区别就是requireJs是基于AMD规范的，而seaJs是基于CMD规范的。 至于什么是AMD和CMD，在这里不做详细介绍啦，想要了解的童鞋可以查看seaJs作者玉伯的回答： http://www.zhihu.com/question/20351507/answer/14859415 好了，我们切入正题，首先先介绍下seaJs的下载及配置。 一、seaJs的下载及配置 下载： http://seajs.org/docs/#downloads （当前最新版本为3.0.0，还可以使用smp下载） 配置：（1）将下载后的sea.js文件挪到自己的网站目录下（sea.js位于sea-modules\seajs\seajs中）； 　　　 我的网站目录如下： 　　 　　　（2

Nodejs的模块化 在我们日常进行web开发的过程中, 对于模块化总是跑不掉的, 各家的模块化有各家的实现方式, 百花齐放, nodejs遵循commonjs规范的模块化 把每一个文件都看做是一个模块 如果一个模块需要暴露一些数据或者功能供其他模块使用, 需要写上 module.exports = xxx , 该过程称之为模块的导出 如果一个模块需要用到另一个模块导出的代码, 需要使用require(’…’)来引入, require函数的返回值就是索引模块暴露出的内容 模块中的所有全局代码产生的变量, 函数均不会造成全局污染, 仅在模块内使用 模块具有缓存, 第一次导入模块时就会缓存该模块, 之后再次导入同一个模块的时候, 直接使用之前的结果 每个模块可能被其他模块所依赖, 也可能会依赖于其他模块 module.exports和require的使用 我新建一个index.js // index.js const result = require ( './test.js' ) ; console . log ( result ) ; // 输出{ a: 100 } 然后我再新建一个test.js // test.js const a = 100 ; module . exports = { a } 我们进入terminal, 执行index.js文件, 会发现打印出来的

什么是模块化 模块化其实是一种规范，一种约束，这种约束会大大提升开发效率。将每个js文件看作是一个模块，每个模块通过固定的方式引入，并且通过固定的方式向外暴露指定的内容。 按照js模块化的设想，一个个模块按照其依赖关系组合，最终插入到主程序中。 模块化的方法 普通方法 优点：可以直接调用。 缺点：变量可能会出现重复造成的污染，并且无法进行结构性分类。 function a ( ) { console . log ( "a" ) ; } function b ( ) { console . log ( "b" ) ; } a ( ) ; b ( ) ; 对象的写法 优点：变量不会被直接污染，并且易于分类描述内容。 缺点：会暴露所有成员，内部状态可以被外部改写。 var obj = { _a : false , a : function ( ) { console . log ( "a" ) ; } , b : function ( ) { console . log ( "b" ) ; } } ; obj . a ( ) ; obj . b ( ) ; obj . _a = 3 ; 立即执行函数 优点：外部代码无法读取到里面的_num变量，保证了变量不被污染。 var obj = ( function ( ) { var _num = 3 ; return { a :

一、什么是模块化？ 模块化是指解决一个复杂的问题时自顶向下把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。 二、为什么要模块化（模块化的好处）？ 1.更好地分离 　　如果要加载多个就得就得放置多个script标签，如果是加载模块的话，如seaJS，就只需加载一个sea.js即可，这样对于HTML和JavaScript分离很有好处。 2.更好的代码组织方式 　　如果单个文件越来越大，维护起来问题出问题的几率也会越来越大，一个人开发还好，如果是多人开发，不同的代码风格，超多的业务逻辑混杂在一起，不要说维护了，光想想就蛋疼。模块化的开发，一个文件就是一个模块，控制了文件的粒度，每个模块可以专注于一个功能，在多人开发时，各自管好自己的模块就行。 3.按需加载 　　还是以单个文件来说，当文件大到一定程度，性能问题也随之而来。合并文件是能减少请求，性能也会有所提升，但是当文件大到一定的体积时，此时的下载时间可能并不会比多个小文件的下载时间短，此时就需要权衡请求数和文件体积的关系了。 4.避免命名冲突 　　JavaScript本身是没有命名空间的，为了避免命名冲突，经常会使用对象或闭包的办法来避免。用对象仅仅是降低了冲突的概率而已，那经常使用的jQuery开发来说，无论是往$上扩张还是在$.fn上扩展，开发的人多了难免会起冲突。或者用自定义对象，搞个好几层，不光是写起来难记

一，JS模块化演变过程 1.普通函数封装： 1 function fn1(){ 2 3 } 4 5 function fn2(){ 6 7 } 最初的这种普通函数封装的缺点很明显：污染了全局变量，无法避免的会与其他模块发生变量名冲突，而且自身模块成员之间没有任何联系，说白了就是没有做到“高内聚，低耦合”原则 2.对象： 1 var myModule = { 2 var1: 1, 3 var2: 2, 4 fn1: function(){ 5 6 }, 7 fn2: function(){ 8 9 } 10 } 技术一直在进步，这种做法的避免了变量污染，只要保证模块名唯一即可，自身模块内的成员也有了联系； 但是新的问题出现了，看似不错的解决方案，也有缺陷，外部可以随意修改内部成员； 如：myModel.val = 100; 说白了就是产生了安全问题 3.立即执行函数 1 var myModule = (function(){ 2 var var1 = 1; 3 var var2 = 2; 4 function fn1(){ 5 6 } 7 function fn2(){ 8 9 } 10 return { 11 fn1: fn1, fn2: fn2 12 }; 13 })(); 这种做法就是我们JS模块化的基础，技术永无止境，随着JS模块化技术提高，产生了不同流派，分支

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

本文只是适合小白学习，出自：http://web.jobbole.com/95559/ 模块化的理解 1.什么是模块? 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信 2.模块化的进化过程 全局function模式 : 将不同的功能封装成不同的全局函数 编码: 将不同的功能封装成不同的全局函数 问题: 污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系 function m1() { // body... } function m2() { // body... }//这样做会造成命名冲突，污染命名空间。 　　 namespace模式 : 简单对象封装 作用: 减少了全局变量，解决命名冲突 问题: 数据不安全(外部可以直接修改模块内部的数据) let myModule = { data: 'www.baidu.com', foo() { console.log(`foo() ${this.data}`) }, bar() { console.log(`bar() ${this.data}`) } } myModule.data = 'other data' //能直接修改模块内部的数据 myModule.foo() // foo()

模块化开发是为了解决js文件中 命名冲突 和 文件依赖 的问题。 软件中的模块化开发： 一个功能就是一个模板，多个模板可以组成完整应用，抽离一个模块不会影响到其他功能的应用。 例如： 一个应用模块分为用户管理模块，文章管理模块，商品管理模块，用户管理模块又分为添加用户管理模块和删除用户管理模块，商品管理模块分为查找和添加模块。各模块之间相互独立，可维护性较强。 Node.js中模块化开发规范 Node.js规定一个js文件为一个模块， 模块内部定义的函数和变量 在模块外部无法访问，因此需要在模块内部通过 exports对象 进行导出，在模块外部通过 require方法 进行导入。 （注意：exports是一个对象，require是一个方法！！！） exports对象导出方法 例如：a.js文件中代码为 const version = 1 ; const hello = name => `hello, ${ name } ` ; exports . version = version ; exports . hello = hello ; b.js文件中代码为： let b = require ( './a.js' ) ; //在外部通过reqiure进行导入，require为一个方法 console . log ( b . version ) ; console . log ( b

requireJs使用 requireJs 使用require.js的第一步，是先去官方网站下载最新版本。 下载后，假定把它放在js子目录下面，就可以加载了。 <script src="js/require.js"></script> 有人可能会想到，加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样： 　<script src="js/require.js" defer async="true" ></script> async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。 加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了： 　<script src="js/require.js" data-main="js/main"></script> data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。 主模块的写法 上一节的main.js，我把它称为"主模块"，意思是整个网页的入口代码