我们再一次被计算机的名词，概念笼罩。backbone、emberjs、spinejs、batmanjs 等MVC框架侵袭而来。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模块化的JavaScript扑面而来。模块化JavaScript的概念尤为强烈，似乎有赶超07年Ajax风潮之趋势。一、写函数（过程式） 2005年以前，JavaScript没人重视，只作为表单验证等少量应用。那时一个网页上写不了几行JS代码，1000行算很复杂了。这时组织代码的方式是过程时，几十行的代码...
这个系列的第一部分和第二部分，介绍了Javascript模块原型和理论概念，今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。 一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。 代码如下: 输出的变量名），表明这个模块外部调用时的名称；（2）d...
这个系列的第一部分介绍了Javascript模块的基本写法，今天介绍如何规范地使用模块。 （接上文） 七、模块的规范 先想一想，为什么模块很重要？ 因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。 但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！考虑到Javascript模块现在还没有官方规范，这一点就更重要了。目前，通行的Javascript...
随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。 网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。 Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。 但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑...
如今backbone、emberjs、spinejs、batmanjs 等MVC框架侵袭而来。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模块化的JavaScript扑面而来。web前端已经演变成大前端，web前端的发展速度之快。 1)我们来看看什么是模块化？ 模块化是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性。javascript中的模块在一些C、PHP、java中比较常见: c中使用include 包含.h文件;php...
模块化编程是一种非常常见Javascript编程模式。它一般来说可以使得代码更易于理解，但是有许多优秀的实践还没有广为人知。 基础我们首先简单地概述一下，自从三年前Eric Miraglia（YUI的开发者）第一次发表博客描述模块化模式以来的一些模块化模式。如果你已经对于这些模块化模式非常熟悉了，大可以直接跳过本节，从“进阶模式”开始阅读。 匿名闭包 这是一种让一切变为可能的基本结构，同时它也是Javascript最棒的特性。我们将简单...
nodejs的功能块大都以模块的形式存在的。 通常会有一个统一入口index.js，然后调用不同的模块来完成我们需要的功能。 我们先来看看怎么把server.js变成一个模块让 index.js 主文件使用。代码如下: var http = require("http"); ... http.createServer(...);“http” 是nodejs自带的模块，我们在我们的代码中请求它并把返回值赋给一个本地变量。 我们可以用这个变量来调用 http 模块所提供的公共方法的对象，变量名不是固定的，你完...
mini-define 依据require实现的简易的前端模块化框架。如果你不想花时间学习require.js,也不想翻看长篇的cmd/amd规范，那么这个mini-define就是你不错的选择。如果你之前用过sea.js或require.js那么mini-define更加高效，更加轻量，更加易用。项目地址：github 用法 首先定义模块 定义模块 一：定义模块用define函数 1.1 根据是否有依赖,有两种情况： 1.1.1：没有依赖的模块代码如下:define(id,function(){// put your code here})...
小A是某个创业团队的前端工程师，负责编写项目的Javascript程序。 全局变量冲突 根据自己的经验，小A先把一些常用的功能抽出来，写成函数放到一个公用文件base.js中：代码如下: var _ = {$: function(id) { return document.getElementById(id); },getCookie: function(key) { ... },setCookie: function(key, value) { ... } };小A把这些函数都放在_对象内，以防过多的全局变量造成冲突。他告诉团队的其他成员，如果谁想使用这些函...
一直对JS都是一知半解,最近遇到这方面问题,所以在网上学习了一下,现在还没有完全明白,先贴出笔记; 第一章 JavaScript模块化编程 (一):模块的写法 一 原始写法 // 模块就是实现特定功能的一组方法;只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块;function m1(){// ...}function m2(){// ...} // 上面的函数m1()和m2(),组成一个模块;使用时直接调用就行; // 缺点:"污染"了全局变量; 无法保证不与其他模块发生变...
由于一直在使用，所以了解了下seajs的源代码。这里是我对下面几个问题的理解： 1、seajs的require(XXX)的方法是怎样实现模块加载的？ 2、为什么需要预加载？ 3、为什么需要构建工具？ 4、构建前后的代码究竟有些什么区别，为什么要这么做？ 问题1： seajs的require(XXX)的方法是怎样实现模块加载的？ 代码逻辑比较绕，对源代码的理解放在文章的末尾，这里先简单梳理下模块加载的逻辑： 1、从seajs.use方法入口，开始加载use到的模块...
前言??SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。SeaJS本身遵循KISS（Keep it Simple,Stupid）理念进行开发，后续的几个版本更新也都是吵着这个方向迈进。如何使用SeaJS下载及安装在这里不赘述了，不了解的请查询官网。基本开发...
由于 Js 起初定位的原因（刚开始没想到会应用在过于复杂的场景），所以它本身并没有提供模块系统，随着应用的复杂化，模块化成为了一个必须解决的问题。本着菲麦深入原理的原则，很有必要来揭开模块化的面纱一、模块化需要解决的问题 要对一个东西进行深入的剖析，有必要带着目的去看。模块化所要解决的问题可以用一句话概括 在没有全局污染的情况下，更好的组织项目代码举一个简单的栗子，我们现在有如下的代码： function doSome...
一、为什么需要模块化 前面我们讲到的例子都在一个状态树里进行，当一个项目比较大时，所有的状态都集中在一起会得到一个比较大的对象，进而显得臃肿，难以维护。为了解决这个问题，Vuex允许我们将store分割成模块（module），每个module有自己的state，mutation，action，getter，甚至还可以往下嵌套模块，下面我们看一个典型的模块化例子 const moduleA = {state: {....},mutations: {....},actions: {....},getters: {....} }co...
在使用 sea.js 、require.js 、 angular 的时候。 我们使用到 define 、 module（require） 的方式，定义模块，和依赖模块 下面给出 define 和 module 的简单实现。 其本质，就是往一个对象上面添加方法 var F = {}; F.define = function(str,fn){var parts = str.split(".");var parent = this; // parent 当前模块的父模块var i = len = 0;//如果第一个模块是模块单体对象,则移除if(parts[0] == "F"){parts = parts.slice(1);}//...