WEB前端架构(三)

先跟关注我的各位说声抱歉,快一周没更新了。 实在是因为太忙了,最近周末在忙装修的事,周内又要加班。 因为是新公司嘛,本来就忙,三天前又被临时抓去写一个手机微信上用的购物车。。 我也是忙的有点脑抽了,拿着图顺着操作步骤就写下去了,到后来才发现,这不就是一步一步的面向过程的写法了么, 所有的操作全都纠缠在一起,数字和操作用变量到处传来传去, 结果毫无意外的写成了一坨屎。

然后是当然的推翻重写啊, 搞一个购物车对象,然后添加各种方法,操作数据来渲染dom, 这才是正确的套路, 今天先说下思路, index.html,用load加载各个页面的内容进来; 用window.hash来指定页面的链接,就这样: xxx.xxx.com/index.html#product 用window.location.hash读取#后面的值 然后我写了一个goto方法,

goto( '要去的页面名','回调方法' );
function goto( _url, callback){
 $('#wrap').load( _url,function(d){
 callback(d);
 })
}

要注意load方法加载进来的html页面时,加载进来的dom节点无法直接绑定事件,要在回调里再重新绑定一下。 因为你load网页进来时,整个网页其实已经加载完成,事件都绑定完了,你再load进来的dom节点,当然就没有事件可绑定了。 然后在config.js里用switch写了个路由方法,来指定页面的跳转 大意就是 获得hash的值,

switch(hash) {
 case 'product':
 $.load('product.html');
 break;


 case 'xx1':
 $.load('xxx1.html');
 break;
 ...
} 

之类的

然后购物车对象:

var cart = {
 addProduct:function(product){

 },
 editCart:function(){

 },
 emptyCart:function(){
 ...
 }
}

之类的,, 今晚又加班到晚上9点,,头疼,,不写了, 下次再更

本文分享自微信公众号 - web前端教室(webfeel)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-10-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据派THU

【独家】一文读懂大数据计算框架与平台

1. 前言 计算机的基本工作就是处理数据,包括磁盘文件中的数据,通过网络传输的数据流或数据包,数据库中的结构化数据等。随着互联网、物联网等技术得到越来越广泛的应...

1.3K70
来自专栏熊二哥

架构设计深入学习01--概论与预架构阶段

完成一个比较复杂的项目后,终于有空看看书了,这次决定将架构设计的方法论进行一次系统的学习,借助温昱大师的《一线架构师》一书。我将把这次学习分成三部分,分别是概论...

26350
来自专栏哲学驱动设计

Rafy 领域实体框架 - 领域模型设计器(建模工具)设计方案

去年4月,我们为 Rafy 框架添加了领域模型设计器组件。时隔一年,谨以本文,简要说明该领域模型设计器的设计思想。 设计目标 Rafy 实体框架中以领域驱动设计...

415100
来自专栏熊二哥

企业模式和设计模式快速入门

相信大家对GOF的23个设计模式和Martin Fowler的企业应用架构模式都有过了解,这部分的内容和知识非常驳杂,不过真正常用的模式并不多,比如单例模式、策...

21770
来自专栏张善友的专栏

持续集成及部署利器:Go

Go是一款先进的持续集成和发布管理系统,由ThoughtWorks开发。(不要和Google的编程语言Go混淆了!)其前身为CruiseControl,是Tho...

35050
来自专栏phodal

前后端分离之领域模型的思考

我们总以为前后端分离之后,我们就可以写出更干净的View。然而,现实并没有那么美好。因为在我们的View层里,不仅仅只有Template,还有Controlle...

22250
来自专栏phodal

Stepping.js——两步完成前后端分离架构设计

一周前,参加了公司的一个架构设计与建模的工作坊——『事件风暴』。从某种意义上来说,这是一个关于架构设计与软件建模的工作坊。于是便闪现了一个灵感,便有了 Step...

26490
来自专栏云计算

Oath如何迁移到OpenStack?

导读 当你为互联网巨头Oath(原雅虎和AOL)工作时,你想做什么?你想更新他们的基础设施? 将超大规模企业数据中心从传统的定制系统迁移到 OpenStack ...

22270
来自专栏phodal

RePractise: 从真实世界到前后端的设计

RePractise终于又迎来了新的一篇,要知道上一篇可是在半年前呢——《Repractise前端篇: 前端演进史》。照RePractise惯例,这又是一篇超长...

21270
来自专栏熊二哥

架构设计深入学习02-概念架构与细化架构

胜兵先胜而后求战,败兵先战而后求胜—《孙子兵法》。 这部分有些内容比较陈旧,但原理和思路还是一致的。 ? 通常来说,概念架构满足"架构=组件+交互"且只关注高...

27580

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励