分类目录归档:前端

这是讲诉前端的一些事!

GIT命令

Git配置
git config –global user.name “robbin”
git config –global user.email “fankai@gmail.com”
git config –global color.ui true
git config –global alias.co checkout
git config –global alias.ci commit
git config –global alias.st status
git config –global alias.br branch
#设置Editor使用textmate
git config –global core.editor “mate -w”
# 列举所有配置
git config -l

用户的git配置文件~/.gitconfig

Git常用命令

查看、添加、提交、删除、找回,重置修改文件

#显示command的help
git help <command>
# 显示某次提交的内容
git show
# 抛弃工作区修改
git show $id git co — <file>
# 抛弃工作区修改
git co .
# 将工作文件修改提交到本地暂存区
git add <file>
# 将所有修改过的工作文件提交暂存区
git add .
# 从版本库中删除文件
git rm <file>
# 从版本库中删除文件,但不删除文件
git rm <file> –cached
# 从暂存区恢复到工作文件
git reset <file>
# 从暂存区恢复到工作文件
git reset — .
# 恢复最近一次提交过的状态,即放弃上次提交后的所有本次修改
git reset –hard
# 将git add, git rm和git ci等操作都合并在一起做
git ci <file> git ci . git ci -a
# 修改最后一次提交记录
git ci -am “some comments” git ci –amend
# 恢复某次提交的状态,恢复动作本身也创建了一次提交对象
git revert <$id>
# 恢复最后一次提交的状态
git revert HEAD

查看文件

diff git diff <file> # 比较当前文件和暂存区文件差异
git diff git diff <$id1> <$id2> # 比较两次提交之间的差异
git diff <branch1>..<branch2> # 在两个分支之间比较
git diff –staged # 比较暂存区和版本库差异
git diff –cached # 比较暂存区和版本库差异
git diff –stat # 仅仅比较统计信息

查看提交记录
git log git log <file> # 查看该文件每次提交记录
git log -p <file> # 查看每次详细修改内容的diff
git log -p -2 # 查看最近两次详细修改内容的diff
git log –stat # 查看提交统计信息

tig
Mac上可以使用tig代替diff和log,brew install tig

—-
Git 本地分支管理

查看、切换、创建和删除分支
git br -r # 查看远程分支
git br <new_branch> # 创建新的分支
git br -v # 查看各个分支最后提交信息
git br –merged # 查看已经被合并到当前分支的分支
git br –no-merged # 查看尚未被合并到当前分支的分支
git co <branch> # 切换到某个分支
git co -b <new_branch> # 创建新的分支,并且切换过去
git co -b <new_branch> <branch> # 基于branch创建新的new_branch
git co $id # 把某次历史提交记录checkout出来,但无分支信息,切换到其他分支会自动删除
git co $id -b <new_branch> # 把某次历史提交记录checkout出来,创建成一个分支
git br -d <branch> # 删除某个分支
git br -D <branch> # 强制删除某个分支 (未被合并的分支被删除的时候需要强制)
分支合并和rebase
git merge <branch> # 将branch分支合并到当前分支
git merge origin/master –no-ff # 不要Fast-Foward合并,这样可以生成merge提交
git rebase master <branch> # 将master rebase到branch,相当于: git co <branch> && git rebase master && git co master && git merge <branch>

Git补丁管理(方便在多台机器上开发同步时用)
git diff > ../sync.patch # 生成补丁
git apply ../sync.patch # 打补丁
git apply –check ../sync.patch # 测试补丁能否成功 ## Git暂存管理
git stash # 暂存 git stash list # 列所有stash
git stash apply # 恢复暂存的内容
git stash drop # 删除暂存区 ## Git远程分支管理
git pull # 抓取远程仓库所有分支更新并合并到本地
git pull –no-ff # 抓取远程仓库所有分支更新并合并到本地,不要快进合并
git fetch origin # 抓取远程仓库更新
git merge origin/master # 将远程主分支合并到本地当前分支
git co –track origin/branch # 跟踪某个远程分支创建相应的本地分支
git co -b <local_branch> origin/<remote_branch> # 基于远程分支创建本地分支,功能同上
git push # push所有分支
git push origin master # 将本地主分支推到远程主分支
git push -u origin master # 将本地主分支推到远程(如无远程主分支则创建,用于初始化远程仓库)
git push origin <local_branch> # 创建远程分支, origin是远程仓库名
git push origin <local_branch>:<remote_branch> # 创建远程分支
git push origin :<remote_branch> #先删除本地分支(git br -d <branch>),然后再push删除远程分支

Git远程仓库管理

git remote -v # 查看远程服务器地址和仓库名称
git remote show origin # 查看远程服务器仓库状态
git remote add origin git@github:robbin/robbin_site.git # 添加远程仓库地址
git remote set-url origin git@github.com:robbin/robbin_site.git # 设置远程仓库地址(用于修改远程仓库地址)
git remote rm <repository> # 删除远程仓库 ### 创建远程仓库
git clone –bare robbin_site robbin_site.git # 用带版本的项目创建纯版本仓库
scp -r my_project.git git@git.csdn.net:~ # 将纯仓库上传到服务器上
mkdir robbin_site.git && cd robbin_site.git && git –bare init # 在服务器创建纯仓库
git remote add origin git@github.com:robbin/robbin_site.git # 设置远程仓库地址
git push -u origin master # 客户端首次提交
git push -u origin develop # 首次将本地develop分支提交到远程develop分支,并且track
git remote set-head origin master # 设置远程仓库的HEAD指向master分支

也可以命令设置跟踪远程库和本地库
git branch –set-upstream master origin/master
git branch –set-upstream develop origin/develop

javascript深入理解js闭包

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。

一、变量的作用域

要理解闭包,首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种:全局变量和局部变量。

Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。
Js代码

var n=999;

function f1(){
alert(n);
}

f1(); // 999

另一方面,在函数外部自然无法读取函数内的局部变量。

Js代码

function f1(){
var n=999;
}

alert(n); // error

这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

Js代码

function f1(){
n=999;
}

f1();

alert(n); // 999

——————————————————————————————————–

二、如何从外部读取局部变量?

出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。

那就是在函数的内部,再定义一个函数。

Js代码

function f1(){

n=999;

function f2(){
alert(n); // 999
}

}

在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1 就是不可见的。这就是Javascript语言特有的“链式作用域”结构(chain scope),

子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!
Js代码

function f1(){

n=999;

function f2(){
alert(n);
}

return f2;

}

var result=f1();

result(); // 999

——————————————————————————————————–

三、闭包的概念

上一节代码中的f2函数,就是闭包。

各种专业文献上的“闭包”(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

——————————————————————————————————–b

四、闭包的用途

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

怎么来理解这句话呢?请看下面的代码。
Js代码

function f1(){

var n=999;

nAdd=function(){n+=1}

function f2(){
alert(n);
}

return f2;

}

var result=f1();

result(); // 999

nAdd();

result(); // 1000

在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

这段代码中另一个值得注意的地方,就是“nAdd=function(){n+=1}”这一行,首先在nAdd前面没有使用var关键字,因此 nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个

匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

——————————————————————————————————–

五、使用闭包的注意点

1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便

改变父函数内部变量的值。

——————————————————————————————————–

六、思考题

如果你能理解下面代码的运行结果,应该就算理解闭包的运行机制了。

Js代码
var name = “The Window”;
var object = {
name : “My Object”,
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());  //The Window

——————————————————————————————————–
JavaScript闭包例子

function outerFun()
{
var a=0;
function innerFun()
{
a++;
alert(a);
}
}
innerFun()

上面的代码是错误的.innerFun()的作用域在outerFun()内部,所在outerFun()外部调用它是错误的.

改成如下,也就是闭包:

Js代码

function outerFun()
{
var a=0;
function innerFun()
{
a++;
alert(a);
}
return innerFun;  //注意这里
}
var obj=outerFun();
obj();  //结果为1
obj();  //结果为2
var obj2=outerFun();
obj2();  //结果为1
obj2();  //结果为2

什么是闭包:

当内部函数 在定义它的作用域 的外部 被引用时,就创建了该内部函数的闭包 ,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被 释放,因为闭包需要它们.

——————————————————————————————————–

再来看一个例子

Js代码

function outerFun()
{
var a =0;
alert(a);
}
var a=4;
outerFun();
alert(a);

结果是 0,4 .  因为在函数内部使用了var关键字 维护a的作用域在outFun()内部.

再看下面的代码:

Js代码

function outerFun()
{
//没有var
a =0;
alert(a);
}
var a=4;
outerFun();
alert(a);
结果为 0,0 真是奇怪,为什么呢?

作用域链是描述一种路径的术语,沿着该路径可以确定变量的值 .当执行a=0时,因为没有使用var关键字,因此赋值操作会沿着作用域链到var a=4;  并改变其值.

————————————————————————————————————————————————–

如果你对javascript闭包还不是很理解,那么请看下面转载的文章:(转载:http://www.felixwoo.com/archives/247)

一、什么是闭包?

官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
相信很少有人能直接看懂这句话,因为他描述的太学术。其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包。不过一般来说,嵌套的function所产生的闭包更为强大,也是大部分时候我们所谓的“闭包”。看下面这段代码:

function a() { 
 var i = 0; 
 function b() { alert(++i); } 
 return b;
}
var c = a();
c();

这段代码有两个特点:

1、函数b嵌套在函数a内部;

2、函数a返回函数b。

引用关系如图:

这样在执行完var c=a()后,变量c实际上是指向了函数b,再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包,为什么?因为函数a外的变量c引用了函数a内的函数b,就是说:

当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。

让我们说的更透彻一些。所谓“闭包”,就是在构造函数体内定义另外的函数作为目标对象的方法函数,而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标 对象在生存期内始终能保持其方法,就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束,临时变量的名称也都消失了,但在目 标对象的方法内却始终能引用到该变量的值,而且该值只能通这种方法来访问。即使再次调用相同的构造函数,但只会生成新对象和方法,新的临时变量只是对应新 的值,和上次那次调用的是各自独立的。

二、闭包有什么作用?

简而言之,闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述,不专业也不严谨,但大概意思就是这样,理解闭包需要循序渐进的过程。

在上面的例子中,由于闭包的存在使得函数a返回后,a中的i始终存在,这样每次执行c(),i都是自加1后alert出i的值。

那 么我们来想象另一种情况,如果a返回的不是函数b,情况就完全不同了。因为a执行完后,b没有被返回给a的外界,只是被a所引用,而此时a也只会被b引 用,因此函数a和b互相引用但又不被外界打扰(被外界引用),函数a和b就会被GC回收。(关于Javascript的垃圾回收机制将在后面详细介绍)

三、闭包内的微观世界

如果要更加深入的了解闭包以及函数a和嵌套函数b的关系,我们需要引入另外几个概念:函数的执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。以函数a从定义到执行的过程为例阐述这几个概念。

  1. 定义函数a的时候,js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的“环境”,如果a是一个全局函数,则scope chain中只有window对象。
  2. 执行函数a的时候,a会进入相应的执行环境(excution context)
  3. 在创建执行环境的过程中,首先会为a添加一个scope属性,即a的作用域,其值就为第1步中的scope chain。即a.scope=a的作用域链。
  4. 然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象,但它不具有原型而且不能通过JavaScript代码直接访问。创建完活动对象后,把活动对象添加到a的作用域链的最顶端。此时a的作用域链包含了两个对象:a的活动对象和window对象。
  5. 下一步是在活动对象上添加一个arguments属性,它保存着调用函数a时所传递的参数。
  6. 最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中,完成了函数b的的定义,因此如同第3步,函数b的作用域链被设置为b所被定义的环境,即a的作用域。

到此,整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c,又函数b的作用域链包含了对函数a的活动对象的引用,也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用,函数b又依赖函数a,因此函数a在返回后不会被GC回收。

当函数b执行的时候亦会像以上步骤一样。因此,执行时b的作用域链包含了3个对象:b的活动对象、a的活动对象和window对象,如下图所示:

如图所示,当在函数b中访问一个变量的时候,搜索顺序是:

  1. 先搜索自身的活动对象,如果存在则返回,如果不存在将继续搜索函数a的活动对象,依次查找,直到找到为止。
  2. 如果函数b存在prototype原型对象,则在查找完自身的活动对象后先查找自身的原型对象,再继续查找。这就是Javascript中的变量查找机制。
  3. 如果整个作用域链上都无法找到,则返回undefined。

小结,本段中提到了两个重要的词语:函数的定义执行。文中提到函数的作用域是在定义函数时候就已经确定,而不是在执行的时候确定(参看步骤1和3)。用一段代码来说明这个问题:

function f(x) { 
  var g = function () { return x; }
  return g;
}
var h = f(1);
alert(h());

这段代码中变量h指向了f中的那个匿名函数(由g返回)。

  • 假设函数h的作用域是在执行alert(h())确定的,那么此时h的作用域链是:h的活动对象->alert的活动对象->window对象。
  • 假设函数h的作用域是在定义时确定的,就是说h指向的那个匿名函数在定义的时候就已经确定了作用域。那么在执行的时候,h的作用域链为:h的活动对象->f的活动对象->window对象。

如果第一种假设成立,那输出值就是undefined;如果第二种假设成立,输出值则为1。

运行结果证明了第2个假设是正确的,说明函数的作用域确实是在定义这个函数的时候就已经确定了。

四、闭包的应用场景
保护函数内的变量安全。以最开始的例子为例,函数a中i只有函数b才能访问,而无法通过其他途径访问到,因此保护了i的安全性。

  1. 在内存中维持一个变量。依然如前例,由于闭包,函数a中i的一直存在于内存中,因此每次执行c(),都会给i自加1。
  2. 通过保护变量的安全实现JS私有属性和私有方法(不能被外部访问)
    私有属性和方法在Constructor外是无法被访问的function Constructor(…) {
    var that = this;
    var membername = value;
    function membername(…) {…}
    }

以上3点是闭包最基本的应用场景,很多经典案例都源于此。

五、Javascript的垃圾回收机制

在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么函数a执行后不会被回收的原因。

 

六、结语

理解JavaScript的闭包是迈向高级JS程序员的必经之路,理解了其解释和运行机制才能写出更为安全和优雅的代码。

使用HTML5中postMessage 实现ajax中的POST跨域问题

HTML5中提供了在网页文档之间相互接收与发送信息的功能。使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信。

浏览器支持程度:IE8+,firefox4+,chrome8+  opera10+

1. 首先,要想接收从其他的窗口发过来的消息,就必须对窗口对象的message事件进行监听,如下代码:

window.addEventListener(“message”, function(){},false);

2. 其次,需要使用window对象的postMessage方法向其他窗口发送消息,该方法定义如下所示:

otherWindow.postMessage(message, targetOrigin);

该方法使用2个参数,第一个参数为所发送的消息文本,但也可以是任何javascript对象,第二个参数是接收消息的对象窗口的url地址(比如:http:127.0.0.1:8080/) , 但是我们也可以在url地址字符串中使用通配符”*”, 指定全部的域下,但是我们还是建议使用特定的域名下,otherWindow为要发送窗口对象的引用。

Demo演示:

假如现在我在hosts文件下 ,绑定2 个域名如下:

127.0.0.1       abc.example.com

127.0.0.1        longen.example.com

现在假如在abc.example.com域下有一个abc.html页面,在longen.example.com域下有def.html页面,现在我是希望这2个不同域名下的页面能互相通信,abc.html代码如下:

 

<form>  
      <p>  
        <label for="message" style="color:red;font-size:24px;">给iframe子窗口发一个信息:</label>  
        <input type="text" name="message" value="send" id="message" />  
        <input type="submit" value="submit" id="submit"/>  
      </p>  
</form>  
<h4>目标iframe传来的信息:</h4>  
<p id="test">暂无信息</p> 

 <iframe id="iframe"   src="http://longen.example.com/webSocket/def.html" style="display:none"></iframe>

JS代码如下:

var win = document.getElementById("iframe").contentWindow;

document.getElementById("submit").onclick = function(e){
    e.preventDefault();
    win.postMessage(document.getElementById("message").value,"http://longen.example.com"); 
}  

window.addEventListener("message",function(e){
     e.preventDefault();
     document.getElementById("test").innerHTML = "从" + e.origin + "那里传过来的消息:\n" + e.data;
},false);


Def.html代码如下:

HTML代码:

<form>  
      <p>  
        <label for="message">给父窗口abc.html发个信息:</label>  
        <input type="text" name="message" value="send" id="message" />  
        <input type="submit" />  
      </p>  
 </form>  
 <p id="test2">暂无信息。</p>

JS代码如下:
var parentwin = window.parent; 
window.addEventListener("message",function(e){
       document.getElementById("test2").innerHTML = "从父窗口传来的域" +e.origin + ",和内容数据:" + e.data;  
       parentwin.postMessage('HI!你给我发了"<span>'+e.data+'"</span>。',"http://abc.example.com");
},false);

当我点击abc.html页面后,可以看到效果如下,从def.html返回内容了。如下:

我们需要知道如下几条信息:

  1. 通过对window对象的message事件进行监听,可以接收消息。
  2. 通过访问message事件的origin属性,可以获取消息的发送源。
  3. 通过访问message事件的data属性,可以取得消息内容。
  4. 使用postMessage方法发送消息。
  5. 通过访问message事件的source属性,可以获取消息发送源的窗口对象(准确的说,应该是窗口的代理对象)。

有了上面的基本知识点,我们可以延伸为实现ajax POST跨域的问题。

二:使用postMessage 知识点解决 ajax中POST跨域问题。

原理:原理也很简单,假如我们的域名abc.example.com下的abc.html页面需要发ajax请求(跨域,域名为longen.example.com)下,那么我们还是先跨页面文档的形式,和上面一样,我们可以现在longen.example.com下 建立一个页面,比如叫def.html. 那么我们现在还是在 abc.html 页面嵌入一个隐藏域iframe src路径指向longen.example.com域下def,html页面。过程还是和跨文档类似,只是现在在def.html页面中 在window.onmessage 事件内写ajax请求即可,如下代码:

abc.example.com下的abc.html页面如下:

html代码和上面一样,下面是JS代码:

var win = document.getElementById("iframe").contentWindow;
document.getElementById("submit").onclick = function(e){
    e.preventDefault();
    win.postMessage(document.getElementById("message").value,"http://longen.example.com/"); 
}  
window.addEventListener("message",function(e){
  e.preventDefault();
  alert(typeof e.data)
  var json = JSON.parse(e.data);
   console.log(json);
  alert(json.url)
},false);

def.html代码如下:

JS代码如下 :

//获取跨域数据

window.onmessage = function(e){  
  $.ajax({
    url: 'http://longen.example.com/webSocket/test.php',
    type:'POST',
    dataType:'text',
    //data: {msg:e.data},
    success: function(res) {
      var parentwin = window.parent;  
      parentwin.postMessage(res,"http://abc.example.com");//跨域发送数据  
    }
   });
 };

test.php代码如下:

<?php 
    $data=array(  
     url =>1,
      name =>'2',
      'xx-xx'=>"xx"
 );
 echo json_encode($data);
?>

jQuery上传插件Uploadify 3.2使用

我今天介绍的Uploadify 3.2的,以前旧版本的并不适用,说到这个,我就火大,我也是第一次使用,也百度了下使用手册,结果坑爹的那些手册都是旧版的,新版的Uploadify接口和旧版的差太多了。废话不多说,进入正题。
Uploadify下载地址:http://www.uploadify.com/download/ 这里下载最新版的3.2的。
下载下来解压后估计里面很多文件,其实有用的也就一个jquery.uploadify.js和uploadify.swf这两个文件。当然啦,jQuery库那是必须的。
在你使用的项目中,把jquery.uploadify.js引入以后,用法和大多数JQ插件一样。同时也要记得引入swfobject.js这个插件,版本2.2以上的。使用方法例如:

<pre>

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

 

</pre>

file_upload_1其实也就是一个容器ID,比如,上面的只是简单的事例,下面我就把我在项目中做的发出来,每个都有解释:

<pre>

$(document).ready(function() {
    $("#file_upload").uploadify({
        //开启调试
        'debug' : false,
        //是否自动上传
        'auto':false,
        //超时时间
        'successTimeout':99999,
        //附带值
        'formData':{
            'userid':'用户id',
            'username':'用户名',
            'rnd':'加密密文'
        },
        //flash
        'swf': "uploadify.swf",
        //不执行默认的onSelect事件
        'overrideEvents' : ['onDialogClose'],
        //文件选择后的容器ID
        'queueID':'uploadfileQueue',
        //服务器端脚本使用的文件对象的名称 $_FILES个['upload']
        'fileObjName':'upload',
        //上传处理程序
        'uploader':'imageUpload.php',
        //浏览按钮的背景图片路径
        'buttonImage':'upbutton.gif',
        //浏览按钮的宽度
        'width':'100',
        //浏览按钮的高度
        'height':'32',
        //expressInstall.swf文件的路径。
        'expressInstall':'expressInstall.swf',
        //在浏览窗口底部的文件类型下拉菜单中显示的文本
        'fileTypeDesc':'支持的格式:',
        //允许上传的文件后缀
        'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',
        //上传文件的大小限制
        'fileSizeLimit':'3MB',
        //上传数量
        'queueSizeLimit' : 25,
        //每次更新上载的文件的进展
        'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
             //有时候上传进度什么想自己个性化控制,可以利用这个方法
             //使用方法见官方说明
        },
        //选择上传文件后调用
        'onSelect' : function(file) {

        },
        //返回一个错误,选择文件的时候触发
        'onSelectError':function(file, errorCode, errorMsg){
            switch(errorCode) {
                case -100:
                    alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件!");
                    break;
                case -110:
                    alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!");
                    break;
                case -120:
                    alert("文件 ["+file.name+"] 大小异常!");
                    break;
                case -130:
                    alert("文件 ["+file.name+"] 类型不正确!");
                    break;
            }
        },
        //检测FLASH失败调用
        'onFallback':function(){
            alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。");
        },
        //上传到服务器,服务器返回相应信息到data里
        'onUploadSuccess':function(file, data, response){
            alert(data);
        }
    });
});

</pre>

20 款免费的 JavaScript 游戏引擎

使用 HTML5,CSS3 和 Javascript 可以帮助面向对象开发者开发拥有各种特性的游戏,比如:3D 动画效果,Canvas,数学,颜色,声音,WebGL 等等。最明显的优势在于使用 HTML5 开发的游戏能在任何现代化流行的设备上运行。

某些游戏引擎仅仅是一个抽象的层次,就简单处理一些或者更多的繁杂游戏开发任务;其他只是注重 asset 加载,输入,物理效果,音频,sprite 地图和动画,而且相当多样化。还有一些引擎架构极其简单,只包括一个 2D 水平的编辑器和调试工具

大部分的游戏引擎都能提高游戏开发的效率,即使是创建全功能型的游戏。但是,也有一些开发者为了能更好的理解游戏的每个组件,喜欢从头开始创作。现 在基于 Javascript-HTML5 的游戏引擎也不少,这是好事,同时,也是个坏事,因为事实上大多数开发出来的产品都没人维护,或者即将停止维护。所以,选择某一游戏引擎需要仔细考虑的就 是该引擎在未来几年是否会继续维护,更新,进行功能增强。

在这篇文章中,我们经过各种资料探寻,测试,实际应用等方法,收集了专门提供给开发者的20 款免费的 JavaScript 游戏引擎, Enjoy!

1. Crafty

crafty
craftyJS 个轻量级的,模块化 JavaScript 游戏引擎,包括了许多组件:动画,事件管理,重新划分区域,碰撞检测,sprite 等等。它支持所有类型的浏览器,比如  IE9。不需要 dom 操作和自定义绘图程序。

2. Quintus

Quintus
Quintus 引擎是个 HTML5 游戏引擎,模块化,轻量级,而且带有简洁的 Javascript 友好的语法。 Quintus 是一个易学,使用有趣的 JavaScript HTML5 游戏引擎,支持移动和桌面开发。包含一个模块化的引擎可轻松开发游戏,并在同一个页面上运行多个实例。

3. Gamequery

gameQuery
gameQuery  是 个易于使用的 jQuery 插件,可以通过添加相关游戏的类来帮助开发 Javascript 游戏,自从它使用 DOM 操作代替了 Canvas gameQuery ,现在可以兼容大量的浏览器,即使是比较旧的版本:Firefox, Chrome, Internet Explorer, Safari, Safari for iOS, mobile versions of Webkit 和 Opera。

4. GMP

gmp
GMP  是个杰出的制作基于 sprite ,2D 游戏的引擎。它可以很容易就设计出最 retro 风格的街机游戏,同时也是很好的制作游戏的工具(比如 sudoku 和 gogopop)。在线演示

5. lycheeJS

lycheeJS
lycheeJS 是个 JavaScript 游戏库,提供完整的原型解决方案和 HTML5 Canvas 部署,在 Web 浏览器或者原生环境的WebGL 或者是基于原生 OpenGL(ES) 的游戏。这个项目的开发过程优化了 Google Chrome 和它自身的开发工具。

6. Enchant.js

enchantjs
Enchant.js  是个简单的 JavaScript 框架,可以使用 HTML5 和 JavaScript 来开发简单的游戏和应用。现在还是由 UEI 的 Akihabara 研究中心来开发和维护。在线演示

7. Starlingjs

starlingjs
Starling Starling 是在 Stage3D APIs 基础上开发的一种 ActionScript 3 2D 框架(可用于 Flash Player 11 和 Adobe AIR 3的桌面)。 Starling 是为游戏开发设计的,但是你可以将它应用于很多其它的应用程序。 在不必涉及低级 Stage3D APIs 情况下,Starling 使得编写具有快速 GPU 加速功能的应用程序成为可能。

8. The Render Engine

TheRenderEngine &middot; GitHub
The Render Engine 是个跨浏览器的,开源游戏引擎,完全使用 JavaScript 编写。它拥有一个扩展的 API 和使用当前最新的现代浏览器特性。此款引擎旨在帮助用户使用基础的工具来开发游戏,加快游戏概念到成品的过程。

9. Akihabara

Akihabara
akihabara 是一系列的库和工具,可以预置创建 pixelated indie-style 8/16-bit era games ,使用 JavaScript , HTML5 canvas 标签和一些标准 hooks 开发。

10. JsGameSoup

jsgamesoup
Js Gamesoup 是个开源免费的软件框架,使用 JavaScript 和其他开放 web 技术来开发游戏:

  • Modular -可独立工作的 JavaScript 文件组件
  • 使用开放的 web 技术: Canvas 和 HTML5.
  • 支持 Firefox (Gecko), Safari/Chrome (WebKit), Internet Explorer 6+, Android 和  iOS

11. Gamejs

gamejs
GameJs 是一个基于浏览器的2D游戏开发框架,使用JavaScript和Canvas。使用GameJS这个超酷的Canvas游戏库,能写出优秀的基于Canvas的游戏。

12. CSS Game Engine

cssgameengine
CSS game engine 使用 JavaScript 和 CSS (Cascading Style Sheets) 来装饰页面,他们在一起使用非常可靠。使用这个引擎可以创建属于用户自己的游戏,这个项目主要针对的是初学者,想学习如何编写音频游戏的开发者。用户最好 是个 web 设计师,有点 CSS 基础。

13. Clanfx

clanfx
clanfx 是个 2D ,平铺的一个 JavaScript 游戏引擎,使用 JavaScript 和 CSS 开发。当前支持的浏览器有:Firefox, Epiphany 和 Opera browsers。主要特性包括许多动态 sprites,spell 效果,建筑,瓷砖纹理和基础的游戏 AI。

14. gTile

gTile
gTile 是个基于浏览器的游戏引擎,完全由 Javascript 和 DHTML 开发。它使用 2D 视图来保证简单性和可访问性。此款游戏的成功之处是较强的交互性和游戏对象行为,而不是花俏的图像和动画。在线演示。支持的浏览器有: IE6+, Firefox 2.0+, Safari 2.0+ and Opera 9.5+,不需要下载任何组件或者插件。

15. J5g3

j5g3
j5g3 是个开源 Javascript 图像引擎,语法非常易于使用,可以进行快速开发和扩展。

16. Jaws

jaws
Jaws 是个 HTML5 驱动的 2D 游戏库,刚开发的时候只能用来制作 canvas,现在支持通过同样的 API 来制作普通基于 DOM 的 sprites。支持:Chrome 9+, Firefox 3.6+, Safari 5+ & IE9。

17. Cocos2D

Cocos2D
Cocos2D JavaScript 是 Cocos2D for iPhone 的 HTML5 端口。它是个 2D 图像引擎,允许快速开发 2D 游戏和图像应用。它可以在任何现代化浏览器中运行,不需要第三方插件,比如 Adobe Flash。

18. CopperLicht

CopperLicht
CopperLicht 是个 WebGL 库,同时也是 JavaScript 3D 引擎,可以创建 3D 游戏和网页应用。它使用 WebGL canvas ,支持现代主流浏览器,不需要任何插件就可以硬件加速渲染 3D 图片。

19. Aves

aves
Aves  是个 html 和 javascript 游戏引擎,让人想起 oldieworldie RPGs (除了, 更多的图像功能),所有的渲染效果都是由 html 和 javascript 开发的,不需要任何插件!

20. LimeJS

limejs
LimeJS 是个 HTML5 游戏框架,用来构建游戏。它在现代化触屏设备和桌面浏览器上看起来像是原生的,而且运行速度快。LimeJS 通过 Google 和相关的函数/类 来创建 Closure 库,控制时间线,时间,形状和动画效果。同时,此框架完全支持 sprite 表(用户可以从单个文件中收集所有图片)。

在评论畅所欲言吧:)

via codegeekz.com

2013年度最强AngularJS资源合集

AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,诞生以来吸引了大量的目光,也迅速成为了Web开发领域的新宠。本文整理了2013年度一些非常有价值的AngularJS相关教程和资源。

AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发者可以使用HTML来声明动态内容,从而使得Web开发和测试工作变得更加容易。

 

 

AngularJS诞生以来,吸引了大量的目光,也迅速成为了Web开发领域的新宠。本文整理了2013年度一些非常有价值的AngularJS相关教程和资源,如果你想了解AngularJS或正在使用AngularJS,那么这些资源肯定会为你的学习和进阶过程带来帮助。

一、了解AngularJS 

 

 

二、中文资源

1.  中文系列资源

 

 

2.  其他单篇文章

 

 

3.  中文书籍

 

 

三、英文资源

1.  AngularJS入门教程

 

 

2.  AngularJS指令学习

 

 

3.  AngularJS应用开发实战

 

 

4.  AngularJS游戏开发实战

 

 

5.  AngularJS工作流程和测试

 

 

6.  AngularJS书籍

 

 

英文资源出处: Syntaxspectrum希望上述资源可以为你在2014年深入学习AngularJS带来帮助。

本文为CSDN原创文章,未经允许不得转载,如需转载请联系market#csdn.net(#换成@)

前端图片延迟加载的JS插件Echo.js

code.demo

<code>

<img alt=”Photo” src=”img/blank.gif” data-echo=”img/photo.jpg” />

<script type=”text/javascript” src=”dist/echo.js”></script><script type=”text/javascript”>// < ![CDATA[
Echo.init({
offset: 100,
throttle: 250
});

// Echo.render(); is also available for non-scroll callbacks

// ]]></script>

&nbsp;

</code>

site:https://github.com/toddmotto/echo

用于构建交互式图表的最佳 jQuery 图表库

grafico

对于JQuery图表来说,其重要的功能是以一个简洁和交互的方式展示繁杂的原始数据。这并不仅仅以各种颜色来渲染展示数据,而应该是更能够吸引读者和方便用户理解。

稍后介绍的某些javascript图表库,已经越来越流行了,因为它们有着相当吸引人的组件,囊括了我们已知的包括线状图,柱状图和饼图等7种图表类型。另外,这些js图表库提供一些有用的组件作为它们的可选项,比如说放大,缩小,这些工具能提供关于数据的更多信息,同时也提供一些选项对其进行定制。

 

用户通常遇到某些使用了兼容现代浏览器的HTML5的canvas特性的jQuery图表,并不能很好的与IE兼容。整体上,这些库集成了六种图表类型,比如散点图,饼图,柱状图,带点的折线图以及区域图。这些图表能够通过简单的配置就能展示多种图例,这将帮助人们清楚的分辨各图表项。

在这篇文章中,我们分享给读者的是15个图表库——各种从简单到复杂的高级图表,它们都能胜任。希望你们喜欢!

 

1. Chart.js : 使用HTML5 canvas的图表库

chartjs

Chart.js是一个令人印象深刻的基于HTML5的canvas特性构建的javascript图表库。目前支持六种图表类型(折线图,柱状图,雷达图,饼图,柱状区域图和极坐标区域图),而且这些通过一个独立的,不足5Kb的包来提供的。颜色,字体,加粗以及图表大小都是可以定制的。同时,图表也可以选择在加载的时候添加动画效果。

 

Source

 

2. xCharts : 基于数据驱动的图表

xcharts

xCharts是一个用于给网站创建具有漂亮的视觉效果和自定义数据驱动的图表的javascript库,它依赖于D3.js。基于HTML,CSS和SVG技术,xChart被设计成能够被动态,流式和开放的集成和定制。

由于xChart使用SVG技术,我们能够直接通过CSS生成大部分的我们定义的xChart图表。这意味着如果你愿意,你只需要做很少的控制就可以处理这些可视化的图表。定义图表风格的最好的方式是从包含的样式表开始,或者使用你的浏览器的元素监视器来查看每一个元素可用的CSS选择器。

Source

3. Sigma.js : 使用HTML5的canvas对象作图

sigma-js
Sigma.js 是一个使用HTML5 Canvas元素作图的免费开源的javascript图表库。它被特别设计成适合分享页面上交互的网络地图和浏览动态的网络数据库。这个js库以MIT协议分发。

Source

 

4. HighCharts

highchartjs

Highcharts 是一个纯粹使用HTML5/Javascript写的图表库,能向你的网站或者网络应用提供直观交互的图表。目前,Highcharts支持折线图,曲线图,面积图,面积拟合图,条状图,柱状图,饼图,散点图,仪表图,面积范围图,面积曲线图,条状范围图,气泡图,箱型图,误差线,漏斗图,瀑布流和极坐标图表类型。

Source

 

5.Fusion Charts

fusion-charts
jQuery 的FusionCharts插件帮助你增加交互式的JavaScript图表,在你的网站,移动端和企业级应用中绘图。它将FusionCharts套件XT的灵动和全面的特点与jQuery简易的语法融合在了一起

Source

 

6. Flot :  jQuery中引人注目的JavaScript绘图插件

flot
Flot 为jQuery准备的一个纯JavaScript绘图库, 重点在于使用简单,引人注目的界面和良好的交互特性。图的一些关键特性是通过开关,放大缩小和与数据点交互来控制的,此外还有它加入了简单工具提醒的功能

Source

 

7. JS Charts : 免费的JavaScript图表

jscharts
JS Charts是一个基于JavaScript的图生成器,它只需要很少或不需要编码。使用JS Charts来绘制图表是一个简单且容易的工作,因为你只需要使用客户端脚本(即通过Web浏览器操作)。不需要额外的插件或服务器模块。只引用这个脚本,准备好图表数据的XML、JSON或JavaScript数组,OK,你的图表已经就绪了!

源码

 

8. jQuery Sparklines

jQuery-Sparklines

这个jQuery插件直接在浏览器中生成波形图(小的内联图表),使用的数据可以是内嵌在HTML中或通过JavaScript提供。这个插件与大多数现代浏览器兼容,已经使用Firefox 2+、Safari 3+、Opera 9、Google Chrome以及Internet Explorer 6,7,8 & 9甚至是iOS和Android测试过。

源码

 

9. Morris.js : 描绘按时间顺序的线型图

morrisjs

Morris.js是一个使用jQuery和Raphael来轻松描绘时间线型图的轻量级框架。Morris.js最初是在howmanyleft.co.uk被用来作图的代码。现在他已经对全世界开源去扩展和分享。

资源

 

11. jqPlot

jqPlot

jqplot是jQuery这个JavaScript框架的绘图和图表插件。jqplot能生成优美的线条,包含诸多特性的柱状图及饼图,这些特性如:转轴的文本,趋势线的自动计算,工具提示和数据点突出,更为方便使用的合理缺省值。

源码

12. Grafico

grafico
Grafico是一个以Raphaël和Prototype.js构建的JavaScript图表库。这个库提供了一系列的图表,这些图片遵循Stephen Few和Edward Tufte奠定的指导方针。Grafico提供了漂亮的能够有效传达信息的图表。

源码

 

13. GraphUp

graphup

GraphUp是一个非常灵活且轻量级的jQuery (v1.4+)数据表插件。它使用颜色、柱形图和气泡来标识数据。

源码

14. dygraphs

dygraphs-javascript

dygraphs是一个开源的JavaScript库,它可以用来进行交互,生成以时间为序列的可缩放的图表。它的设计目的是用来显示允许用户浏览和诠释的密集数据集。你可以使用鼠标滑过时的值强调。单击并拖动来缩放。双击撤销缩放。改变数量并回车来调整平均周期。

源码

 

15. jsPlumb jQuery插件

jsplumb

jsPlumb这个jQuery插件为开发者提供了一种可视化连接网页元素的方法,大致与雅虎Pipes中使用相同的方式。jsPlumb允许你使用“plumbing”连接屏幕上的元素,如果支持的话也可以使用Canvas元素,老版本的浏览器可以使用谷歌的Canvas探索脚本来获得支持。jQuery拖动的全透明支持也包括在内,API也超级简单,而且脚本的压缩版本只有10.5K。

源码

10个最热JavaScript开源框架的社区活跃度对比

每个开源项目都会有属于自己的社区,社区的活跃程度也间接反应了该项目的活跃程度如何。本文挑选了目前最火的10个JavaScript开源框架,不妨来看看哪个是最活跃的项目。

社区能力也是决定JavaScript框架能否被开发者采纳的一个巨大因素。当考虑一个框架是否满足项目需要时,开发者需要考虑哪些因素呢?本文将深入调查活跃度最高的10个JavaScript框架。本文数据来自Ohloh.netGitHub

在过去几年,大量的UI库和框架涌现在开发者们面前,并且大多数都是开源的,关于它们的使用情况以及完整性,网上都有所描述。但人们在选择时,往往忽视了一些指标,比如强度、社区能力以及围绕该开源项目的整个生态系统,殊不知,这些指标都扮演着非常重要的角色。

Top 10项目

我们根据以上因素,深入社区挖掘出了当今热门的Top 10开源JavaScript框架,这些框架类型涉及到UI库、全栈框架等。这些热门的项目分别是:

 

  1. AngularJS
  2. Ember.js
  3. SproutCore
  4. Backbone.JS
  5. Knockout.js
  6. SpineJS
  7. CanJS
  8. Meteor.JS
  9. Derby.js
  10. Yahoo Mojito

 

我们会对这10个项目的社区规模、增长情况以及围绕该项目的整个生态系统项目进行统计。

月代码贡献量

下面这个图表反映了每个项目,每个月所有参与者的代码贡献量,这也可以直接反映出项目的活跃度。

从上图可以看出,Ember.js和Google的AngularJS的贡献量增长最快,而作为早期的领跑者SproutCore,从2011年12月开始,贡献量呈明显下降趋势。除了Ember.js和AngularJS,Backbone.JS和MeteorJS的贡献量也不容小觑。

参与项目的贡献者

统计项目一直以来的贡献者人数,也可以反映出许多问题,比如该项目的治理风格,许多项目都是由一些较小的团队来打理;当然,贡献者越多,问题修复速度就越快,文档可能越全面。

从上图可以看出,AngularJS和Ember.js的贡献人数是最多的,并且近期增长速度也相当快速。

 

项目的生态系统 

 

除了贡献者,基于该库所建立的项目以及项目拓展的整个生态系统也是社区力量显而易见的体现。这也表明,一个核心的项目并不总是独立的,拥有广泛的生态系统也是一个项目成功的关键。

一个开源项目的健壮性在一定程度的可以从它周围的项目来衡量。毫无疑问,Backbone.JS拥有非常庞大的生态系统,在整个行业中的使用范围也非常广泛。

全栈解决方案

因为全栈解决方案的适用范围可能与其他项目不同,所以我们对其进行了单独的研究。全栈解决方案包括一个客户端框架和服务器端框架;所涉及的代码量应该更大,随着时间推移,参与的贡献人数也会增加。

JavaScript的崛起

越来越多的开发者愿意投入时间和创建结构化方法来使用JavaScript,下图显示了自2011年初,使用该10大框架的开发者增长数。并且也说明了JavaScript正在试图吞并世界,2013年的平均数量几乎是2011年的两倍。

提交的代码行数

图中可以看出,所有参与项目的贡献者与所提交的行数存在一定的差别,这表明这些项目更易于开发者做出贡献,并且可以进行长期可持续发展。

社区规模和贡献者增长数量是一个非常重要的项目指标。虽然这些指标不能告诉我们整个故事,但对开发者来说,这些数据给他们提供了很好的说明,并且可以反映目前项目的投资情况以及基于其可行性和可持续性,帮助开发者做出一些决策,帮助开发者找到整个项目周期的临界点。

来自:InfoWorld

Web设计师和Web开发者之间的区别是什么?

Web设计师和Web开发者的概念难以分清楚。一个是有关网站的视觉或美学方面,被称为“前端”;另一个则是看不见的编码方面设计,被称为“后端”。那么,这两者之间有什么区别与联系呢?谁才是真实的设计师或开发者呢?

在日常工作中,你几乎在哪都能听到有人在讨论或者称自己是一名Web设计师或是Web开发者。那么,这两者之间有什么区别呢?谁才是真实的设计师或是开发者呢?

通常我们对Web设计师和Web开发者的概念分不清楚,两者之间既有区别又有联系。最大的差异是: 一个是有关网站的视觉或美学方面,被称为“前端”;另一个则是看不见的编码方面的设计,被称为“后端”。简而言之,漂亮的网站界面都是出自网页设计师之手,而牛逼强大的功能则是网页开发者的杰作。原文作者Carrie Cousins详细阐述了两者之间的区别与联系。我们一起来看下:

设计师的工作


首先,值得肯定的一点是,每种工作都有它存在的价值。

通常,Web设计师主要处理可视化布局的网站。他们通过使用图形和图形设计软件(Adobe Photoshop,Illustrator 和InDesign等)来创建可视化的Web网页,一旦完成后再由Web开发人员进行编码。

不是每个设计师都是懂编码的,但在某些情况下,有些工作团队能够独立完成网站设计。优秀的设计师在各种概念使用上运用自如,比如色彩的搭配、排版、空间关系以及用户体验等。

开发者的工作


虽然Web开发者的工作内容与设计师的相似,但是它们两者之间也存在不同之处。

Web开发者通常是负责网站的后端开发,这就要求他们掌握特定的Web语言。比如HTML、Javascript、JQuery 以及CSS。一般情况下,Web开发者不会注重视觉上的东西,但他们却很在意洁净的代码。

Web开发者通常被认为是使用左脑开发的人群。从技能角度上讲,技术能力和思维逻辑是必不可少的一部分。Web开发涉及到各个领域,包括计算机科学或编程。大多数公司需要这种组合技能。优秀的开发者通常会注重细节,并且关注每一处细节。

两种工作,同一个目标

无论是Web设计师还是Web开发者,他们都朝着同一个目标而努力——创建一款能吸引更多用户的网站或应用。

要做到这一点,设计和开发的出发点需要一致。一个优秀的网站应看着美观且运行良好。色彩和图形能够凸现名牌意识;界面能激发游客采取行动。

如今,设计师与开发者之间的界限越来越模糊,这是因为越来越多的设计师开始学习编码,开发者也开始密切关注设计理论。(这也是为什么有关设计和开发方面的教程如此受欢迎的原因之一)。

一起工作


设计师与开发者之间最难逾越的一条鸿沟便是两者在一起工作以及交流方式。当遇到问题时,双方各有各的偏词,之前我们也曾发过一篇《开发者和设计师,为何我们不能好好相处》。

下面这些技巧,能够帮助消除沟通障碍:

 

  • 避免使用行话。
  • 不要直接告诉对方应该如何看或者如何操作。如果你不知道如何解释,那么在会议上用草图或案例进行阐述。
  • 思想开放。设计师应当接受开发者的设计理念,开发者也应该积极接受设计师对用户体验方面的反馈意见。
  • 学习其他网站的创建过程。阅读你所不知道的内容并积极提问。

 

你会成为设计师兼开发者吗?

所有的这些差异似乎意味着,设计师和开发者是两种不同的工作或角色。

但是,事实并非如此。

当然,你也可以同时成为设计师兼开发者。越来越多的人们开始以这种方式来标榜自己,并且这种技能组合也逐渐变得炙手可热。设计和开发领域覆盖了大部分人群,可惜,有的设计师从未想过学习开发方面的知识;反之,开发者也亦如此。

原文出自:Designmodo