小编Jos*_*man的帖子

像ExtJS一样编写jQuery UI

我正在尝试为jQuery UI开发一个抽象层,它允许将Widgets定义为与ExtJS类似(或类似)的对象.这是概念:

var mydialog = new $.ui.dialog({

modal:true,
renderTo:'body',
title:'The Windows Tittle',
content:'The content of the Window'


});
Run Code Online (Sandbox Code Playgroud)

现在我可以说:

mydialog.show();
Run Code Online (Sandbox Code Playgroud)

第一步(我认为)是为jQuery添加一个类创建函数,这允许创建类:

$.MYNAMESPACE.dialog = $.Class ({

constructor:function(){}

//methods and properties

});
Run Code Online (Sandbox Code Playgroud)

这里出现了真正的问题:我必须在上一个类定义中将真正的$ .ui.dialog与我的链接联系起来?我的意思是我不想创建一个新的小部件,我只想重用预定义的jQuery UI小部件后面的代码,以创建一个允许带有jQuery UI的OOP的抽象层.

提前致谢

javascript jquery abstraction jquery-ui class

8
推荐指数
1
解决办法
812
查看次数

使用私有属性创建的类

我正在研究一个用javascript创建类的实用程序.它的工作原理,问题是如何定义私有属性.

这是代码

var OO = {

    Class:function(){

        var len = arguments.length;
        var data = arguments[len-1];



        var Klass;
        if (data.constructor === Object){
            Klass = function (){};

        } else {
            Klass = data.constructor;
            delete data.constructor;                
        }



        OO.extend(Klass.prototype,data); //Classic Extend Method


        return Klass;


    },
//Simple extend method, just what I need in this case
    extend: function(target, source){
            var prop;
            for (prop in source)
                target[prop] = source [prop];

    }
}
Run Code Online (Sandbox Code Playgroud)

这是它的工作原理

// first create a class
var person = OO.Class ({
constructor: function (name, …
Run Code Online (Sandbox Code Playgroud)

javascript oop

6
推荐指数
1
解决办法
1365
查看次数

取消绑定匿名函数

有人可以告诉如何"解除绑定"匿名功能吗?JQUERY它能够做到这一点,但我怎么能在我自己的脚本中实现这个功能.

这是场景:

下面的代码将'onclick'事件附加到Div上,其中'someDivId'作为ID,现在你点击DIV,它显示'点击!'.

var a  = document.getElementById('someDivId');
bindEvent(a,'click',function(){alert('clicked!');});
Run Code Online (Sandbox Code Playgroud)

这一切都很棒,问题是如果函数是匿名的,如何将函数"取消附加"到DIV,或者如何将所有附加事件"取消附加"到'a'元素?

unBind(a,'click'); //Not necessarily the given params, it's just an example.
Run Code Online (Sandbox Code Playgroud)

这是bindEvent方法的代码:

function bindEvent (el,evtType,fn){
    if ( el.attachEvent ) {
        el['e'+evtType+fn] = fn;
        el[evtType+fn] = function(){
            fn.call(el,window.event);
        }
        el.attachEvent( 'on'+evtType, el[evtType+fn] );
    } else {
        el.addEventListener( evtType, fn, false );
    }
}
Run Code Online (Sandbox Code Playgroud)

javascript jquery javascript-events

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

如何推断组件的 @Input 的正确类型

我正在寻找一种方法来推断组件的 @Inputs 的正确类型。到目前为止,我只能@Input使用以下命令来定位属性:

// Method in a service
setComponentInputs<T> (props: { [key in keyof T]?: any }) {
   console.log(props);
}
Run Code Online (Sandbox Code Playgroud)

但正如您所看到的,类型仍然是any
另外,当前的方法允许针对组件内的所有内容,包括方法(例如 OnInit),但我不太确定是否有一个技巧可以仅针对 @Inputs。

让我为您提供更多背景信息,这是一个标准的 Angular 组件:

@Component({
  selector: '',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.scss']
})
export class FooComponent implements OnInit {
  @Input() myProp: string;
  @Input() otherProp: CustomProp;

  constructor() {}

  ngOnInit() {
  }
}
Run Code Online (Sandbox Code Playgroud)

这个想法是setComponentInputs(props)在限制 props 参数以匹配组件@Inputs属性的同时进行调用

// this one should compile
myService.setComponentInputs<FooComponent>({myProp: 'Hello there!'});

// this one should raise an error (because the …
Run Code Online (Sandbox Code Playgroud)

strong-typing typescript angular

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

如何发布 NX 库并捆绑其依赖项?

这个问题似乎遍布 GitHub 的 NX 存储库,但是我在那里找不到任何有效的解决方案。

\n

我的工作区包含两个可构建的库:ui/avatarui/icon一个可发布的库,称为bar

\n

我的想法是使用ui/avatarui/icon作为内部 monorepo 库(例如,这些库可以直接导入到应用程序中),但我也想将这 2 个可构建的库封装到npm 包中bar并作为 npm 包发布bar,以便外部消费者可以从中受益。

\n

以下是文件结构的总体概述:

\n
libs\n \xe2\x94\xa3 external\n \xe2\x94\x83 \xe2\x94\x97 bar\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 src\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 lib\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 external-bar.module.ts\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 ng-package.json\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 package.json\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 project.json\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\xa3 tsconfig.json\n \xe2\x94\xa3 ui\n \xe2\x94\x83 \xe2\x94\xa3 avatar\n \xe2\x94\x83 \xe2\x94\x83 …
Run Code Online (Sandbox Code Playgroud)

npm typescript tsconfig angular nrwl-nx

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

this.interceptor.intercept 不是函数 Angular 8

我正在尝试jsonwebtokens在我的 Angular 项目中实现,为此我使用了一个HttpInterceptors. 不幸的是,我面临以下错误:

this.interceptor.intercept 不是函数

我已经搜索了其他 Stackoverflow 线程以应用他们的解决方案,但到目前为止我无法使其工作。

这是我的 TokenInterceptorService

import { Injectable } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {

  constructor() { }
  intercept(req, next) {
    let tokenizedReq = req.clone({
      setHeaders: {
        Authorization: 'Bearer xx.yy.zz'
      }
    });
    return next.handle(tokenizedReq)
  }
}

Run Code Online (Sandbox Code Playgroud)

这是我的 app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import …
Run Code Online (Sandbox Code Playgroud)

http xmlhttprequest angular

4
推荐指数
1
解决办法
2867
查看次数