整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ade(Pug) — Node Template Engine，一個高性能的模板引擎，為 Node 而做，用 JavaScript 實現。
Node.js 的 Express.js 框架默認用的就是 Jade(更名為Pug)。
隨著 web 發展，前端應用變得越來越復雜，基于后端的 javascript(Node.js) 也開始嶄露頭角，此時 javascript 被寄予了更大的期望，與此同時 javascript MVC 思想也開始流行起來。
為了使用戶界面與業務數據分離，就產生了『模板引擎』這個概念。模板引擎有很多, 比較有名的有jade（express默認）、ejs、hbs（ghost默認）、doT、swig等等。『模板引擎』:
1. 模板是什么？模板就是一個模子。供你套數據，并且依據不同數據去走不同的邏輯。 2. 引擎是什么？引擎就是個處理器（編譯、運行），最后輸出個結果（HTML代碼）的東西。
2.1 安裝:
npm install pug-cli -g
jade --helpUsage: jade [options] [dir|file ...]
Options:
-h, --help output usage information / 輸出使用信息
-V, --version output the version number / 輸出版本號信息
-O, --obj <str> javascript options object / 傳輸到 jade 文件中的數據對象
-o, --out <dir> output the compiled html to <dir> / 輸出編譯后的 HTML 到 <dir>
-p, --path <path> filename used to resolve includes / 在處理 stdio 時，查找包含文件時的查找路徑
-P, --pretty compile pretty html output / 格式化編譯 html 文件
-c, --client compile function for client-side runtime.js / 編譯瀏覽器端可用的 runtime.js
-n, --name <str> The name of the compiled template (requires --client) / 編譯模板的名字
-D, --no-debug compile without debugging (smaller functions) / 關閉編譯的調試選項(函數會更小)
-w, --watch watch files for changes and automatically re-render / 監聽文件改變并自動刷新編譯結果
--name-after-file Name the template after the last section of the file path (requires --client and overriden by --name)
--doctype <str> Specify the doctype on the command line (useful if it is not specified by the template) / 在命令行中指定文檔類型(如果在模板中沒有被指定)
Examples: # 編譯整個目錄
$ jade templates # 生成 {foo,bar}.html
$ jade {foo,bar}.jade # 在標準IO下使用jade
$ jade < my.jade > my.html # 在標準IO下使用jade
$ echo 'h1 Jade!' | jade # foo, bar 目錄渲染到 /tmp
$ jade foo bar --out /tmp2.2 實例 編寫與運行
第一步: 打開sublime 創建studyJade.jade 保存到桌面上
doctype html html head title jade body p studyjade div hello jade
第二步: 打開終端執行 $ jade studyJade.jade -P(大寫P: 格式化編譯 html 文件), 然后桌面上會出現對應的 studyJade.html文件;
<!DOCTYPE html><html> <head> <title>jade</title> </head> <body> <p>studyjade</p> <div>hello jade</div> </body></html>
如此反復即可達到預期效果, 但是, 如果有熱跟新該多好, 面包和牛奶都會有的 !熱更新
第一步: 同上第一步;
第二步: 終端$ jade index.jade -P -w, 終端會顯示
$ jade /Users/51testing/Desktop/studyJade.jade -P -w watching /Users/51testing/Desktop/studyJade.jade rendered /Users/51testing/Desktop/studyJade.html
第三步: 將桌面上的兩個文件(.html/.jade)拖進sublime, 使用快捷鍵option+command+2雙屏幕展示,一側更改并<common+s保存>,另一側就可看到及時效果, 因為jade語法對于空格非常敏感.
3.1 語法
（1）標簽、屬性、注釋
（2）讀取數據的值（轉義、非轉義）
3.2 邏輯
（1）條件語句（if、unless、case）
（2）循環（each、for）
(3) 過濾器
:sass 需要安裝 sass.js :less 需要安裝 less.js :markdown 需要安裝 markdown-js 或 node-discount :cdata :coffeescript 需要安裝 coffee-script
3.3 繼承和包含
（1）模板繼承
（2）包含
在父模板中，用關鍵字“block”定義可在子模板中替換的塊，每個“block”有一個名字，在子模板中，同樣用關鍵字“block”跟上該名字定義需在該“block”中填充的內容。
Jade支持多重繼承，即子模板也可以是其它模板的父模板。
3.4 jade 官網給的實例
API
var jade=require('jade');
// compile 編譯var fn=jade.compile('string of jade', options);var html=fn(locals);
// render 渲染var html=jade.render('string of jade', merge(options, locals));
// renderFile 渲染文件
var html=jade.renderFile('filename.jade', merge(options, locals));關注我們
如果需要源碼可以關注“IT實戰聯盟”并留言（源碼名稱+郵箱），小萌看到后會聯系作者發送到郵箱，也可以加入交流群和作者互撩哦~~~！
CSDN現場報道】2015年11月19-21日，由CSDN重磅打造的“2015 中國軟件開發者大會”（以下簡稱SDCC 2015）在北京朗麗茲西山花園酒店隆重召開。今年是第七屆，大會為期三天，除了陣容強大的全體大會外，主辦方還精心籌備了九大技術專場論壇，包括：架構實踐論壇、前端開發論壇、數據庫實戰論壇、研發管理論壇、安全技術論壇、算法實戰論壇、編程語言論壇、產品與設計論壇、微信開發論壇。此外，還有五場特色活動及展覽展示。
圖：前端開發論壇現場座無虛席
SDCC2015第二天前端開發論壇，在w3ctech發起人周裕波的主持人下正式開始。他表示幾年前，前端開發還不溫不火，而近兩年卻成了火爆技術。該論壇將圍繞前端開發框架、前端工程化、Web組件化、數據可視化這幾大熱點展開，邀請來自Facebook、百度、騰訊、美團、Strikingly等公司的前端專家進行分享。
w3ctech發起人周裕波
Facebook前端工程師ShihChi Huang（黃士旗）：Why React matters/scale
Facebook前端工程師ShihChi Huang（黃士旗）
Facebook前端工程師ShihChi Huang（黃士旗）在主題演講《Why React matters/scale》中分享了React核心技術要點。“Learn Once Write Anywhere”是React的核心思想，JavaScript、UI是它的兩個重要特性。Do One Thing and Do It Well、Write Programs to Work Together、Handle Text Streams等技術特性是其吸引大量開發者使用的重要原因 。
Strikingly.com CTO、聯合創始人郭達峰：React.js in Strikingly
Strikingly.com CTO、聯合創始人郭達峰
Strikingly.com CTO、聯合創始人郭達峰在主題演講中從第三方庫整合、Lazy Load Component、Container Component、Global State Object四個方面，分享了Strikingly在React上的開發實踐經驗、技巧。他直接現場編碼演示了jQuery sortable使用React進行封裝的過程，并表示大家可以放心地在React里使用第三方庫。
Lazy Loading Component可很好改善Bundle 大小，可以使用Webpack的Code Splitting、動態請求Lazy Load笨重組件、使用bundle-loader發送單獨請求，該技術在SPA應用開發中很有用。Container Component可以賦予子對象行為（Bahavioural Container）、布局（UI Layout Container）或數據（Data Container）；針對Global State Object，郭達峰表示所有狀態存在于一個Global State Object中，Flux store僅僅是該對象不同部分的視圖，所有的改變都可以應用于同一個對象上，使App狀態序列化成為可能，調試更容易。據悉，Strikingly是國內使用React重寫的最大應用之一。
美團技術終端組高級工程師呂偉：前端分布式編譯系統的設計
美團技術終端組高級工程師呂偉
美團技術終端組高級工程師呂偉在主題演講中介紹了前端分布式編譯系統的設計原理，他表示該系統最終目的是取代Webpack和Browserify，即使單機編譯也能利用多核加快編譯速度，它將用于美團的CI系統和上線系統。其將在正式投產后完全開源。
餓了么資深前端架構師兼大前端團隊負責人林建鋒：ELE.ME是如何運行的
餓了么資深前端架構師兼大前端團隊負責人林建鋒
餓了么資深前端架構師兼大前端團隊負責人林建鋒在主題演講中基于餓了么的開發方式、開發與發布過程，講解了ELE.ME是如何運行的。在開發方式上，他表示專業的人應該做專業的事，前后端應做到真正分離，后端應更專注數據的存儲、緩存且一次輸出，而前端應該側重于展現、多客戶端處理、數據自由。
在開發與發布上，更希望使用一個命令行搞定工作環境的搭建，餓了么使用“$ make dev”來實現這一點。JS框架選用的是Vanilla JS和Angular JS，使用Babel/browserfy進行編譯。在HTML領域，采用Jade，CSS方面則使用CSSNext/Sass。下圖顯示了餓了么的開發與發布方式。
百度EFE團隊資深工程師、百度ECharts產品工程師喬剛：前端數據可視化實踐
百度EFE團隊資深工程師，百度ECharts產品工程師喬剛
百度EFE團隊資深工程師，百度ECharts產品工程師喬剛在《前端數據可視化實踐》的主題演講中，分享了如何將數據轉為可視化元素向人展示。他表示數據分析之前，將其進行可視化展示十分重要，否則數據分析易產生錯誤。
數據類別千差萬別，需要對他們進行可視編碼，即將數據映射為標記（圖行元素）和視覺通道。視覺通道是一個很重要概念，它將數據轉化成人類可以理解的、相對應的數據，如顏色、亮度、飽和度、透明度、色調、尺寸等。他強調應避免將重要的信息放在形狀上。
交互也是數據可視化的重要部分，應遵循的可視化設計原則有總覽為先；縮放過濾；按需查看細節。在一般開發過程中應避免復雜動畫，而在數據可視化，動畫可以帶來便利，它可以表達 數據/圖形元素在變化中的聯系，助于理解。最后，先分享了百度所做的各種數據可視化案例，包括點數據、線數據、場●向量、時間數據高維數據等。
百姓網資深前端工程師賀師俊：如何制定和實施ES6+代碼風格和質量標準
百姓網資深前端工程師賀師俊
針對大家都認為重要的Coding Style，百姓網資深前端工程師賀師俊表示它其實并沒那么重要。代碼邏輯、模塊劃分、架構設計等等都較Coding Style更重要。但本演講還要向大家強調一下Coding Style，其原因是，隨著個人作坊轉向團隊協作、一次性項目更需長期演化、持續維護，如果沒有好的編碼意識和習慣，將會使開發過程越來越痛苦。
ES6的發布將帶來Coding Style的巨大升級。他推薦了一些可使用工具，如果jslint、jshint、jsdc、eslint， 并重點講解了ESLint，它添加了很ES6編碼規則，具有可插拔架構、高度可配置、預置大量規則、可共享復用等特點。他以airbnb代碼風格為例介紹了ESLint的這些特點。
騰訊互聯網增值業務前端團隊負責人鐘鵬飛：Hybrid模式的深度融合——騰訊手機QQ H5優化與監控自動化建設
騰訊互聯網增值業務前端團隊負責人鐘鵬飛
騰訊互聯網增值業務前端團隊負責人鐘鵬飛在《Hybrid模式的深度融合-騰訊手機QQ H5優化與監控自動化建設》主題演講中分享了Hybird模式下的測速監控體系、Hybird模式下的站點性能優化、前端持續集成與監控自動化三部分。
Hybird模式下的站點性能優化，除了相對常規的優化措施外，他還分享了四大核心優化方案，包括Webview并行初始化，Webview預創建，分散I/O、離線包管理優化，Webview和頁面并行加載。前端持續集成與監控自動化方面，介紹上QT4A自動化測試平臺的工作方式，并分享了手機QQ 監控自動化建設概念圖，及更具體的持續集成和監控自動化體系架構圖。
更多精彩內容，請關注新浪微博：@CSDN、圖文直播專題：2015中國軟件開發者大會。
于公司的前端開始轉向 Vue.JS，最近開始使用這個框架進行開發，遇到一些問題記錄下來，以備后用。 主要寫一些 官方手冊 上沒有寫，但是實際開發中會遇到的問題，需要一定知識基礎。
涉及技術棧
polyfill 與 transform-runtime
首先，vue-cli 為我們自動添加了 babel-plugin-transform-runtime 這個插件，該插件多數情況下都運作正常，可以轉換大部分ES6語法。 但是，存在如下兩個問題：
1、異步加載組件時，會產生 polyfill 代碼冗余 2、不支持對全局函數與實例方法的polyfill 兩個問題的原因均歸因于 babel-plugin-transform-runtime 采用了沙箱機制來編譯我們的代碼（即：不修改宿主環境的內置對象）。
由于異步組件最終會被編譯為一個單獨的文件，所以即使多個組件中使用了同一個新特性（例如：Object.keys()），那么在每個編譯后的文件中都會有一份該新特性的 polyfill 拷貝。如果項目較小可以考慮不使用異步加載，但是首屏的壓力會比較大。 不支持全局函數（如：Promise、Set、Map），Set 跟 Map 這兩種數據結構應該大家用的也不多，影響較小。但是 Promise 影響可能就比較大了。 不支持實例方法（如：'abc'.include('b')、['1', '2', '3'].find((n)=> n < 2) 等等），這個限制幾乎廢掉了大部分字符串和一半左右數組的新特性。
一般情況下 babel-plugin-transform-runtime 能滿足大部分的需求，當不滿足需求時，推薦使用完整的 babel-polyfill。
替換 babel-polyfill 首先，從項目中移除 babel-plugin-transform-runtime 卸載該依賴：
npm un babel-plugin-transform-runtime -D
修改 babel 配置文件
// .babelrc
{
//...
"plugins": [
// - "transform-runtime"
]
//...
}
然后，安裝 babel-polyfill 依賴：
npm i babel-polyfill -D
最后，在入口文件中導入
// src/main.js import 'babel-polyfill'
ES6 import 引用問題
在 ES6 中，模塊系統的導入與導出采用的是引用導出與導入（非簡單數據類型），也就是說，如果在一個模塊中定義了一個對象并導出，在其他模塊中導入使用時，導入的其實是一個變量引用（指針），如果修改了對象中的屬性，會影響到其他模塊的使用。 通常情況下，系統體量不大時，我們可以使用 JSON.parse(JSON.stringify(str)) 簡單粗暴地來生成一個全新的深度拷貝的 數據對象。不過當組件較多、數據對象復用程度較高時，很明顯會產生性能問題，這時我們可以考慮使用 Immutable.js。
鑒于這個原因，進行復雜數據類型的導出時，需要注意多個組件導入同一個數據對象時修改數據后可能產生的問題。 此外，模塊定義變量或函數時即便使用 let 而不是 const，在導入使用時都會變成只讀，不能重新賦值，效果等同于用 const 聲明。
在 Vue 中使用 Pug 與 Less
安裝依賴
Vue 中使用 vue-loader 根據 lang 屬性自動判斷所需要的 loader，所以不用額外配置 Loader，但是需要手動安裝相關依賴：
npm i pug -D npm i less-loader -D
還是相當方便的，不用手動修改 webpack 的配置文件添加 loader 就可以使用了
使用 pug 還是 pug-loader？sass 兩種語法的 loader 如何設置？ --- 請參考 預處理器 · vue-loader
使用
<!-- xxx.vue -->
<style lang="less">
.action {
color: #ddd;
ul {
overflow: hidden;//前端全棧開發交流圈：866109386
li { //針對1-5年前端開發人員
float: left; //突破技術，提升思維。歡迎大家進入。
}
}
}
</style>
<template lang="pug">
.action(v-if='hasRight')
ul
li 編輯
li 刪除
</template>
<script>
export default {
data () {
return {
hasRight: true
}
}
}
</script>
定義全局函數或變量
許多時候我們需要定義一些全局函數或變量，來處理一些頻繁的操作（這里拿 AJAX 的異常處理舉例說明）。但是在 Vue 中，每一個單文件組件都有一個獨立的上下文（this）。通常在異常處理中，需要在視圖上有所體現，這個時候我們就需要訪問 this 對象，但是全局函數的上下文通常是 window，這時候就需要一些特殊處理了。
簡單粗暴型
最簡單的方法就是直接在 window 對象上定義一個全局方法，在組件內使用的時候用 bind、call 或 apply 來改變上下文。 定義一個全局異常處理方法：
// errHandler.js
window.errHandler=function () { // 不能使用箭頭函數
if (err.code && err.code !==200) {
this.$store.commit('err', true)
} else {
// ...
}
}
在入口文件中導入：
// src/main.js
import 'errHandler.js'
在組件中使用：
// xxx.vue
export default {
created () {
this.errHandler=window.errHandler.bind(this)
},
method: {
getXXX () {
this.$http.get('xxx/xx').then(({ body: result })=> {
if (result.code===200) {
// ...
} else {
this.errHandler(result)
}
}).catch(this.errHandler)
}
}
}
優雅安全型
在大型多人協作的項目中，污染 window 對象還是不太妥當的。特別是一些比較有個人特色的全局方法（可能在你寫的組件中幾乎處處用到，但是對于其他人來說可能并不需要）。這時候推薦寫一個模塊，更優雅安全，也比較自然，唯一不足之處就是每個需要使用該函數或方法的組件都需要進行導入。 使用方法與前一種大同小異，就不多作介紹了。￣
自定義路徑別名
可能有些人注意到了，在 vue-cli 生成的模板中在導入組件時使用了這樣的語法：
import Index from '@/components/Index'
這個 @ 是什么東西？后來改配置文件的時候發現這個是 webpack 的配置選項之一：路徑別名。 我們也可以在基礎配置文件中添加自己的路徑別名，比如下面這個就把 ~ 設置為路徑 src/components 的別名：
// build/webpack.base.js
{
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'~': resolve('src/components')
}
}
}
然后我們導入組件的時候就可以這樣寫：
// import YourComponent from 'YourComponent' // import YourComponent from './YourComponent' // import YourComponent from '../YourComponent' // import YourComponent from '/src/components/YourComponent' import YourComponent from '~/YourComponent'
既解決了路徑過長的麻煩，又解決了相對路徑的煩惱，方便很多吧！
CSS 作用域與模塊
組件內樣式
通常，組件中 標簽里的樣式是全局的，在使用第三方 UI 庫（如：Element）時，全局樣式很可能影響 UI 庫的樣式。我們可以通過添加 scoped 屬性來使 style 中的樣式只作用于當前組件：
<style lang="less" scoped>
@import 'other.less';
.title {
font-size: 1.2rem;
}
</style>
在有 scoped 屬性的 style 標簽內導入其他樣式，同樣會受限于作用域，變為組件內樣式。復用程度較高的樣式不建議這樣使用。 另，在組件內樣式中應避免使用元素選擇器，原因在于元素選擇器與屬性選擇器組合時，性能會大大降低。 --- 兩種組合選擇器的測試：classes selector，elements selector
導入樣式
相對于 style 使用 scoped 屬性時的組件內樣式，有時候我們也需要添加一些全局樣式。當然我們可以用沒有 scoped 屬性的 style 來寫全局樣式。但是相比較，更推薦下面這種寫法：
/* 單獨的全局樣式文件 */
/* style-global.less */
body {
font-size: 10px;
}
.title {
font-size: 1.4rem;
font-weight: bolder;
}
然后在入口文件中導入全局樣式：
// src/main.js import 'style-global.less'
獲取表單控件值
通常我們可以直接使用 v-model 將表單控件與數據進行綁定，但是有時候我們也會需要在用戶輸入的時候獲取當前值（比如：實時驗證當前輸入控件內容的有效性）。
這時我們可以使用 @input 或 @change 事件綁定我們自己的處理函數，并傳入 $event 對象以獲取當前控件的輸入值：
<input type='text' @change='change($event)'>
change (e) {
let curVal=e.target.value
if (/^\d+$/.test(curVal)) {
this.num=+curVal
} else {
console.error('%s is not a number!', curVal)
}
}
當然，如果 UI 框架采用 Element 會更簡單，它的事件回調會直接傳入當前值。
v-for 的使用 tips
v-for 指令很強大，它不僅可以用來遍歷數組、對象，甚至可以遍歷一個數字或字符串。
基本語法就不講了，這里講個小 tips：
索引值
在使用 v-for 根據對象或數組生成 DOM 時，有時候需要知道當前的索引。我們可以這樣：
<ul>
<li v-for='(item, key) in items' :key='key'> {{ key }} - {{ item }}
</ul>
但是，在遍歷數字的時候需要注意，數字的 value 是從 1 開始，而 key 是從 0 開始：
<ul>
<li v-for='(v, k) in 3' :key='k'> {{ k }}-{{ v }}
<!-- output to be 0-1, 1-2, 2-3 -->
</ul>
2.2.0+ 的版本里，當在組件中使用 v-for 時，key 現在是必須的。
模板的唯一根節點
與 JSX 相同，組件中的模板只能有一個根節點，即下面這種寫法是 錯誤 的：
<template> <h1>Title</h1> <article>Balabala...</article> </template>
我們需要用一個塊級元素把他包裹起來：
<template> <div> <h1>Title</h1> <article>Balabala...</article> </div> </template>
項目路徑配置
由于 vue-cli 配置的項目提供了一個內置的靜態服務器，在開發階段基本不會有什么問題。但是，當我們把代碼放到服務器上時，經常會遇到靜態資源引用錯誤，導致界面一片空白的問題。
這是由于 vue-cli 默認配置的 webpack 是以站點根目錄引用的文件，然而有時候我們可能需要把項目部署到子目錄中。
我們可以通過 config/index.js 來修改文件引用的相對路徑：
build.assetsSubDirectory: 'static' build.assetsPublicPath: '/' dev.assetsSubDirectory: 'static' dev.assetsPublicPath: '/'
我們可以看到導出對象中 build 與 dev 均有 assetsSubDirectory、assetsPublicPath 這兩個屬性。
其中 assetsSubDirectory 指靜態資源文件夾，也就是打包后的 js、css、圖片等文件所放置的文件夾，這個默認一般不會有問題。
assetsPublicPath 指靜態資源的引用路徑，默認配置為 /，即網站根目錄，與 assetsSubDirectory 組合起來就是完整的靜態資源引用路徑 /static。
寫到這里解決方法已經很明顯了，只要把根目錄改為相對目錄就好了：
build.assetsSubDirectory: 'static' build.assetsPublicPath: './'
沒錯！就是一個 . 的問題。
出處：https://blog.csdn.net/q3254421/article/details/83273410
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
