<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title><![CDATA[湖南长沙前端开发与培训－通途工作室 - 开发心得]]></title>
<link>http://blog.258754.cn/</link>
<description><![CDATA[前端开发,技术培训,动效研究,求职信息]]></description>
<language>zh-cn</language>
<copyright><![CDATA[Copyright 2005 PBlog3 v2.8]]></copyright>
<webMaster><![CDATA[dudu@258754.cn(嘟嘟)]]></webMaster>
<generator>PBlog2 v2.4</generator> 
<image>
	<title>湖南长沙前端开发与培训－通途工作室</title>
	<url>http://blog.258754.cn/images/logos.gif</url>
	<link>http://blog.258754.cn/</link>
	<description>湖南长沙前端开发与培训－通途工作室</description>
</image>

			<item>
			<link>http://blog.258754.cn/article.asp?id=278</link>
			<title><![CDATA[一页面试题]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[开发心得]]></category>
			<pubDate>Sat,20 Nov 2021 22:28:31 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=278</guid>
		<description><![CDATA[<p>&nbsp;<img src="http://blog.258754.cn/download.asp?id=146" width="500" height="667" alt="" /></p>
<div class="codeText">
<div class="codeHead">Javascri&#112;t代码</div>
<ol start="1" class="dp-c">
    <li class="alt"><span><span class="comment">//&nbsp;第1题&nbsp;</span><span>&nbsp;&nbsp;</span></span></li>
    <li><span>let&nbsp;str&nbsp;=&nbsp;<span class="string">&quot;2434cab&quot;</span><span>&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;arr&nbsp;=&nbsp;[...str]&nbsp;&nbsp;</span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;console.log(arr)&nbsp;&nbsp;</span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;sss&nbsp;=&nbsp;[]&nbsp;&nbsp;</span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">do</span><span>&nbsp;{&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;rrr&nbsp;=&nbsp;_.takeRight(arr,&nbsp;2)&nbsp;&nbsp;</span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;arr.length&nbsp;=&nbsp;arr.length&nbsp;-&nbsp;2&nbsp;&nbsp;</span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;sss.push(rrr[0]+rrr[1])&nbsp;&nbsp;</span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;<span class="keyword">while</span><span>&nbsp;(arr.length&gt;2);&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;sss.push(_.replace(_.toString(arr),<span class="string">','</span><span>,</span><span class="string">''</span><span>))&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;console.log(<span class="string">&quot;第1题答案：&quot;</span><span>,sss)&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;</span></li>
    <li><span><span class="comment">//&nbsp;&nbsp;第2题</span><span>&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>let&nbsp;sss&nbsp;=&nbsp;[]&nbsp;&nbsp;</span></li>
    <li><span><span class="keyword">for</span><span>&nbsp;(let&nbsp;i&nbsp;=&nbsp;1;&nbsp;i&nbsp;&lt;&nbsp;101;&nbsp;i++)&nbsp;{&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;flag35&nbsp;=&nbsp;(i&nbsp;%&nbsp;3&nbsp;==&nbsp;0)&nbsp;&amp;&amp;&nbsp;(i&nbsp;%&nbsp;5&nbsp;==&nbsp;0)&nbsp;&nbsp;&nbsp;</span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;flag3&nbsp;=&nbsp;(i&nbsp;%&nbsp;3&nbsp;==&nbsp;0)&nbsp;&nbsp;&nbsp;</span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;flag5&nbsp;=&nbsp;(i&nbsp;%&nbsp;5&nbsp;==&nbsp;0)&nbsp;&nbsp;&nbsp;</span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">if</span><span>(flag35){sss.push(</span><span class="string">&quot;bb35&quot;</span><span>);</span><span class="keyword">continue</span><span>;}&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">if</span><span>(flag3){sss.push(</span><span class="string">&quot;bb3&quot;</span><span>);</span><span class="keyword">continue</span><span>;}&nbsp;&nbsp;</span></span></li>
    <li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">if</span><span>(flag5){sss.push(</span><span class="string">&quot;bb5&quot;</span><span>);</span><span class="keyword">continue</span><span>;}&nbsp;&nbsp;</span></span></li>
    <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;sss.push(i)&nbsp;&nbsp;</span></li>
    <li><span>}&nbsp;&nbsp;</span></li>
    <li class="alt"><span>console.log(<span class="string">&quot;第2题答案：&quot;</span><span>,sss)&nbsp;&nbsp;</span></span></li>
</ol>
<p>&nbsp;</p>
<ol start="1" class="dp-c">
    <li class="alt">//第3题</li>
    <li class="alt"><span>let&nbsp;rect&nbsp;=&nbsp;document.getElementById(<span class="string">'rect'</span><span>)&nbsp;&nbsp;</span></span></li>
    <li><span>console.log(<span class="string">&quot;第3题答案：&quot;</span><span>,&nbsp;[rect.getBoundingClientRect().width,rect.getBoundingClientRect().height])&nbsp;&nbsp;</span></span></li>
</ol>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=274</link>
			<title><![CDATA[本次YT项目的一些收获]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[开发心得]]></category>
			<pubDate>Wed,02 Jun 2021 11:10:21 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=274</guid>
		<description><![CDATA[<p>今年4月1号开始在YT公司参与一个商业管理系统的开发，担任前端开发，跟十几个同事一起工作了二个月时间。</p>
<div>到今天项目已经基本告一段落。<span style="font-size: unset; color: unset; font-family: unset;">写写心得。</span></div>
<div><span style="font-size: unset; color: unset; font-family: unset;"><br />
</span></div>
<div>一是业务理解能力和抗压能力比较重要。项目刚开始时，碰到比较复杂的逻辑，我心理上有犹豫及抗拒，总觉得理解起来很吃力。尤其是在工期压力下，有时会感到头脑一片空白。</div>
<div>比如第一期开发阶段，需要构造一个自定义的日历。我跟后端同事小刘商量，由他来写算法，我前端只负责渲染。我坦承自己并不擅长日期算法。小刘却认为这个日期运算应该由前端的我来负责，我们两个互不相让，产生了一点分歧。后来组长曾工主动承揽了此算法，他花了较少的时间完成了，解决了这个小矛盾。</div>
<div>后来随着项目的进展，我才逐渐发现项目中有大量的日期运算。我查查文档、问问同事，不知不觉也熟练了这项技能。到二个月后的今天，项目没那么紧张了，我又系统地读了一下moment.js的文档，发现自己居然熟练了大多数常用方法，于是试着重新写一下那个日历，结果只用了大约1小时，就完成了。---这真是一个神奇的变化，也是我此次项目的第一个收获，就是提升了自己面对复杂情况的心理阀值。</div>
<div>&nbsp;</div>
<div>二、项目进度跟踪。 <span style="font-size: medium; font-family: 微软雅黑;">开发</span>团队有比较成熟的进度管理，每天做了几个页面，调试成功几个接口，都要登记在文档中，早会时组长点评。这样挺好，每个人都会按照工期推进，减少项目风险。我跟其它前端同事的分工也逐渐默契，互相取长补短。</div>
<div>&nbsp;</div>
<div>三、松散的分工模式。拿前端来说，几个前端同事其实是各写各的，没有公用的规范，也没有共同的JS工具和CSS片段。你愿意怎么写就怎么写，愿意放哪个目录就放哪个目录，只要最终页面逻辑能跑通。--我开始面对这个事实有点吃惊，但后来发现也没啥大问题。这样减少了团队磨合成本，VUE本身的模块化方式，也避免了变量冲突和样式冲突。这样做的缺点，就是每个人的&ldquo;埋头工作&rdquo;有时候是重复劳动，写了一大块儿，发现别人早就写过相同的代码了。</div>
<div>另外，有些同事的前端代码效能比较差，对于我这样的&quot;老师傅&quot;来说，总觉得这样做缺乏&ldquo;工匠精神&rdquo;，但是事实上并不影响最终使用。将来万一出了问题，会有人去改这些&ldquo;差代码&rdquo;，但至少不是我。</div>
<div>当然，这里面少不了梁工这位熟悉全局的神人，他凭一己之力，写了很多公共代码块，经常第二天上班被他告知，几个页面被加上了某个代码块。这家伙简单高效地把帮我们把代码升级了。</div>
<div>&nbsp;</div>
<div>确实，有些业务逻辑，讲一遍太麻烦，还不如直接帮着写了来得爽快。这种搞法，也适合于我们这种快组快闪的团队。</div>
<div>&nbsp;</div>
<div>四、隐患。项目交工后，还是要提炼经验，并把一些公共建筑搭建好。比如我们这个项目，我觉得可以固定下一些公共配置及工具，把环境变量的最佳实践方法整理好，写成文档，等等。</div>
<div>当然，我参与的很多外包项目，本来就是雇佣军，打一枪换个地方，成员不固定。既然成员不固定，沉淀经验也就无从谈起。<span style="color: unset; font-family: unset; font-size: unset;">最劳神的，还是公司的留守老员工，象老母亲一样把旧项目缝缝补补，案牍劳形。</span></div>
<div>&nbsp;</div>
<div>我自己这次收获颇丰：熟练了GIT操作，深入了VANT组件库，加强了moment运算。最大的收获，是了解了5人以上协作开发的一些普遍做法。</div>
<div>&nbsp;</div>
<div>当然，团队中坚的年轮人，为了项目做出艰苦赴出：连贯一二个月加班，有人身体出现不适，也还在坚持工作。深夜时他们还在钉钉上提BUG、凌晨时全组人测试跨天逻辑、每天中午所有人都趴在桌上午睡。<span style="color: unset; font-family: unset; font-size: unset;">每当看到这些，我都觉得IT人的谋生不易。</span></div>
<div><span style="color: unset; font-family: unset; font-size: unset;"><br />
</span></div>
<div><span style="color: unset; font-family: unset; font-size: unset;">对我这样一个老同志来说，能保证每天按时下班，每天搞搞锻炼，每天中午能在自己的折叠床上小睡一个午觉，真是千金不易的人生甘甜。</span></div>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=276</link>
			<title><![CDATA[涂鸦智能（杭州）外协工作小记]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[开发心得]]></category>
			<pubDate>Sat,19 Dec 2020 18:23:57 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=276</guid>
		<description><![CDATA[<p>&nbsp;涂鸦智能（杭州）外协工作小记</p>
<div>&nbsp;</div>
<div>此次应朋友公司邀请，我带领一个前端开发小组，为涂鸦智能提供前端开发服务。我们算是外包公司，负责即将上线的某内部平台的模块开发，技术栈是react+vue。</div>
<div>工作地点在杭州的涂鸦总部：华策中心。楼道里的指示牌没有细看，至少5层楼是属于涂鸦。办公区域员工坐得密密麻麻，听说已经达到2000人规模。网上搜到的公开信息：...《苏州高新区&middot;2020胡润全球独角兽榜》发布，杭州涂鸦信息技术有限公司排名第256位...<span style="font-size: unset; color: unset; font-family: unset;">2020中国新型创新企业50强第25位。---各方面来看，这都是一家大型科技企业无疑了。</span></div>
<div><span style="font-size: unset;"><br />
</span></div>
<div><span style="font-size: unset; color: unset; font-family: unset;">到处都是年轻人，听说互联网大厂的平均年龄线已经在29岁以下了。到来的第1-2天，我们经历了冗长的</span><span style="font-size: unset; color: unset; font-family: unset;">各种登记</span><span style="font-size: unset; color: unset; font-family: unset;">手续。大致包括登记身份、签订保密签议、领取工牌、安装员工APP、注册员工帐号邮箱及GIT帐号等。领我们办手续的老员工对有些手续都不是很熟练，只说每个新人都要经历这一关。到了第2天中午，我们才领到工作用的thinkpad（第一天发了苹果笔记本，用不惯，退掉了）。第3天领到了外接的显示器，和think一样都是全新未拆封的。从库房的门口看过去，一堆堆的新设备堆在那里，宣示公司开疆拓土的硬实力。</span></div>
<div><span style="font-size: unset;"><br />
</span></div>
<div>公司内网有5种不同的权限，为不同层级的使用者提供。也有很多智能设备，门禁刷脸异常灵敏，在镜头里略略停留就能成功。面试区旁边是专门的电话亭，据说隔音效果很好，专属通话可以避开大办公室的嘈杂。暖气很足，我呆了两天就放弃了秋裤。每一排座位旁边都有一台空气净化器。</div>
<div>&nbsp;</div>
<div>公司整体装饰是互联网的作派。员工多、东西多，但是堆得很整齐，加上黄色的吉祥物公仔加小绿植的点缀，办公区并不显得市侩。</div>
<div>&nbsp;</div>
<div>我们这个项目，因为工序的关系，暂时还没有很赶进度，所以压力不大。我有时间，观察一下陌生的城市、新的组员、新的合作伙伴--总归跟我生活了很多年的长沙不一样。边学习一些新的技术，边跟一些很久没聊过的老朋友在线聊聊天。有几个老友也是技术人，他们很想知道外包是怎样一种感觉。</div>
<div>&nbsp;</div>
<div>deadline的压力当然是有的。当然最终目标也确信能达成的，收入是能兑现的。在此之外，异地工作适合那些乐于拥抱变化的头脑。</div>
<div>中午能在陌生的沙发上睡个柔软的午觉。晚餐跟打饭的大爷闲聊几句，发现了早餐的肉包子和油炸土豆饼实在是合我口味。餐厅充个一百元的会员，买单时方便很多。请刚认识的涂鸦的小妹子吃零食，她热情地指点我们周边的交通出行和几种手机挣闲钱的办法（不馈是电商专业人士！）。下班后，走10分钟到酒店里，边看篮球赛，边在网上跟人下几盘围棋，不用担心孩子的学习。缠绵一周的冷空气终于走了，明天阳光充足又是周末，我们做了准备，杭州西湖去转转。</div>
<div>&nbsp;</div>
<div>今天早上，在华策中心地库找餐厅入口，向随便碰到的一个大哥问路（用普通话），他立即问我，你是湖南人吧？我说是呀，这你也听得出？纳米级微不足道的邂逅，事后回忆却总是让人想笑。</div>
<div>&nbsp;</div>
<div><img src="http://blog.258754.cn/download.asp?id=145" alt="" /><img src="http://blog.258754.cn/download.asp?id=144" alt="" /></div>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=267</link>
			<title><![CDATA[面试前端岗位的一次经历（长沙）]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[开发心得]]></category>
			<pubDate>Thu,15 Oct 2020 18:16:54 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=267</guid>
		<description><![CDATA[<p>我打算在含浦、洋湖、后湖这个3公里圈子里找份前端工作。上周通过BOSS直聘联系到后湖的一家公司，基本条件和待遇双方都符合，于是约定面谈。</p>
<div>&nbsp;</div>
<div>那天我提前10分钟到了，公司在后湖的创业区，环境不错，就这一点来说，心理加分。但是他们公司并没有挂牌，公司也没人值守，我没找到是具体哪一间房。我在前台坐了一会儿，L经理一行三个人才到公司，说是刚下火车，刚从外地回来。</div>
<div>&nbsp;</div>
<div>寒喧两句，一位黑色西装的W经理跟我交流技术细节。可能是我的工作年限比较长，简历上列的项目太多，W经理都没怎么问我技术细节。W经理直接跟我说了一个需求，让我描述下实现思路。我没听懂他要的是什么，另外我想，组件的功能实现，难道不是产品经理的活儿么？我可是面前端岗位呀。</div>
<div>&nbsp;</div>
<div>W经理重复了两次，我还是没搞清他到底要实现什么。是要我做功能分析？还是UI设计？还是前端技术架构？要说这几门我倒是都会，就是真没听懂他的思路。</div>
<div>&nbsp;</div>
<div>老鸟跟新人的区别，就是我碰到不会或是不理解的东西，会接受现实，并从容地应对。没听懂就是没听懂，可能是你表达不好，也可能是我没有这个经历，&ldquo;只要你给我时间，我一定能搞懂。这世界上没有听不懂的需求。&rdquo;</div>
<div>&nbsp;</div>
<div>W经理最后放弃了描述，他有点不服气。向L经理示意可以直接谈待遇了。我说：&ldquo;不考核下我的技术了？&rdquo;W可能感觉有点被动（被应聘者反将），于是他说也行，那就考核几个点吧。问了几个问题，我记得的有：</div>
<div>VUE-CLI路由类型--我说分为hash和history，他又问我两者区别，我坦承不了解，工作中没用过，但我觉得百度一下就行了。</div>
<div>组件传数据的几种方式--我说了最典型的三种，他说还有更多的没有。我说我查过文档，应该还有更多，但工作中没用到就暂时没去了解。</div>
<div>es6跟组件功能有什么联系？（仿佛如此）----我说es6是一种技术手段，跟功能设计没啥联系。不过我补充了一下我使用es6与lodash库的一些经历。</div>
<div>最后W经理让我看了他们的后台界面，问我，如果只给一个功能描述，是否能实现从&ldquo;功能设计-UI交互设计-前端编码&rdquo;这一系列工作，我说我可以，但是我觉得这应该由团队来实现，而不是我一个人。</div>
<div>&nbsp;</div>
<div>最终还是没有谈拢，原因如下：</div>
<div>团队感觉太小太新，人手不齐。从办公室的布置（只放了几张桌子和刚组装完的电脑）看得出来。虽然L经理说他们张家界还有几十人的团队，但长沙这边确实看不到人。</div>
<div>L经理说他们并不缺钱，但我觉得如果属实，公司应该布置得更正式一些。然后招人进度也不会象目前这样，如果引入一个有力的HR来专门做招聘工作，长沙各种类型的员工还是招得到的。如果连招人这一点都无法保障的话，我只能说这个团队还是缺乏执行力。</div>
<div>虽然承诺了他们招聘事宜上的顶薪，但是要9-8-6的工作制，晚上到8点，每周6天。如果有团队支持，我觉得还勉强可以，但是把几个岗位都堆给我，我觉得我可能承受不了这个工作量。</div>
<div>&nbsp;</div>
<div>我还在等更好的机会出现。&nbsp;</div>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=266</link>
			<title><![CDATA[北京50天项目收获]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[开发心得]]></category>
			<pubDate>Thu,17 Sep 2020 18:58:33 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=266</guid>
		<description><![CDATA[这次赴北京，参与中科院某院组织项目，历时近一个半月。整个项目组由8个不同的单位派员组成，前端人员十多人。<br/>项目采用前后端分离，前端框架VUE+element ui。也使用了原生SVG做一些控件的开发。<br/><br/>我担任前端工作：<br/>1、负责搭建整个项目的前端框架和主体逻辑。撰写主干代码和路由表，做模块化的总体规划与示例。子单位只能在他们固定的目录，写固定名称的组件（我们称之为“槽位”），所以我们统筹组需要在原型设计的基础上，提前定出槽位。这个提前做的工作有时间要求，否则子单位不好开展工作。另外前期槽位如定得不合理的话，后期代码编写会有麻烦。我们统筹组总体还是达标了。<br/>2、为各单位提供前端解释与咨询。各单位进场时间有前后，对项目理解也不一致。因此统筹组要帮助他们理解进场逻辑，并写出合格的组件。<br/>3、以下主要是我们内部工作。安排人员开发几个重点组件（拖拽树、甘特图、圆形导航），这几个重点组件涵盖近二分之一的应用场景，非常重要。我做为前端组长，安排了专人来开发，追进度、规划要暴露的接口、做压力测试。（后文详细阐述）<br/>4、使用element组件构建约20个页面。中间含有大量的列表、表单、弹窗。在element基础上也另外封装了一些组件。比如封了一个可拖动的el-dailog。<br/>5、对全局scss的定义：使用了内置的element-variables变量文件，统一颜色及组件外观。<br/>6、使用vuex进行跨组件通讯。<br/>7、大量的api请求和前后端联调工作。（后文详细阐述）<br/><br/>三个组件的功能描述：<br/>1、树组件：<br/>这个树组件我们内部命名为gtree（类似脑图），节点上要通过拖拽行为增加子节点。树图与数据双向交互，节点可增、删、改。<br/>我们使用了go.js（破解版）构建。<br/>这个树的核心代码由黄工写的，外部事件由我进行定义和调试。<br/><br/>2、甘特图：<br/>这个组件先后开发了两版。之前版本由赵工写的，性能方面有些问题。后面这一版由黄工写，外部接口由小周进行调试。<br/>这一版避免了数据条数较多时的卡顿问题，在上下连续拖拽和展开时做了逐步加载，这是一个重大的升级。<br/>“时间条”从头开始就是黄工写的，可以拖动移动，也可以拖动改变大小。<br/><br/>3、圆形导航：<br/>这个圆形导航黄工写了SVG的环状实现。这个组件我全文reivew了代码，已经基本掌握。<br/>环状实现用的SVG的原生PATH对象，这部分体现出黄工的算法功底。<br/><br/>以下谈谈我的收获：<br/>1、前后端联调涉及大量的数据处理，要熟练地使用ES6语法和lodash库。对我本人来说，以前这方面实战得较少，这次跟小周、小任学了不少语法和技巧。<br/>2、图形算法方面，黄工表现出非常高的开发效率。他对算法很熟，比如将四个数组转化成四个同心圆，并进行均分切割，再得到PATH对象。他对DOM模型很熟，比如手写了可拖拽变换宽度的长方形。文档阅读能力也很强，他读了gojs的英文版的官方文档，才完成了gtree的所有功能。我除了学习他的构建思路，还跟他学到了算法、控制台debugger的一些技巧。<br/>3、对于VUE工程化、同步协作方面，有了一次完整的实践。比如模块化、路由、组件定义的粒度、VUEX、env环境变量的使用。<br/>4、对后端接口调试有了比较完整的认识。比如HOST切换、数据异常时的一般呈现、数据前端加密、axios的封装等。<br/><br/><br/>接下来的研发想法：<br/>1、重点研发一下SVG图形写法（简单的用原生，复杂的用框架）。争取能自如地实现SVG图形化。<br/>2、总结一下lodash的各种用法，尤其是跟日常工作相关的技法。<br/>3、建议使用postman用到开发中，后端测试完样例，再交给前端，可较大提升前后端协同能力。<br/><br/><img src="http://blog.258754.cn/download.asp?id=137" border="0" alt=""/><br/>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=264</link>
			<title><![CDATA[一个阿里云帐号，只能对应一个备案主体]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[开发心得]]></category>
			<pubDate>Wed,06 May 2020 09:15:14 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=264</guid>
		<description><![CDATA[<p>&nbsp;我刚咨询了阿里云客服：</p>
<p>一个阿里云帐号，只能对应一个备案主体。</p>
<p>可以用邮箱做为主ID来注册阿里云帐号。也就是说，对于那种一个管理员管理多个备案的情况，可以用一个手机、多个邮箱组合，来注册多个阿里云帐号，进而达到管理多个备案主体的目标。</p>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=256</link>
			<title><![CDATA[2017年总结--写于2018年初]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[开发心得]]></category>
			<pubDate>Mon,19 Feb 2018 14:15:16 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=256</guid>
		<description><![CDATA[<p>经历：</p>
<div>今年主要做的都是移动端项目，仅有的三个PC端项目中，也都包含了移动端部分。</div>
<div>有两个项目做得苦，一个是项目不由自主，自己的事做完了，但是同伴没有时间推动，我做为主导人又不能辜负客户，这种情绪很折磨人。还有一个IRH项目，是一团乱麻，前后端沟通成本太高，虽努力推动，但始终无法着力，最终不得不放弃。放弃之后，如释重负。</div>
<div>也碰到了几个解决起来很吃力的技术问题，当然最终还是解决了。越过大山之后再回望，刚经历的也不过就是个小山包。真正的难题，是那些未知的迷雾，不声不响的让自己绕圈。</div>
<div>&nbsp;</div>
<div>技术：</div>
<div>2017年所有移动端项目都使用了vue2.0，到下半年组件化程度更深。年底的最后一个项目中，甚至在非SPA架构中，直接使用了.vue的单文件组件。组件化的积累已经很多，明年肯定会过渡到webpack方式进行开发。</div>
<div>&nbsp;</div>
<div>另外扫平了协作体系中一系列问题。比如mock测试、与后端的合作。这不光体现有技术上，很大程度也体现在与真正的后端人员、后端团队的协作与沟通。今年的IRH项目中，我思考不足，接下这种需要升级，需要兼容老接口的项目，又没有对后端提出明确的限制条件，结果导致前后端磨合出现大问题。开始的几天，光是跨域、列表格式、出错形式，都花了几个整工作日磨合。接下来，要去猜解他的技术文档，要一层层的去剥离页面逻辑。事实证明，这种类似行业ERP的项目，逻辑复杂，时间紧迫，因此最好是在一起工作，而不宜采用外包形式。</div>
<div>当然，IRH项目，催生了我对于组件化的认识，尽可能的组件化。感谢老白，提供了ajax过程中的promise思路。在我后几个项目中，利用axios主导的ajax体系，利用单例定义、拦截器、promise，对ajax请求进行了较完整的封装，彻底解决了请求方向的问题。在原型阶段引入easy mock，可以在后端未就位的情况下，模拟较复杂的接口情况，让前端提前进入角色。</div>
<div>&nbsp;</div>
<div><span style="line-height: 1.45;">另外一个项目，远在甘肃的嘉优购电商项目，则与之有不同的走向。这个项目，从原型开始，就由我在主导需求与接口。后端程序员按照我的要求在写接口。当然，此项目总体逻辑比IRH要简单。通过这个项目，我把一些知识点，提升到了实战程度。比如APIcloud打包、高德地图的各种应用、postman的测试技巧。apicloud将嘉优购商家端打包成APP这个过程中，让我接触到一个新的知识领域。实战中理解了从JS到APP，到底发生了哪些事情。对apicloud stodio工具和打包过程、原生API、驱动硬件，有了一定理解。也让自己成长为一个&ldquo;产品开发者&rdquo;，而不仅是一个前端程序员。毕竟，只有能够完全打通&ldquo;需求-原型-设计-前端-后端-</span><span style="line-height: 1.45;">打包&rdquo;的全过程，才算走完一个完整的产品历程。这一天，对我来说，来得太迟。</span><span style="line-height: 1.45;">在大分工的前提下，个人英雄出现的机率更低了。</span><span style="line-height: 1.45;">在后端这一块，我仍然是外行，只是通过前后端分离的模式，我可以对后端提出要求，也算是&ldquo;打通了后端&rdquo;。</span></div>
<div>&nbsp;</div>
<div><span style="line-height: 1.45;">对于地图应用这一块。从年初的云端湖项目的行车路线，到嘉优购项目的高德地图定位、云图、地图控件，把要用到的知识点，都经历了一下。</span></div>
<div>&nbsp;</div>
<div>API接口规范方面，在年终的金圣达项目中，仍由我来设计接口。这时我终于可以收拾起前两个项目的血汗经验，进行比较规范的接口定义，与后端的合作也比较友好。</div>
<div>&nbsp;</div>
<div>对于很多人关心的VUE第三方UI框架这块儿。今年我还是以使用YDUI和element-ui为主，年后打算在电商项目中引入一个&ldquo;有赞vant&rdquo;组件库。VUE的生态已经足够丰富，该有的都有了。---在组件方面，我已经脱离了心理依赖。</div>
<div>&nbsp;</div>
<div>学习方面，入手了两个VUE相关的慕课网课程，争取早日看完。</div>
<div>&nbsp;</div>
<div>2018愿景：</div>
<div>VUE提升到webpack开发方式。</div>
<div>继续实战APP开发。可尝试小程序。</div>
<div>做1-2个自己的小产品。</div>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=254</link>
			<title><![CDATA[常用前后端协作说明]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[开发心得]]></category>
			<pubDate>Thu,01 Feb 2018 08:49:42 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=254</guid>
		<description><![CDATA[<div>1、对于要带权限访问的页面，首先调用全局接口/login获取返回的token和过期时间expire（单位：秒），token请自行保存客户端，过期时间expire默认30天过期，请提前比如10分钟进行过期，以免过期导致业务异常。</div>
<div>2、步骤1获取的token，每次请求调用鉴权页面时，都需要把token附带在头部Header中（由于token会存在特殊字符，不在url中传递）如：token:&quot;步骤1获取的token串&quot;</div>
<div>3、post格式前后端约定：前端请求头部参数格式需要设置Content-Type：application/json，后端post：$json_info = $HTTP_RAW_DATA</div>
<div>4、一般的查询request格式: /aaa<span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">?type=1&amp;age=16 &nbsp;分页请求：/bbb</span><span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">?page=3</span></div>
<div>5、response总原则：1）body 直接就是数据，不要做多余的层次包装。2）错误/正确是两种不同的结构，<span style="line-height: 1.45;">出错时的返回数据式</span><span style="line-height: 1.45;">统一为</span></div>
<div><span style="line-height: 1.45;">{</span></div>
<div><span style="line-height: 1.45;">&nbsp;&quot;code&quot;:401,</span></div>
<div><span style="line-height: 1.45;">&nbsp;&quot;msg&quot;:&quot;相应的出错信息，方便前端提示&quot;</span></div>
<div><span style="line-height: 1.45;">}</span></div>
<div>&nbsp;</div>
<div><span style="line-height: 1.45;">code具体对应说明详见全局返回码说明。</span></div>
<div>&nbsp;</div>
<div>6、正确时的&ldquo;<span style="line-height: 1.45;">列表&rdquo;返回结构：</span></div>
<div>{</div>
<div>&nbsp;&nbsp;&nbsp;&quot;total&quot;: 9,&nbsp; &nbsp; //总条数</div>
<div>&nbsp; &nbsp;&quot;page&quot;:***, &nbsp; &nbsp;//当前页码，第1页序号为1，不为0</div>
<div>&nbsp; &nbsp;&quot;pagesize&quot;:5, &nbsp; &nbsp;//每页条数</div>
<div>&nbsp; &nbsp;&quot;items&quot;: [</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<span style="line-height: 1.45;">&nbsp; &quot;pid&quot;: 82, &quot;tit&quot;: &quot;医学知识&quot;, &quot;dDate&quot;: &quot;2016-09-02 23:04:34&quot;},</span></div>
<div><span style="line-height: 1.45;">&nbsp;&nbsp; &nbsp;</span><span style="line-height: 1.45;">&nbsp;&nbsp;{</span><span style="line-height: 1.45;">&nbsp; &quot;pid&quot;: 83, &quot;tit&quot;: &quot;医学知识&quot;, &quot;dDate&quot;: &quot;2016-09-02 23:04:34&quot;},</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.............</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;]</div>
<div>}</div>
<div>7、&ldquo;详情页&rdquo;返回结构：</div>
<div>{</div>
<div>&nbsp;&nbsp;&nbsp;&quot;tit&quot;: &quot;标题&quot;,</div>
<div>&nbsp; &nbsp;&quot;sub_tit&quot;:&quot;副标题&quot;,</div>
<div>&nbsp; &nbsp;&quot;article&quot;:&quot;正文正文正文正文正文正文&quot;,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.............</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;]</div>
<div>}</div>
<div>8、时间格式：凡与时间(控件)相关的值，请使用以下三种之一，能保证控件直接兼容。</div>
<div>date--(yyyy-MM-dd)</div>
<div>time-(HH:mm)</div>
<div>datetime-(yyyy-MM-dd HH:mm)</div>
<div>&nbsp;</div>
<div>------------------------------------</div>
<div>9、附返回码取值，仅供参考：</div>
<div>&nbsp;</div>
<div><span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">200 OK - [GET]：服务器成功返回用户请求的数据，该操作是幂等的（Idempotent）。</span></div>
<div><span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">201 CreateD - [POST/PUT/PATCH]：用户新建或修改数据成功。</span></div>
<div><span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">202 Accepted - []：表示一个请求已经进入后台排队（异步任务）</span></div>
<div><span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">204 NO CONTENT - [Delete]：用户删除数据成功。</span></div>
<div><span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">400 INVALID REQUEST - [POST/PUT/PATCH]：用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的。</span></div>
<div><span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">401 Unauthorized - []：表示用户没有权限（令牌、用户名、密码错误）。</span></div>
<div><span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">403 Forbidden - [] 表示用户得到授权（与401错误相对），但是访问是被禁止的。</span></div>
<div><span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">404 NOT FOUND - []：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。</span></div>
<div><span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">406 Not Acceptable - [GET]：用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）。</span></div>
<div><span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">410 Gone -[GET]：用户请求的资源被永久删除，且不会再得到的。</span></div>
<div><span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误。</span></div>
<div><span style="font-family: Monaco; font-size: 9pt; color: rgb(51, 51, 51);">500 INTERNAL SERVER ERROR - [*]：服务器发生错误，用户将无法判断发出的请求是否成功。</span></div>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=253</link>
			<title><![CDATA[今年碰到的最困扰的一个技术问题，解决了]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[开发心得]]></category>
			<pubDate>Fri,19 Jan 2018 16:42:01 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=253</guid>
		<description><![CDATA[<p>问题标题：<a href="https://community.apicloud.com/bbs/thread-77066-1-1.html">addEventListener捕获物理键，本地真机调试成功，云编译后无效</a></p>
<div>问题描述：<span style="line-height: 1.45;">apicloud中，</span><span style="line-height: 1.45;">本地wifi真机调试，按这两个物理键，都能成功弹窗，但是云编译后就不行了，似乎根本就没捕获到按键一样。</span></div>
<div>&nbsp;</div>
<div><span style="line-height: 1.45;">答案：</span></div>
<div>因为我在整个调用体系中，调用了两次apiready，后者（在index.html中）定义自然覆盖了前者（其它页面中）。因此就出现，在单页中测试没问题，跟index.html一起打包，就失效的问题。-------怪自己对于打包的架构不熟悉，使用了apicloud新建时推荐的index.html+Frame页结构，其实没有任何必要使用frame。</div>
<div>&nbsp;</div>
<div>其实下面的答主告诉我要注意frame结构，我也轻率的回答了没有使用frame，可是没想到，我最顶层的结构就是一个Frame---这真是太讽刺了。我还以为那是apicloud钦定的顶层结构，根本就没敢去怀疑它！其实根本就不需要用Frame!</div>
<div>&nbsp;</div>
<div>收获：</div>
<div>找问题的过程中，也逼着自己学会了调试技巧。比如真机测试、代码上传、云编译，昨天还系统的读了一下所有的API事件、属性、方法等。试着发了下短信，调用了一下电话薄、相册、相机。感觉对手机硬件和各种顶层资源的操作，都有了一个新的认识。<span style="line-height: 1.45;">另外对于发布中的版本号、云修复等概念，也都有了实战经验。</span><span style="line-height: 1.45;">----</span><span style="line-height: 1.45;">我可以写出更强功能的手机APP。</span></div>]]></description>
		</item>
		
			<item>
			<link>http://blog.258754.cn/article.asp?id=229</link>
			<title><![CDATA[2016年终总结]]></title>
			<author>dudu@258754.cn(admin)</author>
			<category><![CDATA[开发心得]]></category>
			<pubDate>Thu,26 Jan 2017 20:19:46 +0800</pubDate>
			<guid>http://blog.258754.cn/default.asp?id=229</guid>
		<description><![CDATA[<p>&nbsp;经历：</p>
<div>1、2016年，网站业务量减少，最大型的企业网站项目为云龙集团网站项目。</div>
<div>2、以顾问方式，为两家大型软件公司提供界面服务。</div>
<div>3、以顾问方式参与了WK及美一点移动端APP项目。更深刻的了解了创业型项目的甘苦。</div>
<div>4、使用d3.js技术框架，黄花机场触摸屏项目 。</div>
<div>&nbsp;</div>
<div>技术：</div>
<div>2015年主要是把前端新概念进行了蜻蜓点水式的了解。2016年则是以VUE为突破口，完整的了解了MVVM体系的方方面面。过年前这个月，利用VUE1.0体系，重写了一个袖珍的SPA网站。然后购买了慕课网的【Vue.js高仿饿了么外卖App】的收费课程。两个项目互相印证。之前一直对VUE的组件、路由体系不太了解，此次无法回避，把这些知识点翻来覆去的看了个遍。也在segmentfault.com上提了不少问题，上面的网友很热情。</div>
<div>&nbsp;</div>
<div>另外熟练了git命令行方式，熟练使用github.com。</div>
<div>通过优特项目，更加熟悉前后端配合/mock测试方式。</div>
<div>&nbsp;</div>
<div>工具：</div>
<div>使用了更多基于nodejs的工具软件。对于Webpack这个大坑有了更多了解（不懂的也仍然很多）。</div>
<div>&nbsp;</div>
<div>合作与分享：</div>
<div>继续以顾问方式参与项目。也带了几个前端学生。在知乎上回答了一定数量的问题，得到了一些关注。</div>
<div>&nbsp;</div>
<div>生活：</div>
<div>搬家到河西，重新构建自己的工作圈。花了很多精力在孩子的学业上。</div>
<div>坚持跑步，完成了第二届长马（半马）完赛。与儿子一起踢足球、打乒乓。</div>
<div>&nbsp;</div>
<div>2017愿景：</div>
<div>使用VUE构建具体的组件化项目。</div>
<div>学习小程序或是react native,打通APP开发通路。</div>]]></description>
		</item>
		
</channel>
</rss>
