框架視圖層(三)

wxs

概覽

  • 仿js功能
  • 頁面渲染
<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>
輸出
hello world
  • 數(shù)據(jù)處理

wxs模塊婉陷、

.wxs/<wxs>都是單一的模塊杠输,有自己的作用域皆尔,外部訪問需要module.exports
  • .wxs文件
// /pages/comm.wxs

var foo = "'hello world' from comm.wxs";
var bar = function(d) {
  return d;
}
module.exports = {
  foo: foo,
  bar: bar
};
  • module 對象
    • 每個wxs都有內(nèi)置的module對象
    • 通過exports双藕,與外部共享函數(shù)內(nèi)部成員
// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";
<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>
輸出:some msg
'hello world' from tools.wxs
  • require函數(shù)
    • 在.wxs模塊中引用其他 wxs 文件模塊,可以使用 require 函數(shù)
    • 只能引用 .wxs 文件模塊烹棉,且必須使用相對路徑攒霹。
    • wxs 模塊均為單例,wxs 模塊在第一次被引用時浆洗,會自動初始化為單例對象催束。
    • 如果一個 wxs 模塊在定義之后,一直沒有被引用伏社,則該模塊不會被解析與運行抠刺。
// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";
// /pages/logic.wxs

var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);
<!-- /page/index/index.wxml -->

<wxs src="./../logic.wxs" module="logic" />

輸出:'hello world' from tools.wxs
logic.wxs
some msg
  • <wxs>標(biāo)簽

    • module 模塊名
    • src 引用的wxs文件,此時標(biāo)簽為單閉合標(biāo)簽或者標(biāo)簽內(nèi)部無內(nèi)容
  • module屬性

    • 命名方式類php變量聲明規(guī)則
<!--wxml-->

<wxs module="foo">
var some_msg = "hello world";
module.exports = {
    msg : some_msg,
}
</wxs>
<view> {{foo.msg}} </view>
  • src屬性
    • src 屬性可以用來引用其他的 wxs 文件模塊摘昌。
    • 只能引用 .wxs 文件模塊速妖,且必須使用相對路徑。
    • 只需載入一次
    • 無引用則不解析
// /pages/index/index.js

Page({
  data: {
    msg: "'hello wrold' from js",
  }
})
<!-- /pages/index/index.wxml -->

<wxs src="./../comm.wxs" module="some_comms"></wxs>
<!-- 也可以直接使用單標(biāo)簽閉合的寫法
<wxs src="./../comm.wxs" module="some_comms" />
-->

<!-- 調(diào)用 some_comms 模塊里面的 bar 函數(shù)聪黎,且參數(shù)為 some_comms 模塊里面的 foo -->
<view> {{some_comms.bar(some_comms.foo)}} </view>
<!-- 調(diào)用 some_comms 模塊里面的 bar 函數(shù)罕容,且參數(shù)為 page/index/index.js 里面的 msg -->
<view> {{some_comms.bar(msg)}} </view>

變量

注釋

運算符

  • 基本運算符 (賦值,算術(shù))
var a = 10, b = 20;

// 加法運算
console.log(30 === a + b);
// 減法運算
console.log(-10 === a - b);
// 乘法運算
console.log(200 === a * b);
// 除法運算
console.log(0.5 === a / b);
// 取余運算
console.log(10 === a % b);
加法運算(+)也可以用作字符串的拼接稿饰。
var a = '.w' , b = 'xs';

// 字符串拼接
console.log('.wxs' === a + b);
  • 一元運算符
var a = 10, b = 20;

// 自增運算
console.log(10 === a++);
console.log(12 === ++a);
// 自減運算
console.log(12 === a--);
console.log(10 === --a);
// 正值運算
console.log(10 === +a);
// 負(fù)值運算
console.log(0-10 === -a);
// 否運算
console.log(-11 === ~a);
// 取反運算
console.log(false === !a);
// delete 運算
console.log(true === delete a.fake);
// void 運算
console.log(undefined === void a);
// typeof 運算
console.log("number" === typeof a);
  • 位運算符
var a = 10, b = 20;

// 左移運算
console.log(80 === (a << 3));
// 無符號右移運算
console.log(2 === (a >> 2));
// 帶符號右移運算
console.log(2 === (a >>> 2));
// 與運算
console.log(2 === (a & 3));
// 異或運算
console.log(9 === (a ^ 3));
// 或運算
console.log(11 === (a | 3));
  • 比較運算符
var a = 10, b = 20;

// 小于
console.log(true === (a < b));
// 大于
console.log(false === (a > b));
// 小于等于
console.log(true === (a <= b));
// 大于等于
console.log(false === (a >= b));
  • 等值運算符
var a = 10, b = 20;

// 等號
console.log(false === (a == b));
// 非等號
console.log(true === (a != b));
// 全等號
console.log(false === (a === b));
// 非全等號
console.log(true === (a !== b));
  • 賦值運算符
var a = 10;

a = 10; a *= 10;
console.log(100 === a);
a = 10; a /= 5;
console.log(2 === a);
a = 10; a %= 7;
console.log(3 === a);
a = 10; a += 5;
console.log(15 === a);
a = 10; a -= 11;
console.log(-1 === a);
a = 10; a <<= 10;
console.log(10240 === a);
a = 10; a >>= 2;
console.log(2 === a);
a = 10; a >>>= 2;
console.log(2 === a);
a = 10; a &= 3;
console.log(2 === a);
a = 10; a ^= 3;
console.log(9 === a);
a = 10; a |= 3;
console.log(11 === a);
  • 二元邏輯運算符
var a = 10, b = 20;

// 邏輯與
console.log(20 === (a && b));
// 邏輯或
console.log(10 === (a || b));
  • 其余
var a = 10, b = 20;

//條件運算符
console.log(20 === (a >= 10 ? a + 10 : b + 10));
//逗號運算符锦秒,出現(xiàn)逗號只取最后一個變量
console.log(20 === (a, b));

語句

數(shù)據(jù)類型(屬性與方法參考ES5)

  • 概覽
    • number : 數(shù)值
    • string : 字符串
    • boolean: 布爾值
    • object: 對象
    • function: 函數(shù)
    • array: 數(shù)組
    • date: 日期
    • regexp: 正則

基礎(chǔ)類庫(屬性與方法參考ES5)

  • Math
  • JSON
  • Number
  • Date
  • Global
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市喉镰,隨后出現(xiàn)的幾起案子旅择,更是在濱河造成了極大的恐慌,老刑警劉巖梧喷,帶你破解...
    沈念sama閱讀 211,496評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件砌左,死亡現(xiàn)場離奇詭異,居然都是意外死亡铺敌,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評論 3 385
  • 文/潘曉璐 我一進店門屁擅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來偿凭,“玉大人,你說我怎么就攤上這事派歌⊥淠遥” “怎么了痰哨?”我有些...
    開封第一講書人閱讀 157,091評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長匾嘱。 經(jīng)常有香客問我斤斧,道長,這世上最難降的妖魔是什么霎烙? 我笑而不...
    開封第一講書人閱讀 56,458評論 1 283
  • 正文 為了忘掉前任撬讽,我火速辦了婚禮,結(jié)果婚禮上悬垃,老公的妹妹穿的比我還像新娘游昼。我一直安慰自己,他們只是感情好尝蠕,可當(dāng)我...
    茶點故事閱讀 65,542評論 6 385
  • 文/花漫 我一把揭開白布烘豌。 她就那樣靜靜地躺著,像睡著了一般看彼。 火紅的嫁衣襯著肌膚如雪廊佩。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,802評論 1 290
  • 那天靖榕,我揣著相機與錄音罐寨,去河邊找鬼。 笑死序矩,一個胖子當(dāng)著我的面吹牛鸯绿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播簸淀,決...
    沈念sama閱讀 38,945評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼瓶蝴,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了租幕?” 一聲冷哼從身側(cè)響起舷手,我...
    開封第一講書人閱讀 37,709評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎劲绪,沒想到半個月后男窟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,158評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡贾富,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,502評論 2 327
  • 正文 我和宋清朗相戀三年歉眷,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片颤枪。...
    茶點故事閱讀 38,637評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡汗捡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出畏纲,到底是詐尸還是另有隱情扇住,我是刑警寧澤春缕,帶...
    沈念sama閱讀 34,300評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站艘蹋,受9級特大地震影響锄贼,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜女阀,卻給世界環(huán)境...
    茶點故事閱讀 39,911評論 3 313
  • 文/蒙蒙 一宅荤、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧强品,春花似錦膘侮、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,744評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至夫晌,卻和暖如春雕薪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背晓淀。 一陣腳步聲響...
    開封第一講書人閱讀 31,982評論 1 266
  • 我被黑心中介騙來泰國打工所袁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人凶掰。 一個月前我還...
    沈念sama閱讀 46,344評論 2 360
  • 正文 我出身青樓燥爷,卻偏偏與公主長得像,于是被迫代替她去往敵國和親懦窘。 傳聞我的和親對象是個殘疾皇子前翎,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,500評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line),也就是一...
    悟名先生閱讀 4,131評論 0 13
  • { "Unterminated string literal.": "未終止的字符串文本畅涂。", "Identifi...
    一粒沙隨風(fēng)飄搖閱讀 10,504評論 0 3
  • "Unterminated string literal.": "未終止的字符串文本港华。", "Identifier...
    兩個心閱讀 8,347評論 0 4
  • 傲嬌病嬌絕代雙驕 小黃人朝這邊奔跑過來的樣子真的兇嗎?眼睛里滿是火光午衰,小明看到了立宜,剛想打招呼,小紅就突然被腳下的一...
    不像話的故事閱讀 338評論 0 0
  • 有時候人就是固執(zhí)臊岸,覺得越是得不到的橙数,才越有得到的價值,而真正得到之后卻又覺得空虛扇单。 這種感覺就是賤商模,原來最好的...
    為了遇見閱讀 76評論 0 0