首頁

px、em、rem、%、vw、vh、vm這些單位的區(qū)別

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

1.背景介紹


我們?yōu)槭裁匆x擇合適的網(wǎng)頁設(shè)計(jì)單位


隨著Web的發(fā)展，對新的解決方案的需求也會(huì)繼續(xù)增大，對網(wǎng)頁的要求更高。


網(wǎng)頁設(shè)計(jì)單位是涉及到我們布局的效果，使用不同的單位會(huì)對最終的demo，會(huì)有影響。


現(xiàn)在都是要求響應(yīng)式設(shè)計(jì)，需要適配各種設(shè)備，電腦，手機(jī)，平板。如果單位不合適，可能在這個(gè)設(shè)備顯示良好，那個(gè)設(shè)備就會(huì)打亂布局。


所以需要我們選擇合適的單位來進(jìn)行開發(fā)，設(shè)計(jì)。
2.知識(shí)剖析


1、px


px就是pixel的縮寫，意為像素。px就是設(shè)備或者圖片最小的一個(gè)點(diǎn)，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個(gè)像素點(diǎn)，垂直方向是768個(gè)像素點(diǎn)。


是我們網(wǎng)頁設(shè)計(jì)常用的單位，也是基本單位。通過px可以設(shè)置固定的布局或者元素大小，缺點(diǎn)是沒有彈性。


特點(diǎn)是1. em的值并不是固定的； 2. em會(huì)繼承父級(jí)元素的字體大小。




2、em


參考物是父元素的font-size，具有繼承的特點(diǎn)。如果自身定義了font-size按自身來計(jì)算（瀏覽器默認(rèn)字體是16px），整個(gè)頁面內(nèi)1em不是一個(gè)固定的值。
特點(diǎn)是1. em的值并不是固定的； 2. em會(huì)繼承父級(jí)元素的字體大小。
3、rem


rem是相對于根元素html，這樣就意味著，我們只需要在根元素確定一個(gè)參考值，可以設(shè)計(jì)HTML為大小為10px，到時(shí)設(shè)置1.2rem就是12px.以此類推。


優(yōu)點(diǎn)是，只需要設(shè)置根目錄的大小就可以把整個(gè)頁面的成比例的調(diào)好。


4、%


一般來說就是相對于父元素的，


1、對于普通定位元素就是我們理解的父元素 2、對于position: absolute;的元素是相對于已定位的父元素 3、對于position: fixed;的元素是相對于ViewPort（可視窗口），
5、vw


css3新單位，view width的簡寫，是指可視窗口的寬度。假如寬度是1200px的話。那10vw就是120px


舉個(gè)例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。


6、vh


css3新單位，view height的簡寫，是指可視窗口的高度。假如高度是1200px的話。那10vh就是120px


舉個(gè)例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。


7、vm


css3新單位，相對于視口的寬度或高度中較小的那個(gè)。其中最小的那個(gè)被均分為100單位的vm 舉個(gè)例子：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。


兼容性太差 ，現(xiàn)在基本上沒人用，我試了一下Chrome就用不了。


3.常見問題


假如使用em來設(shè)置文字大小要注意什么？


4.解決方案


注意父元素的字體大小，因?yàn)閑m是根據(jù)父元素的大小來設(shè)置的。比如同樣是1.5em，要是父元素是20，那1.5em就是30px.要是父元素是30px,1.5em就是45px.


特別是在多重div嵌套里面更要注意。


5.擴(kuò)展思考


css還有哪些長度單位？


in:寸


cm:厘米


mm:毫米


t:point，大約1/72寸


pc:pica，大約6pt，1/6寸


6.更多問題
1.pc pt ch一般用在什么場景?
這些我們網(wǎng)頁設(shè)計(jì)基本上用不到，在排版上會(huì)有用處。


2.如何使 1rem=10px
在設(shè)置HTML{font-size：62.5%；}即可


3.如果父元素沒有指定高度，那么子元素的百分比的高度是多少？
會(huì)按照子元素的實(shí)際高度，設(shè)置百分比已經(jīng)沒有效果了。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


評(píng)論(0) 瀏覽(3266)

Java跨域問題的解決方案及axios的跨域請求方法封裝

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

原因

出于安全考慮，瀏覽器有一個(gè)同源策略。瀏覽器中，異步請求的地址與目標(biāo)地址的協(xié)議、域名和端口號(hào)三者與當(dāng)前有不同，就屬于跨域請求。

限制跨域訪問是瀏覽器的一個(gè)安全策略，因?yàn)槿绻麤]有這個(gè)策略，那么就有被跨站攻擊的危險(xiǎn)。比如，攻擊者在自己的網(wǎng)站A放置一個(gè)表單，這個(gè)表單發(fā)起DELETE請求，刪除某個(gè)用戶在B網(wǎng)站上的個(gè)人資料。如果沒有同源策略保護(hù)，那么在同一個(gè)瀏覽器內(nèi)，如果用戶已經(jīng)登錄了B網(wǎng)站，這個(gè)刪除的請求就會(huì)被接受，導(dǎo)致在用戶不知情的情況下自己在B網(wǎng)站中的資料被刪除。

解決方式

瀏覽器的同源策略提升了安全性，但是給需要在不同域名下開發(fā)的開發(fā)者帶來了跨域問題。

解決跨域的問題主要有： 
jsonp和cors。jsonp是利用 script 標(biāo)簽可以跨域加載的特性而創(chuàng)造出來的一種非正式的跨域解決方案。在實(shí)際開發(fā)中，推薦使用cors，即在服務(wù)端返回時(shí)加入允許跨域的請求頭，允許指定域名的跨域訪問。

千萬要小心！這種直接加 * 號(hào)的做法是相當(dāng)危險(xiǎn)的，千萬別這么做！ 

response.addHeader("Access-Control-Allow-Origin", "*"); 

    

    
  • 
        1
    
    •

正確的做法：

1. 創(chuàng)建一個(gè) Filter 類 

/**
 * 使用Filter的方式解決跨域問題
 */ public class CorsFilter implements Filter { private static final List<String> ALLOW_ORIGINS = Config.getListString("allowOrigins", ","); private static final String REQUEST_OPTIONS = "OPTIONS"; @Override public void init(FilterConfig filterConfig) throws ServletException {
    } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        String orgHeader = request.getHeader(HttpHeaders.ORIGIN); if (orgHeader != null && ALLOW_ORIGINS.contains(orgHeader)) { // 允許的跨域的域名 response.addHeader("Access-Control-Allow-Origin", orgHeader); // 允許攜帶 cookies 等認(rèn)證信息 response.addHeader("Access-Control-Allow-Credentials", "true"); // 允許跨域的方法 response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PATCH, PUT, HEAD"); // 允許跨域請求攜帶的請求頭 response.addHeader("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With"); // 返回結(jié)果可以用于緩存的最長時(shí)間，單位是秒。-1表示禁用 response.addHeader("Access-Control-Max-Age", "3600"); // 跨域預(yù)檢請求，直接返回 if (REQUEST_OPTIONS.equalsIgnoreCase(request.getMethod())) { return;
            }
        }
        filterChain.doFilter(request, response);
    } @Override public void destroy() {

    }
} 

    

    
  • 
        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
    
    •

2. 在 web.xml 的最前面注冊這個(gè) Filter 

<filter> <filter-name>corsfilter</filter-name> <filter-class>com.bj58.crm.plus.filter.CorsFilter</filter-class> </filter> <filter-mapping> <filter-name>corsfilter</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> </filter-mapping> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    •

前端使用 axios 可以先進(jìn)行封裝

http-util.js 

let axios = require("axios"); let qs = require("qs");
axios.defaults.withCredentials = true;
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; function post(url, param) { return axios.post(url, qs.stringify(param))
} function get(url, param) { axios.get(url, {params: param})
}

export default {
  get,
  post
};

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)




評(píng)論(0) 瀏覽(3671)

echarts 實(shí)現(xiàn)關(guān)系圖表

seo達(dá)人


如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里


1.效果如上，官方示例簡化

2.force1.html 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ECharts"> <meta name="author" content="kener.linfeng@gmail.com"> <title>ECharts · Example</title> <script src="./js/echarts.js"></script> </head> <body> <div id="main" class="main" style="width: 800px;height: 800px"></div> <script src="./echartsExample.js"></script> </body> </html> 
3.echartsExample.js
var myChart; var domMain = document.getElementById('main'); function requireCallback (ec) { echarts = ec; if (myChart && myChart.dispose) { myChart.dispose();
    } myChart = echarts.init(domMain); window.onresize = myChart.resize; myChart.setOption(option, true); window.onresize = myChart.resize;
} var option = { title : { text: '人物關(guān)系：喬布斯', subtext: '數(shù)據(jù)來自人立方', x:'right', y:'bottom'  }, tooltip : { trigger: 'item', formatter: '{a} : '  }, toolbox: { show : true, feature : { restore : {show: true}, magicType: {show: true, type: ['force', 'chord']}, saveAsImage : {show: true}
        }
    }, legend: { x: 'left', data:['家人','朋友']
    }, series : [
        { type:'force', name : "人物關(guān)系", ribbonType: false, categories : [
                { name: '人物'  },
                { name: '家人'  },
                { name:'朋友'  }
            ], itemStyle: { normal: { label: { show: true, textStyle: { color: '#333'  }
                    }, nodeStyle : { brushType : 'both', borderColor : 'rgba(255,215,0,0.4)', borderWidth : 1  }, linkStyle: { type: 'curve'  }
                }, emphasis: { label: { show: false  // textStyle: null      // 默認(rèn)使用全局文本樣式，詳見TEXTSTYLE  }, nodeStyle : { //r: 30  }, linkStyle : {}
                }
            }, useWorker: false, minRadius : 15, maxRadius : 25, gravity: 1.1, scaling: 1.1, roam: 'move', nodes:[
                {category:0, name: '喬布斯', value : 10, label: '喬布斯\n（主要）'},
                {category:1, name: '麗薩-喬布斯',value : 2},
                {category:1, name: '保羅-喬布斯',value : 3},
                {category:1, name: '克拉拉-喬布斯',value : 3},
                {category:1, name: '勞倫-鮑威爾',value : 7},
                {category:2, name: '史蒂夫-沃茲尼艾克',value : 5},
                {category:2, name: '奧巴馬',value : 8},
                {category:2, name: '比爾-蓋茨',value : 9},
                {category:2, name: '喬納森-艾夫',value : 4},
                {category:2, name: '蒂姆-庫克',value : 4},
                {category:2, name: '龍-韋恩',value : 1},
            ], links : [
                {source : '麗薩-喬布斯', target : '喬布斯', weight : 1, name: '女兒'},
                {source : '保羅-喬布斯', target : '喬布斯', weight : 2, name: '父親'},
                {source : '克拉拉-喬布斯', target : '喬布斯', weight : 1, name: '母親'},
                {source : '勞倫-鮑威爾', target : '喬布斯', weight : 2},
                {source : '史蒂夫-沃茲尼艾克', target : '喬布斯', weight : 3, name: '合伙人'},
                {source : '奧巴馬', target : '喬布斯', weight : 1},
                {source : '比爾-蓋茨', target : '喬布斯', weight : 6, name: '競爭對手'},
                {source : '喬納森-艾夫', target : '喬布斯', weight : 1, name: '愛將'},
                {source : '蒂姆-庫克', target : '喬布斯', weight : 1},
                {source : '龍-韋恩', target : '喬布斯', weight : 1},
                {source : '克拉拉-喬布斯', target : '保羅-喬布斯', weight : 1},
                {source : '奧巴馬', target : '保羅-喬布斯', weight : 1},
                {source : '奧巴馬', target : '克拉拉-喬布斯', weight : 1},
                {source : '奧巴馬', target : '勞倫-鮑威爾', weight : 1},
                {source : '奧巴馬', target : '史蒂夫-沃茲尼艾克', weight : 1},
                {source : '比爾-蓋茨', target : '奧巴馬', weight : 6},
                {source : '比爾-蓋茨', target : '克拉拉-喬布斯', weight : 1},
                {source : '蒂姆-庫克', target : '奧巴馬', weight : 1}
            ]
        }
    ]
}; var echarts; require.config({ paths: { echarts: './js'  }
}); launchExample(); var isExampleLaunched; function launchExample() { if (isExampleLaunched) { return;
    } // 按需加載  isExampleLaunched = 1; require(
        [ 'echarts', 'echarts/chart/force', 'echarts/chart/chord',
        ], requireCallback  );
}
4.目錄文件結(jié)構(gòu)

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


評(píng)論(0) 瀏覽(4524)

ionic3學(xué)習(xí)之登錄頁

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

準(zhǔn)備工作

部分源碼說明： 

constructor(public modalCtrl: ModalController) {
}

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    •

我們使用的是：ModalController 不是 NavController。

這兩者的區(qū)別為： 
NavController 和 ModalController 都是打開新頁面，但是NavController 是直接將頁面放入到原有的頁面堆棧中的，而ModalController 是創(chuàng)建一個(gè)新的頁面堆棧（root nav stack），然后再放進(jìn)去。

最直觀的界面效果區(qū)別：

  1. 使用Tabs 菜單，使用NavController 方法跳轉(zhuǎn)的頁面，并不會(huì)移除Tabs 
    菜單；但是使用ModalController 方法就會(huì)從底部彈出新的頁面，并且沒有了Tabs 菜單。
  2. 使用NavController 方法，新頁面默認(rèn)有返回按鈕，使用 ModalController 
    方法新頁面默認(rèn)是沒有返回按鈕的。

文檔連接： 
NavController ：https://ionicframework.com/docs/api/navigation/NavController/ 
ModalController：https://ionicframework.com/docs/api/components/modal/ModalController/

新建 login 頁面 

// cd到項(xiàng)目目錄，然后執(zhí)行下面的代碼 ionic g page login --no-module

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    •

命令的說明：

  • ionic g page login 生成的 page 上面帶有 module 文件
  • ionic g page login –no-module 生成的 page 上面不帶有 module 文件

執(zhí)行完之后生成的文件，圖示： 
login

添加到根模塊

進(jìn)入 src/app 下，修改 app.module.ts 

// 導(dǎo)入 loginPage import {LoginPage} from "../pages/login/login"; // 在以下節(jié)點(diǎn)上面添加 LoginPage declarations:[
    LoginPage
],
entryComponents:[
    LoginPage
]

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    •

修改程序的首頁

我們程序進(jìn)入的第一個(gè)界面，一般都是登錄界面，然后通過跳轉(zhuǎn)才到首頁。所以，我們需要修改下程序的邏輯。 
進(jìn)入 src/app/ 下，修改 app.component.ts 

// 導(dǎo)入 loginPage import {LoginPage} from "../pages/login/login"; // 將源碼部分的 rootPage 指向到 LoginPage // rootPage:any = TabsPage; rootPage:any = LoginPage; // 這個(gè)地方就加載程序啟動(dòng)的頁面

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

修改登錄界面

修改login.html

打開login.html文件，寫入以下代碼 

<ion-header> <ion-navbar> <ion-title text-center>登錄</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list inset> <ion-item> <ion-input type="text" value="admin" placeholder="用戶名" #username></ion-input> <ion-icon ios="ios-person" md="md-person" item-end [ngStyle]="iconStyle"></ion-icon> </ion-item> <ion-item> <ion-input [type]="isShow ? 'text':'password'" value="88888" placeholder="密碼" #password></ion-input> <ion-icon ios="ios-key" md="md-key" item-end [ngStyle]="iconStyle"></ion-icon> </ion-item> <ion-item no-lines> <ion-label> <!-- 控制字體圖標(biāo)的顯示是由 ios 以及 md 兩個(gè)屬性控制的  --> <ion-icon [ios]="isShow ? 'ios-eye' : 'ios-eye-off'" [md]="isShow ? 'md-eye' : 'md-eye-off'"></ion-icon> </ion-label> <ion-toggle checked="false" [(ngModel)]="isShow"></ion-toggle> </ion-item> <ion-item no-lines> <label item-left>記住密碼</label> <ion-toggle checked="false" [(ngModel)]="isRemember"></ion-toggle> </ion-item> </ion-list> <div padding> <button ion-button block color="primary" (click)="_login(username, password)">登錄</button> </div> </ion-content> 

    

    
  • 
        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
    
    •

圖示： 
這里寫圖片描述

部分樣式說明： 

// text-center 讓文字居中 <ion-title text-center>登錄</ion-title> // no-lines 去除底部的線條 <ion-item no-lines></ion-item> // item-left 讓文字居左 <label item-left>記住密碼</label>

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    •

修改login.ts 

import { Component } from '@angular/core';
import { ModalController, ToastController} from 'ionic-angular';
import { TabsPage} from "../tabs/tabs";
import {Storage} from "@ionic/storage";

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage { public isRemember: boolean = false; public isShow: boolean = false;

  iconStyle: object = {'color':'#488aff','font-size':'1.4em'};

  constructor(public modalCtrl: ModalController, public toastCtrl: ToastController, public storage: Storage) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  _login(username: HTMLInputElement, password: HTMLInputElement){ if (username.value.length === 0){ this.showToast("bottom", "請輸入"); return false;
    } if (password.value.length === 0){ this.showToast("bottom", "請輸入密碼"); return false;
    } let data = {username: username.value, password: password.value, isRemember: this.isRemember}; // 儲(chǔ)存用戶信息 this.storage.remove("USER_INFO"); this.storage.set("USER_INFO", JSON.stringify(data)); // 界面跳轉(zhuǎn) let modal = this.modalCtrl.create(TabsPage, data);
    modal.present();
  }

  showToast(position: string, message: string) { let toast = this.toastCtrl.create({
      message: message,
      duration: 2000,
      position: position
    });

    toast.present(toast);
  }
}

    

    
  • 
        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
    
    •

接下來的一篇介紹下：怎么實(shí)現(xiàn)記住密碼之后直接進(jìn)入到首頁。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


評(píng)論(0) 瀏覽(5529)

HTML條件注釋用法詮釋

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

HTML條件注釋用法詮釋

注釋內(nèi)容以樣式為例，如下：

1、支持所有IE瀏覽器 

<!--[if IE]>
<link rel="stylesheet" href="all-ie-only.css" type="text/css"/>
<![endif]--> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

2、支持非IE瀏覽器 

<!--[if !IE]>
<link rel="stylesheet" href="not-ie.css" type="text/css"/>
<![endif]--> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

上面是除了IE瀏覽器外所有瀏覽器都識(shí)別這個(gè)樣式，另外CSS-TRICKS的《How To Create an IE-Only Stylesheet》一文中提供了另一種寫法： 

<!--[if !IE]><!--> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]--> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

3、僅僅支持IE10 

<!--[if IE 10]>
<link rel="stylesheet" type="text/css" href="ie10.css">
<![endif]--> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

4、支持IE10以下版本（IE9以及IE9以下版本）

這種方法是樣式表使用在低于IE10的瀏覽器,換句話說除了IE10以外的所有IE版本都將被支持。 

<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]--> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

也可以寫成 

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]--> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

前面我們也說過了lt和lte的區(qū)別,lt表示小于版本號(hào)，不包括條件版本號(hào)本身；而lte是小于或等于版本號(hào)，包括了版本號(hào)自身。

上面這幾種方法，使用的是低于（lt）和低于或等于（lte）的方法來判斷，我們也可以使用大于gt和大于或等于gte達(dá)到上面的效果：

5、高于IE9的版本(IE10以及IE10以上版本) 

<!--[if gt IE 9]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]--> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

或 

<!--[if gte IE 10]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]--> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

6、指定多種IE版本 

<!--[if (IE 6)|(IE 7)|(IE 8)]>
<link rel="stylesheet" type="text/css" href="ie6-7-8.css">
<![endif]--> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)




評(píng)論(0) 瀏覽(3374)

javascript中數(shù)組和對象的深拷貝和淺拷貝

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

1、首先理解一下“深拷貝”和“淺拷貝”的區(qū)別：

淺拷貝：a = b;//a和b中存的是相同的地址，該地址指向堆內(nèi)存中相同的地方，即a和b就是一個(gè)東西，改變a的值b的值也會(huì)跟著改變，同理改變b的值a的值也會(huì)發(fā)生改變；

深拷貝：a和b中存的地址不同，但是地址對應(yīng)的堆內(nèi)存中的內(nèi)容完全一致，即b是a的副本

2、

（1）數(shù)組和對象的淺拷貝一樣  ，簡單的賦值操作

var b = a;

如數(shù)組的淺拷貝：

[javascript] view plain copy
  1. var a = ['1','2','3'];  
  2. var b = a;  
  3. b[0] = '5';  
  4. console.log('a',a);  
  5. console.log('b',b);  

輸出的值為：

對象的淺拷貝：

[html] view plain copy
  1. var a = {name:'1',age:'2',color:'3'};  
  2. var b = a;  
  3. b.name = '5';  
  4. console.log('a',a);  
  5. console.log('b',b);  

輸出的值為：

（2）數(shù)組的深拷貝

ES5：var b = a.concat();

[javascript] view plain copy
  1. var a = ['1','2','3'];  
  2. var b = a.concat();  
  3. b[0] = '5';  
  4. console.log('a',a);  
  5. console.log('b',b);  

輸出的結(jié)果為：

ES6 let [...b] = a;

（3）對象的深拷貝

ES5: 

[javascript] view plain copy
  1. var a = {name:'1',age:'2',color:'3'};  
  2. function copyObj(a) {  
  3. var b = {};  
  4. for(var key in a) {  
  5. b[key] = a[key];  
  6. }  
  7. return b;  
  8. }  
  9. var c = copyObj(a);  
  10. c.name = '5';  
  11. console.log('c',c);  
  12. console.log('a',a);  

輸出的結(jié)果為：

ES6：

let {...b} = a;


藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


評(píng)論(0) 瀏覽(3599)

jQuery選擇器(二)基本選擇器+層次選擇器

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

1:獲取所有的<p>元素，對<p>元素繼續(xù)循環(huán)，因?yàn)楂@取的是數(shù)組對象，給每個(gè)<p>元素添加行為事件 

var items=document.getElementsByTagName("p"); for(var i=0;i<items.length;i++){
    items[i].onclick=function(){ //do something  }
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    •

2：根據(jù)表格id獲取表格，在表格內(nèi)獲取<tbody>元素，在<tbody>元素下獲取<tr>元素，循環(huán)輸出獲取的<tr>元素，對元素的索引值除以2取模，然后根據(jù)奇偶設(shè)置不同的背景色。 

var item=docuement.getElementById("tb"); var tbody=item.getElementsByTagName("tbody")[0]; var trs=tbody.getElementByTagName("tr"); for(var i=0;i<trs.length;i++){ if(i%2==0){
      trs[i].style.backgroundColor="#888";
   }
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    •

3：新建一個(gè)空數(shù)組，獲取所有name為”check”的多選框，循環(huán)判斷多選框是否被選中，如果被選中則添加到數(shù)組里，獲取輸出按鈕，然后為按鈕添加onclick事件，輸出數(shù)組長度即可。 

var btn=document.getElementById("btn");
btn.onclick=function(){ var array=new Array(); var items=document.getElementsByName("check"); for(i=0;i<items.length;i++){ if(items[i].checked){ array.push(items[i].value);
     }
  }
  alert(array.length);  
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    •

基本選擇器： 

#id  $("#test")選取id為test的元素 .class $(".test")選取所有class為test的元素 element $("p")選取所有的<p>元素 $("div,span,p.myClass") 選取所有的<div>，<span>和擁有class為myClass的<p>標(biāo)簽的一組元素
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    •

層次選擇器： 

$("ancestor  descendant") $("div span")選取<div>里面所有的<span>元素 $("parent>child") $("div >span")選取<div>元素下元素名為<span>的子元素 $("prev+next") $(".one+div")選取class為one的下一個(gè)<div>同輩元素 $("#two~div")選取id為two的元素后面的所有<div>同輩元素

后面兩個(gè)用得少，因?yàn)樵趈Query里可以用更加簡單的方法代替 $(".one+div") $(".one").next("div"); $("prev~div") $("#prev").nextAll("div");
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


評(píng)論(0) 瀏覽(3349)

HTML基礎(chǔ)應(yīng)用

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

本篇文章基本介紹了學(xué)習(xí)HTML的一些基礎(chǔ)的語法與標(biāo)簽，標(biāo)簽包括換行</br>，加粗<b>,下劃線<hr/>斜體字<i>,字體<h1....6>，標(biāo)題<title>......

<small>

<small> 標(biāo)簽呈現(xiàn)小號(hào)字體效果

。如果被包圍的字體已經(jīng)是字體模型所支持的最小字號(hào)，那么 <small> 標(biāo)簽將不起任何作用。

<small> 標(biāo)簽也可以嵌套，從而連續(xù)地把文字縮小。每個(gè) <small> 標(biāo)簽都把文本的字體變小一號(hào)，直到達(dá)到下限的一號(hào)字。

<sub>表示下標(biāo)<sup>表示上標(biāo)。

<p>與<pre>有些類似

pre 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。而文本也會(huì)呈現(xiàn)為等寬字體。

<pre> 標(biāo)簽的一個(gè)常見應(yīng)用就是用來表示計(jì)算機(jī)的源代碼。

p 元素會(huì)自動(dòng)在其前后創(chuàng)建一些空白。

<ul>與<ol>

兩者都指列表，前者是無序的，后者是有序的。

[html] view plain copy
  1. <html>  
  2. <head>  
  3. <span style="color:#33ff33;"><title></span>HTML 5 Tag Reference</title>  
  4. </head>  
  5. <body>  
  6. <span style="color:#33ff33;"><h1></span>The content of the document......<span style="color:#33ff33;"><br/></span></h1>  
  7. <h2>The content of the document......<br/></h2>  
  8. <h3>The content of the document......<br/></h3>  
  9. <h4>The content of the document......<br/></h4>  
  10. <h5>The content of the document......</h5>  
  11.   
  12. <h1>The content of the document......<br/></h1>  
  13. <h1><span style="color:#33ff33;"><small></span>The content of the document......</small><br/></h1>  
  14.   
  15. <span style="color:#33ff33;"><pre></span>  
  16. HTML基礎(chǔ)應(yīng)用  
  17.   
  18. HTML基礎(chǔ)應(yīng)用學(xué)習(xí)和掌握HTML語言的基本語法，常用的標(biāo)簽的使用方法；學(xué)會(huì)使用HTML設(shè)計(jì)基本的簡單  
  19.   
  20. 網(wǎng)頁。  
  21.   
  22. </pre>  
  23. <span style="color:#33ff33;"><hr/></span>  
  24. <span style="color:#33ff33;"><p>  
  25. <i></span>This is some text in a very short paragraph</i>  
  26. </p>  
  27. <span style="color:#33ff33;"><b></span>The content of the document......</b></br>  
  28.   
  29. a<span style="color:#33ff33;"><sup>2</sup><sub>0</sub></span>+b<sup>2</sup><sub>0</sub>=c<sup>2</sup><sub>0</sub>  
  30.   
  31. <span style="color:#33ff33;"><ul></span>  
  32. <li>sports</li>  
  33. <li> food </li>  
  34. <li> drink </li>  
  35. <li> friends </li>  
  36. </ul>  
  37. <span style="color:#33ff33;"><ol></span>  
  38.     <li>sports</li>  
  39.     <li> drink</li>  
  40.     <li> friends</li>  
  41. </ol>  
  42.   
  43. <span style="color:#33ff33;"><dl> </span>  
  44. <dt>計(jì)算機(jī)</dt>   
  45.     <dd>用來計(jì)算的儀器 ... ...</dd>   
  46. <dt>顯示器</dt>   
  47.     <dd>以視覺方式顯示信息的裝置 ... ...</dd>   
  48. </dl>   
  49.   
  50. </body>  
  51. </html>  

效果：

其中<title>體現(xiàn)在最上方的搜索欄中。

 


藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(3916)

用Flow提升前端代碼健壯性

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

看一段常見代碼： 

//例1 function foo(x) { return x + 10 }
foo('Hello!') //例2 function main(params){ //fn1函數(shù)獲取了一個(gè)數(shù)據(jù) var object = fn1(params) //fn2根據(jù)獲數(shù)據(jù)，產(chǎn)生一個(gè)結(jié)果 var result = fn2(object) return result
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    •

例2很明顯，這個(gè)過程非常的‘黑’，如果你想知道object包含什么數(shù)據(jù)的話，可以：

  1. 打印一下 console.log(object)
  2. 查看fn1的注釋，并且保佑它的注釋是正確，全面的
  3. 或結(jié)合1，2，然后仔細(xì)查看fn1的源碼，希望它不是很復(fù)雜

被上述步驟折磨完之后，終于能真正的寫點(diǎn)代碼了，但是依舊得非常小心，因?yàn)檫@里還有另一個(gè)函數(shù)：fn2

在修改代碼的時(shí)候，得保證result這個(gè)結(jié)果沒有被影響，那么如何保證呢？

很簡單，重復(fù)上面的步驟，搞清楚result包含的數(shù)據(jù)，在測試的時(shí)候確保其數(shù)據(jù)跟原先的相同。 
…

動(dòng)態(tài)類型一時(shí)爽，代碼重構(gòu)火葬場 
知乎傳送門:為什么說“動(dòng)態(tài)類型一時(shí)爽，代碼重構(gòu)火葬場”

是時(shí)候徹底優(yōu)化這個(gè)煩人的問題了

引入類型系統(tǒng)

其實(shí)問題的根源就是因?yàn)閖avascript太靈活了，在代碼運(yùn)行期間幾乎可以做任何的修改，

沒有東西可以在代碼層面保證 某個(gè)變量，某個(gè)函數(shù) 跟預(yù)期的一致。

所以要加入類型系統(tǒng)來確保代碼的可靠性，在后期維護(hù)的時(shí)候同樣能夠傳達(dá)出有效的信息

Flow & TypeScript

Flow是個(gè)JavaScript的靜態(tài)類型檢查工具，由Facebook出品的開源碼項(xiàng)目，問世只有兩三年，是個(gè)相當(dāng)年輕的項(xiàng)目。簡單來說，它是對比TypeScript語言的解決方式。

會(huì)有這類解決方案，起因是JavaScript是一種弱(動(dòng)態(tài))數(shù)據(jù)類型的語言，弱(動(dòng)態(tài))數(shù)據(jù)類型代表在代碼中，變量或常量會(huì)自動(dòng)依照賦值變更數(shù)據(jù)類型，而且類型種類也很少，這是直譯式腳本語言的常見特性，但有可能是優(yōu)點(diǎn)也是很大的缺點(diǎn)。優(yōu)點(diǎn)是容易學(xué)習(xí)與使用，缺點(diǎn)是像開發(fā)者經(jīng)常會(huì)因?yàn)橘x值或傳值的類型錯(cuò)誤，造成不如預(yù)期的結(jié)果。有些時(shí)候在使用框架或函數(shù)庫時(shí)，如果沒有仔細(xì)看文件，亦或是文件寫得不清不楚，也容易造成誤用的情況。

這個(gè)缺點(diǎn)在應(yīng)用規(guī)?；瘯r(shí)，會(huì)顯得更加嚴(yán)重。我們在團(tuán)隊(duì)開發(fā)協(xié)同時(shí)，一般都是通過統(tǒng)一的代碼規(guī)范，來降低這個(gè)問題的發(fā)生，但JS語言本身無法有效阻止這些問題。TypeScript這樣的強(qiáng)(靜態(tài))類型的JavaScript超集語言就開始流行，用嚴(yán)格的角度，以JavaScript語言為基底，來重新打造另一套具有強(qiáng)(靜態(tài))類型特性的語言，就如同Java或C#這些語言一樣，這也是為什么TypeScript稱自己是企業(yè)級(jí)的開發(fā)JavaScript解決方案。

TypeScript存在的問題

TypeScript自然有它的市場，但它有一些明顯的問題：

  • 首先是JavaScript開發(fā)者需要再進(jìn)一步學(xué)習(xí)，內(nèi)容不少
  • 有一定陡峭的學(xué)習(xí)曲線
  • 已經(jīng)在使用的應(yīng)用代碼，需要整個(gè)改用TypeScript代碼語法，才能發(fā)揮完整的功用。這對很多已經(jīng)有內(nèi)部代碼庫的大型應(yīng)用開發(fā)團(tuán)隊(duì)而言，將會(huì)是個(gè)重大的決定，因?yàn)槿绻煌嬷貥?gòu)的路走，將無法發(fā)揮強(qiáng)(靜態(tài))類型語言的最大效用eg:angular2

*所以許多現(xiàn)行的開源碼函數(shù)庫或框架，并不會(huì)直接使用TypeScript作為代碼的語言，另一方面因?yàn)門ypeScript并非是普及到一定程度的語言。 
當(dāng)然TypeScript也是個(gè)活躍的開源碼項(xiàng)目，發(fā)展到現(xiàn)在也有一段時(shí)間，它的背后有微軟公司的支持，全新打造過的Angular2框架中(由Google主導(dǎo))，也采用了TypeScript作為基礎(chǔ)的開發(fā)語言*。

Flow你的新選擇

現(xiàn)在，Flow提供了另一個(gè)新的選項(xiàng)，它是一種強(qiáng)(靜態(tài))類型的輔助檢查工具。Flow的功能是讓現(xiàn)有的JavaScript語法可以事先作類型的聲明(定義)，在開發(fā)過程中進(jìn)行自動(dòng)檢查，當(dāng)然在最后編譯時(shí)，一樣可以用babel工具來移除這些標(biāo)記。

相較于TypeScript是另外重新制定一套語言，最后再經(jīng)過編譯為JavaScript代碼來運(yùn)行。Flow走的則是非強(qiáng)制與非侵入性的路線。

Flow的優(yōu)點(diǎn)

  • 輕且易學(xué)易用 
    它的學(xué)習(xí)曲線沒有TypeScript來得高，雖然內(nèi)容也很多，但半天學(xué)個(gè)大概，就可以漸進(jìn)式地開始使用
  • Flow從頭到尾只是個(gè)檢查工具 
    不是新的程序語言或超集語言，所以它可以與各種現(xiàn)有的JavaScript代碼兼容，如果你哪天不想用了，就去除掉標(biāo)記就是回到原來的代碼，沒什么負(fù)擔(dān)

so

選擇flow.js工具而不選擇TypeScript強(qiáng)類型語言的原因顯而易見？ 
flow.js對工程的侵入性很小，無需大量的額外工作就能使用起來

從一個(gè)小例子演示

這種類型不符的情況在代碼中非常容易發(fā)生，例如上面的例1: 

function foo(x) { return x + 10 }

foo('Hello!')
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    •

x這個(gè)傳參，我們在函數(shù)聲明時(shí)希望它是個(gè)數(shù)字類型，但最后使用調(diào)用函數(shù)時(shí)則用了字符串類型。最后的結(jié)果會(huì)是什么嗎？ “Hello!10”，這是因?yàn)榧犹?hào)(+)在JavaScript語言中，除了作為數(shù)字的加運(yùn)算外，也可以當(dāng)作字符串的連接運(yùn)算。想當(dāng)然這并不是我們想要的結(jié)果。

聰明如你應(yīng)該會(huì)想要用類型來當(dāng)傳參的識(shí)別名，容易一眼看出傳參要的是什么類型，像下面這樣: 

function foo(number) { return number + 10 }
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •
  • 如果在復(fù)合類型的情況，例如這個(gè)傳參的類型可以是數(shù)字類型也可以是布爾類型，你又要如何寫得清楚？
  • 如果是個(gè)復(fù)雜的對象類型時(shí)，結(jié)構(gòu)又該如何先確定好？
  • 另外還有函數(shù)的返回類型又該如何來寫？

利用Flow類型的定義方式，來解決這個(gè)小案例的問題，可以改寫為像下面的代碼: 

// @flow function foo(x: number): number { return x + 10 }

foo('hi')
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    •

當(dāng)使用非數(shù)字類型的值作為傳入值時(shí)，就會(huì)出現(xiàn)由Flow工具發(fā)出的警告消息，像下面這樣:

[flow] Cannot call foo with 'hi' bound to x because string 1 is incompatible with number 2. (a.getting-start.js:6:5)

如果是要允許多種類型也是很容易可以加標(biāo)記的，假使這個(gè)函數(shù)可以使用布爾與數(shù)字類型，但返回可以是數(shù)字或字符串，就像下面這樣修改過: 

// @flow function foo(x: number | boolean): number | string { if (typeof x === 'number') { return x + 10 } return 'x is boolean' }

foo(1)
foo(true)
foo(null) // 這一行有類型錯(cuò)誤消息
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    •

在多人協(xié)同開發(fā)某個(gè)有規(guī)模的JavaScript應(yīng)用時(shí)，這種類型的輸出輸入問題就會(huì)很常遇見。如果利用Flow工具的檢查，可以避免掉許多不必要的類型問題。

真實(shí)案例

可能你會(huì)認(rèn)為Flow工具只能運(yùn)用在小型代碼中，其實(shí)不然，Vue源碼中大量使用flowjs中類型檢測： 
此處輸入圖片的描述

Flow使用

此處輸入圖片的描述 
1. flow init 
2. // @flow 或 /* @flow */ 
3. IDE插件 或 flow check 
在Visual Studio Code中因?yàn)樗鼉?nèi)建TypeScript與JavaScript的檢查功能，如果要使用Flow工具來作類型檢查，需要在用戶設(shè)置中，加上下面這行設(shè)置值以免沖突:

“javascript.validate.enable”: false

4 . babel插件在編譯時(shí)就會(huì)一并轉(zhuǎn)換Flow標(biāo)記 

{
  "plugins": [ "transform-flow-strip-types" ] }
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    •

Flow支持的數(shù)據(jù)類型

Flow支持原始數(shù)據(jù)類型，如下面的列表:

  • boolean
  • number
  • string
  • null
  • void

類型別名&常見語法 

// @flow export type Test = {
  titleOne?: string,
  titleTwo: ?string
} var a: Test = {titleOne:"3",titleTwo:4} var b:string = "" //any export type NavigationGestureDirection = 'horizontal' | 'vertical';

type T = Array<string> var x: T = []
x["Hi"] = 2 //有Flow警告 type TT = Array<Test> var xx:TT = []
xx = [{titleOne: '1',
  titleTwo: false}]

type MyObject = {
  foo: number,
  bar: boolean,
  baz: string,
};

let val:MyObject = {foo:2,bar:false,baz:'444'}; var val1: MyObject = {foo:2,bar:false,baz:null}; var val2: MyObject = {foo:2,bar:false}; function method(val: MyObject):MyObject { return {foo:2,bar:false,baz:'2'}} class Foo { constructor(val: MyObject) { /* ... */ } }
    
    

        
  • 
            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
        
    •

React中的應(yīng)用

如果你在React class里面使用了React.PropTypes規(guī)范，你可以對JSX上的attributes做靜態(tài)類型檢查： 

var Hello = React.createClass ({
  propTypes: {
    name: React.PropTypes.string.isRequired
  } ... });
//<Hello/> //Flow就會(huì)發(fā)現(xiàn) 缺少屬性的錯(cuò)誤
//<Hello name={42}/>//屬性類型的錯(cuò)誤
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

    


import * as React from 'react'; type Props = {
  foo: number,
  bar?: string,
}; function MyComponent(props: Props) {
  props.doesNotExist; // Error! You did not define a `doesNotExist` prop. return <div>{props.bar}</div>;
}

<MyComponent foo={42} />
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    •

更多關(guān)于支持React的細(xì)節(jié) 請移步 https://flow.org/en/docs/react/components/

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(3746)

如何看待CSS中BEM的命名方式？

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

BEM的意識(shí)就是塊(block)、元素(element)、修飾符(modifier)，是由yandex團(tuán)隊(duì)提出的一種CSS Class命名方法。

任何一個(gè)東西的存在都有其存在的道理，如果他毫無價(jià)值，那么肯定會(huì)被淘汰，后人可能都不了解，甚至都不會(huì)出現(xiàn)在后人的世界里。

如何看待CSS中BEM的命名方式？

關(guān)于BEM命名其最大的爭議就是其命名風(fēng)格，它鼓勵(lì)一級(jí)一級(jí)的寫的非常具體，但是會(huì)很長。如此常的命名會(huì)影響書寫效率，名稱過長代碼量就會(huì)增多，文件體積就會(huì)變大(在gzip下這個(gè)不算是個(gè)問題)，從而會(huì)影響傳輸速度，用戶體驗(yàn)度就低，但是作為一個(gè)職業(yè)人我們都不能單純把個(gè)人喜好和習(xí)慣作為借口來拒絕或否定其用途。

風(fēng)格對于使用者來說并不是很重要，關(guān)鍵的是看其效果。正所謂人們常說的“不看療程，看療效”。

從擴(kuò)展性上來看，嵌套過多閱讀性差，超過3層就很難閱讀了;嵌套越多，選擇器的層級(jí)也會(huì)隨之增多，那么性能不知不覺就會(huì)變差;如此長的名字，書寫上想沖突都難。

從編程原則上來說，這種命名方式不會(huì)暴露抽象類。假如樣式變了需要繼承另一個(gè)抽象類，不需要改HTML，只需要改css即可。

團(tuán)隊(duì)開發(fā)中，風(fēng)格無非是一種形式，可以約束人們達(dá)到一定程度上的統(tǒng)一。內(nèi)部溝通會(huì)極大降低溝通成本。

BEM命名的方法雖然有自身的不足之處，但至少他可以使我們命名的時(shí)候達(dá)到一定的統(tǒng)一，我們可以學(xué)習(xí)其優(yōu)秀的方面將其納為己用。在實(shí)際項(xiàng)目開發(fā)中將其巧妙而又靈活的運(yùn)用起來也未嘗不是一件壞事。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(3525)

日歷

鏈接

個(gè)人資料

存檔