优大网

标签存档: JavaScript

Javascript 匿名函数与封装

迷惑了一会儿不同JS库的封装后,终于有了点头绪。大致就是:

创建一个自调用匿名函数,设计参数window,并传入window对象。

而这个过和的目的则是,

使得自身的代码不会被其他代码污染,同时也可以不污染其他代码。

jQuery 封装

于是找了个早期版本的jQuery,版本号是1.7.1里面的封装代码大致是下面这样的

(function( window, undefined ) {
var jQuery = (function() {console.log('hello');});
window.jQuery = window.$ = jQuery;
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    define( "jquery", [], function () { return jQuery; } );
}
})( window );

其中的

console.log('hello');

是用以验证是否按开头说的这样工作,于是我们就可以在window中调用jQuery

window.$

或者是

window.jQuery

于是我们就可以创建一个类似的封装

(function(window, undefined) {
    var PH = function() {

    }
})(window)

相比于上面只是少了两步

  • 定义jQuery的符号及全局调用
  • 异步支持

于是找了下更早期的jQuery的封装,方法上大致是一样的, 除了。。

if (typeof window.jQuery == "undefined") {
    var jQuery = function() {};
    if (typeof $ != "undefined")
        jQuery._$ = $;

    var $ = jQuery;
};

很神奇的判断方法,以致于我们没有办法重写上一步的jQuery。于是只好看看最新的jQuery的封装是怎样的。于是就打开了2.1.1,发现除了加了很多功能以外,基本上思想还是不变的

(function(global, factory) {

    if (typeof module === "object" && typeof module.exports === "object") {
        module.exports = global.document ?
            factory(global, true) :
            function(w) {
                if (!w.document) {
                    throw new Error("jQuery requires a window with a document");
                }
                return factory(w);
        };
    } else {
        factory(global);
    }

}(typeof window !== "undefined" ? window : this, function(window, noGlobal) {
    var jQuery = function() {
        console.log('jQuery');
    };
    if (typeof define === "function" && define.amd) {
        define("jquery", [], function() {
            return jQuery;
        });
    };
    strundefined = typeof undefined;
    if (typeof noGlobal === strundefined) {
        window.jQuery = window.$ = jQuery;
    };
    return jQuery;
}));

在使用浏览器的情况下

typeof module ="undefined"

所以上面的情况是针对于使用Node.js等的情况下判断的,这也表明jQuery正在变得臃肿。

Backbone 封装

打开了Backbone看了一下

(function(root, factory) {

    if (typeof define === 'function' && define.amd) {
        define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
            root.Backbone = factory(root, exports, _, $);
        });

    } else if (typeof exports !== 'undefined') {
        var _ = require('underscore');
        factory(root, exports, _);

    } else {
        root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$));
    }

}(this, function(root, Backbone, _, $) {
    Backbone.$ = $;
    return Backbone;

}));

除了异步支持,也体现了其对于jQuery和underscore的依赖,百

        define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
            root.Backbone = factory(root, exports, _, $);
        });

表明backbone是原生支持requirejs的。

Underscore 封装

于是,又看了看Underscore,发现这个库又占领了一个符号 _

(function() {
    var root = this;
    var _ = function(obj) {
        if (obj instanceof _) return obj;
        if (!(this instanceof _)) return new _(obj);
        this._wrapped = obj;
    };

    if (typeof exports !== 'undefined') {
        if (typeof module !== 'undefined' && module.exports) {
            exports = module.exports = _;
        }
        exports._ = _;
    } else {
        root._ = _;
    }

    if (typeof define === 'function' && define.amd) {
        define('underscore', [], function() {
            return _;
        });
    }
}.call(this));

总体上也和差不多都是匿名函数,除了最后用的是call()方法。

http://www.phodal.com/blog/javascript-anonymous-function-encapsulation/

超实用的JavaScript技巧及最佳实践(上)

http://www.csdn.net/article/2013-12-27/2817938-45-Useful-JavaScript-Tips

摘要:JavaScript是一门非常流行的编程语言,许多开发者都会把JavaScript选为入门语言,本文向大家分享JavaScript开发的小技巧、最佳实践等非常实用的内容。

众所周知,JavaScript是一门非常流行的编程语言,开发者用它不仅可以开发出炫丽的Web程序,还可以用它来开发一些移动应用程序(如PhoneGap或Appcelerator),它还有一些服务端实现,比如NodeJS、Wakanda以及其它实现。此外,许多开发者都会把JavaScript选为入门语言,使用它来做一些弹出窗口等小东西。

在这篇文章中,作者将会向大家分享JavaScript开发的小技巧、最佳实践等非常实用的内容,不管你是前端开发者还是服务端开发者,都应该来看看这些小技巧,它们绝对会让你受益的。

文中所提供的代码片段都已经过最新版的Chrome 30测试,该浏览器使用V8 JavaScript引擎(V8 3.20.17.15)。

1.第一次给变量赋值时,别忘记var关键字

给一个未声明的变量赋值,该变量会被自动创建为全局变量,在JS开发中,应该避免使用全局变量。

2.使用===替换==

并且永远不要使用=或!=。

 

  1. [10] === 10    // is false
  2. [10]  == 10    // is true
  3. ’10’ == 10     // is true
  4. ’10’ === 10    // is false
  5.  []   == 0     // is true
  6.  [] ===  0     // is false
  7.  ” == false   // is true but true == “a” is false
  8.  ” ===   false // is false

3.使用分号来作为行终止字符

在行终止的地方使用分号是一个很好的习惯,即使开发人员忘记加分号,编译器也不会有任何提示,因为在大多数情况下,JavaScript解析器会自动加上。

4.创建构造函数

 

  1. function Person(firstName, lastName){
  2.     this.firstName =  firstName;
  3.     this.lastName = lastName;
  4. }
  5. var Saad = new Person(“Saad”, “Mousliki”);

5.应当小心使用typeof、instanceof和constructor

 

  1. var arr = [“a”, “b”, “c”];
  2. typeof arr;   // return “object”
  3. arr  instanceof Array // true
  4. arr.constructor();  //[]

6.创建一个Self-calling函数

这通常会被称为自我调用的匿名函数或立即调用函数表达式(LLFE)。当函数被创建的时候就会自动执行,好比下面这个:

 

  1. (function(){
  2.     // some private code that will be executed automatically
  3. })();
  4. (function(a,b){
  5.     var result = a+b;
  6.     return result;
  7. })(10,20)

7.给数组创建一个随机项

  1. var items = [12, 548 , ‘a’ , 2 , 5478 , ‘foo’ , 8852, , ‘Doe’ , 2145 , 119];
  2. var  randomItem = items[Math.floor(Math.random() * items.length)];

8.在特定范围里获得一个随机数

下面这段代码非常通用,当你需要生成一个假的数据用来测试时,比如在最低工资和最高之前获取一个随机值。

 

  1. var x = Math.floor(Math.random() * (max – min + 1)) + min;

9.在数字0和最大数之间生成一组随机数

  1. var numbersArray = [] , max = 100;
  2. for( var i=1; numbersArray.push(i++) < max;);  // numbers = [0,1,2,3 … 100]

10.生成一组随机的字母数字字符

 

  1. function generateRandomAlphaNum(len) {
  2.     var rdmstring = “”;
  3.     for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
  4.     return  rdmString.substr(0, len);
  5. }

11.打乱数字数组

 

  1. var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
  2. numbers = numbers.sort(function(){ return Math.random() – 0.5});
  3. /* the array numbers will be equal for example to [120, 5, 228, -215, 400, 458, -85411, 122205]  */

12.字符串tim函数

trim函数可以删除字符串两端的空白字符,可以用在Java、C#、PHP等多门语言里。

 

 

  1. String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, “”);};

13.数组追加

 

  1. var array1 = [12 , “foo” , {name “Joe”} , -2458];
  2. var array2 = [“Doe” , 555 , 100];
  3. Array.prototype.push.apply(array1, array2);
  4. /* array1 will be equal to  [12 , “foo” , {name “Joe”} , -2458 , “Doe” , 555 , 100] */

14.将参数对象转换为数组 
 

  1. var argArray = Array.prototype.slice.call(arguments);

15.验证一个给定参数是否为数字

 

 

 

 

 

  1. function isNumber(n){
  2.     return !isNaN(parseFloat(n)) && isFinite(n);
  3. }

16.验证一个给定的参数为数组

 

  1. function isArray(obj){
  2.     return Object.prototype.toString.call(obj) === ‘[object Array]’ ;
  3. }

注意,如果toString()方法被重写了,你将不会得到预期结果。

 

或者你可以这样写:

 

  1. Array.isArray(obj); // its a new Array method

同样,如果你使用多个frames,你可以使用instancesof,如果内容太多,结果同样会出错。
 

  1. var myFrame = document.createElement(‘iframe’);
  2. document.body.appendChild(myFrame);
  3. var myArray = window.frames[window.frames.length-1].Array;
  4. var arr = new myArray(a,b,10); // [a,b,10]
  5. // instanceof will not work correctly, myArray loses his constructor
  6. // constructor is not shared between frames
  7. arr instanceof Array; // false

 

17.从数字数组中获得最大值和最小值

 

  1. var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
  2. var maxInNumbers = Math.max.apply(Math, numbers);
  3. var minInNumbers = Math.min.apply(Math, numbers);

18.清空数组

 

  1. var myArray = [12 , 222 , 1000 ];
  2. myArray.length = 0; // myArray will be equal to [].

19.不要用delete从数组中删除项目

开发者可以使用split来代替使用delete来删除数组项。与其删除数组中未定义项目,还不如使用delete来替代。

 

  1. var items = [12, 548 ,’a’ , 2 , 5478 , ‘foo’ , 8852, , ‘Doe’ ,2154 , 119 ];
  2. items.length; // return 11
  3. delete items[3]; // return true
  4. items.length; // return 11
  5. /* items will be equal to [12, 548, “a”, undefined × 1, 5478, “foo”, 8852, undefined × 1, “Doe”, 2154,       119]   */

也可以……

 

  1. var items = [12, 548 ,’a’ , 2 , 5478 , ‘foo’ , 8852, , ‘Doe’ ,2154 , 119 ];
  2. items.length; // return 11
  3. items.splice(3,1) ;
  4. items.length; // return 10
  5. /* items will be equal to [12, 548, “a”, 5478, “foo”, 8852, undefined × 1, “Doe”, 2154,       119]   */

delete方法应该删除一个对象属性。

 
20.使用length属性缩短数组

如上文提到的清空数组,开发者还可以使用length属性缩短数组。

 

  1. var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];
  2. myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124].

如果你所定义的数组长度值过高,那么数组的长度将会改变,并且会填充一些未定义的值到数组里,数组的length属性不是只读的。
 

  1. myArray.length = 10; // the new array length is 10
  2. myArray[myArray.length – 1] ; // undefined

 

来自: flippinawesome

超实用的JavaScript技巧及最佳实践(下)

http://www.csdn.net/article/2014-01-06/2818025-Useful-JavaScript-Tips-Best-Practices

摘要:JavaScript是一门非常流行的编程语言,许多开发者都会把JavaScript选为入门语言,本文向大家分享JavaScript开发的小技巧、最佳实践等非常实用的内容。

在前段时间,CSDN研发频道发表了超实用的JavaScript技巧及最佳实践(上),很多开发者都觉得里面所提到的技巧非常实用,基于此,我们再向大家推荐超实用的JavaScript技巧及最佳实践(下),希望对大家有所帮助。

文中所提供的代码片段都已经过最新版的Chrome 30测试,该浏览器使用V8 JavaScript引擎(V8 3.20.17.15)。

1.使用逻辑符号&&或者||进行条件判断

 

  1. var foo = 10;
  2. foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething();
  3. foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();

||也可以用来设置函数参数的默认值

  1. Function doSomething(arg1){
  2.     Arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
  3. }

2.使用map()方法来遍历数组 

 

  1. var squares = [1,2,3,4].map(function (val) {
  2.     return val * val;
  3. });
  4. // squares will be equal to [1, 4, 9, 16]

3.舍入小数位数 

 

  1. var num =2.443242342;
  2. num = num.toFixed(4);  // num will be equal to 2.4432

4.浮点数问题 

 

  1. 0.1 + 0.2 === 0.3 // is false
  2. 9007199254740992 + 1 // is equal to 9007199254740992
  3. 9007199254740992 + 2 // is equal to 9007199254740994

0.1+0.2等于0.30000000000000004,为什么会发生这种情况?根据IEEE754标准,你需要知道的是所有JavaScript数字在64位二进制内的都表示浮点数。开发者可以使用toFixed()和toPrecision()方法来解决这个问题。

5.使用for-in loop检查遍历对象属性 

下面这段代码主要是为了避免遍历对象属性。

 

  1. for (var name in object) {
  2.     if (object.hasOwnProperty(name)) {
  3.         // do something with name
  4.     }
  5. }

6.逗号操作符 

 

  1. var a = 0;
  2. var b = ( a++, 99 );
  3. console.log(a);  // a will be equal to 1
  4. console.log(b);  // b is equal to 99

7.计算或查询缓存变量 

在使用jQuery选择器的情况下,开发者可以缓存DOM元素

 

  1. var navright = document.querySelector(‘#right’);
  2. var navleft = document.querySelector(‘#left’);
  3. var navup = document.querySelector(‘#up’);
  4. var navdown = document.querySelector(‘#down’);

8.在将参数传递到isFinite()之前进行验证 

 

  1. isFinite(0/0) ; // false
  2. isFinite(“foo”); // false
  3. isFinite(“10”); // true
  4. isFinite(10);   // true
  5. isFinite(undifined);  // false
  6. isFinite();   // false
  7. isFinite(null);  // true  !!!

9.在数组中避免负向索引 

 

  1. var numbersArray = [1,2,3,4,5];
  2. var from = numbersArray.indexOf(“foo”) ;  // from is equal to -1
  3. numbersArray.splice(from,2);    // will return [5]

确保参数传递到indexOf()方法里是非负向的。

10.(使用JSON)序列化和反序列化 

 

  1. var person = {name :’Saad’, age : 26, department : {ID : 15, name : “R&D”} };
  2. var stringFromPerson = JSON.stringify(person);
  3. /* stringFromPerson is equal to “{“name”:”Saad”,”age”:26,”department”:{“ID”:15,”name”:”R&D”}}”   */
  4. var personFromString = JSON.parse(stringFromPerson);
  5. /* personFromString is equal to person object  */

11.避免使用eval()或Function构造函数 

eval()和Function构造函数被称为脚本引擎,每次执行它们的时候都必须把源码转换成可执行的代码,这是非常昂贵的操作。

 

  1. var func1 = new Function(functionCode);
  2. var func2 = eval(functionCode);

12.避免使用with()方法 

如果在全局区域里使用with()插入变量,那么,万一有一个变量名字和它名字一样,就很容易混淆和重写。

13.避免在数组里使用for-in loop

而不是这样用:

 

  1. var sum = 0;
  2. for (var i in arrayNumbers) {
  3.     sum += arrayNumbers[i];
  4. }

这样会更好: 

 

  1. var sum = 0;
  2. for (var i = 0, len = arrayNumbers.length; i < len; i++) {
  3.     sum += arrayNumbers[i];
  4. }

因为i和len是循环中的第一个语句,所以每次实例化都会执行一次,这样执行起来就会比下面这个更快:

 

 

  1. for (var i = 0; i < arrayNumbers.length; i++)

为什么?数组长度arraynNumbers在每次loop迭代时都会被重新计算。 

14.不要向setTimeout()和setInterval()方法里传递字符串

如果在这两个方法里传递字符串,那么字符串会像eval那样重新计算,这样速度就会变慢,而不是这样使用:

 

  1. setInterval(‘doSomethingPeriodically()’, 1000);
  2. setTimeOut(‘doSomethingAfterFiveSeconds()’, 5000);

相反,应该这样用: 

 

  1. setInterval(doSomethingPeriodically, 1000);
  2. setTimeOut(doSomethingAfterFiveSeconds, 5000);

15.使用switch/case语句代替较长的if/else语句 

 

如果有超过2个以上的case,那么使用switch/case速度会快很多,而且代码看起来更加优雅。

16.遇到数值范围时,可以选用switch/casne 

 

  1. function getCategory(age) {
  2.     var category = “”;
  3.     switch (true) {
  4.         case isNaN(age):
  5.             category = “not an age”;
  6.             break;
  7.         case (age >= 50):
  8.             category = “Old”;
  9.             break;
  10.         case (age <= 20):
  11.             category = “Baby”;
  12.             break;
  13.         default:
  14.             category = “Young”;
  15.             break;
  16.     };
  17.     return category;
  18. }
  19. getCategory(5);  // will return “Baby”

17.创建一个对象,该对象的属性是一个给定的对象 

可以编写一个这样的函数,创建一个对象,该对象属性是一个给定的对象,好比这样:

 

  1. function clone(object) {
  2.     function OneShotConstructor(){};
  3.     OneShotConstructor.prototype= object;
  4.     return new OneShotConstructor();
  5. }
  6. clone(Array).prototype ;  // []

18.一个HTML escaper函数 

 

  1. function escapeHTML(text) {
  2.     var replacements= {“<“: “<“, “>”: “>”,”&”: “&”, “\””: “””};
  3.     return text.replace(/[<>&”]/g, function(character) {
  4.         return replacements[character];
  5.     });
  6. }

19.在一个loop里避免使用try-catch-finally 

try-catch-finally在当前范围里运行时会创建一个新的变量,在执行catch时,捕获异常对象会赋值给变量。

不要这样使用:

 

  1. var object = [‘foo’, ‘bar’], i;
  2. for (i = 0, len = object.length; i <len; i++) {
  3.     try {
  4.         // do something that throws an exception
  5.     }
  6.     catch (e) {
  7.         // handle exception
  8.     }
  9. }

应该这样使用: 

 

  1. var object = [‘foo’, ‘bar’], i;
  2. try {
  3.     for (i = 0, len = object.length; i <len; i++) {
  4.         // do something that throws an exception
  5.     }
  6. }
  7. catch (e) {
  8.     // handle exception
  9. }

20.给XMLHttpRequests设置timeouts  

如果一个XHR需要花费太长时间,你可以终止链接(例如网络问题),通过给XHR使用setTimeout()解决。

 

  1. var xhr = new XMLHttpRequest ();
  2. xhr.onreadystatechange = function () {
  3.     if (this.readyState == 4) {
  4.         clearTimeout(timeout);
  5.         // do something with response data
  6.     }
  7. }
  8. var timeout = setTimeout( function () {
  9.     xhr.abort(); // call error callback
  10. }, 60*1000 /* timeout after a minute */ );
  11. xhr.open(‘GET’, url, true);
  12. xhr.send();

此外,通常你应该完全避免同步Ajax调用。 

21.处理WebSocket超时

一般来说,当创建一个WebSocket链接时,服务器可能在闲置30秒后链接超时,在闲置一段时间后,防火墙也可能会链接超时。

为了解决这种超时问题,你可以定期地向服务器发送空信息,在代码里添加两个函数:一个函数用来保持链接一直是活的,另一个用来取消链接是活的,使用这种方法,你将控制超时问题。

添加一个timeID……

 

  1. var timerID = 0;
  2. function keepAlive() {
  3.     var timeout = 15000;
  4.     if (webSocket.readyState == webSocket.OPEN) {
  5.         webSocket.send(”);
  6.     }
  7.     timerId = setTimeout(keepAlive, timeout);
  8. }
  9. function cancelKeepAlive() {
  10.     if (timerId) {
  11.         cancelTimeout(timerId);
  12.     }
  13. }

keepAlive()方法应该添加在WebSocket链接方法onOpen()的末端,cancelKeepAlive()方法放在onClose()方法下面。
 

22.记住,最原始的操作要比函数调用快

对于简单的任务,最好使用基本操作方式来实现,而不是使用函数调用实现。

例如

 

  1. var min = Math.min(a,b);
  2. A.push(v);

基本操作方式: 

 

  1. var min = a < b ? a b;
  2. A[A.length] = v;

23.编码时注意代码的美观、可读 

JavaScript是一门非常好的语言,尤其对于前端工程师来说,JavaScript也非常重要,点击 这里可以访问更多优秀的JavaScript资源。

来自: flippinawesome.org

几道容易出错的JavaScript题目

下面这几道JavaScript题目大多来自于周五的一个小分享。都是很小的题目,但是很容易犯错。有一些是语言特性使然,有一些则是语言本身没有设计好而留下的陷阱。结果就是,遇到的人很容易陷进去骂娘,这些东西是略有些反直觉,感兴趣的不妨看看,平时我们还是尽量少些这样似是而非的代码。

1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Container( properties ) {
    var objthis = this;
    for ( var i in properties ) {
        (function(){
                var t = properties[i];
                objthis[ "get" + i ] = function() {return t;};
                objthis[ "set" + i ] = function(val) {t = val;};
        })();
    }
}
var prop = {Name : "Jim", Age : 13};
var con = new Container(prop);
console.log(con.getName());
con.setName("Lucy");
console.log(con.getName());
console.log(prop.Name);

这段代码会输出什么?前面两行分别是“Jim”和“Lucy”,这不会有问题;但是第三行应该输出的是“Jim”,但是有的人会误认为prop对象已被修改,故输出“Lucy”。其实在匿名函数中,properties[i]的值已经赋给了临时变量t,之后闭包对于外部变量的引用完全由t这个媒介来完成,因此prop传入以后并未发生任何属性的更改。

2.

1
2
3
4
5
function a (x) {
    return x * 2;
}
var a;
console.log(a);

这段代码中,其实var a并没有任何影响,输出的是a(x)这样的方法签名。

3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
c = 999;
var c = 888;
console.log(this.c); //①
function b (x, y, c) {
    c = 6;
    arguments[2] = 10;
    console.log(c); //②
    console.log(this.c); //③
    
    var c = 6;
    console.log(c); //④
    console.log(this.c); //⑤
}
b(1, 2, 3, 4);

这道题是比较变态的。

  • 第①处,this指的是window,在window下,c、this.c、var c在这里指的是同一个东西,看透这一点就好办了。打印的是888。
  • 第②处,方法体中,参数c和arguments[2]指的是同一个地址,所以把后者赋为10的时候,打印的是10,不是6。
  • 第③处,this指的是window,打印的是888。
  • 第④处,打印的是6。
  • 第⑤处,打印的是888。

4.

1
2
3
4
5
6
7
8
9
var start = new Date();
setTimeout(
    function(){
        var end = new Date();
        console.log(end - start);
    },
    1000
);
while(new Date() - start < 2000);

JavaScript因为是单线程工作的,因此虽然回调函数设置了1000毫秒后执行,事实上在1000毫秒的时候根本得不到执行,等待到while循环执行完毕后(因此已经是2000毫秒以后了),才去执行,因此输出应该是一个大于2000的数字。

5.

1
2
3
(function(){
    console.log(typeof arguments);
})();

很多人会说打印的是array,其实,typeof根本不会打印array的啊,打印的是object。

6.

1
2
function a(){return a;}
console.log(new a() instanceof a);

应该打印的是false,其实原因很简单,new a()的时候,因为return语句,得到的不是a的实例,而是a本身,a instanceof a当然是false啦。

最后,还有一个小题目是关于Function Invocation Pattern的,我在这篇文章里有写到,就不单独贴出来了。

文章系本人原创,转载请保持完整性并注明出自《四火的唠叨》

http://www.raychase.net/1485

用来简化开发任务的20个JavaScript类库

摘要:所谓JS库就是预先写好的JS程序库,用于简化以JS为基础的开发程序,尤其是对AJAX和其他以Web为中心技术的JS代码集。文章搜集了20个JS库,帮你处理与开发相关的问题,让你的网站在竞争中领先一步。

所谓JS库就是预先写好的JS程序库,用于简化以JS为基础的开发程序,尤其是对AJAX和其他以Web为中心技术的JS代码集。JS的首要用途是将编写的功能内嵌在HTML页面,并与页面的对象模型(DOM)进行互动。

很多JS库很容易和其他Web开发技术进行整合,例如CSS、 PHP、Ruby、和Java。许多程序库可以检测运行环境之间的差异,删除一些应用程序,以满足整合需求。文章搜集了20个JS库,帮你处理与开发相关的问题,让你的网站在竞争中领先一步。

1. Tracking.js

Tracking.js是一个独立的JS库,可以跟踪照相机实时收到的数据。跟踪对象既可以是色彩也可以是人物,当检测到某个特定的颜色时或人物/脸庞/身体出现移动的时候,我们可以触发JS事件。

2. Aristochart

Aristochart是一个不依赖于其它库的JS库,它能够使用Canvas创建静态的2D线形图表。这个库专注于打造客户化设计,提供多种选项用于更改设计、标签等等。

3. Hitch

Hitch是一个轻量级的JS库,能够向CSS文件添加表现能力。同时具备CSS预处理程序能力,比如添加前缀或变量,还有一些其他的功能。这个程序库有多个随时可用的表达方式,如“any of,all of,has…”,并允许我们定义任何一种方式(称为hitches)。

4. Cesium

Cesium是基于WebGL的JS绘图库,支持3种不同的视图:3D globe、2D map、2.5D Columbus View,相互转换只要一行代码而已!绘画各种形状,突出显示特定区域以及使用鼠标或触摸板与地图进行互动是非常简单的。Cesium作为一个独立的JS文件可以在所有主流浏览器上运行,包括手机上。

5. Two.js

它是一个2D的绘图API,一个优秀的JS库,用于较新的Web浏览器,可基于不同上下文绘制,包括svg、canvas和webgl。 这个库目前只支持形状(非文本或图片),允许导入SVG数据。当需要一起转变的时候,Two.js可以聚合多个有用的元素。其中还有一个内置动画循环方法来绘制各种图形,还具有使之个性化的多个选项。

6. Sequel.js

Sequel.js是一个轻量级JS库,有助于通过一个面向对象的API来构建SQL查询字符串,既可以在浏览器上运行,也可以在所有标准的SQL查询上运行。

7. Draggabilly

这是一个可以让页面元素可拖动的独立JS库,Draggabilly能够帮你轻松实现网页上各种元素的拖放操作。可以在一个限制的容器范围内拖动页面元素,对于每一个事件(start,move,end)都有回调,可以返回当前元素的位置。它可用于大部分浏览器(IE8+)并内置支持触摸事件。

8. Zebra

此JS库带有一串富用户界面组件,可以创建类似于桌面效果布局。UI元素由HTML5 canvas构建,由CSS着色,预期在所有浏览器中渲染出相同的效果。拥有30多个UI元素,包括grid、tabs、menu、form elements、menu等等。

9. Formula.js

这个JS库为Web开发者带来了大多数公式,公式列举了多重分类——日期/时间,文本,逻辑,金融等等。此外,除了在客户端运行,还在服务端(即将发布)上运行。

10. Chart.js

这是一个给人印象深刻的JS独立图表库,大小不足5kb的程序包,建立在HTML5 canvas之上。目前支持6种图表类型:直线图、条形图、雷达图、饼状图、柱状图和地区区域图。颜色、字体、边框、大小都可以根据用户需求自定义。

11. Flippant.js

这是一个迷你JS和CSS库,允许自动翻转桌面上的东西。不依赖任何其它类库,便于自定义,翻转功能效果好。

12. React

React是一个用来构建用户界面的JS库,可以高效灵活地与你之前使用的类库和框架结合使用。

13. PathFinding.js

PathFinding.js是JS里一个综合路径寻找类库,其目的是提供一个可以方便结合到网络游戏里的路径寻找类库。它可以在服务端运行,也可以在浏览器上运行。提供在线演示算法是怎样执行的。当具体使用路径寻找器时,你可以通过其它的参数来指示该用哪一个策略。

14. Reactor.js

这是一个用于响应式编程的轻量级类库。它提供的反应变量,当它们所依赖的的事物发生改变的时候可以实现自动更新。这和电子数据表的运作方式有点相似,当一个单元格的数值有所变化的时候,与其有联系的其他单元格数值也会变化。

15. Bootbox.js

Bootbox.js是一个很小的JS库,允许使用Twitter的Bootstrap模式创建程序对话窗口,不需要担心创建、管理或删除任何任何需要的DOM元素或JS事件处理程序。

16. Parallel.js

Parallel.js在JS里是一个用于多核处理的微型库,它的创建充分发挥了成熟的Web-workers API,JS的确是很快,但由于它的单线程计算模式,它缺乏了与其对等语言的平行计算功能。

17. SVG.js

SVG.js可以通过SVG进行操作和手动绘画,此库轻便独立,功能丰富,有内置方法可以创建各种形状——三角形、圆形、多边形,或自定义图形。

18. Packery

这是一个使用“装箱算法”的JS布局库,这是“补漏”的体面说法。Packery的布局可以是井然有序的,也可以是错乱无序的。元素可以被固定在相应的位置,也可以随意拖放。

19. FPS Meter

FPS Meter是一个简单的JS库,用来制作迷人的、快速的、可主题化的FPS仪表。他可以测量出每秒的帧数,帧之间的毫秒数,以及使用.tickStart()方法时,渲染一帧所需要的毫秒数。

20. Howler.js

Howler.js一个是JS库,通过默认方式运行在网页音频API上,当浏览器不支持时退回到HTML5音频。为了保证跨浏览器的兼容性,它允许接收多种文件格式。该库能同时缓存和播放多个声音,还有循环播放功能,淡入淡出效果和标准的多媒体控制功能。

原文:CodeGeekz

 

http://www.csdn.net/article/2013-07-09/2816111-javascript-libraries

超棒的30款JS类库和工具

摘要:对于Web设计人员和开发人员来说,手里有一套便利的、最新的工具可供使用是极其重要的。Web设计和开发的趋势变化极快,所以拥有最新的工具是必不可少的。因此小编今天为大家整理了30个JS类库和工具以供参考。

当设计人员和开发人员真正快速便捷的使用JavaScript类库和工具的同时,他们的生活也就变得更轻松、简单。你付出的越多,它回报你的也就越多,这正是JS类库和工具需求量很大的原因。

对于Web设计人员和开发人员来说,手里有一套便利的、最新的工具可供使用是极其重要的。Web设计和开发的趋势变化极快,所以拥有最新的工具是必不可少的。

可是要想找到质量高和效率高的工具并非易事,尤其是考虑到这种类型的工具它所带有的额外工具的可用性,并且,不是所有的工具都是高质量的。因此,寻找好的工具不仅仅是一项艰巨的任务,同时也很耗时。这就是为什么小编今天为大家提供30个JS类库和工具列表的原因。所有的工具都很有用,找出最能够满足你需要的那一个!

dynamo.js

这是一款使用很便捷的工具,它可以快速容易的创建HTML动态bits,为文本目录添加微妙效果。

Smoke.js

Smoke.js是一个轻量级且灵活的JS插件,只是用来替代原有的alert而已。它完全由HTML与CSS3构成,所以你能够自己添加样式来表现出个性化。

Holder.js

Holder.js可直接在客户端渲染图片的占位。支持在线和离线,允许轻松创建占位符,并快速使用可链接API(chainable API)风格。

Graphene

这款工具有惊人之处,有一个控制面板和绘图工具箱,使用起来很容易上手。

GMap

这是一款了不起的轻量级jQuery插件,用来将Google Maps插入到网页或者博客中。提供了更加简便的方法用于集成、管理和定制。

jPages

jPages是一个超给力的jQuery分页插件,它提供了很多丰富的新特性,例如自动翻页功能、可用键盘和鼠标滚动浏览、内容延迟显示、支持自定义分页导航菜单等等。使用起来很简单,效果也很出色。

Leaflet-JS Library

Leaflet是一个开源的基于移动开发的互动式地图JS库,代码量仅约28 KB。

JSZip

JSZip允许使用JS创建、阅读和编辑.zip文件。

Colors

这是一款非常有用的颜色处理类库,工作效率高,可以为项目选择正确的颜色。

Fitvids.js

这是另一款轻量、易用的jQuery插件,如果你需要你的视频能够自动适应网页的宽度,FitVids.js这个jquery插件可以帮助你。

Stroll.js

这些滚动效果是纯粹使用CSS3所实现的,其中所用到的JS仅是用来实现绑定和移除CSS样式。

Hammer.js

Hammer.js是一个轻量级的JS库,能让你的网站轻松实现触控事件。它依赖于jQuery,用来控制触摸设备上的多点触控特性。

Socialite.js

Socialite.js 是一个用来方便生成各种社交网站分享按钮的JS库,提供多种按钮排列样式,可以根据客户需求实现个性化设置。

Retina.js

顾名思义,Retina.js是很棒的脚本,帮助你在Retina显示设备上制造出高质量的图片,这是一款便捷的开源软件。检查网页中的图片是否存在高清的版本,如果有将会替换显示。

KineticJS

这是一个很简便的HTML5 Canvas独立JS类库,使用这个类库你可以轻松的在桌面和移动设备上进行图形和图片绘制和修改,执行动画效果,或者和图形图片进行互动。

URI.js

URI.js是一个JS库,用于处理URLs地址。它提供了类似于jQuery风格的API(便利的接口和方法链),用于读写所有常用组件,像.directory和.authority一样的方式。

Crossfilter

Crossfilter是一个用来展示大数据集的JS库,在浏览器里有很多不同的多元数据集,支持超快的交互,甚至在上百万或者更多数据下都很快。主要用来构建数据分析程序。

DropKick.js

从头开始做下拉式菜单可能是非常耗时和繁忙的任务,因此DropKick出现了,它是一个下拉框美化插件,使用非常简单,直接为下拉框select调用方法即可,瞬间让你摆脱繁琐。

Foresight.js

Foresight.js可以在装载图片之前知道用户的设备是否可以显示高分辨率的图片。

Kartograph

Kartograph是一个简单且轻量级的框架,建立交互式地图应用程序无需谷歌地图或其他任何地图服务。

Patternizer – Stripe Pattern Generator Tool(条纹模式生成器工具)

Patternizer是一个在线的带状模式生成工具,可以帮助你简单快捷的创建复杂的模式。你同样可以把你创建模式的经验与别人分享,收集别人的意见。

Morris.js

Morris.js是一个轻量级的JS库,使用jQuery和Raphaël来生成各种时序图。

JavaScript Library Boilerplate

JS Boilerplate可以帮助你来轻松创建你自己的JS库,例如jQuery,Zepto,Prototype等等。

heatmap.js

Heatmap.js用来生成基于用户自定义数据上的Web热图,内嵌HTML5 Canvas元素。

uiji.js

uiji.js很独特,它是jQuery的反向,它不是使用CSS选择器来查找元素,您可以使用相同的语法来创建元素。

sigma.js

sigma.js是一个开源的轻量级JS库,用来绘制各种图形,使用的是HTML Canvas元素。它同样可以用来显示交互式的静态和动态图表。

Heyoffline.js

heyoffline.js是一个简单的JS库,当用户网络不可用的时候可以提示用户保存信息,以免数据丢失。

JavaScript Console–Debugging JavaScript Tool(JS调试工具)

从字面意思可以看出,它是一个JS调试工具,同时为移动Web Apps提供远程调试。

Yeoman

它旨在为开发者提供一系列“健壮的”工具、程序库和工作流,帮助他们快速构建出漂亮、引人注目的Web应用。

Batman.js

这个框架就像它的名字一样酷——它可以创建丰富高效的单页面浏览器Apps。Batman.js框架利用CoffeeScript或JavaScript来快速构建Web Apps。由于其拥有强大的视图绑定和可观察的属性,所以它的代码非常简洁。

原文:Inspire Trends

http://www.csdn.net/article/2013-07-01/2816068-best-javascript-libraries-and-tools

研发周报:神奇!1KB JavaScript代码编写的3D蜜蜂

http://www.csdn.net/article/2013-03-29/2814706-3D-BEE-1KB-JavaScript

摘要:忙碌的一周总算过去,闲暇时不妨来细细品味我们精心为你呈现的这份技术大餐。本期热点:神奇!1KB JavaScript代码编写的3D蜜蜂;魔兽之父专访:今年游戏产业会出现一场革命;回顾:那些被平台方封杀的第三方应用。

我们挑选了本周研发频道的精华文章,推荐给您的绝对“有料”,闲暇时不妨来细细品味我们精心为你呈现的这份技术大餐,或许有您意想不到的收获。本期热点:神奇!1KB JavaScript代码编写的3D蜜蜂;魔兽之父专访:今年游戏产业会出现一场革命;回顾:那些被平台方封杀的第三方应用。

本期热点回放:

1.神奇!1KB JavaScript代码编写的3D蜜蜂

相信很多网友都还记得去年CSDN报道过同样是1KB JavaScript代码所编写的 3D玫瑰,或者2010年的 3D圣诞树。细心的网友可能注意到了,这两个神奇的作品都是以为西班牙开发者 Román Cortés在JS1K大赛上的投稿作品,今年他又带来了同样神奇的3D蜜蜂——长着触角、系着领带。

 

左、右分别是做过动作模糊化处理前、后的样子

由于 JS1K规则限制,该作品仅支持Firefox 18、Chrome 24以及Opera 12、13。如果你已安装以上浏览器,可以选择观看 线上演示

该作品的实现使用到了很多算法和渲染技术,作者在自己的 博客上详细地 解释了其技术原理。源代码如下(经过压缩):

 

1
_="G=[V,j=WV,-j]];jX=83,(+3+KD37Uji&32?70:,-80Y2]b=a[j]=c.cloneNode(LEb.getContext('2d'bAb;x=8# 8-x,6+x(j<17X7;<xeH@x*@x*y,.07$OsetIntervalcLE5;a e#73D-=7$7<ZaH0#-i$Q,-8Oj++;ZE8Q/((i+)%3095W0-e*5,6-e#*5#OG.sortreturn -eV]}OG.map=L^)/-[,=+]V];y=^X^)(X/6)+;x=0Y8Q;~~F2]W-@x-~F4]/1*^5+/F3]-@yL;!F2]&&Z_beginPath(_moJa(_bezierCurJ))})},j=4OjLj?cA1Q:9Q;z=x=*yZj|(z+1)%.5<.1&&(z*(191+(E527368,xB9+Ui3*e,(59525-y*(5188+(+(280*,yB8-(j&2]j||abs(E8-i%)<54-D&&YD2e4#+e*/|[1$4$,,$,8$][~~(D48+e/3)W90+D8,i])cos(>>j*4&15)sin(i(function(b#){F0])*--;)F1] StylE'hsla('+[for(`,j+y,Math.iG.push([),_drawImage(a[270+'%',.fill(j&15K(y=))/8`/2,y501660j/.height=1]+')',i(.5+.5#,e$,1@30+A.width=B*(10*Di/Ee=Fb[HRect(JveTo(Yi*Li=O);Qe3UPI*V[0W],X+Y-KZi^_a.`+x+";for(Y=0;$="`_^ZYXWVUQOLKJHFEDBA@$#    "[Y++];)with(_.split($))_=join(pop());eval(_)

相关作品: 

 

 

更新:

  1. 之前的版本在最新版Chrome和Firefox Nightly中存在无法显示翅膀的bug,已修复,线上演示地址并没有改变。
  2. 有网友提到另一个JS1K作品——Strange crystals(无尽的隧道)也非常神奇,3D蜜蜂的作者Román Cortés已将两者合而为一,并且仍然小于1KB。
  3. 应网友要求,笔者已将“3D蜜蜂”源代码以及“隧道里的3D蜜蜂”源代码打包上传,可以点击这里下载。

 

2.魔兽之父专访:今年游戏产业会出现一场革命

通过一次偶然的机会,krisviceral.com博主对魔兽之父Patrick Wyatt(Pat)进行了专访。在采访中Pat表示,相比与Warcraft和StarCraft,他更为Guild War感到骄傲,因为这款游戏的开发并没有像前两者那样拼命加班,而且也成功地锻炼了很多新人开发者。

Patrick Wyatt(Pat)曾任Blizzard开发&搜索副总裁,参与过Warcraft、StarCraft、Diablo、battle.net、Guild Wars等产品的开发,CSDN之前也对他所写的Warcraft、StarCraft开发历程相关博文进行了 编译、报道。本文译自krisviceral.com博主Kviceral对Pat的专访,Pat对游戏、AI、软件开发等方面都发表了自己的观点。

 

魔兽之父Patrick Wyatt

你曾参与过很多广受好评的游戏开发工作,其中最令你骄傲的是哪款?

Pat:这是一个很难回答的问题,因为每个游戏都倾注了我的心血。真的要算起来应该是Guild War,这是我们以小团队努力的成功。

我们从Blizzard离职后创立了一个新公司(ArenaNet),从零开始打造出了这款极具创新的游戏,甚至没有拼命地去加班工作,但是最终我们成功了。

在ArenaNet,我们招聘了很多刚毕业的学生,所以他们中很多人并不知道Guild War的开发流程与“传统”游戏开发有多少不同,但我很高兴他们没有和行业中大多数人一样常年crunching。

 

Guild War刚开发出来时,我们是唯一一个放弃订阅模式(通过支付每月的订阅费无限玩游戏)的商业MMORPG(大型多人在线角色扮演游戏),你在购买了这款游戏之后就可以无限制地玩。

 

在过去2-3年里,你最喜欢的游戏是什么?

Pat:我很享受DayZ这款僵尸题材的生存游戏,我也很惊讶自己竟会喜欢这款游戏,在地面上匍匐前进10分钟听起来可没什么意思,但是这款游戏的背景会让你为此着迷!我偶尔也玩League of Legends,同样很喜欢Kindom Rush(iPhone/iPad)这款深受Warcraft和StarCraft影响的塔防游戏,我和我的孩子都很爱玩。最近我还发现了AirMech,都是不错的游戏。

你认为过去5年里游戏界最大的创新是什么?

毫无疑问是“免费游戏”这种商业模式在西方市场的巨大成功——它改变了游戏的开发方式。设计师需要更致力于创造迷人的体验,以保持对用户的长期粘性;但负面的影响在于,有的设计师把他们的创造力用在了让用户沉迷于游戏或者是其它“黑暗技巧”,而非增加游戏的趣味性。 我希望使用“心理操纵”等“黑暗技巧”的游戏会越来越少。

另外一处在于移动游戏。创造有趣但是低成本的游戏非常值得赞赏!最近,我发现自己玩移动游戏的时间要远高于PC/主机游戏。相信随着游戏设计师更精于利用移动设备小屏幕的优势,能为我们带来更多优秀的作品。 >>查看原文

3.回顾:那些被平台方封杀的第三方应用

一款应用从萌芽状态到最后真正的上线,期间要经历种种磨难,好不容易推出了,然而还要遭到平台方的百般刁难。倘若你的应用不符合平台方的开发者协议,那么将会遭到封杀。那么之前所做的努力岂不功亏一篑?本文例举了部分被平台方封杀应用的典型案例,仅供参考。

NO.1 Adblock浏览器插件遭谷歌封杀

事件回放:2013年3月,谷歌把一款非常流行的应用Adblock Plus从它的应用商店Google Play里删除了,遭此毒手的还有其它几个跟屏蔽广告相关的应用。

官方理由:Adblock应用违反了“开发者部署协议”里 4.4 节的内容:“使用未经批准的方式妨碍用户对其它服务或产品的访问”。

开发者申诉:Adblock Plus的创始人Till Faida称:“我们知道广告收入对谷歌来说十分重要,但Adblock Plus并不是自动屏蔽所有的广告;而是让用户自由选择屏蔽还是不屏蔽”。

评论:谷歌是通告广告挣钱的,而Adblock Plus插件可屏蔽广告。坦率地说,谷歌拖到现在才对这样的应用下手才是让人意外的地方。

 

  • NO.2 Vintage Camera遭到Facebook扼杀
  • NO.3  第三方图片托管服务Twitpic、yfrog遭Twitter删除
  • NO.4  第三方支付遭Google Play封杀
  • NO.5  Dropbox SDK应用被苹果下架
  • NO.6  Fawave、微博通等新浪微博第三方应用遭封杀
  • NO.7  Emoti for Facebook被Facebook莫名删除

 

如同一位网友所说:没有真正的开放,也没有真正的公平竞争。平台方永远拥有一票否决权。那么,开发者如何才能在举步维艰中继续前行,绝处逢生呢?怎样才能避免遭到平台方的“不待见”呢?

笔者认为,平台方与开发者发生“摩擦”无非是侵权或是分红不均导致的。究竟该如何画这条“红线”,淘宝VP王文彬的回答很有代表性,此前他在接受 CSDN记者专访谈到如何看待平台方跟开发者逐利的问题表示:定义哪些是官方基础工具,哪些是第三方工具,很难画出一条明显的界限,会有一些模糊地带。有一点需要强调,淘宝不会为了跟开发者争夺利润去铲除第三方应用。淘宝更关心的是平台上用户数据的安全性和隐私能否得到保障,用户体验能否提高,淘宝希望看到平台上的第三方厂商做大做强。

4.飞信正面迎战微信,用户能否买账?

 

一份意外泄露的中移动内部PPT不仅搅皱了通信和互联网行业的一池春水,也搅乱了相关公司的心。中国移动欲重构飞信正面迎接微信,发改委称要对微信进行收费,那么用户能买账吗?

飞信是中国移动于2007年5月推出的一款综合通信服务,即融合语音(IVR)、GPRS、短信等多种通信方式,覆盖三种不同形态(完全实时的语音服务、准实时的文字和小数据量通信服务、非实时的通信服务)的客户通信需求,实现互联网和移动网间的无缝通信服务。

微信是腾讯公司于2011年1月21日推出的一款通过网络快速发送语音短信、视频、图片和文字,支持多人群聊的手机聊天软件。用户可以通过微信与好友进行形式上更加丰富的类似于短信、彩信等方式的联系。微信软件本身完全免费,使用任何功能都不会收取费用,微信时产生的上网流量费由网络运营商收取。微信是一种更快速的即时通讯工具,与传统的短信沟通方式相比,更灵活、智能,且节省资费。

2007年中国移动推出的聊天工具,至今已有6年光景的飞信软件,因与短信业务连通而广受关注,但目前处境并不乐观。据统计,如今飞信的用户量还不到腾讯QQ的五分之一,月均使用时间不足后者的四十五分之一。更让飞信感到恐惧的是,在2012中国互联网大会上,腾讯CEO马化腾在微博中宣布,微信用户人数已高达2亿,截至2013年01月注册用户量已经突破3亿。这个诞生仅2年多的手机聊天软件,发展如此迅猛,使业内人士颇为震惊。

微信因其操作简便,能广交好友,成为年轻人的交友工具。最初微信以文字通讯、手机图片分享为卖点,在后期开发过程中以发现“查看附近的人”和“摇一摇”功能更受用户欢迎。微信日新增用户以数十万数量级增长,确立了它在移动APP市场的绝对优势地位。

5.Web框架排行榜 Netty、Servlet和Vert.x位列前三一个框架对网站性能会产生多大影响呢?答案或许会让你大吃一惊。本文数据由自称CTO外包公司的TechEmpower测试所得:

框架排行榜:

 

令人惊讶地是,排在前三的是Netty、Vert.x和Java Servelet。那么它们比Ruby、Django到底快多少呢?一开始我们猜测可能会4倍差异,但在Vert.x和Ruby on Rails之间竟相差40倍,真让人瞠目结舌。

在此次测试中,我们根据精确的文档和社区意见进行配置和部署,尽可能按照真实的生产运行环境来配置和部署。关于每个框架的测试环境是如何搭建和测试的,我们都进行了详细的描述,大家可以 点击查看每个框架的测试详情

开源系列:

 

6.腾讯开源基于HTML5技术的专业级图像处理引擎 AlloyImage

腾讯Web前端 AlloyTeam又推出了最新的开源项目,一个基于HTML5技术的专业级图像处理引擎——AlloyImage(简称AI)以及一个在线Web图像处理平台—— AlloyPhoto(简称AP)。这预示着腾讯的Web前端团队将在底层基础技术层面做深入研究,并将更多的为业界提供基础技术服务,同时也将与HTML5梦工场一起推动HTML5技术在业界的广泛深入的应用。

AlloyImage是一个使用Javascript语言开发的,基于Web的在线图像处理引擎,除了核心底层图像处理引擎,还同时集成了一些方便快捷的图像处理API,您可以将它简单快捷的引用到您的Web网页中,做出与PhotoShop一样的优美效果。甚至,你可以用AlloyImage来开发一个Web在线图像处理软件,如:Web版的PhotoShop—— AlloyPhoto

 

AlloyPhoto简约版主界面

AlloyImage主要使用HTML5的canvas技术,并在多图层(layer)处理方面做了创新性的尝试,不仅如此,在技术实现层面,其架构方便扩展,使用者可以很容易写出现一个AlloyImage的滤镜插件,很多API支持重载,参数传递灵活。

目前,AlloyPhoto有 简约版和 专业版两个版本,其 源码托管在GitHub上。后续AlloyImage将会持续更新,将更多的处理效果与工具加入到其中,并且会在性能方面做出一些优化与尝试,AlloyImage将力求做一个开放、开源的强大的JS图像库。

7.Polycode:免费、开源的跨平台(游戏和APP)开发工具

Polycode是一款免费、开源的跨平台游戏和APP开发工具,遵循MIT协议,其核心采用C++编写,支持Mac OS、Windows、Linux,即将支持iOS和Android。

开发者可以把Ploycode当做C++库,也可以在其IDE里编写Lua脚本。Ploycode API的设计理念是“用更少的代码做更多的工作”。它使用scenegraph管理系统执行渲染和更新操作,也可以自定义渲染和更新。

在IDE里编写的代码可以直接发布到所支持的平台上,如果只是编写Lua脚本,那么IDE会自动创建“ployapp”应用程序格式,其中包含了所有的代码和资源,并且把它们封装到一个特定平台层上。

在GitHub上托管地址: https://github.com/ivansafrin/Polycode

此外,类似的C++跨平台开源游戏引擎和开发工具有: Moai:其主要面向PC、手机、及基于云端的游戏开发; Cocos2d-x:跨平台的开源移动2D游戏框架,易学易用; Cinder、 Unity3D以及GarageGames开源的Torque 3D游戏引擎

8.Linux容器运行时Docker开源

Docker是一个云计算平台,它利用Linux的LXC、AUFU、Go语言、cgroup实现了资源的独立,可以很轻松的实现文件、资源、网络等隔离,其最终的目标是实现类似PaaS平台的应用隔离。

值得关注的特性:

 

  • 文件系统隔离:每个进程容器运行在一个完全独立的根文件系统里。
  • 资源隔离:系统资源,像CPU和内存等可以分配到不同的容器中,使用cgroup。
  • 网络隔离:每个进程容器运行在自己的网络空间,虚拟接口和IP地址。
  • 日志:收集和记录标准流(stdout/stderr/stdin)里的每个进程容器,用于实时和批量检索。
  • 变更管理:被修改的容器文件系统会被提交到一个新的image,留着重用来创造更多的容器,无需模板或手动配置。
  • 交互式shell

前往官网查看更多详细介绍:http://docker.io/
 

源码托管地址:https://github.com/dotcloud/docker/

往期回顾:

研发周报:王淮给技术创业团队的十点建议

Copyright © 2024 优大网 浙ICP备13002865号

回到顶部 ↑