Package.js  现代化的JavaScript项目make工具

Package.js项目地址:http://code.google.com/p/package-js/

Package.js是一个很方便的JavaScript包依赖管理及Make工具。它的设计目标是使浏览器端的JavaScript Component/App 开发更加模块化。如果您只是在开发一个小型的网站,只会混杂在HTML中写几行JS代码用于改善一下用户体验,那么Package.js也许并不适合您。如果您正在开发一个中到大型的WebApp,有几十甚至几百几千个JS文件和CSS文件、HTML模板文件,如果您正在为管理这些JS模块之间的依赖和加载而烦恼,为发布到生产环境时将JS文件合并打包而写Makefile写得头晕,那么,Package.js,这就是你想要的!赶快来了解并使用Package.js吧!

Package.js主要包含两个部分

运行在浏览器中的,用于define及import模块的JS库API
运行在node.js环境,将所有JS包及其依赖的CSS及HTML文件合并的make工具

Package.js浏览器端的API参照了CommonJS/AMD规范,兼容此规范的最简单形式,并在此基础扩展了一些语法,以便于开发包含CSS及HTML模板的JavaScript UI组件。

直接来看一下使用Package.js开发的项目的目录结构吧,简单明了:


代码如下:

Test
├── dom
│ └── Style.js #命名空间为Test.dom.Style的模块文件
├── init.js #根命名空间初始化文件
├── _nsconf_.js #Package.js会读取的配置文件
├── ui
│ ├── Button
│ │ ├── img
│ │ │ └── bg.png
│ │ ├── init.js #Test.ui.Button命名空间的模块文件
│ │ ├── style.css #UI组件的CSS文件
│ │ └── tpl.html #UI组件的HTML模板文件
│ └── Form
│ ├── init.js
│ ├── style.css
│ └── tpl.html
├── util
│ └── Cookie.js #命名空间为Test.util.Cookie的JS包
└── _xproxy_.html -> ../Package/_xproxy_.html #此文件为Soft Link指向Package.js源码中的Package/_xproxy_.html,用于跨域加载HTML模板文件

使用Package.js,模块的定义语法——
Root/ui/Button/init.js代码:


代码如下:

Package.define("Root.ui.Button",["Root.ui.Pane","Root.util.Tpl","Root.util.Event"],
function (Pane,Tpl,Event) {
//Pane为Root.ui.Pane
//Tpl对应Root.util.Tpl
//依此类推
//.....
});

与CommonJS的AMD规范不同,在Package.js的语法中,一个JS模块,不但可以依赖其它JS包,还可以依赖CSS及HTML模板文件、及其它的JSON数据文件,并在运行时,获取到依赖的其它文件的内容。定义语法如下:


代码如下:

Package.define("NS.ui.Button",["MT.ui.Component"],
{
tpl:"tpl.html",
_style:"style.css"
},function (Component) {
//通过this.assets.tpl访问tpl.html内容
var bgImgUrl=this.path+"img/bg.png",tpl=this.assets.tpl;
function Button(opt) {
//也可以通过当前Package对象的_pkgMeta_属性访问assets
this.tpl=String2Dom(opt.tpl || Button._pkgMeta_.assets.tpl);
}
return Button;
})

在浏览器中,可以使用下面的方法导入一个JS模块,
在导入的过程中,Package.js自动帮您做了后勤工作:1、加载这个模块的依赖模块。2、加载依赖的HTML及CSS文件。


代码如下:

Package.imports(["Root.ui.Button"],function (Button) {
var btn=new Button();
btn.renderTo(document.body);
});

在开发时,为了模块化,您需要将JS分成一个一个小的模块文件,但发布到生产环境时,为了加载速度上的考虑,您需要将这些JS文件合并成单个的JS文件并压缩,同样,CSS文件也要合并到一起。


代码如下:

//您的打包配置文件
//build-config.json文件内容
{
"staticUrls": {"defaults":"http://statics.iwt.macrotarget.com/jslibs/"},
"nsconfs":["http://www.cnblogs.com/statics/jslibs/XLib/_nsconf_.js"],
"includes":["XLib.apps.MainApp","XLib.ui.*"],
"compress":true //使用UglifyJS和UglifyCSS进行压缩
}

借助Package.js,完成这个功能,您只需要写三四行JSON配置代码,执行一个命令,就一切OK了。


代码如下:

#执行命令
build.js build-config.json js all.min.js
build.js build-config.json css all.min.css
#腰不酸了,腿不疼了!

引用

PS:build.js还帮您做掉一个小事:将CSS文件中的background:url()之类的相对路径转换成绝对URL。您在开发时,CSS中url()始终只需要写相对路径,在部署到生产环境时,build.js合并后的CSS会自动将其转换成绝对URL。甚至,如果你有使用IE6 Png AlphaImageLoader滤镜,使用wui4ie6的loader,您在开发时仍然可以在src=里写相对路径,在开发模式下,Package.js也会自动生成使用绝对URL的CSS Rule,在打包时也会对 AlphaImageLoader的src作转换,CSS中永远不需要写绝对URL

Package.js相比于其它模块加载器及AMD实现(RequireJS,SeaJS...)有什么优势或缺点?

Package.js是面向Web App Framework开发,定义语法及文件目录结构较严格(或者说稍显复杂),只使用AMD规范中最简单的一种define语法
Package.js将JS模块对CSS及HTML文件的依赖与对其它JS模块的依赖在define写法上区分开来,并且在build.js中也包含了对CSS、HTML、JSON打包的处理
(TOT)包含对IE6 CSS的特殊照顾(没办法,我们自己的项目需要)
增加PackageMeta,一个JS模块在运行时可以知道自己的URL
...如果算缺点的话:不与CommonJS AMD规范完全兼容
build时支持三种导出模式:includes,deps,all
开发模式下更方便:使用_xproxy_.html跨域加载,无需代理。使用_nsconf_.js,无需配置paths。

听完这些简单的介绍或许您对Package.js已经跃跃欲试了,在使用之前,您可以参考下 
Package.js的详细文档:http://package-js.googlecode.com/hg/docs/Package.html

好!不要再用落后的方式开发JavaScript App,不要再做Out Man,赶快使用Package.js吧 ^O^

(0)

相关推荐

  • JavaScript函数、闭包、原型、面向对象学习笔记

    断言 单元测试框架的核心是断言方法,通常叫assert(). 该方法通常接收一个值--需要断言的值,以及一个表示该断言目的的描述. 如果该值执行的结果为true,断言就会通过: 否则,断言就会被认为是失败的. 通常用一个相应的通过(pass)/ 失败(fail)标记记录相关的信息: function assert(value, desc) { let li = document.createElement('li'); li.className = value ? 'pass' : 'fail'

  • JavaScript使用indexOf()实现数组去重的方法分析

    本文实例讲述了JavaScript使用indexOf()实现数组去重的方法.分享给大家供大家参考,具体如下: 数组去重方法有多中,这里列举出自己认为比较容易理解的方法. 思路: 1. 创建一个新的空数组,用来存放去重后的新数组. 2. 利用for循环循环遍历需要去重的数组. 3. 利用indexOf()方法查询遍历出的数组在新数组中是否出现,如果出现:则继续遍历数组,如未出现:则利用push方法添加到新数组中. 4. 原数组循环遍历完成后,组建一个已经去除重复的新数组. <script> va

  • JavaScript实现JSON合并操作示例【递归深度合并】

    本文实例讲述了JavaScript实现JSON合并操作.分享给大家供大家参考,具体如下: 为什么我会想到写这几行代码 在实际工作中,我们会使用许多或自主开发或第三方的工具,有些工具的配置文件相当细节,使用频率低倒也罢了,使用频率高的话必然造成很多代码冗余.所以我都会对这些工具做二次封装,把不经常改动的配置给予默认值.如果需要改动,传入新的配置覆盖原来的配置即可. 起初我以为这是一项很简单的需求 var json1 = { // 固定的配置 a: 1, b: 2, c: 3, } var json

  • nodejs npm package.json中文文档

    简介 本文档有所有package.json中必要的配置.它必须是真正的json,而不是js对象. 本文档中描述的很多行为都受npm-config(7)的影响. 默认值 npm会根据包内容设置一些默认值. 复制代码 代码如下: "scripts": {"start": "node server.js"} 如果包的根目录有server.js文件,npm会默认将start命令设置为node server.js. "scripts":

  • Reactnative-iOS回调Javascript的方法

    Reactnative可以调用原生模块,原生模块也可以给JavaScript发送事件通知.最好的方法是继承RCTEventEmitter.自定义继承自PushEventEmitter的子类RCTEventEmitter. #import <Foundation/Foundation.h> #import <React/RCTBridgeModule.h> #import <React/RCTEventEmitter.h> @interface PushEventEmit

  • 详解Nodejs之npm&package.json

    一直以来,作为前端开发,在公司都是先写好页面,然后再跟后端合作,将数据填入前端页面中,但是偶尔自己闲来无事,也会看一些框架什么的,然后利用框架做个单页面应用啊,app什么的,这时候页面的数据总是一些假数据,而关于数据请求的部分就没办法做(因为没有后台嘛).所以我感觉是时候学习一下node了,这对于我以后要学的webpack,前端工程化等也有一定帮助. 作为前端,因为经常用到gulp,webpack等工具,所以我们最常见到的是npm和package.json,所以先总结一下它们俩. npm 初始化

  • package.json文件配置详解

    package.json 是npm init命令初始化后,在项目的根目录下自动生成的配置文件,它定义了这个项目的配置信息以及所需要的各种模块,npm install根据这个命令,自动下载所需的模块.package.json就是一个json文件,json本身只是一种数据格式,它本身并不支持注释,此处的注释只是为了更加方便的理解package.json的各个字段 { //项目名称 "name": "demo", //version是版本(遵守"大版本.次要版本

  • 详解vue-cli 脚手架项目-package.json

    使用vue-cli脚手架新建的项目中,含有package.json. package.json是npm的配置文件,里面设定了脚本以及项目依赖的库. npm run dev 这样的命令就写在package.json里. { "name": "vue-manage", // 项目名称 "version": "1.0.0", // 版本 "description": "Reimbursement Man

  • JavaScript读写二进制数据的方法详解

    前言 二进制是计算技术中广泛采用的一种数制.二进制数据是用0和1两个数码来表示的数,如果想要在前端中处理音频和视频.那你必须要对二进制数据有很好地掌握和操作能力.下面话不多说了,来一起看看详细介绍的吧 类型化数组的出现 类型化数组是 HTML5 中引入的API,它能够让开发者使用 JavaScript 直接操作二进制数据.在类型化数组出现之前,我们是无法直接通过 JavaScript 操作二进制数据,通常都是操作 JavaScript 中的数据类型,由运行时转化成二进制.这就多了一个转化的过程,

  • JavaScript日期工具类DateUtils定义与用法示例

    本文实例讲述了JavaScript日期工具类DateUtils定义与用法.分享给大家供大家参考,具体如下: DateUtils = { patterns: { PATTERN_ERA: 'G', //Era 标志符 Era strings. For example: "AD" and "BC" PATTERN_YEAR: 'y', //年 PATTERN_MONTH: 'M', //月份 PATTERN_DAY_OF_MONTH: 'd', //月份的天数 PATT

  • JavaScript实现简单的隐藏式侧边栏功能示例

    本文实例讲述了JavaScript实现简单的隐藏式侧边栏功能.分享给大家供大家参考,具体如下: 常见的隐藏式侧边栏,如分享.联系客服等.通过设置速度来实现滑入滑出的动态效果 以下是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net js侧边栏</title> <style type="text/c

  • Javascript 之封装(Package)

    一. 构造函数(Constructor)模式的封装 为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式. 所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量.对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上. 举个例子,下面生成的是狗的原型对象: function Dog(name,color,species){ this.name = name; this.color = color; t

随机推荐