Menu
Woocommerce Menu

8个非常有用的CSS工具,前端进阶篇之如何编写可维护可升级的代码

0 Comment


那么些令人惊讶的 HTML、CSS、JavaScript 工具和库

2017/05/09 · 基本功技能 ·
工具,

初稿出处:
oschina   

前端开拓很稀奇:
它入门很简单,可是想要成为大牌却很难。有太多的事体必要思量,随处都有亟待微调的地方,太多的细节管理才具确认保证让一切都正好好。幸运的是,开拓者和设计员平素从事于为大家提供卓有成效的工具和能源,来增加我们的本事、让大家做的越来越好。

就此明天自个儿搜聚一密密麻麻省时的、有用的 HTML、CSS 和 JavaScript
能源给大家。作者希望那些工具将援救您提升等专科学园业本事以致工作流程。

8个特别实用的CSS工具

2011/08/01 · CSS ·
CSS

写越来越好的CSS是持有网页设计员和开垦职员应该争取的东西,幸运的是,这里有点工具,能够帮忙大家做到那或多或少。在那篇作品中,大家采摘了有个别新的
CSS工具,以帮衬写出越来越好的CSS。从学习新的CSS3属性,到让你的CSS代码更敏捷,这里一定有您须求的一款CSS工具。

1. CSS3 Patterns Gallery

CSS3 帕特terns
Gallery,令你通过缩略图或全屏情势浏览种种CSS3样式,采摘精彩纷呈的CSS样式以便于你能够借用到您的网址上。

2. PrefixMyCSS

图片 1

  
PrefixMyCSS协助您节省时间,自动为CSS代码增加须要的质量。粘贴你的代码到左臂的框框,点击“prefix”就能自动为CSS代码添加供给的前缀。那个工具分明是我们的高铁嘛,高效连忙。但完事后要么检查一下相比好,那些时代“意外之灾”真的很难说。至于你信不相信,反正作者是相信的。

3. Layer Styles

图片 2

Layer Styles
是叁个HTML5采纳,辅助您可怜直观地创立CSS。分界面酷似Photoshop,真的只怕被人误感觉在操作PS的哦。

4. Sencha Animator

图片 3

Sencha Animator是八个用以创建包容WebKit浏览器和触屏手提式有线电话机配备的CSS3
的桌面程序。在今后触屏横行的情景下,那样的CSS工具是或不是丰盛及时呢!

   5.The Web Font
Combinator

图片 4

The Web Font
Combinator是用来预览Web字体效果的。该工具已经组成了N多字体,不包涵中文字体(so这几个工具对中文网址的CSS设计木有多大效果与利益)。使用
该工具,你假使选用字体类型,字体大小和行距等,就足以预览网页的header和body字体的效应。

6. CSS Pivot

图片 5

CSS
Pivot令你增加CSS样式到别的网址和经过短连接分享您的杰作,你还能特邀其余人来帮组你革新你的网址。(注:该工具对汉语网址免疫性)

7. CSS Lint

图片 6

CSS
Lint是贰个帮组你检验你的CSS代码是还是不是留慰问题。它经过骨干的语法检查测量检验和既定的法规对CSS代码实行检查评定,开采有失水准的样式或低功效的CSS代码。

8. CSS Prism

图片 7

CSS
Prism让您输入任何网址的CSS,那样你可以轻松更动该网址的背景颜色看功用,借使它是由此CSS定义的。1)你能够神速查见到任何网站的CSS定义的背景观代码;2)你能够自定义网址的背景象,直到相符你得了。

原文:webdesignledger
译文:x-berry

赞 1 收藏
评论

图片 8

前端晋级篇之如何编写可保障可进级的代码

2015/10/16 · JavaScript
· 1 评论 ·
代码

原作出处:
叶小钗(@欲苍穹)   

前言

自家还在游侠客的做政工的时候,每种临近轻巧的移动页面背后往往会暗藏5个以上的多少要求,当中最过复杂的当属机票与酒店的订单填写作业代码

那边先看占星比“简单”的机票代码:

图片 9

接下来看看稍微复杂的小吃摊工作逻辑:

图片 10

机票八个页面包车型大巴代码量到达了陆仟行代码,而商旅的代码竟然超越了7000行,这里还不包涵模板(html)文件!!!

然后初略看了机票的代码,就该页面或然产生的接口央求有十八个之多!!!而宾馆的的互动DOM事件为主多到了天怒人怨的程度:

图片 11

自然,机票团队的相互DOM事件已经多到了本身台式机不能够截图了:

JavaScript

events: { ‘click .js_check_invoice_type’: ‘checkInvoiceType’,
//切换小票类型 ‘click .flight-hxtipshd’: ‘huiXuanDesc’, //惠选表明’click .js_ListReload’: ‘hideNetError’, ‘click #js_return’:
‘backAction’, //重返列表页 ‘click div[data-rbtType]’: ‘showRebate’,
//插烂返现表达 ‘click #paybtn .j_btn’: ‘beforePayAction’, //提交订单
//flightDetailsStore, passengerQueryStore, mdStore, postAddressStorage,
userStore, flightDeliveryStore ‘click .flight-loginbtn2’: ‘bookLogin’,
//登陆 ‘input #linkTel’: ‘setContact’, //保存客商输入的维系人 ‘click
#addPassenger .flight-labq’: ‘readmeAction’,//姓名帮衬 ‘click
.jsDelivery’: ‘selDelivery’, //选拔配送方式 ‘click #jsViewCoupons’:
‘viewCoupons’, //查看消费券使用验证 //flightDetailsStore // ‘click
.j_refundPolicy’: ‘fanBoxAction’, //查看返现新闻 //’click
.flight-bkinfo-tgq .f-r’: ‘tgBoxAction’, //查看退改签 ‘click
.js_del_tab’: ‘showDelListUI’, //配送方式 // ‘click .js_del_cost
.flight-psf i’: ‘selectPaymentType’, // 选择快递开销方式 ‘click
#js_addrList’: ‘AddrListAction’, //选拔地址 ‘click #date-picker’:
‘calendarAction’, //买票日期 //airportDeliveryStore ‘click
#done-address’: ‘zqinairselect’, //购票柜台 ‘click #selectCity’:
‘selectCityAction’, //选拔城市 ‘click #date-zqtime’: ‘showZqTimeUI’,
//售票时间 //airportDeliveryStore ‘click #jsinsure’: ‘viewInsure’,
//保证表明 ‘click #js_invoice_title’: ‘inTitleChangeWrp’,
//小票抬头改造 // userStore, flightOrderInfoInviceStore,
flightOrderStore //don’t move outside ‘click #js_invoice_title_div’:
‘inTitleChangeWrp’, ‘click .flight-icon-arrrht’: ‘showinTitleList’,
//‘+’号,跳转小票抬头列表 //userStore, invoiceUPRADOLStore ‘focusin
#linkTel’: ‘telInput’, ‘focusout #linkTel’: ‘telInputFinish’,
‘touchstart input’: ‘touchStartAction’, //
管理Android手提式有线电话机上点击不灵敏难点 ‘click #package .flight-arrrht’:
‘packageSelect’, ‘focusin input’: ‘hideErrorTips’, ‘click
#dist_text_div’: ‘hideErrorTips’, ‘click .j_PackageNotice’:
‘toggletips’, ‘click .j_AnnouncementNotice’: ‘toggleNotice’, ‘click
#travalPackageDesc’: ‘forwardToTravalPackage’, //don’t move into child
modules ‘click #airInsureDesc’: ‘showAirInsureDesc’, ‘click #paybtn’:
‘orderDetailAction’,//价格明细 ‘click .J_retriveVerifyCodeBtn’:
‘getVerifyCode’, ‘click .J_toPay’: ‘toPayAction’, ‘click
.J_closeVerifyCode’: ‘closeVerifyCodePopup’, ‘keyup .J_verifyCodePopup
input’: ‘setToPayBtnStatus’, ‘click .js_flight_seat’:
‘selectRecommendCabin’, // 接纳推荐仓位 ‘click .j_changeFlight’:
‘changeFlightAction’, // 推荐航班弹层中退换航班 ‘focusin
input:not([type=tel])’: ‘adjustInputPosition’, // iphone5/5s
ios8搜狗输入法遮住input ‘click .js_addr,#js_addr_div’:
‘editDeliverAddress’,//报废凭据,详细地址编辑 ‘click .js_showUserInfo’:
‘showUserInfo’, // add by hkhu v2.5.9 ‘click #logout’: ‘logout’, // add
by hkhu v2.5.9 ‘click #gotoMyOrder’: ‘gotoMyOrder’, // add by hkhu
v2.5.9 ‘touchstart #logout’: function (e) {
$(e.currentTarget).addClass(‘current’); }, ‘touchstart #gotoMyOrder’:
function (e) { $(e.currentTarget).addClass(‘current’); }, ‘click
.js_buddypayConfirm’: ‘buddypayConfirmed’, ‘click .js_pickupTicket’:
‘viewPickUp’, //261接送机券表明 ‘click .flt-bking-logintips’:
‘closelogintips’//关闭接送机券提醒 },

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
events: {
‘click .js_check_invoice_type’: ‘checkInvoiceType’, //切换发票类型
‘click .flight-hxtipshd’: ‘huiXuanDesc’, //惠选说明
‘click .js_ListReload’: ‘hideNetError’,
‘click #js_return’: ‘backAction’, //返回列表页
‘click div[data-rbtType]’: ‘showRebate’, //插烂返现说明
‘click #paybtn .j_btn’: ‘beforePayAction’, //提交订单                        //flightDetailsStore, passengerQueryStore, mdStore, postAddressStorage, userStore, flightDeliveryStore
‘click .flight-loginbtn2’: ‘bookLogin’, //登录
‘input #linkTel’: ‘setContact’, //保存用户输入的联系人
‘click #addPassenger .flight-labq’: ‘readmeAction’,//姓名帮助
‘click .jsDelivery’: ‘selDelivery’, //选择配送方式
‘click #jsViewCoupons’: ‘viewCoupons’, //查看消费券使用说明                                                  //flightDetailsStore
// ‘click .j_refundPolicy’: ‘fanBoxAction’, //查看返现信息
//’click .flight-bkinfo-tgq .f-r’: ‘tgBoxAction’, //查看退改签
‘click .js_del_tab’: ‘showDelListUI’, //配送方式
//            ‘click .js_del_cost .flight-psf i’: ‘selectPaymentType’, // 选择快递费用方式
‘click #js_addrList’: ‘AddrListAction’, //选择地址
‘click #date-picker’: ‘calendarAction’, //取票日期                                                                    //airportDeliveryStore
‘click #done-address’: ‘zqinairselect’, //取票柜台
‘click #selectCity’: ‘selectCityAction’, //选择城市
‘click #date-zqtime’: ‘showZqTimeUI’, //取票时间                                                                        //airportDeliveryStore
‘click #jsinsure’: ‘viewInsure’, //保险说明
‘click #js_invoice_title’: ‘inTitleChangeWrp’, //发票抬头更改                // userStore, flightOrderInfoInviceStore, flightOrderStore    //don’t move outside
‘click #js_invoice_title_div’: ‘inTitleChangeWrp’,
‘click .flight-icon-arrrht’: ‘showinTitleList’, //‘+’号,跳转发票抬头列表                 //userStore, invoiceURLStore
‘focusin #linkTel’: ‘telInput’,
‘focusout #linkTel’: ‘telInputFinish’,
‘touchstart input’: ‘touchStartAction’, // 处理Android手机上点击不灵敏问题
‘click #package .flight-arrrht’: ‘packageSelect’,
‘focusin input’: ‘hideErrorTips’,
‘click #dist_text_div’: ‘hideErrorTips’,
‘click .j_PackageNotice’: ‘toggletips’,
‘click .j_AnnouncementNotice’: ‘toggleNotice’,
‘click #travalPackageDesc’: ‘forwardToTravalPackage’,       //don’t move into child modules
‘click #airInsureDesc’: ‘showAirInsureDesc’,
‘click #paybtn’: ‘orderDetailAction’,//价格明细
‘click .J_retriveVerifyCodeBtn’: ‘getVerifyCode’,
‘click .J_toPay’: ‘toPayAction’,
‘click .J_closeVerifyCode’: ‘closeVerifyCodePopup’,
‘keyup .J_verifyCodePopup input’: ‘setToPayBtnStatus’,
‘click .js_flight_seat’: ‘selectRecommendCabin’, // 选择推荐仓位
‘click .j_changeFlight’: ‘changeFlightAction’, // 推荐航班弹层中更改航班
‘focusin input:not([type=tel])’: ‘adjustInputPosition’, // iphone5/5s ios8搜狗输入法遮住input
‘click .js_addr,#js_addr_div’: ‘editDeliverAddress’,//报销凭证,详细地址编辑
‘click .js_showUserInfo’: ‘showUserInfo’, // add by hkhu v2.5.9
‘click #logout’: ‘logout’, // add by hkhu v2.5.9
‘click #gotoMyOrder’: ‘gotoMyOrder’, // add by hkhu v2.5.9
‘touchstart #logout’: function (e) { $(e.currentTarget).addClass(‘current’); },
‘touchstart #gotoMyOrder’: function (e) { $(e.currentTarget).addClass(‘current’); },
‘click .js_buddypayConfirm’: ‘buddypayConfirmed’,
‘click .js_pickupTicket’: ‘viewPickUp’, //261接送机券说明
‘click .flt-bking-logintips’: ‘closelogintips’//关闭接送机券提示
},

就这种体积的页面,假使急需迭代需要、打BUG补丁的话,小编敢鲜明的说,多少个BUG的修补很轻松孳生其余BUG,而地方还独自是中间多个事情页面,前面还或许有壮大而复杂的前端框架呢!如此繁复的前端代码维护职业可不是开玩笑的!

PS:说道此处,不得不为驴老妈的前端水平点个赞,行业内部少有的单页应用,一套代码H5&Hybrid同有的时候间运维不说,还化解了SEO难题,嗯,相当的赞。

怎么有限支撑这种页面,怎样准备这种页面是大家明日商酌的根本,而上述是驴阿妈合併后的代码,他们八个公司的陈设性思路不便在此处张开。

明日,作者这里提供贰个思路,认真阅读此文大概在偏下地点对您具备帮助:

JavaScript

① 怎么着将贰个繁缛的页面拆分为一个个独立的页面组件模块 ②
如何将分拆后的政治工作组件模块重新合为贰个一体化的页面 ③
从重构角度看组件化开垦拉动的好处 ④ 在此之前端优化的角度对待组件化开拓

1
2
3
4
① 如何将一个复杂的页面拆分为一个个独立的页面组件模块
② 如何将分拆后的业务组件模块重新合为一个完整的页面
③ 从重构角度看组件化开发带来的好处
④ 从前端优化的角度看待组件化开发

文中是自家个人的有的框架&业务开支经历,希望对各位有用,也指望各位多多关照研讨,建议文中不足以致建议您的有个别建议

由于该类型涉嫌到了种类拆分与联合,基本属于一个完完全全的前端工程化案例了,所以将之放到了github上:https://github.com/yexiaochai/mvc

其间工程化一块的代码,后续会由另一人小友人持续更新,就算该文对各位有所帮助的话请各位给品种点个赞、加颗星:)

自家相信只即便高级中学级水平的前端,认真阅读此文一定会对你有少数帮衬滴。

HTML 和 CSS 工具

  • Initializr
    此工具创造一个基于 HTML5 Boilerplate 的可自定义模板。 在 JavaScript
    和 jQuery
    之间张开分选,决定是不是要样本内容,并钦赐包容性和服务器配置要求。
    您将赢得三个兼有 Boilerplate 首要职能的沙盘,以起始你的项目。

图片 12

  • Layer Styles
    一个很简单的工具,以直观的章程来创立 CSS
    ——非常像三个图形编辑器。该工具允许你增添阴影、内阴影、背景、边界和圆角和生成跨浏览器的
    CSS 代码。

图片 13

  • Mobile Boilerplate
    三个可以知道创设充足的和高品质的活动 Web
    应用程序模板。它能够保障种种浏览器的包容性,不只好协作各类高等智能手机,也能相配旧版的Nokia、塞班、以致微软的活动平台。

图片 14

  • Vogue
    该工具在具有浏览器中再一次加载页面包车型客车样式表(而不是 HTML
    ),以致足以布署为在七个浏览器中还要活动重新加载页面。
    该工具不托管您的网址,而是运维您的网站自身的本地服务器。
    要使用它,只需安装 NodeJS 和 npm 。

图片 15

  • css-x-fire
    此工具允许从 Firebug CSS 编辑器编辑 IDE 中的 CSS
    属性,并同意开垦人士静心于 CSS 样式,而不须求刷新浏览器。

图片 16

  • Ffffallback
    一个方可让您测量检验差异字体栈以找到最棒结果的书签。它扫描页面包车型大巴 CSS
    并创立一个克隆页面,您能够在其间测量试验和解析不一致的 fallback 字体。

图片 17

  • CodeKit for Mac OS X
    Code基特能够援救您更加快越来越好地营造网址。每一遍保存时,都会活动编写翻译一切:Process
    Less、Sass、Stylus、Jade、Haml、Slim、CoffeeScript、Javascript 和
    Compass 文件。轻便设置每一个语言的选项。

图片 18

  • Less-Boilerplate
    以 Less 格局编写的 Boilerplate CSS,富含 CSS 重新初始化、CSS3
    补助器,中央列块等等。

图片 19

  • Needle
    v0.1a1

    Needle
    是四个惠及的工具,您可以经过截取网址的有的内容并与此外显示器截图实行比较来测试CSS 是还是不是科学显示。它还提供测量检验总计 CSS 值和 HTML 成分地方的工具。

图片 20

  • Spritemapper
    该应用程序将八个图像合併为三个,并为相应的切成块生成 CSS 定位;
    通过压缩图像的数额和越来越好地采纳连续,CSS spritemapping
    能够减去你的网址的加载时间。

图片 21

  • Normalize.css
    诺玛lize.css 对 CSS 重新设置接纳了稍稍差别的措施。Jonathan Neal 和
    Nicolas Gallagher并不曾撤销全数的浏览器默许值,而是花时间探讨分化的浏览器如哪个地方理差别的代码段,然后保留那么些有用的暗中同意值。它节省了您作为设计员的时间,同期也提供一样的结果。

图片 22

  • Zen Coding
    Zen Coding
    是二个飞速编码和编排的编辑器插件。这么些插件的基本是一个强硬的缩写引擎,它同意你将表明式(类似于
    CSS 选取器)扩大为 HTML 代码。

图片 23

  • CSS Stress Testing and Performance
    Profiling

    Andy Edinborough 大约能在具备浏览器中运作它所谓的“ CSS
    压力测量检验”代码。

图片 24

  • PCSS
    七个 PHP 驱动的 CSS 预管理器,能够扶持您以更少的代码释放 CSS3
    的效果,如类嵌套、服务器端浏览器细节、默许单位和变量。该工具需要PHP5。

图片 25

三个事实上的情景

JavaScript 工具

  • Modernizr 2
    Modernizr 是三个广泛利用的开源 JavaScript 库,可以支持您构建 HTML5
    和 CSS3-powered
    的网址。未来可以将功效检查评定与媒体询问和准星财富加载相结合,这为您提供了在各样景况下开展优化的本事和灵活性。

图片 26

  • FitText
    FitText 是用于响应和流畅布局的 jQuery
    插件,能够调解显示文本的轻重缓急以适应父成分。它也是二个很好的实施方案,用于创设从Mini移动器械到30英寸桌面荧屏,全数内容都能很好展现的标题。

图片 27

  • jQuery
    Waypoints

    Waypoint 是三个Mini jQuery
    插件,能够在你滚动到零部件时轻易实行有个别意义。

图片 28

  • ligature-js
    该 Java
    脚本同意你通过浏览网页上的公文并在伏贴的职位插入连字,将文件情势调换为通用的印刷排版连字。

图片 29

  • StronglyTyped
    叁个 JS 库,允许你钦命各体系型(布尔值、数字、字符串等)和常量(
    Java 中的最终属性)的强类型属性。 它选取 ES5 getter 和
    setter,并在不援救的浏览器中还原为健康、松散类型的性质。

图片 30

  • Kaffeine
    JavaScript 语法的恢弘,试图使其越来越好用。与 JavaScript
    特别临近,代码能够一直编写翻译成JavaScript。

图片 31

  • Crossroads.js
    贰个灵感来源 U奇骏L Route / Dispatch 实用程序的 JS 路由库,它们存在于像
    Rails、Pyramid、Django、CakePHP、CodeIgniter
    等框架上。它剖判三个字符串输入,并由此将字符串与多个方式匹配来决定施行哪个操作。

图片 32

  • HEAD.js
    四个剧本,能够加快、简化和今世化您的网址 – 简明扼要的消除广大难题。
    您能够加载脚本,如图像,乃至安全地接纳 HTML5 和 CSS3 。

图片 33

  • The JavaScript Grid
    传说 JavaScript 的隐讳网格——只需将代码片拖动到书签栏中,张开你的 U翼虎L
    并单击书签。

图片 34

  • Grid Calculator
    贰个能够帮忙你轻松创设自个儿的网格并将其下载到 Adobe Illustrator 或
    Photoshop 的计算器。

图片 35

  • Griddle.it
    一种彻底轻巧的法子来援救您调解布局。全部你所供给做的是将尺寸放在提供的
    U福特ExplorerL
    之后,使一个背景指引图片能够在你的浏览器上中国人民解放军海军工程高校业作。网格是动态成立的,所以任何组合都能干活。

图片 36

1 赞 2 收藏
评论

图片 8

亲自去做地址

代码仓促,恐怕会有BUG哦:)

代码地址:

页面基本构成

因为订单填写页日常有密度,笔者那边挑选绝对复杂而又不曾密度的成品列表页来做验证,当中框架以致业务代码已经做过抽离,不会包罗敏感新闻,一些优化后续会联手到开源blade框架中去。

大家这边列表页的首屏页面如下:

图片 38

大致来讲组成如下:

① 框架等第UI组件UIHeader,底部组件

② 点击日期会出框架品级UI,日历组件UICalendar

③ 点击出发时段、出发小车站、达到汽车站,皆会出框架等级UI

④ header上边包车型地铁日期工具栏需求作为单身的作业模块

⑤ 列表区域可以用作独立的事人体模型块,可是与主业务靠太近,不太相符

⑥ 出发时段、出发小车站、达到小车站都已单身的业务模块

四个页面被我们拆分成了多少个小模块,大家只必要关爱模块内部的互相达成,而囊括业务模块的通讯,业务模块的样式,业务模块的录取,一时半刻有以下约定:

JavaScript

① 单个页面包车型地铁体制全体写在三个文本中,譬喻list里面装有模块对应的是list.css
② 模块之间利用观望者情势阅览数据实体变化,以多少为媒介通讯 ③
经常的话职业模块不可重用,假如有重用的模块,须求分离到common目录中,因为大家后天不思索common重用,那块权且不予理睬

1
2
3
① 单个页面的样式全部写在一个文件中,比如list里面所有模块对应的是list.css
② 模块之间采用观察者模式观察数据实体变化,以数据为媒介通信
③ 一般来说业务模块不可重用,如果有重用的模块,需要分离到common目录中,因为我们今天不考虑common重用,这块暂时不予理睬

这里有个别朋友大概以为单个模块的CSS以致image也理应加入单独,小编这里不太同意,业务页面样式粒度太细的话会给规划带来十分的大的难为,这里再以通俗的话来讲:尼玛,笔者CSS功底常常,拆分的太细,对本身的话难度太高……

倒霉的做法

不佳的那些事情莫过于是相对的,因为不佳的做法常常是比较轻便的做法,对于三次性项目依旧职业相比轻便的页面来说反而是好的做法,举例此处的业务逻辑能够那样写:

JavaScript

define([‘AbstractView’, ‘list.layout.html’, ‘list.html’, ‘BusModel’,
‘BusStore’, ‘UICalendarBox’, ‘UILayerList’, ‘cUser’, ‘UIToast’],
function (AbstractView, layoutHtml, listTpl, BusModel, BusStore,
UICalendarBox, UILayerList, cUser, UIToast) { return
_.inherit(AbstractView, { propertys: function ($super) { $super();
//一群基础属性定义 //…… //交互业务逻辑 this.events = { ‘click
.js_pre_day’: ‘preAction’, //点击前一天触发 ‘click .js_next_day’:
‘nextAction’, //点击后一天触发 ‘click .js_bus_list li’: ‘toBooking’,
//点击列表项目触发 ‘click .js_show_calendar’: ‘showCalendar’,
//点击日期项出日历组件 ‘click .js_show_setoutdate’: ‘showSetoutDate’,
//筛选出发时段 ‘click .js_show_setstation’: ‘showStation’,
//筛选出发站 ‘click .js_show_arrivalstation’: ‘showArrivalStation’,
//筛选达到站 //迭代要求,扩充别的频道入口 ‘click .js-list-tip’: function
() {} }; }, //开端化底部标题栏 initHeader: function (t) { },
//第贰遍dom渲染后,开始化后续会用到的装有dom成分,避防再次获取
initElement: function () {}, showSetoutDate: function () {},
showStation: function () {}, showArrivalStation: function () {},
showCalendar: function () {}, preAction: function (e) {}, nextAction:
function () {}, toBooking: function (e) {}, listInit: function () {},
bindScroll伊夫nt: function () {}, unbindScroll伊夫nt: function () { },
addEvent: function () { this.on(‘onShow’, function () {
//当页面渲染甘休,须求做的早先化操作,例如渲染页面 this.listInit();
//…… }); this.on(‘onHide’, function () { this.unbindScroll伊夫nt();
}); } }); });

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
define([‘AbstractView’, ‘list.layout.html’, ‘list.html’, ‘BusModel’, ‘BusStore’, ‘UICalendarBox’, ‘UILayerList’, ‘cUser’, ‘UIToast’],
function (AbstractView, layoutHtml, listTpl, BusModel, BusStore, UICalendarBox, UILayerList, cUser, UIToast) {
    return _.inherit(AbstractView, {
        propertys: function ($super) {
            $super();
            //一堆基础属性定义
            //……
            //交互业务逻辑
            this.events = {
                ‘click .js_pre_day’: ‘preAction’, //点击前一天触发
                ‘click .js_next_day’: ‘nextAction’, //点击后一天触发
                ‘click .js_bus_list li’: ‘toBooking’, //点击列表项目触发
                ‘click .js_show_calendar’: ‘showCalendar’, //点击日期项出日历组件
                ‘click .js_show_setoutdate’: ‘showSetoutDate’, //筛选出发时段
                ‘click .js_show_setstation’: ‘showStation’, //筛选出发站
                ‘click .js_show_arrivalstation’: ‘showArrivalStation’, //筛选到达站
                //迭代需求,增加其它频道入口
                ‘click .js-list-tip’: function () {}
            };
        },
        //初始化头部标题栏
        initHeader: function (t) { },
        //首次dom渲染后,初始化后续会用到的所有dom元素,以免重复获取
        initElement: function () {},
        showSetoutDate: function () {},
        showStation: function () {},
        showArrivalStation: function () {},
        showCalendar: function () {},
        preAction: function (e) {},
        nextAction: function () {},
        toBooking: function (e) {},
        listInit: function () {},
        bindScrollEvent: function () {},
        unbindScrollEvent: function () { },
        addEvent: function () {
            this.on(‘onShow’, function () {
                //当页面渲染结束,需要做的初始化操作,比如渲染页面
                this.listInit();
                //……
            });
            this.on(‘onHide’, function () {
                this.unbindScrollEvent();
            });
        }
    });
});

据说在此之前的经验,假诺仅仅包含那几个事情逻辑,那样写代码难题不是相当的大,代码量估量在800行左右,不过为了做到总体的事体逻辑,大家这里立时产生了新的需要。

需求迭代

因为本身那边的车的班次列表,最早是未有U安德拉L参数,所以根本不能产出车的班次列表,页面上富有组件模块都以布署,于是这里新增添二个要求:

JavaScript

当url未有出发-达到相关参数信息时,暗中同意弹出出发城市达到城市政委员会公投择框

1
当url没有出发-到达相关参数信息时,默认弹出出发城市到达城市选择框

于是,我们这里会骤增贰个简单的弹出层:

图片 39

本条看似简单的弹出层,背后却暗藏了一个高大的牢笼,因为点击出发只怕达到时会出城市列表,而城市列表本人正是贰个比较复杂的事情:

图片 40

于是页面包车型大巴三结合产生了变动:

① 本人业务逻辑约800行代码

② 新添出发达到筛选弹出层

③ 出发城市页面,估量300行代码

而弹出层的增加产量对事情自己产生了远大的熏陶,本来url是不富含业务参数的,但是点击了弹出层的明确开关,须求退换U昂CoraL参数,并且刷新本人页面包车型大巴数额,于是轻巧的贰个弹出层新扩大直接将页面的复杂程度进步了一倍。

于是该页面代码轻轻便松破千了,后续需要迭代js代码量破3000只是是时间难点,到时候维护便复杂了,页面复杂无规律的DOM操作将会令你焦头烂额,那个时候组件化开拓的优势便能够体现了,于是上边步向组件化开辟的希图。

预备干活

完整架构

本次的代码正视于blade骨架,饱含:


MVC模块,完毕经过url获取科学的page调整器,从而通过view.js达成渲染页面包车型客车功力

② 数据央求模块,完成接口央浼

全站信任于javascript的继续作用,详细的情况见:【一次面试】再谈javascript中的承继,假使不太精通面向对象编制程序,文中代码只怕会有一点困难,也请各位多多领悟。

全体育专科高校业架构如图:

图片 41

框架框架结构图:

图片 42.

上面分别介绍下依次模块,协理各位在下文中能更加好的打听代码,首先是基本MVC的牵线,这里请参见笔者那篇小说:简单的MVC介绍

全局调整器

实际上调控器可谓是变化万千的三个对象,对于服务器端来讲,调节器完结的功效是将这次央求分发到具体的代码模块,由代码模块管理后回去字符串给前端;

对此央求已经赶到浏览器的前端来讲,依照此次需要U凯雷德L(可能此外剖断规范),判别该次哀告应该由哪位前端js调整器施行,那是前面一个调控器干的事情;

实在的此番拍卖逻辑走入四个具体的page后,那一个page事实上也得以看作贰个调控器存在……

咱俩那边的调控器,首要造成依照当下呼吁实例化View的效果,而且会提供一些view等第希望单例使用的接口:

JavaScript

define([ ‘UIHeader’, ‘UIToast’, ‘UILoading’, ‘UIPageView’, ‘UIAlert’
], function (UIHeader, UIToast, UILoading, UIPageView, UIAlert) {
return _.inherit({ propertys: function () { //view搜索目录
this.viewRootPath = ‘views/’; //私下认可view this.defaultView = ‘index’;
//当前视图路线 this.viewId; this.viewUrl; //视图集 this.views = {};
//是还是不是张开单页应用 // this.isOpenWebapp = _.getHybridInfo().platform ==
‘baidubox’ ? true : false; this.isOpenWebapp = false; this.viewMapping =
{}; //UIHeader须求释放出来 this.UIHeader = UIHeader; this.interface = [
‘forward’, ‘back’, ‘jump’, ‘showPageView’, ‘hidePageView’,
‘showLoading’, ‘hideLoading’, ‘showToast’, ‘hideToast’, ‘showMessage’,
‘hideMessage’, ‘showConfirm’, ‘hideConfirm’, ‘openWebapp’, ‘closeWebapp’
]; }, initialize: function (options) { this.propertys();
this.setOption(options); this.initViewPort(); this.initAppMapping();
//开启fastclick $.bindFastClick && $.bindFastClick(); }, setOption:
function (options) { _.extend(this, options); }, //创建dom结构
initViewPort: function () { this.d_header = $(‘#headerview’);
this.d_state = $(‘#js_page_state’); this.d_viewport = $(‘#main’);
//实例化全局使用的header,这里就好像某些语无伦次 this.header = new
this.UIHeader({ wrapper: this.d_header });
//非共享能源,这里应该引进app概念了 this.pageviews = {}; this.toast =
new UIToast(); this.loading = new UILoading(); this.alert = new
UIAlert(); this.confirm = new UIAlert(); }, openWebapp: function () {
this.isOpenWebapp = true; }, closeWebapp: function () {
this.isOpenWebapp = false; }, showPageView: function (name,
_viewdata_, id) { var view = null, k, scope = this.curViewIns || this;
if (!id) id = name; if (!_.isString(name)) return; // for (k in
_viewdata_) { // if (_.isFunction(_viewdata_[k]))
_viewdata_[k] = $.proxy(_viewdata_[k], scope); // } view =
this.pageviews[id]; var arr = name.split(‘/’); var getViewPath =
window.getViewPath || window.GetViewPath; if (!view) { view = new
UIPageView({ // bug fixed by zzx viewId: arr[arr.length – 1] || name,
viewPath: getViewPath ? getViewPath(name) : name, _viewdata_:
_viewdata_, onHide: function () { scope.initHeader(); } });
this.pageviews[id] = view; } else { view.setViewData(_viewdata_); }
view.show(); }, hidePageView: function (name) { if (name) { if
(this.pageviews[name]) this.pageviews[name].hide(); } else { for
(var k in this.pageviews) this.pageviews[k].hide(); } }, showLoading:
function () { this.loading.show(); }, hideLoading: function () {
this.loading.hide(); }, showToast: function (msg, callback) {
this.toast.resetDefaultProperty(); this.toast.content = msg; if
(callback) this.toast.hideAction = callback; this.toast.refresh();
this.toast.show(); }, hideToast: function () { this.toast.hide(); },
showMessage: function (param) { if (_.isString(param)) { param = {
content: param }; } this.alert.resetDefaultProperty();
this.alert.setOption(param); this.alert.refresh(); this.alert.show(); },
hideMessage: function () { this.alert.hide(); }, showConfirm: function
(params) { if (!params) params = {}; if (typeof params == ‘string’) {
params = { content: params }; } this.confirm.resetDefaultProperty();
//与showMessage分歧样的地点 this.confirm.btns = [ { name: ‘取消’,
className: ‘cm-btns-cancel js_cancel’ }, { name: ‘确定’, className:
‘cm-btns-ok js_ok’ } ]; this.confirm.setOption(params);
this.confirm.refresh(); this.confirm.show(); }, hideConfirm: function ()
{ this.confirm.hide(); }, //发轫化app initApp: function () {
//第贰回加载无需行动由决定 this.loadViewByUrl();
//后边的加载全体要由此路由拍卖 if (this.isOpenWebapp === true)
$(window).on(‘popstate.app’, $.proxy(this.loadViewByUrl, this)); },
loadViewByUrl: function (e) { this.hidePageView(); var url =
decodeU景逸SUVIComponent(location.href).toLowerCase(); var viewId =
this.getViewIdRule(url); viewId = viewId || this.defaultView;
this.viewId = viewId; this.viewUrl = url; this.switchView(this.viewId);
}, //@override getViewIdRule: function (url) { var viewId = ”, hash =
”; var reg = /webapp\/.+\/(.+)\.html/; var match = url.match(reg);
if (match && match[1]) viewId = match[1]; return viewId; },
//@override setUrlRule: function (viewId, param, replace, project) { var
reg = /(webapp\/.+\/)(.+)\.html/; var url = window.location.href; var
match = url.match(reg); var proj = project ? ‘webapp/’ + project :
match[1]; var preUrl = ”, str = ”, i = 0, _k, _v;
//这里那样做稍微过分业务了 *bug* var keepParam = [ ‘us’ ], p; if
(!viewId) return; if (!match || !match[1]) { preUrl = url +
‘/webapp/bus/’ + viewId + ‘.html’; } else { preUrl = url.substr(0,
url.indexOf(match[1])) + proj + viewId + ‘.html’; ; }
//特定的参数将会一向带上去,门路、来源等标识 for (i = 0; i <
keepParam.length; i++) { p = keepParam[i]; if (_.getUrlParam()[p])
{ if (!param) param = {}; param[p] = _.getUrlParam()[p]; } } i = 0;
for (k in param) { _k = encodeURIComponent(_.removeAllSpace(k)); _v =
encodeURIComponent(_.removeAllSpace(param[k])); if (i === 0) { str +=
‘?’ + _k + ‘=’ + _v; i++; } else { str += ‘&’ + _k + ‘=’ + _v; } }
url = preUrl + str; if (this.isOpenWebapp === false) { window.location =
url; return; } if (replace) { history.replaceState(”, {}, url); } else
{ history.pushState(”, {}, url); } }, switchView: function (id) { var
curView = this.views[id]; //切换前的脚下view,立刻会隐敝 var tmpView =
this.curView; if (tmpView && tmpView != curView) { this.lastView =
tmpView; } //加载view样式,权宜之计 // this.loadViewStyle(id);
//即使当前view存在,则实施请onload事件 if (curView) {
//若是当前要跳转的view便是当前view的话便不予处理//这里具体管理逻辑要改*************************************
if (curView == this.curView) { return; } this.curView = curView;
this.curView.show(); this.lastView && this.lastView.hide(); } else { //
this.showLoading(); this.loadView(id, function (View) {
//每一次加载停止将状态栏遮蔽,那些代码要改 // this.hideLoading();
this.curView = new View({ viewId: id, refer: this.lastView ?
this.lastView.viewId : null, 应用程式: this, wrapper: this.d_viewport });
//设置网页上的view标记 this.curView.$el.attr(‘page-url’, id);
//保存至队列 this.views[id] = this.curView; this.curView.show();
this.lastView && this.lastView.hide(); }); } }, //加载view loadView:
function (path, callback) { var self = this;
requirejs([this.buildUrl(path)], function (View) { callback &&
callback.call(self, View); }); }, //override
//配置可能会有的路径扩充,为Hybrid与种种门路做适配 initAppMapping:
function () { // console.log(‘该方法必需被重写’); }, //@override
buildUrl: function (path) { var mappingPath = this.viewMapping[path];
return mappingPath ? mappingPath : this.viewRootPath + ‘/’ + path + ‘/’

  • path; }, //此处须求二个创新逻辑,譬喻在index view再点击到index
    view不会有影响,下一次改**************************
    forward: function (viewId, param, replace) { if (!viewId) return; viewId
    = viewId.toLowerCase(); this.setUrlRule(viewId, param, replace);
    this.loadViewByUrl(); }, jump: function (path, param, replace) { var
    viewId; var project; if (!path) { return; } path =
    path.toLowerCase().split(‘/’); if (path.length <= 0) { return; }
    viewId = path.pop(); project = path.length === 1 ? path.join(”) + ‘/’ :
    path.join(”); this.setUrlRule(viewId, param, replace, project);
    this.loadViewByUrl(); }, back: function (viewId, param, replace) { if
    (viewId) { this.forward(viewId, param, replace) } else { if
    (window.history.length == 1) { this.forward(this.defaultView, param,
    replace) } else { history.back(); } } } }); }); abstract.app
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
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
define([
  ‘UIHeader’,
  ‘UIToast’,
  ‘UILoading’,
  ‘UIPageView’,
  ‘UIAlert’
], function (UIHeader, UIToast, UILoading, UIPageView, UIAlert) {
 
    return _.inherit({
        propertys: function () {
            //view搜索目录
            this.viewRootPath = ‘views/’;
 
            //默认view
            this.defaultView = ‘index’;
 
            //当前视图路径
            this.viewId;
            this.viewUrl;
 
            //视图集
            this.views = {};
 
            //是否开启单页应用
            //      this.isOpenWebapp = _.getHybridInfo().platform == ‘baidubox’ ? true : false;
            this.isOpenWebapp = false;
 
            this.viewMapping = {};
 
            //UIHeader需要释放出来
            this.UIHeader = UIHeader;
 
            this.interface = [
                ‘forward’,
                ‘back’,
                ‘jump’,
                ‘showPageView’,
                ‘hidePageView’,
                ‘showLoading’,
                ‘hideLoading’,
                ‘showToast’,
                ‘hideToast’,
                ‘showMessage’,
                ‘hideMessage’,
                ‘showConfirm’,
                ‘hideConfirm’,
                ‘openWebapp’,
                ‘closeWebapp’
            ];
 
        },
 
        initialize: function (options) {
            this.propertys();
            this.setOption(options);
            this.initViewPort();
            this.initAppMapping();
 
            //开启fastclick
            $.bindFastClick && $.bindFastClick();
 
        },
 
        setOption: function (options) {
            _.extend(this, options);
        },
 
        //创建dom结构
        initViewPort: function () {
 
            this.d_header = $(‘#headerview’);
            this.d_state = $(‘#js_page_state’);
            this.d_viewport = $(‘#main’);
 
            //实例化全局使用的header,这里好像有点不对
            this.header = new this.UIHeader({
                wrapper: this.d_header
            });
 
            //非共享资源,这里应该引入app概念了
            this.pageviews = {};
            this.toast = new UIToast();
            this.loading = new UILoading();
            this.alert = new UIAlert();
            this.confirm = new UIAlert();
        },
 
        openWebapp: function () {
            this.isOpenWebapp = true;
        },
 
        closeWebapp: function () {
            this.isOpenWebapp = false;
        },
 
        showPageView: function (name, _viewdata_, id) {
            var view = null, k, scope = this.curViewIns || this;
            if (!id) id = name;
            if (!_.isString(name)) return;
            //    for (k in _viewdata_) {
            //      if (_.isFunction(_viewdata_[k])) _viewdata_[k] = $.proxy(_viewdata_[k], scope);
            //    }
            view = this.pageviews[id];
            var arr = name.split(‘/’);
            var getViewPath = window.getViewPath || window.GetViewPath;
            if (!view) {
                view = new UIPageView({
                    // bug fixed by zzx
                    viewId: arr[arr.length – 1] || name,
                    viewPath: getViewPath ? getViewPath(name) : name,
                    _viewdata_: _viewdata_,
                    onHide: function () {
                        scope.initHeader();
                    }
                });
                this.pageviews[id] = view;
            } else {
                view.setViewData(_viewdata_);
            }
            view.show();
 
        },
 
        hidePageView: function (name) {
            if (name) {
                if (this.pageviews[name]) this.pageviews[name].hide();
            } else {
                for (var k in this.pageviews) this.pageviews[k].hide();
            }
        },
 
        showLoading: function () {
            this.loading.show();
        },
 
        hideLoading: function () {
            this.loading.hide();
        },
 
        showToast: function (msg, callback) {
            this.toast.resetDefaultProperty();
            this.toast.content = msg;
            if (callback) this.toast.hideAction = callback;
            this.toast.refresh();
            this.toast.show();
        },
 
        hideToast: function () {
            this.toast.hide();
        },
 
        showMessage: function (param) {
            if (_.isString(param)) {
                param = { content: param };
            }
 
            this.alert.resetDefaultProperty();
            this.alert.setOption(param);
            this.alert.refresh();
            this.alert.show();
        },
 
        hideMessage: function () {
            this.alert.hide();
        },
 
        showConfirm: function (params) {
            if (!params) params = {};
            if (typeof params == ‘string’) {
                params = {
                    content: params
                };
            }
 
            this.confirm.resetDefaultProperty();
 
            //与showMessage不一样的地方
            this.confirm.btns = [
              { name: ‘取消’, className: ‘cm-btns-cancel js_cancel’ },
              { name: ‘确定’, className: ‘cm-btns-ok js_ok’ }
            ];
            this.confirm.setOption(params);
            this.confirm.refresh();
            this.confirm.show();
        },
 
        hideConfirm: function () {
            this.confirm.hide();
        },
 
        //初始化app
        initApp: function () {
 
            //首次加载不需要走路由控制
            this.loadViewByUrl();
 
            //后面的加载全部要经过路由处理
            if (this.isOpenWebapp === true)
                $(window).on(‘popstate.app’, $.proxy(this.loadViewByUrl, this));
 
        },
 
        loadViewByUrl: function (e) {
            this.hidePageView();
 
            var url = decodeURIComponent(location.href).toLowerCase();
            var viewId = this.getViewIdRule(url);
 
            viewId = viewId || this.defaultView;
            this.viewId = viewId;
            this.viewUrl = url;
            this.switchView(this.viewId);
 
        },
 
        //@override
        getViewIdRule: function (url) {
            var viewId = ”, hash = ”;
            var reg = /webapp\/.+\/(.+)\.html/;
 
            var match = url.match(reg);
            if (match && match[1]) viewId = match[1];
 
            return viewId;
        },
 
        //@override
        setUrlRule: function (viewId, param, replace, project) {
            var reg = /(webapp\/.+\/)(.+)\.html/;
            var url = window.location.href;
            var match = url.match(reg);
            var proj = project ? ‘webapp/’ + project : match[1];
            var preUrl = ”, str = ”, i = 0, _k, _v;
            //这里这样做有点过于业务了 *bug*
            var keepParam = [
              ‘us’
            ], p;
            if (!viewId) return;
            if (!match || !match[1]) {
                preUrl = url + ‘/webapp/bus/’ + viewId + ‘.html’;
            } else {
                preUrl = url.substr(0, url.indexOf(match[1])) + proj + viewId + ‘.html’; ;
            }
 
            //特定的参数将会一直带上去,渠道、来源等标志
            for (i = 0; i < keepParam.length; i++) {
                p = keepParam[i];
                if (_.getUrlParam()[p]) {
                    if (!param) param = {};
                    param[p] = _.getUrlParam()[p];
                }
            }
 
            i = 0;
 
            for (k in param) {
                _k = encodeURIComponent(_.removeAllSpace(k));
                _v = encodeURIComponent(_.removeAllSpace(param[k]));
                if (i === 0) {
                    str += ‘?’ + _k + ‘=’ + _v;
                    i++;
                } else {
                    str += ‘&’ + _k + ‘=’ + _v;
                }
            }
 
            url = preUrl + str;
 
            if (this.isOpenWebapp === false) {
                window.location = url;
                return;
            }
 
            if (replace) {
                history.replaceState(”, {}, url);
            } else {
                history.pushState(”, {}, url);
            }
 
        },
 
        switchView: function (id) {
 
            var curView = this.views[id];
 
            //切换前的当前view,马上会隐藏
            var tmpView = this.curView;
 
            if (tmpView && tmpView != curView) {
                this.lastView = tmpView;
            }
 
            //加载view样式,权宜之计
            //      this.loadViewStyle(id);
 
            //如果当前view存在,则执行请onload事件
            if (curView) {
 
                //如果当前要跳转的view就是当前view的话便不予处理
                //这里具体处理逻辑要改*************************************
                if (curView == this.curView) {
                    return;
                }
 
                this.curView = curView;
                this.curView.show();
                this.lastView && this.lastView.hide();
            } else {
 
                //        this.showLoading();
                this.loadView(id, function (View) {
                    //每次加载结束将状态栏隐藏,这个代码要改
                    //          this.hideLoading();
 
                    this.curView = new View({
                        viewId: id,
                        refer: this.lastView ? this.lastView.viewId : null,
                        APP: this,
                        wrapper: this.d_viewport
                    });
 
                    //设置网页上的view标志
                    this.curView.$el.attr(‘page-url’, id);
 
                    //保存至队列
                    this.views[id] = this.curView;
 
                    this.curView.show();
                    this.lastView && this.lastView.hide();
 
                });
            }
        },
 
        //加载view
        loadView: function (path, callback) {
            var self = this;
            requirejs([this.buildUrl(path)], function (View) {
                callback && callback.call(self, View);
            });
        },
 
        //override
        //配置可能会有的路径扩展,为Hybrid与各个渠道做适配
        initAppMapping: function () {
            //            console.log(‘该方法必须被重写’);
        },
 
        //@override
        buildUrl: function (path) {
            var mappingPath = this.viewMapping[path];
            return mappingPath ? mappingPath : this.viewRootPath + ‘/’ + path + ‘/’ + path;
        },
 
        //此处需要一个更新逻辑,比如在index view再点击到index view不会有反应,下次改**************************
        forward: function (viewId, param, replace) {
            if (!viewId) return;
            viewId = viewId.toLowerCase();
 
            this.setUrlRule(viewId, param, replace);
            this.loadViewByUrl();
        },
        jump: function (path, param, replace) {
            var viewId;
            var project;
            if (!path) {
                return;
            }
            path = path.toLowerCase().split(‘/’);
            if (path.length <= 0) {
                return;
            }
            viewId = path.pop();
            project = path.length === 1 ? path.join(”) + ‘/’ : path.join(”);
            this.setUrlRule(viewId, param, replace, project);
            this.loadViewByUrl();
        },
        back: function (viewId, param, replace) {
            if (viewId) {
                this.forward(viewId, param, replace)
            } else {
                if (window.history.length == 1) {
                    this.forward(this.defaultView, param, replace)
                } else {
                    history.back();
                }
            }
        }
 
    });
 
});
 
abstract.app

此间属于框架调节器层面包车型大巴代码,与今天的大旨不是非常相关,有野趣的情侣能够详细读读。

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图