他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)用Phaser来制作一个html5游戏——flappy bird （一） - 无双 - 博客园
是一个简单易用且功能强大的html5游戏框架，利用它可以很轻松的开发出一个html5游戏。在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏：Flappy Bird，希望大家看后也能做出自己的html5游戏。大家可以先来试玩一下我已经做好的这个游戏，感受一下Phaser的游戏效果，游戏的完整代码我已经放到上了。支持的浏览器：IE9+、Firefox、Chrome、Opera、Safari以及移动端的能支持html5的浏览器，推荐使用谷歌浏览器，因为它性能最好。
phaser.js的源码可以到它在里去下载，游戏要用到的图片声音等素材资源请点击。Phaser的使用非常简单，只需要引入它的主文件，然后在页面中指定一个用来放置canvas的元素，然后实例化一个 Game 对象就可以了。
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&game&/title&
&script src="js/phaser.js"&&/script&
&div id="game"&&/div&
var game = new Phaser.Game(288,505,Phaser.AUTO,'game'); //实例化一个Phaser的游戏实例
我们来看看Phaser.Game这个函数都有哪些参数：
Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)
width: 游戏的宽度,也就是用来渲染游戏的canvas的宽度，单位为px
height: 游戏的高度，也就是用来渲染游戏的canvas的高度，单位为px
renderer: 使用哪种渲染方式，Phaser.CANVAS 为使用html5画布，Phaser.WEBGL 为使用性能更加好的WebGL来渲染，Phaser.AUTO为自动侦测，如果浏览器支持WebGL则使用WebGL,否则使用Canvas
parent: 用来放置canvas元素的父元素，可以是一个元素id，也可以是dom元素本身，phaser会自动创建一个canvas并插入到这个元素中。
state: state可以理解为场景，在这里指定state表示让游戏首先加载这个场景，但也可以不在这里指定state，而在之后的代码中决定首先加载哪个state。关于state我后面还会有详细的说明。
transparent: 是否使用透明的canvas背景
antialias: 是否启用抗锯齿
physicsConfig: 游戏物理系统配置参数
以上所有参数都是可选的，它们的默认值以及更详细的信息可以，一般我们只需指定前面那4到5个参数就行了。
实例化Game对象后，接下来要做的就是创建游戏会用到的各种场景了，也就是上面说的state，那么怎么才能创建一个state呢？state可以是一个js自定义对象，也可以是一个函数，只要它们存在preload、create、update这三个方法中的任意一个，就是一个合法的state。
//state可以是一个自定义对象
var state1 = {
preload : function(){ },
create : function(){ },
update : function(){ }
//state也可以是一个构造函数
var state2 = function(){
this.preload = function(){ };
this.create = function(){ };
this.update = function(){ };
//只要存在preload、create、update三个方法中的一个就可以了
var state3 = function(){
this.update = function(){
//当然state里也可以存在其他属性或方法
var state4 = function(){
this.create = function(){ };
this.aaa = function(){ }; //其他方法
this.bbb = 'hello'; //其他属性
其中的preload方法，是用来加载资源的，它会最先执行。create方法是用来初始化以及构建场景的，它要等到在preload里加载的资源全部加载完成后才执行。最后update方法是更新函数，它会在游戏的每一帧都执行，以此来创造一个动态的游戏。
在这个游戏中，我们会用到4个state，我们可以通过game.state.add()方法来给游戏添加state，然后用game.state.start()方法来调用state,详细信息请看
var game = new Phaser.Game(288,505,Phaser.AUTO,'game');
game.States = {}; //创建一个对象来存放要用到的state
game.State.boot = function(){ ... }
//boot场景，用来做一些游戏启动前的准备
game.State.prelaod = function(){ ... } //prelaod场景，用来显示资源加载进度
game.State.menu = function(){ ... } //menu场景，游戏菜单
game.State.play = function(){ ... } //play场景，正式的游戏部分
//把定义好的场景添加到游戏中
game.state.add('boot',game.States.boot);
game.state.add('preload',game.States.preload);
game.state.add('menu',game.States.menu);
game.state.add('play',game.States.play);
//调用boot场景来启动游戏
game.state.start('boot');
制作资源加载进度条
游戏要用到的一些图片、声音等资源都需要提前加载，有时候如果资源很多，就有必要做一个资源加载进度的页面，提高用户等待的耐心。这里我们用一个state来实现它,命名为preload。
因为资源加载进度条需要一个进度条的背景图片，所以在制作这个state前，我们还需要另一个最基础的state,用来加载那张进度条图片，我们命名为boot。
game.States.boot = function(){
this.preload = function(){
game.load.image('loading','assets/preloader.gif'); //加载进度条图片资源
this.create = function(){
game.state.start('preload'); //加载完成后，调用preload场景
Phaser中资源的加载都是通过
这个对象的方法来完成的,游戏实例的load属性就是指向当前游戏的Loader对象，在我们这里就是game.load。Loader对象有许多方法，不同的方法可以加载不同的资源，例如加载图片我们用的是game.load.image()方法，具体的方法列表请自行参考。
在preload这个场景中，我们需要把游戏后面会用到的所有资源都进行加载，然后还要展示一个加载进度条给用户看。Loader对象提供了一个
方法，只要把一个sprite对象指定给这个方法，那么这个sprite对象的宽度或高度就会根据当前加载的百分比自动调整，达到一个动态的进度条的效果。
game.States.preload = function(){
this.preload = function(){
var preloadSprite = game.add.sprite(50,game.height/2,'loading'); //创建显示loading进度的sprite
game.load.setPreloadSprite(preloadSprite);
//用setPreloadSprite方法来实现动态进度条的效果
//以下为要加载的资源
game.load.image('background','assets/background.png'); //游戏背景图
game.load.image('ground','assets/ground.png'); //地面
game.load.image('title','assets/title.png'); //游戏标题
game.load.spritesheet('bird','assets/bird.png',34,24,3); //鸟
game.load.image('btn','assets/start-button.png');
game.load.spritesheet('pipe','assets/pipes.png',54,320,2); //管道
game.load.bitmapFont('flappy_font', 'assets/fonts/flappyfont/flappyfont.png', 'assets/fonts/flappyfont/flappyfont.fnt');//显示分数的字体
game.load.audio('fly_sound', 'assets/flap.wav');//飞翔的音效
game.load.audio('score_sound', 'assets/score.wav');//得分的音效
game.load.audio('hit_pipe_sound', 'assets/pipe-hit.wav'); //撞击管道的音效
game.load.audio('hit_ground_sound', 'assets/ouch.wav'); //撞击地面的音效
game.load.image('ready_text','assets/get-ready.png'); //get ready图片
game.load.image('play_tip','assets/instructions.png'); //玩法提示图片
game.load.image('game_over','assets/gameover.png'); //gameover图片
game.load.image('score_board','assets/scoreboard.png'); //得分板
this.create = function(){
game.state.start('menu'); //当以上所有资源都加载完成后就可以进入menu游戏菜单场景了
上面我们提到了，也就是游戏开发中俗称的精灵，同样在Phaser中sprite对象也是制作游戏过程中用得最多的也是最重要的一个对象之一。我们可以用一幅图片来创建一个sprite,然后用Phaser提供给我们的众多属性和方法来对它进行操作。上面我们是利用game.add.sprite()来创建sprite的，并且创建后会自动把它添加到当前的游戏中，game.add代表的是对象，该对象提供了了一系列快捷方法来方便我们创建游戏的各种组件。我们这里制作的资源加载进度页面非常简单，大概就是下面这个样子：
制作游戏菜单页面
资源加载完成后就该进入到游戏菜单页面了,说是菜单页，但我们这里只是提供一个开始游戏的按钮而已，作为教程就别搞那么复杂啦。做好后的效果如下：
下面我们就来实现这个页面。
首先是背景图与地面，我们看到这两个东西是会动的，地面移动动的速度快一些，背景图慢一些，在Phaser中有专门的东西来处理这种效果，叫做，什么是TileSprite呢？TileSprite本质上还是一个sprite对象，不过这个sprite的贴图是可以移动的，并且会自动平铺来弥补移动后的空缺，所以我们的素材图片要是平铺后看不出有缝隙，就可以拿来当做TileSprite的移动贴图了。TileSprite的贴图既可以水平移动也可以垂直移动，或者两者同时移动，我们只需要调用TileSprite对象的autoScroll(x,y)方法就可以使它的贴图动起来了，其中x是水平方向的速度，y是垂直方向的速度。
game.States.menu = function(){
this.create = function(){
var bg = game.add.tileSprite(0,0,game.width,game.height,'background'); //当作背景的tileSprite
var ground = game.add.tileSprite(0,game.height-112,game.width,112,'ground').autoScroll(-100,0); //当作地面的tileSprite
bg.autoScroll(-10,0); //让背景动起来
ground.autoScroll(-100,0); //让地面动起来
然后来制作游戏标题，游戏标题flappy bird这几个字是一张图片，然后那个鸟是一个sprite，并且我们在sprite上执行了动画，使它的翅膀看起来是在动的。我要说的是怎么在sprite对象上实现动画。首先在加载鸟的图片时，我们加载的不当当就是一张鸟的图片，我们加载的是一个这样的图片：
我们看到这张图片有三只鸟，更确切的说是一只鸟的三个状态，或者说是动画中的三个帧。那我们怎样让他变成动画呢？在对象中有一个spritesheet的方法，就是专门用来加载这种多帧图片的，我们看一下这个方法：
spritesheet(key, url, frameWidth, frameHeight, frameMax, margin, spacing)
key : 给这张图片指定的名称，以后在创建sprite等对象时会要用到的
url: 图片的地址
frameWidth :& 图片中每帧的宽度
frameHeight : 图片中每帧的高度
frameMax : 最多有几帧
margin : 每帧的外边距
spacing : 每帧之间的间隔
我们上面那张鸟的图片，每一个鸟的宽高分别是34px和24px,所以frameWidth应该是34，frameHeight是24，然后我们这个动画有三帧，frameMax为3，帧与帧之间没有间隙，margin与spacing都为0。实际上spritesheet方法就是能让我们加载一个图片，并在这个图片上划分出帧来，以后使用这个图片的sprite就可以用这些帧来播放动画啦。要在sprite上实现动画，我们首先还得先定义一个动画，就是定义这个动画是由哪些帧组成的。sprite对象有个属性，代表的是Phaser中专门管理动画的对象：，该对象有一个add方法，用来添加动画，还有一个play方法，用来播放动画，它们具体的参数可以参阅文档。
下面再说一个非常重要的对象：，也就是组。组相当于一个父容器，我们可以把许多对象放进一个组里，然后就可以使用组提供的方法对这些对象进行一个批量或是整体的操作。比如要使组里的对象同意进行一个位移，只需要对组进行位移就可以了，又比如要对组里的所有对象都进行碰撞检测，那么就只需要对这个组对象进行碰撞检测就行了。下面我们要制作的这个游戏标题是由一张文字图片和一支鸟组成的，我们就是把这两个东西放在一个组中，然后来进行整体的操作。
game.States.menu = function(){
this.create = function(){
var titleGroup = game.add.group(); //创建存放标题的组
titleGroup.create(0,0,'title'); //通过组的create方法创建标题图片并添加到组里
var bird = titleGroup.create(190, 10, 'bird'); //创建bird对象并添加到组里
bird.animations.add('fly'); //给鸟添加动画
bird.animations.play('fly',12,true); //播放动画
titleGroup.x = 35; //调整组的水平位置
titleGroup.y = 100; //调整组的垂直位置
game.add.tween(titleGroup).to({ y:120 },1000,null,true,0,Number.MAX_VALUE,true); //对这个组添加一个tween动画，让它不停的上下移动
上面代码中的Tween对象，是专门用来实现补间动画的。通过game.add的tween方法得到一个Tween对象,这个方法的参数是需要进行补间动画的物体。然后我们可以使用Tween对象的to方法来实现补间动画。
to(properties, duration, ease, autoStart, delay, repeat, yoyo)
properties :& 一个js对象，里面包含着需要进行动画的属性，如上面代码中的 {y:120}
duration : 补间动画持续的时间，单位为毫秒
ease : 缓动函数，默认为匀速动画
autoStart : 是否自动开始
delay : 动画开始前的延迟时间，单位为毫秒
repeat : 动画重复的次数，如果需要动画永远循环，则把该值设为 Number.MAX_VALUE
yoyo : 如果该值为true,则动画会自动反转
最后是添加一个开始游戏的按钮。Phaser提供了对象让我们能很简单的实现一个按钮。
game.States.menu = function(){
this.create = function(){
var btn = game.add.button(game.width/2,game.height/2,'btn',function(){//添加一个按钮
game.state.start('play'); //点击按钮时跳转到play场景
btn.anchor.setTo(0.5,0.5); //设置按钮的中心点
Phaser中很多对象都有一个anchor属性，它表示这个物体的中心点，物体的位置平移、旋转的轴，都是以这个中心点为参照的。所以上面代码中我们要使按钮水平垂直居中，除了要把按钮的x,y属性分别设为游戏的宽高的一半外，还要把按钮的中心点设为按钮的中心。
最后我们把所有代码合起来，得到了menu这个state的最终代码，该state只需要一个create方法就行了：
game.States.menu = function(){
this.create = function(){
game.add.tileSprite(0,0,game.width,game.height,'background').autoScroll(-10,0); //背景图
game.add.tileSprite(0,game.height-112,game.width,112,'ground').autoScroll(-100,0); //地板
var titleGroup = game.add.group(); //创建存放标题的组
titleGroup.create(0,0,'title'); //标题
var bird = titleGroup.create(190, 10, 'bird'); //添加bird到组里
bird.animations.add('fly'); //添加动画
bird.animations.play('fly',12,true); //播放动画
titleGroup.x = 35;
titleGroup.y = 100;
game.add.tween(titleGroup).to({ y:120 },1000,null,true,0,Number.MAX_VALUE,true); //标题的补间动画
var btn = game.add.button(game.width/2,game.height/2,'btn',function(){//按钮
game.state.start('play');
btn.anchor.setTo(0.5,0.5);
第二部分教程：后使用快捷导航没有帐号？
只需一步，快速开始
查看: 17953|回复: 54
【前端开发是否必须会自己写原生JS】-蓝色理想前端开发话题第二期-|已结束|
UID606598在线时间 小时积分50464帖子离线17570 天注册时间
前端技术专栏话题讨论[索引与征集]
本期话题：
1.前端开发人员是否应该学会使用原生JS开发脚本？
2.只会jquery写脚本这样做合适吗？
3.网上找代码然后自己套进去修改对自己的职业发展有哪些好处和哪些坏处？
1.每次回帖奖励:&&10体力 , 奖励 100次, 中奖率&&100%
2.高质量回帖给与贡献奖励，随机选中三名参与者赠送头像卡。
【讨论前端开发如何入门】-蓝色理想前端开发话题第一期-|已结束|
第一期活动随机抽取的头像卡获得者为：
tangbao510[倒霉的豹子]3楼
noboat945 73楼（因为73楼是楼主更改为74楼获得）
----------------------------
本次活动随机获得头像卡的用户为
xmlovedoudou 24楼
myzhouolang 37楼
atlantis2007 39楼
本帖被以下淘专辑推荐:
& |主题: 22, 订阅: 14
& |主题: 57, 订阅: 6
UID648811在线时间 小时积分1525帖子离线17570 天注册时间
银牌会员, 积分 1525, 距离下一级还需 1475 积分
回帖奖励 +10
本帖最后由 Now 于
20:13 编辑
喜欢那种可以掌控大局的感觉，
我觉得还是先学好原生JS，
之后再学习JS框架应该都是触类旁通了。。。
熟悉了原生的JS，才会真正发挥出框架的优势
否则也就是做做小特效玩玩。。。
UID604224在线时间 小时积分1453帖子离线17570 天注册时间
银牌会员, 积分 1453, 距离下一级还需 1547 积分
回帖奖励 +10
对于这个讨论我体会比较深，刚开始学前端的时候是避开原生JS的，直接学的jQuery。
学习一周左右也能做一些效果了，当时的感觉是不学原生JS也可以。再过一段时间后，
就觉得做一些东西比较吃力，有很多东西根本就不理解，一些本质的东西根本没掌握
所以，对于jQuery等前端框架和原生JS的学习我的观点是：
1、熟练掌握1-2个主流前端框架：jQuery、prototype、YUI等等，能做到熟练开发
2、原生JS必须学会，而且要努力达到精通的地步，理解一些重要的基本知识：对象、原型、作用域链、闭包、DOM、BOM等等
3、对于第三个问题，没这么做过，但是感觉效果应该不是很好。对于练习来说，始终认为应该自己写代码，自己写思路。可以去
看别人写的代码，看别人写代码的方式，面向对象的写法，学习一些好的写代码的习惯。
对于开发，支持使用框架，这样能提高开发效率。但是，对于自己平时写效果，建议多用原生JS，可以加强对JS的理解。
如果有兴趣还可以把一些框架的方法用JS重写一下，比如jQuery的animate()方法，offset()方法等
感谢分享经历
UID492077在线时间 小时积分1080帖子离线17570 天注册时间
回帖奖励 +10
1.前端开发人员是否应该学会使用原生JS开发脚本？
从我自学JS多年的经验来说，一个好的前端开发人员是必须要学原生JS的，虽然现在有太多的优秀的JS框架帮我们前端开发者省心省力的进行开发工作，但如果对原生JS的不熟悉的话，我们最多也只是用好JS框架的皮毛，而无法理解它的精髓。
2.只会jquery写脚本这样做合适吗？
非常的不适合，原因上面已经说到过了，jquery也只是一些大牛帮我们把一些常用的功能提炼出来了，但是每个项目还是有非常多的不同点，要真正的用好JS把项目做到最好，非常需要脱离jquery的束缚去理解其背后的原理。
3.网上找代码然后自己套进去修改对自己的职业发展有哪些坏处？
在很久很久以前，我也觉得在网上找代码修改下就算会JS了，但那是年少轻狂时的无知，是对JS这门语言的无知，是对前端开发职业的无知，要真正做好一个前端开发工程师，是必须要自己写代码的，网上的代码只可去借鉴和学习，但不能轻易直接用，那不会让你的能力得到沉淀，而只会变得越来越依赖别人。
感谢分享观点
UID176496在线时间 小时积分8496帖子离线17570 天注册时间
回帖奖励 +10
只回答第三点:
3.网上找代码然后自己套进去修改对自己的职业发展有哪些坏处？
在网上找代码,拿来自己用,能看懂并修改,我并不觉得对自己的职业发展有啥坏处.
个人所会的东西,除了天生的,其他的都是通过后天学习得到的,
拿别人代码, 阅读并修改, 做为已用, 也是一种学习渠道, 了解别人的想法, 这个功能为什么这么写,
这么写有啥好处,有啥坏处, 当你能评估别人代码的优越度的时候, 你就已经不知不觉的提升了一个level.
==================================================
PS:关于1,2题的
JS是一把刀,&&Jquery是基于一把刀的另一把经过提炼的刀, 只要能把刀舞的虎虎生风,
那就是一把好刀, 所以问题不在于刀,而在于用刀的人.
UID603112在线时间 小时积分818帖子离线17570 天注册时间
回帖奖励 +10
我所理解的js：
跟后台完美交互
跟数据完美交互
跟用户添删改（dom） 这类 体验 完美 暴走
我所理解的 jquery:
动画效果..
为了一个普通的 ”交互“+”效果“ 去引入一个 至少 50KB的文件？
我认为还是原生的最好。并且懂原生js，就犹如掌握了一门动态语言。 掌握了jquery 就只是学到了一个 脚本
UID584019在线时间 小时积分5247帖子离线17570 天注册时间
回帖奖励 +10
1.前端开发人员是否应该学会使用原生JS开发脚本？
2.只会jquery写脚本这样做合适吗？
3.网上找代码然后自己套进去修改对自己的职业发展有哪些坏处？
三个问题其实是一样的，新手来说肯定应付不了全部原生写的脚本。所以他们会用JQ，但是用JQ之后，JS本身的知识也要不断学习，可以的话看看源码。我以前也是找代码，后来慢慢写点东西，虽然代码不那么好，但是感觉慢慢可以写很多了。还是实践最重要啊。JQ只是一个工具，如果没有要求不能用，我觉得没有坏处的。
UID66080在线时间 小时积分11645帖子离线17570 天注册时间
回帖奖励 +10
原生JS要学，但是实际工作中jQuery也不能抛弃
学原生JS是为了提高自己的技术，用jQuery是为了提高工作效率，不重复发明轮子
网上找代码要是能在理解后自己修改，不失为一种很好的学习方法，毕竟从已有的代码中学习他人的经验比自己凭空学习要高效
UID641013在线时间 小时积分180帖子离线17570 天注册时间
初级会员, 积分 180, 距离下一级还需 20 积分
回帖奖励 +10
1.一个前端如果不会写原生的JS 就算不上是一个前端 只能说是页面制作
2.只会写JQ 现在是写的很方便 以后的路就不好走了 也不好提高水平 只能提高效率
3.忙的时候就用现成的 不忙的时候就自己写着玩 不依赖网上的特效就行了
UID606598在线时间 小时积分50464帖子离线17570 天注册时间
faeng220 发表于
只回答第三点:
感谢小秦的参与，从另外一个角度讨论。
其实三点我都是想说的一个现象。只会用jquery做点动画，遇到需要写脚本的时候全部在网上找现成的套到页面里去。
当你能评估别人代码的优越度的时候, 你就已经不知不觉的提升了一个level.
感谢提醒，已将第三点改成：
3.网上找代码然后自己套进去修改对自己的职业发展有哪些好处和哪些坏处？
JS是一把刀,&&Jquery是基于一把刀的另一把经过提炼的刀, 只要能把刀舞的虎虎生风,
那就是一把好刀, 所以问题不在于刀,而在于用刀的人.
这句话绝对正确，疑问：不会JS只会jquery是否能把jquery这把刀舞的很好
UID594038在线时间 小时积分906帖子离线17570 天注册时间
高级会员, 积分 906, 距离下一级还需 94 积分
回帖奖励 +10
1.前端开发人员是否应该学会使用原生JS开发脚本？
& & 如果是做前端重构，作为优秀的前端是要会，重构比较偏向于设计。
2.只会jquery写脚本这样做合适吗？
& &这个我是根据公司的要求
3.网上找代码然后自己套进去修改对自己的职业发展有哪些坏处？
& &我是觉得没有什么坏处，有时候写不出，就可以借鉴他人的思路
UID363567在线时间 小时积分5305帖子离线17570 天注册时间
回帖奖励 +10
本帖最后由 WellFrog 于
13:48 编辑
我一直的理解，好比门派武功的区分，记得以前就和别人说过
1、原生的js，好比全真教的武功，一步步从基础开始（先练气再御剑），很长一段时间内和jquery有很大差距，掌握以后发现jquery只不过是另外一种武功，看一遍既会。且当学原生到一定程度之后，可以自创武功。但原生见效很慢，属于前期慢后期快，成长性高。
2、jquery，好比华山派的剑宗，直接取实用的部分（剑），拿来即用，实用快速为主（剑），原理部分的原生为辅（气）。jquery见效较快，属于前期较快后期较慢，没有气的支持，成长会越来越慢
3、网上找代码，好比赵敏找六大门派高手偷绝学，直接对症下药，需要什么拿什么用什么，只注重伤敌（结果），无所谓剑与气。见效奇快，属于前期快，后期慢。如果事后不研究原理，完全不会有成长
感谢生动的分享
UID176496在线时间 小时积分8496帖子离线17570 天注册时间
UED 发表于
感谢小秦的参与，从另外一个角度讨论。
其实三点我都是想说的一个现象。只会用jquery做点动画，遇到需 ...
JQuery代替不了常规的程序逻辑,代替不了if,else.
所以不存在只会JQuery舞的好而不会JS情况.
UID598075在线时间 小时积分264帖子离线17570 天注册时间
中级会员, 积分 264, 距离下一级还需 236 积分
回帖奖励 +10
1. 答案毋庸置疑，作为合格的前端人员必须学会原生js；
2. 只会写jquery脚本，可以加快开发速度，这样做是没有错，合不合适就看乙方的需求了。
3. 网上找代码嵌套使用，可以加快开发速度，这当然是好事情。但是，我要说的是，网上找的代码，自己最好能看懂代码原理，理解代码，优化修改代码，把代码变为自己的。
总之javascript的学习，要先有兴趣，原生的是基础，jquery只是工具而已。
UID598075在线时间 小时积分264帖子离线17570 天注册时间
中级会员, 积分 264, 距离下一级还需 236 积分
WellFrog 发表于
我一直的理解，好比门派武功的区分，记得以前就和别人说过
1、原生的js，好比全真教的武功，一步步从基础 ...
比喻的恰到好处，~\(≧▽≦)/~
UID418019在线时间 小时积分1593帖子离线17570 天注册时间
银牌会员, 积分 1593, 距离下一级还需 1407 积分
回帖奖励 +10
1.前端开发人员是否应该学会使用原生JS开发脚本？
应该学会，框架只是对常用方法的封装，而不是全部的前端解决方案，所以必须要学原生。
2.只会jquery写脚本这样做合适吗？
在前端职能要求不高的情况下是合理的，但从长久的技术储备和职业发展方向是不合适的。
3.网上找代码然后自己套进去修改对自己的职业发展有哪些好处和哪些坏处？
有好处，老板只关注结果，不注重过程。
而对自己，成长是一个过程，不是一个结果。所以需要去在过程中享受编码带来的种种快乐。
UID580873在线时间 小时积分2109帖子离线17570 天注册时间
银牌会员, 积分 2109, 距离下一级还需 891 积分
回帖奖励 +10
大家的意见都大同小异 这就不献丑了 12楼斑竹的比喻已经很到位了
UID598773在线时间 小时积分1098帖子离线17570 天注册时间
银牌会员, 积分 1098, 距离下一级还需 1902 积分
回帖奖励 +10
我觉得会jquery之类的框架也可以的呀，既然有省力的方法干嘛还要那么麻烦的方法呢，你要非说我不知道原理的话，那我想问一下，你知道弹出框alert是怎么实现的吗，怎么用二进制弄出来的吗，我估计没有几个人知道了，这个是不是就扯到硬件上面去了，越扯越远，你觉得你自己写一个框架自己很清楚，可是别人要用你的东西的时候你不觉得这个成本就上去了嘛，前端假如想成为一个行业的话，就必须要让更多的人参与进来，而不是把很多人推出去
UID650011在线时间 小时积分242帖子离线17570 天注册时间
中级会员, 积分 242, 距离下一级还需 258 积分
回帖奖励 +10
我来说两个事例：
1，大公司如腾讯，百度他们的面试题都是以原生为主，就光这一点，你就必须学好原生。
2，中小型公司，老板会说：我们的前端开发用的都是jq，你原生js怎么和我们契合，这类老板更看重效率，所以即使js很牛，jq我们也要花点时间过一下。
ps：我是先学的原生js，后来看的jq，所以只花了两天时间把一本jq的书过了一遍，然后就能随便用了。
UID513422在线时间 小时积分832帖子离线17570 天注册时间
高级会员, 积分 832, 距离下一级还需 168 积分
回帖奖励 +10
1.这要看你的职业规划，为了一份工作还是真的爱好前端，如果是后者，掌握原生的js是为以后的职业走的越深越远的基础。
2.jquery只是一个框架，不是javascript的代名词。jQuery适用环境也有限，对于那些性能要求很高的页面无法胜任。
3.好处不用说，快速响应需求。不利于成长。下次遇到类似的问题就束手无策了。
UID504022在线时间 小时积分620帖子离线17570 天注册时间
高级会员, 积分 620, 距离下一级还需 380 积分
回帖奖励 +10
1.前端开发人员是否应该学会使用原生JS开发脚本？
答：必须的。这是最底层。这个思想有了，特别是具有后台开发语言相关的oop思想。其它的什么js库都easy的。
2.只会jquery写脚本这样做合适吗？
答：适合与否看需求，如果原理没吃透，写不出来什么库的，应用嘛，还能胡胡任务。
3.网上找代码然后自己套进去修改对自己的职业发展有哪些好处和哪些坏处？
答：职业发展？这话题太了，down下来的只是解决一时之事，路走的不会太长的，薪水也加不了多少的？说到职业发展，你能写个extjs这个框架吗？如果能，我感觉你职业发展算是顺利的，否则你到40 ,50岁还是停在这一步的。一直是技术工人。所以说不上什么职业对大部分从事这个岗位的人来说。
到了年龄去创业都没资格的？为啥？你工作了这么多年，你只会这个，出了公司门，你还会啥？？所以职业生涯在这里千万不要提。
感谢参与。我觉得最好自己想做的事情就可以.
UID650011在线时间 小时积分242帖子离线17570 天注册时间
中级会员, 积分 242, 距离下一级还需 258 积分
zjct20000 发表于
1.前端开发人员是否应该学会使用原生JS开发脚本？
答：必须的。这是最底层。这个思想有了，特别是具有后台 ...
你的意思是我们没有未来？那你自己以后怎么走？
UID522151在线时间 小时积分2143帖子离线17570 天注册时间
银牌会员, 积分 2143, 距离下一级还需 857 积分
回帖奖励 +10
哈哈，用原生js写的是“装逼”么？
玩笑啊，别介意。
其实我现在也准备好好学习原生的js，对jquery依赖久了，感觉自己有些白痴，看github上原生js写的一些好的插件源码时，有些处理还不是很明白。
我起初是从jq开始的，不然对js产生不了兴趣。这个对初学者来说，兴趣为先，然后入内探究。
jq这个东西啊，是个库，小巧灵活，DOM操作华丽丽的，兼容性屌爆了，即便我熟练了js DOM操作，我都不想使用原生js来操作DOM。那么优秀的东西放着不用，傻逼么。
当然了，jq既然是个库，也有其局限性，我要实现MVC或者MVVM的模式管理代码，该怎么办?编程中的设计模式，算法啦，这些才是最本质的东西。js学习闭包，继承，模块化足矣，其它那些无关痛痒的，肯定需要库或者框架来做，自己不行，就站在巨人的肩膀上吧。
找插件的行为我比较赞成，项目本身就有时间限制的。牛逼了，就自己写；不牛逼，找来改改用，会改插件也是一种能力啊，你得能读懂人家的代码啊！
UID522151在线时间 小时积分2143帖子离线17570 天注册时间
银牌会员, 积分 2143, 距离下一级还需 857 积分
其实我一直想把一些插件实现的方法搞明白就行了，
然后自己动手封装。
github上优异的插件不用白不用，star那么多，经过了多少人的测试。代码健壮性可想而知了。
UID169718在线时间 小时积分180帖子离线17570 天注册时间
初级会员, 积分 180, 距离下一级还需 20 积分
回帖奖励 +10
这些也不过是工具，能用，会用，我觉得就可以了,有简单，易用的为什么不用，网上download下来的，理解了，就变成你自己的了，看多了，自己也会使了。
UID277459在线时间 小时积分2186帖子离线17570 天注册时间
银牌会员, 积分 2186, 距离下一级还需 814 积分
回帖奖励 +10
1、往往是用时方嫌会的少，原生javascript的dom操作要会，其他东西要知道。起码看代码要能读下来。
2、jquery这类库很方便，用好可以省时省力。
3、缺点：找代码下载，找的过程很费劲，还要甄别代码的质量。 优点：阅读别人的代码，可以学到新东西。
UID250085在线时间 小时积分2829帖子离线17570 天注册时间
银牌会员, 积分 2829, 距离下一级还需 171 积分
回帖奖励 +10
1.要具备手写原生JS的能力，新手最好从原生JS开始学习
2.现有的类库是能够极大的提高效率，进阶阶段可以通过学习类库，以读原码来提升水平
3.不排斥网上找代码，但不可一味抄，要理解，甚至优化它
UID621777在线时间 小时积分269帖子离线17570 天注册时间
中级会员, 积分 269, 距离下一级还需 231 积分
回帖奖励 +10
关键看人,不管是原生 jquery或copy别人的 了解到了原理就是自己的,第一步能写 第二步能懂 第三步能优化 第四步能衍生更好的语法和功能
UID516610在线时间 小时积分1111帖子离线17570 天注册时间
银牌会员, 积分 1111, 距离下一级还需 1889 积分
回帖奖励 +10
1.前端开发人员是否应该学会使用原生JS开发脚本？
2.只会jquery写脚本这样做合适吗？
3.网上找代码然后自己套进去修改对自己的职业发展有哪些好处和哪些坏处？
1.学是必须得学的....但时间应该会很久 必须得有耐心...水深这呢..
2.这个应该是没合适不合适一说.有利有弊...
3.好处是 同样的效果开发的周期会缩短很多，也有利于借鉴学习. 坏处 就是 别产生依赖感不思进取.别人的东西永远是别人的，自己的才是根本.
UID643273在线时间 小时积分67帖子离线17570 天注册时间
初级会员, 积分 67, 距离下一级还需 133 积分
回帖奖励 +10
不会原生JS就不是做前端开发的，本人目前在学习阶段，刚学时感觉有jquery就足够了，现在学了原生JS后感觉加载个将近100K的jquery是累赘，一切都原生开发特别爽，尤其是用原生写出jquery的方法，封装后自己来用，各种happy。不过工作时要效率的话，jquery也不错，呵呵
Powered by}