我想知道在多个angularJS项目之间共享公共库和自己的模块的最佳实践是什么.
我们假设我正在开展两个不同的项目.两者都依赖于angularJS,bootstrap等库.
我有一个如下文件结构:
- 项目1
- 的index.html
- CSS
- JS
- 模块A.
- 模块B.
- LIB
- 角
- 引导
- 项目2
- 的index.html
- CSS
- JS
- 模块B.
- 模块X.
- LIB
- 角
- 引导
所以我在考虑用所有共享组件创建另一个目录,这样我就可以了.喜欢:
- 共享
- 角
- 引导
- 模块B.
- 项目1
- 的index.html
- CSS
- JS
- 模块A.
- 项目2
- 的index.html
- CSS
- JS
- 模块X.
我有模块B写成:
angular.module("moduleB", [])
.service("SB", [function () {/*functionality here*/}]);
.factory("FB", [function () {/*functionality here*/}]);
Run Code Online (Sandbox Code Playgroud)
然后将它包含在我的Project 1/2中作为依赖项,如:
angular.module("project1", ["moduleB"]);
Run Code Online (Sandbox Code Playgroud)
实现这种方法.
那会是最好的方式吗?什么可以替代?
我的页面最大宽度为1280像素.使用margin: 0 auto;Now我想在右下角放置一个元素,正文在大屏幕上居中.必须修复它,因为它应该滚动内容.在大于1280像素的屏幕上,元素应保留在居中主体的角落,而不是粘在窗口的右侧.
元素应该粘在那里,与当前视口宽度无关.
我已经通过使用媒体查询和CSS3-calc操作的组合解决了这个问题.对于这个简单的任务来说,这感觉有些过分,但我找不到比我更简单的解决方案.这是一些示例css(我已经将最大页面宽度更改为500px):
body {
max-width: 500px;
height: 1000px;
margin: 0 auto;
padding: 0;
border: 1px solid black;
}
div {
position: fixed;
right: 0;
bottom: 0;
height: 30px;
width: 30px;
margin: 0;
padding: 0;
background-color: red;
}
@media all and (min-width: 515px) /*max body width + (element width / 2)*/ {
div {
margin-right: -webkit-calc((100% - 500px) / 2);
margin-right: -moz-calc((100% - 500px) / 2);
margin-right: calc((100% - 500px) / 2);
}
}
Run Code Online (Sandbox Code Playgroud)
JSFiddle:https …
我有一个button由一个<i>和一个<span>元素(一个图标和一些文本)组成.现在两者都有不同的尺寸,所以我在我的按钮上应用了一个flexbox,它可以很好地集中我的物品.在Chrome中,一切都按预期工作,但在当前FF中使用页面会导致包含按钮的内部内容.图标通过:before伪元素显示.
谁在这里错了?是FF还是Chrome(和我).我应该怎样做才能在浏览器中获得相同的结果(文本前的图标,垂直中心,没有换行)?
我有一个使用 Bootstrap3 具有固定页眉和页脚的页面。下面的内容是可滚动的。用户可以通过 F11 或按钮(使用 FullScreen-API)启用全屏模式。这在 Chrome 和 FF 中工作正常,但在 IE11 中出现问题。F11 全屏效果总是很好。但是使用 javascript 切换全屏模式会导致我的页面在使用 IE11 时被放置在顶部底部,并且宽度和高度缩小。我的页眉和页脚保持不变。
<body>
<header>Fixed</header>
<main>Scrollable</main>
<footer>Fixed</footer>
</body>
Run Code Online (Sandbox Code Playgroud)
我创建了一个小小提琴,可以显示我在做什么。不幸的是,全屏不会在 JSFiddle 中切换,因此最好将代码复制到其他地方: https: //jsfiddle.net/j122kdju/
这是该网站的两个屏幕截图。我给 html 设置了绿色背景色,以查看通过 JS API 启用全屏时发生的情况。第一张图显示了 IE11 中没有全屏的页面:
第二个显示通过 IE11 中的 JS API 启用全屏:
我可以通过将 css 中的 html 宽度设置为 100% 来解决这个问题。无论如何,溢出的页面就不能再滚动了。滚动条不可见。如前所述,这在其他浏览器中运行良好。
有没有可用的解决方法?我在这里错过了什么吗?谢谢
编辑:也许相关:IE 在全屏模式下无法滚动
使用无织物绘图模式时,我想在不透明度的画布上添加不同的线条。当这些线相互绘制时,它们的不透明度不应相加。因此,我将画布混合模式更改为xor. 无论如何,当相互画线时,不透明度仍然会增加。我在这里做错了什么?
var canvas = new fabric.Canvas("a", {
isDrawingMode : true
});
document.getElementById("cbFreeDrawing").onchange = function () {
canvas.isDrawingMode = this.checked;
};
canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
canvas.freeDrawingBrush.width = 25;
canvas.freeDrawingBrush.color = "rgba(255,0,0,.5)";
//this seems not to work
canvas.getContext().globalCompositeOperation = 'xor';Run Code Online (Sandbox Code Playgroud)
canvas {
border: 1px solid;
}Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>
Drawing Mode: <input id="cbFreeDrawing" type="checkbox" checked="true"/><br/>
<canvas id="a" width="400" height="300"></canvas>Run Code Online (Sandbox Code Playgroud)
我正在使用node,gulp和browserify来使我的JS文件正确顺序并管理模块.我将jQuery和AngularJS安装为节点模块,并在需要时需要它们.Angular默认使用jqLite来处理DOM-Elements.
我知道当jQuery在AngularJS之前加载时,Angular将使用jQuery而不是jqLite.
但是在使用browserify时如何让Angular使用jQuery呢?或者:怎么可能需要jQuery角度?
现在我正在做var $ = require("jquery");,并在需要时使用它.但是我希望有一个Angular,例如在做的时候会原生地给我jQuery方法:
app.directive("dir", function () {
return {
link : function ($scope, $elem) {
var a = $elem.width();//jQuery methods currently not available here
}
};
});
Run Code Online (Sandbox Code Playgroud)
我真正需要做的是:
var jQuery = require("jquery");
app.directive("dir", function () {
return {
link : function ($scope, $elem) {
var jqElement = jQuery($elem);
var a = $jqElement.width();//jQuery methods are available here
}
};
});
Run Code Online (Sandbox Code Playgroud) 我想Number.EPSILON在我的应用程序中使用该值,并且想知道不同浏览器如何支持它。MDN 表示Firefox 和 Chrome 支持它,但 IE 和 Safari 不支持。
我自己在IE11和Edge的控制台测试过。Edge 给了我2.220446049250313e-16预期的结果,IE11 给了undefined. 我无法自己测试 Safari。
是否有支持表显示不同浏览器版本的支持?
我可以安全地var eps = Number.EPSILON || 2.220446049250313e-16;用作后备吗?
我正试图fabric.Circle在一个角上放置点(通过)fabric.Polygon.用户可以移动,缩放或旋转多边形.但是,在每次修改后,我想要使用多边形的新坐标来放置我的圆圈.
在深入研究这个主题的过程中,我发现了转换矩阵的这个很好的解释.我认为这是我想达到的目标的完美解决方案.但正如你在小提琴中看到的那样,我的观点总是远离我的多边形.
由于我对几何变换等不太坚定,我希望有人能找到我的错误并告诉我我错过了什么:)谢谢.
var canvas = new fabric.Canvas("c", {selection: false});
var polygon = new fabric.Polygon([
new fabric.Point(200, 50),
new fabric.Point(250, 150),
new fabric.Point(150, 150)
]);
polygon.on("modified", function () {
var matrix = this.calcTransformMatrix();
var transformedPoints = this.get("points").map(function(p){
return fabric.util.transformPoint(p, matrix);
});
var circles = transformedPoints.map(function(p){
return new fabric.Circle({
left: p.x,
top: p.y,
radius: 3,
fill: "red",
originX: "center",
originY: "center",
hasControls: false,
hasBorders: false,
selectable: false
});
});
this.canvas.clear().add(this).add.apply(this.canvas, circles).setActiveObject(this).renderAll();
});
canvas.add(polygon).renderAll();Run Code Online (Sandbox Code Playgroud)
canvas { …Run Code Online (Sandbox Code Playgroud)我正在尝试开发一种方法来选择在下面分层并且(完全)被其他对象覆盖的对象。一种想法是选择顶部对象,然后通过doubleclick层向下走。这是我目前得到的:
var canvas = new fabric.Canvas("c");
fabric.util.addListener(canvas.upperCanvasEl, "dblclick", function (e) {
var _canvas = canvas;
var _mouse = _canvas.getPointer(e);
var _active = _canvas.getActiveObject();
if (e.target) {
var _targets = _canvas.getObjects().filter(function (_obj) {
return _obj.containsPoint(_mouse);
});
//console.warn(_targets);
for (var _i=0, _max=_targets.length; _i<_max; _i+=1) {
//check if target is currently active
if (_targets[_i] == _active) {
//then select the one on the layer below
_targets[_i-1] && _canvas.setActiveObject(_targets[_i-1]);
break;
}
}
}
});
canvas
.add(new fabric.Rect({
top: 25,
left: 25,
width: …Run Code Online (Sandbox Code Playgroud)我正在寻找一种从二进制图像(只有黑色和白色像素)创建类似 svg 的路径的方法。图像本身将是一个形状不规则的斑点,其中可能有孔。
如果没有洞,我只需要一个边界路径来重新创建斑点的边界。当斑点中有洞时,我可以使用额外的路径(我猜,单独一条路径无法重新创建它)。最后我只需要知道哪条路径是外部路径,哪些是洞。
我已经找到了这些:
另外我需要检测漏洞。结果是多边形还是路径对我来说并不重要。我只需要精度足够高的点,使曲线保持弯曲:)
如果有人有一个想法甚至一些进一步的来源,那就太好了。
PS:如果这有什么区别的话,我正在使用canvas和javascript(fabricJS)。
javascript canvas image-processing edge-detection html5-canvas
是否有可能在我自己创建的模块中创建某种回调?
我的问题是我为我的应用程序编写了一个模块.在这个模块中完成了一些任务,现在我的主应用程序应该获得模块完成任务的反馈.
以下描述了我想要但不会做的事情......
//module mymod.js
function start()
{
var done = false;
//do some tasks
done = true;
}
exports.done = done;
Run Code Online (Sandbox Code Playgroud)
主要应用
var mymod = require("./mymod.js");
while(!mymod.done)
{
//do some tasks
}
Run Code Online (Sandbox Code Playgroud)
如果有人可以帮助我,我会很高兴.
PS:我尝试了这种情况的子进程(fork),但因为它似乎复制整个过程我不能再访问打开的OpenCV视频捕获...... :(通过使用模块我不会遇到这个问题,但我得到这个一个为它^^
我有以下HTML结构:
<ol>
<li><a id="a" href="#">Not this</a></li>
<li><a id="b" href="#">Not this</a></li>
<li><a id="c" href="#">This one</a></li>
<li class="active"><span>Not this</span></li>
</ol>
Run Code Online (Sandbox Code Playgroud)
我想通过CSS选择#c.我试过了:
ol > li:not(.active):last-child > a {
border: 1px solid green;
}
Run Code Online (Sandbox Code Playgroud)
据我了解li:not(.active)选择所有li元素,但选择类.active.
在这个选择中,我使用:last-child来获取这些li元素中的最后一个.但这不会奏效.怎么了?我想要达到的目标是否可能?
非常感谢你 :)
PS:列表长度是动态的,元素没有任何可用于CSS选择的id(我只是在示例中使用了一些来澄清我想要选择哪个元素);)
javascript ×8
css ×4
canvas ×3
fabricjs ×3
html ×3
html5-canvas ×3
angularjs ×2
module ×2
node.js ×2
blending ×1
browserify ×1
css-position ×1
css3 ×1
epsilon ×1
firefox ×1
flexbox ×1
fullscreen ×1
ipc ×1
jquery ×1
pseudo-class ×1
selection ×1
transform ×1