小编nas*_*eez的帖子

在Javascript中使用带有DOM选择的模块化设计模式

我一直在关注模块化设计模式已经有一段时间了,发现它非常有用,因为它有助于维护代码并将块分离到模块中.

经常使用模块结构jQuery导致我的大多数应用程序/代码遵循以下结构:

(function() {
    var chat = {
        websocket: new WebSocket("ws://echo.websocket.org/"),
        that: this,
        init: function() {
            this.scrollToBottom();
            this.bindEvents();
            this.webSocketHandlers();
        },
        bindEvents: function() {
            this.toggleChat();
            this.filterPeople();
            this.compose();
        },
        elements: {
            indicator: $(".indicator"),
            statusText: $(".status-text"),
            chatHeadNames: $(".people li .name"),
            filterInput: $("#filter-input"),
            msgInput: $("#msg-input"),
            sendBtn: $(".send")
        },
        ...
        ...
        ...
        filterPeople: function() {
          var that = this;
          this.elements.chatHeadNames.each(function() {
              $(this).attr('data-search-term', $(this).text().toLowerCase());
          });
        },
        ...
        ...
        };

        chat.init();
})();
Run Code Online (Sandbox Code Playgroud)

我想知道的是,jQuery作为单个变量的一部分引用所有元素是否chat.elements是一个好习惯

我的一部分告诉我,确实是一次引用所有选择器并将它们缓存在变量中的好方法,这样可以使用缓存变量(而不是多个DOM选择)完成相同元素的多次使用.

我的另一部分告诉我这可能是一个反模式,应该选择特定元素并在需要时在本地缓存. …

javascript jquery design-patterns modular-design

15
推荐指数
1
解决办法
1023
查看次数

了解Javascript中的typeof运算符

我遇到了下表,该表说明了[[Class]]对象的内部属性以及typeof操作员返回的相应值。

Value               Class      Type
-------------------------------------
"foo"               String     string
new String("foo")   String     object
1.2                 Number     number
new Number(1.2)     Number     object
true                Boolean    boolean
new Boolean(true)   Boolean    object
new Date()          Date       object
new Error()         Error      object
[1,2,3]             Array      object
new Array(1, 2, 3)  Array      object
new Function("")    Function   function
/abc/g              RegExp     object (function in Nitro/V8)
new RegExp("meow")  RegExp     object (function in Nitro/V8)
{}                  Object     object
new Object()        Object     object
Run Code Online (Sandbox Code Playgroud)

这里要注意的一件事是typeof正确返回Javascript中关联的原始数据类型。

但是,它object为从继承的数组Array.prototype返回一个function …

javascript typeof

5
推荐指数
1
解决办法
539
查看次数

创建一个由Angular应用程序使用的Ahead(AOT)编译库

我有一个Angular 5库,我公开它作为一个包,供其他应用程序使用node_modules.

目前,该应用程序是刚刚在时间使用编译(JIT)rollupgulp并导出为一个包.因此,开发人员应用程序在其JIT编译形式中使用我的包.

关于AOT的研究让我相信任何在AOT编译时的Angular应用程序比浏览器上的JIT对应程序更高效.但是,作为一个库开发人员,我想知道如果我公开我的库AOT编译,应用程序开发人员是否会获得任何性能优势?

我使用ng-bootstrap和许多其他开源库一起在我的模块中创建组件,并在它们之上添加自定义样式或功能.我在模块中使用的所有库是否也需要在他们的AOT表单中,或者我可以使用他们的JIT对应物?

另外,我认为这将是有独立的包我的图书馆是个好主意- packageNamepackageName-aot,使用户有一个选项可以选择他们要使用的任何库.

除了整个代码重构(将模板中使用的私有变量更改为public,删除箭头函数,lambda表达式等)之外,在以AOT形式公开我的库模块之前还需要记住什么吗?

由于某些约束,我无法使用Angular CLI,因此必须依赖于@ngtools/webpack获取AOT编译(如果有的话).

目前,我tsconfig.json有以下选择:

"angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMedtadataEmit": true,
    "fullTemplateTypeCheck": true
}
Run Code Online (Sandbox Code Playgroud)

我在互联网上搜索了很多,但是Angular AOT文档非常模糊,对于我在这里尝试做的事情并不是很清楚.任何方向都会非常有用.
谢谢!

javascript aot angular2-aot angular angular5

5
推荐指数
1
解决办法
593
查看次数

我的内容周围有未知的白色边框

我创建了一个非常简单的页面,只有几个元素。我的“内容 div”周围有白色边框,无法弄清楚是什么原因造成的。它仅出现在我的内容的顶部和左侧。我尝试用 .body { border: 0; 删除它 },但这没有帮助。还有一些与我的 CSS 有关的其他问题,但已解决。

这是我的 HTML 代码:

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8' />
    <title>Olivera Miletic graphic desig</title>
    <link rel='stylesheet' href='style.css' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="mainText">
            <p> OLI<span class="secondColor">APPARENTLY </p>
             <p class="stayTuned"> SOON. STAY TUNED. </p>
          </div>
                  <div>
                      <p class="meanWhile"> meanwhile <a href="http://www.oliveramiletic.com" target="_blank"> WORK </a> / <a href="https://www.behance.net/olivera_m" target="_blank"> BE </a> / <a href="https://twitter.com/oliapparently" target="_blank"> TW </a> / <a href="mailto:miletic.olivera@gmail.com" > MAIL </a>
                      </p>
                 </div>
          </div>
      </body> …
Run Code Online (Sandbox Code Playgroud)

html css margin

3
推荐指数
1
解决办法
1万
查看次数

使用变量刷新JS函数

function checkDownload(a, b) {
    var number = a;
    var id = b;

    //NOT RELATED CODE....
    setTimeout("checkDownload(number,id)", 5000);
}
checkDownload("test", "test1");
Run Code Online (Sandbox Code Playgroud)

所以事情是,在setTimeout一个错误来自(找不到变量号)....但为什么呢?我只想用我之前得到的变量在5秒后刷新功能.

问候

javascript jquery

0
推荐指数
1
解决办法
86
查看次数