Category: Frontend | Andrewsy's Space

2024-01-19

JavaScript作为一种强大而灵活的编程语言，为开发者提供了丰富的工具和功能。其中，生成器（Generators）是一项引人注目的特性，它们可以帮助我们在编写异步代码时更加轻松地管理流程和状态。本文将深入探讨JavaScript生成器的

2024-01-03

深入理解ES6中的Symbol类型

Frontend

在ES6（ECMAScript 2015）中引入了一种新的基本数据类型——Symbol。Symbol类型的引入丰富了JavaScript语言，为开发者提供了一种独一无二的标识符。本文将深入探讨Symbol的特性、用途以及代码示例。 1. S

2017-03-16

聊聊前端优化手段防抖

Frontend

在前端开发中，防抖（Debouncing） 是一种常用的优化技术，用于处理频繁触发的事件，如浏览器窗口的resize、input输入等。防抖的目标是在事件被触发后，等待一段时间，只执行一次事件处理函数，以避免频繁的重复操作。

防抖的原理很简单：当一个事件被触发时，立即设置一个定时器，在规定的时间内没有再次触发该事件时，执行事件处理函数。如果在定时器规定的时间内再次触发了事件，那么就清除前一个定时器，并重新设置新的定时器。这样，只有在事件停止触发一段时间后，才会执行事件处理函数。

以下是一个防抖的基本实现示例（使用 JavaScript）：

function debounce(func, delay) {
    let timer = null;
    return function () {
        const context = this;
        const args = arguments;

        clearTimeout(timer); // 每次执行时，清除之前的定时器
        timer = setTimeout(function () { //设置新的定时器
            func.apply(context, args);
        }, delay);
    }
}

const debounceFunction = debounce((args) => {
    console.log("Debounce function called", args);
}, 500);

window.addEventListener('resize', debounceFunction);

2015-09-23

The initialization of the angular ngModel

Frontend

Recently, I’ve encoutered a weird problem in the project, it’s about the value of the ngModel. Let me explain the problem. see the code

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css"/>
	<script src="../../bower_components/angular/angular.min.js"></script>
    <script src="../../js/ngModel.js"></script>
</head>
<body ng-app="ModelApp">
	<div class="page-header">
		<h1 class="text-center">ng-model initialize example</h1>
	</div>
	<div class="panel panel-danger" ng-controller="ModelController1">
		<div class="panel-heading">the angular model without initialize:</div>
		<div class="panel-body">
			<div>
				<input type="text" id="myInput1" ng-model="myModel1" value="A"/>
				<label for=""> -> This input tag bundles the ngModel which name is 'myModel1'</label>
			</div>
			<div>
				<input disabled="true" id="displayModelValue1" type="text" value="{{myModel1}}"/>
				<label for=""> -> This input tag displays the value of the above ngModel</label>
			</div>
		</div>
	</div>
</body>
</html>

2015-07-30

Using TSD to improve javascript intellisense of IDE

Frontend

As we know, it’s very difficult to make the IDE to recognise the function of JavaScript, we called code intellisense, because JavaScript is weak language. So how to solve this problem. There is a way.

TSD is TypeScript Definition manager for DefinitelyTyped. It can search and install TypeScript definition files directly from repository. The TypeScript definition file actually is TypeScript file, and TypeScript is strong type language. So IDE can intellisense the code, like Java and C#.

TypeScipt is also like CoffeeScript, it can be compiled to JavaScript. It is developed by Microsoft company. To See the TypeScript, go to this official website.

2015-06-30

Implicit submission of form when pressing enter key

Frontend

As we know, if we want to submit data in the form, we just need to create a input or button element in the form and give them the submit value to the type attribute. Or using javascript to call form.submit().

But there is third way to submit form. That’s the implicit submission of form when pressing the enter key under some situations. The form implicit subbmission supported by all browsers, and html spec strongly recommand do this.

2015-05-20

Analyze call function of javascript

Frontend

The call() function is a fantastic method in javascript. It makes some people confusion some times, like me. Here let us to make it clear.

Syntax

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

thisObj (optional): it’s object which can be act as currently this object.
arg1, arg2, argN (optional) : the parameters which can be passed to the method.

The call method can be used to instead of another object to invoke a method. It can change the object context of a function to a new object which thisObj referenced.

2015-05-19

Destroy your website

Frontend

Ha, Confusion? Don’t, it’s true. Let me introduce to you how to destroy the website you want.
Click the below button:

Use the Arrow key to move the rocket, and press the Space key to fire. And also Press and hold B to find targets which can be destroy.

2015-05-16

AngularJs - angular.extend()

Frontend

The angular.extend() function has very powerful to copy object to another object, including all of properties from the source object(s).

Usage

angular.extend(dst, src);

dst: destination object
src: source object(s)

return: refercen to dst object

2015-03-19

Give me a cup of coffeescript

Frontend

is programming language, which is built on top of `JavaScript`. CoffeeScript compiles into JavaScript that is efficient and consistent with many best practices. And it offers a clean syntax that should appeal to anyone who likes `Python` or `Ruby`.

Actually, The CoffeeScript is just a JavaScript. So you can use any exsiting JavaScript library seamlessly from CoffeeScript. And both client-side and server-side can be written by CoffeeScript. So CoffeeScript can write entire web application completely, not like JavaScript only write client-side.