Web前端笔记-字符串自适应tip提示框（适应大小&自动换行&JS中静态工具类实现）思路

程序运行截图如下：

下面提几个知识点。

第一个是JS中实现静态类，如下utils.js

 
 
export let HHUtils = {}
 
HHUtils .StaticClass = (function(){
 
  let Return = {
    xxxxxxx: function(xxxx){
 
      let ret= 0;
      return ret;
    },
 
    yyyyyyy: function(xxxx, yyyy){
 
      let ret;
	....
	....
      return ret;
    },
 
    zzzzzzz: function(zzz, zzzzz){
 
      let ret;
	...
	...
      return ret;
    }
  };
 
  return Return;
})();

这里就是依靠export导出对象，并且对象里面有给StaticClass方法，其中返回Return，在Return对象中写上各种各样的函数。通过这种方式就可以实现JS的静态工具类了。

另外一个知识点是判断字符串长度，也就是英文输入法输入的为1，中文输入法输入的为2：

关键代码如下：

let Return = {
 
  //获取字符串的长度：中文相关是2，英文相关是1
  getTextWidth: function(text){
 
    let len = 0;
    for(let i = 0; i < text.length; i++){
 
      if(text.charCodeAt(i) > 127 || text.charCodeAt(i) == 94){
 
        len += 2;
      }
      else{
 
        len += 1;
      }
    }
 
    return len;
  },

下面说下如何实现字符串自适应。此处只说思路，不说代码：

如果要写到矩形里面，矩形的长宽为100。那么如果是10大小的字体，在two.js中差不多可以写10个中文，或者20个英文，也就是可以使用上面那个计算字符串长度的代码。

在two.js中makeText写文字是从中间写，然后向两边增加。

最后是行，这里使用穷举法，也就是从字体大小的8，10，12，14，16，18，20，也就是可以使用for循环去操作。如果是矩形宽为100，当有10个中文就换行，使用这个思路进行操作。