[ 跟着月影学 JavaScript | 青训营笔记]

这是我参与「第五届青训营 」伴学笔记创作活动的第 3天。

一、视频课笔记：

1.本堂课重点内容：如何写好JavaScript，写好JS的原则，JS组建封装，JS编程范式，JS代码需要关注方面。

2.详细知识点介绍：

写好JS的原则：

1. 各司其职：
   • 应当避免不必要的由JS直接操作样式。
   • 可以用class来表示状态。
   • 纯展示类交互寻求零JS方案。
2. 组建封装：
   • 组件设计的原则：封装性、正确性、扩展性、复用性。
   • 实现组件的步骤：结构设计、展现效果、行为设计。
   • 三次重构：插件化、模板化、抽象化。
3. 过程抽象：
   • 用来处理局部细节控制的一些方法。
   • 函数式编程思想的基础应用。

高阶函数（HOF）:以函数作为参数、以函数作为返回值、常用于函数装饰器。 装饰器、编程范式、命令行与声明式。

写好代码要关注：风格、效率、约定、设计、使用场景。

二、实践练习例子：

笑话生成器：

JavaScript代码：

//1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS 
var customName = document.getElementById('customname'); 
var randomize = document.querySelector('.randomize'); 
var story = document.querySelector('.story'); 

function randomValueFromArray(array){ 
return array[Math.floor(Math.random()*array.length)]; 
} 
//2. RAW TEXT STRINGS 
var storyText ='It was 94 farenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but he was not surprised — :insertx: weighs 300 pounds, and it was a hot day.'; 
var insertX = ['Willy the Goblin', 'Big Daddy', 'Father Christmas']; 
var insertY = ['the soup kitchen', 'Disneyland', 'the White House']; 
var insertZ = ['spontaneously combusted', 'melted into a puddle on the sidewalk', 'turned into a slug and crawled away']; 
//3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION randomize.addEventListener('click', result); 
function result() { 
var newStory = storyText; 
var xItem = randomValueFromArray(insertX); 
var yItem = randomValueFromArray(insertY); 
var zItem = randomValueFromArray(insertZ); 
for (i = 0; i<3; i++){ 
newStory = newStory.replace(':insertx:', xItem); 
} 
newStory = newStory.replace(':inserty:', yItem); 
newStory = newStory.replace(':insertz:', zItem);
if(customName.value != '') { 
var name = customName.value; 
newStory = newStory.replace('Bob',name.toUpperCase()); } if(document.getElementById("uk").checked) { 
var weight = Math.round(300) + ' stone'; 
var temperature = Math.round(94) + ' centigrade'; 
newStory = newStory.replace('94 farenheit', temperature); 
newStory = newStory.replace('300 pounds', weight); 
} 
story.textContent = newStory; 
story.style.visibility = 'visible';
}

三、个人思考与总结：

1. JavaScript中与Java语法有不少相似之处学习起来很有感觉。
2. 难点在于实现JavaScript与HTML和CSS交互。