GithubHelp home page GithubHelp logo

f2er / in Goto Github PK

View Code? Open in Web Editor NEW

This project forked from paulguo/in

0.0 2.0 0.0 372 KB

一个轻量级的 JavaScript 颗粒化模块加载和依赖关系管理解决方案

Home Page: http://injs.org

in's Introduction

 _____       
|_   _|      
  | |  _ __  
  | | | '_ \ 
 _| |_| | | |
|_____|_| |_|  v0.2.0 build 110428120728

About the author

Guokai,1988-08-08
Beijing - Chaoyang
[Benben Blog](http://benben.cc/)

Overview the In.js

Author: Guokai
Email/Gtalk: [email protected]
Create Datetime: 2011-04-28
Last Update: 2012-07-28
Namespace: window.In
Description: this a light framework that can manage dependency of the modules,
most important,you can load them on-demand,asynchronous and multi-threaded...
License: Apache License,Version 2.0

Usage:


In.add('mod1',{path:'url',type:'js',charset:'utf-8',rely:['mod2','mod3']});
In.use('mod1','mod2','mod3',function() {});
In('mod1','mod2','mod3',function() {}); -> short for In.use()
In.ready('mod1','mod2','mod3',function() {});
In.later(3000,'mod1','mod2','mod3',function() {});
In.css(inline-css);
In.config(name,value);

Release:

Version: 0.2.0
Build: 110428120728

Examples:

1、import In.js to your webpage

例如:底层框架为jQuery 1.5.2-min.js,并引用in时自动加载。

<script type="text/javascript" src="in.js" autoload="true" core="jquery 1.5.2-min.js"></script>

2、In.add()

加载三个待执行的javascript模块,分别为mod1、mod2、mod3,其中mod2依赖于mod3.

<script type="text/javascript">
	In.add('mod1',{path:'mod1.js',type:'js',charset:'utf-8'});
	In.add('mod2',{path:'mod2.js',type:'js',charset:'utf-8',rely:['mod3']});
	In.add('mod3',{path:'mod3.js',type:'js',charset:'utf-8'});
</script>

3、In() or In.use()

旧版本队列内为顺序加载,如需向后兼容,请事先配置In.config('serial',true)更换为默认串行加载,新版本的队列默认为并行执行,队列中最后一个函数被视为回调函数,下面的代码会并行加载mod1,mod2,function,并立即执行,三者均加载完毕后执行回调函数。

<script type="text/javascript">
	//真正的加载顺序为 mod1 || mod2 || function -> function[callback]
	var demo=In('mod1','mod2',function() {
		console.log('我跟mod1和mod2是并行的关系');
	},function() {
		console.log('我是回调函数,他们都加载完毕才会触发我');
	});
</script>

4、In.ready()

domReady之后加载队列

<script type="text/javascript">
	In.ready('mod1','mod2',function() {
		console.log($);
	});
</script>

5、In.later()

延迟加载队列

<script type="text/javascript">
	//延迟3秒加载队列
	In.later(3000,'mod1','mod2',function() {
		console.log($);
	});
</script>

6、In.css()

动态注入CSS

<script type="text/javascript">
	In.css('body {background:yellow}');
</script>

7、In.config()

配置函数

<script type="text/javascript">
	//设置为串行加载模式,兼容旧的写法
	In.config('serial',true);
	//设置核心库,核心库会被所有模块依赖
	In.config('core','jquery 1.5.2-min.js');
</script>

in's People

Contributors

paulguo avatar

Watchers

情封 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.