http://www.cnblogs.com/wrmfw/archive/2011/09/25/2190402.html
http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html#1
http://www.slideshare.net/d0nn9n/zhaozexin-frontend
张克军
@kejunz | hikejun.com
很多工作像长跑一样, 需要坚持不懈的做,往往到最后才能体现出其意义
过程常常伴随着思考和纠结
绝对不能走
(不能用变通的方式达成短期目标)
Infrastructure /ˈɪnfrəstrʌktʃə(r)/
组织运行所必需的设施、设备和服务的体系
基础架构就像一个舞台,舞台布置好了,男女老少都可以在上面表演。舞台包含了灯光、音响等。
前端团队运行所必需的规范、工具和系统的体系
*注:跟后端基础架构重叠
<div class="wrapper page-type"> <div id="header">header</div> <div id="content"> <div class="main">content...</div> <div class="aside">content...</div> </div> <div id="footer">footer</div> </div>
<div class="mod" id="mod-id"> <div class="hd">title</div> <div class="bd">content...</div> <div class="ft">footer</div> </div>
<div class="mod" id="mod-id"> <div class="hd">title</div> <div class="bd">content...</div> </div>
<div class="mod" id="db-hotsong"> <div class="hd">人气作品 · · · · · · </div> <div class="bd"> <div class="songinfo">...</div> <div class="player">...</div> <div class="lyric">...</div> </div> </div>
<div class="intro"> ${dui.entryItem(mod_culture['headline'])} </div> ... <div class="entry-list"> ${dui.list(entry_list)} </div>
通过本地开发环境,直接开发Mako模板。
dui.page dui.mod dui.title-bar dui.list dui.list-msg dui.item dui.album-item dui.comment-item dui.user dui.link-button dui.hot-button dui.rating dui.text
<div id="db-cover" class="mod">...</div> Do.add('dialog-css', {path: 'http://t.douban.com/css/ui/dialog.css', type: 'css'}); Do.add('dialog', {path: 'http://t.douban.com/js/ui/dialog.js', type: 'js', requires: ['dialog-css']}); Do('dialog', function(){ $('#db-cover .bn-std[href$=#rec]').click(function(e){ e.preventDefault(); dui.Dialog({ title: '向我的友邻推荐芝华士骑士群声', width: 500, content: '推荐语:', buttons: [ { text: '确定', method: function (o) { $('form', o.node)[0].submit(); o.close(); } }, 'cancel' ] }).open(); }); });
Do('mod1', 'mod2', function () { // your code });
(function($){ var _privateVariable; MyClass = function(el, config){ this.init(); }; MyClass.prototype = { init: function () { this.renderUI(); this.bindUI(); this.syncUI(); }, renderUI: function () {}, bindUI: function () {}, syncUI: function () {}, //...... }; $.fn.myPlugin = function(config){ return this.each(function(){ (new MyClass(this, config)); }); } })(jQuery);
对开发环节、Build环节、上线环节的改进