Skip to content

Commit

Permalink
posts
Browse files Browse the repository at this point in the history
  • Loading branch information
root authored and root committed Jun 18, 2013
1 parent 1b6843a commit 5e32b56
Show file tree
Hide file tree
Showing 9 changed files with 27 additions and 27 deletions.
10 changes: 5 additions & 5 deletions _posts/2011-09-29-simplify-ajax-code-with-ajaxmodel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@
duoshuo_thread_id: '1310856454332219396'
---
<p class='entry-abstract'>
<a href="http://kingzs70.sinaapp.com/2011/09/29/simplify-ajax-code-with-ajaxmodel/"><img src="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2011/09/simplify-ajax-code-with-ajaxmodel.gif" alt="用AjaxModel简化你的Ajax代码" title="simplify-ajax-code-with-ajaxmodel" width="300" height="285" class="alignleft size-full wp-image-77" /></a>基于jQuery，tangram等框架进行Ajax编程是一件很容易的事。以下面的“添加删除标签”为例，要实现“添加标签”这一功能，如示例代码所示，你只需要几十行代码。但这样的编程模式仍然过于复杂，而且对于需要长期维护网站来说，存在很多问题，这些问题包括：代码冗余率高，可读性差，难以测试，难以维护等。AjaxModel的设计目标就是进一步降低Ajax编程的复杂度，解决代码的<strong>可维护性</strong>与<strong>可测试性</strong>问题。本文通过重构”添加标签”的示例代码，展示如何使用AjaxModel来简化Ajax编程。
<a href="http://kingzs70.github.io/2011/09/29/simplify-ajax-code-with-ajaxmodel/"><img src="http://kingzs70-wordpress.stor.github.io/uploads/2011/09/simplify-ajax-code-with-ajaxmodel.gif" alt="用AjaxModel简化你的Ajax代码" title="simplify-ajax-code-with-ajaxmodel" width="300" height="285" class="alignleft size-full wp-image-77" /></a>基于jQuery，tangram等框架进行Ajax编程是一件很容易的事。以下面的“添加删除标签”为例，要实现“添加标签”这一功能，如示例代码所示，你只需要几十行代码。但这样的编程模式仍然过于复杂，而且对于需要长期维护网站来说，存在很多问题，这些问题包括：代码冗余率高，可读性差，难以测试，难以维护等。AjaxModel的设计目标就是进一步降低Ajax编程的复杂度，解决代码的<strong>可维护性</strong>与<strong>可测试性</strong>问题。本文通过重构”添加标签”的示例代码，展示如何使用AjaxModel来简化Ajax编程。
</p>
<!--more-->
<p>
<h2>本文要考虑的场景</h2>
<strong class='demo-title'>“添加、删除标签”</strong><a class='open-in-new-window' href='http://kingzs70.sinaapp.com/demo/tag/index.html' target='_blank' >在新页面中查看</a>
<iframe frameBorder='0' class='demo-container' src='http://kingzs70.sinaapp.com/demo/tag/index.html'>
<strong class='demo-title'>“添加、删除标签”</strong><a class='open-in-new-window' href='http://kingzs70.github.io/demo/tag/index.html' target='_blank' >在新页面中查看</a>
<iframe frameBorder='0' class='demo-container' src='http://kingzs70.github.io/demo/tag/index.html'>
</iframe>
</p>
<p>
Expand Down Expand Up @@ -172,5 +172,5 @@ <h2>后记</h2>
<p>AjaxModel尝试解决的核心问题就是增加代码的可维护性。但“可维护性”与“性能”通常来说是矛盾的，增加可维护性，意味着牺牲一定的性能。tagModel在初始化时要消耗一定时间，同时也要占用一定的内存，但相对于它带来的<strong>“可维护性”</strong>方面的好处，这点牺牲是值得的。</p>
<p>同时，由于代码粒度更小，层次更清晰，一定程度上也增加了代码的可测试性</p>
<p>AjaxModel借鉴了MVC的思想，但没有完全照搬，它并没有使用controler,render,view这些概念。因为如果我们不是在构建一个复杂的web应用，而仅仅是为了改善页面的用户体验而使用Ajax，就没有必要去使用一个MVC框架。</p>
<p>本文主要介绍AjaxModel的使用场景、要解决的问题。关于AjaxModel详细的使用文本档和源码分析请直接查看它的<a href='http://sharedemo.sinaapp.com/view/shared/js/AjaxModel.js' target='_blank'>源文件</a></p>
<p>"添加、删除标签"示例的源码请到页面中直接<a href='http://sharedemo.sinaapp.com/view/tag' title='AjaxModel Demo | kingzs70' target='_blank'>查看</a><p>
<p>本文主要介绍AjaxModel的使用场景、要解决的问题。关于AjaxModel详细的使用文本档和源码分析请直接查看它的<a href='http://sharedemo.github.io/view/shared/js/AjaxModel.js' target='_blank'>源文件</a></p>
<p>"添加、删除标签"示例的源码请到页面中直接<a href='http://sharedemo.github.io/view/tag' title='AjaxModel Demo | kingzs70' target='_blank'>查看</a><p>
2 changes: 1 addition & 1 deletion _posts/2011-12-07-large_scale_javascript_webapp_architecture_pattern_1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ <h1>推荐的架构</h1>



<div>下一篇: <a href="http://kingzs70.sinaapp.com/2011/12/07/patterns_for_large-scale_javascript_application_architecture_2">大规模JavaScript应用架构（二）</a></div>
<div>下一篇: <a href="http://kingzs70.github.io/2011/12/07/patterns_for_large-scale_javascript_application_architecture_2">大规模JavaScript应用架构（二）</a></div>

<br />
<br />
6 changes: 3 additions & 3 deletions _posts/2011-12-07-patterns_for_large-scale_javascript_application_architecture_2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
_edit_last: '1'
duoshuo_thread_id: '1310856454332219403'
---
<div>前一篇：<a href="http://kingzs70.sinaapp.com/2011/12/07/large_scale_javascript_webapp_architecture_pattern_1">[译]大规模JavaScript应用架构（一）</a></div>
<div>前一篇：<a href="http://kingzs70.github.io/2011/12/07/large_scale_javascript_webapp_architecture_pattern_1">[译]大规模JavaScript应用架构（一）</a></div>
<div class="catalog">本节目录
<ul>
<li>模块（Module）理论
Expand Down Expand Up @@ -290,7 +290,7 @@ <h1>中介者模式</h1>

让我们在高层次上观察下模块可能怎样与中介者通信。

<a href="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2011/12/chart4a.jpg"><img class="alignleft size-full wp-image-240" title="chart4a" src="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2011/12/chart4a.jpg" alt="" width="618" height="297" /></a>
<a href="http://kingzs70-wordpress.stor.github.io/uploads/2011/12/chart4a.jpg"><img class="alignleft size-full wp-image-240" title="chart4a" src="http://kingzs70-wordpress.stor.github.io/uploads/2011/12/chart4a.jpg" alt="" width="618" height="297" /></a>

&nbsp;

Expand Down Expand Up @@ -369,4 +369,4 @@ <h1>中介者模式</h1>
</ul>
</div>
下一节将给出架构的具体实现
<div>下一篇：<a href="http://kingzs70.sinaapp.com/2011/12/07/patterns_for_large-scale_javascript_application_architecture_3">[译]大规模JavaScript应用架构模式(三）</a></div>
<div>下一篇：<a href="http://kingzs70.github.io/2011/12/07/patterns_for_large-scale_javascript_application_architecture_3">[译]大规模JavaScript应用架构模式(三）</a></div>
8 changes: 4 additions & 4 deletions _posts/2011-12-07-patterns_for_large-scale_javascript_application_architecture_3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
_edit_last: '1'
duoshuo_thread_id: '1310856454332219404'
---
<div>前一篇：<a href="http://kingzs70.sinaapp.com/2011/12/07/patterns_for_large-scale_javascript_application_architecture_2">[译]大规模JavaScript应用架构（二）</a></div>
<div>前一篇：<a href="http://kingzs70.github.io/2011/12/07/patterns_for_large-scale_javascript_application_architecture_2">[译]大规模JavaScript应用架构（二）</a></div>
<div class="catalog">本节目录
<ul>
<li>外观 – 核心的抽象</li>
Expand Down Expand Up @@ -46,16 +46,16 @@ <h1>把这些结合在一起</h1>
<li>那些对象在哪里（服务端还是客户端）</li>
<li>有多少对象订阅了通知</li>
</ul>
<a href="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2011/12/chart1a.gif"><img class="alignleft size-full wp-image-242" title="chart1a" src="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2011/12/chart1a.gif" alt="" width="617" height="358" /></a>
<a href="http://kingzs70-wordpress.stor.github.io/uploads/2011/12/chart1a.gif"><img class="alignleft size-full wp-image-242" title="chart1a" src="http://kingzs70-wordpress.stor.github.io/uploads/2011/12/chart1a.gif" alt="" width="617" height="358" /></a>

<strong>外观</strong>抽象了系统的核心，避免模块直接接触核心。它订阅感兴趣的消息（来自模块）然后说：“很好，发生了什么？告诉我细节”。它通过检查发送消息的模块是否拥有必要的许可来处理模块安全问题。

<a href="http://itzoo.info/wp-content/uploads/2011/12/chart2a.gif">
</a><a href="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2011/12/chart2a.gif"><img class="alignleft size-full wp-image-243" title="chart2a" src="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2011/12/chart2a.gif" alt="" width="622" height="348" /></a>
</a><a href="http://kingzs70-wordpress.stor.github.io/uploads/2011/12/chart2a.gif"><img class="alignleft size-full wp-image-243" title="chart2a" src="http://kingzs70-wordpress.stor.github.io/uploads/2011/12/chart2a.gif" alt="" width="622" height="348" /></a>

<strong>中介者</strong>（应用的核心）通过中介者模式扮演一个‘Pub/Sub’管理者的角色。它负责模块管理，在必要的时候启动或停止模块。这是依赖动态加载和确保失败模块在需要时可以重新启动的特定用途。

<a href="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2011/12/chart3a.gif"><img class="alignleft size-full wp-image-244" title="chart3a" src="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2011/12/chart3a.gif" alt="" width="622" height="360" /></a>
<a href="http://kingzs70-wordpress.stor.github.io/uploads/2011/12/chart3a.gif"><img class="alignleft size-full wp-image-244" title="chart3a" src="http://kingzs70-wordpress.stor.github.io/uploads/2011/12/chart3a.gif" alt="" width="622" height="360" /></a>

这个架构的结果是模块不在互相依赖。由于解耦的层次比较高，他们可以很容易的被维护和测试，模块可以在无需额外付出的情况下被投入到一个新页面中使用。他们也可以在系统保持运行的情况下被动态的加载和移除。
<h1>Pub/Sub之外：自动事件注册</h1>
Expand Down
16 changes: 8 additions & 8 deletions _posts/2012-07-13-css_bug.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ <h2>1. 对css标准理解不周造成的Bug</h2>

有些时候我们以为是bug问题，实际上是因为我们对css标准理解的不到位。

外边距叠加问题。对于如下代码。<a href="http://kingzs70.sinaapp.com/demo/layout/margin-doublication.html" target="_blank">查看demo</a>
外边距叠加问题。对于如下代码。<a href="http://kingzs70.github.io/demo/layout/margin-doublication.html" target="_blank">查看demo</a>

{% highlight css %}
.wrong {margin:10px;background:#999;}
Expand All @@ -30,11 +30,11 @@ <h2>1. 对css标准理解不周造成的Bug</h2>
{% endhighlight %}
<!--more-->
最直观的理解，应该是这样的：
<a href="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2012/07/wr.png"><img class="size-full wp-image-252 aligncenter" title="wr" src="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2012/07/wr.png" alt="" width="452" height="74" /></a>
<a href="http://kingzs70-wordpress.stor.github.io/uploads/2012/07/wr.png"><img class="size-full wp-image-252 aligncenter" title="wr" src="http://kingzs70-wordpress.stor.github.io/uploads/2012/07/wr.png" alt="" width="452" height="74" /></a>


但实际上却是：
<a href="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2012/07/wrr.png"><img class="size-full wp-image-253 aligncenter" title="wrr" src="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2012/07/wrr.png" alt="" width="463" height="43" /></a>
<a href="http://kingzs70-wordpress.stor.github.io/uploads/2012/07/wrr.png"><img class="size-full wp-image-253 aligncenter" title="wrr" src="http://kingzs70-wordpress.stor.github.io/uploads/2012/07/wrr.png" alt="" width="463" height="43" /></a>

理解这个问题，关键是要知道浏览器是如何计算div的高度的。</p>
<blockquote>如果元素没有垂直边框或内边距，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的高度</blockquote>
Expand Down Expand Up @@ -73,10 +73,10 @@ <h2>2. haslayout（拥有布局）引发的问题</h2>
haslayout是许多样式问题的根源。标准浏览器是没有haslayout这个概念的，这也就导致了标准浏览器和ie在渲染页面上的差异性。有一种方式很糟糕的方式可以避免这个问题，那就是让所有元素都流动起来，这样ie和标准浏览器在页面渲染方面就一致很多。但这样至少会导致ie渲染页面的效率会下降很多，同样也会引入很多其他问题（马上会提到）。

文字环绕问题。如果你想实现一个文字环绕图片的效果，如：
<a href="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2012/07/rrr.png"><img src="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2012/07/rrr.png" alt="" title="rrr" width="400" height="257" class="aligncenter size-full wp-image-264" /></a>
但由于某种原因，你给文字的p标签添加了zoom, overflow, min-width 等任何一种可以触发haslayout的属性。将会导致ie的某些版本出现问题。<a href="http://kingzs70.sinaapp.com/demo/layout/wenzihuanrao.html" target="_blank">查看demo</a>
<a href="http://kingzs70-wordpress.stor.github.io/uploads/2012/07/rrr.png"><img src="http://kingzs70-wordpress.stor.github.io/uploads/2012/07/rrr.png" alt="" title="rrr" width="400" height="257" class="aligncenter size-full wp-image-264" /></a>
但由于某种原因，你给文字的p标签添加了zoom, overflow, min-width 等任何一种可以触发haslayout的属性。将会导致ie的某些版本出现问题。<a href="http://kingzs70.github.io/demo/layout/wenzihuanrao.html" target="_blank">查看demo</a>

haslayout导致的另一个问题就是，拥有布局的元素在计算自己的尺寸时，与标准浏览器不同。<a href="http://kingzs70.sinaapp.com/demo/layout/widthbug.html" target="_blank">用IE6查看</a>
haslayout导致的另一个问题就是，拥有布局的元素在计算自己的尺寸时，与标准浏览器不同。<a href="http://kingzs70.github.io/demo/layout/widthbug.html" target="_blank">用IE6查看</a>

其他问题：
<ul>
Expand All @@ -90,11 +90,11 @@ <h2>2. haslayout（拥有布局）引发的问题</h2>
这就是为什么，修复ie下的bug总是涉及通过设置某种属性迫使元素拥有布局。关于haslayout属性的详细介绍可以查看这篇文章<a href="http://www.satzansatz.de/cssd/onhavinglayout.html" target="_blank">http://www.satzansatz.de/cssd/onhavinglayout.html</a>。IE7修复了部分由haslayout引起的bug，但并没有完全解决。IE8采用全新的渲染引擎，貌似弃用了haslayout属性，解决了问题的根源。

<h2>3. 与浮动有关的bug</h2>
<h3>1. ie6的双边距bug。<a href="http://kingzs70.sinaapp.com/demo/bug/double-margin.html" target="_blank">IE6查看</a></h3>
<h3>1. ie6的双边距bug。<a href="http://kingzs70.github.io/demo/bug/double-margin.html" target="_blank">IE6查看</a></h3>
出现场景：具有水平边距的浮动元素，靠近容器浮动方向的边距会加倍
基本解决方法：设置float的同时，设置display:inline.
避免出现这个bug：不使用浮动布局，使用display:inline-block，布局。注意：ie6只有inline元素支持这个属性，其他元素设置这个属性只是触发haslayout属性。
<h3>2. ie6的3像素文本偏移bug。<a href="http://kingzs70.sinaapp.com/demo/bug/3px.html" target="_blank">IE6查看</a></h3>
<h3>2. ie6的3像素文本偏移bug。<a href="http://kingzs70.github.io/demo/bug/3px.html" target="_blank">IE6查看</a></h3>
出现场景：文本与一个浮动元素相邻时。
基本解决方法：给浮动元素设置一个-3px的margin值。
<h3>3. ie6的“藏猫猫”bug</h3>
Expand Down
4 changes: 2 additions & 2 deletions _posts/2012-07-17-solutions_for_cross_domain_request.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<h2>1. ajax无法跨域调用</h2>
解决ajax二级跨域的方法很简单。在你的主域下创建一个代理html页面，代码大致如下：
{% highlight html %}
<script type="text/javascript">// <![CDATA[
<script type="text/javascript">
document.domain="demourl.com";
function getXHR () {
try {
Expand All @@ -33,7 +33,7 @@ <h2>1. ajax无法跨域调用</h2>
return new XMLHttpRequest();
}
}
//
</script>
{% endhighlight %}

其他页面也都设置同样的document.domain。这样就可以通过调用代理页面中的getXHR方法获取ajax对象，实现跨域请求。
Expand Down
2 changes: 1 addition & 1 deletion _posts/2013-03-22-web_mathematics_fomula.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
在网页上使用数学公式并不是一件容易的事情，主要原因是数学公式的描述和排版都很复杂。
以这个公式为例：

<a href="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2013/03/20130322223123.png"><img class="size-full wp-image-311" title="20130322223123" src="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2013/03/20130322223123.png" alt="1+\sqrt {x}+\dfrac {1+\tan \left( x\right) } {\sin \left( x\right) }" width="373" height="143" data-pinit="registered" /></a>
<a href="http://kingzs70-wordpress.stor.github.io/uploads/2013/03/20130322223123.png"><img class="size-full wp-image-311" title="20130322223123" src="http://kingzs70-wordpress.stor.github.io/uploads/2013/03/20130322223123.png" alt="1+\sqrt {x}+\dfrac {1+\tan \left( x\right) } {\sin \left( x\right) }" width="373" height="143" data-pinit="registered" /></a>

目前，数学公式主要有如下几种描述方法：
<!--more-->
Expand Down
2 changes: 1 addition & 1 deletion _posts/2013-04-14-my_seven_principles_about_product_design.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ <h2>原则一. 从概念开始。</h2>
产品设计一定是从概念开始。引用《结网》的一副图片，原图源于Scott McCloud的<a href="http://book.douban.com/subject/4727293/" target="_blank">《理解漫画》</a>
<!--more-->

<a href="http://kingzs70.sinaapp.com/2013/04/14/my_seven_principles_about_product_design/6867e95fjw1e3pascc590j" rel="attachment wp-att-329"><img class="aligncenter size-full wp-image-329" title="作品创作遵循的6个步骤" src="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2013/04/6867e95fjw1e3pascc590j.jpg" alt="作品创作遵循的6个步骤" data-pinit="registered" /></a>
<a href="http://kingzs70.github.io/2013/04/14/my_seven_principles_about_product_design/6867e95fjw1e3pascc590j" rel="attachment wp-att-329"><img class="aligncenter size-full wp-image-329" title="作品创作遵循的6个步骤" src="http://kingzs70-wordpress.stor.github.io/uploads/2013/04/6867e95fjw1e3pascc590j.jpg" alt="作品创作遵循的6个步骤" data-pinit="registered" /></a>


互联网产品同样应该遵循这个原则。如果一个产品的概念模型很复杂，无法通过一两句话说清楚，那这款产品是否值得做，就有待考量。切记不可从形式入手定义产品，否则做出来的东西可能除了自己别人都不理解。更不应该把另一个网站的外观或者风格直接应用到自己的产品中。国内有很多不成功的产品显得很山寨就因为只抄袭了国外网站的形式，套上了自己的概念。
Expand Down
4 changes: 2 additions & 2 deletions _posts/2013-05-11-my_view_on_the_career_development_of_web_front_end.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ <h3>3. 前端工程师应该具备怎样的知识结构？</h3>

关于前端工程师的知识结构，上一个问题中已经提到了一部分，下面是别人给出的总结，我就不重复造轮子了，图片版权归原作者所有。

[caption id="attachment_411" align="aligncenter" width="525" caption="2012前端工程师知识结构"]<a href="http://weibo.com/1700082927/xC029u1n8" target="_blank"><img src="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2013/05/655534efgw1do2a8dvcldj-1024x928.jpg" alt="2012前端工程师知识结构" title="2012前端工程师知识结构" width="525" height="475" class="size-large wp-image-411" /></a>[/caption]
<a href="http://weibo.com/1700082927/xC029u1n8" target="_blank"><img src="http://kingzs70-wordpress.stor.github.io/uploads/2013/05/655534efgw1do2a8dvcldj-1024x928.jpg" alt="2012前端工程师知识结构" title="2012前端工程师知识结构" width="525" height="475" class="size-large wp-image-411" /></a>

<a href="http://www.flickr.com/photos/kejun/3114605967/sizes/o/in/photostream/" target="_blank"><img src="http://kingzs70-wordpress.stor.sinaapp.com/uploads/2013/05/d96bcca74b4d4a010c3b17366685cc18_r-1024x627.jpg" alt="" title="d96bcca74b4d4a010c3b17366685cc18_r" width="525" height="321" class="aligncenter size-large wp-image-413" /></a>
<a href="http://www.flickr.com/photos/kejun/3114605967/sizes/o/in/photostream/" target="_blank"><img src="http://kingzs70-wordpress.stor.github.io/uploads/2013/05/d96bcca74b4d4a010c3b17366685cc18_r-1024x627.jpg" alt="" title="d96bcca74b4d4a010c3b17366685cc18_r" width="525" height="321" class="aligncenter size-large wp-image-413" /></a>

<h3>4. 前端在产品研发团队中的地位与价值？</h3>

Expand Down

0 comments on commit 5e32b56

Please sign in to comment.