Products
GG网络技术分享 2025-03-18 16:13 0
我个人的情况是有1年web前端工作经验+半年的实习经验，2020年毕业，大一的时候学过C语言，所以一直对于编程感兴趣。我是从大三开学后正式开始自学web前端相关的知识，之所以选择前端方向，一方面是自己对于网页更加感兴趣，二是听我哥说目前web前端的发展趋势更好（我哥在网易做程序员），所以我就确立了前端方向为以后我就业的主要方向。从开始自学到大四的实习，我一共花了1年2个月时间，把前端主要的技术点和框架都过了一遍，自己做了三个Vue的项目实战。然后在2019年的10月份进入了杭州当地的一家公司实习半年，一直到2020年4月在这家公司转正，待遇是月薪12K*14薪+五险一金。目前算上实习的时间，我已经在这家公司工作一年半多的时间，我并不打算跳槽，我哥说的意思就是，尽量别因为工资高低的问题频繁跳槽，如果这家公司还有很多成长的空间，还能学到很多东西，就不要轻易跳槽。因为我在自学一年的过程中，我哥给了我很多的帮助，所以他的建议我是一定要听的，而且我觉得确实是这样的道理。因为我是刚毕业一年的，所以这篇文章主要也是写给在校的学弟们一些建议，希望能给大家带来帮助。
说明：下面的内容就是我一年时间全部掌握的内容，为什么我会列得如此之细，重点就在这里，其实这些技术都是大家平时可以接触到的，我们在实际的开发工作中用的也都是这些技术，只不过不同的是大家掌握的程度不一样。我们学的技术名称可能是一样的，但是我们对于这门技术所理解的深度以及掌握的实际操作水平可能相差很多，这就是我一个二本学历为什么可以在毕业后第一份工作就拿到12K，我觉得是这个原因，就是因为我学得非常细，所以希望大家不要抱怨内容太多，你要是真想在前端这个领域成为技术大牛，这都是必须要做的。
一定要看到最后，有所有前端学习资料的链接！
一定要看到最后，有所有前端学习资料的链接！
一定要看到最后，有所有前端学习资料的链接！
1、ECMAScript
2、DOM/BOM
3、JS业务应用扩展
4、ECMAScript5 --- ECMAScript9扩展
1、HTML5标签与API
2、常用类库/工具
jquery：元素选择、增删改差、事件处理、位置获取、动画过渡、高级方法、特效应用
zepto：移动端的jquery、DOM操作、移动端事件、click延迟处理、touch事件组
基础UI库：layerUI 、easyUI、bootStrap、UI模块化、UI库使用技巧、文档解读、案例调试、表单系统iScroll、touchjs等移动端事件库使用
swiper：移动端网站触摸滑动、轮播图插件、模块化应用、源码解读
art-template：模板引擎 模板语法、渲染方法、原生模板引擎实现
CSS预处理：sass、less使用 stylus深入学习 、预处理语法、css编程、 Minxin 、预处理函数、继承、嵌套vscode高级插件与配置 liveserver sass 模板化应用 、预处理应用
3、date-picker移动端原生组件开发
1、Node原生基础
2、Node框架
3、webpack工程化构建
4、前后端数据交互
5、RESTful接口设计
6、数据库存储
1、vue基础
2、vue工程化
3、vue Router
4、vuex
如果学弟们可以掌握上述内容，我认为找到10K以上的工作没有任何问题。根据我的观察，目前网上很多机构的前端课程都是偷工减料，很多前端里面的知识点都是能删就删，400多课时的内容被压缩到180课时，所以就导致了现在很多人学习前端，但是很难找到工作的一个主要原因。如果不是我哥是做这方面的，我感觉自己应该会跟大多数人一样，学的内容都是欠缺很多，可能连工作都找不到，更不要说可以找到12K的前端开发工作。所以我觉得尽量要找一个身边的亲戚朋友做这方面的带带自己，不然一个人真的太容易走弯路。
因为链接不让发，想要获取教程的朋友，可以私信我“前端”
这套教程就是对应着我上面总结的前端技术栈，这是我目前看到最好的前端课程，要比网上大部分教程讲得要好，特点就是更加的细致，很多实际开发的问题都有讲到，很注意前端方面的规范问题，这在很多前端教程中都是没有的，所以我认为更加适合新手学习就业。
喜欢阅读文字的学弟们可以看看这些书籍，这都是我挑出来比较经典的JavaScript技术书籍。
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。而很多同学不会学习，只是每天看视频，而不去写代码写项目实践，这样的学习状态是错误的。在整个学习过程中会出现很多问题，不懂就问，忘了就查，学习编程是一个漫长的过程，需要有足够的耐心和学习的决心。自我摸索自学的过程中会有很大的困难，最后能通过自我摸索自学成功的也是极少数。所以尽量要找一个比较有经验的人去带你，这样才不会走弯路。
在校的大学生一定不能错过大四的秋招，秋招是非常重要的，一般在秋招的时候都是一些比较好的公司，这个时候往往公司的数量也特别多，能走秋招就走秋招。如果秋招没有准备好，就等明年的春招，反正能通过校招进企业就通过校招进，一旦错过了校招，社招就会变得异常艰难。
还有IT圈一个非常重要的规则，就是通过熟人介绍，很多公司都有猎头，这些猎头就是发掘那些技术好的人才，通过各种方式进行挖人，所以通过关系进行内推也是找工作的主要方式，内推要更加容易就业。
再就是自己去投简历，这样找工作的方式就是海投，海投就会比较累，但是如果你技术能力强，也可以找到自己心仪的公司。如果是大学生，我建议一定要通过校招走，在学习的过程中，多认识一些关系，以后打算在这个圈子里面混，少不了认识一些公司的HR资源以及技术方面比较不错的大佬，我是打算干满三年，然后通过我哥在网易的关系把我内推到网易，网易的薪资就高了，去了后直接年薪30万起步，现在就是我积累的过程。
说到 JavaScript 模板引擎，大家首先想到的肯定是 Angular 和 React 这些时下比较流行的项目，它们让前端开发模式变的与传统的 WordPress 主题大不相同。
不同于 WordPress 的使用 PHP 在服务端处理一切，调用模板生成好 HTML 再返回给用户；JavaScript 模板引擎下，服务器只负责处理和生成数据，然后由 JavaScript 在浏览器前端，根据专门为它设计的模板生成出 HTML 代码。
这种开发模式对于制作和用户有大量交互的网站非常有优势，尤其是在使用 AJAX 上传和获取数据时，可以避免很多麻烦。虽然这种技术我很喜欢，也符合未来的发展趋势，但是因为搜索引擎相关的问题的不完善，导致 JavaScript 模板引擎只能在 Web APP 和管理后台之类的网页被使用。
不过，即使在普通网站中不能全面的应用，在一些特殊的地方，小范围的使用 JavaScript 模板生成 HTML 代码也是非常方便的，比如评论列表、设置选项和 AJAX 加载文章列表之类的，不需要搜索引擎抓取，又需要 JavaScript 参与的功能。
在 WordPress 核心中，提供了一个基于 Underscore.js 的简易 JavaScript 模板「引擎」，被主题定制器大量的使用，今天我们就来一起学一下，相信只要合理利用它，就可以完美解决你拼接大量字符串的痛苦。
挂载脚本
function tiezhu_enqueue_scripts() {wp_enqueue_script( \'wp-util\' );
}
add_action( \'wp_enqueue_scripts\', \'tiezhu_enqueue_scripts\' );也可以把它设置成我们的脚本的依赖：
function tiezhu_enqueue_scripts() {wp_enqueue_script(
\'base\',
get_template_directory_uri() . \'/js/base.js\',
array( \'jquery\', \'wp-util\' ),//依赖 wp-util 脚本
\'1.0\'
);
}
add_action( \'wp_enqueue_scripts\', \'tiezhu_enqueue_scripts\' );在大多数情况下，我们会在页面已经加载完成之后，调用模板并传入数据来生成 HTML，但是这些模板存放在哪是个麻烦的问题。首先，模板不能被用户看到，但是如果直接使用 CSS 隐藏，又会产生很大的 SEO 问题。
出于这个原因，我们在这里使用一对 <script> 标签来容纳模板本身，然后把 type 属性设置成 text/template。这样，当浏览器和搜索引擎在看到是 <script> 标签之后，就不会把里边的模板代码当成网页内容，并且，由于无法理解 type 属性的值，也不会当做 JavaScript 代码来执行，是非常完美的解决方案。
<script type=\"text/template\" id=\"tmpl-article\"><!-- 在这里存放模板代码 -->
</script>为了方便调用这个模板，还要给 <script> 标签的 id 参数设置成 tmpl-{id}，在以后的使用中，就可以通过 ID 来指定调用哪个模板。
模板往往是由 HTML 代码和一些动态的标签组成，也可以在里边运行 JavaScript 代码来完成逻辑上的操作。
最常有的语法有三种：
{{ var }} – 输出进行了 HTML 转义的变量。{{{ var }}} – 输出原始变量。<# runCode(); #> – 运行 JavaScript 代码，就像 PHP 模板文件中的 <?php run_code(); ?> 那样。<script type=\"text/template\" id=\"tmpl-article\"><article id=\"post-{{ data.id }}\" class=\"entry\">
<# if ( data.hasThumbnail ) { #>
<div class=\"entry-thumbnail\">
<img src=\"{{ data.thumbnail }}\" />
</div>
<# } #>
<h2 class=\"entry-title\">
<a href=\"{{ data.url }}\">{{ data.title }}</a>
</h2>
<div class=\"entry-summary\">{{{ data.excerpt }}}</div>
</article>
</script>边的例子中，大量的使用了 data 变量，这是我们在调用模板生成 HTML 时所传入的参数（下边会具体讲到），可以通过调用它的属性来动态获取数据，让我们的模板可以被复用。
在制作完成之后，我建议把一个模板单独存放在一个文件中，然后通过 wp_footer 钩子插入到页面底部，这里我直接使用 include 引入了存储模板代码的文件，这样可以保证代码的干净整洁。
function tiezhu_load_article_template() {include( get_template_directory() . \'/templates/article-template.php\' );
}
add_action( \'wp_footer\', \'tiezhu_load_article_template\' );模板准备好了，在生成 HTML 之前，我们首先得有数据，这些数据一般是通过 AJAX 来获取，也可以直接放在 JavaScript 变量或者元素的 data-* 参数里，这个根据需求来决定，怎么方便怎么来。
在服务器中，我们要根据需求生成出数据，然后封装成 JSON，给前端使用。
function Bing_random_posts() {$posts = get_posts( \'orderby=rand&posts_per_page=10\' );
$json = array();
foreach ( $posts as $post ) {
$json[$post->ID] = array(
\'id\' => $post->ID,
\'hasThumbnail\' => has_post_thumbnail( $post->ID ),
\'url\' => get_permalink( $post->ID ),
\'title\' => get_the_title( $post ),
\'excerpt\' => get_the_excerpt( $post )
);
if ( $json[$post->ID][\'hasThumbnail\'] ) {
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$thumbnail = wp_get_attachment_image_src( $thumbnail_id, \'full\' );
$json[$post->ID][\'thumbnail\'] = $thumbnail[0];
}
}
$json = array_values( $json );
wp_send_json( $json );
}
add_action( \'wp_ajax_random-posts\', \'Bing_random_posts\' );
add_action( \'wp_ajax_nopriv_random-posts\', \'Bing_random_posts\' );上边的代码中，制作好数据之后，我们讨巧的使用了 wp_send_json() 函数直接封装并发送 JSON。如果需要直接把数据放在页面里，就得使用 wp_json_encode() 函数来封装 JSON 并获取，然后再在放到我们想要的位置。
<script type=\"text/javascript\">jQuery( document ).on( \'click\', \'.random\', function() {
var posts = \'<?php echo wp_json_encode( $json ); ?>\';
} );
</script>重头戏来了，现在有了模板也有了数据，就差把两者结合到一起，生成出 HTML 代码了。
首先，使用标题中提到的 wp.template() 方法，传入模板的 ID 来初始化它；然后使用返回的方法，传入 data 参数即可生成 HTML，总共说了一句话，就是这么简单。
jQuery( document ).on( \'click\', \'.random\', function() {var content = jQuery( \'#content\' );
content.empty();
jQuery.get( adminAjax, \'action=random-posts\', function( data ) {
var template = wp.template( \'article\' );
for ( var i = data.length - 1; i >= 0; --i ) {
var html = template( data[i] );
content.prepend( html );
}
} );
return false;
} );上边的代码中，调用模板，传入数据，生成出 HTML 代码，再通过 jQuery 的 DOM 操作方法 append()、prepend()、after() 和 before() 把代码插入到想要的位置，或者直接用 html() 方法修改元素的内容。
看到最后，你可能会有点小失望，前边的准备时间那么长，到最后只需要两步走就能完成操作。实际上，这个 JavaScript 模板的功能也就这么多，只能帮你生成 HTML，减少在 JavaScript 代码中大量拼接字符串的痛苦。
但是，如果能够利用好，也能在实际开发中解决大问题。就比如我最近想制作一个点击插件链接，就能直接弹出插件信息的功能，如果把所有插件的弹窗都在 PHP 中生成好 HTML 代码，会导致页面非常庞大，重复代码很多；直接在 JavaScript 中把弹窗代码拼接起来吧，更是让我非常痛苦，所以才盯上了这个模板。
在实际使用过程中，还是在「制作模板」这一步骤的可扩展性最强，因为你可以嵌入任意 JavaScript 代码，各种逻辑都能完成，比如上边所说的插件弹窗，就有一个插件的星级评价显示，这些都可以在模板中完成，PHP 只需要提供分数即可。
Demand feedback