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

来源:https://www.cnblogs.com/yuebai/archive/2018/06/01/9120718.html
-Advertisement-
Play Games

這期我們分享如下： 1.計算金額的小數點怎麼才能精準呢？ 2.如何才是正確的比較浮點數的姿勢呢？ 3.日曆的天數怎麼算呢？ 4.JS切麵編程之AOP 5.文本的省略號怎麼用css實現？ 6.超出文本的省略號怎麼用js實現？ 7.Vue載入變數會閃屏，怎麼破？不怕，我有“v-cloak”！ 8.Vue ...


這期我們分享如下：

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

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

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

4.JS切麵編程之AOP

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

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

7.Vue載入變數會閃屏，怎麼破？不怕，我有“v-cloak”！

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;
}

這樣就可以防止頁面閃爍了。

但是有的時候會不起作用，可能的原因有二：

1、v-cloak的display屬性被層級更高的給覆蓋掉了，所以要提高層級

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

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

 

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

 

8.Vue中為什麼使用nextTick，此機制又是如何運作的？ 

1、定義［nextTick、事件迴圈］

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

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

2、應用場景：

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

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

callbacks：用來存儲所有需要執行的回調函數；

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

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

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

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

否則，如果支持MutationObserver，則實例化一個觀察者對象，觀察文本節點發生變化時，觸發執行所有回調函數。

如果都不支持，則利用setTimeout設置延時為0。

5、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重構-動態組件的創建

 1、component 和is配合使用

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

   2、方法二：通過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

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

感謝小伙伴分享，若侵權，請聯繫我們，謝謝。

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Ajax工作原理
    關於ajax的名字 ajax 的全稱是Asynchronous JavaScript and XML，其中，Asynchronous 是非同步的意思，它有別於傳統web開發中採用的同步的方式。 關於同步和非同步 非同步傳輸是面向字元的傳輸，它的單位是字元；而同步傳輸是面向比特的傳輸，它的單位是楨，它傳輸的 ...
  • Nodejs+mySql實現長地址轉短地址
    一、開發原因 之前公司用一些線上的轉短地址網站，但出來的的地址輸入沒規則，輸入太麻煩了，而且掃碼還需要安裝一個掃碼的軟體，在一個就是不能轉換本地代理的地址（例：http://192.168.1.200:8080），心累。正好公司有個閑置的電腦做伺服器，想著幹嘛不搞個本地的轉短地址工具，這樣可以隨意設 ...
  • CSS學習摘要-浮動與清除浮動
    浮動四大特性 * 浮動的元素脫標 * 脫離標準流，漂浮，遮蓋標準流下的元素 * 浮動的元素互相貼靠 * 沒有足夠空間互相貼靠時，往邊靠 * 浮動的元素有“字圍”（文字圍繞）效果 * 所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提高，但是p中的文字不會被遮蓋，此時就形成了... ...
  • 配置使用bootstrap-fileinput
    bootstrap-fileinput文件如下： 1.在項目中引用這三個文件，這裡我是使用了BundleConfig，和你根據路徑訪問效果是一樣的 2.編寫input元素 <input type="file" name="img" id="img" class="file-loading" mult ...
  • axios封裝（一）基礎配置
    `axios xhr http` 庫創建網路請求。 提供了豐富的配置，這裡講一講我在工作中通常用到的基本配置方法。 因為我在工作中用 進行開發，所以以下代碼預設的環境是 。 創建一個 axios 實例 為什麼要創建一個 實例，而不是在 對象上進行配置呢？是因為我們會應對複雜的使用場景，多個實例便於管 ...
  • 使用LocalStorage實現Form表單內容本地存儲
    判斷瀏覽器是否支持localStorage，並將值存入，推薦setItem方法。 取出localStorage中的值，使用getItem方法。 清除localStorage中的值 參考：https://www.cnblogs.com/st-leslie/p/5617130.html ...
  • H5 視頻作為背景 source src改變後 迴圈播放的問題筆記
    今天要做一個效果，但是遇到很蛋疼的問題，最後終於解決了，感謝熱心幫助的朋友，於是記下筆記，萬一能幫到別的朋友呢！需求：video作為網頁背景，但是要定時更換video的視頻註意點：1、html的video的source替換src後，要執行load方法和play方法才能播放，否則雖然src換了，但是並 ...
  • CSS學習摘要-盒子模型
    CSS框模型（譯者註：也被稱為“盒模型”）是網頁佈局的基礎 ——每個元素被表示為一個矩形的方框，框的內容、內邊距、邊界和外邊距像洋蔥的膜那樣，一層包著一層構建起來。 瀏覽器渲染網頁佈局時，它會算出每個框的內容要用什麼樣式，周圍的洋蔥層有多大，以及框相對於其它框放在哪裡。 在理解如何創建 CSS 佈局... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類