概念及架構(gòu)vx前端整合培訓(xùn)

ForiBankingiTradingmobileiPay…...劉友才2021年8月5日星期四.cn

北京科藍(lán)軟件系統(tǒng)股份有限公司2021年8月5日星期四北京科藍(lán)軟件系統(tǒng)股份有限公司2123456邂逅VX完美的“MVC”你不知道的“模塊與依賴(lài)注入”

“雙向數(shù)據(jù)綁定”的魔法路由-路在腳下指令、服務(wù)、過(guò)濾器前端背景32021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司W(wǎng)EB2.0深入人心，向WEB3.0演變HTML5促成瀏覽器的革新和標(biāo)準(zhǔn)化進(jìn)程移動(dòng)互聯(lián)的迅猛發(fā)展（手機(jī)、PAD）RIA應(yīng)用類(lèi)型的逐步成熟UI/UE促進(jìn)了UCD（用戶為中心的設(shè)計(jì)）前端開(kāi)發(fā)艱巨而富有挑戰(zhàn)知識(shí)點(diǎn)分散設(shè)計(jì)和編程混合兼容性瀏覽器設(shè)備42021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司HTML前端開(kāi)發(fā)現(xiàn)狀52021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司分散Callback注冊(cè)，結(jié)構(gòu)晦澀大量的DOM操作或DOM過(guò)度包裝缺乏雙向數(shù)據(jù)綁定大量的代碼，特別是啟動(dòng)代碼復(fù)雜的多頁(yè)結(jié)構(gòu)移動(dòng)C/S模式的困境系統(tǒng)繁多生效時(shí)間長(zhǎng)更新頻繁新功能的使用受限于客戶端的更新。62021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司HTML前端開(kāi)發(fā)資源72021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司jQuery/zepto/jqmobi，提供基礎(chǔ)工具M(jìn)VC抽象（BackBone、SproutCore等）重量級(jí)UI庫(kù)（YUI、MochaUI、Dojo、ExtJS）隨著前端應(yīng)用增加，前端功能有呈蜘蛛網(wǎng)狀之趨勢(shì)前端開(kāi)發(fā)的啟示82021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司聲明式UI語(yǔ)言MXML業(yè)務(wù)邏輯通過(guò)ActionScript（FLEX語(yǔ)言）數(shù)據(jù)綁定MVC依賴(lài)性注入結(jié)構(gòu)+體系=生態(tài)（HTML5[HTML+JS+CSS]）移動(dòng)前端的新突破C/S+B/S+HTML592021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司前端技術(shù)發(fā)展軌跡解決異步交互問(wèn)題頁(yè)面交互性能較弱分散的Callback注入結(jié)構(gòu)晦澀、安全性較低雙向數(shù)據(jù)綁定前端MVC解構(gòu)分類(lèi)組件化安全可擴(kuò)展

JSP

服務(wù)端腳步語(yǔ)言無(wú)法分離部署移動(dòng)應(yīng)用遇到瓶頸JQueryVX1.0VX2.0交互性能大大改善安全性大幅提高內(nèi)容更新簡(jiǎn)單擴(kuò)展性好附加服務(wù)增多102021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司VX是什么？112021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司Venus

eXtrasVX是開(kāi)發(fā)動(dòng)態(tài)Web

App的結(jié)構(gòu)性框架以HTML作為模板語(yǔ)言并擴(kuò)展HTML語(yǔ)法，使得應(yīng)用組件開(kāi)發(fā)保持高度的清晰和一致。通過(guò)獨(dú)創(chuàng)的客戶端“數(shù)據(jù)綁定”和“依賴(lài)注入”，大大減少JS代碼量。VX采用純javascript開(kāi)發(fā)，在瀏覽器中運(yùn)行，非常容易與現(xiàn)有的服務(wù)端結(jié)構(gòu)整合。VX提供標(biāo)準(zhǔn)的Web

App開(kāi)發(fā)模式，形成前端開(kāi)發(fā)的生態(tài)環(huán)境。核心理念122021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司結(jié)構(gòu)式框架聲明優(yōu)于編碼數(shù)據(jù)、邏輯和展示的分離數(shù)據(jù)雙向綁定依賴(lài)注入VX體系運(yùn)行環(huán)境層基礎(chǔ)層核心層擴(kuò)展層前端應(yīng)用層132021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司VX通訊模型142021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司VX的Web

App單頁(yè)App單/多視圖層次化Model152021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司VX應(yīng)用結(jié)構(gòu)-HTML5內(nèi)容功能外觀交互162021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司邂逅VX123456完美的“MVC”你不知道的“模塊與依賴(lài)注入”

“雙向數(shù)據(jù)綁定”的魔法路由-路在腳下指令、服務(wù)、過(guò)濾器172021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司為什么需要MVC182021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司代碼規(guī)模越來(lái)越大，切分職責(zé)是大勢(shì)所趨為了復(fù)用：很多邏輯是一模一樣的為了后期維護(hù)方便：修改一塊功能不能影響其他功能MVC只是手段，終極目標(biāo)是模塊化和復(fù)用前端MVC的困難操作DOM的代碼必須等待整個(gè)頁(yè)面全部加載完成多個(gè)JS文件之間如果出現(xiàn)相互依賴(lài)，程序員必須自己解決JS的原型繼承也給前端編程帶來(lái)了很多困難瀏覽器加載腳本加載完成后JIT編譯執(zhí)行192021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司Controller-Controller的實(shí)現(xiàn)方式1視圖1控制器數(shù)據(jù)模型視圖2202021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司Controller-Controller的實(shí)現(xiàn)方式2視圖1控制器數(shù)據(jù)模型視圖2控制器通用控制器繼承繼承212021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司Controller-Controller的實(shí)現(xiàn)方式2視圖1控制器數(shù)據(jù)模型視圖2控制器注入注入service222021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司VX前端MVCVenus

eXtra(VX)聲明式客戶端IOCHTML5MVCPC/Mobile便于原型化展示與邏輯完全分離232021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司完善的MVC體系242021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司MVC-Controller、Model聲明式View業(yè)務(wù)邏輯編碼（IOC）$scope粘合層次化的數(shù)據(jù)模型M

o

d

e

lSc

o

p

e{name

:value

:person

:address

:}‘

world

’

:

s

tring123

:n

umber{firstNam

e

:

’

John

’lastName

:

’

Smith

’}fun

ction

Add

ress

{this

.

stree

t

=

’

…

’this

.

city

=’

…

’this

.

state

=’

CA’this

.

zip=

’

00000

’}252021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司Controller-使用過(guò)程中的注意點(diǎn)262021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司不要試圖去復(fù)用Controller，一個(gè)控制器一般只負(fù)責(zé)一小塊視圖不要在Controller中操作DOM，這不是控制器的職責(zé)，這是指令的職責(zé)不要在Controller里做數(shù)據(jù)格式化，VX有很好的表單控件不要在Controller里面做數(shù)據(jù)過(guò)濾操作，VX有$filter服務(wù)一般來(lái)說(shuō)，Controller是不會(huì)相互調(diào)用的，控制器之間的交互可以通過(guò)事件來(lái)進(jìn)行View-如何復(fù)用2021年8月5日星期四

北京科藍(lán)軟件系統(tǒng)有限公司

27View的復(fù)用是通過(guò)指令來(lái)實(shí)現(xiàn)的var

myModule

=

vx.module(...);myModule.directive('directiveName',

function

factory(injectables)

{var

directiveDefinitionObject

=

{priority:

0,template:

'<div></div>',restrict:

'A',compile:

function

compile(tElement,

tAttrs,

transclude)

{return

{pre:

function

preLink(scope,

iElement,

iAttrs,

controller)

{

...

},post:

function

postLink(scope,

iElement,

iAttrs,

controller)

{

...

}}},link:

function

postLink(scope,

iElement,

iAttrs)

{

...

}};return

directiveDefinitionObject;});Model-數(shù)據(jù)模型282021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司在VX中，Model就是scope對(duì)象中多有可以訪問(wèn)的屬性，屬性名稱(chēng)就是數(shù)據(jù)名稱(chēng)，屬性值可以是任何javascript對(duì)象（包含數(shù)組和JS原生類(lèi)型）。VX對(duì)model的“唯一”要求就是必須在scope中聲明為其屬性。屬性可以直接賦值或者間接賦值。VX的MVC是借助$scope來(lái)實(shí)現(xiàn)的神奇的$scope292021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司$scope是一個(gè)POJO（Plain

Old

JavaScript

Objet）$scope提供了一些工具方法$watch()、$apply()$scope是一個(gè)樹(shù)形結(jié)構(gòu)，與DOM標(biāo)簽平行子$scope對(duì)象會(huì)繼承父$scope上的屬性和方法每一個(gè)VX應(yīng)用只有一個(gè)跟$scope對(duì)象（一般位于v-app上）$scope可以傳播事件，類(lèi)似DOM事件，可以向上也可以向下$scope不僅是MVC的基礎(chǔ)，也是實(shí)現(xiàn)雙向數(shù)據(jù)綁定的基礎(chǔ)可以用vx.element($0).scope()在瀏覽器中調(diào)試$scope的生命周期創(chuàng)建（Creation）銷(xiāo)毀（scopedestruction）臟檢測(cè)（Mutation

observation）監(jiān)聽(tīng)注冊(cè)（Watcher

registration）檢測(cè)模型變化（Model

mutation）302021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司$scope事件傳播機(jī)制312021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司邂逅VX123456完美的“MVC”你不知道的“模塊與依賴(lài)注入”“雙向數(shù)據(jù)綁定”的魔法路由-路在腳下指令、服務(wù)、過(guò)濾器322021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司啟動(dòng)過(guò)程332021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司VX腳本的引入自動(dòng)啟動(dòng)，v-app手工啟動(dòng)，通過(guò)$(document).ready(function()

{vx.bootstrap(document);});VX運(yùn)行過(guò)程342021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司VX編譯過(guò)程直接處理DOM編譯結(jié)果（JS組件）與DOM綁定編譯結(jié)果通過(guò)作用域內(nèi)部事件，實(shí)現(xiàn)數(shù)據(jù)和視圖綁定支持“碎片”動(dòng)態(tài)編譯352021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司JS模塊與依賴(lài)注入模塊是擴(kuò)展單元模塊是容器層次化模塊依賴(lài)注入解決JS的全局變量問(wèn)題，提供代碼的良好結(jié)構(gòu)362021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司模塊VX通過(guò)v-app或手工執(zhí)行

bootstrap方法提供啟動(dòng)服務(wù)。VX內(nèi)部采用模塊方式可以擴(kuò)展VX的基礎(chǔ)服務(wù)、指令等，并形成可重用的“粗粒度”單元，同時(shí)模塊的裝載可以并行進(jìn)行（模塊執(zhí)行采用異步方式）。372021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司<!doctype

html><html

v-app="myApp"><head><script

src="jquery.js"></script><script

src="vx.js"></script><script>//

declare

a

modulevar

myAppModule

=

vx.module('myApp',

[]);//

configure

the

module.//

in

this

example

we

will

create

a

greetingfiltermyAppModule.filter('greet',

function()

{return

function(name)

{return

'Hello,

'

+

name

+

'!';};});</script></head><body><div>{{

'World'

|

greet

}}</div></body></html>模塊配置382021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司服務(wù)模塊，用于服務(wù)定義指令模塊，用于指令定義過(guò)濾器模塊，用于過(guò)濾器定義應(yīng)用級(jí)初始模塊，依賴(lài)以上所有模塊，并包含初始代碼模塊依賴(lài)392021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司模塊可以定義對(duì)其它模塊的依賴(lài)關(guān)系，依賴(lài)關(guān)系隱含：被依賴(lài)的模塊優(yōu)先裝載（被依賴(lài)模塊的配置塊優(yōu)先運(yùn)行，同樣被依賴(lài)模塊的運(yùn)行塊優(yōu)先運(yùn)行）每個(gè)模塊僅被裝載一次，及時(shí)它被其它模塊多次依賴(lài)v-app指定的應(yīng)用啟動(dòng)模塊隱含依賴(lài)VX內(nèi)部v模塊比如：vx.module(‘A’,[‘B’,’C’]);vx.module(‘B’,[‘D’,’C’]);其中，A模塊為啟動(dòng)模塊，則完整的依賴(lài)關(guān)系為：

A->B->D->C（僅裝載一次）->v->vLocale依賴(lài)注入402021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司“依賴(lài)注入”是被廣泛使用的軟件設(shè)計(jì)模式，主要處理模塊或組件之間的依賴(lài)性?！耙蕾?lài)注入”又稱(chēng)為“反向控制”，在服務(wù)端已經(jīng)廣為熟知，著名的springframework就是典型的代表?？蛻舳耍▌?dòng)態(tài)語(yǔ)言）依賴(lài)注入似乎沒(méi)有服務(wù)端廣泛，主要是客戶端原有體系比較分散，并未形成完整體系。VX依賴(lài)注入采用“構(gòu)造器注入”的方式，因?yàn)閖avascript的動(dòng)態(tài)語(yǔ)言特性使得它無(wú)法采用靜態(tài)方式解決依賴(lài)問(wèn)題。VX框架為了管理組件間的依賴(lài)性，在每個(gè)VX應(yīng)用中均包含injector。Injector是一個(gè)依賴(lài)管理容器，用于發(fā)現(xiàn)、構(gòu)造被依賴(lài)的組件。客戶端IOC容器412021年/8/85月5日星期四北京科藍(lán)軟件系41統(tǒng)有限公司依賴(lài)注入的2個(gè)層次服務(wù)工廠（Provider），可通過(guò)module擴(kuò)展實(shí)例工廠（單例）依賴(lài)注入的3種方式方式一：注解（annotation）注入，A.$inject=[‘$B’];function

A(B){}方式二：內(nèi)部注解，[‘$B’,function

A(B){}]方式三：隱含注入，function

A($B){}隱含注入function

MyController($scope,$timeout)

{...}$inject注解MyController.$inject

=

['$scope',

‘$timeout'];function

MyController

($scope,timeout)

{...}內(nèi)部注解someModule.factory(‘a(chǎn)nimate',

['$window',

function($window)

{//...;}]);422021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司123456完美的“MVC”你不知道的“模塊與依賴(lài)注入”“雙向數(shù)據(jù)綁定”的魔法路由-路在腳下指令、服務(wù)、過(guò)濾器邂逅VX432021年8月5日星期四北京科藍(lán)軟件系統(tǒng)股份有限公司單向綁定大多數(shù)的模板系統(tǒng)僅支持?jǐn)?shù)據(jù)的單向綁定，它們將模板和數(shù)據(jù)整合成View，如圖所示：在合并后，對(duì)Model的修改不會(huì)直接應(yīng)用于View，而且用戶對(duì)

View的操作也不會(huì)直接反映在

Model中。這意味著開(kāi)發(fā)者需要編寫(xiě)額外的代碼保證Model和View之間的同步。442021年/8/85月5日星期四北京科藍(lán)軟件系44統(tǒng)有限公司VX雙向數(shù)據(jù)綁定通過(guò){{exp}}表達(dá)式來(lái)提供文本數(shù)據(jù)綁定452021年/8/85月5日星期四北京科藍(lán)軟件系45統(tǒng)有限公司數(shù)據(jù)交互方式462021年/8/85月5日星期四北京科藍(lán)軟件系46統(tǒng)有限公司VX采用JSON數(shù)據(jù)格式進(jìn)行交互http協(xié)議Content-Type為application/json安全性，VX內(nèi)置對(duì)JSON的脆弱性和XSRF提供默認(rèn)的安全機(jī)制數(shù)據(jù)交互流程圖數(shù)據(jù)交互方式472021年/8/85月5日星期四北京科藍(lán)軟件系47統(tǒng)有限公司通訊安全VX內(nèi)置對(duì)JSON的脆弱性和XSRF提供默認(rèn)的安全機(jī)制，當(dāng)然需要服務(wù)端配合，才能提供完整的解決方案；JSON漏洞允許第三方站點(diǎn)將你的JSON請(qǐng)求轉(zhuǎn)換為JSONP請(qǐng)求，為了解決這個(gè)問(wèn)題，VX允許服務(wù)端在所有的JSON返回中體檢前綴“)]}’,\n”，VX會(huì)自動(dòng)去除前綴；比如服務(wù)端正常返回：這種JSON容易受到攻擊，可以將其轉(zhuǎn)化為：482021年/8/85月5日星期四北京科藍(lán)軟件系48統(tǒng)有限公司強(qiáng)大的表單處理492021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司Form和虛擬formForm和控件的狀態(tài)綁定（input、radio、checkbox、select）客戶化數(shù)據(jù)校驗(yàn)和提示錯(cuò)誤控件的UI事件綁定（雙向綁定）Form狀態(tài)502021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司Classv-invalid,

v-validv-pristine,

v-dirtyvModel狀態(tài)$error$invalid,

$valid$pristine,

$dirty支持formater和parser（內(nèi)置和擴(kuò)展）Format（model->dom）Parser

(dom->model)2021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司51123456邂逅VX完善的“MVC”你不知道的“模塊與依賴(lài)注入”

“雙向數(shù)據(jù)綁定”的魔法路由-路在腳下指令、服務(wù)、過(guò)濾器路由配置522021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司基本配置$stateProvider.state('路由狀態(tài)','狀態(tài)的配置對(duì)象{}');$stateProvider.state('app',

{url:

"/app",templateUrl:

'htmls/AppView/AppView.html'})當(dāng)我們?cè)L問(wèn)index.html#/app時(shí)，'app'狀態(tài)將被激活，同時(shí)index.html中的ui-view將被'AppView.html'填充。路由參數(shù)532021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司URL參數(shù)url動(dòng)態(tài)部分被稱(chēng)為參數(shù)，有幾個(gè)選項(xiàng)用于指定參數(shù)。基本參數(shù)如下：.state('app.MobileRechargeOrdQry',

{//設(shè)置了url參數(shù):FlowNourl

:

'/MobileRechargeOrdQry/:FlowNo',templateUrl

:

'htmls/MobileRechargeOrdQry/MobileRechargeOrdQry.html',})templateUrl參數(shù)templateUrl頁(yè)面碎片URL地址。路由傳參542021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司第一步：配置路由文件vx2-config-router.js的url添加路由參數(shù)名'/:FlowNo',如：//手機(jī)充值訂單查詢(xún).state('app.MobileRechargeOrdQry',

{url

:

'/MobileRechargeOrdQry/:FlowNo',templateUrl

:

'htmls/MobileRechargeOrdQry/MobileRechargeOrdQry.html',})第二步：路由跳轉(zhuǎn),配置路由參數(shù){'參數(shù)名':'參數(shù)值'}/*帶參數(shù)，跳轉(zhuǎn)路由*/$scope.goto('app.MobileRechargeOrdQry',{FlowNo:$scope.result.FlowNo});第三步：獲取路由參數(shù)值/*獲取路由參數(shù)*/$scope.FlowNo=$scope.getRouteParams("FlowNo");v-page的使用552021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司V用于公用一個(gè)controller，數(shù)據(jù)本來(lái)就是共享的。一般運(yùn)用在跳轉(zhuǎn)邏輯非常緊密的交易中，如三步提交交易（交易嚴(yán)格按錄入頁(yè)-確認(rèn)頁(yè)-結(jié)果的跳轉(zhuǎn)，不存在直接跳轉(zhuǎn)至確認(rèn)頁(yè)的情況）。v-page之間的跳轉(zhuǎn)使用$scope.goto("#2");也可以使用$targets服務(wù)，如$targets("content","#2");也可以給controller指定viewId<divv-controller="BankInnerTransferCtrl"view-id=“myContent”>，跳轉(zhuǎn)使用$targets("myContent","#2")；<div

v-lazy-load="htmls/BankInnerTransfer/BankInnerTransfer.js"

title="行內(nèi)轉(zhuǎn)賬"><div

v-controller="BankInnerTransferCtrl"

v-init="init();"><div

v

href="htmls/BankInnerTransfer/BankInnerTransferPre.html"

title="錄入頁(yè)"></div><div

v

href="htmls/BankInnerTransfer/BankInnerTransferConf.html"

title="確認(rèn)頁(yè)"onload="ConfLoad();"></div><div

v

href="htmls/BankInnerTransfer/BankInnerTransferRes.html"

title="結(jié)果頁(yè)"></div><div

v

href="htmls/BankInnerTransfer/BankInnerTransferPayee.html"title="收款人名冊(cè)頁(yè)"></div></div></div>注意：v-page既可以使用href引用頁(yè)面，也可以使用html嵌入，如：<div

v

><div>...此處嵌入html代碼</div></div>邂逅VX123456562021年8月5日星期四北京科藍(lán)軟件系統(tǒng)股份有限公司完美的“MVC”你不知道的“模塊與依賴(lài)注入”

“雙向數(shù)據(jù)綁定”的魔法路由-路在腳下指令、服務(wù)、過(guò)濾器VX指令572021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司“指令”是VX很重要的概念，通過(guò)“聲明式”擴(kuò)展HTML語(yǔ)法使得

HTML“認(rèn)識(shí)”動(dòng)態(tài)內(nèi)容和動(dòng)態(tài)行為?！爸噶睢蓖ㄟ^(guò)element的tag、屬性或class等觸發(fā)動(dòng)態(tài)行為或DOM結(jié)構(gòu)調(diào)整。通過(guò)聲明式,隔離html和javascript腳本支持多種定義方式v-|

v:

|

data-|

v-等前綴寫(xiě)法多種指令類(lèi)型E

-

<my-directive></my-directive>

A

-

<div

my-directive="exp"></div>C

-

<div

class="my-directive:

exp;"></div>M

-

<!--

directive:

my-directive

exp

-->指令的運(yùn)行過(guò)程582021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司VX指令Html代碼:<div

id=“mpDiv”

v-show=“mpDiv”><input

type=“text”

name=“mobilePhone”

id=“mobilePhone”

/></div>//傳統(tǒng)javascript隱藏div方式var

mobile

=

document.getElementById(“mobilePhone”);If(mobile){mobile.style.display

=

“none”;}//jquery

隱藏div方式$(“#mobilePhone”).hide();//vx隱藏div的二種方式//js

代碼$scope.mpDiv=false;//html代碼<button

v-click=“mpDiv=false”>hide</button>592021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司完整的指令寫(xiě)法var

myModule

=

vx.module(...);myModule.directive('directiveName',

function

factory(injectables)

{var

directiveDefinitionObject

=

{priority:

0,template:

'<div></div>',templateUrl:

'directive.html',replace:

false,transclude:

false,restrict:

'A',scope:

false,compile:

function

compile(tElement,

tAttrs,

transclude)

{return

{pre:

function

preLink(scope,

iElement,

iAttrs,

controller)

{

...

},post:

function

postLink(scope,

iElement,

iAttrs,

controller)

{

...

}}},link:

function

postLink(scope,

iElement,

iAttrs)

{

...

}};return

directiveDefinitionObject;});602021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司編寫(xiě)指令的標(biāo)準(zhǔn)612021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司var

directive

=

{};directive.uiXxx

=

[function()

{return

{restrict

:

'CA',compile

:

function(element,attrs)

{}

,link

:

function(scope,

element,attrs)

{}};}];vx.module('ibsapp.libraries').directive(directive);指令的compile函數(shù)622021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司compile函數(shù)用于DOM轉(zhuǎn)換。因?yàn)榇蠖鄶?shù)指令不需要進(jìn)行DOM轉(zhuǎn)換，因此編譯函數(shù)不經(jīng)常使用。比如vRepeat要求改變DOM結(jié)構(gòu)，所以使用編譯函數(shù)。編譯函數(shù)可用參數(shù)包括：element：模板元素，也就是指令聲明的元素，可以安全進(jìn)行元素和其后代的DOM結(jié)構(gòu)的變化attrs：模板屬性，標(biāo)準(zhǔn)化的屬性集（Attributes對(duì)象）指令的link函數(shù)632021年8月5日星期四北京科藍(lán)軟件系統(tǒng)有限公司聯(lián)接函數(shù)負(fù)責(zé)修改DOM或者注冊(cè)DOM監(jiān)聽(tīng)器。它在模板克隆后執(zhí)行，主要的指令邏輯將在這執(zhí)行。主要參數(shù)包括:scope：當(dāng)前scope作用域?qū)ο骵lement：模板元素，也就是指令聲明的元素，可以安全進(jìn)行元素和其后代的DOM結(jié)構(gòu)的變化attrs：模板屬性，標(biāo)準(zhǔn)化的屬性集（Attributes對(duì)象）controller：Contro