-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
239 lines (153 loc) · 10.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Reson_a的博客</title>
<meta name="author" content="Reson_a" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta property="og:site_name" content="Reson_a的博客" />
<meta property="og:image" content="undefined" />
<link href="/css/images/favicon.ico" rel="icon" />
<link rel="alternate" href="/atom.xml" title="Reson_a的博客" type="application/atom+xml">
<link rel="stylesheet" href="/css/style.css" media="screen" type="text/css">
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- baidu webmaster push -->
<script src='//push.zhanzhang.baidu.com/push.js'></script>
</head>
<body>
<header id="header" class="inner"><div class="alignleft">
<h1><a href="/">Reson_a的博客</a></h1>
<h2><a href="/"></a></h2>
</div>
<nav id="main-nav" class="alignright">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archives">Archives</a></li>
</ul>
<div class="clearfix"></div>
</nav>
<div class="clearfix"></div></header>
<div id="content" class="inner">
<div id="main-col" class="alignleft"><div id="wrapper">
<article class="post">
<div class="post-content">
<header>
<div class="icon"></div>
<time datetime="2017-01-19T16:07:53.522Z"><a href="/2017/01/20/小程序填坑记/">2017-01-20</a></time>
<h1 class="title"><a href="/2017/01/20/小程序填坑记/"></a></h1>
</header>
<div class="entry">
<h1 id="小程序填坑记"><a href="#小程序填坑记" class="headerlink" title="小程序填坑记"></a>小程序填坑记</h1><p>没暖气+重度雾霾全家翻来覆去的重感冒被迫休养了一阵，回过头来研究了一下微信新出的小程序，写惯Vue的我感觉这个框架真是好难用……这里先记录一部分坑和教训</p>
<ul>
<li><p>自定义模板，虽说能够传入data数据但并不是响应的，内部不能定义数据方法和样式以供复用，引用时不能直接在template添加类名和自定义属性，(比如直接<template is="XXX" class="XXX"></template>是无效的，必须用data传进去） 和WebComponent相去甚远，开发维护效率一下回到解放前，也只能用来展示展示一次性内容，说是鸡肋绝对当之无愧</p>
</li>
<li><p>变更数据的方法只有setData一个……限制的很死，虽说能一定程度上避免错误，但遇上一些复杂的数据结构会很无语，好在我们有ES6可以用模板字符串用作变量键名，可以这么写，不会ES6的可以洗洗睡了……</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">this.setData({</div><div class="line"> [`coupons[${index}].isReceived`]: true</div><div class="line"> })</div></pre></td></tr></table></figure>
</li>
<li><p>事件没办法直接传参数。只能为元素添加自定义属性然后通过data-set获取它，像下面这样，非常蛋疼，对于用惯了EventEmitter的有点不能忍</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><!--wxml--></div><div class="line"> <view class="coupon {{item.isReceived?'received':''}}" data-id="{{item.id}}" data-index="{{index}}" bindtap="couponTapHandler"></div><div class="line"></div><div class="line">// js</div><div class="line">couponTapHandler(e) {</div><div class="line"> let id = e.currentTarget.dataset.id</div><div class="line"> let index = e.currentTarget.dataset.index</div><div class="line">}</div></pre></td></tr></table></figure>
</li>
<li><p>原生的接口都是各种回调，被迫经常要写let that = this，用过Promise和箭头函数的绝对不想再碰这玩意了，逻辑复杂了回调地狱也是很可能发生的事。于是果断bluebird走起大小几十k，最后发现有总大小限制……</p>
</li>
<li><p>剩下的诸如API设计以及经常性抽风的开发者工具就不婊了……因为没有测试账号，还有一些功能没有试过，听说还有很多暗坑，当然在跨平台和处理兼容方面是必须要肯定的，小程序很好地处理了一些比较棘手的问题，姑且看好一下未来的发展，但现阶段实在是有点……</p>
</li>
</ul>
<p>总结一下：</p>
<ul>
<li>在小程序采用现成组件去实现一些相对简单功能的前提下还是有着比较好的开发和使用体验的，做复杂应用可能会比较棘手，现阶段来讲未必(几乎不可能)显著提高开发效率……参照现在已经上线的，与app相比都阉割了不少功能</li>
<li>小程序类似MVVM框架，用的是数据驱动的思想，有这方面经验的前端都能比较快速的上手，但不要再说小程序像Vue了，Vue比这个好用几条街！！</li>
<li>感觉可以作为副业研究一下，但深入的价值不大，难度不高（现阶段难度主要在于不成熟和坑多），不如花时间打磨js功底，换者说那些跟风去小程序培训班的人，自己掂量掂量吧、</li>
</ul>
</div>
<footer>
<div class="alignright">
<a href='javascript:void(0)' class="share-link bdsharebuttonbox" data-cmd="more">分享</a>
</div>
<!-- partial('post/share') -->
<div class="clearfix"></div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<div class="icon"></div>
<time datetime="2017-01-04T15:25:35.920Z"><a href="/2017/01/04/写在年前/">2017-01-04</a></time>
<h1 class="title"><a href="/2017/01/04/写在年前/"></a></h1>
</header>
<div class="entry">
<h1 id="写在年前"><a href="#写在年前" class="headerlink" title="写在年前"></a>写在年前</h1><p>很难得的跟着肝了半个月的项目，算是积累了宝贵的经验，</p>
<p>首先感谢浅海科技的各位全栈大佬，这段时间真的学习到了很多，自己写的组件能被别人使用，也有小小的成就感</p>
<p>这里不扯一堆琐碎的技术要点，只是简单写一下收获和体会</p>
<p>除了提升vue全家桶熟练度和有了git协同前后端分离开发的经验之外，最重要的大概是有底气了，明白了单独搞定一整个模块也并不是多么困难的事，真正有差距的大概是优雅和效率吧~</p>
<p>总结几个需要加强的地方吧</p>
<ul>
<li>巩固ajax知识，虽然常用的其实就那几种方法，但只有更加深入的理解才能应对各种状况，不能完全依赖于后端给的数据进行开发，应该自己写mock试试</li>
<li>提升代码的优雅简洁性，可能是之前搞游戏养成的坏习惯，偶尔会写出非常复杂的逻辑还觉得自己很厉害的样子（其实并不是）……很多时候要认真分析需求，明确思路。才能写出易于维护的代码</li>
<li>培养良好的代码习惯，现在已经强开eslint了，虽然一开始很痛苦但应该还是值得的</li>
<li>CSS的话，多使用最佳实践吧，明知道有坑的就不要因为偷懒去用了，这个需要慢慢总结，个人还是比较喜欢用定位</li>
<li>进一步的提升工作效率，从减少代码重构和命名障碍开始……</li>
</ul>
<p>最后写一下近期的学习计划</p>
<ul>
<li>首先准备研究一下微信的小程序，之前大概看过一些，和现在流行的mvvm框架非常像 上手应该是没有难度的，虽然个人对于这种不开源也没有底层API完全依赖于微信生态的模式持观望态度，不过还是要相信鹅厂的技术实力能hold住的</li>
<li><p>接下来的两个发展方向，一个是继续深入node,往全栈方向发展，另一方面是回归老本行，研究h5游戏+webgl，还需要考虑一下。同时也要继续熟练基础技能，无论如何，必须要突破难的不会做，简单又的不想做的舒适区，不然真是连“三年”经验出来的培训班学员都比不过咯，活该失业……</p>
</li>
<li><p>最后最后是考过科目一，额这个应该一天就足够了、、、、</p>
</li>
</ul>
<p>第一篇就这样咯，不是很会写东西，也不打什么狗屁鸡血，毒鸡汤已经喝了很多了，我相信很多事情都不是靠一时的热情一蹴而就的，如果不能在平凡中找到热爱，还是送上最近听的太多的一句话：建议弃坑！</p>
</div>
<footer>
<div class="alignright">
<a href='javascript:void(0)' class="share-link bdsharebuttonbox" data-cmd="more">分享</a>
</div>
<!-- partial('post/share') -->
<div class="clearfix"></div>
</footer>
</div>
</article>
<nav id="pagination">
</nav>
</div></div>
<aside id="sidebar" class="alignright">
<div class="search">
<form action="//google.com/search" method="get" accept-charset="utf-8">
<input type="search" name="q" results="0" placeholder="搜索">
<input type="hidden" name="q" value="site:yoursite.com">
</form>
</div>
<div class="widget tag">
<h3 class="title">最新文章</h3>
<ul class="entry">
<li>
<a href="/2017/01/20/小程序填坑记/"></a>
</li>
<li>
<a href="/2017/01/04/写在年前/"></a>
</li>
</ul>
</div>
</aside>
<div class="clearfix"></div>
</div>
<footer id="footer" class="inner"><div class="alignleft">
<p>
© 2017 Reson_a
All rights reserved.</p>
<p>Powered by <a href="http://hexo.io/" target="_blank">Hexo</a></p>
</div>
<div class="clearfix"></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"1","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script></footer>
<script src="/js/jquery.imagesloaded.min.js"></script>
<script src="/js/gallery.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
$('.fancybox').fancybox();
})(jQuery);
</script>
<div id='bg'></div>
</body>
</html>