`
bee1314
  • 浏览: 166185 次
  • 性别: Icon_minigender_1
  • 来自: 安徽
社区版块
存档分类
最新评论

前端模块化

 
阅读更多
背景:
前端JavaScript模块化,其实已经不是什么新鲜事了。但是很多的项目还没有真正的使用起来,还处于刀耕火种的野蛮生长阶段。
 
JavaScript一直缺乏有效的包管理机制,造成了大量的全局变量,大量的方法冲突。我们多么渴望有天能像Java(import),Python (import),Ruby(require)那样写代码。在没有包管理机制的年代,我们是怎么避免所谓的全局变量的呢。
 
1. 高端闭包锁死作用域,几乎是标准做法。
(function() {
 
})();
 
和有几种变形
!(function() {
 
})();
 
传参:
(function(self) {
     
})(this); //小伙伴们看懂了this得用意了嘛? 就是跨越执行环境,做到浏览器和node都可以使用。浏览器的this=>window, node this=>process
 
2. 模仿java的包机制
var com.bee = com.bee || {};
 
com.bee.util = {};
com.bee.common = {};
com.bee.animate = {};
com.bee.ajax = {};
….
 
虽然可以一定程度上减轻全局变量和方法的冲突问题,但是没有解决根本的问题。我们代码写起来不够自然,不够放松,不够cool。
 
于是时间来到了现代,以Gmail,Gmap已经chrome为代表的创新,彻底激活了JavaScript。JavaScript也迎来了自己的荣光,真是十年河东,十年河西。
叽歪下 "物竞天择,适者生存真是自然界大法则。"
 
当然真正的高潮是2010年的nodejs的横空出世,往日不敢想象的一些东西居然成为了现实, 想一想都激动呢。
 
心里历程时间:
10年我刚毕业就职于职业生涯的第一个公司,就是写js。虽然极其的不情愿,但生活还是要继续。一天收到js界前沿资讯,说一个nodejs的东西横空出世,太颠覆。我以为是一个类似于jQuery的库,去了解完全不是那么回事。居然run在server端。当时还没有“小伙伴都惊呆了”, 但我真的惊呆了。写了一些demo。真cool。我想这就是未来吗?是的,今天它的创新终于得到证明。生命中很多事情真是很神奇,你排斥的一些东西,经过沉淀之后,原来没有那么烂。
 
再次叽歪下,做技术要紧跟业界动态啊。
 
是的是的,我知道我跑题了,赶紧回来。
正是由于Node的强势崛起,JavaScript迎来了自己得颠覆时刻。但是由于JavaScript本身的缺陷,在后端必须解决JS的模块化的问题。于是大神们一统努力,伟大的CommonJS规范就这样诞生了。Node实现了CommonJS规范(当然也没有全盘实现)。
 
好了CommonJS怎么玩耍呢?
CommonJS对模块的定义非常简单,主要包括:模块的定义,模块引用,模块的标识。
 
模块的定义:math.js
module.exports ,exports
 
module.exports 定义模块对外暴露的对象
exports是module.exports的引用(exports只能暴露方法,不可以是对象。)
 
//add.js
module.exports = function(a, b) {
     return a + b;
}
//mul.js
exports.add = function(a, b) {
     return a * b;
}
//div.js
module.exports = {
     div: function(a, b) {
          if (b === 0) {
              return new Error(‘除数为0')
          }
          return a / b;
     }
};
这些看上去只是普通的js写法啊,怎么就是一个模块了呢?怎么就没有全局变量了呢?
是因为在编译的时候node会对模块自动的包装:实际上是这样的:
(function(exports, require, module, __filename, __dirname) {
     var math = require(‘./math’);
     
     exports.add = function() {
 
     }
})();
吼吼,秘密都在这了。
 
 
模块的引用:
require(‘./math’);
require(‘http');
 
模块的标识:就是require中引入模块传入的字符串,相对路径,绝对路径,没有文件名后缀js,必须符合小驼峰的规范。(node中没有遵守,如require(‘child_process’));
 
 
对于我们前端的意义呢?
有了更好的包管理,我们就可以把前端按照功能模块去开发,按照组件化的方式去开发。不会再把所有代码放到一个js文件中去。但是这么多得小模块怎么办呢?
通过包管理工具进行打包合成一个大文件。
 
demo
  — index.html             id: num1[  请输入数 ]  id:action [+-x/]  id: num2[请输入一个数] = id: reuslt[ 结果]
  — js
       — math.js
       — calc.js
 — build (将众模块打包放这了)
 — webpack.config.js
 
 
math.js
module.exports = {
     add: function(a, b) {
         return a + b;
     },
     mul: function(a, b) {
          return a * b;
     },
     sub: function(a, b) {
         return a - b;
     },
     div: function(a, b) {
         if (b === 0) {
              return new Error(“...");
          }
          return a / b;
     }
};
 
const.js
module.exports = {
     ADD: ‘+’,
     SUB: ‘-‘,
     DIV: ‘/‘,
     MUL: ‘*'
};
 
calc.js
var math = require(‘./math’);
var const = require(‘./const’);
 
var num1 = parseInt($(“#num1”));
var num2 = parseInt($(“#num2));
var action = $(“#action :selected”).val();
var result;
    
switch (action) {
   case const.Add:
        result = math.add(num1, num2):
         break;
   case const.SUB:
         result = math.sub(num1, num2);
         break;
   case const.MUL:
         result = math.mul(num1, num2);
         break;
   case const.DIV:
        try {
            result = math.div(num1, num2);
         } catch(e) {
            alert(e.message);
        }
};
 
 
webpack.config.js
module.exports = {
     entry: ‘./js/calc.js’,
     output: {
         path: ‘./build’,
         filename: ‘bundle.js'
     }
};
 
开始打包了:
cd demo
webpack
 
or
webpack-dev-server —port 3000 —watch 惊喜啊。
 
 
 
 

 

 
分享到:
评论
1 楼 simplenico 2015-01-06  
给峰哥点个赞

相关推荐

    Web前端模块化开发教程(ES6+Node.js+Webpack)_源代码.zip

    在前端模块化开发中,Node.js用于搭建开发环境,安装和管理依赖,以及构建和打包工具。 4. **Webpack**:Webpack是一个现代JavaScript应用程序的静态模块打包工具。它的工作原理是将项目视为一个模块依赖图,...

    Web前端模块化开发教程课件(完整版).pptx

    Web前端模块化开发教程课件(完整版).pptx

    Web前端模块化开发教程全套ppt课件最全电子讲义完整版教学教程整套全书课件ppt.pptx

    "Web前端模块化开发教程全套ppt课件最全电子讲义完整版教学教程整套全书课件ppt.pptx" 本资源是一个关于Web前端模块化开发的教程,全套ppt课件包括了从ES6基础到模块化开发的各个方面的知识点。下面是从标题、描述...

    前端模块化设计思路

    前端模块化设计是一种高效、可复用的编程思想,它旨在优化前端开发流程,提高代码组织的清晰性和可维护性。模块化的核心理念是减少循环依赖和耦合,通过合理划分模块,使得每个模块专注于自己的功能,从而提高设计...

    用于前端模块化使用的jq

    标题提到的"用于前端模块化使用的jq"指的是经过特殊处理的jQuery版本,这个版本是为前端模块化开发优化的,能够帮助开发者更高效、更灵活地在项目中引入jQuery。 在传统的前端开发中,jQuery通常通过 `<script>` ...

    前端模块化.xmind

    前端模块化.xmind

    前端模块化1

    前端模块化是现代Web开发中不可或缺的一部分,它允许开发者将复杂的应用程序分解为多个独立的模块,从而提高代码的可读性、可维护性和复用性。模块化的核心思想是将一个大型程序划分为若干个模块,每个模块都有自己...

    前端模块化webpack1

    【前端模块化webpack1】 前端模块化是现代Web开发中不可或缺的一部分,它使得代码组织更加有序,便于维护和复用。随着技术的发展,模块化的规范也在不断演进,包括CommonJS、AMD(Asynchronous Module Definition)...

    Web前端模块化框架BrowserRequire.zip

    编写BrowserRequire目的不在于统一前后端模块使用,而是做一款更适合Web前端开发需求的模块化框架; 更好的处理了模块与非模块间的使用; 更像是LABjs requireJS的结合增强版,但打包源文件只有7kb左右; ...

    前端模块化脚手架,可实现类似java的封装继承多态特性

    在现代Web开发中,前端模块化已经成为不可或缺的一部分,它能够帮助开发者组织代码,提高代码复用性和可维护性。这个名为“前端模块化脚手架”的工具,旨在为前端开发者提供一个类似于Java语言的封装、继承和多态...

    05-前端模块化.pdf

    前端模块化开发是互联网前端领域的一项重要技术,它的主要目的是将复杂的程序分解成一系列容易管理和维护的模块。在网页开发的早期阶段,JavaScript主要用于做一些简单的表单验证或动画实现,代码量较少,可以直接写...

    前端模块化开发解决方案详解.docx

    前端模块化开发解决方案详解 前端模块化开发解决方案详解是指在前端开发中,为了提高代码的可维护性、可读性和可扩展性,而采用的一系列技术和规范的集合。这些解决方案的核心价值都是让 JavaScript 的模块化开发变...

    ionic项目应用requireJs前端模块化 示例

    在本文中,我们将深入探讨如何在 Ionic 项目中利用 RequireJS 进行前端模块化开发。RequireJS 是一个流行的 JavaScript 模块加载器和构建工具,它使得代码组织更加有序,便于维护和优化。Ionic 是一个基于 AngularJS...

    前端模块化进程-requirejs seajs

    requirejs seajs amd cmd,该PPT主要用于讲解前端模块化的前世今身。 requirejs seajs amd cmd,该PPT主要用于讲解前端模块化的前世今身。

    yuanjs,基于react的前端模块化框架.zip

    yuanjs,基于react的前端模块化框架.zip

    Web前端模块化组件seajs-3.0.0版

    除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还可以带来很多好处: 模块的版本管理。...直到最近两三年,随着 Dojo、YUI3、Node.js 等社区的推广和流行,前端的模块化开发理念才逐步深入人心。

    Web前端模块化开发教程(ES6+Node.pptx

    Web前端模块化开发教程(ES6+Node.pptx

    angular前端模块化

    angualar模块化开发与实用案例

Global site tag (gtag.js) - Google Analytics