I,Camille
爱生活 爱前端
2016-12-09T02:56:40.837Z
http://icamille.github.io/
camille
Hexo
上传文件域input的美化方案
http://icamille.github.io/2016/12/08/file-upload-input/
2016-12-08T08:02:38.000Z
2016-12-09T02:56:40.837Z
<p>最近工作中遇到上传图片(文件)的需求,本来想上传前本地预览,这样避免垃圾数据,因为提交表单再上传文件流,火狐下可以通过一些方法实现,但ie出现各种问题。<a id="more"></a> </p>
<p>虽然有一些插件可以解决,但也涉及体验性问题等,现总结一下。</p>
<h3 id="一、上传前本地预览问题"><a href="#一、上传前本地预览问题" class="headerlink" title="一、上传前本地预览问题"></a>一、上传前本地预览问题</h3><p>火狐可以通过以下<a href="http://www.jq22.com/jquery-info833" target="_blank" rel="external">代码</a>获取图片路径:</p>
<pre><code>var docObj = document.getElementById("fileInput");
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
</code></pre><p> 网上搜了很多资料说IE可以通过滤镜的方式实现,但经本地测试,行不通,最终放弃上传前预览,改为实时上传使用ajaxfileupload.js插件来实现实时上传,再回显。</p>
<h3 id="二、input-file-美化传遇到的问题"><a href="#二、input-file-美化传遇到的问题" class="headerlink" title="二、input file 美化传遇到的问题"></a>二、input file 美化传遇到的问题</h3><p> 因原生上传文件的input太丑,所以需要美化上传按钮,隐藏原生按钮,使用图片或其他元素代替。有以下两种方式处理:</p>
<ol>
<li><p>input file 自身隐藏(display:none),利用按钮或元素的点击事件,<a href="http://blog.csdn.net/rainyjune/article/details/6877975" target="_blank" rel="external">触发</a>input file的click事件,弹出文件选择框,选择完文件后上传。但遇到IE下ajaxfileupload.js上传失效问题,因为处于安全性考虑,<strong>在ie下会报 “权限不足” 问题</strong>。所以此方法行不通。</p>
</li>
<li><p>将input设置为<a href="http://www.cnblogs.com/dreamback/archive/2012/12/25/input-file-css-beautify.html" target="_blank" rel="external">透明</a>,但z-index值比图片的z-index值更大,点击底层的图片或其他元素,实际上是点击的透明的上传input按钮。但ie下会出现光标的问题。后经测试,可以通过设置<strong>font-size</strong>把浏览文件的按钮放大,使其覆盖整个图片或者点击的元素。</p>
</li>
</ol>
<p> 参考文章:</p>
<p> <a href="http://www.jq22.com/jquery-info833" target="_blank" rel="external">多图片上传预览(纯前端)</a></p>
<p> <a href="http://www.cnblogs.com/dreamback/archive/2012/12/25/input-file-css-beautify.html" target="_blank" rel="external">input file 美化</a></p>
<p>最近工作中遇到上传图片(文件)的需求,本来想上传前本地预览,这样避免垃圾数据,因为提交表单再上传文件流,火狐下可以通过一些方法实现,但ie出现各种问题。
Apache+php环境搭建
http://icamille.github.io/2016/10/26/apache-php/
2016-10-26T06:42:38.000Z
2016-10-26T08:28:31.015Z
<p>基于Apache+Php的前端开发环境搭建<a id="more"></a></p>
<h3 id="一、环境及软件"><a href="#一、环境及软件" class="headerlink" title="一、环境及软件"></a>一、环境及软件</h3><p>win7/8 64.(32位的同理,下载相关软件必须是对应的32位版本)</p>
<p>PHP7.0.12(<a href="http://windows.php.net/downloads/releases/php-7.0.12-nts-Win32-VC14-x64.zip" target="_blank" rel="external">php-7.0.12-nts-Win32-VC14-x64.zip</a>)</p>
<p>Apache2.4.23(<a href="https://www.apachelounge.com/download/VC14/binaries/httpd-2.4.23-win64-VC14.zip" target="_blank" rel="external">httpd-2.4.23-win64-VC14.zip</a>)</p>
<h3 id="二、方法-步骤"><a href="#二、方法-步骤" class="headerlink" title="二、方法/步骤"></a>二、方法/步骤</h3><p>1.安装apache前必须先安装<a href="http://www.microsoft.com/en-us/download/details.aspx?id=30679" target="_blank" rel="external">VC11</a>,选择时选择英文版的,如果win7系统是32位的请下载VSU_4\vcredist_x32.exe(VC9是合适xp与2003系统的,VC11是合适Win7与win8系统的,VC14是合适win10系统的,所以Apache VC14能搭PHP VC11的)。</p>
<p>2.Apache 下载后是zip包,解压到后放在合适的位置就可以了,不建议放在C盘里,因为重装系统C盘的数据会全部丢失,这里我们将它放在F盘的phptools文件夹下的apache2.4目录下。</p>
<p>3.php 下载后也是zip包,同样解压到合适位置,我们这里也将其放在F盘的phptools文件夹下的php7.0.12目录下。</p>
<p>4.将F:\phptools\php7.0.12\php.ini-production 复制一份,并重命名为php.ini。</p>
<p>5.将 F:\phptools\php7.0.12和F:\phptools\php7.0.12\ext加入环境变量PATH中。</p>
<p>6.用记事本打开F:\phptools\Apache2.4\Apache24\conf,查找ServerRoot,修改ServerRoot “C:/Apache24” => ServerRoot “F:/phptools/Apache2.4/Apache24”(这里输入的是你解压apache安装包后放的位置)。</p>
<p>7.查找#ServerName www.example.com:80 ,修改为 ServerName www.example.com:80 (去掉前面的#)。</p>
<p>8.查找DocumentRoot “c:/Apache24/htdocs” , 修改为DocumentRoot “F:/phptools/Apache2.4/Apache24/htdocs” 。</p>
<p>9.查找Directory “c:/Apache24/htdocs” ,修改为 Directory “ F:/phptools/Apache2.4/Apache24/htdocs “ 。</p>
<p>10.查找DirectoryIndex index.html ,修改为 DirectoryIndex index.html index.php index.htm (这里我们添加了index.php index.htm)。</p>
<p>11.查找ScriptAlias /cgi-bin/ “c:/Apache24/cgi-bin/“ ,修改为 ScriptAlias /cgi- bin/ “ F:/phptools/Apache2.4/Apache24/cgi-bin” 。</p>
<p>12.查找Directory “c:/Apache24/cgi-bin” 修改为 Directory “F:/phptools/Apache2.4/Apache24/cgi-bin/“ 。</p>
<p>13.在 F:\phptools\apache2.4.10\conf\httpd.conf最后一行添加添 加 LoadModule php7_module “F:/phptools/php7.0.12/php7apache2_4.dll” 让 apache 支持php (请确认F:/phptools/ php7.0.12/有php7apache2_4.dll,如果你下载的是我提供的连接肯定是有的)。</p>
<p>14.添加 AddType application/x-httpd-php .php .html .htm。</p>
<p>15.添加 PHPIniDir “F:/phptools/php7.0.12” (告诉apache php.ini的位置),至此,httpd.conf 配置完成,保存httpd.conf 。</p>
<p>16.将apache安装到系统服务中,输入F:\phptools\Apache2.4\Apache24\bin\httpd -k install,回车。</p>
<p>17.开启几个常用php扩展,用记事本打开F:\phptools\php7.0.12\php.ini:<br> 将; extension_dir = “ext”修改为 extension_dir = “ext” (去掉extension前面的分号)<br> 将;extension=php_mbstring.dll 修改为 extension=php_mbstring.dll(去掉extension前面的分号,这是php多字节字符串扩展)<br> 将;extension=php_mysql.dll修改为 extension=php_mysql.dll(去掉extension前面的分号)<br> 将;extension=php_mysqli.dll 修改为 extension=php_mysqli.dll(去掉extension前面的分号)。</p>
<p>18.双击F:\phptools\Apache2.4\Apache24\bin\ApacheMonitor.exe启动。</p>
<p>参考:<a href="http://jingyan.baidu.com/article/154b46315242b328ca8f4101.html" target="_blank" rel="external">php环境搭建</a></p>
<p>基于Apache+Php的前端开发环境搭建
react学习资料相关
http://icamille.github.io/2016/08/12/about-react/
2016-08-11T16:00:00.000Z
2016-08-12T01:27:02.000Z
<ul>
<li><a href="https://facebook.github.io/react/" target="_blank" rel="external">官网</a> </li>
<li><a href="[http://reactjs.cn">中文文档地址</a> <a id="more"></a></li>
<li><a href="https://github.com/reactjs-cn/react-docs" target="_blank" rel="external">GitHub地址</a> </li>
<li><a href="http://www.ruanyifeng.com/blog/2015/03/react.html" target="_blank" rel="external">React 入门实例教程–阮一峰</a> </li>
<li><a href="http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react" target="_blank" rel="external">颠覆式前端UI开发框架:React</a> </li>
<li><a href="http://wiki.jikexueyuan.com/project/react/" target="_blank" rel="external">极客学院整理的文档</a> </li>
</ul>
<ul>
<li><a href="https://facebook.github.io/react/">官网</a> </li>
<li><a href="[http://reactjs.cn">中文文档地址</a>
聊聊Web App、Hybrid App与Native App的设计差异
http://icamille.github.io/2016/08/10/webapp-vs-nativeapp/
2016-08-10T03:02:38.000Z
2016-08-10T08:10:16.000Z
<p> 目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App。<a id="more"></a> </p>
<p> <img src="../../../../css/images/app-0810/1.png" alt="Web App、Hybrid App、 Native App"> </p>
<h2 id="一、Web-App、Hybrid-App、Native-App-纵向对比"><a href="#一、Web-App、Hybrid-App、Native-App-纵向对比" class="headerlink" title="一、Web App、Hybrid App、Native App 纵向对比"></a>一、Web App、Hybrid App、Native App 纵向对比</h2><p>首先,我们来看看什么是 Web App、Hybrid App、 Native App。</p>
<h3 id="1-Web-APP"><a href="#1-Web-APP" class="headerlink" title="1. Web APP"></a>1. Web APP</h3><p>Web App 指采用Html5语言写出的App,不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用,基本上可以说是触屏版的网页应用。</p>
<p>优点</p>
<p>(1)开发成本低, </p>
<p>(2)更新快,</p>
<p>(3)更新无需通知用户,不需要手动升级</p>
<p>(4)能够跨多个平台和终端。</p>
<p>缺点:</p>
<p>(1)临时性的入口</p>
<p>(2)无法获取系统级别的通知,提醒,动效等等</p>
<p>(3)用户留存率低</p>
<p>(4)设计受限制诸多</p>
<p>(5)体验较差</p>
<h3 id="2-Hybrid-App"><a href="#2-Hybrid-App" class="headerlink" title="2. Hybrid App"></a>2. Hybrid App</h3><p>Hybrid APP指的是半原生半Web的混合类App。需要下载安装,看上去类似Native App,但只有很少的UI Web View,访问的内容是 Web 。</p>
<p>例如Store里的新闻类APP,视频类APP普遍采取的是Native的框架,Web的内容。</p>
<p>Hybrid App 极力去打造类似于Native App 的体验,但仍受限于技术,网速,等等很多因素。尚不完美。 </p>
<h3 id="3-Native-App"><a href="#3-Native-App" class="headerlink" title="3. Native App"></a>3. Native App</h3><p>Native APP 指的是原生程序,一般依托于操作系统,有很强的交互,是一个完整的App,可拓展性强。需要用户下载安装使用。 </p>
<p>优点:</p>
<p>(1)打造完美的用户体验</p>
<p>(2)性能稳定</p>
<p>(3)操作速度快,上手流畅</p>
<p>(4)访问本地资源(通讯录,相册)</p>
<p>(5)设计出色的动效,转场,</p>
<p>(6)拥有系统级别的贴心通知或提醒</p>
<p>(7)用户留存率高</p>
<p>缺点:</p>
<p>(1)分发成本高(不同平台有不同的开发语言和界面适配)</p>
<p>(2)维护成本高(例如一款App已更新至V5版本,但仍有用户在使用V2, V3, V4版本,需要更多的开发人员维护之前的版本)</p>
<p>(3)更新缓慢,根据不同平台,提交–审核–上线 等等不同的流程,需要经过的流程较复杂 </p>
<h2 id="二、Web-App、Hybrid-App、Native-App-技术特性"><a href="#二、Web-App、Hybrid-App、Native-App-技术特性" class="headerlink" title="二、Web App、Hybrid App、Native App 技术特性"></a>二、Web App、Hybrid App、Native App 技术特性</h2><p><img src="../../../../css/images/app-0810/2.png" alt="Web App、Hybrid App、Native App 技术特性"> </p>
<p>由上图可见,Web APP 的开发基于Html5语言。而Html5语言本身又有着不可避免的局限性。正是这些局限性的存在,使得Web App在体验中要逊于Native App。 </p>
<h2 id="三、Web-App受限制因素及设计要点"><a href="#三、Web-App受限制因素及设计要点" class="headerlink" title="三、Web App受限制因素及设计要点"></a>三、Web App受限制因素及设计要点</h2><p><img src="../../../../css/images/app-0810/3.png" alt="Web App受限制因素及设计要点"> </p>
<p>相比Native App,Web App体验中受限于以上5个因素:网络环境,渲染性能,平台特性,受限于浏览器,系统限制。 </p>
<h3 id="1-网络环境,渲染性能"><a href="#1-网络环境,渲染性能" class="headerlink" title="1. 网络环境,渲染性能"></a>1. 网络环境,渲染性能</h3><p>Web APP对网络环境的依赖性较大,因为Web APP中的H5页面,当用户使用时,去服务器请求显示页面。如果此时用户恰巧遇到网速慢,网络不稳定等其他环境时,用户请求页面的效率大打折扣,在用户使 用中会出现不流畅,断断续续的不良感受。同时,H5技术自身渲染性能较弱:对复杂的图形样式,多样的动效,自定义字体等的支持性不强。</p>
<p>因此,基于网络环境和渲染性能的影响,在设计H5页面时,应注意以下几点:</p>
<ul>
<li>简化不重要的动画/动效<ul>
<li>简化复杂的图形文字样式</li>
<li>减少页面渲染的频率和次数</li>
</ul>
</li>
</ul>
<p>从下图移动Web版 jing.fm和Native版jing对比后可以看出:Web APP首页去除冗余的功能,回溯本源,只给用户提供了jing.fm最初的本质需求——电台。既符合H5精简功能又达到了突出核心功能的设计原则。无疑给用户眼前一亮的气息。</p>
<p>正如书中《瞬间之美》的一个核心观点:重要的并不是我们提供的信息量有多大,而是我们能否给他们提供真正需要的信息。</p>
<p><img src="../../../../css/images/app-0810/4.png" alt="Web版 Jing.fm"> </p>
<p><img src="../../../../css/images/app-0810/5.png" alt="Native版 Jing.fm"> </p>
<p>再如:百度最新推出的直达号,以良子健身为例:</p>
<p>从Native App和Web App(百度直达号)的对比中,我们可以看出Native良子以九宫格的形式展现,且属于双重导航,功能入口太多;弊端是用户不知道聚焦在哪里,分散用户 的注意力。而Web版良子整合并减少了导航的入口,增强用户的专注度;界面清爽,整洁,很好地传达了良子本身的寓意——轻松、愉悦、休闲、舒适。</p>
<p><img src="../../../../css/images/app-0810/6.png" alt="良子健身"> </p>
<h3 id="2-受限于浏览器"><a href="#2-受限于浏览器" class="headerlink" title="2. 受限于浏览器"></a>2. 受限于浏览器</h3><p>通常Web App生存于浏览器里,宿主是浏览器。不同的浏览器自身的属性不尽相同,如:浏览器自带的手势,页面切换方式,链接跳转方式,版本兼容问题等等。</p>
<p>例如下图:UC 浏览器和百度浏览器自身支持手势切换页面。手指从左侧滑动页面,返回至上一级。百度手机助手H5页面,顶部Banner支持手势左右滑动切换。这一操作与浏览器自身手势是冲突的。 </p>
<p><img src="../../../../css/images/app-0810/7.png" alt="浏览器对比图"> </p>
<p>再如,基于浏览器的Web APP在打开新的模块中的页面时,大多会新开窗口来展现。例如用户在使用购物类APP时,浏览每日精选模块时,每当打开新的商品时,默认新开一个窗口。这 样的优劣势显而易见:优势是能够记录用户浏览过的痕迹,浏览过的商品,以便后续横向对比;劣势是过多的页面容易使用户迷失在页面中。</p>
<p>正如Google开发手册里描述:当用户打开一个Web App的时候,他们期待这个应用就像是一个单个应用,而不是一系列网页的结合。然而,什么情况下需要跳转页面,什么情况下在当前页面展示则需要设计师细致考量。</p>
<p><img src="../../../../css/images/app-0810/8.png" alt="淘宝Web版"> </p>
<p>因此,Web App基于浏览器的特性,从设计角度应该遵循以下了两点:</p>
<p>少用手势,避免与浏览器手势冲突。</p>
<p>减少页面跳转次数,尽量在当前页面显示。 </p>
<h3 id="3-系统限制,平台特性"><a href="#3-系统限制,平台特性" class="headerlink" title="3. 系统限制,平台特性"></a>3. 系统限制,平台特性</h3><p>由于Html5语言的技术特性,无法调用系统级别的权限。例如,系统级别的弹窗,系统级别的通知,地理信息,通讯录,语音等等。且与系统的兼容性也会存在一些问题。以上限制通常导致APP的拓展性不强,体验相对较差。例如百度地图:</p>
<p><img src="../../../../css/images/app-0810/9.png" alt="百度地图web和Native对比图"> </p>
<p>Web版地图基于浏览器展现,因此,不能全屏显示地图,给用户的眼界带来局限感;相反,Native 版地图以全屏展现的形式,很好的拓展了用户的视野。整个界面干净简洁,首页去除冗余功能。</p>
<p>在制定路线的体验中,如图:</p>
<p><img src="../../../../css/images/app-0810/10.png" alt="百度地图制定路线图web和Native对比"> </p>
<p>Web 版地图耗费的流量大于Native版,且不能预先缓存离线地图。对于地理位置的判断也是基于宿主浏览器,而非Web地图本身。获取路线后,对于更换到达方式,相对来说是不便利的。</p>
<p>相反,Native 版地图,能够直接访问用户的地理位置,能够很清晰的为用户展现App规划的路线,并能轻松的查看多种路线方案,以便做出符合自己的最佳方案。对于切换公交,走路,自驾等路线方式也是只需一键操作。</p>
<p>Native 版地图相对于 Web版地图增加更多情感化,易用的功能,如:能够记录用户的生活轨迹,记录用户的点滴足迹,能够享受躲避拥堵方案等。而Web版地图基于技术框架,很难实现以上功能,从用户体验角度来看,弱于Native版地图。 </p>
<h2 id="四、小结"><a href="#四、小结" class="headerlink" title="四、小结"></a>四、小结</h2><p>综述所述,在设计Web APP时,应当遵循以下几点:</p>
<h3 id="1-简化"><a href="#1-简化" class="headerlink" title="1. 简化"></a>1. 简化</h3><ul>
<li>简化不重要的动画/动效</li>
<li>简化复杂的图形文字样式</li>
</ul>
<h3 id="2-少用"><a href="#2-少用" class="headerlink" title="2. 少用"></a>2. 少用</h3><ul>
<li>少用手势,避免与浏览器手势冲突</li>
<li>少用弹窗</li>
</ul>
<h3 id="3-减少"><a href="#3-减少" class="headerlink" title="3. 减少"></a>3. 减少</h3><ul>
<li>减少页面内容</li>
<li>减少控件数量</li>
<li>减少页面跳转次数,尽量在当前页面显示</li>
</ul>
<h3 id="4-增强"><a href="#4-增强" class="headerlink" title="4. 增强"></a>4. 增强</h3><ul>
<li>增强Loading时的趣味性</li>
<li>增强页面主次关系</li>
<li>增强控件复用性</li>
</ul>
<p>原文地址:<a href="http://mux.baidu.com/?p=6750" target="_blank" rel="external">mux.baidu</a></p>
<p>作者:guowenwe</p>
<p> 目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App。
前端书籍目录
http://icamille.github.io/2016/08/09/book-list-for-fed/
2016-08-09T02:15:38.000Z
2016-08-09T02:15:00.000Z
<p> <a href="http://es6.ruanyifeng.com/" target="_blank" rel="external">《ECMAScript 6入门》</a><br>《用angularjs开发下一代web应用》 <a id="more"></a><br>《bootstrap用户手册》<br>《jquery权威指南》 </p>
<p>《JavaScript高级程序设计》</p>
<p>《javascript语言精粹》<br>《JavaScript权威指南(第6版)》<br>《高性能javascript》<br>《JavaScript学习指南》<br>《javascript经典实例》<br>《编写可维护的javascript》<br>《基于mvc的javascript web富应用开发》<br>《javascript模式》<br>《深入HTML5应用开发》<br>《jquery ui开发指南》<br>《css权威指南》<br>《html 5应用开发实践指南》<br>《html 5与css 3权威指南》</p>
<p>《head first html与css(第2版)》</p>
<p>《JavaScript框架设计》<br>《JavaScript专家编程》<br>《JavaScript Ninjia》<br>《JavaScript语言精粹(修订版)》<br>《JavaScript设计模式》<br>《JavaScript面向对象编程指南(第2版)》<br>《JavaScript函数式编程》<br>《JavaScript高效图形编程》 </p>
<p>《编写可测试的JavaScript代码》<br>《编写可维护的JavaScript》<br>《你不知道的JavaScript(上卷)》英文原版猛戳:<a href="https://github.com/getify/You-Dont-Know-JS" target="_blank" rel="external">英文原版 </a><br>《第三方JavaScript编程》<br>《单页Web应用》 </p>
<p>《HTML5和JavaScript网页设计基础》<br>《HTML5+JavaScript动画基础》<br>《HTML5和JavaScript Web应用开发》<br>《html5移动web开发指南》</p>
<p>《图解CSS3》<br>《bootstrap实战》 </p>
<p> <a href="http://es6.ruanyifeng.com/">《ECMAScript 6入门》</a><br>《用angularjs开发下一代web应用》
MVC,MVP 和 MVVM 的图示
http://icamille.github.io/2016/08/01/mvcmvp-mvvm/
2016-08-01T13:02:38.000Z
2016-08-05T07:20:58.000Z
<p>复杂的软件必须有清晰合理的架构,否则无法开发和维护。</p>
<p><a href="https://zh.wikipedia.org/wiki/MVC" target="_blank" rel="external">MVC</a>(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用。<a id="more"></a>它本身很容易理解,但是要讲清楚,它与衍生的 MVP 和 MVVM 架构的区别就不容易了。</p>
<p>昨天晚上,我读了<a href="https://blog.nodejitsu.com/scaling-isomorphic-javascript-code/" target="_blank" rel="external">《Scaling Isomorphic Javascript Code》</a>,突然意识到,它们的区别非常简单。我用几段话,就可以说清。 </p>
<h2 id="一、MVC"><a href="#一、MVC" class="headerlink" title="一、MVC"></a>一、MVC</h2><p>MVC模式的意思是,软件可以分成三个部分。 </p>
<p> <img src="../../../../css/images/mvvn-160805-01.png" alt="MVC"> </p>
<pre><code>视图(View):用户界面。
控制器(Controller):业务逻辑
模型(Model):数据保存
</code></pre><p>各部分之间的通信方式如下。</p>
<p> <img src="../../../../css/images/mvvn-160805-02.png" alt="MVC"> </p>
<pre><code>View 传送指令到 Controller
Controller 完成业务逻辑后,要求 Model 改变状态
Model 将新的数据发送到 View,用户得到反馈
</code></pre><p>所有通信都是单向的。 </p>
<h2 id="二、互动模式"><a href="#二、互动模式" class="headerlink" title="二、互动模式"></a>二、互动模式</h2><p>接受用户指令时,MVC 可以分成两种方式。一种是通过 View 接受指令,传递给 Controller。</p>
<p> <img src="../../../../css/images/mvvn-160805-03.png" alt="MVC"> </p>
<p>另一种是直接通过controller接受指令。</p>
<p> <img src="../../../../css/images/mvvn-160805-04.png" alt="MVC"></p>
<h2 id="三、实例:Backbone"><a href="#三、实例:Backbone" class="headerlink" title="三、实例:Backbone"></a>三、实例:Backbone</h2><p>实际项目往往采用更灵活的方式,以 Backbone.js 为例。 </p>
<p> <img src="../../../../css/images/mvvn-160805-05.png" alt="MVP"> </p>
<ol>
<li><p>用户可以向 View 发送指令(DOM 事件),再由 View 直接要求 Model 改变状态。 </p>
</li>
<li><p>用户也可以直接向 Controller 发送指令(改变 URL 触发 hashChange 事件),再由 Controller 发送给 View。 </p>
</li>
<li><p>Controller 非常薄,只起到路由的作用,而 View 非常厚,业务逻辑都部署在 View。所以,Backbone 索性取消了 Controller,只保留一个 Router(路由器) 。 </p>
</li>
</ol>
<h2 id="四、MVP"><a href="#四、MVP" class="headerlink" title="四、MVP"></a>四、MVP</h2><p>MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。 </p>
<p> <img src="../../../../css/images/mvvn-160805-06.png" alt="MVP"> </p>
<ol>
<li><p>各部分之间的通信,都是双向的。 </p>
</li>
<li><p>View 与 Model 不发生联系,都通过 Presenter 传递。 </p>
</li>
<li><p>View 非常薄,不部署任何业务逻辑,称为”被动视图”(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。 </p>
</li>
</ol>
<h2 id="五、MVVM"><a href="#五、MVVM" class="headerlink" title="五、MVVM"></a>五、MVVM</h2><p>MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。<br> <img src="../../../../css/images/mvvn-160805-07.png" alt="MVVM"> </p>
<p>唯一的区别是,它采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。<a href="https://angularjs.org/" target="_blank" rel="external">Angular</a> 和 <a href="http://emberjs.com/" target="_blank" rel="external">Ember</a> 都采用这种模式。 </p>
<p>内容转自:<a href="http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html" target="_blank" rel="external">http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html</a></p>
<p>复杂的软件必须有清晰合理的架构,否则无法开发和维护。</p>
<p><a href="https://zh.wikipedia.org/wiki/MVC">MVC</a>(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用。
《如何阅读一本书》阅读笔记
http://icamille.github.io/2016/07/29/readbook/
2016-07-29T14:29:38.000Z
2016-07-29T14:35:06.000Z
<p>最近参与熊猫书院《十个月提升自己》第三期的读书活动,每周阅读一本图书。7月开始,今天是第四周的最后一天,第四本书也已阅读完成。本文主要是想通过思维导图的方式和大家分享[美] 莫提默·J. 艾德勒 / 查尔斯·范多伦 的《如何阅读一本书》一书。<a id="more"></a></p>
<p>下面分享给大家:<br> <img src="../../../../css/images/howtoreadbook-2016160729.png" alt="《如何阅读一本书》阅读笔记 -- 思维导图"></p>
<p> <img src="../../../../css/images/howtoreadabook.png" alt="《如何阅读一本书》阅读笔记 -- 思维导图"></p>
<p>每天成长一点,遇见更好的自己!</p>
<p>最近参与熊猫书院《十个月提升自己》第三期的读书活动,每周阅读一本图书。7月开始,今天是第四周的最后一天,第四本书也已阅读完成。本文主要是想通过思维导图的方式和大家分享[美] 莫提默·J. 艾德勒 / 查尔斯·范多伦 的《如何阅读一本书》一书。
toFixed引发的思考
http://icamille.github.io/2016/07/27/about-tofixed/
2016-07-26T23:02:38.000Z
2016-07-27T16:12:36.000Z
<p>在对文件上传进度进行格式化处理时,涉及到精度的四舍五入问题,例如保留两位小数。这在JS中可以通过调用toFixed传入精度实现。但问题来了,先乘100再舍入,还是先舍入再乘100?<a id="more"></a></p>
<p><strong>先看结果:</strong></p>
<pre><code>var a = Math.random();
console.log(a);
console.log(a.toFixed(4));
console.log(a.toFixed(4) * 100);
console.log((a * 100).toFixed(2));
</code></pre><p><strong>输出1:</strong></p>
<pre><code>0.8988301526666329
0.8988
89.88000000000001
89.88
</code></pre><p><strong>输出2:</strong></p>
<pre><code>0.413465264585297
0.4135
41.349999999999994
41.35
</code></pre><p><strong>输出3:</strong></p>
<pre><code>0.1348901139915517
0.1349
13.489999999999998
13.49
</code></pre><p><strong>输出4:</strong></p>
<pre><code>0.2731272622047103
0.2731
27.310000000000002
27.31
</code></pre><p> 可以看出,两种调用顺序的执行结果并不一致,前者甚至没有达到预期的保留2位小数。该如何解释并解决呢? </p>
<p> 回到JS对浮点数的处理,JS仅有Number数值类型,而Number采用的是IEEE-754 64位双精度浮点数编码。其具有以下特点:</p>
<ol>
<li>浮点数可表示的值范围比同等位数的整数表示方式的值范围要大得多;</li>
<li>浮点数无法精确表示其值范围内的所有数值,而有符号和无符号整数则是精确表示其值范围内的每个数值;</li>
<li>浮点数只能精确表示m*2e的数值;</li>
<li>当biased-exponent为2e-1-1时,浮点数能精确表示该范围内的各整数值;</li>
<li>当biased-exponent不为2e-1-1时,浮点数不能精确表示该范围内的各整数值。</li>
</ol>
<p>由此可知,部分数值并不能精确表示,最终在运算结果中导致了偏差。</p>
<p>对以上问题的分析,详见:<a href="https://segmentfault.com/a/1190000005022170" target="_blank" rel="external">Why 0.1 + 0.2 === 0.30000000000000004?</a>。其中也给出了几个解决的方案,可以作为问题的补充。</p>
<p>而对于本问题的解决,将toFixed调用放至最后即可。 </p>
<p><strong>总结</strong></p>
<ol>
<li>调用顺序很重要!</li>
<li>异常测试很重要,尤其对于条件特殊值的非边界情况(如特定的随机数)。 </li>
</ol>
<hr>
<p><strong>本文(当然)是从<a href="http://www.ifuyun.com/" target="_blank" rel="external">抚云生活</a>偷来的,你们可以去告状了: </strong><br> <img src="../../../../css/images/to-fixed.jpg" alt="I,Fuyun"> </p>
<p> 网址:<a href="http://www.ifuyun.com/post/20ce98be3cbcd989" target="_blank" rel="external">toFixed引发的思考</a></p>
<p>在对文件上传进度进行格式化处理时,涉及到精度的四舍五入问题,例如保留两位小数。这在JS中可以通过调用toFixed传入精度实现。但问题来了,先乘100再舍入,还是先舍入再乘100?
《精进》阅读笔记
http://icamille.github.io/2016/07/22/jingjin/
2016-07-22T04:22:38.000Z
2016-07-22T03:22:06.000Z
<p>最近参与熊猫书院《十个月提升自己》第三期的读书活动,每周阅读一本图书。7月开始,今天恰好是第三周的最后一天,第三本书已阅读完成。本文主要是想通过思维导图的方式和大家分享知乎大神采铜的《精进:如何成为一个很厉害的人》一书。<a id="more"></a></p>
<p>下面分享给大家:<br> <img src="../../../../css/images/jingjin-2016160722.jpg" alt="《精进》阅读笔记 -- 思维导图"></p>
<p>每天成长一点,遇见更好的自己!</p>
<p>最近参与熊猫书院《十个月提升自己》第三期的读书活动,每周阅读一本图书。7月开始,今天恰好是第三周的最后一天,第三本书已阅读完成。本文主要是想通过思维导图的方式和大家分享知乎大神采铜的《精进:如何成为一个很厉害的人》一书。
《拖延心理学》阅读笔记
http://icamille.github.io/2016/07/15/tyxlx/
2016-07-15T02:02:38.000Z
2016-07-18T23:07:54.000Z
<p>最近参与熊猫书院《十个月提升自己》第三期的读书活动,每周阅读一本图书。7月开始,今天恰好是第二周的最后一天,第二本书已阅读完成。本文主要是想通过思维导图的方式和大家分享简·博克、莱诺拉·袁的《拖延心理学》一书。<a id="more"></a></p>
<p>下面分享给大家:<br> <img src="../../../../css/images/tyxlx-2016160715.jpg" alt="《拖延心理学》阅读笔记 -- 思维导图"></p>
<p>每天成长一点,遇见更好的自己!</p>
<p>最近参与熊猫书院《十个月提升自己》第三期的读书活动,每周阅读一本图书。7月开始,今天恰好是第二周的最后一天,第二本书已阅读完成。本文主要是想通过思维导图的方式和大家分享简·博克、莱诺拉·袁的《拖延心理学》一书。
《自控力》阅读笔记
http://icamille.github.io/2016/07/08/zikongli/
2016-07-08T02:02:38.000Z
2016-07-10T13:56:00.000Z
<p>最近参与熊猫书院《十个月提升自己》第三期的读书活动,每周阅读一本图书。7月开始,今天恰好是第一周的最后一天,第一本书也已阅读完成。本文主要是想通过思维导图的方式和大家分享美国著名健康心理学家凯利·麦格尼格尔博士的《自控力》一书。<a id="more"></a></p>
<p>下面分享给大家:<br> <img src="../../../../css/images/zikongli-2016160708.jpg" alt="《自控力》阅读笔记 -- 思维导图"></p>
<p>每天成长一点,遇见更好的自己!</p>
<p>最近参与熊猫书院《十个月提升自己》第三期的读书活动,每周阅读一本图书。7月开始,今天恰好是第一周的最后一天,第一本书也已阅读完成。本文主要是想通过思维导图的方式和大家分享美国著名健康心理学家凯利·麦格尼格尔博士的《自控力》一书。
Markdown 学习资源
http://icamille.github.io/2016/07/01/markdown-url/
2016-07-01T03:07:38.000Z
2016-07-10T13:56:00.000Z
<p>在搭建<a href="http://icamille.github.com" target="_blank" rel="external">个人网站</a>过程中,第一次接触到<a href="http://baike.baidu.com/link?url=DnJkoGHc2tc3-TaQAthv-zFbrYi9YkL9pw1313M2z7-Ro7Mhx9gO6rjnZAzrF9LdXP0kcAMI0CtmYwYUZq0SDa" target="_blank" rel="external">Markdowm</a>,需要学习Markdown的相关语法,下面是一些学习资源的相关链接。<a id="more"></a> </p>
<h2 id="Markdown学习资源"><a href="#Markdown学习资源" class="headerlink" title="Markdown学习资源"></a>Markdown学习资源</h2><ul>
<li><p><a href="http://www.jianshu.com/p/1e402922ee32/" target="_blank" rel="external">Markdown——入门指南</a></p>
</li>
<li><p><a href="http://sspai.com/25137" target="_blank" rel="external">认识与入门Markdown</a></p>
</li>
<li><p><a href="http://www.ituring.com.cn/article/23" target="_blank" rel="external">怎样使用Markdown</a></p>
</li>
<li><p><a href="http://wowubuntu.com/markdown/#list" target="_blank" rel="external">Markdown 语法说明 (简体中文版) </a></p>
</li>
</ul>
<p>有时间会写篇博客来详细总结下Markdown的相关内容。</p>
<p>在搭建<a href="http://icamille.github.com">个人网站</a>过程中,第一次接触到<a href="http://baike.baidu.com/link?url=DnJkoGHc2tc3-TaQAthv-zFbrYi9YkL9pw1313M2z7-Ro7Mhx9gO6rjnZAzrF9LdXP0kcAMI0CtmYwYUZq0SDa">Markdowm</a>,需要学习Markdown的相关语法,下面是一些学习资源的相关链接。
Web前端设计原则
http://icamille.github.io/2016/07/01/design-principles-of-web-front/
2016-07-01T02:02:38.000Z
2016-08-05T07:20:30.000Z
<p>最近看了@余果 的《Web全栈工程师的自我修养》颇有一些收获,刚好最近在制定经验前端的规范化工作,制定了几条前端设计原则,分享给大家。</p>
<p>下面就是经验的前端指导原则:<a id="more"></a></p>
<p>设计原则是指导性原则,比较抽象,可扩展</p>
<ul>
<li>KISS原则</li>
<li>DRY原则 </li>
<li>最少知道原则 </li>
<li>分治原则</li>
</ul>
<h2 id="KISS原则(Keep-it-Simple-and-Stupid)"><a href="#KISS原则(Keep-it-Simple-and-Stupid)" class="headerlink" title="KISS原则(Keep it Simple and Stupid)"></a>KISS原则(Keep it Simple and Stupid)</h2><p>一切尽可能简单! 简单就是美,能简单的绝不复杂。</p>
<h2 id="DRY原则(Don’t-Repeat-Yourself)"><a href="#DRY原则(Don’t-Repeat-Yourself)" class="headerlink" title="DRY原则(Don’t Repeat Yourself)"></a>DRY原则(Don’t Repeat Yourself)</h2><p>顾名思义,任何一段代码如果需要复制第三次,需要进行抽象。</p>
<h2 id="最少知道原则。"><a href="#最少知道原则。" class="headerlink" title="最少知道原则。"></a>最少知道原则。</h2><p>高内聚,低耦合,任何事物应该保持对外界的最少知道原则。</p>
<h2 id="分治原则"><a href="#分治原则" class="headerlink" title="分治原则"></a>分治原则</h2><p>复杂的问题,负责的功能,应该拆分,由更小的部分组成。</p>
<hr>
<p>原文网址:<a href="http://yanhaijing.com/web/2016/06/17/design-principles-of-web-front/" target="_blank" rel="external">http://yanhaijing.com/web/2016/06/17/design-principles-of-web-front/</a></p>
<p>最近看了@余果 的《Web全栈工程师的自我修养》颇有一些收获,刚好最近在制定经验前端的规范化工作,制定了几条前端设计原则,分享给大家。</p>
<p>下面就是经验的前端指导原则:
Hello World
http://icamille.github.io/2016/06/23/hello-world/
2016-06-23T02:02:38.000Z
2016-07-10T13:56:00.000Z
<p>Welcome to <a href="https://icamille.github.io/">Camille Blog</a>! This is my very first post.<a id="more"></a> </p>
<h2 id="Hello-Everyone"><a href="#Hello-Everyone" class="headerlink" title="Hello Everyone"></a>Hello Everyone</h2><p>欢迎大家来到我的博客,以后会和大家分享工作和生活方面的收获。作为自己一步一步搭起来的博客的第一篇文章,谨以此文记录下自己的“劳动成果”。<!--more--> 嘿嘿……</p>
<p><img src="../../../../css/images/read.jpg" alt="Camille Blog"></p>
<p>Welcome to <a href="https://icamille.github.io/">Camille Blog</a>! This is my very first post.