小编Bil*_*ler的帖子

JavaScript中的类与静态方法

我知道这会奏效:

function Foo() {};
Foo.prototype.talk = function () {
    alert('hello~\n');
};

var a = new Foo;
a.talk(); // 'hello~\n'
Run Code Online (Sandbox Code Playgroud)

但如果我想打电话

Foo.talk() // this will not work
Foo.prototype.talk() // this works correctly
Run Code Online (Sandbox Code Playgroud)

我找到一些方法来做Foo.talk工作,

  1. Foo.__proto__ = Foo.prototype
  2. Foo.talk = Foo.prototype.talk

还有其他方法可以做到这一点吗?我不知道这样做是否正确.您是否在JavaScript代码中使用了类方法或静态方法?

javascript oop

254
推荐指数
7
解决办法
19万
查看次数

TypeScript:强制转换HTMLElement

有谁知道如何使用TypeScript进行投射?

我正在尝试这样做:

var script:HTMLScriptElement = document.getElementsByName("script")[0];
alert(script.type);
Run Code Online (Sandbox Code Playgroud)

但它给了我一个错误:

Cannot convert 'Node' to 'HTMLScriptElement': Type 'Node' is missing property 'defer' from type 'HTMLScriptElement'
(elementName: string) => NodeList
Run Code Online (Sandbox Code Playgroud)

除非我将它转换为正确的类型,否则我无法访问脚本元素的'type'成员,但我不知道如何执行此操作.我搜索了文档和样本,但我找不到任何东西.

typescript

183
推荐指数
8
解决办法
15万
查看次数

检查localStorage是否可用

我知道有很多关于检查的问题localStorage但是如果有人在浏览器中手动关闭它会怎么样?这是我用来检查的代码:

localStorage.setItem('mod', 'mod');
if (localStorage.getItem('mod') != null){
  alert ('yes');
  localStorage.removeItem('mod');
} else {
  alert ('no');
}
Run Code Online (Sandbox Code Playgroud)

功能简单,有效.但是,如果我进入我的Chrome设置并选择"不保存数据"选项(我不记得它的确切名称),当我尝试运行此功能时,我什么也得不到Uncaught Error: SecurityError: DOM Exception 18.那么有没有办法检查这个人是否完全关闭了?

更新:这是我尝试的第二个功能,我仍然没有得到任何响应(警报).

try {
  localStorage.setItem('name', 'Hello World!');
} catch (e) {
  if (e == QUOTA_EXCEEDED_ERR) {
   alert('Quota exceeded!');
  }
}
Run Code Online (Sandbox Code Playgroud)

javascript error-handling local-storage

67
推荐指数
5
解决办法
7万
查看次数

我如何有条件地包装React组件?

我有一个组件,有时需要作为一个锚呈现,其他时候作为一个简单的div.在<anchor>我触发关断的,以确定所需要的是<div>道具.如果它存在,我需要渲染包含在锚点中的组件prop.否则它只是呈现为this.props.url.

可能?

这就是我现在正在做的事情,但感觉它可以简化:

if (this.props.link) {
    return (
        <a href={this.props.link}>
            <i>
                {this.props.count}
            </i>
        </a>
    );
}

return (
    <i className={styles.Icon}>
        {this.props.count}
    </i>
);
Run Code Online (Sandbox Code Playgroud)

更新:

这是最后的锁定.谢谢你的提示,@ Sulthan!

import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';

export default class CommentCount extends Component {

    static propTypes = {
        count: PropTypes.number.isRequired,
        link: PropTypes.string,
        className: PropTypes.string
    }

    render() {
        const styles = require('./CommentCount.css');
        const {link, className, count} = this.props;

        const iconClasses …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs

66
推荐指数
5
解决办法
2万
查看次数

webpack中的模块,块和包是什么?

我无法理解模块,块和捆绑等概念.

{
  entry: {
    foo: ['webpack/hot/only-dev-server.js', './src/foo.js'],
    bar: ['./src/bar.js']
  },
  output: {
    path: './dist',
    filename: '[name].js'
  }
}
Run Code Online (Sandbox Code Playgroud)

在上面的配置中,是only-dev-server.jsfoo.js两个块?是foobar两个捆绑?是foo.jsbar.js两个模块?

webpack

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

React - 如何仅捕获父级的onClick事件而不是子级

我有一个像这样的反应组件的一部分:

var headerElement = someBoolean ? <input/> : 'some string';
return <th onClick={this._onHeaderClick}>{headerElement}</th>;
Run Code Online (Sandbox Code Playgroud)

以及第th个元素的单击处理程序:

_onHeaderClick(event) {
    event.preventDefault();
    console.log(event.target);
},
Run Code Online (Sandbox Code Playgroud)

我想捕获de th元素.当headerElement是'some string'时它工作正常,但是当它是一个输入元素时,input元素是event.target字段中引用的元素.实现这一目标的最佳方法是什么?

javascript dom reactjs

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

理解javascript全局命名空间和闭包

我正在努力提高我对javascript中全局命名空间的理解,我对以下几点感到好奇:

  1. 有一个"GOD"(即父对象)对象,所有对象(因为除了基元之外的所有东西都是对象)要回答,如果是,那么该对象是"窗口"吗?

  2. 为什么在全球范围内拥有变量/函数是个坏主意?

  3. 如果在全局范围内拥有vars /函数真的是个坏主意那么闭包是避免这种情况的最佳方法吗?例:

    function parent(){
        var x = 'some value';//this var would be considered global to all children functions but not in the true global namespace
        function child1(){
            x.someMethod()
        } 
        function child2(){
            x*something;
        }
        function child3(){
            x+=something;
            child2()
            child1()
        }
        child3()
    }
    parent()
    
    Run Code Online (Sandbox Code Playgroud)

javascript closures namespaces global-variables

31
推荐指数
2
解决办法
2万
查看次数

React.useState不会从props重新加载状态

我期望状态在道具更改时重新加载,但这不起作用,并且user变量在下次useState调用时不会更新,这是怎么回事?

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});
  return user.avatar ? 
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}
Run Code Online (Sandbox Code Playgroud)

码笔

reactjs react-hooks

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

Android 4 ICS冰淇淋三明治 - 包含表格的iframe

Android 4在用户关注时重复输入.这个重复输入位于实际输入的顶部,它的功能非常正常.这很奇怪,但好吧,它似乎工作.

但是,如果这些输入位于iframe中,则复制的输入不再呈现在原始输入的顶部,而是呈现在不同的位置.

屏幕截图(重复输入包含蓝色边框,左上角):重复输入包含蓝色边框,左上角

据我所知,它实际上渲染了这个重复的输入,好像父HTML文档根本不存在.例如,如果在iframe中添加一些margin-top,则重复输入会将其考虑在内.

我已经为您的调试享受创建了一个实例:

http://ghettocooler.net/stuff/code/android-ics-iframe/

有任何想法吗?谢谢!

forms iframe android android-browser

10
推荐指数
1
解决办法
2176
查看次数

为什么在ES6中没有使用类绑定的对象创建方法?

我喜欢ES6类但我无法理解为什么我必须在这样的构造函数中绑定方法:

constructor() {
    this.someMethod = this.someMethod.bind(this)
}
Run Code Online (Sandbox Code Playgroud)

对于任何方法我都需要这样做.

这是一个真正的限制还是我错过了什么?这背后的原因是什么?我知道JS中的类只是语法糖,但这可能是它们的一部分.

javascript oop methods class ecmascript-6

10
推荐指数
1
解决办法
2428
查看次数