[转自知乎]前后端程序员的差别
作者:admin 日期:2016-01-24著作权归作者所有。
疑问已解决:vue.js在采用ajax方式读入数据后,无法激活slide插件的滑动行为已经解决
作者:admin 日期:2016-01-22在vue.js的git上面提交的issue:
- 以下是无法激活滑动的主要代码:
- <div id="slider" class="mui-slider" >
- <div class="mui-slider-group">
- <div class="mui-slider-item" v-for="el in list"><img :src="el.picUrl"> </div>
- </div>
- </div>
- <script>
- var vm = new Vue({
- el: '#slider',
- data: {list: [] }
- });
- // 读取图片slide
- mui.ajax({ url: "shopData/slidePic.json", dataType: "json",
- success: function(data){
- vm.list = data.list;
- mui("#slider").slider({
- interval: 3000
- });
- }
- });
- </script>
- ----------------------------------------------
- 以下是可以成功激活的代码:
- mui.ajax({ url: "shopData/slidePic.json", dataType: "json",
- success: function(data){
- for (var i = 0; i < data.list.length; i++) {
- $(".mui-slider-group").append(
- '<div class="mui-slider-item" ><img src="'+ data.list[i].picUrl + '"> </div>'
- );
- }
- mui("#slider").slider({
- interval: 3000
- });
- }
- });
- vm_slide.$nextTick(function () {
- // DOM 现在更新了
- mui("#slider").slider({
- interval: 3000
- });
- })
长沙react.js前端的工资待遇--刚听到的小道消息
作者:admin 日期:2016-01-12我跟一个创业团队的朋友A总聊天,得到的小道消息 :
--------------------------------------------------
A总 2016/1/12 9:36:42
仅作前端。
我 2016/1/12 9:37:09
A总 2016/1/12 9:37:34
百度,腾讯现在都极缺做react.js的人,据说这个技术出来满打满算不到1年半,会的人少的可怜
麻烦就是文档少,入门门槛有点搞,要好几个月才能真正上手项目。
练内功
作者:admin 日期:2016-01-09先摘一段“射雕”原文做开篇:
- 梅超风...忽地心念一动,朗声道:“马道长,‘铅汞谨收藏’,何解?”马钰顺口答道:“铅体沉坠,以比肾水:汞性流动,而拟心火。‘铅汞谨收藏’就是说当固肾水,息心火,修息静功方得有成。”梅超风又道:“‘姹女婴儿’何解?”马钰猛地省悟她是在求教内功秘诀,大声喝道:“邪魔外道,妄想得我真传。快走快走!”
有时候自我学习就象是外道练内功,不得其法而入,如果有个“高手”点拨一二,则融会贯通,大道可期。我每次见老高,就会找他问一些“大道”类问题。做为一个资深的后端程序员和总架构师,老高可能对于一些具体的语法或是工具,没有实际用过,但他对于整个前后端关联和概念性问题,却能提纲挈领。
这次跟他讨教,帮我具体解释了以下疑问:
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等前后端高手有交流,谢谢他们的指点。
后生可畏--跟17岁的程序员聊天
作者:admin 日期:2015-12-29今天一小伙在我群里散简历找工作。我要了一份简历看了看,又跟他聊了聊。
他最大的特点就是年轻,17岁,工作经历开始于今年。技能:网站div+DEDE+photoshop,传统意义上的前后端通吃。太熟悉了,因为我当年也是这样的岗位,只是我一点后端程序也不会。
他开的薪水要求不高,4K以内,很合理。对于不能配齐"整条战线"的单位来说,这简直就是理想的全能战士。不过,这种岗位也是最磨人的。啥都会,杂事多,意味着你不能专精一点。职业生涯的前两年,这是历练,时间长了,反而不如专精一个方向更好。
我也给他举了例子,就是PHP和设计都不会,只要专精bootstrap+少量jquery,也能有较高薪水。
我看了一下他做的单位的移动端页面。基本上就是典型的PC页改了一下文件头meta。无法体现复杂度。我建议他,如果要求职加分,最好是准备一个比较复杂的页面(比如电商类的购物车) ,把所有前端逻辑都用前端程序写一下,比如:手势、组件、加入购物车的前端数据交互、列表排序这些。---壹年前,这曾是我的短板,让我夜不能寐的短板。难题一旦越过,回望便平淡无奇。
这样的年轮人--年轻力壮,视野更宽。 如果学习得当,会让无数的“老师傅”背后发凉。
我要跟年轻人赛跑,也乐意给超越者指路。
近一个月来我知道前端招聘事宜
作者:admin 日期:2015-12-222015/12/22 11:14
chrome调试器查找外部模块文件中的函数定义的方法
作者:admin 日期:2015-12-20我当前面临的问题是,当一个页面,引用了几十个外部的插件库时,有时候仅凭插件名称,并不知道页面中的一个函数调用,是引用的哪一个库文件。因此要借助一些调试手段,chrome调试器有如下一些手段:
- 在调试器的network面板中,能看到本页面内所有的js外部引用,但仅为“引用”,这些js不一定被实际调用了。
- 如果是查找一个dom对象的行为,比如click,可以直接在event listeners中查到js调用。
-
注意这里有两个重要选项:Events Listeners的具体使用:ancestors(祖先元素)这个选项,是列出所有上级元素的事件,可以用来区别,是本身触发,还是父级元素触发framework listeners(框架事件),是选择,是否列出调用的js框架,如果未选中,会显示jquery.js为最终框架(一般我们不需要显示这个)
- 最复杂的情况,如果与行为无关,本页中只有一个函数钩子(比如查找上图中的aaa()定义部分 ),咱们需要查找“在其它模块的函数定义”时,则需要一步步的摸着石头过河:
- 当知道函数调用关系,可以设置断点时,使用f8为直接运行下一个断点。f10为从下一个断点处单步运行。
- 当不知道调用关系,只能步进调试---找到函数入口,然后用f11单步运行,shift+f11为越过当前函数(当前函数仍会执行);

我近期的前端学习重点-avalon/gulp/requirejs
作者:admin 日期:2015-12-14idangerous.swiper.js相关的学习笔记
作者:admin 日期:2015-12-13网站中使用中文个性字库字体--@font-face解决方案探索
作者:admin 日期:2015-11-03最近的项目有用到特别中文字体,最终效果如下图:
阿里图标库iconfont的一个协作功能Bug
作者:admin 日期:2015-07-09据我了解,长沙很多前端团队还没有使用图标字体(font-face)。
HTML中实现逐帧动画的思路-用tweenMax
作者:admin 日期:2015-06-19逐帧动画在FLASH中是很好实现的。但在HTML世界中,并没有一个很正统的方法。前两天看scrollmagic的示例文件,意外发现他用tweenMax实现的一个逐帧动画,把代码提炼出来做了以下这个DEMO:
http://contactu.cn/2015/test_frame/
知道了这个思路,那么就可以用其它的方法,比如setinterval等函数来实现了。
用timelineMax之类的强大工具,更可以实现各种播放控制,比如正反放、快进等。还可以用来做那种“拖动控制轴来转动物体”等控制动画。
---总之,只要能实现“时间线与图像”的结合,接下来如何控制时间线,就是tween类框架的强项了。
谢谢谢佳浩同学用css的方式实现了这个效果,使逐帧的方式更加丰富,主要代码如下。
点评:js优势是可以自由控制时间线,比如各种播放控制、事件响应等。css方式优点是渲染快,简便,css定义方便。
- .box{ width: 286px; height:222px; margin: 100px auto 0 ; animation: demo 1s infinite;}
- @keyframes demo{
- 0%{ background: url(img/1.png) center center no-repeat;}
- 20%{ background: url(img/2.png) center center no-repeat;}
- 40%{ background: url(img/3.png) center center no-repeat;}
- 60%{ background: url(img/4.png) center center no-repeat;}
- 80%{ background: url(img/5.png) center center no-repeat;}
- 100%{ background: url(img/6.png) center center no-repeat;}
- }
PC端快速搭建服务器环境,在手机上测试电脑里的页面
作者:admin 日期:2015-06-01原来要在手机上测试刚做好的页面,都是丢到服务器上去,然后用网址访问。改一次就要传一次,效率低下。
今天跟牛人学了一小手,直接把本地电脑定义为服务器,使用node.js。总之结果就是,操作很傻瓜(几分钟搞定),要访问的网页想定在哪个目录都可以。具体操作方法见下文:http://www.cnblogs.com/wangfupeng1988/p/4143996.html
Node.js下载地址:https://nodejs.org/#download
-------------------------------------------
然后手机接入局域网wifi,用浏览器,用IP地址访问电脑IP地址即可,比如:http://172.16.6.218:8081/demo.html