我想在网页上使用一些新的HTML5表单属性和输入类型.有些浏览器已经支持它们,有些浏览器不支持它们.这就是为什么我想使用Modernizr - 这就是我的麻烦开始.
据我所知,Modernizr本身并不是一个polyfill,而是一个可以测试浏览器是否能够使用某些新的HTML5/CSS3的脚本.如有必要,可以加载polyfill,"模拟"这些功能,以便它们可以在非支持/旧版浏览器中使用.这是正确的我猜？
关于测试/装载:使用Modernizr加载polyfill的正确或最佳方法是什么？
在文档中我发现了这个:
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
但是有些页面也是这样的:
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
另外,我如何才能真正了解如何检测这些功能？Modernizr.geolocation对于每个特征检测,肯定存在某些东西吗？
在Modernizr GitHub存储库中,还有许多用户贡献的功能检测.如何在我的Modernizr版本中实现这些？或者只是使用他们的建设者是最好的？
在Safari中,HTML5表单验证有效,但没有用于显示错误消息的UI.基本上,该功能只实现了一半.这就是为什么Modernizr在Safari中给出了误报,就像在这里已经提到的那样:https ://github.com/Modernizr/Modernizr/issues/266 显然有人用这样的自定义测试来解决这个问题,但我仍然不明白如何使用它.1
我正在尝试使用覆盖(使用karma-coverage)和webpack(使用karma-webpack)运行单元测试.测试运行正常,但生成一个覆盖报告实际的源文件(未测试)需要通过加载并通过coverage和webpack预处理器.
不幸的是,这失败了以下错误:
ERROR [karma]: { [Error: no such file or directory]
code: 'ENOENT',
errno: 34,
message: 'no such file or directory',
path: '/_karma_webpack_/views/Foo/Foo.js' }
Error: no such file or directory
Foo.js是包含源的文件.目录结构是这样的:
karma.conf.js
- src/
- js/
- views/
- Foo/
- Foo.js
- test/
- FooTest.js
karma.conf.js:
module.exports = function (config) {
config.set({
basePath: 'src/js/',
frameworks: ['jasmine'],
files: [
'**/test/*Test.js',
'**/Foo.js',
],
exclude: [],
preprocessors: {
'**/test/*Test.js': ['webpack'],
'**/Foo.js': ['webpack', …我目前正在阅读关于函数式编程的最充分指南,第2章.
在那里,给出了以下示例
var getServerStuff = function(callback) {
return ajaxCall(function(json) {
return callback(json);
});
};
然后重构为:
var getServerStuff = ajaxCall;
在解释重构时,作者认为
return ajaxCall(function(json) {
return callback(json);
});
是相同的
return ajaxCall(callback);
虽然我理解ajaxCall用匿名函数的返回值调用(这只是返回值callback),但我不知道重构版本应该如何工作 - json参数在哪里？我错过了什么？
我正在尝试创建一个有序的多列列表,但我正在努力与CSS网格布局规则.
期望的结果应该是敏感的.在小屏幕上2个网格列,在大屏幕上最多4个,同时保持列顺序.
而不是像这样订购:
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15
他们应该像这样订购:
1 5 9 13
2 6 10 14
3 7 11 15
4 8 12
我觉得我很接近这个小提琴.
ol {
margin: 0;
padding: 0;
list-style: none;
background-color: grey;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(33.333%, 50%));
grid-auto-flow: column;
grid-template-rows: repeat(5, 1em);
}
li {
outline: 1px solid orange;
}<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item …我在页面上有一些使用SVG文件作为背景图像的元素.它在Opera,Chrome和Safari中运行良好,只有Firefox才能使图形真正像素化.
我已经对该主题进行了搜索,在这里甚至有一些类似的问题:
Firefox中的SVG渲染很糟糕
Firefox没有抗锯齿缩放的背景svg
Firefox SVG图形模糊
一些建议是不要过度使用background-size和扩展SVG width="100%" height="100%".
我只将SVG缩放了5%,所以真的不应该太多.添加width="100%" height="100%"是稍微修正了像素化,但与其他浏览器相比,它仍然非常模糊.
这个链接的评论有什么帮助:http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/#comment-573707
最初的宽度和高度是22px.现在我已经设置为200px和voilà,SVG渲染得如此清晰 - 但现在Opera渲染它有点模糊/非常糟糕!此外,放大时,图形会"切断".因此,不是按比例缩放,而是在图标框中放大图形.那有什么问题吗？
有趣的是:作为按钮的背景图像,它呈现模糊.作为输入字段中的背景图像,它会呈现为"过于清晰",我称之为"过度清晰".
目前我这样做:
在一个文件中,让我们把它叫做file_one.php,我有
define( 'ROOT', realpath( dirname( __FILE__ ) ) );
require_once( ROOTPATH . '/file_two.php' );
在file_two.php我身上,然后在顶部:
if ( ! defined( 'ROOT' ) )
exit;
因此file_two.php只有在ROOT定义时才能访问内容,这种情况发生在file_one.php.如果你试图file_two.php直接访问它将无法正常工作,是不是？这种方法有什么缺陷吗？
我已经看到一些嵌入在网页中的jQuery脚本
(function(window, document, undefined){...
要么
;(function ( $, window, document, undefined ) {...
我相信;如果脚本与其他文件连接并且有一个缺少的结束括号,那么可能会存在,这会;阻止minifier删除代码的第一行,但我不确定.
我发布的两个变种是什么？为什么人们这样打开他们的代码,为什么第一个例子错过了美元符号？
浏览器的列表元素的默认显示值(如block或inline)是多少？
有没有可以查找类似内容的列表？我试着看看HTML5规范,但由于它有很多版本,我不知道哪一个是绑定的,或者其中任何一个都是绑定的,因为HTML5仍处于开发阶段.
当通过在线Babel转发器运行代码片段(取自关于ES2015中关键字的MDN页面let)时,它失败并出现以下错误:
repl: We found a path that isn't a NodePath instance. Possiblly due to bad serialisation.
码
var list = document.getElementById("list");
for (var i = 1; i <= 5; i++) {
var item = document.createElement("LI");
item.appendChild(document.createTextNode("Item " + i));
let j = i;
item.onclick = function (ev) {
console.log("Item " + j + " is clicked.");
};
list.appendChild(item);
}
为什么会抛出错误,我该怎么办？
我在 React 中创建了两个组件，<Search />它们<List />都是<App />.
当单击 中的按钮时<Search />，我想从 API 中获取某些内容并在 中显示结果<List />。虽然我通过在内部执行 fetch<App />并将响应作为 prop 传递给 来完成此工作<List />，但我更愿意将 fetch 封装在内部<List />。
不幸的是，我很难找到一种方法来做到这一点。“React 方式”可能是通过一些巧妙的 prop 传递来做到这一点，但我还没有找到一种巧妙的方法来做到这一点 \xe2\x80\x93 即使需要一个“shouldFetch”布尔值获取后重置似乎很麻烦并且会触发不必要的渲染。
\n\n这个答案用于refs类似的可能有效的东西，但实际上我有点犹豫是否要尝试它，因为refs根据 React 文档，它似乎有点肮脏，因为它们“必须修改典型数据流之外的子级”。
单击<List />按钮后如何指示我的组件执行某些操作？<Search />
如果需要，我可以提供代码 \xe2\x80\x93 但希望这个问题比我看起来更简单。
\n