分类 WEB前端 下的文章

引入CSS和JS用//双斜杠引入分析

0x01 缘起
在写前端页面的时候,我们都需要引入大量的css和js文件,但是我们常见的引入方式是:

<link href="http://cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>

这种是最常见的引入方式,可是这样也有一个问题,当我们整站从http升级为https或者https降为http的时候,都将无法使用。

0x02 缘灭

对于这种情况,现在应该怎么处理呢?推荐使用下面的引入方式:

<script src="//cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
<link href="//cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet">

//在这里表示同协议,一般现在用在https跨域名地址情况下。用//就不用很麻烦地区分https还是http,也不用担心https下降到http出问题

Winodws 10下安装weex-toolkit躺过的坑

0x01 问题

按照官网的安装方式:

cnpm install -g weex-toolkit

这里使用的是cnpm,国内镜像,本以为会方便很多,可是,才发现坑刚刚才开始。

安装完成后,输入weex命令,报错。

C:\Users\admin\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\[email protected]@xtoolkit\src\package\NpmPackage.js:50
                throw new Error('resolve path error:'+this.path)
                ^

Error: resolve path error:C:\Users\admin\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\._weex-previewer
    at NpmPackage.resolve (C:\Users\admin\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\[email protected]@xtoolkit\src\package\NpmPackage.js:50:23)
    at Command.run (C:\Users\admin\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\[email protected]@xtoolkit\src\Command.js:43:13)
    at XToolkit._done (C:\Users\admin\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\[email protected]@xtoolkit\src\xtoolkit.js:149:36)
    at process.nextTick (C:\Users\admin\AppData\Roaming\npm\node_modules\weex-toolkit\node_modules\[email protected]@xtoolkit\src\xtoolkit.js:90:22)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:393:7)
    at startup (bootstrap_node.js:150:9)
    at bootstrap_node.js:508:3

但是输入weex -v 却可以显示版本号。

可以初始化项目,但是访问的时候页面空白,js报错。各种纠结。。。

0x02 解决

先使用:

cnpm uninstall -g weex-toolkit

卸载掉cnpm安装的weex,然后执行:

npm install -g weex-toolkit

进行安装,如果安装失败,多安装几次,有墙。

当再次输入weex命令的时候就OK了。

哎。镜像始终是镜像啊/////

使用jQuery实现canvas中的getContext("2d")方法

使用canvas中,用原生的JS代码没有任何问题,但是在用jQuery来实现的时候,会遇到没有getContext()方法。

原生代码如下:

<canvas id="myCanvas"></canvas>

    <script type="text/javascript">

    //获取图形容器
    var canvas=document.getElementById('myCanvas');

    //渲染
    var ctx=canvas.getContext('2d');

    //设置颜色
    ctx.fillStyle='#FF0000';

    //输出一个位于坐标(0,0)位置的,宽为80,高为100的矩形
    ctx.fillRect(0,0,80,100);

    </script>

可是使用jQuery的时候就出现问题了,当使用$('#myCanvas')来获取的时候,

var ctx=canvas.getContext('2d');

这句会提示一个不存在的函数getContext();

原因是因为getContext是DOM对象方法,也就是js原生方法,不能用jquery对象直接调用;

解决办法如下,将

var ctx=canvas.getContext('2d');

改为

var ctx=canvas[0].getContext('2d');

就可以正常使用了。

最新文章

最近回复

  • :怎么生成带logo的二维码呀????
  • zirmi:哎呀,你的域名爆破工具 输入的字符不够啊
  • 小余:二维码如何弄啊,哥
  • 裤衩哥:可以要你的菊花吗?
  • admin:楼上+1
  • admin:吃瓜群众 为 落魂 打call
  • :牛逼了..........
  • 帮帮:厉害!谢谢了朋友!解决了我的问题。
  • 落魂:好多小伙伴找我要这个CSS样式,其实这个是使用的一套模块!大家可...
  • 星辰:您好,博主,有错误提示页面的css样式吗?

分类

归档

友情链接