随笔分类 - 模块化JS
摘要：Component 是一个对客户端 JavaScript 包进行管理的工具，用于更好的构建 Web 应用。特点：编写模块化 commonjs 组件编写包含样式、图片、脚本等内容的组件无需注册表发布或者帐号，使用 github 资料库可通过 component-YOURCOMAND git 风格来扩展子命令组件骨架创建的命令从命令或者 ./component.json 中安装依赖avoid name squatting through github's naming conventions使用 --shandalone 构建组件便于非组件用户使用通过简单可靠的搜索来发现有用的包可直接在命
阅读全文
摘要：用 seajs 组织项目，上线后，经常需要更新特定文件或所有文件的时间戳，以清空浏览器缓存。最简单的方式是：123define(function(require, exports) {var a = require('path/to/a.js?20110801');});这种方式很简单直观，弊端也很明显：文件一多，时间戳会分散在各个文件，维护起来不方便。第二种方式是利用 alias:12345678seajs.config({alias: {'jquery': 'jquery/1.6.2/jquery','backbone': &
阅读全文
摘要：模块目的什么是 JavaScript 模块？它们的目的是什么？定义：如何把一段代码封装成一个有用的单元，以及如何注册此模块的能力、输出的值依赖引用：如何引用其它代码单元现今 Web(function () { var $ = this.jQuery; this.myExample = function () {};}());现如今 JavaScript 代码段是如何定义的呢？通过立即执行的工厂函数定义。使用 HTMLscript标签加载模块，通过全局变量来引用依赖。模块间依赖的声明很弱：开发者需要知道正确的依赖顺序。例如，包含 Backbone 的文件，不能放在 jQuery 标签...
阅读全文
摘要：本文讨论为何网站模块化很有用，以及模块化的各种实现方式的可行性。同时，还有个独立页面讨论 RequireJS 采用的函数封装的设计驱使。问题网站正在变成网络应用代码复杂度随着网站变大而增加代码组织变难了开发者希望 JS 文件模块化部署时又希望将代码优化进一到数次 HTTP 请求解决办法前端开发者需要一个满足以下条件的解决方案：类似#include、import、require（译注：分别对应 C、Python、node.js）能够加载嵌套的依赖对开发者友好并且能提供帮助部署的优化工具脚本加载的 API首要任务是厘清加载脚本的 API。有以下备选方案：Dojo：dojo.require('
阅读全文
摘要：main.jsdefine(function(require, exports, module) { window.person={} var main = {} main.init = function(){ var m=2; switch(m){ case 1: var module1 = require("../test/test1.js"); break; case 2: var module2 = require("../test/test2.js"); //没有执行 但是引入了test2.js break; } console.log...
阅读全文
摘要：main.jsdefine(function(require, exports, module) { var person = require("../test/test2.js"); var module3 = require("../test/test3.js"); var main = {} main.init = function(){ module3.init(); } module.exports = main;});test1.jsdefine(function(require, exports, module) { var object
阅读全文
摘要：Project Scaffolding 项目脚手架grunt-initGrunt-init 是一个用来生成项目的脚手架工具. 它将基于当前环境以及命令的问答结果创建完整的项目目录结构.实际生成的项目文件和内容依赖于所选择的模版以及问答结果.Installation 安装开始使用grunt-init之前，你需要全局安装grunt-initnpm install -g grunt-init安装好后就可以在任意目录使用grunt-init命令.Usage 使用使用grunt-init --help可以得到程序帮助以及可用的模版列表.使用grunt-init TEMPLATE可以基于指定的模版生成项目
阅读全文
摘要：Creating plugins 创建插件使用npm install -g grunt-init安装 grunt-init通过git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin安装gruntplugin模版在一个空目录中执行grunt-init gruntplugin在准备好的开发环境中执行npm install给你的plugin写上作者信息执行npm pbulish发布你的grunt plugin到npm中!Notes 注意Naming your task“grunt-
阅读全文
摘要：创建tasksTasks 是grunt最重要的组成部分.使用率最高,像jshint或nodeunit. 每次Grunt执行，你可以告诉Grunt指定的一个或者多个tasks会运行.如果你没有指定执行的task,但是有一个task的名字叫"default", 这个task会默认执行.Alias Task 任务别名新的task可以通过指定一个task列表来给一个或多个其他task做别名. 当这个"alias task"运行, 在taskList中指定的tasks将按顺序执行.taskList参数必须是包含tasks的数组.grunt.registerTask
阅读全文
摘要：配置tasks这份指南解释了在你的项目里怎么用Gruntfiile配置tasks。Grunt 配置task 配置通过grunt.initConfig 方法在Gruntfile中指定。配置主要是task-named 属性，但也会包含一些数据。grunt.initConfig({ concat: { // concat task configuration goes here. }, uglify: { // uglify task configuration goes here. }, // Arbitrary non-task-specific properties. ...
阅读全文
摘要：原文:http://gruntjs.com/getting-startedGetting startedGrunt 和 Grunt的插件都是通过npm来安装和管理滴。Grunt 0.4.x 要求 Nodejs>=0.8.0。安装CLI如果你以前全局安装过Grunt, 需要先卸载掉npm uninst...
阅读全文
摘要：Q：Grunt为何物？A：一个专为JavaScript提供的构建工具。Q：啥是构建工具？A：在项目部署上线前，通常要将源文件压缩，合并，并拷贝到bch或trunk中。 在将js模块化后，又多了一个分析，提取业务代码中所依赖模块的工作。 解决这一系列繁重工作的自动化工具，称之为构建工具。Q：grunt是如何工作的？A：刚刚接触grunt，举个例子可能不太恰当，但应该可以让你先比较准确的认识她。 就好像一个万能工厂（grunt），只负责执行任务（Task），不关心每个任务到底都干了什么。 这些任务比如：clean:删除临时文件uglify:压缩qunit:测试concat:合并1、建立 packa
阅读全文
摘要：前一篇记录了Grunt的安装，这篇介绍下怎么使用Gruntjs来搭建一个前端项目，然后使用grunt合并，压缩JS文件。大概有如下步骤新建项目Bejs新建文件package.json新建文件Gruntfile.js命令行执行grunt任务一、新建项目Bejs源码放在src下，该目录有两个js文件，selector.js和ajax.js。编译后代码放在dest，这个grunt会自动生成。二、新建package.jsonpackage.json放在根目录下，它包含了该项目的一些元信息，如项目名称、描述、版本号，依赖包等。它应该和源码一样被提交到svn或git。 现在的项目结构如下package.j
阅读全文
摘要：Gruntjs是JavaScript项目的构建工具，也是基于node的一个命令行工具。很多开源JS项目都是使用它搭建。如jQuery、Qunit、CanJS等。它有以下作用合并JS文件压缩JS文件单元测试（基于QUnit）一句话：完全自动化（automation）以下是它的安装过程。一、安装node参考nodejs入门（最新的node会自动安装npm）二、安装grunt命令行工具grunt-cli使用-g全局安装，这样可以在任何一个目录里使用了。命令:npm install -g grunt-cli需要注意的是在linux或mac下有时会报没有权限的错误，这时须在前面加一个sudo，安装后，可
阅读全文
摘要：Module 即模块，来看下RequireJS怎么定义 Module :1. 简单的名值对?// Inside file my/shirt.js:define({color: "black",size: "unisize"});2. 定义成一个Function?// my/shirt.js now does setup work// before returning its module definition.define(function () {// Do setup work herereturn {color: "black"
阅读全文
摘要：技术性细节§ 2RequireJS 把每一个依赖项当做一个script标签，使用 head.appendChild()来加载。RequireJS 会计算好依赖关系，按照正确的顺序依次加载所有依赖项。然后才调用模块的构造函数。在能同步加载模块的服务端JS中使用 RequireJS也很容易，只需要重定义require.load()。可以用构建系统来做这个，服务端的require.load 方法在build/jslib/requirePatch.js 中。未来，这个代码可能会被当作一个可选的模块放到 require/目录中。这样你就可以在基于主机环境来使用正确的加载模式。配置项§
阅读全文
摘要：用法§ 1加载 JavaScript 文件§ 1.1相比于传统的用<script>标签来加载js，RequireJS 采用了不同的方式。 它的目标是促进JS编程模块化。 虽然它也能优化我们JS程序的性能, 但是它的主要目的还是促进JS编程模块化。其中, 它鼓励使用module IDs来加载JS文件，而不是 用<script>标签直接引入JS文件的URLs的方式。RequireJS 基于baseUrl配置的地址来加载所有JS文件. baseUrl 默认被设置成通过data-main属性引入的脚本的相同目录. data-main 属性是require.j
阅读全文
摘要：shim参数解决了使用非AMD方式定义的模块（如jQuery插件）及其载入顺序。使用shim参数来取代1.0版本的order插件。其实在1.0版本中就曾经有人开发过use和wrap插件来解决此类问题。考虑到很多开发者有此类需求（比如某些JS模块是较早时候其他人开发的，非AMD方式）此次2.0版本直接将其内置其中。下面是一个使用jQuery插件形式配置的参数。我们知道jQuery插件本质上是将命名空间挂在全局的jQuery或jQuery.fn上而非使用define定义的模块。而jQuery插件都依赖于jQuery，即在require插件时得保证jQuery先下载下来。可以如下配置?123456r
阅读全文
摘要：这两个轻量级的库合起来使用确实能够方便的构建大型应用程序。RequireJS填补了前端模块化开发的空缺，Backbone采用MVC的分层结构很好的将程序各个部分解耦。Backbone目前不支持AMD（曾经支持过），那么它只能作为普通的JS文件使用。它全局的标示符是Backbone，它还依赖于underscore，underscore的全局标示是下划线（_）。因此，当我们使用AMD方式写的模块中使用Backbone时，得确保underscore和Backbone已经载入了。RequireJS 2.0后提供了一个shim参数很好的解决了该问题。示例目录js目录中有underscore.js，bac
阅读全文
摘要：进阶的前面两篇讲述了r.js如何通过命令行把所有的模块压缩为一个js文件或把所有的css压缩为一个css文件。其中包括一些压缩配置参数的使用。但以上两种方式有几个问题1、通过命令手动配置压缩选项显得很呆板2、都仅合并为一个文件对于最后只生成一个文件的库来说，这种方式并无不妥。比如jQuery，它的工程中小文件有20多个，打包后只有一个jquery-1.x.x.js。对于多数实际应用项目来说，可能打包后需要生成多个js文件。有些是页面打开时就要用到的，有些是用户点击或输入时按需加载的。r.js有另外一种方式来合并压缩，即通过一个配置文件（如build.js）。配置文件内部采用前端工程师非常熟悉J
阅读全文
