预览模式: 普通 | 列表

ajax多信号逻辑的promise写法实现

ajax的这种多信号量情况经常遇上。比如:先从服务器得到一个信号变量A,如果A为真,再从服务器获取信号B,B为真,再......如果用传统的回调方式写,Ajax就是一大堆的callback堆叠,看得头疼,而且不好一层层用函数分开。

 解决这个问题,用到jQuery的deferred对象(参见阮一峰原文):$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。

 我写了个简化后的例子: 

Javascript代码
  1. $.ajax("/api-a")  
  2.      .done(function(data){  
  3.           console.log("第1步完成");  
  4.   
  5.           // 如果第1步数据中的result允许,则第2步  
  6.           if(data.result){fun2(); }  
  7.      })  
  8.      .fail(function(){ console.log("第1步失败") });  
  9.   
  10. //第2步操作可以放到一个函数中,这样看起来代码更清晰  
  11. function fun2() {  
  12.      $.ajax("/api-b" )  
  13.           .done(function(data){  
  14.                console.log("第2步完成");  
  15.                console.log(data);  
  16.           })  
  17.           .fail(function(){ console.log("第2步失败") });  
  18. }  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4478

2015全年总结---电商前端探索

昨天,我所在的电商项目组已经放了假,今天正式开始休息。 我放年假后第一要事,是写总结。 如果对一年的成绩还算满意,此事则令人喜悦--保有初心,不在于走了多远,而要时刻明白自己身在何方。

经历:

1、2015年仍然做了不少大企业网站(PC端),值得一提的是博深集团、株洲轨道交通

2、跟共成团队合作了“云峰湖”、“拾得大地”两个较复杂的单页应用站(PC/移动端/响应式)

3、长沙银行新版改造

4、在YC电商团队短期工作,电商前端初探。

5、以顾问方式,参与ERP/XYG两个软件项目的界面改造(bootstrap/jquery)。

6、年末时,加入WK电商团队,电商前端再战 。

 

技术:

7、学习MVC/MVVM前端模式,项目中使用过avalon及vue.js

8、具体使用:mui框架,json解析,underscore,localstorage读写,前端的HTTP与缓存体系,iconfont(@font-face)

9、了解:gulp,webpack,requirejs,node.js

10、bootstrap+jquery插件

 

工具:

11、熟练sublime txt3+emmet

12、nodejs快速搭建本地环境

13、熟练chrome调试器

 

合作与分享:

14、实践了以顾问方式参与外包项目,日志计算工作量/取酬

15、与很多新老朋友,巩固联系、开始合作:老董、老高、草帽团队兄弟们、军亮、慧琼等

16、持续更新博客,分享进展,帮助同行

 

运动:

17、坚持跑步,完成了2个在线半程马拉松,10月长马(半马)完赛并创个人最好成绩。

18、参加HBD篮球队每周定期比赛。

 

2016愿景:

19、明年争取进入知乎/github,更多分享

20、完善整个电商前端技术线,以高效开发方式,做出1款较成熟产品

21、想在长沙组织一个持续前端交流的小圈子

22、官网改版

23、搬家到河西,离产业圈更近,运动环境更好。

写完。

分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4536

 我来说一下长沙前端开发岗位2016年的最新情况。我今年经历的几个长沙的电商公司,2015年上半年招前端的价码基本是5-8K。下半年,已经坐地向上翻了2K。2016年初,新的电商公司招熟练工的价格是8-13K,前端组长15K以下,游戏方向可能会稍高一些,万达写字楼那边有家游戏公司专门用“白鹭”引擎的。。

另外一个事实,我朋友深圳的开发团队(水平跟我还有较大差距),普通前端工资13K以上,还基本上留不住人。但我在长沙绝对拿不到13K这个数。这说明长沙的工资水平还是偏低的。当然,要看市场上有没有人可招。出10K在长沙招前端,已经很动听了,但有价无市。

主要技能还是html5+css3+jquery,一般都要求PC+移动端经验。以下是加分项:CSS类框架任选一(比如bootstrap),MVVM框架任选一(比如angular)、AJAX、HTTP、页面优化、加载优化、自动化工作流管理、各种CSS/js动画。游戏开发类,一些传统软件公司需要bootstrap类的界面前端开发,但此类人也比较少。

长沙一些中小团队,招人很难,尽管条件开得比较好(工资、奖金、休假、下午茶、环境)等,还是招不到牛人。或者换句话说,长沙市面上,根本没有散养的牛人。

坊内传闻,步步高云猴是长沙技术储备最丰富的公司。

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 15031

[转自知乎]前后端程序员的差别

 著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。
作者:匿名用户
链接:https://www.zhihu.com/question/39659771/answer/82457812
来源:知乎
 
我还要提醒大家别过分解读node,java语言为什么没有一个对应的名词呢?而Javascript有一个呢。所以别拿node跟人家装逼,本质就是Javascript语言,不过是插了翅膀。说白了,你用node那玩意,就好像一个穷逼(做的是事件驱动、异步编程、非阻塞IO小买卖赚的钱)进入了上层社会,那个装逼的过程。而当了好多年上层人士的java和C++,python等觉得你是个后进入圈子的暴发户。你们前端走的路,包括es6(国外有些大神对es6也有反对态度)、包管理器、加载器、打包工具、测试框架、QA 工具、MVC 框架和库、基于 Node 的 CMS 框架、模板引擎等。都是人家十几年前玩剩下的。而前端最值得装逼的本钱,那种java、C++等望而却步,就是你觉得很土逼的css、html,那个你觉得毫无高大上感觉的结构层和表现层,还有操作DOM、BOM的能力。后台开发永远会觉得你很牛逼,看看他们那无比崇拜你的小眼神,尤其看到你分析页面渲染过程,使用PS过程,切出页面效果,还有兼容问题处理。而当你跟人家谈论管理包、打包工具、测试工具、MVC,人家只能呵呵。看看前端MVC多么的挫,本来仅仅是整个网站架构的view层,自己居然分化出了所谓的MVC。你以为只有node下用gulp和grunt能开发出牛逼的自动化工具?人家java等是二货?只不过前端熟悉Javascript,自己的工具用自己的环境造罢了。我这么说不是要灭自己威风,助他人气势。我只不过要提醒大家我们的核心价值所在。
分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 25725

在vue.js的git上面提交的issue:

 
我在mui+vue.js构建一个slide-pic组件,图片数据用ajax方式获取,vm数据能获取到,dom也发生了相应的改变。但数据读入后,无法激活slide组件的滑动行为。
 
以下是我做的一些探索:
直接使用vue初始化数据(非ajax)可以激活滑动行为。
使用jquery的append方式,把数据结合到dom后,也可以激活。
我将mui的slide-pic组件换成另一个滑动图插件TouchSlide1.1后,同样的现象,用vm方式无法激活。
 
请问这是什么原因?到底是vue还是mui/TouchSlide 插件机制的问题。
 
XML/HTML代码
  1. 以下是无法激活滑动的主要代码:  
  2.   
  3. <div id="slider" class="mui-slider" >  
  4.      <div class="mui-slider-group">  
  5.        <div class="mui-slider-item" v-for="el in list"><img :src="el.picUrl"> </div>  
  6.      </div>  
  7. </div>  
  8.   
  9. <script>  
  10. var vm = new Vue({  
  11.   el: '#slider',  
  12.   data: {list: [] }  
  13. });  
  14.   
  15.   
  16. // 读取图片slide  
  17. mui.ajax({ url: "shopData/slidePic.json", dataType: "json",  
  18.      success: function(data){  
  19.           vm.list = data.list;  
  20.           mui("#slider").slider({  
  21.                interval: 3000  
  22.           });  
  23.      }  
  24. });  
  25. </script>  
  26. ----------------------------------------------  
  27. 以下是可以成功激活的代码:  
  28.   
  29. mui.ajax({ url: "shopData/slidePic.json", dataType: "json",  
  30.      success: function(data){  
  31.           for (var i = 0; i < data.list.length; i++) {  
  32.                $(".mui-slider-group").append(  
  33.                     '<div class="mui-slider-item" ><img src="'+ data.list[i].picUrl + '"> </div>'  
  34.                );  
  35.           }  
  36.   
  37.           mui("#slider").slider({  
  38.                interval: 3000  
  39.           });  
  40.      }  
  41.   
  42. });  
  43.  
此问题由VUE及MUI的技术版主解答了,较常见,用nextTick就解决了
 
代码如下:
XML/HTML代码
  1. vm_slide.$nextTick(function () {  
  2.  // DOM 现在更新了  
  3.  mui("#slider").slider({  
  4.  interval: 3000  
  5.  });  
  6. })  
 

 

Tags: mui vue slider ajax

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 29724

我跟一个创业团队的朋友A总聊天,得到的小道消息 : 

--------------------------------------------------

A总 2016/1/12 9:36:42

是的,现在做react.js前景很不错。那个人在他们公司月薪3万。
仅作前端。

我 2016/1/12 9:37:09
 
哇,我要加油了。

A总 2016/1/12 9:37:34
百度,腾讯现在都极缺做react.js的人,据说这个技术出来满打满算不到1年半,会的人少的可怜
所以到处抢着要。
麻烦就是文档少,入门门槛有点搞,要好几个月才能真正上手项目。 

 

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 24202

练内功

 先摘一段“射雕”原文做开篇:

XML/HTML代码
  1. 梅超风...忽地心念一动,朗声道:“马道长,‘铅汞谨收藏’,何解?”马钰顺口答道:“铅体沉坠,以比肾水:汞性流动,而拟心火。‘铅汞谨收藏’就是说当固肾水,息心火,修息静功方得有成。”梅超风又道:“‘姹女婴儿’何解?”马钰猛地省悟她是在求教内功秘诀,大声喝道:“邪魔外道,妄想得我真传。快走快走!”  

有时候自我学习就象是外道练内功,不得其法而入,如果有个“高手”点拨一二,则融会贯通,大道可期。我每次见老高,就会找他问一些“大道”类问题。做为一个资深的后端程序员和总架构师,老高可能对于一些具体的语法或是工具,没有实际用过,但他对于整个前后端关联和概念性问题,却能提纲挈领。

这次跟他讨教,帮我具体解释了以下疑问:


1、为什么,目前的购物车的体系,多采用分页面方式,比如“商品大类--商品列表--商品详细页---购物车管理页”,采购信息在浏览器端存储,用cookie或是localStorage跨页面传递/或是直接存后端数据库,为什么比较少运用单页面应用(SPA)?

--老高的解释是:移动端内存小,单页面方式可以有效的释放内存,SPA很难做到精准调度内存及其它资源(高手除外)。PC端因为内存大,反而无所牵挂。

2、当项目的逻辑关系比较复杂时,如果用科学的方法分析UML数据模型、画示意图、变量定名,这些工作一般由谁来做?

--老高解释是:UML有必要做,一般由总架构师来做,但是比较简单的项目,往往可以忽略,由前端人员也可以实施。

3、关于MVVM架构(angularjs/avalon/vue)的一些疑问,其实学习理论时,也大体了解“前后端解耦”的原理,但是跟后端人员真正沟通一下,才明白这样做的意义所在。老高的解释是,MVVM确实是可以让前后端人员分工,通过制订统一的类似json这样的数据接口,来进行前后端连接。

4、他提供信息:很多常用功能,比如“翻页功能”,成熟的MVVM体系,应该都有组件可用,不用自己从底层写起。

5、跟我讲解了一下“Http头”存储信息的原理,我回来以后,具体查询了一下头协议的概念。

6、探讨了一下“懒加载”及css3的calc()用法。

 

 

这些问题,最近也跟中亮、黄S、曾YH等前后端高手有交流,谢谢他们的指点。

分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 14878

后生可畏--跟17岁的程序员聊天

 今天一小伙在我群里散简历找工作。我要了一份简历看了看,又跟他聊了聊。

他最大的特点就是年轻,17岁,工作经历开始于今年。技能:网站div+DEDE+photoshop,传统意义上的前后端通吃。太熟悉了,因为我当年也是这样的岗位,只是我一点后端程序也不会。

他开的薪水要求不高,4K以内,很合理。对于不能配齐"整条战线"的单位来说,这简直就是理想的全能战士。不过,这种岗位也是最磨人的。啥都会,杂事多,意味着你不能专精一点。职业生涯的前两年,这是历练,时间长了,反而不如专精一个方向更好。

我也给他举了例子,就是PHP和设计都不会,只要专精bootstrap+少量jquery,也能有较高薪水。

 

我看了一下他做的单位的移动端页面。基本上就是典型的PC页改了一下文件头meta。无法体现复杂度。我建议他,如果要求职加分,最好是准备一个比较复杂的页面(比如电商类的购物车) ,把所有前端逻辑都用前端程序写一下,比如:手势、组件、加入购物车的前端数据交互、列表排序这些。---壹年前,这曾是我的短板,让我夜不能寐的短板。难题一旦越过,回望便平淡无奇。

 

这样的年轮人--年轻力壮,视野更宽。 如果学习得当,会让无数的“老师傅”背后发凉。

我要跟年轻人赛跑,也乐意给超越者指路。

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4821

近一个月来我知道前端招聘事宜

 2015/12/22 11:14

 
我一朋友招大咖,侯家塘,爱私厨~~ 招前端工程师 待遇:1W + 双休。上不封顶,根据个人能力往上翻!
岗位要求 :
1.HTML5
2.javascript、通过ajax获取服务端数据,会jquery或者zepto这两种库类的一种
3.有微信公众号轻应用经验
4.webapp经验
 
有意请联系,18707496023黄总

 
我一多年好友公司招 前端:
湖南五方科技有限公司, 保利国际广场(南湖路隧道口,交通方便)。 薪酬7k起,挖人你懂的--可以谈。
要求:电商方向,移动端熟练,HTML5+CSS3+JQUERY,公司稳定。
嘟哥我本人不接待咨询,其它具体情况请找联系人咨询。联系电话13975113466,QQ:34228910

河西大学城天马小区 ,移动运营商支系的APP团队,招C#程序员(APP项目 )2人,全职,10K以上,电脑设备可按员工要求采购。有意者请Q:1373326356高总,手机18711168102

我朋友某APP团队,招一产品经理,工作地点在河西大学城天马小区,待遇8-15K,其它面谈。有意者请Q:1373326356高总,手机18711168102
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4171

 我当前面临的问题是,当一个页面,引用了几十个外部的插件库时,有时候仅凭插件名称,并不知道页面中的一个函数调用,是引用的哪一个库文件。因此要借助一些调试手段,chrome调试器有如下一些手段:

 
  • 在调试器的network面板中,能看到本页面内所有的js外部引用,但仅为“引用”,这些js不一定被实际调用了。
  • 如果是查找一个dom对象的行为,比如click,可以直接在event listeners中查到js调用。
  • 注意这里有两个重要选项:
    Events Listeners的具体使用:
    ancestors(祖先元素)这个选项,是列出所有上级元素的事件,可以用来区别,是本身触发,还是父级元素触发
    framework listeners(框架事件),是选择,是否列出调用的js框架,如果未选中,会显示jquery.js为最终框架(一般我们不需要显示这个)
  • 最复杂的情况,如果与行为无关,本页中只有一个函数钩子(比如查找上图中的aaa()定义部分 ),咱们需要查找“在其它模块的函数定义”时,则需要一步步的摸着石头过河:
1、设置断点,使用source面板中的断点调试功能。
 
  • 当知道函数调用关系,可以设置断点时,使用f8为直接运行下一个断点。f10为从下一个断点处单步运行。
  • 当不知道调用关系,只能步进调试---找到函数入口,然后用f11单步运行,shift+f11为越过当前函数(当前函数仍会执行);
2、还要注意用"blackbox script"功能,把jquery等库文件“放入黑盒”,否则执行会在这些庞大的库文件中跑很久。

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 10519

 

  • 详细学习了avalon,兼顾读了下vue.js,此两类均为MVVM方式框架。目前avalon已经基本熟悉了双向绑定、路由体系。avalon跟jquery没有任何冲突,可以同时使用。
  • 把css的display:flex布局方式熟练使用,以后此类多列布局,都不再使用旧方式。-----为了更好的兼容微信浏览器(X5内核),将Flexbox内容加进emmet,以方便自己快速使用,如下:

查看更多...

分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6450

idangerous.swiper.js相关的学习笔记

前阵子几个项目都用到了swiper,使用过程中遇到的一些小问题,汇总下来供大家参考:

查看更多...

Tags: swiper

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 7785

 最近的项目有用到特别中文字体,最终效果如下图:

红线标记处均为字体,可选中,交互起来,比图片方便太多了。
解决思路就是将体积巨大的中文字库,取子集,只包涵要使用的那部分文字,因此体积就很小了(包含100字左右的中文字,也只有50K左右,如下图:)。英文字库因为本身就小,就没必要再这么做了。
 
为了实现以上“取子集”的目标,实际要解决的问题:
1、把字库由TTF格式自动转化为woff、eot、svg等兼容格式,并放到相应路径下。
2、自动分析并提取网站中用到特殊字体的文字-----这一点很重要,否则每次还要去人工整理,很麻烦。
 
以上是理论解释,解决方式主要有两条途径:
1、通过网站,国内目前只有:http://www.youziku.com/这一个站。我之前转化成功过,但前阵子出现问题,目前正在恢复中。上传个性化字体,要提请站长人工审核。站长服务意识不错,就是很忙。
2、本地用软件转化。我找到了一个很好用的软件:font-spider(字蛛)
 
使用方法网上有详细介绍。需要用node.js的npm方式安装。安装成功后,转化就很方便了,基本步骤是:
1、原始字库文件,必须是ttf格式的,如果没有ttf,要自己想办法转化好。
2、写好html+Css---举例:h2{font-family: 'xzst';}注意尽量把font-family写在最前面
3、一句代码就转化成功,太方便了!转化过程如图:
从此再也不用图片去实现个性字体了!
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5174

阿里图标库iconfont的一个协作功能Bug

 据我了解,长沙很多前端团队还没有使用图标字体(font-face)。

但我已经在两个移动端项目中使用了,好处很多--比如图标都是矢量的,大小、颜色、效果都可以任意控制。相比之下,使用图片缺点就太多了:比如变个颜色都要准备2张图,做响应式设计还要准备大小各一套等。图标字体的查询和管理,国内可能使用这个阿里的网站www.iconfont.cn。国外有一个名声很大的www.icomoon.io,我还没有仔细研究过。
iconfont提供了简单实用的协作功能,常用图标你可以考虑到这里找现成的。个性图标,可以自己做成SVG格式上传。团队成员可以互相使用、管理图标。比如可以由设计师专门负责查找、绘制、命名、上传图标,其它前端组成员,只需要使用即可。图标全部有名称、有简图,可以分项目管理,很是方便。在没有这种协作之前,开发组内部成员要共享图标,就必须由设计师提供图稿,很不方便,还要绞尽脑汁给图标命名。
 
这里要说的是,我发现了几个不太好用、或者说是BUG的地方:
1、登录很奇怪,目前只能使用新浪微博的帐号登录(想不通为什么阿里的项目不用自己的帐号体系)。
2、网站有时很慢,但是一翻墙就快了。(难道在国外)?
3、最大的问题,是我使用chrome时,发现“协作成员”那里,无法添加成功---可以添加、搜索到其它成员的帐号(新浪微博帐号),但是选中后再点“保存修改”,浏览器无反应。只到后来,我换了一个傲游浏览器试了下,才成功了。
 
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 9318