東航電商前端技術週刊第一期20180601

時間  2019-11-19
標籤 東航 前端 技術 週刊 一期 简体版
原文   原文鏈接

這期咱們分享以下：javascript

1.計算金額的小數點怎麼才能精準呢？css

2.如何纔是正確的比較浮點數的姿式呢？html

3.日曆的天數怎麼算呢？前端

4.JS切面編程之AOPvue

5.文本的省略號怎麼用css實現？java

6.超出文本的省略號怎麼用js實現？web

7.Vue加載變量會閃屏，怎麼破？不怕，我有「v-cloak」！ajax

8.Vue 中爲何使用nextTick，此機制又是如何運做的？編程

9.Vue重構-動態組件的建立後端

 

---------------------------------------------------我啥也沒說---------------------------------------------------

閒話很少說，開！始！上！幹！貨！

 

1.計算金額的小數點怎麼才能精準呢？

現實開發當中，咱們老是會遇到金額計算問題，
咱們本覺得js中0.1+0.2=0.3,結果0.300000000000000004（喵喵喵？我是誰？我在哪 ？怎麼多出這麼多小尾巴？），

因此咱們顯示金額數值的時候，常常會不許，測試常常會提這樣有多個小數點的bug，

遇到這樣的問題咱們該怎麼辦？

解決辦法：
把小數先裝成整數計算。好比（0.1*100+0.2*100）/100 = 0.3 ，正確 ✔。
緣由：爲何0.1+0.2！=0.3？
這是由於計算機的計算緣由就是先把數值轉成二進制，再進行計算，

因此計算機沒法把0.1轉成一個有限位數的二進制，而是轉成一個跟0.1相近的二進制，

因此0.1和0.2求和（或者求積）會出現誤差。

總結：js當中只要涉及到小數點的計算，都必須先轉成整數進行計算。

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~感謝孫愛祥老師熱情分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

2.如何纔是正確的比較浮點數的姿式呢？ 

以前已經講過因爲計算機將數值轉換成二進制進行比較，

下例中計算結果與預期並不一致：

var a = 0.1 + 0.2, b = 0.5 - 0.2;
a === b // false

那麼如何纔是正確的比較浮點數的姿式呢？（僞裝很認真的思考。。）

能夠經過比較機器精度，肯定浮點數是否相等

if(!Number.EPSILON) {
Number.EPSILON = Math.pow(2, -52);
}
function numberCloseEnoughToEqual(n1, n2) {
return Math.abs(n1 - n2) < Number.EPSILON;
}
var a = 0.1 + 0.2, b = 0.5 - 0.2;
numberCloseEnoughToEqual(a, b); //true

須要特別說明的是Number.EPSILON是ES6提供的常量，（敲黑板！）

能夠用來設置浮點運算容許的偏差值，

Number.EPSILON屬性的值接近於 2.2204460492503130808472633361816E-16，或者 2-52。

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~感謝嚴明坤老師情分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

 3.日曆的天數怎麼算呢？

此次分享內容是項目日曆需求，計算某月有多少天的計算代碼方法，源碼見附件。但願對小夥伴們有用（筆芯.gif）。

不善言辭，上代碼！！！

Function getLastDay(year,month) {
        var new_year = year;    //取當前的年份
        var new_month = month++;//取下一個月的第一天，方便計算（最後一天不固定）
        if (month > 12)            //若是當前大於12月，則年份轉到下一年
        {
            new_month -= 12;        //月份減
            new_year++;            //年份增
        }
        var new_date = new Date(new_year, new_month, 1);                //取當年當月中的第一天
        var date_count = (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate();//獲取當月的天數
        var last_date = new Date(new_date.getTime() - 1000 * 60 * 60 * 24);//得到當月最後一天的日期
        return date_count;
    }

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~感謝唐雪峯老師熱情分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

4.JS切面編程之AOP

我什麼也不說，你看了就會懂，就是這麼自信（自信的微笑.jpg）！

<div>
    用戶名：<input id="username" type="text"/>

    密碼： <input id="password" type="password"/>
    <input id="submitBtn" type="button" value="提交"></button>
</div>
<script type="text/javascript">

    //後端開發中的AOP思想，一樣能夠應用在前端開發中

    
    Function.prototype.before = function( beforefn ){
        // 保存原函數的引用
        var __self = this; 

        return function(){
            // 執行新函數，新函數在原函數以前執行,且保證this 不被劫持，新函數接受的參數
            beforefn.apply( this, arguments ); 
            // 執行原函數並返回原函數的執行結果，
            return __self.apply( this, arguments ); 
    }
}

    //同理
    Function.prototype.after = function( afterfn ){
        var __self = this;
        return function(){
            var ret = __self.apply( this, arguments );
            afterfn.apply( this, arguments );
            return ret;
        }
    };

</script>
<script>

    //應用場景
    var username = document.getElementById( 'username' ),
    password = document.getElementById( 'password' ),
    submitBtn = document.getElementById( 'submitBtn' );

    Function.prototype.before = function( beforefn ){
        var __self = this;
        return function(){
            if ( beforefn.apply( this, arguments ) === false ){
                // beforefn 返回false 的狀況直接return，再也不執行後面的原函數
                return;
            }
            return __self.apply( this, arguments );
        }
    }
    var validata = function(){
        if ( username.value === '' ){
            alert ( '用戶名不能爲空' );
            return false;
        }
        if ( password.value === '' ){
            alert ( '密碼不能爲空' );
            return false;
        }
    }
    var formSubmit = function(){
        var param = {
            username: username.value,
            password: password.value
        }
        ajax( 'http:// xxx.com/login', param );
    }

    formSubmit = formSubmit.before( validata );

    submitBtn.onclick = function(){
        formSubmit();
    }
    
</script>

不信，能夠比劃比劃！

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~感謝李忠國老師熱情分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

5.文本的省略號怎麼用css實現？

固定寬高，多行實現省略號，嗯，小問題啦~

width:200px;
height:50px;
overflow : hidden;
text-overflow: ellipsis;
word-break: break-word
display: -webkit-box;
-webkit-line-clamp: 2;//本身設置的行數
-webkit-box-orient: vertical;

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~感謝於志平老師熱情分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

6.超出文本的省略號怎麼用js實現？

若是不能用css來控制省略號，那就用js啦。

省略號君，我！們！不！怕！

html：

 <div class="dome">偷偷ce試 一下 enmmmmm</div>

js：

　　tips：

　　str： 要截取的字符串
　　length：要截取的長度，這裏咱們取了18個
　　insert：截取後，剩下字符用「...」替換
//計算字符長度
function  GetLeng(str){
    var realLength = 0, len = str.length, charCode = -1;
    for (var i = 0; i < len; i++) {
        charCode = str.charCodeAt(i);
        if (charCode >= 0 && charCode <= 128) realLength += 1;
        else realLength += 2;
    }
    return realLength;
}
//截取方法
function CutStr(str,length,insert){
    if(!str) return "";
    if(length<= 0) return "";
    if(!insert) insert = "";
    var templen=0;
    for(var i=0;i<str.length;i++){
        if(str.charCodeAt(i)>255){
            templen+=2;
        }else{
            templen++
        }
        if(templen == length){
            return str.substring(0,i+1)+insert;
        }else if(templen >length){
            return str.substring(0,i)+insert;
        }
    }
    return str;
}
//小使身手
var domeText=$(".dome").text(),
    domeTextLength = GetLeng(domeText);
if(domeTextLength>18){
    $(".dome").text(CutStr(domeText, 18, '...'))

}

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~感謝何玉老師熱情分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

 7.Vue加載變量會閃屏，怎麼破？不怕，我有「v-cloak」！

在使用vue綁定數據的時候，渲染頁面時會出現變量閃爍（啊，閃到個人卡姿蘭大了眼睛！）

例如

<div class="#app">
<p>{{value.name}}</p>
</div>

在加載的時候會看到

{{value.name}}

在頁面出現，過了幾秒以後纔會渲染數據，

在vue中有個指令能夠解決這個問題，v-cloak

那麼，v-cloak要放在什麼位置呢？

是否是每一個須要渲染數據的標籤都要添加這個指令？（敲黑板，劃重點啦！）

通過試驗發現，v-cloak並不須要添加到每一個標籤，只要在el掛載的標籤上添加就能夠，這個指令能夠隱藏未編譯的Mustache 標籤直到實例準備完畢。

<div class="#app" v-cloak>
<p>{{value.name}}</p>
</div>

並且，在css裏面要添加

[v-cloak] {
display: none;
}

這樣就能夠防止頁面閃爍了。

可是有的時候會不起做用，可能的緣由有二：

一、v-cloak的display屬性被層級更高的給覆蓋掉了，因此要提升層級

[v-cloak] {
display: none !important;
}

二、樣式放在了@import引入的css文件中

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~感謝於志平老師熱情分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

8.Vue中爲何使用nextTick，此機制又是如何運做的？ 

一、定義［nextTick、事件循環］

Vue官網對它的解釋是：在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。

我認爲這樣解釋更簡單易懂：在同一事件循環中的數據變化後，DOM完成更新，當即執行nextTick(callback)內的回調。

二、應用場景：

在Vue生命週期的created()鉤子函數進行的DOM操做必定要放在Vue.nextTick()的回調函數中；

三、瞭解nextTick中定義的三個重要變量：

callbacks：用來存儲全部須要執行的回調函數；

pending：用來標誌是否正在執行回調函數；

timerFunc：用來觸發執行回調函數；

四、其次瞭解nextTickHandler()函數：

先判斷是否原生支持promise，若是支持，則利用promise來觸發執行回調函數；

不然，若是支持MutationObserver，則實例化一個觀察者對象，觀察文本節點發生變化時，觸發執行全部回調函數。

若是都不支持，則利用setTimeout設置延時爲0。

五、nextTick實際運用實例

<ul id="demo">
    <li v-for="item in list">{{item}}</div>
</ul>
new Vue({
el:'#demo',
data:{
list=[0,1,2,3,4,5,6,7,8,9,10]
},
methods:{
push:function(){
this.list.push(11);
this.nextTick(function(){
alert('數據已經更新')
});
this.$nextTick(function(){
alert('v-for渲染已經完成')
})
}
}})

或者：

this.$http.post(apiUrl)
.then((response) => {
if (response.data.success) {
this.topFocus.data = response.data.data;
this.$nextTick(function(){
//渲染完畢
});
}
}).catch(function(response) {
console.log(response);
});

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~感謝許亞男老師熱情分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

9.Vue重構-動態組件的建立

 一、component 和is配合使用

經過使用保留的 元素，並對其 is 特性進行動態綁定，你能夠在同一個掛載點動態切換多個組件：
實例以下：
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component v-bind:is="currentView">
    <!-- 組件在 vm.currentview 變化時改變！ -->
</component>

   二、方法二：經過render方法建立

<script>
    export default {
        data() {
            return {
            };
        },
        render: function(createElement) {
            let _type = bi.chart.data.type;
            let _attr = bi.chart.components[_type]["attr"];
            return createElement(_attr, {
                props: {
                }
            });
        }
    };
</script>

 

 

 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~感謝許亞男老師熱情分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

哇哦！這麼多小夥伴分享，驚喜不驚喜~ 

好啦，這一期咱們就到這裏，期待下一次分享。

 

 

 

 

 

 

-------------------------------------------------我是版本信息分界線-------------------------------------------------

主編：何玉 

時間：20180601

刊數：東航電商前端技術週刊第一期

感謝小夥伴分享，若侵權，請聯繫咱們，謝謝。

-----------------------------------------------嗯 別拉了 我是有底線的-----------------------------------------------

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程