Front
12 Nov 2017

前端常见问题（随手记）

node-sass

问题描述
MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”
解决方案

  1. npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i node-sass
npm cache clean sqlite3
cnpm install sqlite3

  2. npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/ mirrors/node-sass
--registry=https://registry.npm.taobao.org 
#淘宝npm包镜像
--disturl=https://npm.taobao.org/dist 
#淘宝node源码镜像，一些二进制包编译时用
--sass-binary-site=http://npm.taobao.org/mirrors/node-sass 
#这个才是node-sass镜像

判断页面元素是否存在

问题描述
判断页面元素是否存在
解决方案

  1. obj = document.getElementById("id"); 
if (obj){ 
    obj.innerText("hi"); 
}

  2. var elmt = $("#id" );
//$("id") 总是TRUE
if(elmt.length>0){ 
    alert("exist");  
}else{  
    alert("not found");  
}

瘦高字体

问题描述
高度一定压缩字体宽度
解决方案

  1. transform 
     <p style="font-size:90mm;font-family:黑体;transform-origin: left;transform: scale(0.5,1);-ms-transform: scale(0.5,1);filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.5, M12=0, M21=0, M22=1); /* IE6,IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.5, M12=0, M21=0, M22=1)"; /* IE8 */">黑体黑体黑体黑体</p>
  2. canvas 
     var getImg=function(){
 var c=document.createElement("canvas");
 c.setAttribute("width", '680mm');
 c.setAttribute("height", '330mm');
 // 背景透明
 c.setAttribute("style", 'background-color: rgba(0,0,0,0)');
 //opacity:0.5; 文字和背景透明
 //filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */
 var ctx=c.getContext("2d");
 // ctx.globalAlpha= 1; 画布透明度
 ctx.font="90mm 黑体";
 // var gradient=ctx.createLinearGradient(0,0,c.width,0);
 // gradient.addColorStop("0","magenta");
 // gradient.addColorStop("0.5","blue");
 // gradient.addColorStop("1.0","red");
 // ctx.fillStyle=gradient;

 //ctx.transform(0.5,0,0,1,0,0);
 ctx.scale(0.5,1);
 ctx.fillText("泰安泰安泰安",0,290);

 var image = new Image();
 image.src = c.toDataURL("image/png");
 return image;
 }
  3. java 
    public class createImg {
 public static double getPt(double mm) {
     return mm / (25.4 / 72);
 }
 public static BufferedImage drawStrPic(int width, int height, String str) {
     try {
         int cWidth = (int) width * (str.length() / 2);
         BufferedImage buffImg = new BufferedImage(cWidth, height, BufferedImage.TYPE_INT_RGB);
         Graphics2D gd = buffImg.createGraphics();
         //设置透明  start
         buffImg = gd.getDeviceConfiguration().createCompatibleImage(cWidth, height, Transparency.TRANSLUCENT);
         gd = buffImg.createGraphics();
         //设置透明  end
         gd.setFont(new Font("黑体", Font.BOLD, height)); //设置字体
         gd.setColor(Color.BLACK); //设置颜色
         //gd.drawRect(0, 0, width - 1, height - 1); //画边框
         // 35 是字符间距
         gd.drawString(str, 35, height - 35);//输出文字
         //缩放
         BufferedImage newImage = new BufferedImage(width, height, buffImg.getType());
         Graphics g = newImage.getGraphics();
         g.drawImage(buffImg, 0, 0, width, height, null);
         g.dispose();
         buffImg = newImage;
         return buffImg;
     } catch (Exception e) {
         return null;
     }
 }
 public static void main(String[] args) {
     BufferedImage imgMap = drawStrPic(570, 255, "博客博客博客");
     File imgFile = new File("e:/a.png");
     try {
         ImageIO.write(imgMap, "PNG", imgFile);
     } catch (IOException e) {
         e.printStackTrace();
     }
     System.out.println("生成完成");
 }
}

    transform各个属性用法：

     旋转：transform:rotate(10deg);
 倾斜：transform:skew(20deg);
 缩放：transform:scale(1.5,1)
 位移：transform:translate(120px,0);
 {-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
 {-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

    单位换算

     1in = 2.54cm = 25.4 mm = 72pt = 6pc
 1pt=0.3527778mm
 1mm=2.8346pt

ie无法加载ActiveX 控件

问题描述
有些硬件(如：身份证读卡器，高拍仪，CA等)是用ActiveX驱动的只有ie浏览器支持，有时控件无法加载，导致控件无法使用
解决方案

  1. 查看加载项：
    1. 打开ie浏览器->管理加载项->是否有加载项
    2. 打开ie浏览器->internet 选项-> 安全->自定义级别->ActiveX 相关->重启浏览器
  2. 若上述无效
    1. 查找注册项
      1. win+r->regedit(图形化界面)->编辑（查找）：Fmcom.COM
      2. win+r->cmd->regedit /e 1.reg "HKEY_LOCAL_MACHINE\SOFTWARE\Classes"->type 1.reg | find "Fmcom" >> d:\1.txt -> del 1.reg
      3. win+r->cmd->reg query "HKEY_LOCAL_MACHINE\SOFTWARE\Classes"| find /i "Fmcom" >> d:\1.txt
      4. win+r->cmd->reg query "HKEY_LOCAL_MACHINE\SOFTWARE" /s | find /i "Fmcom" >> d:\1.txt
    2. cab文件手动注册(管理员运行)
      1. 将cab 文件解压并复制到 C:\Windows\System32 -> regsvr32 C:\Windows\System32\abc.dll (删除 regsvr32/U C:\Windows\System32\abc.dll)
      2. （未实测）检查和修复系统文件:sfc /scannow–>start /w pkgmgr /ip /m:C:\fmcom.cab
      3. （未实测）我的电脑—-管理—-服务和应用程序—-服务– Windows Modules Install—-启动
        dism /Online /add-package /packagepath:C:\fmcom.cab
        dism /Online /remove-package /packagepath:C:\fmcom.cab

导出、导入模块

问题描述
ES6与 CommonJS 导入导出关键词混淆导致无法导入模块
解决方案

  1. CommonJS模块规范 
    // 导出
var x = 5;
var addX = function (value) {
return value + x;
};
module.exports.x = x;
module.exports.addX = addX;
//node 下直接使用 exports: exports变量是指向module.exports    
    
//导入
var example = require('./example.js');
console.log(example.x); // 5
console.log(example.addX(1)); // 6
  2. ES6模块规范 
     //导出
 var name = 'Michael';
 var year = 1958;
 export {name, year};
 export var m = 1;
 var n = 1;
 export {n as default};
 // 默认导出(每个模块只有一个),导入时不用{}且导入名自定义    
 //默认导出二
 export default function () {
 console.log('foo');
 }
 export * from "./other";    
    
 // 导入
 import {name, year,m} from "./example";
 import * as obj from "./example";
 //接收默认导出
 import defaultFn from "./example";

Ajax在IE9报错

问题描述
jQuery.Ajax() 方法在IE9及以下跨站请求返回No Transport错误
解决方案

 $.support.cors=true;//只限于测试使用
 $.ajax({
     type: "POST",
     url: "http://172.168.1.70:8082/User/login",
     xhrFields: {withCredentials: true},
     crossDomain: true,
     data: JSON.stringify({
         phone: $("#phone").val(),
         passWord: $("#password").val()
     }),
     dataType: "json",
     contentType: "application/json; charset=UTF-8",
     success: function(data) {
         location.href = "./main.html#/bcpgl/index";
     },
     error: (function(err) {
         console.log(err);
         alert("账户或密码错误");
     })

 });

IE8文档模式默认为 杂项Quirks

问题描述
特定的css无法正常解析渲染,F12查看文档模式为杂项Quirks不是ie8
解决方案

<!--使用哪种 HTML 或 XHTML 规范-->
<!DOCTYPE html>
<!--页面渲染优先：chrome渲染方式，最高版本IE内核-->
<!--[if lt GE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<![endif]-->
Tags: